@divlet/web 0.0.0-stage → 0.0.1

package/dist/lib/shortcuts.js

@@ -0,0 +1,91 @@
+// The keyboard shortcuts, read-only: ? or Ctrl+K → Keyboard shortcuts. Settings has only settings.
+import { $, el, icon, keys } from './util.js';
+import { on } from './store.js';
+
+const scrim = el('div', 'scrim chrome');
+scrim.id = 'shortcuts';
+scrim.hidden = true;
+const dialog = el('section', 'dialog shortcuts-dialog');
+dialog.setAttribute('role', 'dialog');
+dialog.setAttribute('aria-modal', 'true');
+dialog.setAttribute('aria-labelledby', 'shortcuts-title');
+scrim.append(dialog);
+($('#ui') || document.body).append(scrim);
+let returnFocus = null;
+
+const GROUPS = [
+  ['Pi and search', [
+    ['Ask the agent about the selection', 'A'], ['Send the request', keys('Enter')], ['Previous requests', '↑ in the Agent tab'],
+    ['Search everything', keys('Mod+K')], ['Ask the agent from the search', keys('Mod+Enter')],
+  ]],
+  ['Canvas', [
+    ['Pan', 'Scroll · Space+drag'], ['Zoom', `${keys('Mod')}+scroll · pinch`], ['Zoom in / out', '+ / −'],
+    ['Zoom to 100%', '0'], ['Fit everything', keys('Shift+1')], ['Zoom to selection', `F · ${keys('Shift+2')}`],
+  ]],
+  ['Tools', [['Select', 'V'], ['Interact with the page', 'P'], ['Expand and browse', 'E']]],
+  ['Selection', [
+    ['Element', 'Click'], ['Add to selection', `${keys('Shift')}+click`], ['Artboards', 'Drag on canvas'],
+    ['Child · edit text', keys('Enter')], ['Parent, up to the artboard', `${keys('Escape')} · ${keys('Shift+Enter')}`],
+    ['Walk the tree', '↑ ↓ siblings · ← parent · → child'], ['Next / previous (also while editing)', 'Tab · ⇧ Tab'], ['New list item (while editing one)', keys('Enter')], ['All artboards', keys('Mod+A')],
+  ]],
+  ['Editing', [
+    ['Undo / redo', `${keys('Mod+Z')} · ${keys('Mod+Shift+Z')}`], ['Duplicate', keys('Mod+D')], ['Delete', 'Del'],
+    ['Copy, cut, paste', `${keys('Mod+C')} ${keys('Mod+X')} ${keys('Mod+V')}`], ['Add an image', 'Drop or paste'],
+    ['Wrap / unwrap', `${keys('Mod+G')} · ${keys('Mod+Shift+G')}`], ['Reorder element', `${keys('Alt+Up')} ${keys('Alt+Down')}`],
+    ['Edit text', 'Double-click'], ['Move artboard', `Drag · arrows`], ['Rename artboard', 'R'],
+    ['Margin / padding of the selection', 'Drag a green or orange pill'], ['Move an element', 'Drag its grip (top-left corner) onto another element'], ['Copy while moving', `${keys('Alt')} on drop`], ['Resize an element', 'Drag the square at its bottom-right corner'], ['… all sides · opposite sides · 1px', `${keys('Shift')} · ${keys('Mod')} · ${keys('Alt')}`], ['Resize: width only · height only', `${keys('Shift')} · ${keys('Mod')}`],
+    ['New artboard', 'N'], ['Cancel a drag', keys('Escape')], ['More actions', `Right-click · ${keys('Shift+F10')}`],
+  ]],
+  ['Panels', [['Layers', 'L'], ['History', 'H'], ['Keyboard shortcuts', '?'], ['Settings', `${keys('Mod')} ,`], ['Interface size', `${keys('Mod+Alt')} + / −`], ['Open / save a project', `${keys('Mod+O')} · ${keys('Mod+Shift+S')}`]]],
+];
+
+
+export const isOpen = () => !scrim.hidden;
+
+function render() {
+  const head = el('div', 'dialog-head');
+  const title = el('h2', '', 'Keyboard shortcuts');
+  title.id = 'shortcuts-title';
+  const close = el('button', 'tool mini');
+  close.type = 'button';
+  close.setAttribute('aria-label', 'Close');
+  close.dataset.tip = 'Close · Esc';
+  close.append(icon('close'));
+  close.addEventListener('click', () => toggle(false));
+  head.append(title, close);
+  const grid = el('div', 'shortcut-grid');
+  for (const [name, rows] of GROUPS) {
+    const group = el('section', 'shortcut-group');
+    group.append(el('h3', '', name));
+    const list = el('dl');
+    for (const [what, how] of rows) list.append(el('dt', '', what), el('dd', '', how));
+    group.append(list);
+    grid.append(group);
+  }
+  const foot = el('div', 'dialog-foot');
+  foot.append(el('span', 'caption', 'Shortcuts follow the key, not the keyboard layout. Right-click anything for its actions.'));
+  dialog.replaceChildren(head, grid, foot);
+}
+
+export function toggle(force) {
+  const open = force ?? scrim.hidden;
+  if (open === !scrim.hidden) return;
+  if (open) {
+    returnFocus = document.activeElement;
+    render();
+    scrim.hidden = false;
+    dialog.querySelector('button')?.focus({ preventScroll: true });
+  } else {
+    scrim.hidden = true;
+    if (returnFocus?.isConnected) returnFocus.focus({ preventScroll: true });
+    else $('#viewport').focus({ preventScroll: true });
+  }
+}
+
+scrim.addEventListener('pointerdown', event => { if (event.target === scrim) toggle(false); });
+scrim.addEventListener('keydown', event => {
+  event.stopPropagation();
+  if (event.key === 'Escape' || event.key === '?') { event.preventDefault(); toggle(false); }
+  if (event.key === 'Tab') { event.preventDefault(); dialog.querySelector('button')?.focus(); }
+});
+on('shortcuts', value => toggle(value));

package/dist/lib/sidebar.js

@@ -0,0 +1,85 @@
+import { $, uiScale } from './util.js';
+import { emit } from './store.js';
+
+/* The left sidebar hosts three panes: Layers, History (changes only) and Agent (the conversation with Pi).
+   Their tabs sit under it and never go away: the active tab is lit, and pressing it again (or Esc) folds the
+   sidebar, so a tab both switches and hides. */
+const panel = $('#sidebar');
+const buttons = { layers: $('#open-layers'), activity: $('#open-history'), agent: $('#open-agent') };
+const panes = { layers: $('#layers'), activity: $('#activity'), agent: $('#agent') };
+const LABELS = { layers: 'Layers', activity: 'History', agent: 'Agent' };
+let current = 'layers';
+
+export const tab = () => current;
+export const isOpen = name => !panel.hidden && (!name || current === name);
+export const widthSize = () => (panel.hidden ? 'wide' : panel.getBoundingClientRect().width / uiScale() < 265 ? 'tiny' : panel.getBoundingClientRect().width / uiScale() < 320 ? 'narrow' : 'wide');
+
+export function show(name = current) {
+  current = name;
+  panel.hidden = false;
+  for (const [key, pane] of Object.entries(panes)) pane.hidden = key !== name;
+  panel.setAttribute('aria-label', LABELS[name]);
+  paint();
+  emit('sidebar', { open: true, tab: name });
+}
+
+export function close() {
+  if (panel.hidden) return;
+  const was = current;
+  panel.hidden = true;
+  paint();
+  emit('sidebar', { open: false, tab: was });
+}
+
+/**
+ * The sidebar is resizable, so how much room its content has is a property of the panel, not of the viewport: a media query
+ * cannot see it. `data-sidebar` on the document tells the panes how tight they are, and the width event lets text adapt
+ * (the composer's placeholder and key hints are length-sensitive).
+ */
+const inspector = $('#inspector');
+
+/**
+ * The pinned chrome has two looks, chosen by the panels themselves: with every panel folded it floats over the canvas (frosted,
+ * translucent); as soon as a panel is open the chrome belongs to one opaque body, so the pills and the dock turn solid. `none`,
+ * `left`, `right` or `both` says which side is open.
+ */
+function paintPanels() {
+  const left = !panel.hidden, right = !!inspector && !inspector.hidden;
+  const state = left && right ? 'both' : left ? 'left' : right ? 'right' : 'none';
+  if (document.documentElement.dataset.panels !== state) document.documentElement.dataset.panels = state;
+}
+new MutationObserver(paintPanels).observe(panel, { attributes: true, attributeFilter: ['hidden'] });
+if (inspector) new MutationObserver(paintPanels).observe(inspector, { attributes: true, attributeFilter: ['hidden'] });
+
+function measure() {
+  // Density thresholds are interface pixels, not the scaled screen pixels returned by the rectangle.
+  const width = panel.hidden ? 0 : panel.getBoundingClientRect().width / uiScale();
+  // The sidebar's own floor is 240px (resize.js), so the steps live inside that range: tiny 240–264, narrow 265–319.
+  const size = width && width < 265 ? 'tiny' : width && width < 320 ? 'narrow' : 'wide';
+  if (document.documentElement.dataset.sidebar !== size) {
+    document.documentElement.dataset.sidebar = size;
+    emit('sidebar-width', { size, width });
+  }
+}
+new ResizeObserver(measure).observe(panel);
+// The folded activity plaque belongs to the tab footer; phone sheets/breadcrumbs stay above its real height.
+const footer = $('#sidebar-foot');
+new ResizeObserver(() => {
+  const extra = Math.max(0, footer.offsetHeight - $('#side-tabs').offsetHeight);
+  document.documentElement.style.setProperty('--agent-float-h', `${extra}px`);
+}).observe(footer);
+
+/** Toggle a pane: opening it, switching to it, or folding the sidebar when it is already showing. */
+export function toggle(name) {
+  if (isOpen(name)) close();
+  else show(name);
+}
+
+function paint() {
+  for (const [name, button] of Object.entries(buttons)) {
+    button?.classList.toggle('on', isOpen(name));
+    button?.setAttribute('aria-selected', String(isOpen(name)));
+  }
+  document.body.classList.toggle('has-sidebar', !panel.hidden);
+  document.body.classList.toggle('has-ask', isOpen('agent'));
+}

package/dist/lib/store.js

@@ -0,0 +1,249 @@
+import { clamp } from './util.js';
+import { post, readSession, shareSelection } from './host.js';
+export { base, apiUrl, request, post } from './host.js';
+
+const listeners = new Map();
+export const on = (name, fn) => { (listeners.get(name) || listeners.set(name, new Set()).get(name)).add(fn); return () => listeners.get(name).delete(fn); };
+export const emit = (name, detail) => { for (const fn of listeners.get(name) || []) { try { fn(detail); } catch (error) { console.error(error); } } };
+
+export const store = {
+  state: null,
+  selected: new Set(),
+  node: null,
+  mode: 'board',
+  connection: 'connecting',
+  observations: new Map(),
+  models: new Map(),
+  recent: [],
+  expanded: null,
+  /** Frames being deleted: hidden at once, shown again if the deletion fails. */
+  leaving: new Set(),
+};
+
+export const documents = () => (store.state?.documents || []).filter(doc => !store.leaving.has(doc.id));
+export const descriptor = id => documents().find(doc => doc.id === id);
+
+/** Short notice. `action` adds one button; `sticky` keeps it until replaced or dismissed with `toast.clear(id)`. */
+export function toast(message, action, { sticky = false, id } = {}) { emit('toast', { message, action, sticky, id }); }
+toast.clear = id => emit('toast-clear', id);
+
+/** Resolve once the project state lists `id` (new documents arrive over SSE after the POST returns). */
+export function whenDocument(id, timeout = 4000) {
+  if (descriptor(id)) return Promise.resolve(descriptor(id));
+  return new Promise(resolve => {
+    const stop = on('state', () => { if (descriptor(id)) { stop(); clearTimeout(timer); resolve(descriptor(id)); } });
+    const timer = setTimeout(() => { stop(); resolve(descriptor(id) || null); }, timeout);
+  });
+}
+
+/** Resolve once the project state shows document `id` at `version` or later. */
+export function whenVersion(id, version, timeout = 4000) {
+  const ready = () => (descriptor(id)?.version ?? 0) >= version;
+  if (ready()) return Promise.resolve(true);
+  return new Promise(resolve => {
+    const stop = on('state', () => { if (ready()) { stop(); clearTimeout(timer); resolve(true); } });
+    const timer = setTimeout(() => { stop(); resolve(ready()); }, timeout);
+  });
+}
+
+/** The model including this client's latest accepted commit (waits for the state that announces it). */
+export async function freshModel(id) {
+  const target = known.get(id) || 0;
+  if ((descriptor(id)?.version ?? 0) < target) await whenVersion(id, target);
+  return cachedModel(id) || loadModel(id);
+}
+
+/* ---- tree helpers --------------------------------------------------------- */
+export function parentMap(model) {
+  const parents = new Map();
+  for (const node of Object.values(model.nodes)) if (node.type === 'element') for (const child of node.children) parents.set(child, node.id);
+  return parents;
+}
+export const parentOf = (model, id) => model.nodes[parentMap(model).get(id)] || null;
+export function ancestorsOf(model, id) {
+  const parents = parentMap(model);
+  const path = [];
+  for (let current = parents.get(id); current; current = parents.get(current)) path.unshift(current);
+  return path;
+}
+export const CONTAINERS_EXCLUDED = new Set(['img', 'input', 'br', 'hr', 'area', 'col', 'source', 'track', 'wbr', 'textarea', 'select', 'option']);
+export const canContain = node => node?.type === 'element' && !CONTAINERS_EXCLUDED.has(node.tag);
+export function textChild(model, node) {
+  if (node?.type === 'text') return node;
+  if (node?.type === 'element' && node.children.length === 1 && model.nodes[node.children[0]]?.type === 'text') return model.nodes[node.children[0]];
+  return null;
+}
+
+/* ---- model cache --------------------------------------------------------- */
+const loading = new Map();
+const modelRenders = new WeakMap();
+export function cachedModel(id) {
+  const model = store.models.get(id);
+  return model && model.version === descriptor(id)?.version && modelRenders.get(model) === descriptor(id)?.render ? model : null;
+}
+export async function loadModel(id) {
+  const cached = cachedModel(id);
+  if (cached) return cached;
+  if (!descriptor(id)) throw Object.assign(new Error(`The frame ${id} is gone`), { code: 'NOT_FOUND', quiet: true });
+  const version = descriptor(id)?.version;
+  const render = descriptor(id)?.render;
+  const key = `${id}@${version}:${render}`;
+  if (!loading.has(key)) {
+    loading.set(key, readSession.readFrame(id).then(model => {
+      if (descriptor(id)?.version !== version || descriptor(id)?.render !== render) return loadModel(id);
+      if (model.version === version) {
+        modelRenders.set(model, render);
+        store.models.set(id, model);
+        pruneNodeSelection(model);
+        emit('model', model);
+      }
+      return model;
+    }).finally(() => loading.delete(key)));
+  }
+  return loading.get(key);
+}
+
+/* ---- committing edits (serialised per document) -------------------------- */
+const queues = new Map();
+const known = new Map();
+let groupSeed = 0;
+export const newGroup = () => `u${Date.now().toString(36)}${(groupSeed++).toString(36)}`;
+/** Resolves once every commit queued for one document has finished, whether it succeeded or not. */
+export const idle = documentId => (queues.get(documentId) || Promise.resolve()).then(() => undefined);
+
+function enqueue(documentId, task) {
+  const result = (queues.get(documentId) || Promise.resolve()).then(task);
+  queues.set(documentId, result.catch(() => {}));
+  return result;
+}
+
+async function send(route, documentId, build, { version = Math.max(known.get(documentId) || 0, descriptor(documentId)?.version || 0), retry = true } = {}) {
+  for (let attempt = 0; ; attempt++) {
+    try {
+      const result = await post(route, build(version));
+      known.set(documentId, result.version);
+      return result;
+    } catch (error) {
+      if (error.code === 'REVISION_CONFLICT' && error.details?.actualVersion) known.set(documentId, error.details.actualVersion);
+      if (retry && error.code === 'REVISION_CONFLICT' && attempt < 2 && error.details?.actualVersion) { version = error.details.actualVersion; continue; }
+      throw error;
+    }
+  }
+}
+
+/** A literal patch, or async relative intent derived after prior local writes; derived patches never retry a stale model. */
+export function commit(documentId, patch, { label, group, expectedVersion, expectedRender } = {}) {
+  const guard = expectedVersion === undefined ? {} : { version: expectedVersion, retry: false };
+  const format = store.state?.project?.format;
+  return enqueue(documentId, async () => {
+    if (typeof patch !== 'function') return send('api/patch', documentId, version => ({ documentId, expectedVersion: version, expectedRender, patch, label, group }), guard);
+    if (store.state?.project?.format !== format) throw Object.assign(new Error('The source format changed. Read it again before retrying.'), { code: 'REVISION_CONFLICT' });
+    const model = await freshModel(documentId);
+    if (store.state?.project?.format !== format || model !== cachedModel(documentId) || model.version < (known.get(documentId) || 0)) throw Object.assign(new Error('The frame model is not current. Read it again before retrying.'), { code: 'REVISION_CONFLICT' });
+    const derived = await patch(model);
+    if (store.state?.project?.format !== format || model !== cachedModel(documentId)) throw Object.assign(new Error('The frame changed while preparing this edit. Read it again before retrying.'), { code: 'REVISION_CONFLICT' });
+    if (!derived) return null;
+    return send('api/patch', documentId, version => ({ documentId, expectedVersion: version, expectedRender, patch: derived, label, group }), { version: expectedVersion ?? model.version, retry: false });
+  }).catch(error => { toast(error.message); throw error; });
+}
+export function edit(documentId, op, { label, group, expectedRender } = {}) {
+  const format = store.state?.project?.format;
+  return enqueue(documentId, async () => {
+    if (typeof op !== 'function') return send('api/edit', documentId, expectedVersion => ({ documentId, expectedVersion, expectedRender, op, label, group }));
+    // Derive relative legacy intent after local commits; native operations keep their shown-view guards.
+    if (store.state?.project?.format !== format) throw Object.assign(new Error('The source format changed. Read it again before retrying.'), { code: 'REVISION_CONFLICT' });
+    const model = await freshModel(documentId);
+    if (store.state?.project?.format !== format || model !== cachedModel(documentId) || model.version < (known.get(documentId) || 0)) throw Object.assign(new Error('The frame model is not current. Read it again before retrying.'), { code: 'REVISION_CONFLICT' });
+    const derived = op(model);
+    if (!derived) return null;
+    return send('api/edit', documentId, expectedVersion => ({ documentId, expectedVersion, expectedRender, op: derived, label, group }), { version: model.version, retry: false });
+  }).catch(error => { toast(error.message); throw error; });
+}
+
+export const undo = () => post('api/undo', {}).catch(error => { toast(error.message); return null; });
+export const redo = () => post('api/redo', {}).catch(error => { toast(error.message); return null; });
+
+/* ---- selection ------------------------------------------------------------ */
+let selectionSequence = 0;
+let pendingSelection = null;
+const same = (a, b) => a.length === b.length && a.every(id => b.includes(id));
+export const isSelectionPending = () => !!pendingSelection;
+
+function syncSelection() {
+  if (!shareSelection) return;
+  const seq = ++selectionSequence;
+  const ids = [...store.selected];
+  const nodes = store.node && ids.length === 1 && ids[0] === store.node.documentId ? { documentId: store.node.documentId, nodeIds: store.node.nodeIds } : undefined;
+  pendingSelection = { seq, ids };
+  shareSelection({ ids, nodes }).then(result => {
+    if (seq !== selectionSequence) return;
+    pendingSelection = null;
+    receiveState(result);
+  }).catch(error => {
+    if (seq === selectionSequence) pendingSelection = null;
+    toast(`Selection could not be shared: ${error.message}`);
+  });
+}
+
+export function selectArtboards(ids, { additive = false, keepNode = false } = {}) {
+  const valid = new Set(documents().map(doc => doc.id));
+  const next = new Set(additive ? store.selected : []);
+  for (const id of ids) if (valid.has(id)) next.add(id);
+  store.selected = next;
+  if (!keepNode || (store.node && !next.has(store.node.documentId))) store.node = null;
+  emit('selection');
+  syncSelection();
+}
+
+export function selectNodes(documentId, nodeIds, { reveal = false } = {}) {
+  store.node = nodeIds.length ? { documentId, nodeIds: [...new Set(nodeIds)] } : null;
+  store.selected = new Set([documentId]);
+  emit('selection', { reveal });
+  syncSelection();
+}
+
+/** Drop selected node IDs that no longer exist (after delete, undo or an agent edit). */
+function pruneNodeSelection(model) {
+  if (store.node?.documentId !== model.id) return;
+  const kept = store.node.nodeIds.filter(id => model.nodes[id]);
+  if (kept.length !== store.node.nodeIds.length) selectNodes(model.id, kept);
+}
+
+export function receiveState(next) {
+  if (!next || !Array.isArray(next.documents) || !Number.isSafeInteger(next.stateVersion) || next.stateVersion < 1) return;
+  const previous = store.state;
+  if (previous && (next.projectId !== previous.projectId || next.url !== previous.url || next.project?.file !== previous.project?.file || next.stateVersion < previous.stateVersion || Number.isFinite(next.revision) && next.revision < previous.revision)) return;
+  const oldSelection = previous?.selection;
+  store.state = next;
+  if (oldSelection && (next.selection?.revision ?? 0) < (oldSelection.revision ?? 0)) next.selection = oldSelection;
+  const ids = Array.isArray(next.selection?.ids) ? next.selection.ids : [];
+  // Only the initial host state seeds a local selection; later snapshot reads cannot overwrite the user's view.
+  if ((!previous || shareSelection) && (!pendingSelection || same(ids, pendingSelection.ids))) store.selected = new Set(ids);
+  store.selected = new Set([...store.selected].filter(id => next.documents.some(doc => doc.id === id)));
+  if (!previous && next.selection?.selectedNodes && store.selected.has(next.selection.selectedNodes.documentId)) store.node = next.selection.selectedNodes;
+  if (store.node && !store.selected.has(store.node.documentId)) store.node = null;
+  for (const id of [...store.models.keys()]) if (!next.documents.some(doc => doc.id === id)) store.models.delete(id);
+  for (const id of [...store.leaving]) if (!next.documents.some(doc => doc.id === id)) store.leaving.delete(id);
+  emit('state', next);
+}
+
+/** Hide frames optimistically while they are deleted; `undo` shows them again. */
+export function leave(ids, undo = false) {
+  for (const id of ids) { if (undo) store.leaving.delete(id); else store.leaving.add(id); }
+  if (!undo) { store.selected = new Set([...store.selected].filter(id => !store.leaving.has(id))); if (store.node && store.leaving.has(store.node.documentId)) store.node = null; }
+  if (store.state) emit('state', store.state);
+  emit('selection');
+}
+
+export function setConnection(value) {
+  store.connection = value;
+  emit('connection', value);
+}
+
+export function viewState(projectId) {
+  try { return JSON.parse(localStorage.getItem(`divlet:${projectId}`) || 'null'); } catch { return null; }
+}
+export function saveViewState(projectId, value) {
+  try { localStorage.setItem(`divlet:${projectId}`, JSON.stringify(value)); } catch {}
+}
+export { clamp };

package/dist/lib/suggest.js

@@ -0,0 +1,130 @@
+// One floating suggestion list for the inspector's inputs (classes, attributes, CSS properties).
+// ↑↓ choose · Tab completes · Enter takes the chosen item (or what was typed) · Esc closes.
+import { el, clamp, debounce, uiScale } from './util.js';
+
+const pop = el('div', 'suggest');
+pop.id = 'suggest';
+pop.setAttribute('role', 'listbox');
+pop.hidden = true;
+document.body.append(pop);
+let owner = null;
+let options = null;
+let items = [];
+let active = -1;
+let seq = 0;
+
+function close() {
+  seq++;
+  if (owner) { owner.setAttribute('aria-expanded', 'false'); owner.removeAttribute('aria-activedescendant'); }
+  owner = null;
+  options = null;
+  items = [];
+  active = -1;
+  pop.hidden = true;
+  pop.replaceChildren();
+}
+
+function place() {
+  if (!owner?.isConnected) return close();
+  const r = owner.getBoundingClientRect();
+  const w = pop.offsetWidth * uiScale();
+  const h = pop.offsetHeight * uiScale();
+  pop.style.left = `${clamp(r.left - 6, 6, innerWidth - w - 6)}px`;
+  pop.style.top = `${r.bottom + 6 + h > innerHeight - 6 ? Math.max(6, r.top - h - 6) : r.bottom + 6}px`;
+}
+
+function paint() {
+  pop.replaceChildren(...items.map((item, index) => {
+    const row = el('div', `suggest-item${index === active ? ' on' : ''}`);
+    row.id = `suggest-${index}`;
+    row.setAttribute('role', 'option');
+    row.setAttribute('aria-selected', String(index === active));
+    const mark = el('i', `suggest-mark ${item.kind || ''}`);
+    if (item.color) mark.style.background = item.color;
+    row.append(mark, el('span', 'suggest-name', item.label ?? item.name), el('span', 'suggest-hint', item.hint || ''));
+    row.addEventListener('pointerdown', event => { event.preventDefault(); accept(index); });
+    row.addEventListener('pointermove', () => { if (active !== index) { active = index; paint(); } });
+    return row;
+  }));
+  pop.hidden = !items.length;
+  if (owner) {
+    owner.setAttribute('aria-expanded', String(!!items.length));
+    if (active >= 0) owner.setAttribute('aria-activedescendant', `suggest-${active}`); else owner.removeAttribute('aria-activedescendant');
+  }
+  place();
+}
+
+const lastWord = value => value.split(/\s+/).at(-1);
+
+function accept(index) {
+  const item = items[index];
+  const input = owner;
+  const settings = options;
+  if (!item || !input) return;
+  if (settings.words) { const words = input.value.split(/\s+/); words[words.length - 1] = item.name; input.value = words.join(' '); }
+  else input.value = item.name;
+  close();
+  input.dispatchEvent(new Event('suggest-accept'));
+  // A partial pick (a variant such as `hover:`) keeps typing; a whole one is taken at once.
+  if (item.partial) { input.focus(); input.dispatchEvent(new Event('input')); return; }
+  settings.onAccept?.(input, item);
+}
+
+/**
+ * Offer `fetch(word)` results under `input`. `words: true` completes the last space-separated
+ * word (class lists); otherwise the whole value. `onAccept(input, item)` runs on a pick.
+ */
+export function attachSuggest(input, { fetch, onAccept, words = false, empty = false }) {
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-controls', 'suggest');
+  input.setAttribute('aria-expanded', 'false');
+  input.autocomplete = 'off';
+  const show = async (force = false) => {
+    if (document.activeElement !== input) return;
+    const word = words ? lastWord(input.value) : input.value.trim();
+    if (!word && !empty && !force) { if (owner === input) close(); return; }
+    const mine = ++seq;
+    let list;
+    try { list = await fetch(word); } catch { return; }
+    if (mine !== seq || document.activeElement !== input) return;
+    list = (list || []).filter(item => item.name !== word).slice(0, 8);
+    if (!list.length) { if (owner === input) close(); return; }
+    owner = input;
+    options = { onAccept, words };
+    items = list;
+    active = -1;
+    paint();
+  };
+  const update = debounce(() => show(), 60);
+  input.addEventListener('input', update);
+  if (empty) input.addEventListener('focus', update);
+  input.addEventListener('keydown', event => {
+    // ↓ opens the list on an empty field; it never opens by itself over other controls unless `empty`.
+    if (event.key === 'ArrowDown' && (owner !== input || pop.hidden)) { event.preventDefault(); show(true); return; }
+    if (owner !== input || pop.hidden) return;
+    const take = () => { event.preventDefault(); event.stopImmediatePropagation(); };
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      take();
+      active = (active + (event.key === 'ArrowDown' ? 1 : -1) + items.length + 1) % (items.length + 1);
+      if (active === items.length) active = -1;
+      paint();
+    } else if (event.key === 'Tab' && !event.shiftKey) { take(); accept(Math.max(0, active)); }
+    else if (event.key === 'Enter' && active >= 0) { take(); accept(active); }
+    else if (event.key === 'Escape') { take(); close(); }
+  });
+  input.addEventListener('blur', () => { if (owner === input) close(); });
+}
+
+/** Local suggestions: names starting with the word first, then names containing it. */
+export function filterLocal(list, word, limit = 8) {
+  const needle = word.toLowerCase();
+  const starts = list.filter(item => item.name.toLowerCase().startsWith(needle));
+  const inside = needle.length > 1 ? list.filter(item => !item.name.toLowerCase().startsWith(needle) && item.name.toLowerCase().includes(needle)) : [];
+  return [...starts, ...inside].slice(0, limit);
+}
+
+// A field that is replaced while its list is open (the inspector redraws) never gets a blur.
+new MutationObserver(() => { if (owner && !owner.isConnected) close(); }).observe(document.body, { childList: true, subtree: true });
+window.addEventListener('resize', () => { if (owner) place(); });
+document.addEventListener('scroll', event => { if (owner && !pop.contains(event.target)) place(); }, true);

package/dist/lib/toolbar.js

@@ -0,0 +1,54 @@
+// A toolbar that fits itself: every action is a button in one row, and whatever does not fit moves, in order, into a
+// trailing "More" dropdown that is rebuilt whenever the available width changes. Nothing is hard-coded about which
+// actions overflow; the order of `items` is the priority (the last ones leave first).
+import { el, button } from './util.js';
+import { openMenu } from './menu.js';
+
+/**
+ * items: menu-style entries `{ label, icon, keys, run, disabled, danger, hint, checked }` (falsy entries and '-' are
+ * skipped in the row and kept as separators in the dropdown). Returns the bar element.
+ */
+export function overflowBar(items, { label = 'More' } = {}) {
+  const list = items.filter(Boolean);
+  const actions = list.filter(item => item !== '-' && !item.heading);
+  const bar = el('div', 'actions smart-bar');
+  const buttons = actions.map(item => {
+    const node = button(item.icon, item.keys ? `${item.label} · ${item.keys}` : item.label, () => item.run?.(), item.danger ? 'danger' : '');
+    node.disabled = !!item.disabled;
+    return node;
+  });
+  const more = button('more', label, event => {
+    const rest = [];
+    let pendingRule = false;
+    for (const entry of list) {
+      if (entry === '-' || entry.heading) { pendingRule = rest.length > 0; continue; }
+      const index = actions.indexOf(entry);
+      if (!buttons[index].hidden) continue;
+      if (pendingRule) { rest.push('-'); pendingRule = false; }
+      rest.push(entry);
+    }
+    openMenu(rest, { anchor: event.currentTarget, label });
+  });
+  more.hidden = true;
+  more.classList.add('more');
+  bar.append(...buttons, more);
+
+  // One read phase (every width with everything shown), then one write phase: no layout thrash while buttons are hidden.
+  const fit = () => {
+    for (const node of buttons) node.hidden = false;
+    more.hidden = false;
+    const room = bar.clientWidth;
+    if (!room) { more.hidden = true; return; }
+    const gap = parseFloat(getComputedStyle(bar).columnGap) || 0;
+    const sizes = buttons.map(node => node.getBoundingClientRect().width);
+    const moreSize = more.getBoundingClientRect().width;
+    const used = count => sizes.slice(0, count).reduce((sum, size, index) => sum + size + (index ? gap : 0), 0);
+    let keep = buttons.length;
+    // Without the dropdown everything must fit; otherwise drop buttons from the end until the rest and the dropdown do (the first always stays).
+    if (used(keep) > room + 0.5) while (keep > 1 && used(keep) + gap + moreSize > room + 0.5) keep--;
+    buttons.forEach((node, index) => { node.hidden = index >= keep; });
+    more.hidden = keep === buttons.length;
+  };
+  new ResizeObserver(fit).observe(bar);
+  return bar;
+}