From 091afcc27d3ffe811508c1b4e36ce59f335e9daa Mon Sep 17 00:00:00 2001
From: Mat Johnson <demotive@gmail.com>
Date: Thu, 28 May 2026 16:52:03 +0100
Subject: [PATCH 1/4] Sketching potential session construction

---
 app/views/layout.html             |   2 +-
 app/views/z-sketching/calc-2.html | 367 ++++++++++++++++++++++++++++++
 app/views/z-sketching/calc.html   | 176 ++++++++++++++
 3 files changed, 544 insertions(+), 1 deletion(-)
 create mode 100644 app/views/z-sketching/calc-2.html
 create mode 100644 app/views/z-sketching/calc.html

diff --git a/app/views/layout.html b/app/views/layout.html
index 81f4e31..b905d17 100755
--- a/app/views/layout.html
+++ b/app/views/layout.html
@@ -51,6 +51,6 @@
 
 {% block bodyEnd %}
   {{ super() }}
-  <script type="module" src="/assets/javascript/application.js"></script>
+  {# <script type="module" src="/assets/javascript/application.js"></script> #}
   {% block pageScripts %}{% endblock %}
 {% endblock %}
diff --git a/app/views/z-sketching/calc-2.html b/app/views/z-sketching/calc-2.html
new file mode 100644
index 0000000..1986743
--- /dev/null
+++ b/app/views/z-sketching/calc-2.html
@@ -0,0 +1,367 @@
+<!-- Use this page as the index for your project -->
+
+<!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
+
+<!-- Extends the layout from /app/views/layout.html -->
+{% extends 'layout.html' %}
+<!--
+  In /app/views/layout.html you can:
+    - change the header and footer
+    - add custom CSS and JavaScript
+-->
+
+<!--
+  Use this to set the page name which will appear at the
+  start of the <title> tag, followed by the service name.
+  This is often not needed on the homepage, where only the
+  service name is needed. You can also reuse this variable
+  within the <h1>, where they are the same.
+-->
+{% set pageName = "" %}
+
+<!-- For adding a breadcrumb or back link -->
+<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs and https://service-manual.nhs.uk/design-system/components/back-link -->
+{% block beforeContent %}
+{% endblock %}
+
+<!-- For adding page content -->
+<!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
+{% block content %}
+<style>
+  .slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
+
+  .slot {
+    background-color: #fff;
+    border: 2px solid #212b32;
+    padding: 10px 12px;
+    cursor: pointer;
+    user-select: none;
+  }
+  .slot:hover { background: var(--color-background-secondary); }
+  .slot.selected {
+    border: 2px solid #212b32;
+    outline: 4px solid #ffeb3b;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 2px #212b32;
+  }
+  .slot.is-hold { background: transparent; border-style: dashed; }
+  .slot.is-merged { border-left: 2px solid red; }
+  .slot-end { font-size: 14px; margin-top: 2px; }
+  .slot-tag { font-size: 11px; margin-top: 4px; font-weight: 500; }
+  .slot-attrs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
+
+  .side-panel { display: none; }
+  .side-panel.visible { display: block; }
+  .panel-item { display: block; cursor: pointer; }
+  .panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
+
+  .attr-modal-bg { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; }
+  .attr-modal-bg.visible { display: flex; }
+  .attr-modal { background: var(--color-background-primary); border-radius: var(--border-radius-lg); padding: 1.25rem 1.5rem; width: 320px; border: 0.5px solid var(--color-border-secondary); }
+  .attr-modal h3 { font-size: 16px; font-weight: 500; margin: 0 0 4px; color: var(--color-text-primary); }
+  .attr-modal p { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 1rem; }
+  .attr-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
+  .attr-list li { display: flex; align-items: center; gap: 4px; background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 4px 10px; font-size: 13px; color: var(--color-text-primary); }
+  .attr-list li button { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 0; line-height: 1; font-size: 14px; }
+  .attr-list li button:hover { color: var(--color-text-danger); }
+  .attr-add-row { display: flex; gap: 8px; }
+  .attr-add-row input { flex: 1; font-size: 14px; }
+  .attr-add-row button { font-size: 13px; white-space: nowrap; }
+  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1rem; border-top: 0.5px solid var(--color-border-tertiary); padding-top: 1rem; }
+</style>
+
+
+
+
+  <style>
+
+  #form-grid {
+    display: grid; grid-template-columns: repeat(2, 120px) auto; gap: 12px; align-items: start;
+  }
+  </style>
+
+  <h1 class="nhsuk-heading-l">Session setup</h1>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      <div id="form-grid">
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="start-time">
+            Start time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="start-time" value="09:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="end-time">
+            End time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="end-time" value="17:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="slot-length">
+            Slot length, in minutes
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-2" type="number" id="slot-length" value="6" min="1" max="720" step="1">
+        </div>
+      </div>
+      <div id="slot-len-error">Enter a whole number between 1 and 720</div>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row nhsuk-card-group nhsuk-u-visually-hidden">
+    <div class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+    </div>
+    <div class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
+      <div class="nhsuk-card">
+        <div class="nhsuk-card__content">
+          <span class="nhsuk-u-font-size-36" id="hold-slots">0</span> held
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+      <div id="slots-container"></div>
+      <p class="nhsuk-hint nhsuk-u-font-size-14 nhsuk-u-margin-top-4">Click to select · Shift+click for a range · ⌘/Ctrl+click for multiple</p>
+    </div>
+    <div class="nhsuk-grid-column-one-third">
+      <div class="nhsuk-card">
+        <div class="nhsuk-card__content">
+          <span class="nhsuk-u-font-size-26" id="available-slots">0</span> available of <span id="total-slots">0</span>
+        </div>
+      </div>
+      <div class="side-panel" id="side-panel">
+        <h3 class="nhsuk-heading-s">With selected:</h3>
+        <ul class="nhsuk-list">
+          <li><a class="panel-item" id="panel-hold">Hold</a></li>
+          <li><a class="panel-item" id="panel-unhold" style="display:none">Remove hold</a></li>
+          <li><a class="panel-item" id="panel-merge">Merge</a></li>
+          <!--<a class="panel-item" id="panel-attrs">Add attributes</a>-->
+        </ul>
+        <hr>
+        <a class="panel-item" id="panel-deselect">Deselect all</a>
+      </div>
+    </div>
+  </div>
+
+
+
+  <div class="attr-modal-bg" id="attr-modal-bg">
+    <div class="attr-modal">
+      <h3>Special attributes</h3>
+      <p id="attr-modal-desc">Applying to selected slot(s)</p>
+      <ul class="attr-list" id="attr-list"></ul>
+      <div class="attr-add-row">
+        <input type="text" id="attr-input" placeholder="Add attribute (e.g. VIP, Walk-in)">
+        <button id="attr-add-btn"><i class="ti ti-plus" aria-hidden="true"></i> Add</button>
+      </div>
+      <div class="modal-actions">
+        <button id="attr-cancel">Cancel</button>
+        <button id="attr-save">Save</button>
+      </div>
+    </div>
+  </div>
+
+{% endblock %}
+
+{% block pageScripts %}
+  <script type="text/javascript">
+  let slotData = [];
+  let selectedIndices = new Set();
+  let lastClickedIndex = null;
+
+  function parseMinutes(t) { if(!t) return null; const [h,m]=t.split(':').map(Number); return h*60+m; }
+  function formatTime(m) { const h=Math.floor(m/60)%24,mn=m%60; return `${String(h).padStart(2,'0')}:${String(mn).padStart(2,'0')}`; }
+  function formatDuration(m) { if(m<60) return `${m}m`; const h=Math.floor(m/60),mn=m%60; return mn===0?`${h}h`:`${h}h ${mn}m`; }
+
+  function isConsecutive(indices) {
+    if(indices.length < 2) return false;
+    const sorted=[...indices].sort((a,b)=>a-b);
+    for(let i=1;i<sorted.length;i++) if(sorted[i]!==sorted[i-1]+1) return false;
+    return true;
+  }
+
+  function render() {
+    const startVal=document.getElementById('start-time').value;
+    const endVal=document.getElementById('end-time').value;
+    const slotInput=document.getElementById('slot-length');
+    const errorEl=document.getElementById('slot-len-error');
+    const container=document.getElementById('slots-container');
+    const rawVal=slotInput.value.trim();
+    const slotLen=parseInt(rawVal,10);
+    const isValid=rawVal!==''&&Number.isInteger(slotLen)&&slotLen>=1&&slotLen<=720&&String(slotLen)===rawVal;
+    if(!isValid) { errorEl.style.display='block'; container.innerHTML=''; setStats(); return; }
+    errorEl.style.display='none';
+    const startMins=parseMinutes(startVal), endMins=parseMinutes(endVal);
+    if(!startVal||!endVal||endMins<=startMins) {
+      container.innerHTML='<div>Set a valid start time before end time.</div>';
+      setStats(); return;
+    }
+    const totalMins=endMins-startMins;
+    const slotCount=Math.floor(totalMins/slotLen);
+    if(slotCount===0) { container.innerHTML='<div>No complete slots fit in this window.</div>'; setStats(); return; }
+
+    const prevData=[...slotData];
+    slotData=[];
+    for(let i=0;i<slotCount;i++) {
+      const s=startMins+i*slotLen, e=s+slotLen;
+      const key=`${formatTime(s)}-${formatTime(e)}`;
+      const prev=prevData.find(d=>d.key===key)||{};
+      slotData.push({ idx:i, start:s, end:e, key,
+        hold:prev.hold||false, merged:prev.merged||false, mergedEnd:prev.mergedEnd||null,
+        attrs:prev.attrs||[], mergedSkip:prev.mergedSkip||false });
+    }
+    selectedIndices=new Set([...selectedIndices].filter(i=>i<slotCount));
+    renderGrid();
+    setStats(totalMins, slotLen);
+  }
+
+  function renderGrid() {
+    const container=document.getElementById('slots-container');
+    const grid=document.createElement('div'); grid.className='slots-grid';
+    slotData.forEach((sd,i)=>{
+      if(sd.mergedSkip) return;
+      const div=document.createElement('div');
+      const classes=['slot'];
+      if(selectedIndices.has(i)) classes.push('selected');
+      if(sd.merged) classes.push('is-merged');
+      else if(sd.hold) classes.push('is-hold');
+      div.className=classes.join(' ');
+      const endTime=sd.mergedEnd||formatTime(sd.end);
+      div.innerHTML=`<div class="slot-time">${formatTime(sd.start)}</div><div class="slot-end">to ${endTime}</div>`;
+      if(sd.merged) div.innerHTML+=`<div class="slot-tag" style="color:var(--color-text-success)">Merged</div>`;
+      else if(sd.hold) div.innerHTML+=`<div class="slot-tag">Held</div>`;
+      if(sd.attrs&&sd.attrs.length) {
+        const row=document.createElement('div'); row.className='slot-attrs';
+        sd.attrs.forEach(a=>{ const p=document.createElement('span'); p.textContent=a; row.appendChild(p); });
+        div.appendChild(row);
+      }
+      div.addEventListener('click', e=>handleSlotClick(e,i));
+      grid.appendChild(div);
+    });
+    container.innerHTML=''; container.appendChild(grid);
+    updatePanel();
+    console.log(slotData);
+  }
+
+  function handleSlotClick(e, i) {
+    if(e.shiftKey && lastClickedIndex!==null) {
+      const lo=Math.min(lastClickedIndex,i), hi=Math.max(lastClickedIndex,i);
+      for(let j=lo;j<=hi;j++) selectedIndices.add(j);
+    } else if(e.metaKey||e.ctrlKey) {
+      if(selectedIndices.has(i)) selectedIndices.delete(i); else selectedIndices.add(i);
+    } else {
+      if(selectedIndices.size===1&&selectedIndices.has(i)) {
+        selectedIndices.clear();
+      } else {
+        selectedIndices.clear(); selectedIndices.add(i);
+      }
+    }
+    lastClickedIndex=i;
+    renderGrid();
+  }
+
+  function updatePanel() {
+    const panel=document.getElementById('side-panel');
+    const n=selectedIndices.size;
+    if(n===0) { panel.classList.remove('visible'); return; }
+    panel.classList.add('visible');
+    const sel=[...selectedIndices].sort((a,b)=>a-b);
+    const anyHold=sel.some(i=>slotData[i]?.hold);
+    document.getElementById('panel-hold').style.display=anyHold?'none':'flex';
+    document.getElementById('panel-unhold').style.display=anyHold?'flex':'none';
+    const consec=isConsecutive(sel);
+    document.getElementById('panel-merge').classList.toggle('disabled', !consec);
+  }
+
+  function setStats(totalMins, slotLen) {
+    const count=slotData.filter(s=>!s.mergedSkip).length;
+    const holdC=slotData.filter(s=>!s.mergedSkip&&s.hold).length;
+    const avail=count-holdC;
+    document.getElementById('total-slots').textContent=count||'—';
+    document.getElementById('available-slots').textContent=count?avail:'—';
+    document.getElementById('hold-slots').textContent=holdC;
+  }
+
+  function commit() {
+    renderGrid();
+    const startMins=parseMinutes(document.getElementById('start-time').value);
+    const endMins=parseMinutes(document.getElementById('end-time').value);
+    const slotLen=parseInt(document.getElementById('slot-length').value,10);
+    setStats(endMins-startMins, slotLen);
+  }
+
+  document.getElementById('panel-hold').addEventListener('click',()=>{
+    [...selectedIndices].forEach(i=>{ if(slotData[i]) slotData[i].hold=true; });
+    selectedIndices.clear(); commit();
+  });
+  document.getElementById('panel-unhold').addEventListener('click',()=>{
+    [...selectedIndices].forEach(i=>{ if(slotData[i]) slotData[i].hold=false; });
+    selectedIndices.clear(); commit();
+  });
+  document.getElementById('panel-merge').addEventListener('click',()=>{
+    const sel=[...selectedIndices].sort((a,b)=>a-b);
+    if(!isConsecutive(sel)) return;
+    const first=sel[0], last=sel[sel.length-1];
+    slotData[first].merged=true;
+    slotData[first].mergedEnd=formatTime(slotData[last].end);
+    for(let j=first+1;j<=last;j++) slotData[j].mergedSkip=true;
+    selectedIndices.clear(); commit();
+  });
+  document.getElementById('panel-deselect').addEventListener('click',()=>{ selectedIndices.clear(); renderGrid(); });
+
+  let attrTargetSlots=[];
+  /*document.getElementById('panel-attrs').addEventListener('click',()=>{
+    attrTargetSlots=[...selectedIndices];
+    const existing=[...new Set(attrTargetSlots.flatMap(i=>slotData[i]?.attrs||[]))];
+    const list=document.getElementById('attr-list'); list.innerHTML='';
+    existing.forEach(a=>addAttrTag(a));
+    document.getElementById('attr-input').value='';
+    const n=attrTargetSlots.length;
+    document.getElementById('attr-modal-desc').textContent=`Applying to ${n} slot${n!==1?'s':''}`;
+    document.getElementById('attr-modal-bg').classList.add('visible');
+    setTimeout(()=>document.getElementById('attr-input').focus(),50);
+  });*/
+
+  function addAttrTag(val) {
+    if(!val.trim()) return;
+    const list=document.getElementById('attr-list');
+    const existing=[...list.querySelectorAll('li')].map(li=>li.dataset.val);
+    if(existing.includes(val)) return;
+    const li=document.createElement('li'); li.dataset.val=val;
+    li.innerHTML=`${val}<button aria-label="Remove ${val}"><i class="ti ti-x" aria-hidden="true"></i></button>`;
+    li.querySelector('button').addEventListener('click',()=>li.remove());
+    list.appendChild(li);
+  }
+
+  document.getElementById('attr-add-btn').addEventListener('click',()=>{
+    const inp=document.getElementById('attr-input');
+    addAttrTag(inp.value.trim()); inp.value=''; inp.focus();
+  });
+  document.getElementById('attr-input').addEventListener('keydown',e=>{ if(e.key==='Enter'){e.preventDefault();document.getElementById('attr-add-btn').click();} });
+  document.getElementById('attr-cancel').addEventListener('click',()=>{
+    document.getElementById('attr-modal-bg').classList.remove('visible');
+    selectedIndices.clear(); renderGrid();
+  });
+  document.getElementById('attr-save').addEventListener('click',()=>{
+    const tags=[...document.getElementById('attr-list').querySelectorAll('li')].map(li=>li.dataset.val);
+    attrTargetSlots.forEach(i=>{ if(slotData[i]) slotData[i].attrs=tags; });
+    document.getElementById('attr-modal-bg').classList.remove('visible');
+    selectedIndices.clear(); commit();
+  });
+
+  document.addEventListener('keydown',e=>{
+    if(e.key==='Escape'){
+      selectedIndices.clear(); renderGrid();
+      document.getElementById('attr-modal-bg').classList.remove('visible');
+    }
+  });
+
+  document.getElementById('start-time').addEventListener('input',render);
+  document.getElementById('end-time').addEventListener('input',render);
+  document.getElementById('slot-length').addEventListener('input',render);
+  render();
+  </script>
+{% endblock %}
diff --git a/app/views/z-sketching/calc.html b/app/views/z-sketching/calc.html
new file mode 100644
index 0000000..8c0d442
--- /dev/null
+++ b/app/views/z-sketching/calc.html
@@ -0,0 +1,176 @@
+<!-- Use this page as the index for your project -->
+
+<!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
+
+<!-- Extends the layout from /app/views/layout.html -->
+{% extends 'layout.html' %}
+<!--
+  In /app/views/layout.html you can:
+    - change the header and footer
+    - add custom CSS and JavaScript
+-->
+
+<!--
+  Use this to set the page name which will appear at the
+  start of the <title> tag, followed by the service name.
+  This is often not needed on the homepage, where only the
+  service name is needed. You can also reuse this variable
+  within the <h1>, where they are the same.
+-->
+{% set pageName = "" %}
+
+<!-- For adding a breadcrumb or back link -->
+<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs and https://service-manual.nhs.uk/design-system/components/back-link -->
+{% block beforeContent %}
+{% endblock %}
+
+<!-- For adding page content -->
+<!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
+{% block content %}
+  <style>
+  .slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
+  .slot { background: #fff; outline: 1px solid #aeb7bd; padding: 4px; }
+
+  #form-grid {
+    display: grid; grid-template-columns: repeat(2, 120px) auto; gap: 12px; align-items: start;
+  }
+  </style>
+
+  <h1 class="nhsuk-heading-l">Session setup</h1>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+
+      <div id="form-grid">
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="start-time">
+            Start time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="start-time" value="09:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="end-time">
+            End time
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-5" type="time" id="end-time" value="17:00">
+        </div>
+        <div class="nhsuk-form-group">
+          <label class="nhsuk-label" for="slot-length">
+            Slot length, in minutes
+          </label>
+          <input class="nhsuk-input nhsuk-input--width-2" type="number" id="slot-length" value="6" min="1" max="720" step="1">
+        </div>
+      </div>
+      <div id="slot-len-error">Enter a whole number between 1 and 720</div>
+
+      <p>Session length: <span id="total-time">—</span>, containing <span id="slots-label">-</span></p>
+      <p>Slots available to auto-book: <span id="available-slots">0</span>, slots being held: <span id="hold-slots">0</span></p>
+    </div>
+  </div>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-three-quarters">
+      <p class="nhsuk-body-s">Click to select, shift+click for a range, ⌘/Ctrl+click for multiple</p>
+      <div id="slots-container"></div>
+    </div>
+    <div class="nhsuk-grid-column-one-quarter">
+      <div class="side-panel" id="side-panel">
+        <div class="side-panel-title" id="panel-title">1 slot selected</div>
+        <button class="panel-item" id="panel-hold"><i class="ti ti-lock" aria-hidden="true"></i>Set to always hold</button>
+        <button class="panel-item" id="panel-unhold" style="display:none"><i class="ti ti-lock-open" aria-hidden="true"></i>Remove hold</button>
+        <div class="panel-sep"></div>
+        <button class="panel-item" id="panel-merge"><i class="ti ti-arrows-join" aria-hidden="true"></i>Merge slots</button>
+        <div class="panel-sep"></div>
+        <button class="panel-item" id="panel-attrs"><i class="ti ti-tag" aria-hidden="true"></i>Add special attributes</button>
+        <div class="panel-sep"></div>
+        <button class="panel-item danger" id="panel-deselect"><i class="ti ti-x" aria-hidden="true"></i>Deselect all</button>
+      </div>
+  </div>
+{% endblock %}
+
+{% block pageScripts %}
+  <script type="text/javascript">
+
+    function parseMinutes(timeStr) {
+      const [h, m] = timeStr.split(':').map(Number);
+      return h * 60 + m;
+    }
+
+    function formatTime(totalMins) {
+      const h = Math.floor(totalMins / 60) % 24;
+      const m = totalMins % 60;
+      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    }
+
+    function formatDuration(mins) {
+      if (mins < 60) return `${mins} minutes`;
+      const h = Math.floor(mins / 60);
+      const m = mins % 60;
+      return m === 0 ? `${h} hours` : `${h} hours ${m} minutes`;
+    }
+
+    function render() {
+      const startVal = document.getElementById('start-time').value;
+      const endVal = document.getElementById('end-time').value;
+      const slotInput = document.getElementById('slot-length');
+      const errorEl = document.getElementById('slot-len-error');
+      const container = document.getElementById('slots-container');
+
+      const rawVal = slotInput.value.trim();
+      const slotLen = parseInt(rawVal, 10);
+      const isValid = rawVal !== '' && Number.isInteger(slotLen) && slotLen >= 1 && slotLen <= 720 && String(slotLen) === rawVal;
+
+      if (!isValid) {
+        errorEl.style.display = 'block';
+        container.innerHTML = '';
+        document.getElementById('total-time').textContent = '—';
+        return;
+      }
+      errorEl.style.display = 'none';
+
+      const startMins = parseMinutes(startVal);
+      const endMins = parseMinutes(endVal);
+      const totalMins = endMins - startMins;
+
+      if (!startVal || !endVal || endMins <= startMins) {
+        container.innerHTML = '<div>Set a valid start time before end time.</div>';
+        document.getElementById('total-time').textContent = '—';
+        return;
+      }
+
+      const slotCount = Math.floor(totalMins / slotLen);
+
+      document.getElementById('total-time').textContent = formatDuration(totalMins);
+      document.getElementById('slots-label').textContent = `${slotCount} slot${slotCount !== 1 ? 's' : ''} of ${formatDuration(slotLen)} each`;
+
+      if (slotCount === 0) {
+        container.innerHTML = '<div>No complete slots fit. Try a shorter slot length.</div>';
+        return;
+      }
+
+      const grid = document.createElement('div');
+      grid.className = 'slots-grid';
+
+      for (let i = 0; i < slotCount; i++) {
+        const slotStart = startMins + i * slotLen;
+        const slotEnd = slotStart + slotLen;
+        const key = `${formatTime(slotStart)}-${formatTime(slotEnd)}`;
+
+        const div = document.createElement('div');
+        div.className = 'slot';
+        div.innerHTML = `${formatTime(slotStart)} <br><small class="nhsuk-u-secondary-text-colour">to ${formatTime(slotEnd)}</small>`;
+
+        grid.appendChild(div);
+      }
+
+      container.innerHTML = '';
+        container.appendChild(grid);
+      }
+
+    document.getElementById('start-time').addEventListener('input', render);
+    document.getElementById('end-time').addEventListener('input', render);
+    document.getElementById('slot-length').addEventListener('input', render);
+
+    render();
+  </script>
+{% endblock %}

From d246189e76edd711e6d46f5a724bcc1d788d017e Mon Sep 17 00:00:00 2001
From: Mat Johnson <demotive@gmail.com>
Date: Fri, 29 May 2026 15:52:20 +0100
Subject: [PATCH 2/4] Another round

---
 app/views/z-sketching/calc-2.html | 257 ++++++++++++++++++++----------
 1 file changed, 170 insertions(+), 87 deletions(-)

diff --git a/app/views/z-sketching/calc-2.html b/app/views/z-sketching/calc-2.html
index 1986743..bfe2284 100644
--- a/app/views/z-sketching/calc-2.html
+++ b/app/views/z-sketching/calc-2.html
@@ -1,31 +1,10 @@
-<!-- Use this page as the index for your project -->
-
-<!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
-
-<!-- Extends the layout from /app/views/layout.html -->
 {% extends 'layout.html' %}
-<!--
-  In /app/views/layout.html you can:
-    - change the header and footer
-    - add custom CSS and JavaScript
--->
-
-<!--
-  Use this to set the page name which will appear at the
-  start of the <title> tag, followed by the service name.
-  This is often not needed on the homepage, where only the
-  service name is needed. You can also reuse this variable
-  within the <h1>, where they are the same.
--->
+
 {% set pageName = "" %}
 
-<!-- For adding a breadcrumb or back link -->
-<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs and https://service-manual.nhs.uk/design-system/components/back-link -->
 {% block beforeContent %}
 {% endblock %}
 
-<!-- For adding page content -->
-<!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
 {% block content %}
 <style>
   .slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
@@ -136,8 +115,9 @@ <h1 class="nhsuk-heading-l">Session setup</h1>
         <h3 class="nhsuk-heading-s">With selected:</h3>
         <ul class="nhsuk-list">
           <li><a class="panel-item" id="panel-hold">Hold</a></li>
-          <li><a class="panel-item" id="panel-unhold" style="display:none">Remove hold</a></li>
+          <li><a class="panel-item" id="panel-unhold">Remove hold</a></li>
           <li><a class="panel-item" id="panel-merge">Merge</a></li>
+          <li><a class="panel-item" id="panel-unmerge">Unmerge</a></li>
           <!--<a class="panel-item" id="panel-attrs">Add attributes</a>-->
         </ul>
         <hr>
@@ -168,20 +148,43 @@ <h3>Special attributes</h3>
 
 {% block pageScripts %}
   <script type="text/javascript">
-  let slotData = [];
-  let selectedIndices = new Set();
-  let lastClickedIndex = null;
-
-  function parseMinutes(t) { if(!t) return null; const [h,m]=t.split(':').map(Number); return h*60+m; }
-  function formatTime(m) { const h=Math.floor(m/60)%24,mn=m%60; return `${String(h).padStart(2,'0')}:${String(mn).padStart(2,'0')}`; }
-  function formatDuration(m) { if(m<60) return `${m}m`; const h=Math.floor(m/60),mn=m%60; return mn===0?`${h}h`:`${h}h ${mn}m`; }
-
-  function isConsecutive(indices) {
-    if(indices.length < 2) return false;
-    const sorted=[...indices].sort((a,b)=>a-b);
-    for(let i=1;i<sorted.length;i++) if(sorted[i]!==sorted[i-1]+1) return false;
-    return true;
-  }
+    let slotData = [];
+    let selectedIndices = new Set();
+    let lastClickedIndex = null;
+
+    function parseMinutes(t) { if(!t) return null; const [h,m]=t.split(':').map(Number); return h*60+m; }
+    function formatTime(m) { const h=Math.floor(m/60)%24,mn=m%60; return `${String(h).padStart(2,'0')}:${String(mn).padStart(2,'0')}`; }
+    function formatDuration(m) { if(m<60) return `${m}m`; const h=Math.floor(m/60),mn=m%60; return mn===0?`${h}h`:`${h}h ${mn}m`; }
+
+    function isConsecutive(indices) {
+      if(indices.length < 2) return false;
+      const sorted=[...indices].sort((a,b)=>a-b);
+      for(let i=1;i<sorted.length;i++) if(sorted[i]!==sorted[i-1]+1) return false;
+      return true;
+    }
+
+    function unmergeAt(index) {
+      const slot = slotData[index];
+      const parentIndex = slot.isMergedInto ?? index;
+      const parent = slotData[parentIndex];
+
+      if (!parent.merged) return;
+
+      const span = parent.span;
+
+      for (let j = parentIndex; j < parentIndex + span; j++) {
+        if (!slotData[j]) continue;
+
+        slotData[j].merged = false;
+        slotData[j].span = 1;
+        slotData[j].isMergedInto = undefined;
+        slotData[j].mergedEnd = null;
+      }
+    }
+
+    function resolveToMergeHead(i) {
+      return slotData[i].isMergedInto ?? i;
+    }
 
   function render() {
     const startVal=document.getElementById('start-time').value;
@@ -209,9 +212,18 @@ <h3>Special attributes</h3>
       const s=startMins+i*slotLen, e=s+slotLen;
       const key=`${formatTime(s)}-${formatTime(e)}`;
       const prev=prevData.find(d=>d.key===key)||{};
-      slotData.push({ idx:i, start:s, end:e, key,
-        hold:prev.hold||false, merged:prev.merged||false, mergedEnd:prev.mergedEnd||null,
-        attrs:prev.attrs||[], mergedSkip:prev.mergedSkip||false });
+      slotData.push({
+        idx: i,
+        start: s,
+        end: e,
+        key,
+        hold: prev.hold || false,
+        merged: prev.merged || false,
+        span: prev.span || 1,
+        isMergedInto: prev.isMergedInto ?? undefined,
+        mergedEnd: prev.mergedEnd || null,
+        attrs: prev.attrs || []
+      });
     }
     selectedIndices=new Set([...selectedIndices].filter(i=>i<slotCount));
     renderGrid();
@@ -220,65 +232,104 @@ <h3>Special attributes</h3>
 
   function renderGrid() {
     const container=document.getElementById('slots-container');
-    const grid=document.createElement('div'); grid.className='slots-grid';
-    slotData.forEach((sd,i)=>{
-      if(sd.mergedSkip) return;
-      const div=document.createElement('div');
-      const classes=['slot'];
-      if(selectedIndices.has(i)) classes.push('selected');
-      if(sd.merged) classes.push('is-merged');
-      else if(sd.hold) classes.push('is-hold');
-      div.className=classes.join(' ');
-      const endTime=sd.mergedEnd||formatTime(sd.end);
-      div.innerHTML=`<div class="slot-time">${formatTime(sd.start)}</div><div class="slot-end">to ${endTime}</div>`;
-      if(sd.merged) div.innerHTML+=`<div class="slot-tag" style="color:var(--color-text-success)">Merged</div>`;
-      else if(sd.hold) div.innerHTML+=`<div class="slot-tag">Held</div>`;
-      if(sd.attrs&&sd.attrs.length) {
-        const row=document.createElement('div'); row.className='slot-attrs';
-        sd.attrs.forEach(a=>{ const p=document.createElement('span'); p.textContent=a; row.appendChild(p); });
-        div.appendChild(row);
+    const grid=document.createElement('div');
+    grid.className='slots-grid';
+    slotData.forEach((sd, i) => {
+      // skip children (but NOT using mergedSkip anymore)
+      if (sd.isMergedInto !== undefined) return;
+
+      const div = document.createElement('div');
+
+      const classes = ['slot'];
+      if (selectedIndices.has(i)) classes.push('selected');
+      if (sd.merged) classes.push('is-merged');
+      else if (sd.hold) classes.push('is-hold');
+
+      div.className = classes.join(' ');
+
+      // KEY: span across grid
+      div.style.gridColumn = `span ${sd.span || 1}`;
+
+      const endTime = sd.merged
+        ? sd.mergedEnd
+        : formatTime(sd.end);
+
+      div.innerHTML = `
+        <div class="slot-time">${formatTime(sd.start)}</div>
+        <div class="slot-end">to ${endTime}</div>
+      `;
+
+      if (sd.merged) {
+        div.innerHTML += `<div class="slot-tag">Merged (${sd.span})</div>`;
+      } else if (sd.hold) {
+        div.innerHTML += `<div class="slot-tag">Held</div>`;
       }
-      div.addEventListener('click', e=>handleSlotClick(e,i));
+
+      div.addEventListener('click', e => handleSlotClick(e, i));
       grid.appendChild(div);
     });
-    container.innerHTML=''; container.appendChild(grid);
+    container.innerHTML='';
+    container.appendChild(grid);
     updatePanel();
-    console.log(slotData);
   }
 
   function handleSlotClick(e, i) {
-    if(e.shiftKey && lastClickedIndex!==null) {
-      const lo=Math.min(lastClickedIndex,i), hi=Math.max(lastClickedIndex,i);
-      for(let j=lo;j<=hi;j++) selectedIndices.add(j);
-    } else if(e.metaKey||e.ctrlKey) {
-      if(selectedIndices.has(i)) selectedIndices.delete(i); else selectedIndices.add(i);
+    if(e.shiftKey && lastClickedIndex !== null) {
+      const lo = Math.min(lastClickedIndex, i);
+      const hi = Math.max(lastClickedIndex, i);
+      for(let j = lo; j <= hi; j++) {
+        selectedIndices.add(resolveToMergeHead(j));
+      }
+    } else if(e.metaKey || e.ctrlKey) {
+      const head = resolveToMergeHead(i);
+      if(selectedIndices.has(head)) selectedIndices.delete(head);
+      else selectedIndices.add(head);
     } else {
-      if(selectedIndices.size===1&&selectedIndices.has(i)) {
+      const head = resolveToMergeHead(i);
+      if(selectedIndices.size === 1 && selectedIndices.has(head)) {
         selectedIndices.clear();
       } else {
-        selectedIndices.clear(); selectedIndices.add(i);
+        selectedIndices.clear();
+        selectedIndices.add(head);
       }
     }
-    lastClickedIndex=i;
+
+    lastClickedIndex = i;
     renderGrid();
   }
 
   function updatePanel() {
-    const panel=document.getElementById('side-panel');
-    const n=selectedIndices.size;
-    if(n===0) { panel.classList.remove('visible'); return; }
+    const sel = [...selectedIndices].sort((a,b)=>a-b);
+    const panel = document.getElementById('side-panel');
+
+    if (sel.length === 0) {
+      panel.classList.remove('visible');
+      return;
+    }
     panel.classList.add('visible');
-    const sel=[...selectedIndices].sort((a,b)=>a-b);
-    const anyHold=sel.some(i=>slotData[i]?.hold);
-    document.getElementById('panel-hold').style.display=anyHold?'none':'flex';
-    document.getElementById('panel-unhold').style.display=anyHold?'flex':'none';
-    const consec=isConsecutive(sel);
-    document.getElementById('panel-merge').classList.toggle('disabled', !consec);
+
+    const canMerge =
+      isConsecutive(sel) &&
+      sel.every(i => isSlotFree(i));
+
+    document.getElementById('panel-merge').classList.toggle('disabled', !canMerge);
+
+    const hasMerged = sel.some(i => {
+      const s = slotData[i];
+      return s.merged || s.isMergedInto !== undefined;
+    });
+
+    document.getElementById('panel-unmerge').classList.toggle('disabled', !hasMerged);
+
+    const anyHold = sel.some(i => slotData[i]?.hold);
+
+    document.getElementById('panel-hold').style.display = anyHold ? 'none' : 'flex';
+    document.getElementById('panel-unhold').style.display = anyHold ? 'flex' : 'none';
   }
 
   function setStats(totalMins, slotLen) {
-    const count=slotData.filter(s=>!s.mergedSkip).length;
-    const holdC=slotData.filter(s=>!s.mergedSkip&&s.hold).length;
+    const count = slotData.length;
+    const holdC=slotData.filter(s=>s.hold).length;
     const avail=count-holdC;
     document.getElementById('total-slots').textContent=count||'—';
     document.getElementById('available-slots').textContent=count?avail:'—';
@@ -301,14 +352,46 @@ <h3>Special attributes</h3>
     [...selectedIndices].forEach(i=>{ if(slotData[i]) slotData[i].hold=false; });
     selectedIndices.clear(); commit();
   });
-  document.getElementById('panel-merge').addEventListener('click',()=>{
-    const sel=[...selectedIndices].sort((a,b)=>a-b);
-    if(!isConsecutive(sel)) return;
-    const first=sel[0], last=sel[sel.length-1];
-    slotData[first].merged=true;
-    slotData[first].mergedEnd=formatTime(slotData[last].end);
-    for(let j=first+1;j<=last;j++) slotData[j].mergedSkip=true;
-    selectedIndices.clear(); commit();
+
+  function isSlotFree(i) {
+    const s = slotData[i];
+    return !s.merged && s.isMergedInto === undefined;
+  }
+
+  document.getElementById('panel-merge').addEventListener('click', () => {
+    const sel = [...selectedIndices].sort((a,b)=>a-b);
+
+    if (!isConsecutive(sel)) return;
+
+    const canMerge = sel.every(i => isSlotFree(i));
+    if (!canMerge) return;
+
+    const first = sel[0];
+    const last = sel[sel.length - 1];
+    const span = sel.length;
+
+    // reset (important when reusing slots)
+    for (let j = first; j <= last; j++) {
+      slotData[j].merged = false;
+      slotData[j].span = 1;
+      slotData[j].isMergedInto = undefined;
+    }
+
+    slotData[first].merged = true;
+    slotData[first].span = span;
+    slotData[first].mergedEnd = formatTime(slotData[last].end);
+
+    for (let j = first + 1; j <= last; j++) {
+      slotData[j].isMergedInto = first;
+    }
+
+    selectedIndices.clear();
+    commit();
+  });
+  document.getElementById('panel-unmerge').addEventListener('click', () => {
+    [...selectedIndices].forEach(i => unmergeAt(i));
+    selectedIndices.clear();
+    commit();
   });
   document.getElementById('panel-deselect').addEventListener('click',()=>{ selectedIndices.clear(); renderGrid(); });
 

From 16aae2f1dc5f354d7478e5390d94c7fa1bf68766 Mon Sep 17 00:00:00 2001
From: Mat Johnson <demotive@gmail.com>
Date: Fri, 29 May 2026 16:40:13 +0100
Subject: [PATCH 3/4] Tweaking logic of hold and merge. Removed all attribute
 code for now.

---
 app/views/z-sketching/calc-2.html | 592 ++++++++++++++++--------------
 1 file changed, 323 insertions(+), 269 deletions(-)

diff --git a/app/views/z-sketching/calc-2.html b/app/views/z-sketching/calc-2.html
index bfe2284..09fe7e3 100644
--- a/app/views/z-sketching/calc-2.html
+++ b/app/views/z-sketching/calc-2.html
@@ -7,7 +7,7 @@
 
 {% block content %}
 <style>
-  .slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
+  .slots-grid { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; }
 
   .slot {
     background-color: #fff;
@@ -15,6 +15,7 @@
     padding: 10px 12px;
     cursor: pointer;
     user-select: none;
+    min-height: 80px;
   }
   .slot:hover { background: var(--color-background-secondary); }
   .slot.selected {
@@ -24,29 +25,18 @@
     box-shadow: inset 0 0 0 2px #212b32;
   }
   .slot.is-hold { background: transparent; border-style: dashed; }
-  .slot.is-merged { border-left: 2px solid red; }
+  .slot.is-merged {}
+  .slot.is-merged.is-hold { border-style: dashed; }
+  .slot.is-merged.is-merged-start { border-radius: 4px 4px 0 0; }
+  .slot.is-merged.is-merged-mid { border-radius: 0; border-top: 1px solid #e0e0e0; }
+  .slot.is-merged.is-merged-end { border-radius: 0 0 4px 4px; border-top: 1px solid #e0e0e0; }
   .slot-end { font-size: 14px; margin-top: 2px; }
   .slot-tag { font-size: 11px; margin-top: 4px; font-weight: 500; }
-  .slot-attrs { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 4px; }
 
   .side-panel { display: none; }
   .side-panel.visible { display: block; }
   .panel-item { display: block; cursor: pointer; }
   .panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
-
-  .attr-modal-bg { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; }
-  .attr-modal-bg.visible { display: flex; }
-  .attr-modal { background: var(--color-background-primary); border-radius: var(--border-radius-lg); padding: 1.25rem 1.5rem; width: 320px; border: 0.5px solid var(--color-border-secondary); }
-  .attr-modal h3 { font-size: 16px; font-weight: 500; margin: 0 0 4px; color: var(--color-text-primary); }
-  .attr-modal p { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 1rem; }
-  .attr-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; }
-  .attr-list li { display: flex; align-items: center; gap: 4px; background: var(--color-background-secondary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); padding: 4px 10px; font-size: 13px; color: var(--color-text-primary); }
-  .attr-list li button { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); padding: 0; line-height: 1; font-size: 14px; }
-  .attr-list li button:hover { color: var(--color-text-danger); }
-  .attr-add-row { display: flex; gap: 8px; }
-  .attr-add-row input { flex: 1; font-size: 14px; }
-  .attr-add-row button { font-size: 13px; white-space: nowrap; }
-  .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1rem; border-top: 0.5px solid var(--color-border-tertiary); padding-top: 1rem; }
 </style>
 
 
@@ -89,8 +79,6 @@ <h1 class="nhsuk-heading-l">Session setup</h1>
   </div>
 
   <div class="nhsuk-grid-row nhsuk-card-group nhsuk-u-visually-hidden">
-    <div class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
-    </div>
     <div class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
       <div class="nhsuk-card">
         <div class="nhsuk-card__content">
@@ -101,11 +89,11 @@ <h1 class="nhsuk-heading-l">Session setup</h1>
   </div>
 
   <div class="nhsuk-grid-row">
-    <div class="nhsuk-grid-column-two-thirds">
+    <div class="nhsuk-grid-column-three-quarters">
       <div id="slots-container"></div>
       <p class="nhsuk-hint nhsuk-u-font-size-14 nhsuk-u-margin-top-4">Click to select · Shift+click for a range · ⌘/Ctrl+click for multiple</p>
     </div>
-    <div class="nhsuk-grid-column-one-third">
+    <div class="nhsuk-grid-column-one-quarter">
       <div class="nhsuk-card">
         <div class="nhsuk-card__content">
           <span class="nhsuk-u-font-size-26" id="available-slots">0</span> available of <span id="total-slots">0</span>
@@ -118,7 +106,6 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
           <li><a class="panel-item" id="panel-unhold">Remove hold</a></li>
           <li><a class="panel-item" id="panel-merge">Merge</a></li>
           <li><a class="panel-item" id="panel-unmerge">Unmerge</a></li>
-          <!--<a class="panel-item" id="panel-attrs">Add attributes</a>-->
         </ul>
         <hr>
         <a class="panel-item" id="panel-deselect">Deselect all</a>
@@ -128,41 +115,54 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
 
 
 
-  <div class="attr-modal-bg" id="attr-modal-bg">
-    <div class="attr-modal">
-      <h3>Special attributes</h3>
-      <p id="attr-modal-desc">Applying to selected slot(s)</p>
-      <ul class="attr-list" id="attr-list"></ul>
-      <div class="attr-add-row">
-        <input type="text" id="attr-input" placeholder="Add attribute (e.g. VIP, Walk-in)">
-        <button id="attr-add-btn"><i class="ti ti-plus" aria-hidden="true"></i> Add</button>
-      </div>
-      <div class="modal-actions">
-        <button id="attr-cancel">Cancel</button>
-        <button id="attr-save">Save</button>
-      </div>
-    </div>
-  </div>
-
 {% endblock %}
 
 {% block pageScripts %}
   <script type="text/javascript">
+    // ========== STATE ==========
     let slotData = [];
     let selectedIndices = new Set();
     let lastClickedIndex = null;
 
-    function parseMinutes(t) { if(!t) return null; const [h,m]=t.split(':').map(Number); return h*60+m; }
-    function formatTime(m) { const h=Math.floor(m/60)%24,mn=m%60; return `${String(h).padStart(2,'0')}:${String(mn).padStart(2,'0')}`; }
-    function formatDuration(m) { if(m<60) return `${m}m`; const h=Math.floor(m/60),mn=m%60; return mn===0?`${h}h`:`${h}h ${mn}m`; }
+    // ========== UTILITY FUNCTIONS ==========
+    function parseMinutes(t) {
+      if (!t) return null;
+      const [h, m] = t.split(':').map(Number);
+      return h * 60 + m;
+    }
+
+    function formatTime(m) {
+      const h = Math.floor(m / 60) % 24;
+      const mn = m % 60;
+      return `${String(h).padStart(2, '0')}:${String(mn).padStart(2, '0')}`;
+    }
+
+    function formatDuration(m) {
+      if (m < 60) return `${m}m`;
+      const h = Math.floor(m / 60);
+      const mn = m % 60;
+      return mn === 0 ? `${h}h` : `${h}h ${mn}m`;
+    }
 
     function isConsecutive(indices) {
-      if(indices.length < 2) return false;
-      const sorted=[...indices].sort((a,b)=>a-b);
-      for(let i=1;i<sorted.length;i++) if(sorted[i]!==sorted[i-1]+1) return false;
+      if (indices.length < 2) return false;
+      const sorted = [...indices].sort((a, b) => a - b);
+      for (let i = 1; i < sorted.length; i++) {
+        if (sorted[i] !== sorted[i - 1] + 1) return false;
+      }
       return true;
     }
 
+    function isSlotFree(i) {
+      const s = slotData[i];
+      return !s.merged && s.isMergedInto === undefined;
+    }
+
+    function resolveToMergeHead(i) {
+      return slotData[i].isMergedInto ?? i;
+    }
+
+    // ========== SLOT MANAGEMENT FUNCTIONS ==========
     function unmergeAt(index) {
       const slot = slotData[index];
       const parentIndex = slot.isMergedInto ?? index;
@@ -171,6 +171,7 @@ <h3>Special attributes</h3>
       if (!parent.merged) return;
 
       const span = parent.span;
+      const parentHold = parent.hold;
 
       for (let j = parentIndex; j < parentIndex + span; j++) {
         if (!slotData[j]) continue;
@@ -179,272 +180,325 @@ <h3>Special attributes</h3>
         slotData[j].span = 1;
         slotData[j].isMergedInto = undefined;
         slotData[j].mergedEnd = null;
+        slotData[j].hold = parentHold;
       }
     }
 
-    function resolveToMergeHead(i) {
-      return slotData[i].isMergedInto ?? i;
-    }
-
-  function render() {
-    const startVal=document.getElementById('start-time').value;
-    const endVal=document.getElementById('end-time').value;
-    const slotInput=document.getElementById('slot-length');
-    const errorEl=document.getElementById('slot-len-error');
-    const container=document.getElementById('slots-container');
-    const rawVal=slotInput.value.trim();
-    const slotLen=parseInt(rawVal,10);
-    const isValid=rawVal!==''&&Number.isInteger(slotLen)&&slotLen>=1&&slotLen<=720&&String(slotLen)===rawVal;
-    if(!isValid) { errorEl.style.display='block'; container.innerHTML=''; setStats(); return; }
-    errorEl.style.display='none';
-    const startMins=parseMinutes(startVal), endMins=parseMinutes(endVal);
-    if(!startVal||!endVal||endMins<=startMins) {
-      container.innerHTML='<div>Set a valid start time before end time.</div>';
-      setStats(); return;
-    }
-    const totalMins=endMins-startMins;
-    const slotCount=Math.floor(totalMins/slotLen);
-    if(slotCount===0) { container.innerHTML='<div>No complete slots fit in this window.</div>'; setStats(); return; }
-
-    const prevData=[...slotData];
-    slotData=[];
-    for(let i=0;i<slotCount;i++) {
-      const s=startMins+i*slotLen, e=s+slotLen;
-      const key=`${formatTime(s)}-${formatTime(e)}`;
-      const prev=prevData.find(d=>d.key===key)||{};
-      slotData.push({
-        idx: i,
-        start: s,
-        end: e,
-        key,
-        hold: prev.hold || false,
-        merged: prev.merged || false,
-        span: prev.span || 1,
-        isMergedInto: prev.isMergedInto ?? undefined,
-        mergedEnd: prev.mergedEnd || null,
-        attrs: prev.attrs || []
+    function holdSlots(indices, hold) {
+      [...indices].forEach(i => {
+        if (slotData[i]) slotData[i].hold = hold;
       });
     }
-    selectedIndices=new Set([...selectedIndices].filter(i=>i<slotCount));
-    renderGrid();
-    setStats(totalMins, slotLen);
-  }
 
-  function renderGrid() {
-    const container=document.getElementById('slots-container');
-    const grid=document.createElement('div');
-    grid.className='slots-grid';
-    slotData.forEach((sd, i) => {
-      // skip children (but NOT using mergedSkip anymore)
-      if (sd.isMergedInto !== undefined) return;
+    function mergeSlots(indices) {
+      const sel = [...indices].sort((a, b) => a - b);
 
-      const div = document.createElement('div');
+      if (!isConsecutive(sel)) return;
 
-      const classes = ['slot'];
-      if (selectedIndices.has(i)) classes.push('selected');
-      if (sd.merged) classes.push('is-merged');
-      else if (sd.hold) classes.push('is-hold');
+      const canMerge = sel.every(i => isSlotFree(i));
+      if (!canMerge) return;
 
-      div.className = classes.join(' ');
+      const first = sel[0];
+      const last = sel[sel.length - 1];
+      const span = sel.length;
+      const mergeHold = sel.every(i => slotData[i].hold);
 
-      // KEY: span across grid
-      div.style.gridColumn = `span ${sd.span || 1}`;
+      // reset (important when reusing slots)
+      for (let j = first; j <= last; j++) {
+        slotData[j].merged = false;
+        slotData[j].span = 1;
+        slotData[j].isMergedInto = undefined;
+        slotData[j].hold = false;
+      }
 
-      const endTime = sd.merged
-        ? sd.mergedEnd
-        : formatTime(sd.end);
+      slotData[first].merged = true;
+      slotData[first].span = span;
+      slotData[first].mergedEnd = formatTime(slotData[last].end);
+      slotData[first].hold = mergeHold;
 
-      div.innerHTML = `
-        <div class="slot-time">${formatTime(sd.start)}</div>
-        <div class="slot-end">to ${endTime}</div>
-      `;
+      for (let j = first + 1; j <= last; j++) {
+        slotData[j].isMergedInto = first;
+      }
+    }
 
-      if (sd.merged) {
-        div.innerHTML += `<div class="slot-tag">Merged (${sd.span})</div>`;
-      } else if (sd.hold) {
-        div.innerHTML += `<div class="slot-tag">Held</div>`;
+    // ========== DATA FUNCTIONS ==========
+    function render() {
+      const startVal = document.getElementById('start-time').value;
+      const endVal = document.getElementById('end-time').value;
+      const slotInput = document.getElementById('slot-length');
+      const errorEl = document.getElementById('slot-len-error');
+      const container = document.getElementById('slots-container');
+      const rawVal = slotInput.value.trim();
+      const slotLen = parseInt(rawVal, 10);
+      const isValid = rawVal !== '' && Number.isInteger(slotLen) && slotLen >= 1 && slotLen <= 720 && String(slotLen) === rawVal;
+
+      if (!isValid) {
+        errorEl.style.display = 'block';
+        container.innerHTML = '';
+        setStats();
+        return;
       }
 
-      div.addEventListener('click', e => handleSlotClick(e, i));
-      grid.appendChild(div);
-    });
-    container.innerHTML='';
-    container.appendChild(grid);
-    updatePanel();
-  }
+      errorEl.style.display = 'none';
+      const startMins = parseMinutes(startVal);
+      const endMins = parseMinutes(endVal);
 
-  function handleSlotClick(e, i) {
-    if(e.shiftKey && lastClickedIndex !== null) {
-      const lo = Math.min(lastClickedIndex, i);
-      const hi = Math.max(lastClickedIndex, i);
-      for(let j = lo; j <= hi; j++) {
-        selectedIndices.add(resolveToMergeHead(j));
+      if (!startVal || !endVal || endMins <= startMins) {
+        container.innerHTML = '<div>Set a valid start time before end time.</div>';
+        setStats();
+        return;
       }
-    } else if(e.metaKey || e.ctrlKey) {
-      const head = resolveToMergeHead(i);
-      if(selectedIndices.has(head)) selectedIndices.delete(head);
-      else selectedIndices.add(head);
-    } else {
-      const head = resolveToMergeHead(i);
-      if(selectedIndices.size === 1 && selectedIndices.has(head)) {
-        selectedIndices.clear();
-      } else {
-        selectedIndices.clear();
-        selectedIndices.add(head);
+
+      const totalMins = endMins - startMins;
+      const slotCount = Math.floor(totalMins / slotLen);
+
+      if (slotCount === 0) {
+        container.innerHTML = '<div>No complete slots fit in this window.</div>';
+        setStats();
+        return;
       }
-    }
 
-    lastClickedIndex = i;
-    renderGrid();
-  }
+      const prevData = [...slotData];
+      slotData = [];
+
+      for (let i = 0; i < slotCount; i++) {
+        const s = startMins + i * slotLen;
+        const e = s + slotLen;
+        const key = `${formatTime(s)}-${formatTime(e)}`;
+        const prev = prevData.find(d => d.key === key) || {};
+
+        slotData.push({
+          idx: i,
+          start: s,
+          end: e,
+          key,
+          hold: prev.hold || false,
+          merged: prev.merged || false,
+          span: prev.span || 1,
+          isMergedInto: prev.isMergedInto ?? undefined,
+          mergedEnd: prev.mergedEnd || null
+        });
+      }
 
-  function updatePanel() {
-    const sel = [...selectedIndices].sort((a,b)=>a-b);
-    const panel = document.getElementById('side-panel');
+      selectedIndices = new Set([...selectedIndices].filter(i => i < slotCount));
+      renderGrid();
+      setStats(totalMins, slotLen);
+    }
 
-    if (sel.length === 0) {
-      panel.classList.remove('visible');
-      return;
+    function setStats(totalMins, slotLen) {
+      const count = slotData.length;
+      const holdC = slotData.filter(s => s.hold).length;
+      const avail = count - holdC;
+      document.getElementById('total-slots').textContent = count || '—';
+      document.getElementById('available-slots').textContent = count ? avail : '—';
+      document.getElementById('hold-slots').textContent = holdC;
     }
-    panel.classList.add('visible');
 
-    const canMerge =
-      isConsecutive(sel) &&
-      sel.every(i => isSlotFree(i));
+    function commit() {
+      renderGrid();
+      const startMins = parseMinutes(document.getElementById('start-time').value);
+      const endMins = parseMinutes(document.getElementById('end-time').value);
+      const slotLen = parseInt(document.getElementById('slot-length').value, 10);
+      setStats(endMins - startMins, slotLen);
+    }
 
-    document.getElementById('panel-merge').classList.toggle('disabled', !canMerge);
+    // ========== RENDERING FUNCTIONS ==========
+    function getAvailableGridColumns() {
+      const container = document.getElementById('slots-container');
+      const minColWidth = 80; // matches minmax(80px, 1fr)
+      const gap = 12;
+      const containerWidth = container.offsetWidth || window.innerWidth;
+      const cols = Math.max(1, Math.floor((containerWidth + gap) / (minColWidth + gap)));
+      return cols;
+    }
 
-    const hasMerged = sel.some(i => {
-      const s = slotData[i];
-      return s.merged || s.isMergedInto !== undefined;
-    });
+    function renderGrid() {
+      const container = document.getElementById('slots-container');
+      const grid = document.createElement('div');
+      grid.className = 'slots-grid';
+      const maxCols = getAvailableGridColumns();
 
-    document.getElementById('panel-unmerge').classList.toggle('disabled', !hasMerged);
+      function placeDiv(div, row, col, span) {
+        div.style.gridColumn = `${col + 1} / span ${span}`;
+        div.style.gridRow = `${row}`;
+        grid.appendChild(div);
+      }
 
-    const anyHold = sel.some(i => slotData[i]?.hold);
+      slotData.forEach((sd, i) => {
+        // skip children
+        if (sd.isMergedInto !== undefined) return;
+
+        const actualSpan = sd.span || 1;
+        const classes = ['slot'];
+        if (selectedIndices.has(i)) classes.push('selected');
+        if (sd.merged) {
+          classes.push('is-merged');
+          if (sd.hold) classes.push('is-hold');
+        } else if (sd.hold) {
+          classes.push('is-hold');
+        }
+
+        const startRow = Math.floor(i / maxCols) + 1;
+        let startCol = i % maxCols;
+
+        if (sd.merged && actualSpan > maxCols - startCol) {
+          // Multi-row merged group
+          let remaining = actualSpan;
+          let currentRow = startRow;
+          let currentCol = startCol;
+          let fragment = 0;
+
+          while (remaining > 0) {
+            const spanThisRow = Math.min(remaining, maxCols - currentCol);
+            const div = document.createElement('div');
+            const fragmentClasses = [...classes];
+            if (fragment === 0) fragmentClasses.push('is-merged-start');
+            else if (remaining - spanThisRow > 0) fragmentClasses.push('is-merged-mid');
+            else fragmentClasses.push('is-merged-end');
+            div.className = fragmentClasses.join(' ');
+            if (fragment === 0) {
+              const endTime = sd.mergedEnd;
+              const mergedLabel = sd.hold ? `Merged (${sd.span}) · Held` : `Merged (${sd.span})`;
+              div.innerHTML = `
+                <div class="slot-time">${formatTime(sd.start)}</div>
+                <div class="slot-end">to ${endTime}</div>
+                <div class="slot-tag">${mergedLabel}</div>
+              `;
+            }
+            div.addEventListener('click', e => handleSlotClick(e, i));
+            placeDiv(div, currentRow, currentCol, spanThisRow);
+
+            remaining -= spanThisRow;
+            currentRow += 1;
+            currentCol = 0;
+            fragment += 1;
+          }
+        } else {
+          const div = document.createElement('div');
+          div.className = classes.join(' ');
+          const span = Math.min(actualSpan, maxCols - startCol);
+          const endTime = sd.merged ? sd.mergedEnd : formatTime(sd.end);
+          div.innerHTML = `
+            <div class="slot-time">${formatTime(sd.start)}</div>
+            <div class="slot-end">to ${endTime}</div>
+          `;
+          if (sd.merged) {
+            const mergedLabel = sd.hold ? `Merged (${sd.span}) · Held` : `Merged (${sd.span})`;
+            div.innerHTML += `<div class="slot-tag">${mergedLabel}</div>`;
+          } else if (sd.hold) {
+            div.innerHTML += `<div class="slot-tag">Held</div>`;
+          }
+          div.addEventListener('click', e => handleSlotClick(e, i));
+          placeDiv(div, startRow, startCol, span);
+        }
+      });
 
-    document.getElementById('panel-hold').style.display = anyHold ? 'none' : 'flex';
-    document.getElementById('panel-unhold').style.display = anyHold ? 'flex' : 'none';
-  }
+      container.innerHTML = '';
+      container.appendChild(grid);
+      updatePanel();
+    }
 
-  function setStats(totalMins, slotLen) {
-    const count = slotData.length;
-    const holdC=slotData.filter(s=>s.hold).length;
-    const avail=count-holdC;
-    document.getElementById('total-slots').textContent=count||'—';
-    document.getElementById('available-slots').textContent=count?avail:'—';
-    document.getElementById('hold-slots').textContent=holdC;
-  }
+    function updatePanel() {
+      const sel = [...selectedIndices].sort((a, b) => a - b);
+      const panel = document.getElementById('side-panel');
 
-  function commit() {
-    renderGrid();
-    const startMins=parseMinutes(document.getElementById('start-time').value);
-    const endMins=parseMinutes(document.getElementById('end-time').value);
-    const slotLen=parseInt(document.getElementById('slot-length').value,10);
-    setStats(endMins-startMins, slotLen);
-  }
+      if (sel.length === 0) {
+        panel.classList.remove('visible');
+        return;
+      }
 
-  document.getElementById('panel-hold').addEventListener('click',()=>{
-    [...selectedIndices].forEach(i=>{ if(slotData[i]) slotData[i].hold=true; });
-    selectedIndices.clear(); commit();
-  });
-  document.getElementById('panel-unhold').addEventListener('click',()=>{
-    [...selectedIndices].forEach(i=>{ if(slotData[i]) slotData[i].hold=false; });
-    selectedIndices.clear(); commit();
-  });
-
-  function isSlotFree(i) {
-    const s = slotData[i];
-    return !s.merged && s.isMergedInto === undefined;
-  }
+      panel.classList.add('visible');
 
-  document.getElementById('panel-merge').addEventListener('click', () => {
-    const sel = [...selectedIndices].sort((a,b)=>a-b);
+      const canMerge = isConsecutive(sel) && sel.every(i => isSlotFree(i));
+      document.getElementById('panel-merge').classList.toggle('disabled', !canMerge);
 
-    if (!isConsecutive(sel)) return;
+      const hasMerged = sel.some(i => {
+        const s = slotData[i];
+        return s.merged || s.isMergedInto !== undefined;
+      });
+      document.getElementById('panel-unmerge').classList.toggle('disabled', !hasMerged);
 
-    const canMerge = sel.every(i => isSlotFree(i));
-    if (!canMerge) return;
+      const anyHold = sel.some(i => slotData[i]?.hold);
+      document.getElementById('panel-hold').style.display = anyHold ? 'none' : 'flex';
+      document.getElementById('panel-unhold').style.display = anyHold ? 'flex' : 'none';
+    }
 
-    const first = sel[0];
-    const last = sel[sel.length - 1];
-    const span = sel.length;
+    // ========== EVENT HANDLERS ==========
+    function handleSlotClick(e, i) {
+      if (e.shiftKey && lastClickedIndex !== null) {
+        const lo = Math.min(lastClickedIndex, i);
+        const hi = Math.max(lastClickedIndex, i);
+        for (let j = lo; j <= hi; j++) {
+          selectedIndices.add(resolveToMergeHead(j));
+        }
+      } else if (e.metaKey || e.ctrlKey) {
+        const head = resolveToMergeHead(i);
+        if (selectedIndices.has(head)) {
+          selectedIndices.delete(head);
+        } else {
+          selectedIndices.add(head);
+        }
+      } else {
+        const head = resolveToMergeHead(i);
+        if (selectedIndices.size === 1 && selectedIndices.has(head)) {
+          selectedIndices.clear();
+        } else {
+          selectedIndices.clear();
+          selectedIndices.add(head);
+        }
+      }
 
-    // reset (important when reusing slots)
-    for (let j = first; j <= last; j++) {
-      slotData[j].merged = false;
-      slotData[j].span = 1;
-      slotData[j].isMergedInto = undefined;
+      lastClickedIndex = i;
+      renderGrid();
     }
 
-    slotData[first].merged = true;
-    slotData[first].span = span;
-    slotData[first].mergedEnd = formatTime(slotData[last].end);
+    // ========== EVENT ATTACHMENTS ==========
+    // Form inputs
+    document.getElementById('start-time').addEventListener('input', render);
+    document.getElementById('end-time').addEventListener('input', render);
+    document.getElementById('slot-length').addEventListener('input', render);
+
+    // Panel actions - Hold/Unhold
+    document.getElementById('panel-hold').addEventListener('click', () => {
+      holdSlots(selectedIndices, true);
+      selectedIndices.clear();
+      commit();
+    });
 
-    for (let j = first + 1; j <= last; j++) {
-      slotData[j].isMergedInto = first;
-    }
+    document.getElementById('panel-unhold').addEventListener('click', () => {
+      holdSlots(selectedIndices, false);
+      selectedIndices.clear();
+      commit();
+    });
 
-    selectedIndices.clear();
-    commit();
-  });
-  document.getElementById('panel-unmerge').addEventListener('click', () => {
-    [...selectedIndices].forEach(i => unmergeAt(i));
-    selectedIndices.clear();
-    commit();
-  });
-  document.getElementById('panel-deselect').addEventListener('click',()=>{ selectedIndices.clear(); renderGrid(); });
-
-  let attrTargetSlots=[];
-  /*document.getElementById('panel-attrs').addEventListener('click',()=>{
-    attrTargetSlots=[...selectedIndices];
-    const existing=[...new Set(attrTargetSlots.flatMap(i=>slotData[i]?.attrs||[]))];
-    const list=document.getElementById('attr-list'); list.innerHTML='';
-    existing.forEach(a=>addAttrTag(a));
-    document.getElementById('attr-input').value='';
-    const n=attrTargetSlots.length;
-    document.getElementById('attr-modal-desc').textContent=`Applying to ${n} slot${n!==1?'s':''}`;
-    document.getElementById('attr-modal-bg').classList.add('visible');
-    setTimeout(()=>document.getElementById('attr-input').focus(),50);
-  });*/
-
-  function addAttrTag(val) {
-    if(!val.trim()) return;
-    const list=document.getElementById('attr-list');
-    const existing=[...list.querySelectorAll('li')].map(li=>li.dataset.val);
-    if(existing.includes(val)) return;
-    const li=document.createElement('li'); li.dataset.val=val;
-    li.innerHTML=`${val}<button aria-label="Remove ${val}"><i class="ti ti-x" aria-hidden="true"></i></button>`;
-    li.querySelector('button').addEventListener('click',()=>li.remove());
-    list.appendChild(li);
-  }
+    // Panel actions - Merge/Unmerge
+    document.getElementById('panel-merge').addEventListener('click', () => {
+      mergeSlots(selectedIndices);
+      selectedIndices.clear();
+      commit();
+    });
 
-  document.getElementById('attr-add-btn').addEventListener('click',()=>{
-    const inp=document.getElementById('attr-input');
-    addAttrTag(inp.value.trim()); inp.value=''; inp.focus();
-  });
-  document.getElementById('attr-input').addEventListener('keydown',e=>{ if(e.key==='Enter'){e.preventDefault();document.getElementById('attr-add-btn').click();} });
-  document.getElementById('attr-cancel').addEventListener('click',()=>{
-    document.getElementById('attr-modal-bg').classList.remove('visible');
-    selectedIndices.clear(); renderGrid();
-  });
-  document.getElementById('attr-save').addEventListener('click',()=>{
-    const tags=[...document.getElementById('attr-list').querySelectorAll('li')].map(li=>li.dataset.val);
-    attrTargetSlots.forEach(i=>{ if(slotData[i]) slotData[i].attrs=tags; });
-    document.getElementById('attr-modal-bg').classList.remove('visible');
-    selectedIndices.clear(); commit();
-  });
-
-  document.addEventListener('keydown',e=>{
-    if(e.key==='Escape'){
-      selectedIndices.clear(); renderGrid();
-      document.getElementById('attr-modal-bg').classList.remove('visible');
-    }
-  });
+    document.getElementById('panel-unmerge').addEventListener('click', () => {
+      [...selectedIndices].forEach(i => unmergeAt(i));
+      selectedIndices.clear();
+      commit();
+    });
+
+    // Panel actions - Deselect
+    document.getElementById('panel-deselect').addEventListener('click', () => {
+      selectedIndices.clear();
+      renderGrid();
+    });
+
+    // Global keyboard events
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') {
+        selectedIndices.clear();
+        renderGrid();
+      }
+    });
 
-  document.getElementById('start-time').addEventListener('input',render);
-  document.getElementById('end-time').addEventListener('input',render);
-  document.getElementById('slot-length').addEventListener('input',render);
-  render();
+    // ========== INITIALIZATION ==========
+    render();
   </script>
 {% endblock %}

From e533bdf8fa96acf3ee4af6d51330d881ac9a8a06 Mon Sep 17 00:00:00 2001
From: Mat Johnson <demotive@gmail.com>
Date: Mon, 1 Jun 2026 09:43:40 +0100
Subject: [PATCH 4/4] Lots of tweaking

---
 app/views/z-sketching/calc-2.html | 36 +++++++++++--------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/app/views/z-sketching/calc-2.html b/app/views/z-sketching/calc-2.html
index 09fe7e3..5700f4c 100644
--- a/app/views/z-sketching/calc-2.html
+++ b/app/views/z-sketching/calc-2.html
@@ -37,12 +37,6 @@
   .side-panel.visible { display: block; }
   .panel-item { display: block; cursor: pointer; }
   .panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
-</style>
-
-
-
-
-  <style>
 
   #form-grid {
     display: grid; grid-template-columns: repeat(2, 120px) auto; gap: 12px; align-items: start;
@@ -71,7 +65,7 @@ <h1 class="nhsuk-heading-l">Session setup</h1>
           <label class="nhsuk-label" for="slot-length">
             Slot length, in minutes
           </label>
-          <input class="nhsuk-input nhsuk-input--width-2" type="number" id="slot-length" value="6" min="1" max="720" step="1">
+          <input class="nhsuk-input nhsuk-input--width-2" type="number" id="slot-length" value="8" min="1" max="720" step="1">
         </div>
       </div>
       <div id="slot-len-error">Enter a whole number between 1 and 720</div>
@@ -90,13 +84,13 @@ <h1 class="nhsuk-heading-l">Session setup</h1>
 
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-three-quarters">
+      <p class="nhsuk-hint nhsuk-u-font-size-14 nhsuk-u-margin-bottom-2">Click to select · Shift+click for a range · ⌘/Ctrl+click for multiple</p>
       <div id="slots-container"></div>
-      <p class="nhsuk-hint nhsuk-u-font-size-14 nhsuk-u-margin-top-4">Click to select · Shift+click for a range · ⌘/Ctrl+click for multiple</p>
     </div>
     <div class="nhsuk-grid-column-one-quarter">
       <div class="nhsuk-card">
         <div class="nhsuk-card__content">
-          <span class="nhsuk-u-font-size-26" id="available-slots">0</span> available of <span id="total-slots">0</span>
+          <span class="nhsuk-u-font-size-26" id="available-slots">0</span> available to book of <span id="total-slots">0</span>
         </div>
       </div>
       <div class="side-panel" id="side-panel">
@@ -108,7 +102,6 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
           <li><a class="panel-item" id="panel-unmerge">Unmerge</a></li>
         </ul>
         <hr>
-        <a class="panel-item" id="panel-deselect">Deselect all</a>
       </div>
     </div>
   </div>
@@ -286,8 +279,9 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
     }
 
     function setStats(totalMins, slotLen) {
-      const count = slotData.length;
-      const holdC = slotData.filter(s => s.hold).length;
+      const heads = slotData.filter(s => s.isMergedInto === undefined);
+      const count = heads.length;
+      const holdC = heads.filter(s => s.hold).length;
       const avail = count - holdC;
       document.getElementById('total-slots').textContent = count || '—';
       document.getElementById('available-slots').textContent = count ? avail : '—';
@@ -410,17 +404,17 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
       panel.classList.add('visible');
 
       const canMerge = isConsecutive(sel) && sel.every(i => isSlotFree(i));
-      document.getElementById('panel-merge').classList.toggle('disabled', !canMerge);
-
       const hasMerged = sel.some(i => {
         const s = slotData[i];
         return s.merged || s.isMergedInto !== undefined;
       });
-      document.getElementById('panel-unmerge').classList.toggle('disabled', !hasMerged);
-
       const anyHold = sel.some(i => slotData[i]?.hold);
-      document.getElementById('panel-hold').style.display = anyHold ? 'none' : 'flex';
-      document.getElementById('panel-unhold').style.display = anyHold ? 'flex' : 'none';
+      const allHold = sel.every(i => slotData[i]?.hold);
+
+      document.getElementById('panel-hold').classList.toggle('disabled', !sel.length || allHold);
+      document.getElementById('panel-unhold').classList.toggle('disabled', !sel.length || !anyHold);
+      document.getElementById('panel-merge').classList.toggle('disabled', !canMerge);
+      document.getElementById('panel-unmerge').classList.toggle('disabled', !hasMerged);
     }
 
     // ========== EVENT HANDLERS ==========
@@ -484,12 +478,6 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
       commit();
     });
 
-    // Panel actions - Deselect
-    document.getElementById('panel-deselect').addEventListener('click', () => {
-      selectedIndices.clear();
-      renderGrid();
-    });
-
     // Global keyboard events
     document.addEventListener('keydown', e => {
       if (e.key === 'Escape') {