twombly 0.0.0-stage → 0.2.0

package/dist/cli.js

@@ -0,0 +1,2084 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { spawn as spawn2 } from "node:child_process";
+import { randomBytes as randomBytes2 } from "node:crypto";
+import { copyFile, mkdir as mkdir7, mkdtemp, readFile as readFile7, rm as rm5, stat as stat5, writeFile as writeFile7 } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { basename as basename2, extname as extname3, join as join9, resolve as resolve2 } from "node:path";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+
+// ../protocol/src/gates.ts
+var LIMITS = {
+  fileBytes: 25 * 1024 * 1024,
+  frameBytes: 100 * 1024 * 1024,
+  frameFiles: 5e3,
+  canvasFrames: 200,
+  scanBytes: 8 * 1024 * 1024,
+  titleChars: 120,
+  nameChars: 120,
+  commentChars: 5e3,
+  strokePoints: 3e3,
+  canvasStrokes: 2e3
+};
+var STATIC_FIX = "Frames are static front-end files only. Delete it from the folder; if the design needs what it provided, use mock data.";
+var FORBIDDEN = [
+  { test: /(^|\/)\.env(\.|$)/i, code: "ENV_FILE", what: "an environment file" },
+  { test: /(^|\/)\.git(\/|$)/, code: "GIT_DIRECTORY", what: "a git directory" },
+  { test: /(^|\/)node_modules(\/|$)/, code: "NODE_MODULES", what: "node_modules", fix: "Build first and add the output folder, not the project. Copy any file the page needs next to it." },
+  { test: /(^|\/)(\.npmrc|\.netrc|\.pypirc|\.htpasswd|credentials(\.json)?|secrets?\.(json|ya?ml|toml)|service[-_]?account.*\.json)$/i, code: "CREDENTIAL_FILE", what: "a credentials file" },
+  { test: /\.(pem|key|p12|pfx|crt|cer|keystore|jks)$/i, code: "KEY_FILE", what: "a key or certificate" },
+  { test: /(^|\/)id_(rsa|dsa|ecdsa|ed25519)(\.pub)?$/, code: "KEY_FILE", what: "an SSH key" },
+  { test: /\.(sql|sqlite|sqlite3|db|dump|bak)$/i, code: "DATABASE_FILE", what: "a database file" },
+  { test: /\.map$/i, code: "SOURCE_MAP", what: "a source map", fix: "Source maps publish original source code. Turn them off in the build or delete the .map files." },
+  { test: /(^|\/)\.next\/(server|cache)(\/|$)/, code: "SERVER_CODE", what: "server output from Next.js", fix: 'Use a static export (output: "export") and add its output folder.' },
+  { test: /\.(php|rb|py|go|rs|java|cs|sh|bash|zsh|exe|dll|so|dylib)$/i, code: "SERVER_CODE", what: "server or native code" },
+  { test: /(^|\/)(package(-lock)?\.json|pnpm-lock\.yaml|yarn\.lock|bun\.lockb?|tsconfig\.json|wrangler\.(toml|jsonc?)|dockerfile|docker-compose\.ya?ml)$/i, code: "PROJECT_FILE", what: "a project file", fix: "That looks like a project folder. Build first and add the output folder only." }
+];
+function checkPath(path) {
+  if (path.startsWith("/") || path.includes("\\") || path.split("/").some((part) => part === ".." || part === "")) {
+    return { code: "BAD_PATH", message: `"${path}" is not a clean relative path.`, fix: "Use relative paths inside the frame folder.", file: path };
+  }
+  for (const rule of FORBIDDEN) {
+    if (rule.test.test(path)) return { code: rule.code, message: `"${path}" is ${rule.what}.`, fix: rule.fix || STATIC_FIX, file: path };
+  }
+  return null;
+}
+var SECRET_PATTERNS = [
+  { name: "a private key", re: /-----BEGIN (?:RSA |EC |OPENSSH |DSA |PGP )?PRIVATE KEY/ },
+  { name: "an AWS access key", re: /\b(?:AKIA|ASIA)[A-Z0-9]{16}\b/ },
+  { name: "an Anthropic API key", re: /\bsk-ant-[A-Za-z0-9_-]{20,}/ },
+  { name: "an OpenAI API key", re: /\bsk-(?:proj-|svcacct-|admin-)?[A-Za-z0-9_-]{32,}/ },
+  { name: "a Stripe secret key", re: /\b(?:sk|rk)_(?:live|test)_[A-Za-z0-9]{16,}/ },
+  { name: "a Stripe webhook secret", re: /\bwhsec_[A-Za-z0-9]{24,}/ },
+  { name: "a GitHub token", re: /\b(?:ghp|gho|ghu|ghs|ghr)_[A-Za-z0-9]{36,}\b|\bgithub_pat_[A-Za-z0-9_]{40,}/ },
+  { name: "a GitLab token", re: /\bglpat-[A-Za-z0-9_-]{20,}/ },
+  { name: "a Slack token", re: /\bxox[abeoprs]-[A-Za-z0-9-]{10,}/ },
+  { name: "a Slack webhook", re: /hooks\.slack\.com\/services\/T[A-Za-z0-9]+\/B[A-Za-z0-9]+\/[A-Za-z0-9]+/ },
+  { name: "a Google API key", re: /\bAIza[A-Za-z0-9_-]{35}\b/ },
+  { name: "a Google OAuth client secret", re: /\bGOCSPX-[A-Za-z0-9_-]{20,}/ },
+  { name: "a SendGrid key", re: /\bSG\.[A-Za-z0-9_-]{16,}\.[A-Za-z0-9_-]{16,}/ },
+  { name: "a Twilio key", re: /\bSK[a-f0-9]{32}\b/ },
+  { name: "a Supabase secret key", re: /\bsb_secret_[A-Za-z0-9_-]{16,}/ },
+  { name: "a Vercel or Resend key", re: /\bre_[A-Za-z0-9]{8}_[A-Za-z0-9]{16,}|\bvercel_blob_rw_[A-Za-z0-9_]{16,}/ },
+  { name: "an npm token", re: /\bnpm_[A-Za-z0-9]{36}\b/ },
+  { name: "a database address with a password", re: /\b(?:postgres(?:ql)?|mysql|mongodb(?:\+srv)?|redis|amqps?):\/\/[^\s:@"'`/]+:[^\s:@"'`/]{3,}@[^\s"'`]+/i }
+];
+var ASSIGNED_SECRET = /(?:api[_-]?key|api[_-]?secret|secret[_-]?key|client[_-]?secret|auth[_-]?token|access[_-]?token|private[_-]?key|service[_-]?role(?:[_-]?key)?|password|passwd)["'`]?\s*[:=]\s*["'`]([^"'`\s]{20,})["'`]/gi;
+var JWT = /\beyJ[A-Za-z0-9_-]{10,}\.eyJ[A-Za-z0-9_-]{10,}\.[A-Za-z0-9_-]{10,}/g;
+var PLACEHOLDER = /^(?:x+|your|example|placeholder|test|mock|demo|fake|dummy|sample|<|\$\{|process\.env|import\.meta)/i;
+function entropy(value) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const c of value) counts.set(c, (counts.get(c) || 0) + 1);
+  let bits = 0;
+  for (const n of counts.values()) {
+    const p = n / value.length;
+    bits -= p * Math.log2(p);
+  }
+  return bits;
+}
+function secretProblem(file2, what) {
+  return {
+    code: "SECRET_FOUND",
+    message: `"${file2}" contains what looks like ${what}.`,
+    fix: "Remove it, and rebuild without any environment values. Frames are public static files: anything in them can be read by anyone with the link. Use mock data instead of calling the service.",
+    file: file2
+  };
+}
+function scanText(file2, text2) {
+  const found = /* @__PURE__ */ new Map();
+  for (const { name, re } of SECRET_PATTERNS) if (re.test(text2)) found.set(name, secretProblem(file2, name));
+  for (const match of text2.matchAll(ASSIGNED_SECRET)) {
+    const value = match[1];
+    if (!PLACEHOLDER.test(value) && entropy(value) >= 3.5) {
+      found.set("assigned", secretProblem(file2, "a secret assigned to a key or password field"));
+      break;
+    }
+  }
+  for (const match of text2.matchAll(JWT)) {
+    if (hasRoleClaim(match[0])) {
+      found.set("jwt", secretProblem(file2, "a service token"));
+      break;
+    }
+  }
+  return [...found.values()];
+}
+function hasRoleClaim(jwt) {
+  try {
+    const payload = JSON.parse(atob(jwt.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
+    return typeof payload === "object" && !!payload && ("role" in payload || "iss" in payload);
+  } catch {
+    return false;
+  }
+}
+function looksLikeText(bytes) {
+  const end = Math.min(bytes.length, 8192);
+  for (let i = 0; i < end; i++) if (bytes[i] === 0) return false;
+  return true;
+}
+function scanBytes(file2, bytes) {
+  if (!looksLikeText(bytes)) return [];
+  return scanText(file2, new TextDecoder().decode(bytes.subarray(0, LIMITS.scanBytes)));
+}
+
+// ../protocol/src/frames.ts
+async function contentHash(files) {
+  const lines = files.map((f) => `${f.path}
+${f.hash}`).sort().join("\n");
+  const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(lines));
+  return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, "0")).join("").slice(0, 20);
+}
+function candidatePaths(pathname) {
+  let path;
+  try {
+    path = decodeURIComponent(pathname);
+  } catch {
+    return [];
+  }
+  path = path.replace(/^\/+/, "");
+  if (path.split("/").some((part) => part === "..")) return [];
+  if (!path) return ["index.html"];
+  if (path.endsWith("/")) return [path + "index.html"];
+  return [path, path + ".html", path + "/index.html"];
+}
+var TYPES = {
+  html: "text/html; charset=utf-8",
+  htm: "text/html; charset=utf-8",
+  css: "text/css; charset=utf-8",
+  js: "text/javascript; charset=utf-8",
+  mjs: "text/javascript; charset=utf-8",
+  cjs: "text/javascript; charset=utf-8",
+  json: "application/json; charset=utf-8",
+  txt: "text/plain; charset=utf-8",
+  svg: "image/svg+xml",
+  xml: "application/xml",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  ico: "image/x-icon",
+  woff: "font/woff",
+  woff2: "font/woff2",
+  ttf: "font/ttf",
+  otf: "font/otf",
+  eot: "application/vnd.ms-fontobject",
+  mp4: "video/mp4",
+  webm: "video/webm",
+  mov: "video/quicktime",
+  mp3: "audio/mpeg",
+  wav: "audio/wav",
+  ogg: "audio/ogg",
+  m4a: "audio/mp4",
+  wasm: "application/wasm",
+  pdf: "application/pdf",
+  webmanifest: "application/manifest+json",
+  map: "application/json",
+  glb: "model/gltf-binary",
+  gltf: "model/gltf+json"
+};
+function contentType(path) {
+  return TYPES[path.split(".").pop()?.toLowerCase() || ""] || "application/octet-stream";
+}
+function frameCsp(ancestors) {
+  return [
+    "default-src 'self'",
+    "script-src 'self' 'unsafe-inline' 'unsafe-eval' blob:",
+    "style-src 'self' 'unsafe-inline'",
+    "img-src 'self' data: blob:",
+    "font-src 'self' data:",
+    "media-src 'self' data: blob:",
+    "connect-src 'self' data: blob:",
+    "worker-src 'self' blob:",
+    "frame-src 'self' blob: data:",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "form-action 'none'",
+    `frame-ancestors ${ancestors.join(" ")}`
+  ].join("; ");
+}
+var FRAME_SANDBOX = "allow-scripts allow-same-origin allow-forms allow-modals allow-pointer-lock allow-downloads";
+var FRAME_BRIDGE_PATH = "/__twombly/bridge.js";
+var FRAME_POSTER_PATH = "/__twombly/poster.png";
+var FRAME_BRIDGE_JS = `(() => {
+  if (window.parent === window) return;
+  const post = message => { try { window.parent.postMessage({ twombly: true, ...message }, '*'); } catch {} };
+  let queued = null, scheduled = false;
+  addEventListener('pointermove', event => {
+    queued = { kind: 'pointer', x: event.clientX, y: event.clientY };
+    if (scheduled) return;
+    scheduled = true;
+    requestAnimationFrame(() => { scheduled = false; post(queued); });
+  }, { capture: true, passive: true });
+  addEventListener('wheel', event => {
+    if (!event.ctrlKey && !event.metaKey) return;
+    event.preventDefault();
+    post({ kind: 'zoom', x: event.clientX, y: event.clientY, dy: event.deltaY });
+  }, { capture: true, passive: false });
+  addEventListener('keydown', event => { if (event.key === 'Escape') post({ kind: 'escape' }); }, { capture: true });
+})();`;
+function injectBridge(html) {
+  const tag = `<script src="${FRAME_BRIDGE_PATH}"></script>`;
+  const head = html.match(/<head(\s[^>]*)?>/i);
+  if (head && head.index !== void 0) {
+    const at = head.index + head[0].length;
+    return html.slice(0, at) + tag + html.slice(at);
+  }
+  const doctype = html.match(/^\s*<!doctype[^>]*>/i);
+  if (doctype) return doctype[0] + tag + html.slice(doctype[0].length);
+  return tag + html;
+}
+var FRAME_ONLY_MESSAGE = "This frame only opens inside a canvas.";
+
+// ../protocol/src/index.ts
+var FIDELITY_LEVELS = ["build", "component", "capture", "image"];
+function cleanStroke(input) {
+  const s = input;
+  if (!s || typeof s !== "object" || typeof s.id !== "string" || !/^[a-z0-9]{8,32}$/.test(s.id)) return null;
+  if (typeof s.color !== "string" || !/^#[0-9a-f]{6}$/i.test(s.color)) return null;
+  if (typeof s.size !== "number" || !Number.isFinite(s.size) || s.size <= 0 || s.size > 2e3) return null;
+  if (!Array.isArray(s.points) || !s.points.length || s.points.length > LIMITS.strokePoints) return null;
+  if (!s.points.every((p) => Array.isArray(p) && p.length === 3 && p.every((n) => typeof n === "number" && Number.isFinite(n)))) return null;
+  return { id: s.id, frameId: typeof s.frameId === "string" && FRAME_ID.test(s.frameId) ? s.frameId : null, points: s.points, color: s.color, size: s.size };
+}
+var WORKING_MS = 3 * 6e4;
+var WORKING_TAIL_MS = 3e4;
+var FRAME_ID = /^[a-km-z2-9]{8,32}$/;
+var FRAME_GAP = 80;
+function nextPosition(frames, newRow = false) {
+  if (!frames.length) return { x: 0, y: 0 };
+  const lastRowY = Math.max(...frames.map((f) => f.y));
+  const lastRow = frames.filter((f) => f.y === lastRowY);
+  if (newRow) return { x: Math.min(...frames.map((f) => f.x)), y: Math.max(...frames.map((f) => f.y + f.h)) + FRAME_GAP + 40 };
+  return { x: Math.max(...lastRow.map((f) => f.x + f.w)) + FRAME_GAP, y: lastRowY };
+}
+
+// ../../skills/twombly/SKILL.md
+var SKILL_default = "---\nname: twombly\ndescription: Lay out design explorations on a shared canvas. Use when asked to \"put this on Twombly\", \"put these on a canvas\", \"lay out these versions\", \"show me all the variations side by side\", or to share explorations with real-time cursors and comments. Works with any framework in any repo.\n---\n\n# Twombly\n\nTwombly shows design work as live frames on an infinite canvas. You build each version, turn it into a folder of static files, and add it. The canvas opens on `localhost`; `init` returns its address. Nothing is online until the person clicks Share. After that the local canvas and the link are one state: everything you add, update or move appears for everyone straight away.\n\nRun every command as `npx -y twombly@latest <command>`; this guide shortens that to `twombly <command>`. Output is JSON.\n\n## The rule that decides everything\n\n**A frame is a folder of static files that runs with no server and no network.** It can use anything in its own folder and nothing else. The browser enforces this: outside requests, form posts and server code all fail, locally and once shared.\n\nThe person's repo may have a database, an API, auth and environment keys. None of that goes in a frame. Your job is to adapt the design so it works without them:\n\n- **Data and APIs:** replace with realistic mock data, written inline or as JSON in the folder. For public CMS content, save a snapshot as JSON when you build.\n- **Auth and providers:** skip login, and mount the design with mock providers and a fake signed-in user.\n- **Environment values:** never include them. Build with none set. Don't copy `.env` files. If the build needs a value to compile, use an obviously fake one. **Never run or read a secret manager such as Infisical or Doppler for this, even if the project is set up for it.** If you can't get what you need without one, ask the person.\n- **Analytics and widgets:** remove tag managers, analytics, chat widgets and similar scripts, including any in page templates such as `app.html` or `_document`.\n- **Real customer data:** never copy it from a database, fixture or log. Invent names, emails and numbers. The gates can't detect this, so it's on you. Links are public.\n- **Fonts, images and video:** copy the files into the folder with relative or root paths. For a hosted font such as Google Fonts, download the files and use `@font-face`; Google only serves `woff2` to a browser user agent. If a font is licensed, tell the person it will be publicly hosted. Add up media sizes before downloading, take only what the design shows, and compress video.\n- **One screen of a routed app:** a router reads the page's address, which won't match the screen you want. Write a small entry file that mounts that screen with a memory or hash router, instead of trying to reach its route.\n\n## Limits\n\n100 MB per frame, 25 MB per file, 5000 files per frame, 200 frames per canvas. A URL can't be added, not even `localhost`: build it or `capture` it. Refused files: `.env`, credentials, keys, databases, source maps, server code, `node_modules` and project files such as `package.json`. Pop-ups, camera and microphone are off.\n\n## Steps\n\n1. **Start the canvas.** From the project root, or in a monorepo from the app's own folder so `.twombly/work` can find its packages: `twombly init --name \"Notification Explorations\" --no-open`. Pick a short, specific name. Run it once per canvas. The result's `local` field is the canvas's address.\n2. **Open it beside the chat.** The person should see the canvas next to this conversation, in the app they're already using. Open the `local` address in that app's built-in browser: the Claude desktop app's browser pane, the ChatGPT app's in-app browser, or the built-in browser in Cursor, VS Code or any other editor. Only if the app has none, run `twombly open`, which uses their default browser.\n3. **Build each version** as its own static folder, keeping work under `.twombly/work/<version>` so the person's source stays clean. Use the first approach below that works. The canvas background moves so people can see you're at work: `init` and the slow commands keep it going for three minutes. Run `twombly working` only before a longer gap.\n4. **Add it:** `twombly add <folder> --title \"V1 Compact\" --width 1280 --height 800 --level build`, saying which level below it is. Use the design's real size, such as `--width 390 --height 844` for a phone. Use `--height auto` to fit a tall page.\n5. **Read the output.** If `ok` is false, fix every item in `problems` and run `add` again. Each one includes a `fix`. The frame isn't placed until it passes.\n6. **Look at it.** The result has a `screenshot` path. Open it and check the frame shows the design you meant, with the content in the right state. The gates can't tell if a page came out unstyled or on the wrong screen; a common miss is Tailwind classes that were never generated. Tailwind 4 skips gitignored folders, so source copied into `.twombly` needs an `@source`.\n7. **Test interactions, if they matter.** Open the `url` from `twombly preview <frame>` in your browser tool and use the page inside its iframe. On the canvas, a frame ignores clicks until it's double-clicked, and frame URLs refuse to open on their own. Tell the person what you didn't test.\n8. **Finish:** run `twombly done` so the background goes still, then tell the person the canvas is open. They click Share when they're ready. The first time, Google sign-in opens in their regular browser, and sharing continues on its own once they finish.\n\n## Choosing how to build a frame\n\nUse the first one that fits. Say so if you end up lower than the first, because the frame is less faithful. **If the app has server routes, auth or a database, skip straight to `component`**: a static export of that kind of app rarely works and isn't worth the attempt.\n\n1. `--level build`: **a real static build.** Vite: `vite build --base ./ --outDir .twombly/work/v1`. Next.js: `output: 'export'` in a temporary config (static export can't use server features). SvelteKit: `adapter-static` with a `fallback`, `ssr = false` in the root layout, and any server `load` swapped for mock data in a universal `+layout.ts`. Astro: `astro build`. Plain HTML: use the folder as is. To show one state of a bigger app, add a build entry that renders just that screen.\n2. `--level component`: **the component on its own.** Write a tiny entry file that imports the real component with mock props, and bundle it with Vite or esbuild into a folder. This is the usual answer when the app needs a backend. It keeps the real code and styles.\n3. `--level capture`: **freeze what's on screen.** With the app already running: `twombly capture http://localhost:3000/page --out .twombly/work/v1 --width 1280 --height 800`, then add that folder. It looks right but no longer responds, because scripts are removed.\n4. `--level image`: **a picture**, as a last resort. `twombly capture <url> --out <folder> --image`, or `twombly add shot.png --title \"V1\"`.\n\nSeveral versions can share one build: read the variant from `location.search` and pass `--entry \"index.html?variant=2\"`. Shared files are only uploaded once.\n\nAdd several frames in one command, which is faster, instead of writing a loop. Nothing is placed unless all of them pass. Each item takes `folder`, `title`, `entry`, `width`, `height`, `level`, `newRow`, `x` and `y`, and flags on the command apply to all:\n\n```sh\ntwombly add out --width 1280 --height 800 --level component --frames '[{\"title\":\"A\",\"entry\":\"index.html?variant=a\"},{\"title\":\"B\",\"entry\":\"index.html?variant=b\"}]'\n```\n\n### Example: the component level with Vite\n\nFor most projects, this is all it takes. It works the same for React, Svelte or Vue with that framework's Vite plugin. Keep it under `.twombly/work`.\n\n```js\n// .twombly/work/vite.config.mjs\nimport { defineConfig } from 'vite';\nimport { resolve } from 'node:path';\nimport react from '@vitejs/plugin-react';\n\nconst root = resolve(import.meta.dirname, '../..');\nexport default defineConfig({\n  root: import.meta.dirname,\n  base: './',\n  plugins: [react()],\n  resolve: { alias: { '@': root } }, // match the project's path aliases\n  define: { 'process.env': {} },\n  build: { outDir: 'out', emptyOutDir: true, sourcemap: false },\n});\n```\n\n```html\n<!-- .twombly/work/index.html -->\n<!doctype html><html><body><div id=\"root\"></div><script type=\"module\" src=\"./main.jsx\"></script></body></html>\n```\n\n```jsx\n// .twombly/work/main.jsx: the real component, the real styles, invented data.\nimport { createRoot } from 'react-dom/client';\nimport '@/styles/globals.css';\nimport { Composer } from '@/components/composer';\n\nconst variant = new URLSearchParams(location.search).get('variant');\ncreateRoot(document.getElementById('root')).render(<Composer variant={variant} onSend={() => {}} messages={MOCK_MESSAGES} />);\n```\n\nThen: `npx vite build --config .twombly/work/vite.config.mjs` and `twombly add .twombly/work/out --title \"A\" --entry \"index.html?variant=a\" --level component`. If the project uses Tailwind, add its Vite or PostCSS plugin to the config so the classes are generated.\n\n## Commands\n\n`twombly help` lists every command and flag. `<frame>` is a frame's id or its exact title. Frames fill in left to right; use `--new-row` to start a new group, for example one row per direction.\n\nUse `update` to change a version. Don't remove and re-add it, because that loses its comments. It keeps the frame's entry and size unless you change them. Each frame keeps its own copy of its files, so after rebuilding, update the set together: `twombly update out --frames '[{\"frame\":\"A\"},{\"frame\":\"B\"}]'`. Nothing changes unless all of them pass.\n\n## Sharing\n\nThe person shares by clicking Share. Only run `twombly share` if they explicitly ask you to, because it publishes the canvas to a public link. If they ask you to take it down, run `twombly unshare`. That deletes the link and its comments and leaves the local canvas.\n\nOnce it's shared, every `add`, `update`, `move` and `remove` goes live immediately. Check your work with `twombly check` before updating a canvas people are looking at.\n";
+
+// src/capture.ts
+import { createHash } from "node:crypto";
+import { mkdir, rm, writeFile } from "node:fs/promises";
+import { extname, join } from "node:path";
+
+// src/browser.ts
+import { chromium } from "playwright-core";
+async function launchBrowser() {
+  const attempts = [() => chromium.launch({ channel: "chrome" }), () => chromium.launch({ channel: "msedge" }), () => chromium.launch()];
+  let last;
+  for (const attempt of attempts) {
+    try {
+      return await attempt();
+    } catch (error) {
+      last = error;
+    }
+  }
+  throw Object.assign(new Error("No browser found"), { cause: last, code: "NO_BROWSER" });
+}
+
+// src/capture.ts
+var EXT = { "text/css": ".css", "image/png": ".png", "image/jpeg": ".jpg", "image/webp": ".webp", "image/gif": ".gif", "image/svg+xml": ".svg", "image/avif": ".avif", "font/woff2": ".woff2", "font/woff": ".woff", "font/ttf": ".ttf", "video/mp4": ".mp4", "video/webm": ".webm" };
+async function capture(url, out, options) {
+  const browser = await launchBrowser();
+  try {
+    const context = await browser.newContext({ viewport: { width: options.width, height: options.height } });
+    const page = await context.newPage();
+    await page.goto(url, { waitUntil: "load", timeout: 45e3 });
+    await page.waitForLoadState("networkidle", { timeout: 1e4 }).catch(() => {
+    });
+    await page.waitForTimeout(options.wait ?? 800);
+    await rm(out, { recursive: true, force: true });
+    await mkdir(join(out, "assets"), { recursive: true });
+    if (options.image) {
+      const target = options.selector ? page.locator(options.selector).first() : page;
+      await writeFile(join(out, "assets/capture.png"), await target.screenshot({ type: "png", fullPage: !options.selector }));
+      await writeFile(join(out, "index.html"), `<!doctype html><meta charset="utf-8"><style>html,body{margin:0;background:#fff}img{display:block;max-width:100%;height:auto}</style><img src="assets/capture.png" alt="">`);
+      return { folder: out, assets: 1, failed: [] };
+    }
+    const saved2 = /* @__PURE__ */ new Map(), failed = [];
+    const save = async (assetUrl) => {
+      if (assetUrl.startsWith("data:") || assetUrl.startsWith("blob:")) return null;
+      if (saved2.has(assetUrl)) return saved2.get(assetUrl);
+      try {
+        const response = await context.request.get(assetUrl, { timeout: 2e4 });
+        if (!response.ok()) throw new Error(String(response.status()));
+        const type = (response.headers()["content-type"] || "").split(";")[0].trim();
+        let bytes = await response.body();
+        const hash = createHash("sha256").update(assetUrl).digest("hex").slice(0, 16);
+        const name = `assets/${hash}${EXT[type] || extname(new URL(assetUrl).pathname) || ""}`;
+        saved2.set(assetUrl, name);
+        if (type === "text/css") bytes = Buffer.from(await rewriteCss(bytes.toString("utf8"), assetUrl, "css"));
+        await writeFile(join(out, name), bytes);
+        return name;
+      } catch {
+        failed.push(assetUrl);
+        return null;
+      }
+    };
+    const rewriteCss = async (css, base, from) => {
+      const matches = [...css.matchAll(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g)];
+      let output = css;
+      for (const match of matches) {
+        if (match[2].startsWith("data:") || match[2].startsWith("#")) continue;
+        let absolute;
+        try {
+          absolute = new URL(match[2], base).href;
+        } catch {
+          continue;
+        }
+        const name = await save(absolute);
+        if (!name) continue;
+        output = output.split(match[0]).join(`url("${from === "css" ? name.replace("assets/", "") : name}")`);
+      }
+      return output;
+    };
+    const found = await page.evaluate(() => {
+      const absolute = (value) => {
+        try {
+          return new URL(value, document.baseURI).href;
+        } catch {
+          return value;
+        }
+      };
+      document.querySelectorAll("canvas").forEach((canvas) => {
+        try {
+          const image = document.createElement("img");
+          image.src = canvas.toDataURL();
+          image.style.cssText = canvas.style.cssText;
+          image.width = canvas.clientWidth;
+          image.height = canvas.clientHeight;
+          image.className = canvas.className;
+          canvas.replaceWith(image);
+        } catch {
+        }
+      });
+      document.querySelectorAll("input,textarea").forEach((field) => field.setAttribute("value", field.value));
+      document.querySelectorAll("style").forEach((style) => {
+        if (style.textContent?.trim() || !style.sheet) return;
+        try {
+          style.textContent = [...style.sheet.cssRules].map((rule) => rule.cssText).join("\n");
+        } catch {
+        }
+      });
+      document.querySelectorAll("script,noscript,link[rel=preload],link[rel=modulepreload],link[rel=prefetch],link[rel=dns-prefetch],link[rel=preconnect],link[rel=manifest],base,meta[http-equiv]").forEach((node) => node.remove());
+      const attributes = [];
+      const nodes = [...document.querySelectorAll("[src],[poster],[srcset],link[rel=stylesheet],link[rel~=icon]")];
+      nodes.forEach((node, tag) => {
+        node.setAttribute("data-oc", String(tag));
+        for (const name of ["src", "poster", "href"]) {
+          const value = node.getAttribute(name);
+          if (value) attributes.push({ tag, name, value: absolute(value) });
+        }
+        if (node.tagName === "IMG" && node.currentSrc) {
+          attributes.push({ tag, name: "src", value: node.currentSrc });
+          node.removeAttribute("srcset");
+        } else if (node.hasAttribute("srcset")) {
+          const best = (node.getAttribute("srcset") || "").split(",").pop()?.trim().split(/\s+/)[0];
+          if (best) attributes.push({ tag, name: "src", value: absolute(best) });
+          node.removeAttribute("srcset");
+        }
+      });
+      const styles2 = [...document.querySelectorAll("style")].map((style) => style.textContent || "");
+      const inline2 = [...document.querySelectorAll('[style*="url("]')].map((node) => node.getAttribute("style") || "");
+      return { attributes, styles: styles2, inline: inline2, base: document.baseURI };
+    });
+    const replacements = [];
+    for (const attribute of found.attributes) {
+      const name = await save(attribute.value);
+      if (name) replacements.push({ tag: attribute.tag, name: attribute.name, value: name });
+    }
+    const styles = await Promise.all(found.styles.map((style) => rewriteCss(style, found.base, "html")));
+    const inline = await Promise.all(found.inline.map((style) => rewriteCss(style, found.base, "html")));
+    const html = await page.evaluate(({ replacements: replacements2, styles: styles2, inline: inline2 }) => {
+      for (const { tag, name, value } of replacements2) document.querySelector(`[data-oc="${tag}"]`)?.setAttribute(name, value);
+      document.querySelectorAll("[data-oc]").forEach((node) => node.removeAttribute("data-oc"));
+      document.querySelectorAll("style").forEach((style, index) => {
+        style.textContent = styles2[index];
+      });
+      document.querySelectorAll('[style*="url("]').forEach((node, index) => node.setAttribute("style", inline2[index]));
+      return "<!doctype html>\n" + document.documentElement.outerHTML;
+    }, { replacements, styles, inline });
+    await writeFile(join(out, "index.html"), html);
+    return { folder: out, assets: saved2.size, failed };
+  } finally {
+    await browser.close().catch(() => {
+    });
+  }
+}
+
+// src/daemon.ts
+import { createHash as createHash3, randomBytes } from "node:crypto";
+import { createReadStream as createReadStream2 } from "node:fs";
+import { readFile as readFile5, stat as stat3 } from "node:fs/promises";
+import { createServer as createServer2 } from "node:http";
+import { extname as extname2, join as join8 } from "node:path";
+import { WebSocketServer, WebSocket } from "ws";
+
+// src/credentials.ts
+import { execFile, spawn } from "node:child_process";
+import { mkdir as mkdir2, readFile, rm as rm2, writeFile as writeFile2 } from "node:fs/promises";
+import { join as join3 } from "node:path";
+import { promisify } from "node:util";
+
+// src/paths.ts
+import { homedir } from "node:os";
+import { join as join2 } from "node:path";
+var HOME = process.env.TWOMBLY_HOME || join2(homedir(), ".twombly");
+var PORT = Number(process.env.TWOMBLY_PORT) || 4747;
+var ENDPOINT = (process.env.TWOMBLY_ENDPOINT || "https://twombly.app").replace(/\/+$/, "");
+var DAEMON_ORIGIN = `http://localhost:${PORT}`;
+var NO_OPEN = process.env.TWOMBLY_NO_OPEN === "1";
+
+// src/credentials.ts
+var run = promisify(execFile);
+var SERVICE = "twombly";
+var useKeychain = process.platform === "darwin" && !process.env.TWOMBLY_HOME;
+var file = join3(HOME, "credentials.json");
+async function readCredential() {
+  try {
+    if (useKeychain) {
+      const { stdout } = await run("security", ["find-generic-password", "-s", SERVICE, "-a", ENDPOINT, "-w"]);
+      return JSON.parse(stdout.trim());
+    }
+    return JSON.parse(await readFile(file, "utf8"))[ENDPOINT] || null;
+  } catch {
+    return null;
+  }
+}
+async function writeCredential(credential2) {
+  const value = JSON.stringify(credential2);
+  if (useKeychain) {
+    await new Promise((resolve3, reject) => {
+      const child = spawn("security", ["-i"], { stdio: ["pipe", "ignore", "ignore"] });
+      child.on("error", reject);
+      child.on("exit", (code) => code === 0 ? resolve3() : reject(new Error("Could not save to the Keychain")));
+      const quoted = value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+      child.stdin.end(`add-generic-password -U -s ${SERVICE} -a "${ENDPOINT}" -w "${quoted}"
+`);
+    });
+    return;
+  }
+  await mkdir2(HOME, { recursive: true, mode: 448 });
+  let all = {};
+  try {
+    all = JSON.parse(await readFile(file, "utf8"));
+  } catch {
+  }
+  all[ENDPOINT] = credential2;
+  await writeFile2(file, JSON.stringify(all), { mode: 384 });
+}
+async function clearCredential() {
+  if (useKeychain) {
+    await run("security", ["delete-generic-password", "-s", SERVICE, "-a", ENDPOINT]).catch(() => {
+    });
+    return;
+  }
+  try {
+    const all = JSON.parse(await readFile(file, "utf8"));
+    delete all[ENDPOINT];
+    await writeFile2(file, JSON.stringify(all), { mode: 384 });
+  } catch {
+    await rm2(file, { force: true });
+  }
+}
+
+// src/frameserver.ts
+import { createReadStream } from "node:fs";
+import { readFile as readFile2, stat } from "node:fs/promises";
+import { createServer } from "node:http";
+import { join as join4 } from "node:path";
+var isFile = (path) => stat(path).then((s) => s.isFile() ? s : null, () => null);
+async function startFrameServer(folder, poster) {
+  const server = createServer(async (request, response) => {
+    const url = new URL(request.url || "/", "http://localhost");
+    const headers = {
+      "content-security-policy": frameCsp(["http://localhost:*", "http://127.0.0.1:*"]),
+      "x-content-type-options": "nosniff",
+      "referrer-policy": "no-referrer",
+      "cross-origin-resource-policy": "cross-origin",
+      "cache-control": "no-cache"
+    };
+    const send = (status, body, type = "text/plain; charset=utf-8") => {
+      response.writeHead(status, { ...headers, "content-type": type });
+      response.end(body);
+    };
+    try {
+      if (request.method !== "GET" && request.method !== "HEAD") return send(405, "Method not allowed");
+      if (request.headers["sec-fetch-dest"] === "document") return send(403, FRAME_ONLY_MESSAGE);
+      if (url.pathname === FRAME_BRIDGE_PATH) return send(200, FRAME_BRIDGE_JS, "text/javascript; charset=utf-8");
+      if (url.pathname === FRAME_POSTER_PATH) return poster && await isFile(poster) ? send(200, await readFile2(poster), "image/png") : send(404, "Not found");
+      let found = null, size2 = 0, name = "";
+      for (const candidate of candidatePaths(url.pathname)) {
+        const info = await isFile(join4(folder, candidate));
+        if (info) {
+          found = join4(folder, candidate);
+          size2 = info.size;
+          name = candidate;
+          break;
+        }
+      }
+      if (!found && request.headers["sec-fetch-dest"] === "iframe") {
+        const info = await isFile(join4(folder, "index.html"));
+        if (info) {
+          found = join4(folder, "index.html");
+          size2 = info.size;
+          name = "index.html";
+        }
+      }
+      if (!found) return send(404, "Not found");
+      const type = contentType(name);
+      if (type.startsWith("text/html")) return send(200, injectBridge(await readFile2(found, "utf8")), type);
+      const range = String(request.headers.range || "").match(/^bytes=(\d*)-(\d*)$/);
+      if (range && (range[1] || range[2])) {
+        const start = range[1] ? Number(range[1]) : Math.max(0, size2 - Number(range[2]));
+        const end = range[1] && range[2] ? Math.min(Number(range[2]), size2 - 1) : size2 - 1;
+        if (start > end) {
+          response.writeHead(416, { ...headers, "content-range": `bytes */${size2}` });
+          return response.end();
+        }
+        response.writeHead(206, { ...headers, "content-type": type, "accept-ranges": "bytes", "content-range": `bytes ${start}-${end}/${size2}`, "content-length": end - start + 1 });
+        return createReadStream(found, { start, end }).pipe(response);
+      }
+      response.writeHead(200, { ...headers, "content-type": type, "accept-ranges": "bytes", "content-length": size2 });
+      if (request.method === "HEAD") return response.end();
+      createReadStream(found).pipe(response);
+    } catch {
+      if (!response.headersSent) send(500, "Could not read the file");
+      else response.destroy();
+    }
+  });
+  await new Promise((resolve3) => server.listen(0, "127.0.0.1", resolve3));
+  const { port } = server.address();
+  return { origin: `http://localhost:${port}`, close: () => {
+    server.closeAllConnections();
+    server.close();
+  } };
+}
+
+// src/interface.ts
+import { createPublicKey, verify } from "node:crypto";
+import { mkdir as mkdir3, readdir, rename, rm as rm3, writeFile as writeFile3 } from "node:fs/promises";
+import { dirname, join as join5 } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// src/release.ts
+var INTERFACE_VERSION = 1;
+var INTERFACE_PUBLIC_KEY = "MCowBQYDK2VwAyEA2/JCcP+q2Ht/fjTqlMvBzwrUS07UAXNp1z6bqY0hG9U=";
+
+// src/interface.ts
+var OVERRIDE = process.env.TWOMBLY_UI;
+var UPDATES = !OVERRIDE && process.env.TWOMBLY_NO_INTERFACE_UPDATES !== "1";
+var BUNDLED = join5(dirname(fileURLToPath(import.meta.url)), "ui");
+var STORE = join5(HOME, "interface", String(INTERFACE_VERSION));
+var PUBLIC_KEY = createPublicKey({ key: Buffer.from(process.env.TWOMBLY_INTERFACE_KEY || INTERFACE_PUBLIC_KEY, "base64"), format: "der", type: "spki" });
+var KEEP = 3;
+var CHECK_MS = 36e5;
+var CHECK_ON_OPEN_MS = 5 * 6e4;
+var WAIT_ON_OPEN_MS = 600;
+var DOWNLOAD_MS = 3e4;
+var MAX_CHARS = 64 * 1024 * 1024;
+var SAFE_PATH = /^[\w.@-]+(\/[\w.@-]+)*$/;
+var saved = [];
+var etag = "";
+var checking = null;
+var checkedAt = 0;
+function interfaceFolders() {
+  if (OVERRIDE) return [OVERRIDE];
+  const folder = (released) => join5(STORE, String(released));
+  return [...saved.filter((released) => released > 1793896544071).map(folder), BUNDLED, ...saved.filter((released) => released <= 1793896544071).map(folder)];
+}
+function unpack(body) {
+  const { payload, signature } = JSON.parse(body);
+  if (typeof payload !== "string" || typeof signature !== "string") return null;
+  if (!verify(null, Buffer.from(payload), PUBLIC_KEY, Buffer.from(signature, "base64"))) return null;
+  const release = JSON.parse(payload);
+  if (release.interface !== INTERFACE_VERSION || !Number.isSafeInteger(release.released) || !release.files?.["index.html"]) return null;
+  const safe = Object.entries(release.files).every(([path, bytes]) => SAFE_PATH.test(path) && !path.split("/").includes("..") && typeof bytes === "string");
+  return safe ? release : null;
+}
+async function install(released, files) {
+  const temporary = join5(STORE, `.${released}-${process.pid}`);
+  try {
+    for (const [path, bytes] of Object.entries(files)) {
+      await mkdir3(dirname(join5(temporary, path)), { recursive: true });
+      await writeFile3(join5(temporary, path), Buffer.from(bytes, "base64"));
+    }
+    await rename(temporary, join5(STORE, String(released)));
+  } catch (error) {
+    await rm3(temporary, { recursive: true, force: true });
+    throw error;
+  }
+  saved = [released, ...saved].sort((a, b) => b - a);
+  for (const old of saved.splice(KEEP)) await rm3(join5(STORE, String(old)), { recursive: true, force: true });
+}
+async function check() {
+  const response = await fetch(`${ENDPOINT}/interface/${INTERFACE_VERSION}`, { headers: etag ? { "if-none-match": etag } : {}, signal: AbortSignal.timeout(DOWNLOAD_MS) });
+  if (response.status !== 200) return;
+  const body = await response.text();
+  if (body.length > MAX_CHARS) return;
+  const release = unpack(body);
+  if (!release) return;
+  etag = response.headers.get("etag") || "";
+  if (release.released > Math.max(saved[0] ?? 0, 1793896544071)) await install(release.released, release.files);
+}
+function startCheck() {
+  if (checking) return;
+  checkedAt = Date.now();
+  checking = check().catch(() => {
+  }).finally(() => {
+    checking = null;
+  });
+}
+async function freshInterface() {
+  if (!UPDATES) return;
+  if (Date.now() - checkedAt > CHECK_ON_OPEN_MS) startCheck();
+  if (checking) await Promise.race([checking, new Promise((done) => setTimeout(done, WAIT_ON_OPEN_MS))]);
+}
+async function startInterfaceUpdates() {
+  if (!UPDATES) return;
+  await mkdir3(STORE, { recursive: true });
+  const names = await readdir(STORE);
+  for (const name of names) if (name.startsWith(".")) await rm3(join5(STORE, name), { recursive: true, force: true });
+  saved = names.filter((name) => /^\d+$/.test(name)).map(Number).sort((a, b) => b - a);
+  startCheck();
+  setInterval(startCheck, CHECK_MS).unref();
+}
+
+// src/project.ts
+import { createHash as createHash2 } from "node:crypto";
+import { cp, mkdir as mkdir4, readdir as readdir2, readFile as readFile3, rename as rename2, rm as rm4, stat as stat2, writeFile as writeFile4 } from "node:fs/promises";
+import { basename, dirname as dirname2, join as join6, relative, resolve, sep } from "node:path";
+var DIR = ".twombly";
+var exists = (path) => stat2(path).then(() => true, () => false);
+async function findProject(from) {
+  let dir = resolve(from);
+  while (true) {
+    if (await exists(join6(dir, DIR, "canvas.json"))) return dir;
+    const up = dirname2(dir);
+    if (up === dir) return null;
+    dir = up;
+  }
+}
+var canvasFile = (project) => join6(project, DIR, "canvas.json");
+var frameDir = (project, id) => join6(project, DIR, "frames", id);
+var posterFile = (project, id) => join6(project, DIR, "posters", `${id}.png`);
+async function readCanvas(project) {
+  return JSON.parse(await readFile3(canvasFile(project), "utf8"));
+}
+async function writeCanvas(project, canvas) {
+  const path = canvasFile(project), temp = `${path}.${process.pid}.tmp`;
+  await writeFile4(temp, JSON.stringify(canvas, null, 2) + "\n");
+  await rename2(temp, path);
+}
+async function ensureProjectDir(project) {
+  await mkdir4(join6(project, DIR, "frames"), { recursive: true });
+  await mkdir4(join6(project, DIR, "posters"), { recursive: true });
+  await writeFile4(join6(project, DIR, ".gitignore"), "*\n");
+}
+function defaultName(project) {
+  return basename(project).replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) || "Untitled";
+}
+async function hashFolder(folder) {
+  const out = [];
+  const walk = async (dir) => {
+    for (const entry of await readdir2(dir, { withFileTypes: true })) {
+      const absolute = join6(dir, entry.name);
+      if (entry.isDirectory()) await walk(absolute);
+      else if (entry.isFile()) {
+        if (entry.name === ".DS_Store") continue;
+        const bytes = await readFile3(absolute);
+        out.push({ absolute, path: relative(folder, absolute).split(sep).join("/"), size: bytes.length, hash: createHash2("sha256").update(bytes).digest("hex") });
+      }
+    }
+  };
+  await walk(folder);
+  return out.sort((a, b) => a.path.localeCompare(b.path));
+}
+async function folderContent(folder) {
+  const files = await hashFolder(folder);
+  return { files, content: await contentHash(files) };
+}
+async function replaceFolder(source, target) {
+  const temp = `${target}.${process.pid}.tmp`;
+  await rm4(temp, { recursive: true, force: true });
+  await mkdir4(dirname2(target), { recursive: true });
+  await cp(source, temp, { recursive: true, verbatimSymlinks: false, filter: (path) => basename(path) !== ".DS_Store" });
+  await rm4(target, { recursive: true, force: true });
+  await rename2(temp, target);
+}
+var registryFile = join6(HOME, "registry.json");
+async function readRegistry() {
+  try {
+    return JSON.parse(await readFile3(registryFile, "utf8"));
+  } catch {
+    return {};
+  }
+}
+async function register(id, project) {
+  const registry = await readRegistry();
+  if (registry[id] === project) return;
+  registry[id] = project;
+  await mkdir4(HOME, { recursive: true });
+  await writeFile4(registryFile, JSON.stringify(registry, null, 2));
+}
+
+// src/settings.ts
+import { mkdir as mkdir5, readFile as readFile4, rename as rename3, writeFile as writeFile5 } from "node:fs/promises";
+import { join as join7 } from "node:path";
+var FILE = join7(HOME, "settings.json");
+async function readSettings() {
+  const saved2 = await readFile4(FILE, "utf8").then(JSON.parse).catch(() => null);
+  return { invertScroll: saved2?.invertScroll === true };
+}
+async function writeSettings(settings2) {
+  await mkdir5(HOME, { recursive: true });
+  const temporary = `${FILE}.${process.pid}`;
+  await writeFile5(temporary, JSON.stringify(settings2));
+  await rename3(temporary, FILE);
+}
+
+// src/daemon.ts
+var IDLE_MS = 6 * 36e5;
+var LOGIN_MS = 10 * 6e4;
+var ID_ALPHABET = "abcdefghijkmnpqrstuvwxyz23456789";
+var randomId = (length) => [...randomBytes(length)].map((b) => ID_ALPHABET[b % ID_ALPHABET.length]).join("");
+var Failure = class extends Error {
+  status;
+  extra;
+  constructor(status, message, extra) {
+    super(message);
+    this.status = status;
+    this.extra = extra;
+  }
+};
+var settings = { invertScroll: false };
+var credential = null;
+var pendingLogin = null;
+function loginUrl() {
+  if (!pendingLogin || Date.now() - pendingLogin.at > LOGIN_MS) {
+    pendingLogin = { state: randomBytes(24).toString("hex"), verifier: randomBytes(32).toString("base64url"), at: Date.now() };
+  }
+  const challenge = createHash3("sha256").update(pendingLogin.verifier).digest("base64url");
+  return `${ENDPOINT}/auth/machine/start?` + new URLSearchParams({ port: String(PORT), state: pendingLogin.state, challenge });
+}
+function setCredential(next) {
+  credential = next;
+  for (const canvas of canvases.values()) canvas.event({ t: "auth", me: next?.me || null });
+}
+async function edge(path, init = {}) {
+  if (!credential) throw new Failure(401, "Sign in first");
+  const response = await fetch(ENDPOINT + path, {
+    ...init,
+    headers: { authorization: `Bearer ${credential.token}`, ...init.body && !(init.body instanceof Uint8Array) ? { "content-type": "application/json" } : {}, ...init.headers }
+  });
+  const data = await response.json().catch(() => ({}));
+  if (response.status === 401) {
+    await clearCredential();
+    setCredential(null);
+    throw new Failure(401, "Sign in first");
+  }
+  if (!response.ok) throw new Failure(response.status, data.error || `The server answered ${response.status}`, data.problems ? { problems: data.problems } : void 0);
+  return data;
+}
+var STROKE_UPLOAD = 40;
+var Canvas = class {
+  id;
+  project;
+  data;
+  sockets = /* @__PURE__ */ new Set();
+  events = /* @__PURE__ */ new Set();
+  servers = /* @__PURE__ */ new Map();
+  queue = Promise.resolve();
+  saveTimer = null;
+  workingUntil = 0;
+  constructor(project, data) {
+    this.project = project;
+    this.data = data;
+    this.id = data.id;
+  }
+  /** One change at a time, so files and uploads never interleave. */
+  run(work) {
+    const next = this.queue.then(work, work);
+    this.queue = next.catch(() => {
+    });
+    return next;
+  }
+  save() {
+    if (this.saveTimer) clearTimeout(this.saveTimer);
+    this.saveTimer = setTimeout(() => {
+      writeCanvas(this.project, this.data).catch(() => {
+      });
+    }, 150);
+  }
+  async saveNow() {
+    if (this.saveTimer) clearTimeout(this.saveTimer);
+    await writeCanvas(this.project, this.data);
+  }
+  serverFor(frame) {
+    const key = `${frame.id}:${frame.content}`;
+    let server = this.servers.get(key);
+    if (!server) {
+      for (const [old, running] of this.servers) if (old.startsWith(`${frame.id}:`)) {
+        running.then((s) => s.close());
+        this.servers.delete(old);
+      }
+      server = startFrameServer(frameDir(this.project, frame.id), frame.hasPoster ? posterFile(this.project, frame.id) : null);
+      this.servers.set(key, server);
+    }
+    return server;
+  }
+  async toFrame(frame) {
+    const { origin } = await this.serverFor(frame);
+    return { ...frame, url: `${origin}/${frame.entry}`, posterUrl: frame.hasPoster ? origin + FRAME_POSTER_PATH : null };
+  }
+  sendTo(sockets, message, except) {
+    const text2 = JSON.stringify(message);
+    for (const socket of sockets) if (socket !== except && socket.readyState === WebSocket.OPEN) socket.send(text2);
+  }
+  broadcast(message) {
+    this.sendTo(this.sockets, message);
+  }
+  event(message) {
+    this.sendTo(this.events, message);
+  }
+  get watchers() {
+    return this.sockets.size + this.events.size;
+  }
+  workingLeft() {
+    return Math.max(0, this.workingUntil - Date.now());
+  }
+  /** An agent is at work for at least this long; zero means it's finished. Everyone looking at the canvas sees it. */
+  working(ms) {
+    this.workingUntil = ms > 0 ? Math.max(this.workingUntil, Date.now() + ms) : 0;
+    const left = this.workingLeft();
+    this.broadcast({ t: "working", ms: left });
+    if (this.data.remote) edge(`/api/canvases/${this.data.remote.id}/working`, { method: "POST", body: JSON.stringify({ ms: left }) }).catch(() => {
+    });
+    return left;
+  }
+  peer(selfId) {
+    const me = credential?.me;
+    return { id: selfId, userId: me?.id || "local", name: me?.name || "You", picture: me?.picture || null, color: "#0D99FF", owner: true, guest: false, huddle: null };
+  }
+  async attach(socket) {
+    this.sockets.add(socket);
+    touch();
+    const self = randomId(10);
+    socket.on("close", () => this.sockets.delete(socket));
+    socket.on("message", (raw) => {
+      let message;
+      try {
+        message = JSON.parse(String(raw));
+      } catch {
+        return;
+      }
+      this.handle(socket, message).catch(() => {
+      });
+    });
+    const frames = await Promise.all(this.data.frames.map((frame) => this.toFrame(frame)));
+    if (socket.readyState !== WebSocket.OPEN) return;
+    socket.send(JSON.stringify({
+      t: "hello",
+      self,
+      role: "owner",
+      doc: { id: this.id, name: this.data.name, frames, strokes: this.data.strokes ?? [] },
+      threads: [],
+      peers: [this.peer(self)],
+      capabilities: { comments: false, huddle: false },
+      working: this.workingLeft()
+    }));
+  }
+  attachEvents(socket) {
+    this.events.add(socket);
+    socket.on("close", () => this.events.delete(socket));
+  }
+  async handle(socket, m) {
+    if (m.t === "ping") return socket.send('{"t":"pong"}');
+    if (this.data.remote) return;
+    if (m.t === "frame.patch") return this.applyPatch(m.id, m.patch);
+    if (m.t === "frame.remove") {
+      const before = this.data.frames.length;
+      this.data.frames = this.data.frames.filter((frame) => frame.id !== m.id);
+      if (this.data.frames.length !== before) {
+        this.broadcast({ t: "frame.remove", id: m.id });
+        this.save();
+      }
+      return;
+    }
+    if (m.t === "frame.restore") {
+      const f = m.frame;
+      if (this.data.frames.some((frame) => frame.id === f.id)) return;
+      const restored = { id: f.id, title: f.title, x: f.x, y: f.y, w: f.w, h: f.h, z: f.z, entry: f.entry, content: f.content, level: f.level, hasPoster: !!f.posterUrl, updatedAt: Date.now() };
+      this.data.frames.push(restored);
+      this.broadcast({ t: "frame.upsert", frame: await this.toFrame(restored) });
+      this.save();
+      return;
+    }
+    if (m.t === "stroke.add") {
+      const strokes = this.data.strokes ??= [];
+      const clean = cleanStroke(m.stroke);
+      if (!clean || strokes.length >= LIMITS.canvasStrokes && !strokes.some((item) => item.id === clean.id)) return this.broadcast({ t: "stroke.remove", id: String(m.stroke?.id) });
+      const stroke = { ...clean, authorId: "local", createdAt: Date.now() };
+      this.data.strokes = [...strokes.filter((item) => item.id !== stroke.id), stroke];
+      this.broadcast({ t: "strokes", strokes: [stroke] });
+      this.save();
+      return;
+    }
+    if (m.t === "stroke.remove") {
+      this.data.strokes = (this.data.strokes ?? []).filter((item) => item.id !== m.id);
+      this.broadcast({ t: "stroke.remove", id: m.id });
+      this.save();
+      return;
+    }
+    if (m.t === "canvas.rename") {
+      const name = String(m.name || "").trim().slice(0, LIMITS.nameChars);
+      if (name) {
+        this.data.name = name;
+        this.broadcast({ t: "canvas", name });
+        this.save();
+      }
+    }
+  }
+  async applyPatch(id, patch) {
+    const frame = this.data.frames.find((item) => item.id === id);
+    if (!frame) return null;
+    if (typeof patch.title === "string" && patch.title.trim()) frame.title = patch.title.trim().slice(0, LIMITS.titleChars);
+    for (const key of ["x", "y", "z", "w", "h"]) if (typeof patch[key] === "number" && Number.isFinite(patch[key])) frame[key] = patch[key];
+    frame.w = Math.max(40, Math.min(8e3, frame.w));
+    frame.h = Math.max(40, Math.min(8e3, frame.h));
+    frame.updatedAt = Date.now();
+    this.broadcast({ t: "frame.upsert", frame: await this.toFrame(frame) });
+    this.save();
+    return frame;
+  }
+  /** Once shared, the room is the truth. Bring the local list up to date with it. */
+  async pull() {
+    if (!this.data.remote) return;
+    let doc;
+    try {
+      ({ doc } = await edge(`/api/canvases/${this.data.remote.id}`));
+    } catch (error) {
+      if (error instanceof Failure && (error.status === 404 || error.status === 403)) {
+        this.data.remote = null;
+        await this.saveNow();
+        this.event({ t: "shared", url: null });
+        return;
+      }
+      throw error;
+    }
+    this.data.name = doc.name;
+    if (doc.strokes) this.data.strokes = doc.strokes;
+    const known = new Map(this.data.frames.map((frame) => [frame.id, frame]));
+    this.data.frames = doc.frames.map((frame) => ({
+      id: frame.id,
+      title: frame.title,
+      x: frame.x,
+      y: frame.y,
+      w: frame.w,
+      h: frame.h,
+      z: frame.z,
+      entry: frame.entry,
+      content: frame.content,
+      level: frame.level,
+      hasPoster: known.get(frame.id)?.hasPoster ?? !!frame.posterUrl,
+      updatedAt: frame.updatedAt
+    }));
+    await this.saveNow();
+  }
+  /** Sends a frame's files up, skipping what's already there, then places the frame in the room. */
+  async uploadFrame(remoteId, frame, onFile) {
+    const { files } = await folderContent(frameDir(this.project, frame.id));
+    let poster = null, posterBytes = null;
+    if (frame.hasPoster) {
+      posterBytes = await readFile5(posterFile(this.project, frame.id)).catch(() => null);
+      if (posterBytes) poster = createHash3("sha256").update(posterBytes).digest("hex");
+    }
+    const manifest = files.map(({ path, hash, size: size2 }) => ({ path, hash, size: size2 }));
+    const { missing } = await edge(`/api/canvases/${remoteId}/uploads`, { method: "POST", body: JSON.stringify({ files: manifest, poster }) });
+    const wanted = new Set(missing);
+    const queue = files.filter((file2, index) => wanted.has(file2.hash) && files.findIndex((other) => other.hash === file2.hash) === index);
+    const put = async (hash, bytes) => {
+      await edge(`/api/canvases/${remoteId}/blobs/${hash}`, { method: "PUT", body: bytes });
+    };
+    let next = 0;
+    await Promise.all(Array.from({ length: 6 }, async () => {
+      while (next < queue.length) {
+        const file2 = queue[next++];
+        await put(file2.hash, await readFile5(file2.absolute));
+      }
+    }));
+    if (poster && posterBytes && wanted.has(poster)) await put(poster, posterBytes);
+    onFile?.();
+    const { id, title, x, y, w, h, z, entry, level: level2 } = frame;
+    const result = await edge(`/api/canvases/${remoteId}/frames`, { method: "POST", body: JSON.stringify({ id, title, x, y, w, h, z, entry, level: level2, files: manifest, poster }) });
+    return result.frame;
+  }
+  async share() {
+    if (this.data.remote) return this.data.remote.url;
+    if (!credential) throw new Failure(401, "Sign in first");
+    const created = await edge("/api/canvases", { method: "POST", body: JSON.stringify({ name: this.data.name }) });
+    const total = this.data.frames.length;
+    let done = 0;
+    this.event({ t: "share-progress", done, total });
+    try {
+      for (const frame of this.data.frames) {
+        await this.uploadFrame(created.id, frame, () => {
+          this.event({ t: "share-progress", done: ++done, total });
+        });
+      }
+      const strokes = this.data.strokes ?? [];
+      for (let i = 0; i < strokes.length; i += STROKE_UPLOAD) {
+        await edge(`/api/canvases/${created.id}/strokes`, { method: "POST", body: JSON.stringify({ strokes: strokes.slice(i, i + STROKE_UPLOAD) }) });
+      }
+    } catch (error) {
+      await edge(`/api/canvases/${created.id}`, { method: "DELETE" }).catch(() => {
+      });
+      throw error;
+    }
+    this.data.remote = { id: created.id, url: created.url };
+    await this.saveNow();
+    this.event({ t: "shared", url: created.url });
+    return created.url;
+  }
+  async unshare() {
+    if (!this.data.remote) return;
+    await this.pull().catch(() => {
+    });
+    await edge(`/api/canvases/${this.data.remote.id}`, { method: "DELETE" }).catch((error) => {
+      if (error.status !== 404) throw error;
+    });
+    this.data.remote = null;
+    await this.saveNow();
+    this.event({ t: "shared", url: null });
+  }
+};
+var canvases = /* @__PURE__ */ new Map();
+async function canvasById(id) {
+  const open = canvases.get(id);
+  if (open) return open;
+  const project = (await readRegistry())[id];
+  if (!project) throw new Failure(404, "That canvas is not on this machine");
+  const data = await readCanvas(project).catch(() => null);
+  if (!data || data.id !== id) throw new Failure(404, "That canvas is not on this machine");
+  const canvas = new Canvas(project, data);
+  canvases.set(id, canvas);
+  return canvas;
+}
+async function canvasForProject(project) {
+  const found = await findProject(project);
+  if (!found) throw new Failure(404, "No canvas here yet. Run: twombly init");
+  const { id } = await readCanvas(found);
+  await register(id, found);
+  return canvasById(id);
+}
+function openBrowser(url) {
+  if (NO_OPEN) return;
+  import("node:child_process").then(({ spawn: spawn3 }) => {
+    const [command2, args] = process.platform === "darwin" ? ["open", [url]] : process.platform === "win32" ? ["cmd", ["/c", "start", "", url]] : ["xdg-open", [url]];
+    spawn3(command2, args, { stdio: "ignore", detached: true }).unref();
+  }).catch(() => {
+  });
+}
+var summary = (canvas) => ({
+  id: canvas.id,
+  name: canvas.data.name,
+  local: `${DAEMON_ORIGIN}/${canvas.id}`,
+  link: canvas.data.remote?.url || null,
+  frames: canvas.data.frames.map(({ id, title, x, y, w, h, entry, level: level2 }) => ({ id, title, x, y, w, h, entry, level: level2 }))
+});
+function findFrame(canvas, ref) {
+  const byId = canvas.data.frames.find((frame) => frame.id === ref);
+  if (byId) return byId;
+  const byTitle = canvas.data.frames.filter((frame) => frame.title === ref);
+  if (byTitle.length === 1) return byTitle[0];
+  throw new Failure(404, byTitle.length ? `More than one frame is titled "${ref}". Use its id.` : `No frame "${ref}". Run: twombly list`);
+}
+async function command(name, input) {
+  touch();
+  if (name === "stop") {
+    setTimeout(() => process.exit(0), 50);
+    return { stopped: true };
+  }
+  if (name === "status") {
+    let canvas2 = null;
+    if (input.project) canvas2 = await canvasForProject(input.project).catch(() => null);
+    return { signedIn: !!credential, me: credential?.me || null, endpoint: ENDPOINT, canvas: canvas2 && summary(canvas2) };
+  }
+  if (name === "login") {
+    if (credential) return { signedIn: true, me: credential.me };
+    const url = loginUrl();
+    openBrowser(url);
+    return { signedIn: false, url };
+  }
+  if (name === "logout") {
+    if (credential) await fetch(`${ENDPOINT}/auth/signout`, { method: "POST", headers: { authorization: `Bearer ${credential.token}` } }).catch(() => {
+    });
+    await clearCredential();
+    setCredential(null);
+    return { signedIn: false };
+  }
+  if (name === "init") {
+    const project = input.project;
+    let found = await findProject(project);
+    if (!found) {
+      await ensureProjectDir(project);
+      await writeCanvas(project, { version: 1, id: randomId(12), name: String(input.name || "Untitled").slice(0, LIMITS.nameChars), frames: [], remote: null });
+      found = project;
+    }
+    const canvas2 = await canvasForProject(found);
+    if (input.rename && input.name && input.name !== canvas2.data.name) await rename4(canvas2, input.name);
+    if (input.open !== false && !canvas2.watchers) openBrowser(`${DAEMON_ORIGIN}/${canvas2.id}`);
+    canvas2.working(WORKING_MS);
+    return summary(canvas2);
+  }
+  const canvas = await canvasForProject(input.project);
+  if (name === "working") return { working: canvas.working(Number(input.ms) || 0) > 0 };
+  return canvas.run(async () => {
+    if (canvas.data.remote) await canvas.pull();
+    switch (name) {
+      case "list":
+        return summary(canvas);
+      case "open":
+        openBrowser(`${DAEMON_ORIGIN}/${canvas.id}`);
+        return summary(canvas);
+      case "preview": {
+        const { id, title, w, h } = findFrame(canvas, input.frame);
+        return { frame: { id, title, w, h }, url: `${DAEMON_ORIGIN}/preview/${canvas.id}/${id}` };
+      }
+      case "place":
+        return place(canvas, input);
+      case "revise":
+        return revise(canvas, input);
+      case "remove": {
+        const frame = findFrame(canvas, input.frame);
+        if (canvas.data.remote) await edge(`/api/canvases/${canvas.data.remote.id}/frames/${frame.id}`, { method: "DELETE" });
+        canvas.data.frames = canvas.data.frames.filter((item) => item.id !== frame.id);
+        canvas.broadcast({ t: "frame.remove", id: frame.id });
+        await canvas.saveNow();
+        return summary(canvas);
+      }
+      case "patch": {
+        const frame = findFrame(canvas, input.frame);
+        await patchFrame(canvas, frame.id, input.patch);
+        return summary(canvas);
+      }
+      case "arrange": {
+        const frames = [...canvas.data.frames].sort((a, b) => a.y - b.y || a.x - b.x);
+        const columns = Math.max(1, Number(input.columns) || Math.ceil(Math.sqrt(frames.length)));
+        let y = 0;
+        for (let row = 0; row < Math.ceil(frames.length / columns); row++) {
+          const cells = frames.slice(row * columns, (row + 1) * columns);
+          let x = 0;
+          for (const frame of cells) {
+            await patchFrame(canvas, frame.id, { x, y });
+            x += frame.w + 80;
+          }
+          y += Math.max(...cells.map((frame) => frame.h)) + 120;
+        }
+        return summary(canvas);
+      }
+      case "rename":
+        await rename4(canvas, input.name);
+        return summary(canvas);
+      case "share": {
+        if (!credential) throw new Failure(401, "The person needs to sign in first. Ask them to click Share on the canvas.");
+        const url = await canvas.share();
+        return { ...summary(canvas), link: url };
+      }
+      case "unshare":
+        await canvas.unshare();
+        return summary(canvas);
+      default:
+        throw new Failure(400, `Unknown command ${name}`);
+    }
+  });
+}
+async function rename4(canvas, name) {
+  const clean = String(name || "").trim().slice(0, LIMITS.nameChars);
+  if (!clean) throw new Failure(400, "Expected a name");
+  if (canvas.data.remote) await edge(`/api/canvases/${canvas.data.remote.id}`, { method: "PATCH", body: JSON.stringify({ name: clean }) });
+  canvas.data.name = clean;
+  canvas.broadcast({ t: "canvas", name: clean });
+  await canvas.saveNow();
+}
+async function patchFrame(canvas, id, patch) {
+  if (canvas.data.remote) await edge(`/api/canvases/${canvas.data.remote.id}/frames/${id}`, { method: "PATCH", body: JSON.stringify(patch) });
+  await canvas.applyPatch(id, patch);
+  await canvas.saveNow();
+}
+async function place(canvas, input) {
+  const position = nextPosition(canvas.data.frames, !!input.newRow);
+  const frame = {
+    id: input.id,
+    title: String(input.title).slice(0, LIMITS.titleChars),
+    w: input.w,
+    h: input.h,
+    x: typeof input.x === "number" ? input.x : position.x,
+    y: typeof input.y === "number" ? input.y : position.y,
+    z: canvas.data.frames.length,
+    entry: input.entry,
+    content: input.content,
+    level: input.level,
+    hasPoster: !!input.hasPoster,
+    updatedAt: Date.now()
+  };
+  if (canvas.data.remote) await canvas.uploadFrame(canvas.data.remote.id, frame);
+  canvas.data.frames.push(frame);
+  await canvas.saveNow();
+  canvas.broadcast({ t: "frame.upsert", frame: await canvas.toFrame(frame) });
+  canvas.working(WORKING_TAIL_MS);
+  return { frame: { id: frame.id, title: frame.title, x: frame.x, y: frame.y, w: frame.w, h: frame.h }, canvas: { local: `${DAEMON_ORIGIN}/${canvas.id}`, link: canvas.data.remote?.url || null, frames: canvas.data.frames.length } };
+}
+async function revise(canvas, input) {
+  const frame = canvas.data.frames.find((item) => item.id === input.id);
+  if (!frame) throw new Failure(404, "That frame is gone");
+  const next = { ...frame, updatedAt: Date.now() };
+  if (input.title) next.title = String(input.title).slice(0, LIMITS.titleChars);
+  for (const key of ["w", "h"]) if (typeof input[key] === "number") next[key] = input[key];
+  if (input.entry) next.entry = input.entry;
+  if (input.level) next.level = input.level;
+  if (input.content) next.content = input.content;
+  if (typeof input.hasPoster === "boolean") next.hasPoster = input.hasPoster;
+  if (canvas.data.remote) await canvas.uploadFrame(canvas.data.remote.id, next);
+  Object.assign(frame, next);
+  await canvas.saveNow();
+  canvas.broadcast({ t: "frame.upsert", frame: await canvas.toFrame(frame) });
+  canvas.working(WORKING_TAIL_MS);
+  return { frame: { id: frame.id, title: frame.title, x: frame.x, y: frame.y, w: frame.w, h: frame.h }, canvas: { local: `${DAEMON_ORIGIN}/${canvas.id}`, link: canvas.data.remote?.url || null, frames: canvas.data.frames.length } };
+}
+var JSON_HEADERS = { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" };
+var reply = (response, status, value) => {
+  response.writeHead(status, JSON_HEADERS);
+  response.end(JSON.stringify(value));
+};
+var readBody = (request) => new Promise((resolve3, reject) => {
+  let body = "";
+  request.on("data", (chunk) => {
+    body += chunk;
+    if (body.length > 4e6) {
+      reject(new Failure(413, "Too large"));
+      request.destroy();
+    }
+  });
+  request.on("end", () => {
+    try {
+      resolve3(body ? JSON.parse(body) : {});
+    } catch {
+      reject(new Failure(400, "Expected JSON"));
+    }
+  });
+  request.on("error", reject);
+});
+var ALLOWED_HOSTS = /* @__PURE__ */ new Set([`localhost:${PORT}`, `127.0.0.1:${PORT}`]);
+var ALLOWED_ORIGINS = /* @__PURE__ */ new Set([`http://localhost:${PORT}`, `http://127.0.0.1:${PORT}`]);
+function trusted(request) {
+  if (!ALLOWED_HOSTS.has(String(request.headers.host))) return false;
+  const origin = request.headers.origin;
+  return !origin || ALLOWED_ORIGINS.has(origin);
+}
+var APP_CSP = [
+  "default-src 'self'",
+  "script-src 'self'",
+  "style-src 'self' 'unsafe-inline'",
+  "img-src 'self' data: http: https:",
+  "font-src 'self'",
+  "connect-src 'self' ws: wss:",
+  "frame-src http: https:",
+  "media-src 'self' blob:",
+  "object-src 'none'",
+  "base-uri 'self'",
+  "frame-ancestors 'none'"
+].join("; ");
+async function serveUi(response, pathname) {
+  const clean = pathname.replace(/^\/+/, "");
+  let file2 = null;
+  if (clean && !clean.includes("..")) {
+    for (const folder of interfaceFolders()) {
+      const candidate = join8(folder, clean);
+      if ((await stat3(candidate).catch(() => null))?.isFile()) {
+        file2 = candidate;
+        break;
+      }
+    }
+  }
+  if (!file2) {
+    await freshInterface();
+    file2 = join8(interfaceFolders()[0], "index.html");
+  }
+  const type = contentType(file2);
+  const headers = { "content-type": type, "x-content-type-options": "nosniff", "cache-control": extname2(file2) === ".html" ? "no-cache" : "public, max-age=3600" };
+  if (type.startsWith("text/html")) {
+    headers["content-security-policy"] = APP_CSP;
+    headers["permissions-policy"] = "microphone=(self)";
+  }
+  response.writeHead(200, headers);
+  createReadStream2(file2).pipe(response);
+}
+var escapeHtml = (text2) => text2.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
+async function servePreview(response, canvasId, frameId) {
+  const canvas = await canvasById(canvasId);
+  const frame = await canvas.toFrame(findFrame(canvas, frameId));
+  response.writeHead(200, {
+    "content-type": "text/html; charset=utf-8",
+    "cache-control": "no-store",
+    "referrer-policy": "no-referrer",
+    "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; frame-src http://localhost:*; base-uri 'none'; frame-ancestors 'none'"
+  });
+  const title = escapeHtml(frame.title);
+  response.end(`<!doctype html><meta charset="utf-8"><title>${title}</title><style>html,body{margin:0;background:#fff}iframe{display:block;border:0;width:${frame.w}px;height:${frame.h}px}</style><iframe src="${escapeHtml(frame.url)}" title="${title}" sandbox="${FRAME_SANDBOX}" referrerpolicy="no-referrer" allow=""></iframe>`);
+}
+async function route(request, response) {
+  const url = new URL(request.url || "/", DAEMON_ORIGIN);
+  const path = url.pathname, method = request.method || "GET";
+  if (path === "/health") return reply(response, 200, { ok: true, build: "0.2.0+1793896544071", pid: process.pid });
+  if (path.startsWith("/cli/") && method === "POST") return reply(response, 200, await command(path.slice(5), await readBody(request)));
+  if (path === "/auth/callback" && method === "GET") {
+    const code = url.searchParams.get("code"), state = url.searchParams.get("state");
+    const page = (text2, status = 200) => {
+      response.writeHead(status, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store", "referrer-policy": "no-referrer", "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline'" });
+      response.end(`<!doctype html><meta charset="utf-8"><title>Twombly</title><style>body{font:13px/1.5 -apple-system,system-ui,sans-serif;display:grid;place-items:center;height:100vh;margin:0}@media(prefers-color-scheme:dark){body{background:#1e1e1e;color:#fff}}</style><p>${text2}</p><script>setTimeout(()=>window.close(),600)</script>`);
+    };
+    if (!code || !pendingLogin || state !== pendingLogin.state) return page("That sign-in expired. Try again.", 400);
+    const exchange = await fetch(`${ENDPOINT}/auth/machine/exchange`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ code, verifier: pendingLogin.verifier }) });
+    const data = await exchange.json().catch(() => ({}));
+    pendingLogin = null;
+    if (!exchange.ok || !data.token || !data.me) return page("That sign-in expired. Try again.", 400);
+    await writeCredential({ token: data.token, me: data.me });
+    setCredential({ token: data.token, me: data.me });
+    return page("Signed in. You can close this tab.");
+  }
+  if (path === "/api/bootstrap" && method === "GET") {
+    const id = url.searchParams.get("canvas") || "";
+    const canvas = id ? await canvasById(id).catch(() => null) : null;
+    if (canvas?.data.remote) await canvas.pull().catch(() => {
+    });
+    const body = {
+      mode: "local",
+      me: credential?.me || null,
+      canvas: canvas && { id: canvas.id, name: canvas.data.name, url: canvas.data.remote?.url || null, owner: true },
+      settings
+    };
+    return reply(response, 200, body);
+  }
+  if (path === "/api/login" && method === "POST") return reply(response, 200, await command("login", {}));
+  if (path === "/api/settings" && method === "POST") {
+    const { invertScroll } = await readBody(request);
+    if (typeof invertScroll === "boolean") settings = { ...settings, invertScroll };
+    await writeSettings(settings);
+    for (const canvas of canvases.values()) canvas.event({ t: "settings", settings });
+    return reply(response, 200, settings);
+  }
+  const match = path.match(/^\/api\/canvases\/([a-z0-9]+)\/(ticket|share|unshare)$/);
+  if (match && method === "POST") {
+    const canvas = await canvasById(match[1]);
+    if (match[2] === "ticket") {
+      if (!canvas.data.remote || !credential) return reply(response, 200, { url: `ws://localhost:${PORT}/local/${canvas.id}` });
+      return reply(response, 200, await edge(`/api/canvases/${canvas.data.remote.id}/ticket`, { method: "POST", body: "{}" }));
+    }
+    if (match[2] === "share") return reply(response, 200, { url: await canvas.run(() => canvas.share()) });
+    await canvas.run(() => canvas.unshare());
+    return reply(response, 200, { ok: true });
+  }
+  if (path.startsWith("/api/")) return reply(response, 404, { error: "Not found" });
+  if (method !== "GET" && method !== "HEAD") return reply(response, 405, { error: "Method not allowed" });
+  const preview = path.match(/^\/preview\/([a-z0-9]+)\/([a-z0-9]+)$/);
+  if (preview) return servePreview(response, preview[1], preview[2]);
+  return serveUi(response, path);
+}
+var idleTimer = null;
+function touch() {
+  if (idleTimer) clearTimeout(idleTimer);
+  idleTimer = setTimeout(() => {
+    if ([...canvases.values()].some((canvas) => canvas.watchers)) return touch();
+    process.exit(0);
+  }, IDLE_MS);
+}
+async function runDaemon() {
+  credential = await readCredential();
+  settings = await readSettings();
+  const server = createServer2(async (request, response) => {
+    if (!trusted(request)) {
+      response.writeHead(403, JSON_HEADERS);
+      response.end('{"error":"Forbidden"}');
+      return;
+    }
+    try {
+      await route(request, response);
+    } catch (error) {
+      if (response.headersSent) {
+        response.destroy();
+        return;
+      }
+      if (error instanceof Failure) return reply(response, error.status, { error: error.message, ...error.extra });
+      console.error(error);
+      reply(response, 500, { error: error instanceof Error ? error.message : "Something went wrong" });
+    }
+  });
+  const sockets = new WebSocketServer({ noServer: true });
+  server.on("upgrade", async (request, socket, head) => {
+    const match = (request.url || "").match(/^\/local\/([a-z0-9]+)(\?events=1)?$/);
+    if (!match || !trusted(request) || !request.headers.origin) {
+      socket.destroy();
+      return;
+    }
+    const canvas = await canvasById(match[1]).catch(() => null);
+    if (!canvas) {
+      socket.destroy();
+      return;
+    }
+    sockets.handleUpgrade(request, socket, head, (client) => {
+      if (match[2]) canvas.attachEvents(client);
+      else canvas.attach(client).catch(() => client.close());
+    });
+  });
+  await new Promise((resolve3, reject) => {
+    server.once("error", reject);
+    server.listen(PORT, "127.0.0.1", resolve3);
+  });
+  touch();
+  startInterfaceUpdates().catch(() => {
+  });
+}
+
+// src/gates.ts
+import { createServer as createServer3 } from "node:http";
+import { mkdir as mkdir6, readFile as readFile6, stat as stat4, writeFile as writeFile6 } from "node:fs/promises";
+import { dirname as dirname3 } from "node:path";
+var dedupe = (problems) => [...new Map(problems.map((p) => [`${p.code}:${p.file || ""}:${p.message}`, p])).values()];
+async function scanFolder(folder) {
+  const problems = [];
+  const info = await stat4(folder).catch(() => null);
+  if (!info?.isDirectory()) return { problems: [{ code: "NOT_A_FOLDER", message: `"${folder}" is not a folder.`, fix: "Point at a folder of built static files." }], files: [], bytes: 0 };
+  const files = await hashFolder(folder);
+  let bytes = 0;
+  for (const file2 of files) {
+    bytes += file2.size;
+    const problem = checkPath(file2.path);
+    if (problem) {
+      problems.push(problem);
+      continue;
+    }
+    if (file2.size > LIMITS.fileBytes) problems.push({ code: "FILE_TOO_LARGE", message: `"${file2.path}" is ${(file2.size / 1048576).toFixed(1)} MB; the limit is ${LIMITS.fileBytes / 1048576} MB.`, fix: "Compress it, or swap in a smaller asset.", file: file2.path });
+    problems.push(...scanBytes(file2.path, await readFile6(file2.absolute)));
+  }
+  if (files.length > LIMITS.frameFiles) problems.push({ code: "TOO_MANY_FILES", message: `${files.length} files; the limit is ${LIMITS.frameFiles}.`, fix: "This looks like more than one built page. Add only what the frame needs." });
+  if (bytes > LIMITS.frameBytes) {
+    const largest = [...files].sort((a, b) => b.size - a.size).slice(0, 5).map((file2) => `${file2.path} (${(file2.size / 1048576).toFixed(1)} MB)`).join(", ");
+    problems.push({ code: "FRAME_TOO_LARGE", message: `${(bytes / 1048576).toFixed(1)} MB in total; the limit is ${LIMITS.frameBytes / 1048576} MB. Largest: ${largest}.`, fix: "Remove what this design doesn't show, and compress the rest." });
+  }
+  return { problems, files, bytes };
+}
+function entryProblems(files, entry) {
+  const entryPath = entry.split(/[?#]/)[0];
+  const candidates = candidatePaths("/" + entryPath);
+  if (files.some((file2) => candidates.includes(file2.path))) return [];
+  return [{ code: "NO_ENTRY", message: `"${entryPath}" is not in the folder.`, fix: "Build to a folder with an index.html at its top level, or pass --entry." }];
+}
+async function findReferences(folder, needle) {
+  const found = [];
+  for (const file2 of await hashFolder(folder)) {
+    const bytes = await readFile6(file2.absolute);
+    if (looksLikeText(bytes) && bytes.includes(needle)) found.push(file2.path);
+    if (found.length === 3) break;
+  }
+  return found;
+}
+async function browserGates(folder, options, launch) {
+  const problems = [], warnings = [];
+  const traces = /* @__PURE__ */ new Map();
+  const server = await startFrameServer(folder);
+  const width = options.width, height = options.height === "auto" ? 800 : options.height;
+  const harness = createServer3((_, response) => {
+    response.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+    response.end(`<!doctype html><style>html,body{margin:0;background:#fff}iframe{display:block;border:0;width:${width}px;height:${height}px}</style><iframe id="frame" sandbox="${FRAME_SANDBOX}" src="${server.origin}/${options.entry}"></iframe>`);
+  });
+  await new Promise((resolve3) => harness.listen(0, "127.0.0.1", resolve3));
+  const harnessOrigin = `http://localhost:${harness.address().port}`;
+  let browser;
+  try {
+    browser = await launch();
+  } catch {
+    harness.close();
+    server.close();
+    return { ok: false, warnings, problems: [{ code: "NO_BROWSER", message: "No browser available to check the frame.", fix: "Install Google Chrome, or run: npx playwright-core install chromium" }] };
+  }
+  try {
+    const context = await browser.newContext({ viewport: { width: Math.max(width, 400), height: Math.max(height, 300) }, deviceScaleFactor: 2 });
+    const page = await context.newPage();
+    const isFrameOrigin = (url) => url.startsWith(server.origin + "/") || url === server.origin;
+    const external = (url) => {
+      let host = url;
+      try {
+        host = new URL(url).host;
+      } catch {
+      }
+      const problem = { code: "EXTERNAL_REQUEST", message: `The frame tried to reach ${host} (${url.slice(0, 160)}).`, fix: /google-analytics|googletagmanager|clarity\.ms|segment\.|sentry|hotjar|posthog|plausible|intercom|mixpanel|amplitude/i.test(url) ? "That is analytics or a third-party widget, which a frame doesn't need. Delete the tag or skip loading it in this build." : /fonts\.(googleapis|gstatic)|typekit|fontshare|fonts\.bunny/i.test(url) ? "Download the font files into the folder and load them with @font-face and a local path." : "Frames can only use their own files. For an asset, copy it into the folder and use a relative path. For an API call, replace it with mock data. For a tag or widget in the page template, delete it." };
+      problems.push(problem);
+      traces.set(problem, host);
+    };
+    page.on("pageerror", (error) => {
+      problems.push({ code: "UNCAUGHT_ERROR", message: `The page threw: ${String(error.message).slice(0, 400)}`, fix: "Usually a missing provider, env value or API response, or a router reading the file path as a route. Mount the design with mock props and data, and use a memory or hash router." });
+    });
+    page.on("console", (message) => {
+      if (message.type() !== "error") return;
+      const text2 = message.text();
+      if (/Content Security Policy/i.test(text2)) {
+        const blocked = text2.match(/['"`](https?:\/\/[^'"`\s]+)['"`]/);
+        if (blocked && !isFrameOrigin(blocked[1])) return external(blocked[1]);
+        if (!blocked) warnings.push(`Blocked by the frame's rules: ${text2.slice(0, 300)}`);
+        return;
+      }
+      if (/Failed to load resource/.test(text2)) return;
+      warnings.push(`Console error: ${text2.slice(0, 300)}`);
+    });
+    page.on("response", (response) => {
+      const url = response.url();
+      if (!isFrameOrigin(url) || response.status() < 400 || url.endsWith("/favicon.ico")) return;
+      const path = new URL(url).pathname;
+      const problem = { code: "MISSING_FILE", message: `The frame asked for ${path} and it isn't in the folder (${response.status()}).`, fix: /^\/(api|graphql|trpc|auth)(\/|$)/.test(path) ? "That is a server route, and frames have no server. Replace the call with mock data." : "Copy the file into the folder, or remove the reference. If it is an API call, replace it with mock data.", file: path.slice(1) };
+      problems.push(problem);
+      traces.set(problem, path.slice(1));
+    });
+    page.on("requestfailed", (request) => {
+      const url = request.url();
+      if (url.startsWith("data:") || url.startsWith("blob:") || url.startsWith(harnessOrigin)) return;
+      if (!isFrameOrigin(url)) return external(url);
+      if (request.failure()?.errorText !== "net::ERR_ABORTED") problems.push({ code: "REQUEST_FAILED", message: `Loading ${new URL(url).pathname} failed: ${request.failure()?.errorText}.`, fix: "Check the file exists and its path is right." });
+    });
+    await page.goto(harnessOrigin, { waitUntil: "load", timeout: 3e4 }).catch((error) => {
+      problems.push({ code: "LOAD_TIMEOUT", message: `The frame took too long to load: ${String(error.message).slice(0, 200)}`, fix: "Something is waiting on a server. Replace it with mock data." });
+    });
+    await page.waitForLoadState("networkidle", { timeout: 6e3 }).catch(() => {
+    });
+    await page.waitForTimeout(800);
+    const frame = page.frames().find((item) => isFrameOrigin(item.url()));
+    let content;
+    if (frame) {
+      content = await frame.evaluate(() => ({
+        width: Math.max(document.documentElement.scrollWidth, document.body?.scrollWidth || 0),
+        height: Math.max(document.documentElement.scrollHeight, document.body?.scrollHeight || 0)
+      })).catch(() => void 0);
+    } else {
+      problems.push({ code: "FRAME_DID_NOT_LOAD", message: "The frame page did not load.", fix: "Check the entry file." });
+    }
+    const finalHeight = options.height === "auto" ? Math.max(120, Math.min(8e3, content?.height || 800)) : height;
+    if (options.height === "auto") await page.evaluate((h) => {
+      document.getElementById("frame").style.height = `${h}px`;
+    }, finalHeight);
+    if (options.height === "auto") await page.setViewportSize({ width: Math.max(width, 400), height: Math.min(4e3, finalHeight) });
+    await page.waitForTimeout(150);
+    const shot = await page.locator("#frame").screenshot({ type: "png", timeout: 15e3 }).catch(() => null);
+    if (shot) {
+      if (options.poster) {
+        await mkdir6(dirname3(options.poster), { recursive: true });
+        await writeFile6(options.poster, shot);
+      }
+      const colors = await page.evaluate(async (base64) => {
+        const image = new Image();
+        image.src = `data:image/png;base64,${base64}`;
+        await image.decode();
+        const canvas = document.createElement("canvas");
+        canvas.width = 96;
+        canvas.height = 96;
+        const paint = canvas.getContext("2d");
+        paint.drawImage(image, 0, 0, 96, 96);
+        const data = paint.getImageData(0, 0, 96, 96).data, seen = /* @__PURE__ */ new Set();
+        for (let i = 0; i < data.length; i += 4) seen.add(data[i] >> 3 << 10 | data[i + 1] >> 3 << 5 | data[i + 2] >> 3);
+        return seen.size;
+      }, shot.toString("base64")).catch(() => 2);
+      if (colors < 2) problems.push({ code: "BLANK_RENDER", message: "The frame rendered as a single flat color.", fix: "It probably needs data, a provider or a route it does not have. Open it, find what is missing and mock it. Check the screenshot." });
+    }
+    if (content && options.height !== "auto" && content.height > height * 1.02) warnings.push(`The page is ${content.height}px tall and the frame is ${height}px; it will scroll. Pass --height auto to show it all.`);
+    if (content && content.width > width * 1.02) warnings.push(`The page is ${content.width}px wide and the frame is ${width}px; it overflows sideways.`);
+    await context.close();
+    const unique = dedupe(problems);
+    for (const problem of unique) {
+      const trace = traces.get(problem);
+      const references = trace ? await findReferences(folder, trace) : [];
+      if (references.length) problem.message += ` Mentioned in ${references.join(", ")}.`;
+    }
+    return { ok: unique.length === 0, problems: unique, warnings: [...new Set(warnings)], content, height: finalHeight, screenshot: options.poster };
+  } finally {
+    harness.closeAllConnections();
+    harness.close();
+    server.close();
+  }
+}
+function gateSession() {
+  const scans = /* @__PURE__ */ new Map();
+  let browser = null;
+  const launch = () => browser ??= launchBrowser();
+  return {
+    async run(folder, options) {
+      if (!scans.has(folder)) scans.set(folder, scanFolder(folder));
+      const scan = await scans.get(folder);
+      const size2 = { files: scan.files.length, bytes: scan.bytes };
+      const notFolder = scan.problems.some((problem) => problem.code === "NOT_A_FOLDER");
+      const problems = notFolder ? scan.problems : [...scan.problems, ...entryProblems(scan.files, options.entry)];
+      if (problems.length) return { ok: false, problems: dedupe(problems), warnings: [], ...size2 };
+      return { ...await browserGates(folder, options, launch), ...size2 };
+    },
+    close: async () => {
+      await browser?.then((open) => open.close()).catch(() => {
+      });
+    }
+  };
+}
+async function runGates(folder, options) {
+  const session = gateSession();
+  try {
+    return await session.run(folder, options);
+  } finally {
+    await session.close();
+  }
+}
+
+// src/cli.ts
+var HELP = `twombly ${"0.2.0"}: put design explorations on a shared canvas.
+
+  init [--name "Name"] [--no-open]     create or reopen this project's canvas
+  add <folder|file> --title "T"        run the gates, then place a frame
+      [--width 1280] [--height 800|auto] [--entry index.html] [--level build|component|capture|image]
+      [--new-row] [--x N --y N]
+      [--frames '[{"title":"A","entry":"index.html?v=a"}]']   several at once, as JSON or a JSON file
+  update <frame> <folder|file>         replace a frame's contents, keeping its comments
+      [--title "T"] [--width N] [--height N|auto] [--entry path] [--level ...]
+      update <folder> --frames '[{"frame":"A"},{"frame":"B"}]'   several at once
+  check <folder>                     run the gates without placing anything
+  capture <url> --out <folder>         freeze a running page into a static folder
+      [--width 1280] [--height 800] [--image] [--selector css]
+  preview <frame>                      a page with just that frame, for testing interactions
+  working | done                       show on the canvas that you're building, or that you've finished
+  list | move <frame> --x N --y N | resize <frame> --width N --height N
+  retitle <frame> "T" | remove <frame> | arrange [--columns N] | rename "Name"
+  open | status | login | logout | stop
+  share | unshare                      only when the person asks: this publishes a public link
+  guide                                how to adapt a project into frames. Read this first.`;
+var SWITCHES = /* @__PURE__ */ new Set(["no-open", "new-row", "image"]);
+var FLAGS = {
+  init: ["name", "no-open"],
+  add: ["title", "width", "height", "entry", "level", "new-row", "x", "y", "frames"],
+  update: ["title", "width", "height", "entry", "level", "frames"],
+  check: ["entry", "width", "height"],
+  capture: ["out", "width", "height", "image", "selector", "wait"],
+  move: ["x", "y"],
+  resize: ["width", "height"],
+  arrange: ["columns"]
+};
+function parse(argv) {
+  const positional = [], flags = {};
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (!arg.startsWith("--")) {
+      positional.push(arg);
+      continue;
+    }
+    const at = arg.indexOf("=");
+    if (at > 0) {
+      flags[arg.slice(2, at)] = arg.slice(at + 1);
+      continue;
+    }
+    const next = argv[i + 1];
+    if (!SWITCHES.has(arg.slice(2)) && next !== void 0 && !next.startsWith("--")) {
+      flags[arg.slice(2)] = next;
+      i++;
+    } else flags[arg.slice(2)] = true;
+  }
+  return { positional, flags };
+}
+function checkFlags(name, flags) {
+  const known = FLAGS[name] || [];
+  for (const flag of Object.keys(flags)) {
+    if (!known.includes(flag)) fail(`Unknown flag --${flag}. ${known.length ? `"${name}" takes: ${known.map((item) => `--${item}`).join(", ")}.` : `"${name}" takes no flags.`}`);
+  }
+}
+var print = (value) => process.stdout.write(JSON.stringify(value, null, 2) + "\n");
+function fail(message, extra = {}) {
+  print({ ok: false, error: message, ...extra });
+  process.exit(1);
+}
+function number(flags, name) {
+  const value = flags[name];
+  if (value === void 0) return void 0;
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) fail(`--${name} needs a number`);
+  return parsed;
+}
+function text(flags, name) {
+  const value = flags[name];
+  return typeof value === "string" ? value : void 0;
+}
+function size(flags, name, fallback, low = 40, high = 8e3) {
+  const value = number(flags, name) ?? fallback;
+  if (value < low || value > high) fail(`--${name} must be between ${low} and ${high}`);
+  return Math.round(value);
+}
+function level(flags, fallback) {
+  const value = text(flags, "level");
+  if (!value) return fallback;
+  if (!FIDELITY_LEVELS.includes(value)) fail(`--level must be one of ${FIDELITY_LEVELS.join(", ")}`);
+  return value;
+}
+async function health() {
+  try {
+    const response = await fetch(`${DAEMON_ORIGIN}/health`, { signal: AbortSignal.timeout(800) });
+    return response.ok ? await response.json() : null;
+  } catch {
+    return null;
+  }
+}
+async function ensureDaemon() {
+  const running = await health();
+  if (running?.build === "0.2.0+1793896544071") return;
+  if (running) {
+    await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: "{}" }).catch(() => {
+    });
+    await new Promise((done) => setTimeout(done, 200));
+  }
+  spawn2(process.execPath, [fileURLToPath2(import.meta.url), "__daemon"], { detached: true, stdio: "ignore" }).unref();
+  for (let attempt = 0; attempt < 60; attempt++) {
+    await new Promise((done) => setTimeout(done, 100));
+    if ((await health())?.build === "0.2.0+1793896544071") return;
+  }
+  fail(`Could not start the background server on port ${PORT}. Is something else using it?`);
+}
+async function call(name, input = {}) {
+  await ensureDaemon();
+  const response = await fetch(`${DAEMON_ORIGIN}/cli/${name}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(input) });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) fail(data.error || `Failed (${response.status})`, data.problems ? { problems: data.problems } : {});
+  return data;
+}
+var IMAGE = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".avif", ".svg"]);
+async function prepare(source) {
+  const info = await stat5(source).catch(() => null);
+  if (!info) fail(`"${source}" does not exist.`);
+  if (info.isDirectory()) return { folder: source, temporary: null, image: false };
+  const extension = extname3(source).toLowerCase();
+  const isImage = IMAGE.has(extension);
+  if (!isImage && extension !== ".html" && extension !== ".htm") fail("Point at a folder of static files, an HTML file or an image.");
+  const temporary = await mkdtemp(join9(tmpdir(), "twombly-"));
+  if (isImage) {
+    const name = `image${extension}`;
+    await copyFile(source, join9(temporary, name));
+    await writeFile7(join9(temporary, "index.html"), `<!doctype html><meta charset="utf-8"><title>${basename2(source)}</title><style>html,body{margin:0;background:#fff}img{display:block;width:100%;height:auto}</style><img src="${name}" alt="">`);
+  } else {
+    await copyFile(source, join9(temporary, "index.html"));
+  }
+  return { folder: temporary, temporary, image: isImage };
+}
+async function currentProject() {
+  const project = await findProject(process.cwd());
+  if (!project) fail("No canvas here yet. Run: twombly init");
+  return project;
+}
+async function markWorking() {
+  const project = await findProject(process.cwd());
+  if (project) await call("working", { project, ms: WORKING_MS });
+}
+function gateFailure(result) {
+  print({ ok: false, placed: false, problems: result.problems, warnings: result.warnings, screenshot: result.screenshot });
+  process.exitCode = 1;
+}
+var NEXT = "Open the screenshot. Passing the gates does not prove it looks right. To test interactions, open the url from: twombly preview <frame>";
+var CONCURRENT_GATES = 4;
+async function frameItems(flags, known) {
+  const value = flags.frames;
+  if (value === void 0) return [flags];
+  if (typeof value !== "string") fail("--frames needs JSON or a JSON file.");
+  const { frames: _, ...shared } = flags;
+  let items;
+  try {
+    items = JSON.parse(value.trimStart().startsWith("[") ? value : await readFile7(value, "utf8"));
+  } catch (error) {
+    fail(`--frames: ${error instanceof Error ? error.message : error}`);
+  }
+  if (!Array.isArray(items) || !items.length) fail("--frames needs a list of frames.");
+  return items.map((item) => {
+    const unknown = Object.keys(item).find((key) => !known.includes(key));
+    if (unknown) fail(`--frames: unknown field "${unknown}". Each frame takes: ${known.join(", ")}.`);
+    const merged = { ...shared };
+    for (const [key, field] of Object.entries(item)) {
+      if (key === "newRow") {
+        if (field) merged["new-row"] = true;
+        else delete merged["new-row"];
+      } else merged[key] = String(field);
+    }
+    return merged;
+  });
+}
+async function placeFrames(project, many, jobs, place2) {
+  await markWorking();
+  const scratch = await mkdtemp(join9(tmpdir(), "twombly-gates-"));
+  const gates = gateSession(), prepared = /* @__PURE__ */ new Map(), temporary = [];
+  let keepScratch = false;
+  try {
+    for (const job of jobs) {
+      if (prepared.has(job.source)) continue;
+      const ready = await prepare(job.source);
+      prepared.set(job.source, ready);
+      if (ready.temporary) temporary.push(ready.temporary);
+    }
+    const results = [];
+    let next = 0;
+    await Promise.all(Array.from({ length: CONCURRENT_GATES }, async () => {
+      while (next < jobs.length) {
+        const index = next++, job = jobs[index];
+        results[index] = await gates.run(prepared.get(job.source).folder, { entry: job.entry, width: job.width, height: job.height, poster: join9(scratch, `${job.id}.png`) });
+      }
+    }));
+    if (results.some((result) => !result.ok)) {
+      keepScratch = true;
+      if (!many) return gateFailure(results[0]);
+      return gateFailure({
+        problems: results.flatMap((result, index) => result.problems.map((problem) => ({ ...problem, frame: jobs[index].label, screenshot: result.screenshot }))),
+        warnings: results.flatMap((result, index) => result.warnings.map((warning) => `${jobs[index].label}: ${warning}`))
+      });
+    }
+    const placed = [];
+    for (const [index, job] of jobs.entries()) {
+      const result = results[index], { folder, image } = prepared.get(job.source);
+      const poster = result.screenshot ? posterFile(project, job.id) : void 0;
+      await replaceFolder(folder, frameDir(project, job.id));
+      if (poster) {
+        await mkdir7(join9(project, ".twombly/posters"), { recursive: true });
+        await copyFile(result.screenshot, poster);
+      }
+      placed.push({ ...await place2(job, { result, folder, image, poster }), warnings: result.warnings, screenshot: poster, contentSize: result.content });
+    }
+    if (!many) return print({ ok: true, placed: true, ...placed[0], next: NEXT });
+    print({ ok: true, placed: true, frames: placed.map(({ frame, canvas: _, ...rest }) => ({ ...frame, ...rest })), canvas: placed[placed.length - 1].canvas, next: NEXT });
+  } finally {
+    await gates.close();
+    for (const folder of temporary) await rm5(folder, { recursive: true, force: true });
+    if (!keepScratch) await rm5(scratch, { recursive: true, force: true });
+  }
+}
+async function addFrames(project, source, many, items) {
+  const jobs = items.map((flags) => {
+    const folder = text(flags, "folder") || source, title = text(flags, "title");
+    if (!folder || !title) fail('twombly add <folder|file> --title "Title"');
+    level(flags, "build");
+    number(flags, "x");
+    number(flags, "y");
+    return {
+      flags,
+      label: title,
+      source: resolve2(folder),
+      entry: text(flags, "entry") || "index.html",
+      width: size(flags, "width", 1280),
+      height: flags.height === "auto" ? "auto" : size(flags, "height", 800),
+      id: randomBytes2(8).toString("hex").replace(/[01lo]/g, "a").slice(0, 12)
+    };
+  });
+  const titles = (await call("list", { project })).frames.map((frame) => frame.title);
+  await placeFrames(project, many, jobs, async (job, { result, image, poster }) => {
+    const { content } = await folderContent(frameDir(project, job.id));
+    if (titles.includes(job.label)) result.warnings.push(`Another frame is already titled "${job.label}". Give each a distinct title, or use update to replace it.`);
+    titles.push(job.label);
+    return call("place", {
+      project,
+      id: job.id,
+      title: job.label,
+      w: job.width,
+      h: result.height,
+      entry: job.entry,
+      content,
+      level: level(job.flags, image ? "image" : "build"),
+      hasPoster: !!poster,
+      x: number(job.flags, "x"),
+      y: number(job.flags, "y"),
+      newRow: job.flags["new-row"] === true
+    });
+  });
+}
+async function updateFrames(project, source, many, items) {
+  const { frames } = await call("list", { project });
+  const seen = /* @__PURE__ */ new Set();
+  const jobs = items.map((flags) => {
+    const ref = text(flags, "frame"), folder = text(flags, "folder") || source;
+    if (!ref || !folder) fail("twombly update <frame> <folder|file>");
+    const matches = frames.filter((frame2) => frame2.id === ref || frame2.title === ref);
+    if (matches.length !== 1) fail(matches.length ? `More than one frame is titled "${ref}". Use its id.` : `No frame "${ref}". Run: twombly list`);
+    const frame = matches[0];
+    if (seen.has(frame.id)) fail(`--frames lists "${ref}" twice.`);
+    seen.add(frame.id);
+    level(flags, "build");
+    return {
+      flags,
+      label: frame.title,
+      id: frame.id,
+      source: resolve2(folder),
+      entry: text(flags, "entry") || frame.entry,
+      width: size(flags, "width", frame.w),
+      height: flags.height === "auto" ? "auto" : size(flags, "height", frame.h)
+    };
+  });
+  await placeFrames(project, many, jobs, async (job, { result, image, poster }) => {
+    const { content } = await folderContent(frameDir(project, job.id));
+    return call("revise", {
+      project,
+      id: job.id,
+      title: text(job.flags, "title"),
+      w: job.width,
+      h: result.height,
+      entry: job.entry,
+      content,
+      hasPoster: poster ? true : void 0,
+      level: text(job.flags, "level") || image ? level(job.flags, image ? "image" : "build") : void 0
+    });
+  });
+}
+async function main() {
+  const [name, ...rest] = process.argv.slice(2);
+  const { positional, flags } = parse(rest);
+  if (flags.help !== void 0 || positional.includes("-h")) {
+    process.stdout.write(HELP + "\n");
+    return;
+  }
+  if (name && !["--help", "-h", "--version", "help", "version", "guide", "__daemon"].includes(name)) checkFlags(name, flags);
+  switch (name) {
+    case "__daemon":
+      return runDaemon();
+    case void 0:
+    case "help":
+    case "--help":
+    case "-h":
+      process.stdout.write(HELP + "\n");
+      return;
+    case "--version":
+    case "version":
+      process.stdout.write("0.2.0\n");
+      return;
+    case "guide":
+      process.stdout.write(SKILL_default);
+      return;
+    case "init": {
+      const project = await findProject(process.cwd()) || process.cwd();
+      const given = text(flags, "name");
+      print({ ok: true, ...await call("init", { project, name: given || defaultName(project), rename: !!given, open: flags["no-open"] === void 0 }), next: "Frames must be static files that work with no server or network. Read how to adapt this project: twombly guide" });
+      return;
+    }
+    case "check": {
+      const source = positional[0];
+      if (!source) fail("twombly check <folder> checks a build before it is added. It needs the build's folder.");
+      await markWorking();
+      const { folder, temporary } = await prepare(resolve2(source));
+      const scratch = await mkdtemp(join9(tmpdir(), "twombly-check-"));
+      const shot = join9(scratch, "screenshot.png");
+      try {
+        const height = flags.height === "auto" ? "auto" : size(flags, "height", 800);
+        const result = await runGates(folder, { entry: text(flags, "entry") || "index.html", width: size(flags, "width", 1280), height, poster: shot });
+        print(result);
+        if (!result.ok) process.exitCode = 1;
+      } finally {
+        if (temporary) await rm5(temporary, { recursive: true, force: true });
+      }
+      return;
+    }
+    case "capture": {
+      const url = positional[0], out = text(flags, "out");
+      if (!url || !out) fail("twombly capture <url> --out <folder>");
+      await markWorking();
+      const result = await capture(url, resolve2(out), { width: size(flags, "width", 1280), height: size(flags, "height", 800), image: flags.image === true, selector: text(flags, "selector"), wait: number(flags, "wait") });
+      print({ ok: true, ...result, next: `twombly add ${out} --title "..." --level ${flags.image === true ? "image" : "capture"}` });
+      return;
+    }
+    case "add": {
+      return addFrames(await currentProject(), positional[0], flags.frames !== void 0, await frameItems(flags, ["folder", "title", "width", "height", "entry", "level", "newRow", "x", "y"]));
+    }
+    case "update": {
+      const many = flags.frames !== void 0;
+      const items = many ? await frameItems(flags, ["frame", "folder", "title", "width", "height", "entry", "level"]) : [{ ...flags, ...positional[0] ? { frame: positional[0] } : {} }];
+      return updateFrames(await currentProject(), many ? positional[0] : positional[1], many, items);
+    }
+    case "working":
+      print({ ok: true, ...await call("working", { project: await currentProject(), ms: WORKING_MS }) });
+      return;
+    case "done":
+      print({ ok: true, ...await call("working", { project: await currentProject(), ms: 0 }) });
+      return;
+    case "list":
+      print({ ok: true, ...await call("list", { project: await currentProject() }) });
+      return;
+    case "open":
+      print({ ok: true, ...await call("open", { project: await currentProject() }) });
+      return;
+    case "preview": {
+      if (!positional[0]) fail("twombly preview <frame>");
+      print({ ok: true, ...await call("preview", { project: await currentProject(), frame: positional[0] }) });
+      return;
+    }
+    case "status":
+      print({ ok: true, ...await call("status", { project: await findProject(process.cwd()) }) });
+      return;
+    case "remove": {
+      if (!positional[0]) fail("twombly remove <frame>");
+      print({ ok: true, ...await call("remove", { project: await currentProject(), frame: positional[0] }) });
+      return;
+    }
+    case "move": {
+      const x = number(flags, "x"), y = number(flags, "y");
+      if (!positional[0] || x === void 0 || y === void 0) fail("twombly move <frame> --x N --y N");
+      print({ ok: true, ...await call("patch", { project: await currentProject(), frame: positional[0], patch: { x, y } }) });
+      return;
+    }
+    case "resize": {
+      if (flags.height === "auto") fail("resize takes a number. To fit the page: twombly update <frame> <folder> --height auto");
+      if (!positional[0] || flags.width === void 0 || flags.height === void 0) fail("twombly resize <frame> --width N --height N");
+      print({ ok: true, ...await call("patch", { project: await currentProject(), frame: positional[0], patch: { w: size(flags, "width", 1280), h: size(flags, "height", 800) } }) });
+      return;
+    }
+    case "retitle": {
+      if (!positional[0] || !positional[1]) fail('twombly retitle <frame> "New title"');
+      print({ ok: true, ...await call("patch", { project: await currentProject(), frame: positional[0], patch: { title: positional[1] } }) });
+      return;
+    }
+    case "arrange":
+      print({ ok: true, ...await call("arrange", { project: await currentProject(), columns: number(flags, "columns") }) });
+      return;
+    case "rename": {
+      if (!positional[0]) fail('twombly rename "Name"');
+      print({ ok: true, ...await call("rename", { project: await currentProject(), name: positional[0] }) });
+      return;
+    }
+    case "share":
+      print({ ok: true, ...await call("share", { project: await currentProject() }) });
+      return;
+    case "unshare":
+      print({ ok: true, ...await call("unshare", { project: await currentProject() }) });
+      return;
+    case "login": {
+      const result = await call("login");
+      if (result.signedIn) {
+        print({ ok: true, ...result });
+        return;
+      }
+      for (let attempt = 0; attempt < 300; attempt++) {
+        await new Promise((done) => setTimeout(done, 1e3));
+        const status = await call("status");
+        if (status.signedIn) {
+          print({ ok: true, signedIn: true, me: status.me });
+          return;
+        }
+      }
+      fail("Sign-in timed out.");
+      return;
+    }
+    case "logout":
+      print({ ok: true, ...await call("logout") });
+      return;
+    case "stop": {
+      if (await health()) await fetch(`${DAEMON_ORIGIN}/cli/stop`, { method: "POST", body: "{}" }).catch(() => {
+      });
+      print({ ok: true, stopped: true });
+      return;
+    }
+    default:
+      fail(`Unknown command "${name}". Run: twombly help`);
+  }
+}
+main().catch((error) => {
+  fail(error instanceof Error ? error.message : String(error));
+});