@tio-canvas/canvas 0.0.0-stage → 0.1.1

package/client/select-field.js

@@ -0,0 +1,191 @@
+import { menuPosition } from './menu-position.js';
+
+const selectMenus = new Map();
+const groupIcons = {
+  Desktop: '<rect x="3" y="3" width="14" height="10" rx="1"/><path d="M10 13v4m-4 0h8"/>',
+  Mobile: '<rect x="6" y="2" width="8" height="16" rx="2"/><path d="M9 15h2"/>',
+  Tablet: '<rect x="4" y="2" width="12" height="16" rx="2"/><path d="M9 15h2"/>',
+  Foldable: '<rect x="4" y="2" width="12" height="16" rx="2"/><path d="M10 2v16"/>',
+};
+
+export function closeSelectMenus() {
+  for (const menu of selectMenus.keys()) if (menu.matches(':popover-open')) menu.hidePopover();
+}
+
+export function positionSelectMenus() {
+  for (const [menu, position] of selectMenus) if (menu.matches(':popover-open')) position();
+}
+
+function connectMenu(button, menu, focusOption) {
+  button.removeAttribute('popovertarget');
+  button.setAttribute('aria-controls', menu.id);
+  const position = () => {
+    menu.style.removeProperty('max-height');
+    const anchor = button.getBoundingClientRect(), box = menu.getBoundingClientRect();
+    const style = getComputedStyle(menu);
+    const margin = parseFloat(style.getPropertyValue('--canvas-panel-inset'));
+    const gap = parseFloat(style.getPropertyValue('--canvas-menu-offset'));
+    const owner = button.closest('.canvas-tools');
+    const obstacles = [...document.querySelectorAll('.canvas-tools')]
+      .filter(element => element !== owner && !element.hasAttribute('popover') && getComputedStyle(element).position === 'fixed' && element.checkVisibility())
+      .map(element => element.getBoundingClientRect());
+    const placement = menuPosition({ anchor, width: box.width, height: box.height,
+      viewport: { width: innerWidth, height: innerHeight }, margin, gap, obstacles,
+      aboveOnly: menu.classList.contains('endpoint-options') });
+    if (!placement) return;
+    menu.style.maxHeight = `${placement.height}px`;
+    menu.style.left = `${placement.x}px`;
+    menu.style.top = `${placement.y}px`;
+    // Scale from the trigger: its centre on x, the edge facing it on y.
+    menu.style.transformOrigin = `${anchor.left + anchor.width / 2 - placement.x}px ${placement.y >= anchor.bottom - 1 ? '0' : '100%'}`;
+  };
+  selectMenus.set(menu, position);
+  // A popover="auto" menu is light-dismissed by the press that lands on its own
+  // trigger, so by click time it is already closed and would reopen at once.
+  let wasOpen = false;
+  button.addEventListener('pointerdown', () => { wasOpen = menu.matches(':popover-open'); });
+  button.addEventListener('click', () => {
+    const pressedWhileOpen = wasOpen;
+    wasOpen = false;
+    if (pressedWhileOpen || menu.matches(':popover-open')) {
+      if (menu.matches(':popover-open')) menu.hidePopover();
+      // Closing with a pointer must not leave a keyboard ring on the trigger.
+      if (pressedWhileOpen) button.blur();
+      return;
+    }
+    closeSelectMenus();
+    menu.showPopover();
+    // Position in the opening task, before the browser can paint an old location.
+    position();
+    const option = focusOption();
+    option?.focus({ preventScroll: true });
+    option?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'instant' });
+  });
+  menu.addEventListener('beforetoggle', event => {
+    button.setAttribute('aria-expanded', String(event.newState === 'open'));
+  });
+  window.addEventListener('resize', () => { if (menu.matches(':popover-open')) position(); });
+}
+
+// Icon menus share the preset field's padding, chevron, focus ring, and surface.
+const icons = {
+  line: 'M3 10h14',
+  start: 'M17 10H3m5-5-5 5 5 5',
+  end: 'M3 10h14m-5-5 5 5-5 5',
+};
+export function setupArrowFields(toolbar) {
+  const menus = [];
+  for (const button of toolbar.querySelectorAll('button[data-arrow-field]')) {
+    const side = button.dataset.arrowField === 'startStyle' ? 'start' : 'end';
+    const menu = document.createElement('div');menu.className = 'canvas-tools icon-options endpoint-options';menu.popover = 'auto';menu.setAttribute('role', 'menu');menu.setAttribute('aria-label', `${side === 'start' ? 'Start' : 'End'} style`);
+    menu.id = `arrow-${side}-options`;button.setAttribute('popovertarget', menu.id);button.setAttribute('aria-haspopup', 'menu');
+    for (const value of ['line', 'arrow']) {
+      const option = document.createElement('button');option.type = 'button';option.dataset.value = value;option.setAttribute('role', 'menuitemradio');
+      option.setAttribute('aria-label', value === 'line' ? 'Line' : `${side === 'start' ? 'Left' : 'Right'} arrow`);
+      option.innerHTML = `<svg class="field-icon" viewBox="0 0 20 20" aria-hidden="true"><path d="${icons[value === 'line' ? 'line' : side]}"/></svg>`;
+      option.onclick = () => { button.value = value;button.dispatchEvent(new Event('change', { bubbles: true }));menu.hidePopover();document.activeElement?.blur(); };
+      menu.append(option);
+    }
+    document.body.append(menu);menus.push({ button, menu, side });
+    connectMenu(button, menu, () => menu.querySelector('[aria-checked="true"]') || menu.firstElementChild);
+    menu.addEventListener('keydown', event => {
+      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End', 'Escape'].includes(event.key)) return;
+      event.preventDefault();event.stopPropagation();
+      if (event.key === 'Escape') { menu.hidePopover();button.focus();return; }
+      const options = [...menu.children], index = options.indexOf(document.activeElement);
+      options[event.key === 'Home' ? 0 : event.key === 'End' ? 1 : (index + 1) % 2].focus();
+    });
+  }
+  return {
+    update() {
+      for (const field of toolbar.querySelectorAll('select[data-arrow-field]')) {
+        const label = field.parentElement.previousElementSibling.querySelector('[data-field-label]');
+        label.textContent = field.selectedOptions[0]?.textContent ?? 'Mixed';
+      }
+      for (const { button, menu, side } of menus) {
+        button.querySelector('path').setAttribute('d', icons[button.value === 'arrow' ? side : 'line']);
+        button.dataset.mixed = String(!button.value);
+        button.setAttribute('aria-label', `${side === 'start' ? 'Start' : 'End'} style: ${button.value || 'Mixed'}`);
+        for (const option of menu.children) option.setAttribute('aria-checked', String(option.dataset.value === button.value));
+      }
+    },
+    close() { for (const { menu } of menus) if (menu.matches(':popover-open')) menu.hidePopover(); },
+  };
+}
+
+// Keep select values as the data interface, never as the visible control.
+export function setupSelectFields(root = document) {
+  for (const select of root.querySelectorAll('.select-field select')) {
+    const field = select.parentElement;
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'select-field';
+    button.setAttribute('aria-label', select.getAttribute('aria-label') || 'Preset');
+    button.dataset.tooltip = button.getAttribute('aria-label');
+    button.setAttribute('aria-haspopup', 'menu');
+    button.setAttribute('aria-expanded', 'false');
+    for (const child of [...field.children]) if (child !== select) button.append(child);
+    field.before(button);
+    select.hidden = true;
+    field.hidden = true;
+    const menu = document.createElement('div');
+    menu.className = 'canvas-tools icon-options text-options';
+    menu.popover = 'auto';
+    menu.id = `select-options-${select.id || select.dataset.arrowField}`;
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', button.getAttribute('aria-label'));
+    button.setAttribute('popovertarget', menu.id);
+    document.body.append(menu);
+    const sync = () => {
+      button.querySelector('span').textContent = select.selectedOptions[0]?.textContent || 'Mixed';
+      for (const option of menu.querySelectorAll('button[data-value]')) option.setAttribute('aria-checked', String(option.dataset.value === select.value));
+    };
+    const rebuild = () => {
+      menu.replaceChildren();
+      let groupLabel;
+      for (const item of select.options) {
+        if (item.hidden || item.disabled) continue;
+        const group = item.parentElement instanceof HTMLOptGroupElement ? item.parentElement.label : '';
+        if (group && group !== groupLabel) {
+          groupLabel = group;
+          const heading = document.createElement('div'); heading.className = 'option-group-label';
+          const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+          icon.setAttribute('viewBox', '0 0 20 20'); icon.setAttribute('aria-hidden', 'true');
+          icon.innerHTML = groupIcons[group] || groupIcons.Desktop;
+          const label = document.createElement('span'); label.textContent = group;
+          heading.append(icon, label); menu.append(heading);
+        }
+        const option = document.createElement('button');
+        option.type = 'button';
+        option.textContent = item.textContent;
+        option.dataset.value = item.value;
+        option.setAttribute('role', 'menuitemradio');
+        option.onclick = () => {
+          select.value = item.value;
+          select.dispatchEvent(new Event('change', { bubbles: true }));
+          menu.hidePopover();
+          document.activeElement?.blur();
+          sync();
+        };
+        menu.append(option);
+      }
+      sync();
+    };
+    button.addEventListener('click', rebuild);
+    select.addEventListener('change', sync);
+    connectMenu(button, menu, () => {
+      sync();
+      return menu.querySelector('[aria-checked="true"]') || menu.querySelector('button[data-value]');
+    });
+    menu.addEventListener('keydown', event => {
+      event.stopPropagation();
+      const options = [...menu.querySelectorAll('button[data-value]')], index = options.indexOf(document.activeElement);
+      if (event.key === 'Escape') { event.preventDefault();menu.hidePopover();button.focus();return; }
+      if (event.key === 'Tab') { menu.hidePopover();button.focus();return; }
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+      event.preventDefault();
+      options[event.key === 'Home' ? 0 : event.key === 'End' ? options.length - 1 : (index + (event.key === 'ArrowUp' ? -1 : 1) + options.length) % options.length]?.focus();
+    });
+    rebuild();
+  }
+}

package/client/shortcuts.js

@@ -0,0 +1,158 @@
+import { platform, setPlatform } from './platform.js';
+
+// One table, written once. A key is a name resolved for the chosen keyboard
+// (mod, alt, shift, backspace), a plain label, or a mouse gesture {g}. A row is
+// a list of alternatives; an alternative is a list of keys pressed together.
+const drag = { g: 'drag' }, click = { g: 'click' }, arrows = { arrows: true };
+const sections = [
+  ['Editing', [
+    ['Duplicate selection', [['mod', 'D']]],
+    ['Duplicate before or during drag', [['alt', drag]]],
+    ['Delete selection', [['backspace'], ['Delete']]],
+    ['Undo', [['mod', 'Z']]],
+    ['Redo', { mac: [['mod', 'shift', 'Z']], win: [['mod', 'shift', 'Z'], ['mod', 'Y']] }],
+    ['Rename screen', [[{ g: 'Double-click title or layer name' }]]],
+  ]],
+  ['Navigation and selection', [
+    ['Nudge selected screens by 10 px', [[arrows]]],
+    ['Nudge selected screens by 20 px', [['shift', arrows]]],
+    ['Select all', [['mod', 'A']]],
+    ['Fit all screens', [['shift', '1']]],
+    ['Fit selected screens', [['shift', '2']]],
+    ['Toggle screen selection', [['shift', click]]],
+    ['Constrain drag to one axis', [['shift', drag]]],
+    ['Pan canvas', [['Space', drag]]],
+    ['Pan with mouse', [[{ g: 'Middle-button drag' }]]],
+    ['Zoom at pointer', [['mod', { g: 'wheel' }]]],
+    ['Close menu, dialog or preview', [['Esc']]],
+    ['Release pan', [['Esc']]],
+  ]],
+  ['Tools', [
+    ['Cursor tool', [['V']]],
+    ['Arrow tool', [['A']]],
+    ['Text tool', [['T']]],
+    ['Edit selected text', [['Enter']]],
+    ['Bold or italic: selected words, or the whole text', [['mod', 'B'], ['mod', 'I']]],
+    ['Back to cursor tool and clear arrow selection', [['Esc']]],
+    ['Select arrow', [['Enter'], ['Space']]],
+    ['Add arrow to selection', [['shift', click]]],
+  ]],
+  ['Arrange · select two or more screens', [
+    ['Align left', [['alt', 'A']]],
+    ['Align horizontal centers', [['alt', 'H']]],
+    ['Align right', [['alt', 'D']]],
+    ['Align top', [['alt', 'W']]],
+    ['Align vertical centers', [['alt', 'V']]],
+    ['Align bottom', [['alt', 'S']]],
+    ['Distribute horizontal spacing', [['ctrl', 'alt', 'H']]],
+    ['Distribute vertical spacing', [['ctrl', 'alt', 'V']]],
+  ]],
+  ['Reorder · select a row, column or grid', [
+    ['Reorder screens', [[{ g: 'Drag a center dot' }]]],
+    ['Cancel reorder drag', [['Esc']]],
+  ]],
+  ['Layers', [
+    ['Bring forward', [['mod', ']']]],
+    ['Send backward', [['mod', '[']]],
+    ['Bring to front', [['mod', 'shift', ']']]],
+    ['Send to back', [['mod', 'shift', '[']]],
+    ['Select a range', [['shift', click]]],
+    ['Toggle individual layers', [['mod', { g: 'click' }]]],
+  ]],
+  ['Fields and menus', [
+    ['Save screen name / apply zoom', [['Enter']]],
+    ['Cancel rename / reset zoom', [['Esc']]],
+    ['Move through context menu', [['↑'], ['↓']]],
+    ['First / last menu item', [['Home'], ['End']]],
+    ['Activate menu item', [['Enter'], ['Space']]],
+  ]],
+];
+
+const names = {
+  mac: { mod: ['⌘', 'Command'], alt: ['⌥', 'Option'], shift: ['⇧', 'Shift'], ctrl: ['Ctrl', 'Control'], backspace: ['⌫', 'Backspace'] },
+  win: { mod: ['Ctrl', 'Control'], alt: ['Alt', 'Alt'], shift: ['Shift', 'Shift'], ctrl: ['Ctrl', 'Control'], backspace: ['Backspace', 'Backspace'] },
+};
+const mouse = '<svg viewBox="0 0 20 20" aria-hidden="true"><rect x="5" y="2" width="10" height="16" rx="5"/><path d="M10 2v6"/></svg>';
+const el = (tag, className, text) => { const node = document.createElement(tag); if (className) node.className = className; if (text != null) node.textContent = text; return node; };
+
+// The four arrow keys laid out as on a keyboard: one above, three below.
+const arrowKeys = [['↑', 'Up arrow', 'up'], ['←', 'Left arrow', 'left'], ['↓', 'Down arrow', 'down'], ['→', 'Right arrow', 'right']];
+function key(token, kind) {
+  if (typeof token === 'object' && token.arrows) {
+    const cluster = el('span', 'shortcut-arrows');
+    cluster.setAttribute('role', 'group');
+    cluster.setAttribute('aria-label', 'Arrow keys');
+    for (const [glyph, name, place] of arrowKeys) {
+      const cap = el('kbd', '', glyph);
+      cap.dataset.arrow = place;
+      cap.setAttribute('aria-label', name);
+      cluster.append(cap);
+    }
+    return cluster;
+  }
+  if (typeof token === 'object') {
+    const gesture = el('span', 'shortcut-gesture');
+    gesture.innerHTML = mouse;
+    gesture.append(token.g);
+    return gesture;
+  }
+  const named = names[kind][token];
+  const cap = el('kbd', '', named ? named[0] : token);
+  if (named && named[0] !== named[1]) cap.setAttribute('aria-label', named[1]);
+  return cap;
+}
+
+function render(body, kind) {
+  body.replaceChildren();
+  sections.forEach(([title, rows], index) => {
+    const section = el('section', 'shortcut-section');
+    const heading = el('h3', '', title);
+    heading.id = `shortcut-group-${index}`;
+    section.setAttribute('aria-labelledby', heading.id);
+    const list = el('dl');
+    for (const [label, spec] of rows) {
+      const options = Array.isArray(spec) ? spec : spec[kind];
+      const row = el('div', 'shortcut-row');
+      const keys = el('dd');
+      options.forEach((chord, n) => {
+        if (n) keys.append(el('span', 'shortcut-or', 'or'));
+        const pad = chord.some(token => token.arrows);
+        const group = el('span', pad ? 'shortcut-chord shortcut-keypad' : 'shortcut-chord');
+        chord.forEach((token, i) => {
+          if (pad && i) group.append(el('span', 'shortcut-plus', '+'));
+          group.append(key(token, kind));
+        });
+        if (pad) row.classList.add('shortcut-row-stack');
+        keys.append(group);
+      });
+      row.append(el('dt', '', label), keys);
+      list.append(row);
+    }
+    section.append(heading, list);
+    body.append(section);
+  });
+}
+
+const dialog = document.querySelector('#shortcuts');
+const body = dialog.querySelector('.shortcuts-body');
+const toggle = dialog.querySelector('#shortcuts-platform');
+function sync() {
+  const kind = platform();
+  const scroll = body.scrollTop;
+  render(body, kind);
+  body.scrollTop = scroll;
+  for (const option of toggle.querySelectorAll('[data-platform]')) option.setAttribute('aria-checked', String(option.dataset.platform === kind));
+}
+toggle.addEventListener('click', event => {
+  const option = event.target.closest('[data-platform]');
+  if (option) setPlatform(option.dataset.platform);
+});
+toggle.addEventListener('keydown', event => {
+  if (!['ArrowLeft', 'ArrowRight'].includes(event.key)) return;
+  event.preventDefault(); event.stopPropagation();
+  const next = platform() === 'mac' ? 'win' : 'mac';
+  setPlatform(next);
+  toggle.querySelector(`[data-platform="${next}"]`).focus();
+});
+window.addEventListener('tio-canvas:platform', sync);
+sync();

package/client/smart-handles.js

@@ -0,0 +1,28 @@
+// Host controls stay above the multi-selection grab area and every preview.
+export function createSmartHandles({ selection, viewport, onDrag }) {
+  const root=document.createElement('div');root.id='smart-handles';selection.append(root);
+  const target=document.createElement('div');target.id='smart-target';target.hidden=true;target.setAttribute('aria-hidden','true');viewport.append(target);
+  const buttons=new Map();
+  return {
+    update(entries,camera,box,{enabled,active=null,destination=null}){
+      const wanted=new Set(enabled?entries:[]);
+      for(const [entry,button] of buttons)if(!wanted.has(entry)){button.remove();buttons.delete(entry);}
+      for(const entry of wanted){
+        let button=buttons.get(entry);
+        if(!button){
+          button=document.createElement('button');button.type='button';button.className='smart-handle';button.dataset.screenId=entry.model.id;
+          button.addEventListener('pointerdown',event=>{if(event.button===0 && !document.body.hasAttribute('data-space')){event.stopPropagation();onDrag(entry,event);}});
+          button.dataset.tooltip='Drag to reorder screens';
+          root.append(button);buttons.set(entry,button);
+        }
+        const name=`Reorder ${entry.model.title}`;
+        if(button.getAttribute('aria-label')!==name)button.setAttribute('aria-label',name);
+        const m=entry.model,position=`${(m.x+m.width/2-box.x)*camera.scale}px ${(m.y+m.height/2-box.y)*camera.scale}px`;
+        if(button.style.translate!==position)button.style.translate=position;
+        button.toggleAttribute('data-moving',entry===active);
+      }
+      target.hidden=!destination;
+      if(destination)Object.assign(target.style,{left:`${camera.x+destination.x*camera.scale}px`,top:`${camera.y+destination.y*camera.scale}px`,width:`${destination.width*camera.scale}px`,height:`${destination.height*camera.scale}px`});
+    }
+  };
+}

package/client/smart-selection.js

@@ -0,0 +1,52 @@
+import { pixelRect, workspace } from './geometry.js';
+
+// Capture spatial slots, not layer order. Only non-overlapping rows, columns,
+// and complete aligned grids have an unambiguous order to rearrange.
+export function smartLayout(rectangles) {
+  if (rectangles.length < 2) return null;
+  const models = rectangles.map(pixelRect), rows = [];
+  const ordered = models.map((rect, index) => ({ rect, index })).sort((a,b) => a.rect.y-b.rect.y || a.rect.x-b.rect.x);
+  for (const item of ordered) {
+    let row = rows.at(-1);
+    if (!row || row.y !== item.rect.y) { row = { y:item.rect.y, items:[] }; rows.push(row); }
+    row.items.push(item);
+  }
+  const columns = rows[0].items.length;
+  // Every row is full, except that the last may stop short (three screens in a two-by-two).
+  if (rows.some((row, i) => i < rows.length-1 ? row.items.length !== columns : row.items.length > columns)) return null;
+  const xs = rows[0].items.map(item => item.rect.x);
+  if (rows.some(row => row.items.some((item, i) => item.rect.x !== xs[i]))) return null;
+  const widths = xs.map((_, i) => Math.max(...rows.filter(row => row.items[i]).map(row => row.items[i].rect.width)));
+  const heights = rows.map(row => Math.max(...row.items.map(item => item.rect.height)));
+  const gapsX = xs.slice(1).map((x,i) => x-xs[i]-widths[i]);
+  const gapsY = rows.slice(1).map((row,i) => row.y-rows[i].y-heights[i]);
+  if ([...gapsX,...gapsY].some(gap => gap < 0)) return null;
+  return { models, columns, rows:rows.length, x:xs[0], y:rows[0].y, gapsX, gapsY, order:ordered.map(item => item.index) };
+}
+
+// Insert shifts intervening screens.
+// Repack with the captured gaps and each screen's own dimensions.
+export function reorderSmartLayout(layout, source, target, extent = 20000) {
+  if (!layout || !Number.isInteger(source) || !Number.isInteger(target) || source < 0 || target < 0 || source >= layout.order.length || target >= layout.order.length) return null;
+  const order = [...layout.order];
+  order.splice(target,0,order.splice(source,1)[0]);
+  const widths = Array.from({length:layout.columns},(_,col) => Math.max(...Array.from({length:layout.rows},(_,row) => order[row*layout.columns+col]).filter(i => i !== undefined).map(i => layout.models[i].width)));
+  const heights = Array.from({length:layout.rows},(_,row) => Math.max(...order.slice(row*layout.columns,(row+1)*layout.columns).map(i => layout.models[i].height)));
+  const xs = [layout.x], ys = [layout.y];
+  for (let col=1;col<layout.columns;col++) xs.push(xs[col-1]+widths[col-1]+layout.gapsX[col-1]);
+  for (let row=1;row<layout.rows;row++) ys.push(ys[row-1]+heights[row-1]+layout.gapsY[row-1]);
+  const result = layout.models.map(rect => ({...rect}));
+  order.forEach((index,slot) => Object.assign(result[index],{x:xs[slot%layout.columns],y:ys[Math.floor(slot/layout.columns)]}));
+  const space = workspace(extent);
+  if (result.some(rect => rect.x<0 || rect.y<0 || rect.x+rect.width>space.width || rect.y+rect.height>space.height)) return null;
+  return result;
+}
+
+export function nearestSmartSlot(layout, x, y) {
+  let nearest = 0, distance = Infinity;
+  layout.order.forEach((index,slot) => {
+    const rect = layout.models[index], next = Math.hypot(x-rect.x-rect.width/2,y-rect.y-rect.height/2);
+    if (next < distance) { nearest = slot; distance = next; }
+  });
+  return nearest;
+}

package/client/spacing.js

@@ -0,0 +1,45 @@
+import { pixelRect, workspace } from './geometry.js';
+
+// Group spacing changes positions only. Dimensions and stacking stay untouched.
+export function groupSpacing(rectangles, extent = 20000, requestedAxis = null) {
+  if (rectangles.length < 2) return null;
+  const spread = axis => {
+    const positions = rectangles.map(r => r[axis]);
+    return Math.max(...positions) - Math.min(...positions);
+  };
+  const axis = requestedAxis ?? (spread('x') >= spread('y') ? 'x' : 'y');
+  const size = axis === 'x' ? 'width' : 'height';
+  const ordered = rectangles.map((rect, index) => ({ rect, index })).sort((a, b) => a.rect[axis] - b.rect[axis]);
+  // Screens sharing an axis position form one band. Moving a grid's columns
+  // must not turn every screen into a separate column (likewise for rows).
+  const bands = [];
+  for (const item of ordered) {
+    let band = bands.at(-1);
+    if (!band || band.position !== item.rect[axis]) {
+      band = { position: item.rect[axis], size: 0, items: [] };
+      bands.push(band);
+    }
+    band.size = Math.max(band.size, item.rect[size]);
+    band.items.push(item);
+  }
+  if (bands.length < 2) return null;
+  const gaps = bands.slice(1).map((band, i) => band.position - bands[i].position - bands[i].size);
+  const gap = gaps.every(value => value === gaps[0]) ? gaps[0] : null;
+  const total = bands.reduce((sum, band) => sum + band.size, 0);
+  const max = Math.floor((workspace(extent)[size] - ordered[0].rect[axis] - total) / (bands.length - 1));
+  return { axis, size, ordered, bands, gap, max };
+}
+
+export function spaceGroup(rectangles, value, extent = 20000, requestedAxis = null) {
+  rectangles = rectangles.map(pixelRect);
+  const spacing = groupSpacing(rectangles, extent, requestedAxis);
+  if (!spacing || !Number.isFinite(value) || value < 0 || spacing.max < 0) return null;
+  const gap = Math.min(Math.round(value), spacing.max);
+  let position = spacing.ordered[0].rect[spacing.axis];
+  const result = rectangles.map(rect => ({ ...rect }));
+  for (const band of spacing.bands) {
+    for (const { index } of band.items) result[index][spacing.axis] = position;
+    position += band.size + gap;
+  }
+  return result;
+}

package/client/text-format.js

@@ -0,0 +1,49 @@
+// Text objects: sizes, the markup a text may hold, and reading saved texts.
+// Markup is data from storage and from pasted content, so it is rebuilt from a
+// small allow-list instead of being trusted.
+export const TEXT_SIZES = { sm: 16, md: 24, lg: 40, xl: 64 };
+export const TEXT_LINE_HEIGHT = 1.25;
+export const TEXT_MAX_HTML = 20000;
+export const TEXT_DEFAULT_WIDTH = 240;
+
+const TAGS = { B: 'b', STRONG: 'b', I: 'i', EM: 'i', BR: 'br', DIV: 'div', P: 'div' };
+const SKIPPED = new Set(['SCRIPT', 'STYLE', 'TEMPLATE', 'IFRAME', 'OBJECT', 'EMBED']);
+
+export function sanitizeHtml(html) {
+  const source = new DOMParser().parseFromString(`<body>${String(html ?? '').slice(0, TEXT_MAX_HTML)}</body>`, 'text/html').body;
+  const target = document.createElement('div');
+  const walk = (from, to, depth) => {
+    for (const node of from.childNodes) {
+      if (node.nodeType === Node.TEXT_NODE) { to.append(node.data); continue; }
+      if (node.nodeType !== Node.ELEMENT_NODE || SKIPPED.has(node.tagName)) continue;
+      const tag = TAGS[node.tagName];
+      if (!tag || depth > 24) { walk(node, to, depth + 1); continue; }
+      if (tag === 'br') { to.append(document.createElement('br')); continue; }
+      const element = document.createElement(tag);
+      walk(node, element, depth + 1); to.append(element);
+    }
+  };
+  walk(source, target, 0);
+  return target.innerHTML;
+}
+
+export const escapeHtml = value => String(value).replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c]);
+export const plainToHtml = value => escapeHtml(String(value).replace(/\r\n?/g, '\n')).replace(/\n/g, '<br>');
+
+export function readTexts(value) {
+  if (!Array.isArray(value)) return [];
+  const finite = (n, min, max) => Number.isFinite(n) && n >= min && n <= max;
+  const ids = new Set();
+  return value.slice(0, 500).filter(t => {
+    if (!t || typeof t.id !== 'string' || t.id.length > 100 || ids.has(t.id) || typeof t.html !== 'string'
+      || !finite(t.x, -40000, 40000) || !finite(t.y, -40000, 40000) || !finite(t.width, 8, 8000)
+      || !Object.hasOwn(TEXT_SIZES, t.size) || !(t.fit === true || finite(t.height, 8, 20000))) return false;
+    ids.add(t.id); return true;
+  }).map(t => ({ id: t.id, x: t.x, y: t.y, width: t.width, height: t.fit === true ? 0 : t.height, fit: t.fit === true, fitWidth: t.fitWidth === true, size: t.size, html: sanitizeHtml(t.html) }));
+}
+
+// A pull past a limit moves a fraction of the distance, with less and less
+// give: the iOS scroll curve, c = .55.
+export function rubberBand(distance, dimension = 48, c = .55) {
+  return Math.sign(distance) * (1 - 1 / (Math.abs(distance) * c / dimension + 1)) * dimension;
+}