@tio-canvas/canvas 0.0.0-stage → 0.1.0

package/client/corners.js

@@ -0,0 +1,22 @@
+// Coordinate visible floating buttons in the current page and its fullscreen host.
+const corners = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+export function claimCorner(element, desired) {
+  let docs = [document];
+  try {
+    const frame = window.frameElement;
+    if (frame?.closest('.screen[data-fullscreen]')) docs.push(window.parent.document);
+    else if (!frame && document.body.hasAttribute('data-fullscreen')) {
+      const child = document.querySelector('.screen[data-fullscreen] iframe')?.contentDocument;
+      if (child) docs.push(child);
+    }
+  } catch { /* A cross-origin frame cannot share the canvas controls. */ }
+  const occupied = new Set();
+  for (const doc of docs) for (const other of doc.querySelectorAll('[data-floating-corner]')) {
+    if (other !== element && !other.hidden) occupied.add(other.dataset.floatingCorner);
+  }
+  const [vertical, horizontal] = desired.split('-');
+  const order = [desired, `${vertical === 'top' ? 'bottom' : 'top'}-${horizontal}`, `${vertical}-${horizontal === 'left' ? 'right' : 'left'}`, ...corners];
+  const chosen = order.find(corner => !occupied.has(corner)) ?? desired;
+  element.dataset.floatingCorner = chosen;
+  return chosen;
+}

package/client/device-gate.js

@@ -0,0 +1,15 @@
+// The canvas needs room: a phone-sized viewport gets a notice instead. A tablet
+// is wide enough, so it is let through. The notice sits in the top layer above
+// every dialog, and everything else is made inert while it shows.
+const gate = document.querySelector('#device-gate');
+const small = matchMedia('(max-width: 599px), (pointer: coarse) and (max-height: 499px)');
+
+function apply() {
+  const block = small.matches;
+  for (const element of document.body.children) if (element !== gate && element.tagName !== 'SCRIPT') element.inert = block;
+  document.documentElement.toggleAttribute('data-device-blocked', block);
+  if (block && !gate.matches(':popover-open')) gate.showPopover();
+  if (!block && gate.matches(':popover-open')) gate.hidePopover();
+}
+small.addEventListener('change', apply);
+apply();

package/client/fullscreen.js

@@ -0,0 +1,118 @@
+import { claimCorner } from './corners.js';
+
+// Full-page preview keeps the existing iframe mounted, including its page state.
+export function createFullscreen({ onEnter, onExit }) {
+  const root = document.querySelector('#fullscreen-tools');
+  const button = document.querySelector('#fullscreen-toggle');
+  const menu = document.querySelector('#fullscreen-menu');
+  let entry = null, right = false, bottom = false, drag = null, suppressClick = false;
+  const token = name => parseFloat(getComputedStyle(root).getPropertyValue(name));
+  const clamp = (n, low, high) => Math.max(low, Math.min(high, n));
+  function close(focus = false) {
+    menu.hidden = true; button.setAttribute('aria-expanded', 'false');
+    if (focus) button.focus({ preventScroll: true });
+  }
+  // Interface Kit lives inside the previewed page. While its panel is open it
+  // takes the corner over, so the control steps aside until the panel closes.
+  // The kit marks a collapsed button with data-floating-corner and removes the
+  // mark when it opens (build/interface-kit-bundle.mjs).
+  let kitObserver = null, kitFrame = null;
+  const syncKit = doc => {
+    const mount = doc.querySelector('[data-interface-kit]');
+    const open = Boolean(mount) && !mount.hasAttribute('data-floating-corner');
+    root.toggleAttribute('data-kit-open', open);
+    if (open) close();
+  };
+  function attachKit() {
+    kitObserver?.disconnect();
+    try {
+      const doc = kitFrame?.contentDocument;
+      if (!doc) return;
+      kitObserver = new MutationObserver(() => syncKit(doc));
+      kitObserver.observe(doc.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ['data-floating-corner'] });
+      syncKit(doc);
+    } catch { /* A cross-origin frame has no kit to watch. */ }
+  }
+  function watchKit(frame) {
+    unwatchKit();
+    kitFrame = frame ?? null;
+    if (!kitFrame) return;
+    kitFrame.addEventListener('load', attachKit);
+    attachKit();
+  }
+  function unwatchKit() {
+    kitFrame?.removeEventListener('load', attachKit);
+    kitObserver?.disconnect(); kitObserver = null; kitFrame = null;
+    root.removeAttribute('data-kit-open');
+  }
+  function positionMenu() {
+    menu.style.left = right ? 'auto' : '0'; menu.style.right = right ? '0' : 'auto';
+    menu.style.top = bottom ? 'auto' : 'calc(var(--canvas-float-size) + var(--canvas-preview-gap))';
+    menu.style.bottom = bottom ? 'calc(var(--canvas-float-size) + var(--canvas-preview-gap))' : 'auto';
+  }
+  function snap() {
+    const corner = claimCorner(root, `${bottom ? 'bottom' : 'top'}-${right ? 'right' : 'left'}`);
+    right = corner.endsWith('right'); bottom = corner.startsWith('bottom');
+    const inset = token('--canvas-preview-inset'), size = button.offsetWidth;
+    root.style.transform = `translate(${right ? innerWidth - inset - size : inset}px,${bottom ? innerHeight - inset - size : inset}px)`;
+    positionMenu();
+  }
+  function exit() {
+    if (!entry) return;
+    close(); unwatchKit(); const previous = entry; entry = null;
+    previous.element.removeAttribute('data-fullscreen');
+    document.body.removeAttribute('data-fullscreen'); root.hidden = true; delete root.dataset.floatingCorner;
+    onExit(previous); previous.fullscreen.focus({ preventScroll: true });
+  }
+  button.addEventListener('click', () => {
+    if (suppressClick) { suppressClick = false; return; }
+    if (!menu.hidden) { close(); return; }
+    menu.hidden = false; positionMenu(); button.setAttribute('aria-expanded', 'true');
+  });
+  button.addEventListener('pointerdown', event => {
+    if (event.button !== 0) return;
+    const rect = root.getBoundingClientRect();
+    // Interrupt a snap from its current painted position, not its destination.
+    root.dataset.dragging = '';
+    root.style.transform = `translate(${rect.left}px,${rect.top}px)`;
+    drag = { id: event.pointerId, x: event.clientX, y: event.clientY, left: rect.left, top: rect.top, moved: false };
+    suppressClick = false; button.setPointerCapture(event.pointerId);
+  });
+  button.addEventListener('pointermove', event => {
+    if (!drag || event.pointerId !== drag.id) return;
+    const dx = event.clientX - drag.x, dy = event.clientY - drag.y;
+    if (!drag.moved && Math.hypot(dx, dy) < 4) return;
+    drag.moved = true; close();
+    const inset = token('--canvas-preview-inset'), size = button.offsetWidth;
+    const x = clamp(drag.left + dx, inset, innerWidth - inset - size);
+    const y = clamp(drag.top + dy, inset, innerHeight - inset - size);
+    root.style.transform = `translate(${x}px,${y}px)`;
+    right = x + size / 2 >= innerWidth / 2; bottom = y + size / 2 >= innerHeight / 2;
+  });
+  function release(event) {
+    if (!drag || (event?.pointerId != null && event.pointerId !== drag.id)) return;
+    suppressClick = drag.moved; drag = null; delete root.dataset.dragging; snap();
+  }
+  button.addEventListener('pointerup', release);
+  button.addEventListener('pointercancel', release);
+  button.addEventListener('lostpointercapture', release);
+  window.addEventListener('blur', () => release());
+  // The onboarding card floats over the preview; pressing it is not pressing outside the menu.
+  document.addEventListener('pointerdown', event => { if (!root.contains(event.target) && !event.target.closest?.('.onboarding-card')) close(); }, true);
+  root.addEventListener('keydown', event => {
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); if (!menu.hidden) close(true); else exit(); }
+  });
+  document.querySelector('#fullscreen-back').addEventListener('click', exit);
+  window.addEventListener('resize', () => { if (entry) { release(); snap(); } });
+  return {
+    get entry() { return entry; }, close, exit,
+    enter(next) {
+      if (entry) exit();
+      entry = next; onEnter(next);
+      next.element.setAttribute('data-fullscreen', ''); document.body.dataset.fullscreen = '';
+      root.hidden = false; snap(); watchKit(next.iframe);
+      next.iframe?.contentWindow.dispatchEvent(new Event('canvas-corners-changed'));
+      button.focus({ preventScroll: true });
+    },
+  };
+}

package/client/geometry.js

@@ -0,0 +1,79 @@
+// Pure canvas geometry, in world coordinates. Tolerance is supplied in world
+// units so the magnetic distance remains constant on the visitor's screen.
+// Quantize document geometry, never the screen-space camera or pointer input.
+export function pixelRect(rect) {
+  return { ...rect, ...Object.fromEntries(['x','y','width','height'].map(axis => [axis, Math.round(rect[axis])])) };
+}
+export const intersects = (a, b) => a.width > 0 && a.height > 0 && b.width > 0 && b.height > 0 && a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+export function bounds(rectangles) {
+  const x = Math.min(...rectangles.map(r => r.x)), y = Math.min(...rectangles.map(r => r.y));
+  return { x, y, width: Math.max(...rectangles.map(r => r.x + r.width)) - x, height: Math.max(...rectangles.map(r => r.y + r.height)) - y };
+}
+export function snapRect(moving, others, tolerance) {
+  const result = { x: moving.x, y: moving.y, guides: [] };
+  for (const [axis, size, cross, crossSize] of [['x','width','y','height'],['y','height','x','width']]) {
+    let best = tolerance + Number.EPSILON, match = null;
+    const offer = (value, guide) => {
+      const distance = Math.abs(value - moving[axis]);
+      if (distance <= tolerance && distance < best) { best = distance; match = { value, guide }; }
+    };
+    for (const other of others) {
+      for (const anchor of [0,.5,1]) for (const target of [0,.5,1]) {
+        const line = other[axis] + other[size] * target;
+        offer(line - moving[size] * anchor, { axis, value: line, from: Math.min(moving[cross], other[cross]), to: Math.max(moving[cross]+moving[crossSize], other[cross]+other[crossSize]), kind:'align' });
+      }
+    }
+    // Derive spacing from adjacent frames in the same row/column, not from a
+    // fixed grid. Offer that same gap beside any member of the row/column.
+    const row = others.filter(r => moving[cross] < r[cross]+r[crossSize] && moving[cross]+moving[crossSize] > r[cross]).sort((a,b)=>a[axis]-b[axis]);
+    for (let i=1;i<row.length;i++) {
+      const gap = row[i][axis] - row[i-1][axis] - row[i-1][size];
+      if (gap <= 0) continue;
+      for (const other of row) {
+        for (const before of [false,true]) {
+          const value = before ? other[axis]-gap-moving[size] : other[axis]+other[size]+gap;
+          const from = before ? value+moving[size] : other[axis]+other[size];
+          offer(value, { axis:cross, value:moving[cross]+moving[crossSize]/2, from, to:from+gap, kind:'gap', gap, references:[{axis:cross,value:row[i-1][cross]+row[i-1][crossSize]/2,from:row[i-1][axis]+row[i-1][size],to:row[i][axis],kind:'gap',gap,reference:true}] });
+        }
+      }
+      // Equal spacing when inserting between two existing frames.
+      const available = row[i][axis] - row[i-1][axis] - row[i-1][size] - moving[size];
+      if (available >= 0) {
+        const value = row[i-1][axis]+row[i-1][size]+available/2;
+        offer(value, {axis:cross,value:moving[cross]+moving[crossSize]/2,from:row[i-1][axis]+row[i-1][size],to:value,kind:'gap',gap:available/2,
+          references:[{axis:cross,value:moving[cross]+moving[crossSize]/2,from:value+moving[size],to:row[i][axis],kind:'gap',gap:available/2,reference:true}]});
+      }
+    }
+    if (match) { result[axis] = match.value; result.guides.push(match.guide,...(match.guide.references??[])); }
+  }
+  return result;
+}
+
+// Keep appending to the current row until its right edge is full. Then search
+// free rows below, followed by earlier rows, without enlarging the workspace.
+// A workspace is a number (square) or { width, height }.
+export const workspace = extent => typeof extent === 'number' ? { width: extent, height: extent } : extent;
+export function duplicateOffset(box, others, extent, gap=80) {
+  const space=workspace(extent);
+  const fits=(x,y)=>x>=0 && y>=0 && x+box.width<=space.width && y+box.height<=space.height && !others.some(r=>intersects({x:x-gap,y:y-gap,width:box.width+2*gap,height:box.height+2*gap},r));
+  const right=others.reduce((edge,r)=>r.y<box.y+box.height && r.y+r.height>box.y?Math.max(edge,r.x+r.width):edge,box.x+box.width);
+  if(fits(right+gap,box.y))return{x:right+gap-box.x,y:0};
+  const rows=[...new Set([0,...others.map(r=>r.y+r.height+gap)])].sort((a,b)=>a-b);
+  const columns=[...new Set([Math.min(box.x,...others.map(r=>r.x)),...others.map(r=>r.x+r.width+gap).sort((a,b)=>a-b),0])];
+  for(const y of [...rows.filter(y=>y>=box.y+box.height+gap),...rows.filter(y=>y<box.y+box.height+gap)])for(const x of columns)if(fits(x,y))return{x:x-box.x,y:y-box.y};
+  return null;
+}
+
+// Add pages has its own placement rule; duplication keeps its row wrapping.
+// Plan the whole batch first so a workspace boundary never leaves a partial add.
+export function addedPagePositions(pages, others, extent, gap=100) {
+  const space=workspace(extent),occupied=[...others],positions=[];
+  for(const page of pages){
+    const rightmost=occupied.reduce((right,item)=>!right || item.x+item.width>right.x+right.width?item:right,null);
+    const x=rightmost?rightmost.x+rightmost.width+gap:Math.round((space.width-page.width)/2);
+    const y=rightmost?rightmost.y:Math.round((space.height-page.height)/2);
+    if(x<0 || y<0 || x+page.width>space.width || y+page.height>space.height)return null;
+    positions.push({x,y});occupied.push({...page,x,y});
+  }
+  return positions;
+}

package/client/history.js

@@ -0,0 +1,37 @@
+// History owns canvas document edits only. Camera, theme, project content, and
+// the source catalog never enter a snapshot. A drag is committed once.
+export function createHistory(capture, restore, limit = 100) {
+  const undo = [], redo = [];
+  return {
+    checkpoint() { return capture(); },
+    commit(before) {
+      const after = capture();
+      if (JSON.stringify([before.models,before.arrows,before.texts,before.objectOrder]) === JSON.stringify([after.models,after.arrows,after.texts,after.objectOrder])) return false;
+      undo.push({before,after});
+      if (undo.length > limit) undo.shift();
+      redo.length = 0;
+      return true;
+    },
+    undo() {
+      const edit = undo.pop();
+      if (!edit) return false;
+      restore(edit.before);redo.push(edit);return true;
+    },
+    redo() {
+      const edit = redo.pop();
+      if (!edit) return false;
+      restore(edit.after);undo.push(edit);return true;
+    },
+    get canUndo() { return undo.length > 0; },
+    get canRedo() { return redo.length > 0; },
+  };
+}
+
+// Never consume the native undo stack of an input, editor, or rename field.
+export function historyShortcut(event) {
+  if (!(event.metaKey || event.ctrlKey) || event.altKey) return null;
+  const key = event.key.toLowerCase();
+  if (key === 'z') return event.shiftKey ? 'redo' : 'undo';
+  if (key === 'y' && event.ctrlKey) return 'redo';
+  return null;
+}

package/client/hover-preview.js

@@ -0,0 +1,35 @@
+// Make readable preview styles behave as if no pointer can hover. The guard
+// has zero added specificity and becomes inert when the mobile preset is left.
+// No source stylesheet or production asset is rewritten.
+const GUARD=':hover:not(:where([data-canvas-touch-preview], [data-canvas-touch-preview] *))';
+export function suppressPreviewHover() {
+  const processed=new WeakMap();
+  function visit(sheet) {
+    let rules;try{rules=sheet.cssRules;}catch{return;} // Cross-origin CSS is not readable.
+    for(const rule of rules){
+      if(typeof rule.selectorText==='string' && processed.get(rule)!==rule.selectorText){
+        const selector=rule.selectorText.replace(/("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|:hover\b/g,(match,quoted)=>quoted??GUARD);
+        if(selector!==rule.selectorText)rule.selectorText=selector;
+        processed.set(rule,rule.selectorText);
+      }
+      if(rule.styleSheet)visit(rule.styleSheet);
+      if(rule.cssRules)visit(rule);
+    }
+  }
+  function refresh(){
+    if(!document.documentElement.hasAttribute('data-canvas-touch-preview'))return;
+    for(const sheet of [...document.styleSheets,...document.adoptedStyleSheets])visit(sheet);
+  }
+  new MutationObserver(refresh).observe(document.head,{childList:true,subtree:true,characterData:true});
+  document.addEventListener('load',event=>{if(event.target.tagName==='LINK')refresh();},true);
+  // Real mouse hover events must not activate project hover handlers either.
+  for(const type of ['pointerover','pointerenter','mouseover','mouseenter','mousemove']){
+    window.addEventListener(type,event=>{
+      if(!document.documentElement.hasAttribute('data-canvas-touch-preview'))return;
+      // A pressed drag inside an editor is editing, not hover.
+      if(type==='mousemove' && event.buttons && event.target.closest?.('input,textarea,select,[contenteditable]'))return;
+      event.stopImmediatePropagation();
+    },true);
+  }
+  return refresh;
+}

package/client/index.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Canvas</title>
+  <link rel="icon" href="/favicon-light.png" type="image/png" sizes="64x64">
+  <link rel="icon" href="/favicon-dark.png" type="image/png" sizes="64x64" media="(prefers-color-scheme: dark)">
+  <link rel="stylesheet" href="/canvas/canvas.css">
+</head>
+<body>
+  <main id="viewport" aria-label="Exploration canvas" tabindex="0">
+    <div id="world"></div>
+    <form id="arrow-inspector" class="canvas-tools" aria-label="Arrow settings" hidden>
+      <button type="button" class="select-field icon-select" data-arrow-field="startStyle" value="line" aria-label="Arrow endpoint style"><svg class="field-icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 10h14"/></svg><svg class="chevron" viewBox="0 0 12 12" aria-hidden="true"><path d="m3 4.5 3 3 3-3"/></svg></button>
+      <button type="button" class="select-field icon-select" data-arrow-field="endStyle" value="line" aria-label="Arrow endpoint style"><svg class="field-icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M3 10h14m-5-5 5 5-5 5"/></svg><svg class="chevron" viewBox="0 0 12 12" aria-hidden="true"><path d="m3 4.5 3 3 3-3"/></svg></button>
+      <span class="tool-divider" aria-hidden="true"></span>
+      <span class="select-field"><span data-field-label aria-hidden="true"></span><svg class="chevron" viewBox="0 0 12 12" aria-hidden="true"><path d="m3 4.5 3 3 3-3"/></svg><select data-arrow-field="pattern" aria-label="Arrow line pattern"><option value="" disabled hidden>Mixed</option><option value="solid">Solid</option><option value="dashed">Dashed</option></select></span>
+      <span class="select-field"><span data-field-label aria-hidden="true"></span><svg class="chevron" viewBox="0 0 12 12" aria-hidden="true"><path d="m3 4.5 3 3 3-3"/></svg><select data-arrow-field="width" aria-label="Arrow line thickness"><option value="" disabled hidden>Mixed</option><option value="2">2px</option><option value="4">4px</option><option value="6">6px</option><option value="8">8px</option><option value="10">10px</option></select></span>
+      <span class="tool-divider" data-curved-only aria-hidden="true" hidden></span>
+      <button id="arrow-straight" class="secondary-button" type="button" data-curved-only hidden>Reset to straight</button>
+    </form>
+    <form id="text-inspector" class="canvas-tools" aria-label="Text settings" hidden>
+      <span class="select-field"><span data-field-label aria-hidden="true"></span><svg class="chevron" viewBox="0 0 12 12" aria-hidden="true"><path d="m3 4.5 3 3 3-3"/></svg><select id="text-size" data-text-field="size" aria-label="Text size"><option value="" disabled hidden>Mixed</option><option value="sm">16 px</option><option value="md">24 px</option><option value="lg">40 px</option><option value="xl">64 px</option></select></span>
+      <span class="tool-divider" aria-hidden="true"></span>
+      <button id="text-bold" type="button" class="secondary-button icon-button" data-text-format aria-label="Bold" data-tooltip="Bold" data-shortcut="mod+b" aria-pressed="false"><svg class="field-icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M6 4h5a3 3 0 0 1 0 6H6zm0 6h6a3 3 0 0 1 0 6H6z"/></svg></button>
+      <button id="text-italic" type="button" class="secondary-button icon-button" data-text-format aria-label="Italic" data-tooltip="Italic" data-shortcut="mod+i" aria-pressed="false"><svg class="field-icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M8 4h6M6 16h6M11.5 4l-3 12"/></svg></button>
+    </form>
+    <div id="selection" hidden>
+      <div id="handles"></div>
+      <form id="inspector" class="canvas-tools">
+        <label>Preset <span class="select-field"><span id="preset-label" aria-hidden="true">Custom</span><svg class="chevron" viewBox="0 0 12 12" aria-hidden="true"><path d="m3 4.5 3 3 3-3"/></svg><select id="preset"></select></span></label>
+        <span class="tool-divider" aria-hidden="true"></span>
+        <label>W <input id="width" data-tooltip-disabled="Select Custom in Preset to edit the width" type="number" min="160" max="3840" required></label>
+        <label>H <input id="height" data-tooltip-disabled="Select Custom in Preset to edit the height" type="number" min="160" max="3840" required></label>
+      </form>
+      <form id="group-inspector" class="canvas-tools" hidden>
+        <label><span id="gap-label">Gap X</span> <input id="gap" type="number" min="0" step="1" aria-label="Gap between selected screens" required></label>
+        <label hidden><span>Gap Y</span> <input id="gap-y" type="number" min="0" step="1" aria-label="Vertical gap between selected screens" required></label>
+      </form>
+    </div>
+  </main>
+  <nav id="edit-tools" class="canvas-tools" aria-label="Canvas controls">
+    <button id="tool-cursor" class="icon-button" aria-label="Cursor tool" data-tooltip="Cursor" data-shortcut="v" aria-pressed="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m4 3 12 8-6 1-3 5Z"/></svg></button>
+    <button id="tool-arrow" class="icon-button" aria-label="Arrow tool" data-tooltip="Arrow" data-shortcut="a" aria-pressed="false"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 16 16 4M6 4h10v10"/></svg></button>
+    <button id="tool-text" class="icon-button" aria-label="Text tool" data-tooltip="Text" data-shortcut="t" aria-pressed="false"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 5.5V4h12v1.5M10 4v12M7.5 16h5"/></svg></button>
+    <span class="tool-divider" aria-hidden="true"></span>
+    <button id="add" class="icon-button" aria-label="Add pages" data-tooltip="Add pages"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12"/></svg></button>
+  </nav>
+  <nav id="history-tools" class="canvas-tools" aria-label="History controls">
+    <button id="undo" class="icon-button" aria-label="Undo" data-tooltip="Undo" data-shortcut="mod+z" disabled><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 4-4 4 4 4M3 8h8a5 5 0 0 1 0 10"/></svg></button>
+    <button id="redo" class="icon-button" aria-label="Redo" data-tooltip="Redo" data-shortcut="shift+mod+z" disabled><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m13 4 4 4-4 4m4-4H9a5 5 0 0 0 0 10"/></svg></button>
+  </nav>
+  <nav id="zoom-tools" class="canvas-tools" aria-label="Canvas zoom controls">
+    <button id="zoom-out" class="icon-button" aria-label="Zoom out" data-tooltip="Zoom out"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5"/><path d="m13 13 4 4M6 8.5h5"/></svg></button>
+    <label class="zoom-field"><input id="zoom" type="text" inputmode="decimal" aria-label="Zoom percentage" value="80%"></label>
+    <button id="zoom-in" class="icon-button" aria-label="Zoom in" data-tooltip="Zoom in"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5"/><path d="m13 13 4 4M6 8.5h5M8.5 6v5"/></svg></button>
+    <span class="tool-divider" aria-hidden="true"></span>
+    <button id="zoom-reset" aria-label="Zoom to 100%" data-tooltip="Zoom to 100%">100%</button>
+    <button id="fit" aria-keyshortcuts="Shift+1" data-tooltip="Fit all screens" data-shortcut="shift+1">Fit all</button>
+    <button id="fit-screen" aria-keyshortcuts="Shift+2" data-tooltip="Fit selected screens" data-shortcut="shift+2" hidden>Fit to screen</button>
+  </nav>
+  <aside id="layers" class="canvas-tools layers-drawer" aria-label="Screens">
+    <header class="layers-header">
+      <h2 id="layers-title"><span class="layers-logo" role="img" aria-label="Tio"></span><span id="screens-count" hidden>0</span></h2>
+      <button id="layers-more" type="button" aria-label="More" aria-haspopup="menu" aria-controls="layers-menu" popovertarget="layers-menu" data-tooltip="More"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4.5h.01M10 10h.01M10 15.5h.01" stroke-width="2.5"/></svg></button>
+      <button id="layers-toggle" type="button" aria-label="Minimize Layers" aria-controls="layers-list" aria-expanded="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path/></svg></button>
+    </header>
+    <ol id="layers-list" aria-label="Layers, top layer first"></ol>
+  </aside>
+  <div id="fullscreen-tools" hidden>
+    <button id="fullscreen-toggle" type="button" aria-label="Preview controls" aria-expanded="false" aria-controls="fullscreen-menu"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 5h12M4 10h12M4 15h12"/></svg></button>
+    <section id="fullscreen-menu" class="canvas-tools" aria-label="Preview controls" hidden>
+      <button id="fullscreen-back" type="button">Back to canvas</button>
+    </section>
+  </div>
+  <dialog id="add-pages" class="page-picker" aria-labelledby="add-pages-title">
+    <header class="layers-header">
+      <h2 id="add-pages-title">Add pages</h2>
+      <button id="add-pages-close" type="button" aria-label="Close Add pages" data-tooltip="Close" data-shortcut="esc"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="m5 5 10 10M15 5 5 15"/></svg></button>
+    </header>
+    <section class="page-picker-body" aria-label="Available pages">
+      <div id="page-options" role="group" aria-label="Pages"></div>
+      <p id="page-picker-error" role="alert"></p>
+    </section>
+    <footer hidden><button id="add-pages-select-all" type="button">Select all</button><button id="add-pages-unselect-all" type="button" disabled>Unselect all</button><button id="add-pages-submit" type="button" hidden disabled>Add pages</button></footer>
+  </dialog>
+  <div id="layers-menu" class="canvas-tools" popover="auto" role="menu" aria-label="More" tabindex="-1">
+    <button id="theme" type="button" role="menuitem"><svg class="theme-icon" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M10 3a7 7 0 0 1 0 14Z"/></svg><span id="theme-label">Dark mode</span></button>
+    <button id="shortcuts-open" type="button" role="menuitem"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 5.5C8.6 4.4 6.6 4 3.5 4v11c3.1 0 5.1.4 6.5 1.5m0-11C11.4 4.4 13.4 4 16.5 4v11c-3.1 0-5.1.4-6.5 1.5m0-11v11"/></svg>Guide &amp; hotkeys</button>
+    <hr role="separator">
+    <button id="onboarding-open" type="button" role="menuitem"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M8.2 8a1.9 1.9 0 1 1 2.9 1.6c-.7.4-1.1.8-1.1 1.6M10 14h.01"/></svg>Onboarding</button>
+  </div>
+  <div id="screen-context" class="canvas-tools" popover="auto" role="menu" aria-label="Screen actions" tabindex="-1">
+    <button type="button" role="menuitem" data-action="duplicate"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2"/><path d="M12 7V3H3v9h4"/></svg>Duplicate</button>
+    <button type="button" role="menuitem" data-action="delete"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5h14M8 5V3h4v2M5 5l1 12h8l1-12M8 8v6M12 8v6"/></svg>Delete</button>
+  </div>
+  <dialog id="shortcuts" class="page-picker" aria-labelledby="shortcuts-title">
+    <header class="layers-header"><h2 id="shortcuts-title">Guide &amp; hotkeys</h2><div id="shortcuts-platform" class="segmented" role="radiogroup" aria-label="Keyboard layout"><button type="button" role="radio" data-platform="mac" aria-checked="false">macOS</button><button type="button" role="radio" data-platform="win" aria-checked="false">Windows</button></div><button id="shortcuts-close" type="button" aria-label="Close Guide &amp; hotkeys" data-tooltip="Close" data-shortcut="esc">✕</button></header>
+    <div class="shortcuts-body"></div>
+  </dialog>
+  <div id="device-gate" popover="manual" role="alert">
+    <div class="device-gate-icons" aria-hidden="true">
+      <svg viewBox="0 0 20 20"><rect x="3" y="3" width="14" height="10" rx="1"/><path d="M10 13v4m-4 0h8"/></svg>
+      <svg viewBox="0 0 20 20"><rect x="4" y="2" width="12" height="16" rx="2"/><path d="M9 15h2"/></svg>
+    </div>
+    <p>The canvas works best on a desktop or tablet. Open it on a larger screen.</p>
+  </div>
+  <p id="canvas-status" role="status"></p>
+  <script type="module" src="/canvas/canvas.js"></script>
+</body>
+</html>

package/client/layer-order.js

@@ -0,0 +1,20 @@
+// Layer order is bottom-to-top; the drawer displays that order in reverse.
+export function layerShortcut(event){
+  if(!event.metaKey || event.altKey)return null;
+  const left=event.code==='BracketLeft' || ['[','{'].includes(event.key);
+  const right=event.code==='BracketRight' || [']','}'].includes(event.key);
+  return left?(event.shiftKey?'bottom':'below'):right?(event.shiftKey?'top':'above'):null;
+}
+export function reorderLayers(items,ids,action){
+  const chosen=new Set(ids),result=[...items];
+  if(action==='top')return [...items.filter(i=>!chosen.has(i)),...items.filter(i=>chosen.has(i))];
+  if(action==='bottom')return [...items.filter(i=>chosen.has(i)),...items.filter(i=>!chosen.has(i))];
+  if(action==='above')for(let i=result.length-2;i>=0;i--)if(chosen.has(result[i])&&!chosen.has(result[i+1]))[result[i],result[i+1]]=[result[i+1],result[i]];
+  if(action==='below')for(let i=1;i<result.length;i++)if(chosen.has(result[i])&&!chosen.has(result[i-1]))[result[i],result[i-1]]=[result[i-1],result[i]];
+  return result;
+}
+export function dropLayers(items,ids,target,before){
+  const chosen=new Set(ids);if(chosen.has(target) || !items.includes(target))return [...items];
+  const rest=items.filter(i=>!chosen.has(i)),index=rest.indexOf(target)+(before?1:0);
+  rest.splice(index,0,...items.filter(i=>chosen.has(i)));return rest;
+}

package/client/layers.js

@@ -0,0 +1,154 @@
+import { createRangeSelection } from './range-selection.js';
+const paths={
+  phone:'<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"/>',
+  laptop:'<rect x="4" y="3" width="12" height="10" rx="1"/><path d="M2 15h16l-1 2H3Z"/>',
+  desktop:'<rect x="3" y="3" width="14" height="10" rx="1"/><path d="M10 13v4m-4 0h8"/>',
+  custom:'<path d="M4 10V4h6M4 4l12 12m0-6v6h-6"/>',
+  text:'<path d="M4 5.5V4h12v1.5M10 4v12M7.5 16h5"/>'
+};
+export function deviceKind(preset,presets){return presets[preset]?.device??'custom';}
+export function createLayerDrawer({root,presets,collapsed=false,onSelect,onDrop,onCollapse,onRename,onSelectMany}){
+  const list=root.querySelector('ol'),toggle=root.querySelector('#layers-toggle'),count=root.querySelector('#screens-count');
+  const rows=new Map(),ghost=document.createElement('div');ghost.className='layer-ghost';ghost.hidden=true;ghost.setAttribute('aria-hidden','true');ghost.inert=true;document.body.append(ghost);
+  let current=[],selected=new Set(),drag=null,scrollFrame=0;
+  function setCollapsed(value){
+    root.toggleAttribute('data-collapsed',value);list.hidden=value;
+    toggle.setAttribute('aria-expanded',String(!value));toggle.setAttribute('aria-label',`${value?'Expand':'Minimize'} Layers`);toggle.title=`${value?'Expand':'Minimize'} Layers`;
+    toggle.querySelector('path').setAttribute('d',value?'M5 7.5l5 5 5-5':'M5 12.5l5-5 5 5');
+  }
+  // The drawer is clipped (overflow: hidden), so animating its height reveals or
+  // hides the list instead of snapping. One box, 160ms, ease-out-quint.
+  let collapseMotion;
+  function animateCollapse(value){
+    collapseMotion?.cancel();
+    const from=root.getBoundingClientRect().height;
+    setCollapsed(value);
+    if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
+    const to=root.getBoundingClientRect().height;
+    if(from===to)return;
+    if(value)list.hidden=false;
+    const motion=collapseMotion=root.animate([{height:`${from}px`},{height:`${to}px`}],{duration:160,easing:'cubic-bezier(0.23, 1, 0.32, 1)'});
+    motion.onfinish=()=>{if(collapseMotion===motion){collapseMotion=null;list.hidden=root.hasAttribute('data-collapsed');}};
+    motion.oncancel=()=>{if(collapseMotion===motion){collapseMotion=null;list.hidden=root.hasAttribute('data-collapsed');}};
+  }
+  toggle.addEventListener('click',()=>{cancel();const value=!root.hasAttribute('data-collapsed');animateCollapse(value);onCollapse(value);});
+  setCollapsed(collapsed);
+  // Items run bottom to top: { id, kind: 'screen' | 'text', title, preset }. A text layer is named by
+  // its content and cannot be renamed; `selection` is a set of layer ids.
+  function update(items,selection){
+    count.textContent=String(items.length);root.toggleAttribute('data-empty',!items.length);document.getElementById('fit').hidden=!items.length;
+    const focused=document.activeElement?.dataset.layerId;
+    current=items.map(item=>item.id);selected=new Set(selection);
+    const wanted=new Set(current);
+    for(const [id,row] of rows)if(!wanted.has(id)){row.remove();rows.delete(id);}
+    let previous=null;
+    for(const item of [...items].reverse()){
+      const {id,title,preset,kind:itemKind}=item;let row=rows.get(id);
+      if(!row){
+        row=document.createElement('li');const button=document.createElement('button');button.type='button';button.className='layer-row';button.dataset.layerId=id;button.dataset.rangeId=id;
+        button.innerHTML='<span class="layer-grab" data-reorder aria-hidden="true"><svg class="layer-grabber" viewBox="0 0 20 20"><path d="M7 5h0m6 0h0M7 10h0m6 0h0M7 15h0m6 0h0"/></svg><svg class="layer-device" viewBox="0 0 20 20"></svg></span><span class="layer-label"></span>';row.append(button);rows.set(id,row);
+      }
+      const button=row.firstElementChild,kind=itemKind==='text'?'text':deviceKind(preset,presets);button.dataset.kind=itemKind;
+      if(button.dataset.device!==kind){button.querySelector('.layer-device').innerHTML=paths[kind];button.dataset.device=kind;}
+      if(!button.querySelector('.layer-label').isContentEditable && button.querySelector('.layer-label').textContent!==title)button.querySelector('.layer-label').textContent=title;button.dataset.tooltip='Drag to select, or drag the grip to reorder';
+      button.setAttribute('aria-label',`${title}, ${itemKind==='text'?'Text':presets[preset]?.label??'Custom'}`);button.setAttribute('aria-pressed',String(selected.has(id)));
+      const next=previous?previous.nextElementSibling:list.firstElementChild;
+      if(next!==row)list.insertBefore(row,next);previous=row;
+    }
+    if(focused && rows.has(focused) && document.activeElement?.dataset.layerId!==focused)rows.get(focused).firstElementChild.focus({preventScroll:true});
+  }
+  // The drop position is one line between two rows. It slides from gap to gap, and
+  // a pointer outside the list keeps it at the nearest end instead of removing it.
+  const line=document.createElement('div');line.className='layer-drop-line';line.setAttribute('aria-hidden','true');line.inert=true;line.hidden=true;list.append(line);
+  function clearDrop(){line.hidden=true;}
+  function targetAt(y){
+    const candidates=[...list.children].filter(row=>row!==line).map(row=>[row.firstElementChild.dataset.layerId,row]).filter(([id])=>!drag.ids.includes(id));
+    for(const [id,row] of candidates){const r=row.getBoundingClientRect();if(y<r.bottom)return{id,before:y<r.top+r.height/2};}
+    return candidates.length?{id:candidates.at(-1)[0],before:false}:null;
+  }
+  function preview(){
+    if(!drag?.moved)return;
+    drag.target=targetAt(drag.y);
+    if(drag.target){
+      const row=rows.get(drag.target.id),half=parseFloat(getComputedStyle(root).getPropertyValue('--canvas-layer-gap'))/2;
+      const y=(drag.target.before?row.offsetTop-half:row.offsetTop+row.offsetHeight+half)-line.offsetHeight/2;
+      const show=line.hidden;
+      if(show){line.style.transition='none';line.hidden=false;}
+      line.style.transform=`translateY(${y}px)`;
+      if(show){line.offsetWidth;line.style.transition='';}
+    }else clearDrop();
+    ghost.style.transform=`translate(${drag.pointerX-drag.offsetX}px,${drag.y-drag.offset}px)`;
+  }
+  function autoScroll(){
+    scrollFrame=0;if(!drag?.moved)return;
+    const rect=list.getBoundingClientRect(),edge=24;
+    const delta=drag.y<rect.top+edge?-10:drag.y>rect.bottom-edge?10:0;
+    if(delta){list.scrollTop+=delta;preview();}
+    scrollFrame=requestAnimationFrame(autoScroll);
+  }
+  function cancel(){
+    const old=drag;drag=null;cancelAnimationFrame(scrollFrame);clearDrop();ghost.hidden=true;delete document.body.dataset.layerDrag;
+    for(const row of rows.values())delete row.dataset.dragging;
+    if(old && root.hasPointerCapture(old.pointer))root.releasePointerCapture(old.pointer);
+  }
+  const rangeSelection=createRangeSelection({root:list,items:()=>[...current].reverse(),selected:()=>[...selected],onChange:onSelectMany,toggleModifiers:true});
+  list.addEventListener('dblclick',event=>{
+    const label=event.target.closest('.layer-label');
+    if(!label || label.isContentEditable || label.closest('[data-kind="text"]'))return;
+    event.preventDefault();cancel();onRename(label.closest('[data-layer-id]').dataset.layerId,label);
+  });
+  list.addEventListener('pointerdown',event=>{
+    if(event.target.isContentEditable || !event.target.closest('[data-reorder]'))return;
+    const button=event.target.closest('[data-layer-id]');if(event.button!==0 || !button)return;
+    const rect=button.getBoundingClientRect();drag={id:button.dataset.layerId,pointer:event.pointerId,x:event.clientX,pointerX:event.clientX,startY:event.clientY,y:event.clientY,left:rect.left,offsetX:event.clientX-rect.left,offset:event.clientY-rect.top,moved:false,shiftKey:event.shiftKey,metaKey:event.metaKey,ctrlKey:event.ctrlKey};
+
+  });
+  root.addEventListener('pointermove',event=>{
+    if(!drag || event.pointerId!==drag.pointer)return;drag.y=event.clientY;drag.pointerX=event.clientX;
+    if(!drag.moved && Math.hypot(event.clientX-drag.x,event.clientY-drag.startY)<4)return;
+    event.preventDefault();
+    if(!drag.moved){
+      root.setPointerCapture(event.pointerId);
+      drag.moved=true;if(!selected.has(drag.id))onSelect(drag.id,false);
+      drag.ids=current.filter(id=>selected.has(id));
+      document.body.dataset.layerDrag='';
+      const button=rows.get(drag.id).firstElementChild;
+      const width=button.offsetWidth;
+      for(const id of drag.ids)rows.get(id).dataset.dragging='';
+      const cards=[...current].reverse().filter(id=>drag.ids.includes(id)).map(id=>{
+        const card=rows.get(id).firstElementChild.cloneNode(true);
+        card.removeAttribute('data-layer-id');card.removeAttribute('data-range-id');card.tabIndex=-1;
+        return card;
+      });
+      ghost.replaceChildren(...cards);
+      ghost.style.width=`${width}px`;ghost.hidden=false;
+      scrollFrame=requestAnimationFrame(autoScroll);
+    }
+    preview();
+  });
+  // Focus moves to a row after a click, which a browser treats as keyboard focus.
+  // Track the last input so a pointer selection draws no ring and the keyboard still does.
+  root.addEventListener('pointerdown',()=>root.setAttribute('data-pointer',''),true);
+  document.addEventListener('keydown',()=>root.removeAttribute('data-pointer'),true);
+  root.addEventListener('pointerup',event=>{
+    if(!drag || event.pointerId!==drag.pointer)return;
+    const old=drag;cancel();
+    if(old.moved){
+      if(old.target){
+        const tops=new Map([...rows].map(([id,row])=>[id,row.getBoundingClientRect().top]));
+        onDrop(old.ids,old.target.id,old.target.before);
+        if(!matchMedia('(prefers-reduced-motion: reduce)').matches)for(const [id,row] of rows){
+          const delta=tops.get(id)-row.getBoundingClientRect().top;
+          if(delta)row.animate([{transform:`translateY(${delta}px)`},{transform:'none'}],{duration:180,easing:'cubic-bezier(0.23, 1, 0.32, 1)'});
+        }
+      }
+    }
+    else rangeSelection.select(old.id,old);
+    rows.get(old.id)?.firstElementChild.focus({preventScroll:true});
+  });
+  root.addEventListener('pointercancel',cancel);root.addEventListener('lostpointercapture',()=>{if(drag)cancel();});window.addEventListener('blur',cancel);
+  document.addEventListener('visibilitychange',()=>{if(document.hidden)cancel();});
+  window.addEventListener('keydown',event=>{if(event.key==='Escape' && drag){event.preventDefault();event.stopImmediatePropagation();cancel();}},true);
+  return {update,setCollapsed};
+}