@tio-canvas/canvas 0.0.0-stage → 0.1.0

package/src/interface-kit-bundle.js

@@ -0,0 +1,103 @@
+import { build } from 'esbuild';
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+
+// Interface Kit 0.1.3 exposes no positioning API. Patch its development-only
+// floating panel at bundle time, failing if an upgrade changes the seam.
+function replaceOnce(source, before, after) {
+  if (source.split(before).length !== 2) throw new Error('Interface Kit positioning patch no longer matches the installed version.');
+  return source.replace(before, after);
+}
+
+const positioning = {
+  name: 'interface-kit-positioning',
+  setup(builder) {
+    builder.onLoad({ filter: /interface-kit\/dist\/react\.js$/ }, async args => {
+      let source = await readFile(args.path, 'utf8');
+      // Keep Radix popovers inside Interface Kit's shadow root: its styles and
+      // selection exclusions otherwise do not apply to the picker.
+      source = replaceOnce(source, '  return /* @__PURE__ */ jsx20(dist_exports2.Portal, { children:', '  const container = usePortalContainer();\n  return /* @__PURE__ */ jsx20(dist_exports2.Portal, { container, children:');
+      const start = source.indexOf('  const handlePointerDown = useCallback2(\n', source.indexOf('function FloatingPanel()'));
+      const end = source.indexOf('  const handleCopy = async () => {', start);
+      if (start < 0 || end < 0) throw new Error('Interface Kit drag handler not found.');
+      source = source.slice(0, start) + `  const handlePointerDown = useCallback2((e) => {
+    if (e.button !== 0 || (isExpanded && e.target.closest('button'))) return;
+    const startX = e.clientX, startY = e.clientY;
+    const startLeft = left.get(), startTop = top.get();
+    const size = isExpanded ? PANEL_WIDTH : COLLAPSED_SIZE;
+    let dragged = false;
+    const el = containerRef.current;
+    if (el) el.style.cursor = 'grabbing';
+    const move = event => {
+      const dx = event.clientX - startX, dy = event.clientY - startY;
+      if (!dragged && Math.hypot(dx, dy) < 4) return;
+      dragged = true;
+      left.set(clamp(startLeft + dx, EDGE_MARGIN, Math.max(EDGE_MARGIN, window.innerWidth - EDGE_MARGIN - size)));
+      if (!isExpanded) top.set(clamp(startTop + dy, EDGE_MARGIN, Math.max(EDGE_MARGIN, window.innerHeight - EDGE_MARGIN - COLLAPSED_SIZE)));
+    };
+    const cleanup = () => {
+      document.removeEventListener('pointermove', move);
+      document.removeEventListener('pointerup', up);
+      document.removeEventListener('pointercancel', cancel);
+      window.removeEventListener('blur', cancel);
+      dragCleanupRef.current = null;
+      if (el) el.style.cursor = '';
+    };
+    const finish = open => {
+      cleanup();
+      if (!dragged) { if (open && !isExpanded) handleOpen(); return; }
+      let right = left.get() + size / 2 >= window.innerWidth / 2;
+      let bottom = top.get() + COLLAPSED_SIZE / 2 >= window.innerHeight / 2;
+      if (!isExpanded) ({ right, bottom } = window.__interfaceKitCorner.claim(right, bottom));
+      if (isExpanded) setPanelSide(right ? 'right' : 'left');
+      animateMotionValue(left, right ? Math.max(EDGE_MARGIN, window.innerWidth - EDGE_MARGIN - size) : EDGE_MARGIN, springTransition);
+      animateMotionValue(top, !isExpanded && bottom ? Math.max(EDGE_MARGIN, window.innerHeight - EDGE_MARGIN - COLLAPSED_SIZE) : EDGE_MARGIN, springTransition);
+    };
+    const up = () => finish(true), cancel = () => finish(false);
+    document.addEventListener('pointermove', move);
+    document.addEventListener('pointerup', up);
+    document.addEventListener('pointercancel', cancel);
+    window.addEventListener('blur', cancel);
+    dragCleanupRef.current = cleanup;
+  }, [isExpanded, left, top, handleOpen, setPanelSide]);
+` + source.slice(end);
+      source = replaceOnce(source, `    const targetX = (_a = saved == null ? void 0 : saved.x) != null ? _a : window.innerWidth - EDGE_MARGIN - COLLAPSED_SIZE;\n    const targetY = (_b = saved == null ? void 0 : saved.y) != null ? _b : EDGE_MARGIN;`, `    const chosen = window.__interfaceKitCorner.claim(side === 'right', false);\n    const targetX = chosen.right ? Math.max(EDGE_MARGIN, window.innerWidth - EDGE_MARGIN - COLLAPSED_SIZE) : EDGE_MARGIN;\n    const targetY = chosen.bottom ? Math.max(EDGE_MARGIN, window.innerHeight - EDGE_MARGIN - COLLAPSED_SIZE) : EDGE_MARGIN;`);
+      source = replaceOnce(source, '  }, [left, top, widthMV, setActive, setSettingsOpen]);', '  }, [left, top, widthMV, setActive, setSettingsOpen, side]);');
+      source = replaceOnce(source, '  const dragCleanupRef = useRef2(null);', '  const dragCleanupRef = useRef2(null);\n  const dockCornerRef = useRef2(null);\n  if (!dockCornerRef.current) dockCornerRef.current = window.__interfaceKitCorner.claim(false, true);');
+      source = replaceOnce(source, 'typeof window !== "undefined" ? window.innerWidth - EDGE_MARGIN - COLLAPSED_SIZE : 0', 'dockCornerRef.current.right ? Math.max(EDGE_MARGIN, window.innerWidth - EDGE_MARGIN - COLLAPSED_SIZE) : EDGE_MARGIN');
+      source = replaceOnce(source, '  const top = useMotionValue(EDGE_MARGIN);', '  const top = useMotionValue(dockCornerRef.current.bottom ? Math.max(EDGE_MARGIN, window.innerHeight - EDGE_MARGIN - COLLAPSED_SIZE) : EDGE_MARGIN);');
+      source = replaceOnce(source, '    setActive(true);\n  }, [left, top, widthMV, side, setPanelSide, setActive]);', '    window.__interfaceKitCorner.clear();\n    setActive(true);\n  }, [left, top, widthMV, side, setPanelSide, setActive]);');
+      source = replaceOnce(source, "      if (isExpanded) setPanelSide(right ? 'right' : 'left');", "      dockCornerRef.current = { right, bottom: isExpanded ? false : bottom };\n      if (isExpanded) setPanelSide(right ? 'right' : 'left');");
+      source = replaceOnce(source, '    animateMotionValue(left, targetX, springTransition);\n    animateMotionValue(top, targetY, springTransition);', '    dockCornerRef.current = chosen;\n    animateMotionValue(left, targetX, springTransition);\n    animateMotionValue(top, targetY, springTransition);');
+      source = replaceOnce(source, '  const handleCopy = async () => {', `  useEffect2(() => {
+    const resize = () => {
+      const size = isExpanded ? PANEL_WIDTH : COLLAPSED_SIZE;
+      left.set(dockCornerRef.current.right ? Math.max(EDGE_MARGIN, window.innerWidth - EDGE_MARGIN - size) : EDGE_MARGIN);
+      top.set(!isExpanded && dockCornerRef.current.bottom ? Math.max(EDGE_MARGIN, window.innerHeight - EDGE_MARGIN - COLLAPSED_SIZE) : EDGE_MARGIN);
+    };
+    const reconcile = () => {
+      if (!isExpanded) dockCornerRef.current = window.__interfaceKitCorner.claim(dockCornerRef.current.right, dockCornerRef.current.bottom);
+      resize();
+    };
+    window.addEventListener('resize', resize);
+    window.addEventListener('canvas-corners-changed', reconcile);
+    return () => { window.removeEventListener('resize', resize); window.removeEventListener('canvas-corners-changed', reconcile); };
+  }, [isExpanded, left, top]);
+  const handleCopy = async () => {`);
+      source = replaceOnce(source, '      children: [\n        /* @__PURE__ */ jsx27("div", { className: "px-2 py-1.5 shrink-0"', `      children: [
+        /* @__PURE__ */ jsx27("div", { role: "presentation", title: "Drag to move panel", style: { height: 20, flexShrink: 0, cursor: "grab", touchAction: "none", display: "grid", placeItems: "center" }, onPointerDown: e => {
+          const toolbar = e.currentTarget.getRootNode().querySelector('[data-interface-kit][style*="border-radius: 22px"]');
+          toolbar?.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true, button: 0, clientX: e.clientX, clientY: e.clientY, pointerId: e.pointerId }));
+        }, children: /* @__PURE__ */ jsx27("span", { style: { width: 28, height: 3, borderRadius: 3, background: "rgba(255,255,255,.35)", pointerEvents: "none" } }) }),
+        /* @__PURE__ */ jsx27("div", { className: "px-2 py-1.5 shrink-0"`);
+      source = replaceOnce(source, '          cursor: isExpanded ? void 0 : "grab"', '          cursor: isExpanded ? void 0 : "grab", touchAction: "none"');
+      source = replaceOnce(source, '        onPointerDown: handlePointerDown,\n        children:', `        onPointerDown: handlePointerDown,\n        role: isExpanded ? void 0 : 'button',\n        tabIndex: isExpanded ? void 0 : 0,\n        'aria-label': isExpanded ? void 0 : 'Open Interface Kit',\n        onKeyDown: e => { if (!isExpanded && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); handleOpen(); } },\n        children:`);
+      return { contents: source, loader: 'js', resolveDir: args.path.slice(0, args.path.lastIndexOf('/')) };
+    });
+  }
+};
+
+export async function bundleInterfaceKit() {
+  const result = await build({ entryPoints: [fileURLToPath(new URL('./interface-kit-entry.js', import.meta.url))], bundle: true, write: false, platform: 'browser', format: 'esm', define: { 'process.env.NODE_ENV': '"development"' }, plugins: [positioning] });
+  return result.outputFiles[0].contents;
+}

package/src/interface-kit-entry.js

@@ -0,0 +1,16 @@
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { InterfaceKit } from 'interface-kit/react';
+import { claimCorner } from '../client/corners.js';
+
+const mount = document.createElement('div');
+mount.dataset.interfaceKit = '';
+document.body.append(mount);
+window.__interfaceKitCorner = {
+  claim(right, bottom) {
+    const corner = claimCorner(mount, `${bottom ? 'bottom' : 'top'}-${right ? 'right' : 'left'}`);
+    return { right: corner.endsWith('right'), bottom: corner.startsWith('bottom') };
+  },
+  clear() { delete mount.dataset.floatingCorner; },
+};
+createRoot(mount).render(createElement(InterfaceKit, { enabled: true }));

package/src/project.js

@@ -0,0 +1,29 @@
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { validateScreens, presets, screenKinds } from "../client/registry.js";
+
+export const DEFAULT_CONFIG = "dev/canvas/screens.js";
+export const DEFAULT_STORAGE_KEY = "tio-canvas:v1";
+
+/**
+ * Where a project keeps what is its own: the list of screens (a standalone ES
+ * module the browser loads as it stands, so it must import nothing) and the page
+ * thumbnails beside it.
+ */
+export function resolveProject({ root = process.cwd(), config = DEFAULT_CONFIG, thumbnails } = {}) {
+  const configFile = path.resolve(root, config);
+  return {
+    root: path.resolve(root),
+    configFile,
+    projectDir: path.dirname(configFile),
+    thumbnailsDir: path.resolve(root, thumbnails ?? path.join(path.dirname(config), "thumbnails"))
+  };
+}
+
+/** Import the project's config afresh and refuse a screen the canvas cannot show. */
+export async function loadProject(project) {
+  const module = await import(`${pathToFileURL(project.configFile).href}?load=${Date.now()}`);
+  if (!Array.isArray(module.screens)) throw new Error(`${project.configFile} must export "screens", an array.`);
+  validateScreens(module.screens);
+  return { screens: module.screens, storageKey: module.storageKey ?? DEFAULT_STORAGE_KEY, presets, screenKinds };
+}

package/src/server.js

@@ -0,0 +1,70 @@
+import path from "node:path";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { resolveProject, DEFAULT_STORAGE_KEY } from "./project.js";
+
+const CLIENT = fileURLToPath(new URL("../client", import.meta.url));
+const DEFAULT_STORAGE_EXPORT = /export\s+(?:const|let|var)\s+storageKey\b|export\s*\{[^}]*\bstorageKey\b/;
+
+/**
+ * The canvas as seen by a development server.
+ *
+ * It does not own a server. A host (the project's own `serve.mjs`) asks it four
+ * things and keeps everything else, so the canvas never decides how a project is
+ * served:
+ *
+ *   locate(pathname)         which directory, and which path inside it, holds a
+ *                            file under /canvas
+ *   projectModule()          the project's config, as the browser must receive it
+ *   pageScripts(url, headers) the scripts to add to a page that is being framed
+ *   interfaceKitBundle()     the development-only Interface Kit script
+ *
+ * Nothing here ships: a production build is `copyCanvas` in ./build.js.
+ */
+export function createCanvasHost(options = {}) {
+  const project = resolveProject(options);
+  let kit;
+
+  return {
+    project,
+    clientDir: CLIENT,
+
+    /** Directories to watch; a change in either reloads the workspace. */
+    watchTargets: () => [CLIENT, project.projectDir],
+
+    locate(pathname) {
+      const local = pathname.slice("/canvas".length) || "/";
+      if (local === "/project.js") return { directory: project.projectDir, localPath: `/${path.basename(project.configFile)}`, project: true };
+      if (local.startsWith("/thumbnails/")) return { directory: project.thumbnailsDir, localPath: local.slice("/thumbnails".length) };
+      return { directory: CLIENT, localPath: local };
+    },
+
+    /**
+     * The project's config, plus the storage key when the config names none.
+     * The key decides where a browser keeps the saved layout, so two projects
+     * opened on one origin must not share one.
+     */
+    async projectModule() {
+      const source = await readFile(project.configFile, "utf8");
+      return DEFAULT_STORAGE_EXPORT.test(source) ? source : `${source}\nexport const storageKey = ${JSON.stringify(DEFAULT_STORAGE_KEY)};\n`;
+    },
+
+    /** `bridge` goes into every framed screen; `tools` only into one framed by the canvas itself. */
+    pageScripts(url, headers) {
+      const bridge = url.searchParams.get("canvasScreen") === "1" ? '<script type="module" src="/canvas/bridge.js"></script>' : "";
+      const framed = bridge && headers["sec-fetch-dest"] === "iframe";
+      const tools = framed ? '<script type="module" src="/__dev/interface-kit.js"></script>' : "";
+      return { bridge, tools };
+    },
+
+    async interfaceKitBundle() {
+      try {
+        kit ??= (await import("./interface-kit-bundle.js")).bundleInterfaceKit();
+        return await kit;
+      } catch (error) {
+        kit = undefined;
+        throw error;
+      }
+    }
+  };
+}

package/src/thumbnails.js

@@ -0,0 +1,95 @@
+// Refresh the development-only page catalog snapshots with a running dev server:
+//   tio-canvas thumbnails [http://localhost:4321] [--missing|--check] [--config dev/canvas/screens.js] [--out dev/canvas/thumbnails]
+// Uses the existing Chromium cache, without adding a browser dependency.
+import { spawn } from 'node:child_process';
+import { access, mkdir, readdir, writeFile, mkdtemp, rm } from 'node:fs/promises';
+import { homedir, tmpdir } from 'node:os';
+import { pathToFileURL } from 'node:url';
+import { setTimeout as sleep } from 'node:timers/promises';
+import { resolveProject, loadProject } from './project.js';
+
+const args = process.argv.slice(2);
+const option = (name) => { const at = args.indexOf(name); return at < 0 ? undefined : args.splice(at, 2)[1]; };
+const config = option('--config'), out = option('--out');
+const project = resolveProject({ config, thumbnails: out });
+const { screens } = await loadProject(project);
+const mode = args.includes('--check') ? 'check' : args.includes('--missing') ? 'missing' : 'all';
+const base = args.find(arg => !arg.startsWith('--')) ?? 'http://localhost:4321';
+const destination = pathToFileURL(project.thumbnailsDir + '/');
+const missing = [];
+for (const source of screens) {
+  try { await access(new URL(`${source.id}.webp`, destination)); }
+  catch (error) { if (error.code !== 'ENOENT') throw error; missing.push(source); }
+}
+if (mode === 'check') {
+  if (missing.length) throw new Error(`Missing canvas thumbnails: ${missing.map(source => source.id).join(', ')}`);
+  console.log(`All ${screens.length} canvas thumbnails are present.`);
+  process.exit(0);
+}
+const targets = mode === 'missing' ? missing : screens;
+if (!targets.length) { console.log('No canvas thumbnails are missing.'); process.exit(0); }
+if (!(await fetch(`${base}/canvas/`)).ok) throw new Error('Start the development server before generating thumbnails.');
+const cache = `${homedir()}/Library/Caches/ms-playwright`;
+const shells = (await readdir(cache)).filter(name => name.startsWith('chromium_headless_shell-')).sort();
+const binary = process.env.CHROME_BIN ?? `${cache}/${shells.at(-1)}/chrome-headless-shell-mac-arm64/chrome-headless-shell`;
+const profile = await mkdtemp(`${tmpdir()}/canvas-thumbnails-`);
+const chrome = spawn(binary, ['--headless', '--disable-gpu', '--remote-debugging-port=0', `--user-data-dir=${profile}`, 'about:blank'], { stdio: ['ignore', 'ignore', 'pipe'] });
+let socket;
+try {
+  const endpoint = await new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('Chromium startup timed out.')), 10000);
+    let output = '';
+    chrome.stderr.on('data', chunk => {
+      output += chunk;
+      const match = output.match(/DevTools listening on (ws:\/\/[^\s]+)/);
+      if (match) { clearTimeout(timer); resolve(new URL(match[1]).origin.replace('ws:', 'http:')); }
+    });
+    chrome.once('error', error => { clearTimeout(timer); reject(error); });
+  });
+  const page = (await (await fetch(`${endpoint}/json/list`)).json()).find(item => item.type === 'page');
+  socket = new WebSocket(page.webSocketDebuggerUrl);
+  await new Promise((resolve, reject) => { socket.onopen = resolve; socket.onerror = reject; });
+  let id = 0;
+  const pending = new Map();
+  socket.onmessage = event => {
+    const message = JSON.parse(event.data);
+    const request = pending.get(message.id);
+    if (!request) return;
+    pending.delete(message.id); clearTimeout(request.timer);
+    if (message.error) request.reject(new Error(message.error.message));
+    else request.resolve(message.result);
+  };
+  const send = (method, params = {}) => new Promise((resolve, reject) => {
+    const key = ++id;
+    const timer = setTimeout(() => { pending.delete(key); reject(new Error(`${method} timed out.`)); }, 15000);
+    pending.set(key, { resolve, reject, timer });
+    socket.send(JSON.stringify({ id: key, method, params }));
+  });
+  await send('Page.enable');
+  await send('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-reduced-motion', value: 'reduce' }] });
+  await mkdir(destination, { recursive: true });
+  for (const source of targets) {
+    await send('Emulation.setDeviceMetricsOverride', { width: source.width, height: source.height, deviceScaleFactor: 1, mobile: false });
+    const url = new URL(source.src, base);
+    url.searchParams.set('canvasScreen', '1');
+    await send('Page.navigate', { url: url.href });
+    let ready = false;
+    for (let attempt = 0; attempt < 100; attempt++) {
+      await sleep(100);
+      const result = await send('Runtime.evaluate', { expression: 'location.href === '+JSON.stringify(url.href)+' && document.readyState !== "loading"', returnByValue: true });
+      if (result.result.value) { ready = true; break; }
+    }
+    if (!ready) throw new Error(`Page did not load: ${source.src}`);
+    const settled = await send('Runtime.evaluate', { expression: '(async()=>{await document.fonts.ready;await Promise.race([Promise.all([...document.images].map(image=>image.decode().catch(()=>{}))),new Promise(resolve=>setTimeout(resolve,4000))]);await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));return true})()', awaitPromise: true, returnByValue: true });
+    if (settled.exceptionDetails) throw new Error(`Page did not settle: ${source.src}`);
+    const { data } = await send('Page.captureScreenshot', { format: 'webp', quality: 80, clip: { x: 0, y: 0, width: source.width, height: source.height, scale: 160 / Math.min(source.width, source.height) } });
+    await writeFile(new URL(`${source.id}.webp`, destination), Buffer.from(data, 'base64'));
+    console.log(`Updated ${source.id}.webp`);
+  }
+} finally {
+  socket?.close();
+  const exited = new Promise(resolve => chrome.once('exit', resolve));
+  chrome.kill();
+  await exited;
+  await rm(profile, { recursive: true, force: true });
+}