@webship.co/workspace 0.0.0-stage → 1.0.0-beta1

package/public/narration.js

@@ -0,0 +1,110 @@
+// Spoken summary of the assistant's answers. Loaded by the page and required by the unit tests.
+(function (root, factory) {
+  if (typeof module === 'object' && module.exports) module.exports = factory();
+  else root.wsNarration = factory();
+}(typeof self !== 'undefined' ? self : this, () => {
+  const PREF = 'ws-voice';
+  const ENTITIES = { '&amp;': '&', '&lt;': '<', '&gt;': '>', '&quot;': '"', '&#39;': "'", '&apos;': "'", '&nbsp;': ' ' };
+
+  const decode = (s) => s.replace(/&(?:amp|lt|gt|quot|apos|nbsp|#39);/g, (m) => ENTITIES[m]);
+
+  // Speakable text: no markdown marks, and a URL becomes "a link".
+  function cleanSpoken(text, max = 300) {
+    let t = String(text || '')
+      .replace(/https?:\/\/\S+/g, 'a link')
+      .replace(/[`*_#>|~]/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim();
+    if (t.length > max) t = t.slice(0, max).replace(/\s+\S*$/, '');
+    return t;
+  }
+
+  // The first sentences of a rendered reply, leaving out code blocks, tables, buttons and the plan card.
+  function summaryFromHtml(html, { maxChars = 240, maxSentences = 2 } = {}) {
+    const text = String(html || '')
+      .replace(/<div class="plan-card"[\s\S]*$/, ' ')
+      .replace(/<(pre|table|button|script|style)\b[\s\S]*?<\/\1>/gi, ' ')
+      .replace(/<\/(p|li|h[1-6]|div|tr)>|<br\s*\/?>/gi, '\n')
+      .replace(/<[^>]*>/g, '');
+    const lines = decode(text).split('\n').map((l) => l.replace(/\s+/g, ' ').trim()).filter(Boolean)
+      .map((l) => (/[.!?:;]$/.test(l) ? l : `${l}.`));
+    const sentences = cleanSpoken(lines.join(' '), 2000).split(/(?<=[.!?])\s+/).filter(Boolean);
+    let out = '';
+    for (const s of sentences.slice(0, maxSentences)) {
+      if (out && out.length + s.length + 1 > maxChars) break;
+      out = out ? `${out} ${s}` : s;
+    }
+    return cleanSpoken(out, maxChars);
+  }
+
+  // The best free voice this browser has, when none is configured: the neural ones first (Edge's
+  // "Natural" and "Online" voices, Chrome's "Google" voices, Apple's "Enhanced" and "Premium"), in the
+  // language asked for; the browser's default when it has nothing better.
+  function bestVoice(voices, lang) {
+    const want = String(lang || 'en').toLowerCase().slice(0, 2);
+    const quality = (v) => (/natural|neural|online/i.test(v.name) ? 8 : 0) + (/google/i.test(v.name) ? 4 : 0)
+      + (/enhanced|premium/i.test(v.name) ? 2 : 0);
+    const score = (v) => quality(v) * 2 + (String(v.lang || '').toLowerCase() === String(lang || '').toLowerCase() ? 1 : 0);
+    const fit = (voices || []).filter((v) => String(v.lang || '').toLowerCase().startsWith(want));
+    const best = fit.sort((a, b) => score(b) - score(a))[0];
+    return best && quality(best) > 0 ? best : null;
+  }
+
+  // Everything the browser provides is passed in, so this runs under test with fakes.
+  // `onSpeech({ type: 'start' | 'word' | 'end', word })`, when given, hears the voice as it goes: the
+  // assistant's avatar moves its mouth with it.
+  // `remote(text, voiceId, params, onSpeech, fallback)`, when given, speaks in a voice of the server's
+  // (`voiceName: 'elevenlabs:<id>'`) and returns a function that stops it; `fallback()` speaks the same
+  // words in the browser's voice when the server cannot.
+  function createNarrator({ params = {}, defaultOn = true, getPref, setPref, synth, Utterance, onSpeech, remote }) {
+    const supported = !!(synth && Utterance) || typeof remote === 'function';
+    const isOn = () => {
+      if (!supported) return false;
+      const v = getPref ? getPref(PREF) : null;
+      return v === null || v === undefined ? !!defaultOn : v === '1';
+    };
+    let stopRemote = null;
+    const remoteVoice = () => {
+      const m = typeof remote === 'function' && String(params.voiceName || '').match(/^elevenlabs:([A-Za-z0-9]{16,32})$/);
+      return m ? m[1] : '';
+    };
+    const cancel = () => {
+      if (stopRemote) { const stop = stopRemote; stopRemote = null; try { stop(); } catch (_) { /* already stopped */ } }
+      try { if (synth) synth.cancel(); } catch (_) { /* nothing speaking */ }
+      if (onSpeech) onSpeech({ type: 'end' });
+    };
+    const speak = (text) => {
+      const t = cleanSpoken(text);
+      if (!supported || !t) return false;
+      cancel();
+      const id = remoteVoice();
+      if (id) { stopRemote = remote(t, id, params, onSpeech, () => browserSpeak(t)); return true; }
+      return browserSpeak(t);
+    };
+    const browserSpeak = (t) => {
+      if (!synth || !Utterance) return false;
+      const u = new Utterance(t);
+      for (const k of ['rate', 'pitch', 'volume', 'lang']) if (params[k] !== undefined) u[k] = params[k];
+      if (synth.getVoices) {
+        const all = synth.getVoices() || [];
+        const named = params.voiceName && all.find((x) => x.name.toLowerCase() === String(params.voiceName).toLowerCase());
+        const v = named || bestVoice(all, params.lang);
+        if (v) u.voice = v;
+      }
+      if (onSpeech) {
+        u.onstart = () => onSpeech({ type: 'start' });
+        u.onboundary = (e) => { if (!e || e.name === undefined || e.name === 'word') onSpeech({ type: 'word', word: t.slice(e.charIndex || 0).split(/\s/)[0] }); };
+        u.onend = () => onSpeech({ type: 'end' });
+        u.onerror = () => onSpeech({ type: 'end' });
+      }
+      synth.speak(u);
+      return true;
+    };
+    const setOn = (on) => { if (setPref) setPref(PREF, on ? '1' : '0'); if (!on) cancel(); };
+    // `reply.spoken` is the assistant's own summary; the first sentences are the fallback.
+    const narrate = (reply) => (isOn() ? speak((reply && reply.spoken) || summaryFromHtml(reply && reply.html)) : false);
+    return { supported, isOn, setOn, speak, cancel, narrate };
+  }
+
+  return { PREF, cleanSpoken, summaryFromHtml, createNarrator, bestVoice };
+}));

package/public/palette.js

@@ -0,0 +1,278 @@
+/* The command palette, the shortcut sheet and the go-to chords.
+ *
+ *   Ctrl or Cmd + K, or /       open the palette: workspaces, pages, projects and a few actions
+ *   ?                           the shortcut sheet
+ *   g then a letter             go to a workspace or page (g d is Dev, g s is Screens)
+ *   Esc                         close
+ *
+ * Never fires while somebody is typing in a field. The data is one small JSON document from
+ * /fragments/palette.json, fetched the first time the palette opens. */
+(function () {
+  'use strict';
+  var data = null;
+  var overlay = null;
+  var input = null;
+  var list = null;
+  var live = null;
+  var items = [];
+  var active = 0;
+  var returnTo = null;
+  var chord = 0;
+
+  var CHORDS = { h: ['home', 'Home'], d: ['dev', 'Dev'], t: ['test', 'Test'], p: ['products', 'Products'], x: ['sandboxes', 'Sandboxes'],
+    e: ['demos', 'Demos'], r: ['projects', 'Projects'], v: ['videos', 'Videos'], a: ['audio', 'Audio'], o: ['docs', 'Docs'],
+    m: ['modules', 'Modules'], w: ['worklogs', 'Worklogs'], s: ['/screens', 'Screens'], c: ['/commands', 'Commands'],
+    ',': ['/settings', 'Settings'], '?': ['/help', 'Help'] };
+
+  function typing(t) {
+    if (!t || !t.tagName) return false;
+    var n = t.tagName.toLowerCase();
+    return n === 'input' || n === 'textarea' || n === 'select' || t.isContentEditable || !!(t.closest && t.closest('.ace_editor, .xterm'));
+  }
+  function modalOpen() { return !!document.querySelector('#editor-modal.uk-open, #confirm-modal.uk-open'); }
+
+  function score(text, q) {
+    text = text.toLowerCase();
+    if (!q) return 1;
+    if (text === q) return 100;
+    if (text.indexOf(q) === 0) return 80;
+    if (text.indexOf(q) > 0) return 60 - Math.min(40, text.indexOf(q));
+    var i = 0;
+    for (var k = 0; k < text.length && i < q.length; k += 1) if (text[k] === q[i]) i += 1;
+    return i === q.length ? 20 : 0;
+  }
+
+  function hubUrl(key) {
+    if (key === 'home') {
+      var parts = location.hostname.split('.');
+      var k = parts.findIndex(function (_, i) { return data && data.workspaces.some(function (w) { return w.key === parts[i]; }); });
+      return location.protocol + '//' + (k >= 0 ? parts.slice(k + 1).join('.') : location.hostname) + (location.port ? ':' + location.port : '') + '/';
+    }
+    var w = data && data.workspaces.find(function (x) { return x.key === key; });
+    return w ? w.url : null;
+  }
+
+  // The same preference the switch beside the page width writes (a cookie on the hub domain, then localStorage).
+  function density(value) {
+    var btn = document.querySelector('.density-pick[data-density="' + value + '"]');
+    if (btn) { btn.click(); return; }
+    document.documentElement.dataset.density = value;
+    if (window.wsPrefSet) window.wsPrefSet('ws-density', value);
+  }
+
+  function actions() {
+    return [
+      { group: 'Do', label: 'New screen', hint: 'A shell, Claude Code or a command, detached', run: function () {
+        close();
+        if (window.htmx) window.htmx.ajax('GET', '/fragments/screen-new-form' + (location.hostname.split('.')[0] ? '' : ''), { target: '#editor-modal-body', swap: 'innerHTML' });
+      } },
+      { group: 'Do', label: 'Switch light and dark', hint: 'The theme toggle', run: function () {
+        close();
+        var t = document.querySelector('[data-theme-toggle], #theme-toggle, .theme-toggle');
+        if (t) t.click();
+      } },
+      { group: 'Do', label: 'Rows: compact', hint: 'Project buttons without the caption under each', run: function () { close(); density('compact'); } },
+      { group: 'Do', label: 'Rows: comfortable', hint: 'Project buttons with their captions', run: function () { close(); density('comfortable'); } },
+      { group: 'Do', label: 'Show the keyboard shortcuts', hint: '?', run: function () { render('?'); } },
+    ];
+  }
+
+  function build(q) {
+    var out = [];
+    if (!data) return out;
+    var query = q.trim().toLowerCase();
+    var add = function (group, label, hint, url, extra) {
+      var s = Math.max(score(label, query), extra ? score(extra, query) - 10 : 0);
+      if (s > 0) out.push({ group: group, label: label, hint: hint, url: url, score: s });
+    };
+    add('Go to', 'Home', 'All workspaces', hubUrl('home'));
+    data.workspaces.forEach(function (w) { add('Go to', w.label, w.key + (w.kind === 'files' ? ' · files' : ''), w.url, w.key); });
+    data.pages.forEach(function (p) { add('Go to', p.label, p.hint, p.url); });
+    if (query) {
+      var shown = 0;
+      data.projects.forEach(function (p) {
+        if (shown >= 40) return;
+        var s = score(p.name, query);
+        if (s > 0) { out.push({ group: 'Projects', label: p.name, hint: p.ws + (p.ddev ? ' · open the site' : ' · open the workspace'), url: p.url, score: s }); shown += 1; }
+      });
+    }
+    actions().forEach(function (a) { var s = score(a.label, query); if (s > 0) out.push({ group: a.group, label: a.label, hint: a.hint, run: a.run, score: s - 5 }); });
+    // Letters-in-order matches (score 20) are only a fallback: when something contains the query, they are noise.
+    if (query && out.some(function (x) { return x.score >= 40; })) out = out.filter(function (x) { return x.score >= 40; });
+    out.sort(function (a, b) { return b.score - a.score; });
+    var order = { 'Go to': 0, Projects: 1, Do: 2 };
+    var grouped = out.slice(0, 40);
+    grouped.sort(function (a, b) { return (order[a.group] - order[b.group]) || (b.score - a.score); });
+    return grouped;
+  }
+
+  function sheet() {
+    var rows = [['Ctrl or Cmd + K, or /', 'Open this palette'], ['?', 'This sheet'], ['Esc', 'Close']];
+    Object.keys(CHORDS).forEach(function (k) {
+      var c = CHORDS[k];
+      var exists = c[0].charAt(0) === '/' || c[0] === 'home' || (data && data.workspaces.some(function (w) { return w.key === c[0]; }));
+      if (exists) rows.push(['g ' + k, c[1]]);
+    });
+    return rows;
+  }
+
+  function render(q) {
+    if (!list) return;
+    list.textContent = '';
+    if (q === '?') {
+      var h = document.createElement('li');
+      h.className = 'palette-group'; h.setAttribute('role', 'presentation'); h.textContent = 'Keyboard shortcuts';
+      list.appendChild(h);
+      sheet().forEach(function (r) {
+        var li = document.createElement('li');
+        li.className = 'palette-row palette-shortcut'; li.setAttribute('role', 'presentation');
+        var k = document.createElement('kbd'); k.textContent = r[0];
+        var s = document.createElement('span'); s.textContent = r[1];
+        li.appendChild(k); li.appendChild(s); list.appendChild(li);
+      });
+      items = []; active = -1;
+      input.removeAttribute('aria-activedescendant');
+      announce('Keyboard shortcuts');
+      return;
+    }
+    items = build(q);
+    active = items.length ? 0 : -1;
+    var last = '';
+    items.forEach(function (it, i) {
+      if (it.group !== last) {
+        var g = document.createElement('li');
+        g.className = 'palette-group'; g.setAttribute('role', 'presentation'); g.textContent = it.group;
+        list.appendChild(g); last = it.group;
+      }
+      var li = document.createElement('li');
+      li.id = 'palette-opt-' + i; li.className = 'palette-row'; li.setAttribute('role', 'option');
+      li.setAttribute('aria-selected', i === active ? 'true' : 'false');
+      var l = document.createElement('span'); l.className = 'palette-label'; l.textContent = it.label;
+      var m = document.createElement('span'); m.className = 'palette-hint'; m.textContent = it.hint || '';
+      li.appendChild(l); li.appendChild(m);
+      li.addEventListener('mousemove', function () { move(i, true); });
+      li.addEventListener('click', function () { choose(i); });
+      list.appendChild(li);
+    });
+    if (!items.length) {
+      var e = document.createElement('li');
+      e.className = 'palette-empty'; e.setAttribute('role', 'presentation'); e.textContent = 'Nothing matches “' + q + '”.';
+      list.appendChild(e);
+    }
+    if (active >= 0) input.setAttribute('aria-activedescendant', 'palette-opt-' + active); else input.removeAttribute('aria-activedescendant');
+    announce(items.length ? items.length + (items.length === 1 ? ' result' : ' results') : 'No results');
+  }
+
+  function announce(t) { if (live) live.textContent = t; }
+
+  function move(i, noScroll) {
+    if (!items.length) return;
+    active = (i + items.length) % items.length;
+    Array.prototype.forEach.call(list.querySelectorAll('[role=option]'), function (el, k) { el.setAttribute('aria-selected', k === active ? 'true' : 'false'); });
+    input.setAttribute('aria-activedescendant', 'palette-opt-' + active);
+    var el = document.getElementById('palette-opt-' + active);
+    if (el && !noScroll) el.scrollIntoView({ block: 'nearest' });
+  }
+
+  function choose(i) {
+    var it = items[i];
+    if (!it) return;
+    if (it.run) { it.run(); return; }
+    close();
+    location.href = it.url;
+  }
+
+  function inertOthers(on) {
+    Array.prototype.forEach.call(document.body.children, function (el) {
+      if (el === overlay || el.tagName === 'SCRIPT' || el.contains(overlay)) return;
+      if (on) { if (!('palWasInert' in el.dataset)) el.dataset.palWasInert = el.inert ? '1' : ''; el.inert = true; }
+      else if ('palWasInert' in el.dataset) { el.inert = el.dataset.palWasInert === '1'; delete el.dataset.palWasInert; }
+    });
+  }
+
+  function ensure() {
+    if (overlay) return;
+    overlay = document.createElement('div');
+    overlay.id = 'palette'; overlay.hidden = true;
+    overlay.innerHTML = '<div class="palette-dialog" role="dialog" aria-modal="true" aria-label="Command palette">' +
+      '<input class="palette-input" type="text" role="combobox" aria-expanded="true" aria-controls="palette-list" aria-autocomplete="list" ' +
+      'autocomplete="off" spellcheck="false" placeholder="Go to a workspace, a project or a page…" aria-label="Go to">' +
+      '<ul id="palette-list" class="palette-list" role="listbox" aria-label="Results"></ul>' +
+      '<div class="palette-foot"><span><kbd>↑</kbd><kbd>↓</kbd> move</span><span><kbd>Enter</kbd> open</span><span><kbd>Esc</kbd> close</span><span><kbd>?</kbd> shortcuts</span></div>' +
+      '<div class="palette-live uk-hidden-visually" aria-live="polite"></div></div>';
+    document.body.appendChild(overlay);
+    input = overlay.querySelector('.palette-input');
+    list = overlay.querySelector('.palette-list');
+    live = overlay.querySelector('.palette-live');
+    overlay.addEventListener('mousedown', function (e) { if (e.target === overlay) close(); });
+    input.addEventListener('input', function () { render(input.value); });
+    input.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); move(active + 1); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); move(active - 1); }
+      else if (e.key === 'Enter') { e.preventDefault(); choose(active); }
+      else if (e.key === 'Escape') { e.preventDefault(); close(); }
+      else if (e.key === 'Tab') { e.preventDefault(); }
+    });
+  }
+
+  function open(initial) {
+    ensure();
+    returnTo = document.activeElement;
+    var go = function () {
+      overlay.hidden = false;
+      inertOthers(true);
+      input.value = initial === '?' ? '' : (initial || '');
+      render(initial === '?' ? '?' : input.value);
+      input.focus();
+    };
+    if (data) { go(); return; }
+    fetch('/fragments/palette.json', { credentials: 'same-origin' }).then(function (r) { return r.json(); })
+      .then(function (d) { data = d; go(); })
+      .catch(function () { data = { workspaces: [], pages: [], projects: [] }; go(); });
+  }
+
+  function close() {
+    if (!overlay || overlay.hidden) return;
+    overlay.hidden = true;
+    inertOthers(false);
+    if (returnTo && returnTo.focus) { try { returnTo.focus(); } catch (_) { /* gone */ } }
+  }
+
+  document.addEventListener('click', function (e) {
+    var t = e.target.closest && e.target.closest('.palette-trigger');
+    if (t) { e.preventDefault(); open(''); }
+  });
+  // The key hint says what this machine uses.
+  if (/Mac|iPhone|iPad/.test(navigator.platform || '')) {
+    Array.prototype.forEach.call(document.querySelectorAll('.palette-trigger-key'), function (k) { k.textContent = '⌘K'; });
+  }
+
+  document.addEventListener('keydown', function (e) {
+    if (e.defaultPrevented) return;
+    var k = e.key;
+    if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && k.toLowerCase() === 'k') {
+      e.preventDefault();
+      if (overlay && !overlay.hidden) close(); else open('');
+      return;
+    }
+    if (e.ctrlKey || e.metaKey || e.altKey) return;
+    if (overlay && !overlay.hidden) return;
+    if (typing(e.target) || modalOpen()) return;
+    if (chord && Date.now() - chord < 1200) {
+      chord = 0;
+      var c = CHORDS[k.toLowerCase()];
+      if (c) {
+        e.preventDefault();
+        var url = c[0].charAt(0) === '/' ? c[0] : hubUrl(c[0]);
+        if (url) { location.href = url; return; }
+        // The data is not loaded yet: load it, then go.
+        fetch('/fragments/palette.json', { credentials: 'same-origin' }).then(function (r) { return r.json(); })
+          .then(function (d) { data = d; var u = hubUrl(c[0]); if (u) location.href = u; });
+      }
+      return;
+    }
+    if (k === '/') { e.preventDefault(); open(''); return; }
+    if (k === '?') { e.preventDefault(); open('?'); return; }
+    if (k === 'g') { chord = Date.now(); }
+  });
+})();

package/public/sortable.js

@@ -0,0 +1,251 @@
+/* Drag to reorder the workspaces: the cards on the home page and the list in Settings.
+ *
+ * A list says it is sortable with data-sortable="<item selector>" and carries data-order, data-file and data-key
+ * for /actions/list-order. The dragged item follows the pointer, the others slide into place, the page scrolls
+ * at its edges, and the order is saved without redrawing the list. Alt+arrow keys move the focused item. */
+(() => {
+  const SKIP = 'button, input, select, textarea, .ws-card-tool, .ws-backups, .ws-move, .ws-delete-step, [data-no-drag]';
+  const THRESHOLD = 6;
+  const EDGE = 64;
+  const EASE = 'cubic-bezier(.2,.8,.2,1)';
+  let drag = null;
+  let suppressClick = false;
+
+  const itemsOf = (list) => [...list.children].filter((el) => el.matches(list.dataset.sortable));
+  const orderOf = (list) => itemsOf(list).map((el) => el.dataset.ws).filter(Boolean);
+  // The visible box of an item: a grid card sits inside its column's gutter padding.
+  const visualOf = (item) => item.querySelector(':scope > .workspace-card') || item;
+
+  // How far an item is still sliding.
+  function offsetOf(el) {
+    const t = getComputedStyle(el).transform;
+    if (!t || t === 'none') return { x: 0, y: 0 };
+    const m = new DOMMatrixReadOnly(t);
+    return { x: m.m41, y: m.m42 };
+  }
+
+  // Where an element sits in the layout, without the slide its item may still be making.
+  function slotRect(item, el = item) {
+    const r = el.getBoundingClientRect();
+    const o = offsetOf(item);
+    return new DOMRect(r.left - o.x, r.top - o.y, r.width, r.height);
+  }
+
+  // A row's number and its first/last arrows follow its new place, since the list is not redrawn.
+  function renumber(list) {
+    const els = itemsOf(list);
+    els.forEach((el, i) => {
+      const n = el.querySelector(':scope > .ws-order');
+      if (n) n.textContent = String(i + 1);
+      const [up, down] = el.querySelectorAll(':scope > .ws-move > button');
+      if (up) up.disabled = i === 0;
+      if (down) down.disabled = i === els.length - 1;
+    });
+  }
+
+  // Move items, then slide each from where it was to where it now is.
+  function flip(list, mutate) {
+    const els = itemsOf(list);
+    const before = new Map(els.map((el) => [el, el.getBoundingClientRect()]));
+    mutate();
+    renumber(list);
+    els.forEach((el) => {
+      const a = before.get(el);
+      const b = slotRect(el);
+      const dx = a.left - b.left;
+      const dy = a.top - b.top;
+      if (Math.abs(dx) < 1 && Math.abs(dy) < 1) return;
+      el.style.transition = 'none';
+      el.style.transform = `translate(${dx}px, ${dy}px)`;
+      requestAnimationFrame(() => {
+        el.style.transition = `transform 200ms ${EASE}`;
+        el.style.transform = '';
+      });
+    });
+  }
+
+  function scrollerOf(el) {
+    for (let n = el.parentElement; n && n !== document.body; n = n.parentElement) {
+      const oy = getComputedStyle(n).overflowY;
+      if ((oy === 'auto' || oy === 'scroll') && n.scrollHeight > n.clientHeight) return n;
+    }
+    return null;
+  }
+
+  function start(e) {
+    const { list, item } = drag;
+    const vis = visualOf(item);
+    const rect = vis.getBoundingClientRect();
+    const ghost = item.cloneNode(true);
+    ghost.removeAttribute('id');
+    ghost.querySelectorAll('[id]').forEach((n) => n.removeAttribute('id'));
+    ghost.classList.add('sort-ghost');
+    ghost.setAttribute('aria-hidden', 'true');
+    Object.assign(ghost.style, { left: `${rect.left}px`, top: `${rect.top}px`, width: `${rect.width}px`, height: `${rect.height}px` });
+    // A card carries uk-position-relative, whose !important would put the copy back in the page flow.
+    ghost.style.setProperty('position', 'fixed', 'important');
+    document.body.appendChild(ghost);
+    requestAnimationFrame(() => ghost.classList.add('is-lifted'));
+    item.style.setProperty('--sort-inset-left', `${rect.left - item.getBoundingClientRect().left}px`);
+    item.classList.add('sort-placeholder');
+    document.body.classList.add('is-sorting');
+    window.getSelection()?.removeAllRanges();
+    Object.assign(drag, { ghost, rect, started: true, scroller: scrollerOf(list), next: item.nextSibling });
+    move(e);
+    drag.raf = requestAnimationFrame(autoScroll);
+  }
+
+  function move(e) {
+    drag.x = e.clientX;
+    drag.y = e.clientY;
+    drag.ghost.style.translate = `${e.clientX - drag.startX}px ${e.clientY - drag.startY}px`;
+    place();
+  }
+
+  // Put the placeholder where the pointer is. An item under the pointer takes the placeholder's place; between
+  // items nothing moves, so a slide in progress never flips the order back.
+  function place() {
+    const { list, item, x, y } = drag;
+    const els = itemsOf(list);
+    const hit = els.find((el) => {
+      const r = el === item ? slotRect(el) : slotRect(el, visualOf(el));
+      return x >= r.left && x <= r.right && y >= r.top && y <= r.bottom;
+    });
+    let target = null;
+    let after = false;
+    if (hit && hit !== item) {
+      target = hit;
+      after = els.indexOf(hit) > els.indexOf(item);
+    } else if (!hit) {
+      const last = els[els.length - 1];
+      const first = els[0];
+      const lr = slotRect(last, visualOf(last));
+      const fr = slotRect(first, visualOf(first));
+      if (last !== item && (y > lr.bottom || (y >= lr.top && x > lr.right))) { target = last; after = true; }
+      else if (first !== item && (y < fr.top || (y <= fr.bottom && x < fr.left))) { target = first; after = false; }
+    }
+    if (!target) return;
+    flip(list, () => list.insertBefore(item, after ? target.nextSibling : target));
+  }
+
+  function autoScroll() {
+    if (!drag || !drag.started) return;
+    const s = drag.scroller;
+    const top = s ? s.getBoundingClientRect().top : 0;
+    const bottom = s ? s.getBoundingClientRect().bottom : window.innerHeight;
+    let dy = 0;
+    if (drag.y < top + EDGE) dy = -Math.ceil((top + EDGE - drag.y) / 4);
+    else if (drag.y > bottom - EDGE) dy = Math.ceil((drag.y - (bottom - EDGE)) / 4);
+    if (dy) {
+      if (s) s.scrollTop += dy; else window.scrollBy(0, dy);
+      place();
+    }
+    drag.raf = requestAnimationFrame(autoScroll);
+  }
+
+  // Land the ghost on the placeholder, then let the item show again.
+  function finish(cancelled) {
+    const d = drag;
+    drag = null;
+    cancelAnimationFrame(d.raf);
+    document.body.classList.remove('is-sorting');
+    if (cancelled) flip(d.list, () => d.list.insertBefore(d.item, d.next));
+    const to = slotRect(d.item, visualOf(d.item));
+    d.ghost.classList.remove('is-lifted');
+    d.ghost.classList.add('is-landing');
+    d.ghost.style.translate = `${to.left - d.rect.left}px ${to.top - d.rect.top}px`;
+    const done = () => { d.ghost.remove(); d.item.classList.remove('sort-placeholder'); d.item.style.removeProperty('--sort-inset-left'); };
+    d.ghost.addEventListener('transitionend', done, { once: true });
+    setTimeout(done, 260);
+    if (!cancelled && orderOf(d.list).join(',') !== d.was) save(d.list, d.was);
+  }
+
+  // Save without redrawing: the list already shows the new order. A refusal brings back the server's list.
+  async function save(list, was) {
+    const order = orderOf(list).join(',');
+    const body = new URLSearchParams({ order, was, file: list.dataset.file || 'settings.yml', key: list.dataset.key || 'workspaces' });
+    if (list.dataset.sortableView) body.set('view', list.dataset.sortableView);
+    const wrap = list.closest('#workspace-cards-wrap, [id^="list-editor"]');
+    let res;
+    let html = '';
+    try {
+      res = await fetch('/actions/list-order', { method: 'POST', body, headers: { 'HX-Request': 'true' }, credentials: 'same-origin' });
+      html = await res.text();
+    } catch (_) {
+      res = null;
+    }
+    if (res && res.ok) {
+      list.dataset.order = order;
+      const msg = new DOMParser().parseFromString(html, 'text/html').querySelector('.msg');
+      if (msg && wrap) { wrap.appendChild(msg); if (typeof window.flashResults === 'function') window.flashResults(wrap); }
+      return;
+    }
+    if (wrap && html) {
+      const id = wrap.id;
+      wrap.outerHTML = html;
+      const fresh = document.getElementById(id);
+      if (fresh && window.htmx) window.htmx.process(fresh);
+      if (fresh && typeof window.flashResults === 'function') window.flashResults(fresh);
+    }
+  }
+
+  document.addEventListener('pointerdown', (e) => {
+    if (drag || e.button !== 0 || !e.isPrimary) return;
+    const list = e.target.closest('[data-sortable]');
+    if (!list) return;
+    const item = e.target.closest(list.dataset.sortable);
+    if (!item || item.parentElement !== list || e.target.closest(SKIP)) return;
+    // On a touch screen the page must still scroll, so only the handle drags there.
+    if (e.pointerType === 'touch' && !e.target.closest('.ws-card-handle, .ws-handle')) return;
+    drag = { list, item, startX: e.clientX, startY: e.clientY, x: e.clientX, y: e.clientY, started: false, was: orderOf(list).join(',') };
+  });
+
+  document.addEventListener('pointermove', (e) => {
+    if (!drag) return;
+    if (!drag.started) {
+      if (Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < THRESHOLD) return;
+      start(e);
+      return;
+    }
+    e.preventDefault();
+    move(e);
+  }, { passive: false });
+
+  document.addEventListener('pointerup', () => {
+    if (!drag) return;
+    if (!drag.started) { drag = null; return; }
+    suppressClick = true;
+    setTimeout(() => { suppressClick = false; }, 0);
+    finish(false);
+  });
+
+  document.addEventListener('pointercancel', () => { if (drag && drag.started) finish(true); else drag = null; });
+
+  // A drag that ends on a card is not a click on its link.
+  document.addEventListener('click', (e) => {
+    if (!suppressClick) return;
+    suppressClick = false;
+    e.preventDefault();
+    e.stopPropagation();
+  }, true);
+
+  // Links and images are natively draggable, which would take the pointer away mid-drag.
+  document.addEventListener('dragstart', (e) => { if (e.target.closest && e.target.closest('[data-sortable]')) e.preventDefault(); });
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && drag && drag.started) { e.preventDefault(); finish(true); return; }
+    if (!e.altKey || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return;
+    const list = e.target.closest && e.target.closest('[data-sortable]');
+    const item = list && e.target.closest(list.dataset.sortable);
+    if (!item || item.parentElement !== list) return;
+    const els = itemsOf(list);
+    const i = els.indexOf(item);
+    const j = e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? i - 1 : i + 1;
+    if (j < 0 || j >= els.length) return;
+    e.preventDefault();
+    const was = orderOf(list).join(',');
+    flip(list, () => list.insertBefore(item, j > i ? els[j].nextSibling : els[j]));
+    e.target.focus();
+    save(list, was);
+  });
+})();