@imgly/codesign-mcp 0.1.5 → 0.1.6

package/dist/viewer/router.js.map

@@ -1 +1 @@
-{"version":3,"file":"router.js","sourceRoot":"","sources":["../../src/viewer/router.ts"],"names":[],"mappings":"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","sourcesContent":["//\n// Express router serving the read-only viewer + mini-studio + JSON snapshot\n// API + SSE channel. Stateless: every request reads through the supplied\n// store/fs. Same router mounts on the stdio listener and on the HTTP\n// transport's express app (one impl, no fork).\nimport {\n  type NextFunction,\n  type Request,\n  type Response,\n  Router\n} from 'express';\nimport type { RevisionStore } from '../revisions/store.js';\nimport type { WorkspaceFS } from '../workspace/types.js';\nimport type { SseBroadcaster } from './broadcaster.js';\nimport { createResourceRoute } from './resource-route.js';\nimport { SPA_ASSETS } from './spa-assets.generated.js';\n\nexport interface CreateViewerRouterOptions {\n  store: RevisionStore;\n  fs: WorkspaceFS;\n  broadcaster: SseBroadcaster;\n  /**\n   * CE.SDK license served to the browser viewer via `/api/config`.\n   * Without it, the SPA can't initialise CreativeEditorSDK and shows a\n   * license error. The viewer requires a browser-shape license (which may\n   * be a separate SKU from the @cesdk/node license used by the agent).\n   */\n  cesdkLicense?: string;\n  /** Absolute workspace root, forwarded to the `/r/` route for disk streaming. Empty on object-store backends. */\n  workspaceRoot?: string;\n}\n\nexport function createViewerRouter(opts: CreateViewerRouterOptions): Router {\n  const { store, fs, broadcaster } = opts;\n  const router = Router();\n\n  // The SPA is mounted at root on the stdio listener (req.baseUrl === \"\") and\n  // under \"/viewer\" on the HTTP transport (req.baseUrl === \"/viewer\"). Its\n  // HTML/JS address assets and API routes by path, so we inject the live mount\n  // prefix at serve time: the `{{VIEWER_BASE}}` token in the HTML becomes\n  // req.baseUrl, and the inline `window.__VIEWER_BASE__` global it sets lets\n  // the SPA's JS build matching URLs at runtime. Without this the absolute\n  // paths resolve against the origin root and 404 under \"/viewer\".\n  const renderHtml = (html: string, baseUrl: string): string =>\n    html.replaceAll('{{VIEWER_BASE}}', baseUrl);\n\n  router.get('/api/config', (req, res) => {\n    // `resourceBase` is where the browser viewer resolves workspace:// asset\n    // URIs. `req.baseUrl` is \"\" on the stdio listener, \"/viewer\" on HTTP.\n    res.json({\n      license: opts.cesdkLicense ?? '',\n      resourceBase: `${req.baseUrl}/r/`\n    });\n  });\n\n  router.use(\n    createResourceRoute({ fs, workspaceRoot: opts.workspaceRoot ?? '' })\n  );\n\n  router.get('/', (req, res) => {\n    res.type('html').send(renderHtml(SPA_ASSETS['studio.html'], req.baseUrl));\n  });\n\n  // `/d/<root>` (LIVE) and `/d/<root>/<rev>` (PINNED) both serve the viewer\n  // SPA; viewer.js reads the path depth to choose the mode. The old\n  // per-revision `/s/<rev>` route is gone — `open_editor` hands out `/d/`.\n  const serveViewer = (req: Request, res: Response): void => {\n    res.type('html').send(renderHtml(SPA_ASSETS['index.html'], req.baseUrl));\n  };\n  router.get('/d/:root', serveViewer);\n  router.get('/d/:root/:rev', serveViewer);\n\n  router.get('/static/:name', (req, res, next) => {\n    const body = SPA_ASSETS[req.params.name];\n    if (!body) return next();\n    const ext = req.params.name.split('.').pop();\n    const ctype =\n      ext === 'html'\n        ? 'text/html'\n        : ext === 'js'\n          ? 'application/javascript'\n          : 'text/plain';\n    res.type(ctype).send(body);\n  });\n\n  // NOTE: thumbnail MUST be registered before /snapshot/:rev so Express\n  // matches it first (route registration order is resolution order).\n  router.get('/snapshot/:rev/thumbnail', async (req, res, next) => {\n    try {\n      const rev = req.params.rev;\n      const shard = rev.slice(0, 2);\n      const rest = rev.slice(2);\n      const relPath = `exports/${shard}/${rest}/preview.webp`;\n      if (!(await fs.exists(relPath))) return next();\n      const bytes = await fs.readFile(relPath);\n      res.type('image/webp').send(Buffer.from(bytes));\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  router.get('/snapshot/:rev', async (req, res, next) => {\n    try {\n      const revision = await store.read(req.params.rev);\n      const chain = await store.historyOf(req.params.rev);\n      const rootRevision = chain[0].id;\n      res.json({\n        revision: revision.id,\n        rootRevision,\n        scene: revision.scene,\n        title: await store.currentTitle(rootRevision),\n        note: revision.meta.note,\n        createdAt: revision.meta.createdAt\n      });\n    } catch (err) {\n      if ((err as { code?: string }).code === 'ENOENT') {\n        res.status(404).json({ error: 'unknown revision' });\n        return;\n      }\n      // Non-ENOENT errors carry fs paths in their message — hand to the\n      // sanitising error handler rather than echoing err.message.\n      next(err);\n    }\n  });\n\n  router.get('/sse/:root', (req, res) => {\n    broadcaster.subscribe(req.params.root, res);\n  });\n\n  router.get('/api/designs', async (_req, res, next) => {\n    try {\n      res.json(await store.listRoots());\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  router.get('/api/design/:root', async (req, res, next) => {\n    try {\n      const roots = await store.listRoots();\n      const design = roots.find((d) => d.rootRevision === req.params.root);\n      if (!design) {\n        res.status(404).json({ error: 'unknown design' });\n        return;\n      }\n      res.json(design);\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  router.get('/api/design/:root/revisions', async (req, res, next) => {\n    try {\n      const tree = await store.treeOf(req.params.root);\n      if (tree.length === 0) {\n        res.status(404).json({ error: 'unknown design' });\n        return;\n      }\n      res.json(tree);\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  // Sanitising error handler — fs errors embed the absolute workspace path in\n  // their message; convert every error to a generic response so the path\n  // never reaches a client. MUST be last, and MUST take all four args for\n  // Express to recognise it as an error handler.\n  router.use(\n    (_err: unknown, _req: Request, res: Response, _next: NextFunction) => {\n      if (res.headersSent) return;\n      res.status(500).type('text').send('internal error');\n    }\n  );\n\n  return router;\n}\n"]}
+{"version":3,"file":"router.js","sourceRoot":"","sources":["../../src/viewer/router.ts"],"names":[],"mappings":"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","sourcesContent":["//\n// Express router serving the read-only viewer + mini-studio + JSON snapshot\n// API + SSE channel. Stateless: every request reads through the supplied\n// store/fs. Same router mounts on the stdio listener and on the HTTP\n// transport's express app (one impl, no fork).\nimport {\n  type NextFunction,\n  type Request,\n  type Response,\n  Router\n} from 'express';\nimport type { RevisionStore } from '../revisions/store.js';\nimport type { WorkspaceFS } from '../workspace/types.js';\nimport type { SseBroadcaster } from './broadcaster.js';\nimport { createResourceRoute } from './resource-route.js';\nimport { SPA_ASSETS } from './spa-assets.generated.js';\nimport { cesdkCdnUrl, installedCesdkVersion } from './cesdk-cdn.js';\n\nexport interface CreateViewerRouterOptions {\n  store: RevisionStore;\n  fs: WorkspaceFS;\n  broadcaster: SseBroadcaster;\n  /**\n   * CE.SDK license served to the browser viewer via `/api/config`.\n   * Without it, the SPA can't initialise CreativeEditorSDK and shows a\n   * license error. The viewer requires a browser-shape license (which may\n   * be a separate SKU from the @cesdk/node license used by the agent).\n   */\n  cesdkLicense?: string;\n  /** Absolute workspace root, forwarded to the `/r/` route for disk streaming. Empty on object-store backends. */\n  workspaceRoot?: string;\n  /**\n   * Full cdn.img.ly URL the browser viewer imports the CE.SDK engine from.\n   * Defaults to the installed engine version so the preview can never drift\n   * from the node runtime. Overridable for tests.\n   */\n  cesdkEngineUrl?: string;\n}\n\nexport function createViewerRouter(opts: CreateViewerRouterOptions): Router {\n  const { store, fs, broadcaster } = opts;\n  const router = Router();\n  const cesdkEngineUrl =\n    opts.cesdkEngineUrl ?? cesdkCdnUrl(installedCesdkVersion());\n\n  // The SPA is mounted at root on the stdio listener (req.baseUrl === \"\") and\n  // under \"/viewer\" on the HTTP transport (req.baseUrl === \"/viewer\"). Its\n  // HTML/JS address assets and API routes by path, so we inject the live mount\n  // prefix at serve time: the `{{VIEWER_BASE}}` token in the HTML becomes\n  // req.baseUrl, and the inline `window.__VIEWER_BASE__` global it sets lets\n  // the SPA's JS build matching URLs at runtime. Without this the absolute\n  // paths resolve against the origin root and 404 under \"/viewer\".\n  const renderHtml = (html: string, baseUrl: string): string =>\n    html.replaceAll('{{VIEWER_BASE}}', baseUrl);\n\n  router.get('/api/config', (req, res) => {\n    // `resourceBase` is where the browser viewer resolves workspace:// asset\n    // URIs. `req.baseUrl` is \"\" on the stdio listener, \"/viewer\" on HTTP.\n    res.json({\n      license: opts.cesdkLicense ?? '',\n      resourceBase: `${req.baseUrl}/r/`,\n      cesdkEngineUrl\n    });\n  });\n\n  router.use(\n    createResourceRoute({ fs, workspaceRoot: opts.workspaceRoot ?? '' })\n  );\n\n  router.get('/', (req, res) => {\n    res.type('html').send(renderHtml(SPA_ASSETS['studio.html'], req.baseUrl));\n  });\n\n  // `/d/<root>` (LIVE) and `/d/<root>/<rev>` (PINNED) both serve the viewer\n  // SPA; viewer.js reads the path depth to choose the mode. The old\n  // per-revision `/s/<rev>` route is gone — `open_editor` hands out `/d/`.\n  const serveViewer = (req: Request, res: Response): void => {\n    res.type('html').send(renderHtml(SPA_ASSETS['index.html'], req.baseUrl));\n  };\n  router.get('/d/:root', serveViewer);\n  router.get('/d/:root/:rev', serveViewer);\n\n  router.get('/static/:name', (req, res, next) => {\n    const body = SPA_ASSETS[req.params.name];\n    if (!body) return next();\n    const ext = req.params.name.split('.').pop();\n    const ctype =\n      ext === 'html'\n        ? 'text/html'\n        : ext === 'js'\n          ? 'application/javascript'\n          : 'text/plain';\n    res.type(ctype).send(body);\n  });\n\n  // NOTE: thumbnail MUST be registered before /snapshot/:rev so Express\n  // matches it first (route registration order is resolution order).\n  router.get('/snapshot/:rev/thumbnail', async (req, res, next) => {\n    try {\n      const rev = req.params.rev;\n      const shard = rev.slice(0, 2);\n      const rest = rev.slice(2);\n      const relPath = `exports/${shard}/${rest}/preview.webp`;\n      if (!(await fs.exists(relPath))) return next();\n      const bytes = await fs.readFile(relPath);\n      res.type('image/webp').send(Buffer.from(bytes));\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  router.get('/snapshot/:rev', async (req, res, next) => {\n    try {\n      const revision = await store.read(req.params.rev);\n      const chain = await store.historyOf(req.params.rev);\n      const rootRevision = chain[0].id;\n      res.json({\n        revision: revision.id,\n        rootRevision,\n        scene: revision.scene,\n        title: await store.currentTitle(rootRevision),\n        note: revision.meta.note,\n        createdAt: revision.meta.createdAt\n      });\n    } catch (err) {\n      if ((err as { code?: string }).code === 'ENOENT') {\n        res.status(404).json({ error: 'unknown revision' });\n        return;\n      }\n      // Non-ENOENT errors carry fs paths in their message — hand to the\n      // sanitising error handler rather than echoing err.message.\n      next(err);\n    }\n  });\n\n  router.get('/sse/:root', (req, res) => {\n    broadcaster.subscribe(req.params.root, res);\n  });\n\n  router.get('/api/designs', async (_req, res, next) => {\n    try {\n      res.json(await store.listRoots());\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  router.get('/api/design/:root', async (req, res, next) => {\n    try {\n      const roots = await store.listRoots();\n      const design = roots.find((d) => d.rootRevision === req.params.root);\n      if (!design) {\n        res.status(404).json({ error: 'unknown design' });\n        return;\n      }\n      res.json(design);\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  router.get('/api/design/:root/revisions', async (req, res, next) => {\n    try {\n      const tree = await store.treeOf(req.params.root);\n      if (tree.length === 0) {\n        res.status(404).json({ error: 'unknown design' });\n        return;\n      }\n      res.json(tree);\n    } catch (err) {\n      next(err);\n    }\n  });\n\n  // Sanitising error handler — fs errors embed the absolute workspace path in\n  // their message; convert every error to a generic response so the path\n  // never reaches a client. MUST be last, and MUST take all four args for\n  // Express to recognise it as an error handler.\n  router.use(\n    (_err: unknown, _req: Request, res: Response, _next: NextFunction) => {\n      if (res.headersSent) return;\n      res.status(500).type('text').send('internal error');\n    }\n  );\n\n  return router;\n}\n"]}

package/dist/viewer/spa-assets.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spa-assets.generated.d.ts","sourceRoot":"","sources":["../../src/viewer/spa-assets.generated.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA09B7C,CAAC"}
+{"version":3,"file":"spa-assets.generated.d.ts","sourceRoot":"","sources":["../../src/viewer/spa-assets.generated.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAy9B7C,CAAC"}

package/dist/viewer/spa-assets.generated.js

@@ -781,10 +781,9 @@ if (!match) {
   // is where workspace:// asset URIs resolve.
   const cfgRes = await fetch(\`\${BASE}/api/config\`);
   if (!cfgRes.ok) throw new Error(\`/api/config failed: \${cfgRes.status}\`);
-  const { license, resourceBase } = await cfgRes.json();
+  const { license, resourceBase, cesdkEngineUrl } = await cfgRes.json();
 
-  const cesdkMod =
-    await import('https://cdn.img.ly/packages/imgly/cesdk-js/1.77.0-rc.4/index.js');
+  const cesdkMod = await import(cesdkEngineUrl);
   const CreativeEditorSDK = cesdkMod.default ?? cesdkMod.CreativeEditorSDK;
   const instance = await CreativeEditorSDK.create(
     document.getElementById('cesdk'),

package/dist/viewer/spa-assets.generated.js.map

@@ -1 +1 @@
-{"version":3,"file":"spa-assets.generated.js","sourceRoot":"","sources":["../../src/viewer/spa-assets.generated.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,MAAM,CAAC,MAAM,UAAU,GAA2B;IACjD,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Td;IACA,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwMrB;IACA,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIf;IACA,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFb;IACA,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Pb;CACA,CAAC","sourcesContent":["// AUTO-GENERATED by scripts/generate-spa-assets.mjs. Do not edit by hand.\nexport const SPA_ASSETS: Record<string, string> = {\n\t\"index.html\": `<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>codesign viewer</title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <!-- Mount prefix injected by the viewer router (router.ts). \"\" on the stdio\n         listener, \"/viewer\" on the HTTP transport. Read by viewer.js. -->\n    <script>\n      window.__VIEWER_BASE__ = '{{VIEWER_BASE}}';\n    </script>\n    <style>\n      /* -------- reset & canvas -------- */\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        height: 100%;\n        width: 100%;\n        background: #1d1d1f;\n        color: #eee;\n        font-family: -apple-system, system-ui, sans-serif;\n      }\n      #cesdk {\n        position: fixed;\n        inset: 0;\n      }\n\n      /* -------- pill base (spec §7) -------- */\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 6px 11px;\n        border-radius: 999px;\n        font:\n          500 12px -apple-system,\n          system-ui,\n          sans-serif;\n        color: #e8e8e8;\n        background: rgba(20, 20, 22, 0.72);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);\n        text-decoration: none;\n        cursor: pointer;\n        white-space: nowrap;\n      }\n      .pill.icon {\n        padding: 6px 9px;\n      }\n      .pill:hover {\n        background: rgba(30, 30, 33, 0.82);\n      }\n\n      /* -------- cluster anchors -------- */\n      #bar-left,\n      #bar-right {\n        position: fixed;\n        top: 14px;\n        z-index: 10;\n        display: flex;\n        gap: 8px;\n      }\n      #bar-left {\n        left: 14px;\n      }\n      #bar-right {\n        right: 14px;\n      }\n\n      /* -------- title pill --------\n\t\t\t   Non-interactive (no click handler) — override .pill's cursor + hover so\n\t\t\t   the title visually matches its actual behavior. For a local MCP the URL\n\t\t\t   isn't shareable, so there's nothing useful to copy. Revisit when a\n\t\t\t   remote MCP ships — copy-share-URL is the natural fit there. */\n      #title {\n        font-weight: 600;\n        max-width: 240px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        cursor: default;\n      }\n      #title:hover {\n        background: rgba(20, 20, 22, 0.72);\n      }\n\n      /* -------- LIVE pill (read-only) -------- */\n      .pill.live {\n        color: #c8e6c9;\n        cursor: default;\n      }\n      .pill.live:hover {\n        background: rgba(20, 20, 22, 0.72);\n      }\n      .pill.live::before {\n        content: '';\n        width: 6px;\n        height: 6px;\n        border-radius: 999px;\n        background: #34c759;\n        box-shadow: 0 0 5px rgba(52, 199, 89, 0.55);\n      }\n\n      /* -------- hash chip -------- */\n      .pill.hash {\n        font-family: ui-monospace, monospace;\n        font-size: 11px;\n        color: #b8b8b8;\n      }\n\n      /* -------- Go Live pill + count badge -------- */\n      .pill.golive {\n        color: #9ec8ff;\n      }\n      .pill.golive .count {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        min-width: 16px;\n        height: 16px;\n        padding: 0 4px;\n        border-radius: 999px;\n        background: #2b6cb0;\n        color: #fff;\n        font-size: 10px;\n        font-weight: 600;\n        margin-left: 4px;\n      }\n\n      /* -------- History pill -------- */\n      .pill.history::before {\n        content: '⎇';\n        opacity: 0.8;\n      }\n      .pill.history.active,\n      .pill.history.active:hover {\n        background: rgba(43, 108, 176, 0.85);\n        border-color: rgba(43, 108, 176, 0.95);\n        color: #fff;\n      }\n\n      /* -------- floating history panel (spec §6) -------- */\n      #revision-panel {\n        position: fixed;\n        top: 62px;\n        right: 14px;\n        bottom: 14px;\n        width: 280px;\n        background: rgba(20, 20, 22, 0.88);\n        backdrop-filter: blur(16px);\n        -webkit-backdrop-filter: blur(16px);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 12px;\n        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);\n        box-sizing: border-box;\n        overflow-y: auto;\n        display: none;\n        opacity: 0;\n        transform: translateX(8px);\n        z-index: 10;\n      }\n      body.panel-open #revision-panel {\n        display: block;\n      }\n      @media (prefers-reduced-motion: no-preference) {\n        #revision-panel {\n          transition:\n            opacity 160ms ease-out,\n            transform 160ms ease-out;\n        }\n        body.panel-open #revision-panel {\n          opacity: 1;\n          transform: translateX(0);\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        body.panel-open #revision-panel {\n          opacity: 1;\n          transform: none;\n        }\n      }\n\n      /* -------- panel internals (polish pass) -------- */\n      .rp-header {\n        padding: 12px 14px 10px;\n        font-size: 10px;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #888;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n      }\n      .rp-tree {\n        padding: 8px 6px;\n      }\n      .rp-empty {\n        padding: 16px 14px;\n        font-size: 12px;\n        color: #888;\n      }\n\n      .rp-node {\n        display: block;\n        text-decoration: none;\n        color: inherit;\n        padding: 6px 8px;\n        border-radius: 6px;\n      }\n      .rp-node:hover {\n        background: rgba(255, 255, 255, 0.04);\n      }\n      .rp-node.rp-current {\n        background: rgba(30, 47, 68, 0.6);\n        box-shadow: inset 2px 0 0 #4a9eff;\n      }\n      .rp-node-row {\n        display: flex;\n        gap: 8px;\n        align-items: baseline;\n      }\n      .rp-elbow {\n        color: #555;\n        flex: none;\n      }\n      .rp-dot {\n        flex: none;\n        width: 12px;\n        text-align: center;\n        font-size: 10px;\n        color: #888;\n      }\n      .rp-node.rp-head .rp-dot {\n        color: #4a9eff;\n      }\n      .rp-node.rp-branch .rp-dot {\n        color: #d6973f;\n      }\n      .rp-body {\n        flex: 1;\n        min-width: 0;\n      }\n      .rp-id {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-family: ui-monospace, monospace;\n        font-size: 10px;\n        color: #888;\n      }\n      .rp-tag {\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        border-radius: 4px;\n        padding: 0 4px;\n        font-size: 9px;\n      }\n      .rp-tag.rp-tag-head {\n        background: rgba(43, 108, 176, 0.85);\n        border-color: rgba(43, 108, 176, 0.95);\n        color: #fff;\n      }\n      .rp-tag.rp-tag-fork {\n        color: #d6973f;\n        border-color: rgba(214, 151, 63, 0.35);\n      }\n      .rp-note {\n        font-size: 12px;\n        color: #eee;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .rp-time {\n        font-size: 10px;\n        color: #777;\n      }\n      .rp-node.rp-current .rp-time::after {\n        content: ' · on canvas';\n        color: #4a9eff;\n      }\n      .rp-copy {\n        font: inherit;\n        font-size: 9px;\n        color: #ccc;\n        background: rgba(20, 20, 22, 0.72);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 999px;\n        padding: 2px 7px;\n        cursor: pointer;\n        opacity: 0;\n        margin-left: auto;\n        transition:\n          opacity 120ms ease-out,\n          background 120ms ease-out;\n      }\n      .rp-node:hover .rp-copy {\n        opacity: 1;\n      }\n      .rp-copy:hover {\n        background: rgba(30, 30, 33, 0.82);\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"cesdk\"></div>\n    <div id=\"bar-left\">\n      <a id=\"back\" class=\"pill icon\" href=\"{{VIEWER_BASE}}/\">←</a>\n      <span id=\"title\" class=\"pill\">loading…</span>\n    </div>\n    <div id=\"bar-right\"></div>\n    <aside id=\"revision-panel\"></aside>\n    <script type=\"module\" src=\"{{VIEWER_BASE}}/static/viewer.js\"></script>\n  </body>\n</html>\n`,\n\t\"revision-panel.js\": `// revision-panel.js — the in-viewer revision history panel. Fetches a design's\n// full revision tree from /api/design/<root>/revisions and renders it; clicking\n// a node asks the viewer to navigate there. The viewer drives setCurrent()\n// (highlight) and refresh() (re-fetch on SSE).\n//\n// All DOM is built with createElement + textContent: revision notes are\n// agent-authored text and must never reach innerHTML.\n\n// Mount prefix set by index.html (\"\" on stdio, \"/viewer\" on HTTP); node hrefs\n// and the revisions fetch are built relative to it. See router.ts.\nconst BASE = window.__VIEWER_BASE__ ?? '';\n\nexport function createRevisionPanel({ container, root, onNavigate, onCount }) {\n  let currentRev = null;\n\n  function relTime(ms) {\n    const s = Math.max(0, Math.round((Date.now() - ms) / 1000));\n    if (s < 60) return \\`\\${s}s ago\\`;\n    const m = Math.round(s / 60);\n    if (m < 60) return \\`\\${m}m ago\\`;\n    const h = Math.round(m / 60);\n    if (h < 24) return \\`\\${h}h ago\\`;\n    return \\`\\${Math.round(h / 24)}d ago\\`;\n  }\n\n  // Depth-first walk. At each node the spine child (or, off-spine, the latest\n  // child) continues at the same depth; other children are branches at\n  // depth + 1, emitted before the continuation so the spine reads top-to-bottom.\n  function order(nodes) {\n    const byId = new Map(nodes.map((n) => [n.id, n]));\n    const children = new Map();\n    for (const n of nodes) {\n      if (n.parent != null) {\n        const sibs = children.get(n.parent) ?? [];\n        sibs.push(n);\n        children.set(n.parent, sibs);\n      }\n    }\n    for (const sibs of children.values())\n      sibs.sort((a, b) => a.createdAt - b.createdAt);\n    const rootNode = nodes.find((n) => n.parent === null);\n    const head = nodes.reduce((a, b) => (b.createdAt > a.createdAt ? b : a));\n    const spine = new Set();\n    for (let n = head; n; n = n.parent != null ? byId.get(n.parent) : null)\n      spine.add(n.id);\n    const out = [];\n    function walk(node, depth) {\n      out.push({\n        node,\n        depth,\n        isHead: node.id === head.id,\n        isRoot: node.parent === null\n      });\n      const kids = children.get(node.id) ?? [];\n      if (kids.length === 0) return;\n      const primary =\n        kids.find((k) => spine.has(k.id)) ?? kids[kids.length - 1];\n      for (const k of kids) if (k !== primary) walk(k, depth + 1);\n      walk(primary, depth);\n    }\n    if (rootNode) walk(rootNode, 0);\n    return out;\n  }\n\n  function tag(text, cls) {\n    const el = document.createElement('span');\n    el.className = cls ? \\`rp-tag \\${cls}\\` : 'rp-tag';\n    el.textContent = text;\n    return el;\n  }\n\n  function makeNode({ node, depth, isHead, isRoot }) {\n    const a = document.createElement('a');\n    a.className = \\`rp-node\\${depth > 0 ? ' rp-branch' : ''}\\${isHead ? ' rp-head' : ''}\\`;\n    if (isRoot) a.dataset.root = '';\n    a.dataset.rev = node.id;\n    a.href = \\`\\${BASE}/d/\\${root}/\\${node.id}\\`;\n    a.style.marginLeft = \\`\\${depth * 16}px\\`;\n    if (node.id === currentRev) a.classList.add('rp-current');\n\n    const row = document.createElement('div');\n    row.className = 'rp-node-row';\n    if (depth > 0) {\n      const elbow = document.createElement('span');\n      elbow.className = 'rp-elbow';\n      elbow.textContent = '└';\n      row.appendChild(elbow);\n    }\n    const dot = document.createElement('span');\n    dot.className = 'rp-dot';\n    dot.textContent = '●';\n    row.appendChild(dot);\n\n    const body = document.createElement('div');\n    body.className = 'rp-body';\n\n    const idLine = document.createElement('div');\n    idLine.className = 'rp-id';\n    const idText = document.createElement('span');\n    idText.textContent = node.id.slice(0, 7);\n    idLine.appendChild(idText);\n    if (isRoot) idLine.appendChild(tag('root', ''));\n    if (isHead) idLine.appendChild(tag('head', 'rp-tag-head'));\n    if (depth > 0) idLine.appendChild(tag('⑂ fork', 'rp-tag-fork'));\n\n    const copy = document.createElement('button');\n    copy.type = 'button';\n    copy.className = 'rp-copy';\n    copy.textContent = '⧉ copy id';\n    copy.addEventListener('click', async (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n      try {\n        await navigator.clipboard?.writeText(node.id);\n        copy.textContent = 'copied';\n        setTimeout(() => {\n          copy.textContent = '⧉ copy id';\n        }, 1200);\n      } catch {\n        /* clipboard unavailable — fail quietly (spec §6) */\n      }\n    });\n    idLine.appendChild(copy);\n    body.appendChild(idLine);\n\n    const note = document.createElement('div');\n    note.className = 'rp-note';\n    note.textContent = node.note || '(no note)';\n    note.title = node.note || '';\n    body.appendChild(note);\n\n    const time = document.createElement('div');\n    time.className = 'rp-time';\n    time.textContent = relTime(node.createdAt);\n    body.appendChild(time);\n\n    row.appendChild(body);\n    a.appendChild(row);\n\n    a.addEventListener('click', (e) => {\n      // Modified clicks (⌘/Ctrl/Shift/middle) fall through to the browser,\n      // which opens the pinned /d/<root>/<rev> href in a new tab.\n      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)\n        return;\n      e.preventDefault();\n      onNavigate(node.id);\n    });\n    return a;\n  }\n\n  function paint(nodes) {\n    container.replaceChildren();\n    const header = document.createElement('div');\n    header.className = 'rp-header';\n    header.textContent = 'Revisions';\n    container.appendChild(header);\n    if (nodes.length === 0) {\n      const empty = document.createElement('div');\n      empty.className = 'rp-empty';\n      empty.textContent = 'no revisions yet';\n      container.appendChild(empty);\n      return;\n    }\n    const tree = document.createElement('div');\n    tree.className = 'rp-tree';\n    for (const item of order(nodes)) tree.appendChild(makeNode(item));\n    container.appendChild(tree);\n  }\n\n  function showError(message) {\n    container.replaceChildren();\n    const el = document.createElement('div');\n    el.className = 'rp-empty';\n    el.textContent = message;\n    container.appendChild(el);\n  }\n\n  async function refresh() {\n    try {\n      const res = await fetch(\\`\\${BASE}/api/design/\\${root}/revisions\\`);\n      if (!res.ok) throw new Error(String(res.status));\n      const nodes = await res.json();\n      paint(nodes);\n      onCount(nodes.length);\n    } catch {\n      showError(\"couldn't load history\");\n      onCount(0);\n    }\n  }\n\n  function setCurrent(rev) {\n    currentRev = rev;\n    for (const el of container.querySelectorAll('.rp-node')) {\n      el.classList.toggle('rp-current', el.dataset.rev === rev);\n    }\n  }\n\n  refresh();\n  return { setCurrent, refresh };\n}\n`,\n\t\"studio.html\": `<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>IMG.LY CODESIGN MCP Workspace</title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <!-- Mount prefix injected by the viewer router (router.ts). \"\" on the stdio\n         listener, \"/viewer\" on the HTTP transport. Read by studio.js. -->\n    <script>\n      window.__VIEWER_BASE__ = '{{VIEWER_BASE}}';\n    </script>\n    <style>\n      /* -------- reset --------\n\t\t\t   Same palette + typography as the viewer SPA so the overview reads\n\t\t\t   as part of the same product. See src/viewer/spa/index.html. */\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        min-height: 100%;\n        background: #1d1d1f;\n        color: #eee;\n        font-family: -apple-system, system-ui, sans-serif;\n      }\n\n      /* -------- sticky frosted strip --------\n\t\t\t   Same frosted-glass material as the viewer pills + history panel:\n\t\t\t   translucent dark + backdrop-blur + 1px hairline border. Sticky so\n\t\t\t   the title stays visible while scrolling. */\n      #bar {\n        position: sticky;\n        top: 0;\n        z-index: 10;\n        padding: 14px 24px;\n        background: rgba(20, 20, 22, 0.72);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n      }\n      #bar .title {\n        font:\n          600 14px -apple-system,\n          system-ui,\n          sans-serif;\n        letter-spacing: 0.02em;\n        color: #e8e8e8;\n      }\n\n      /* -------- design grid -------- */\n      .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n        gap: 16px;\n        padding: 24px;\n      }\n\n      .empty {\n        padding: 24px 4px;\n        font-size: 13px;\n        color: #888;\n      }\n      .empty code {\n        font-family: ui-monospace, monospace;\n        background: rgba(255, 255, 255, 0.05);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 4px;\n        padding: 1px 6px;\n        font-size: 12px;\n        color: #cfcfcf;\n      }\n\n      /* -------- card --------\n\t\t\t   Frosted-glass card, same materials as the history panel rows.\n\t\t\t   Hover lifts the card and brightens the border + shadow to match the\n\t\t\t   pill-hover pattern in the viewer chrome. */\n      .card {\n        display: block;\n        text-decoration: none;\n        color: inherit;\n        background: rgba(20, 20, 22, 0.72);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 12px;\n        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);\n        overflow: hidden;\n        transition:\n          transform 120ms ease-out,\n          border-color 120ms ease-out,\n          box-shadow 120ms ease-out;\n      }\n      .card:hover {\n        transform: translateY(-2px);\n        border-color: rgba(255, 255, 255, 0.15);\n        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);\n      }\n      .card img {\n        display: block;\n        width: 100%;\n        aspect-ratio: 4/3;\n        object-fit: cover;\n        background: #000;\n      }\n      .card .meta {\n        padding: 12px 14px;\n      }\n      .card .title {\n        font:\n          600 13px -apple-system,\n          system-ui,\n          sans-serif;\n        color: #eee;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .card .updated {\n        margin-top: 4px;\n        font-size: 11px;\n        color: #888;\n      }\n    </style>\n  </head>\n  <body>\n    <header id=\"bar\">\n      <span class=\"title\">IMG.LY CODESIGN MCP Workspace</span>\n    </header>\n    <div id=\"grid\" class=\"grid\"></div>\n    <script type=\"module\" src=\"{{VIEWER_BASE}}/static/studio.js\"></script>\n  </body>\n</html>\n`,\n\t\"studio.js\": `// Workspace overview landing page. Fetches /api/designs and renders one card\n// per design (keyed by root revision). Re-renders on tab focus and a 10s poll\n// so card links and thumbnails never go stale after the agent edits.\n//\n// DOM is built with createElement + textContent (never innerHTML for\n// design-supplied strings) so an author-controlled title can't escape into\n// HTML. Same pattern as viewer.js.\n\n// Mount prefix set by studio.html (\"\" on stdio, \"/viewer\" on HTTP); card\n// links, thumbnails, and the designs fetch are built relative to it. See\n// router.ts.\nconst BASE = window.__VIEWER_BASE__ ?? '';\n\nconst grid = document.getElementById('grid');\n\nfunction buildCard(d) {\n  const card = document.createElement('a');\n  card.className = 'card';\n  card.href = \\`\\${BASE}/d/\\${d.rootRevision}\\`;\n\n  const img = document.createElement('img');\n  img.src = \\`\\${BASE}/snapshot/\\${d.latestLeaf}/thumbnail\\`;\n  img.alt = '';\n  img.addEventListener('error', () => {\n    img.style.display = 'none';\n  });\n  card.appendChild(img);\n\n  const meta = document.createElement('div');\n  meta.className = 'meta';\n\n  const title = document.createElement('div');\n  title.className = 'title';\n  title.textContent = d.title || 'Untitled';\n  meta.appendChild(title);\n\n  const updated = document.createElement('div');\n  updated.className = 'updated';\n  updated.textContent = \\`updated \\${new Date(d.updatedAt).toLocaleString()}\\`;\n  meta.appendChild(updated);\n\n  card.appendChild(meta);\n  return card;\n}\n\nfunction renderEmptyText(text) {\n  const div = document.createElement('div');\n  div.className = 'empty';\n  div.textContent = text;\n  grid.replaceChildren(div);\n}\n\nfunction renderFirstRunEmpty() {\n  const div = document.createElement('div');\n  div.className = 'empty';\n  div.appendChild(document.createTextNode('No designs yet — your first '));\n  const code = document.createElement('code');\n  code.textContent = 'edit({ parent: null, ... })';\n  div.appendChild(code);\n  div.appendChild(document.createTextNode(' will land here.'));\n  grid.replaceChildren(div);\n}\n\nasync function render() {\n  const res = await fetch(\\`\\${BASE}/api/designs\\`);\n  if (!res.ok) {\n    renderEmptyText(\\`failed to load designs: \\${res.status}\\`);\n    return;\n  }\n  const designs = await res.json();\n  if (designs.length === 0) {\n    renderFirstRunEmpty();\n    return;\n  }\n  grid.replaceChildren(...designs.map(buildCard));\n}\n\n// \\`render()\\` rejects on a network error; every caller logs it rather than\n// leaving an unhandled promise rejection.\nawait render().catch(console.error);\ndocument.addEventListener('visibilitychange', () => {\n  if (!document.hidden) render().catch(console.error);\n});\nsetInterval(() => render().catch(console.error), 10000);\n`,\n\t\"viewer.js\": `// Read-only CE.SDK viewer with a revision-history side panel.\n//   /d/<root>        LIVE   — opens at the design head, follows new revisions\n//   /d/<root>/<rev>  PINNED — opens frozen at <rev>\n//\n// Chrome is floating pill clusters in the corners; the history panel is a\n// detached card on the right.\n// See: docs/superpowers/specs/2026-05-24-viewer-ui-refresh-design.md\n//\n// Navigation is client-side: clicking a panel node (or the \"Go Live →\"\n// affordance) swaps the canvas and rewrites the URL via the History API — one\n// CE.SDK instance for the life of the tab. The SSE connection is held open\n// in BOTH modes so the panel's tree always stays fresh; it moves the canvas\n// only while \\`following\\`.\n\n// Mount prefix set by index.html (\"\" on stdio, \"/viewer\" on HTTP). Every\n// API/asset/history URL below is built relative to it so the SPA works under\n// any mount path. See router.ts.\nconst BASE = window.__VIEWER_BASE__ ?? '';\n\n// Path of the current page with the mount prefix stripped, so PATH_RE (which\n// is written relative to the SPA root) matches under \"/viewer\" too.\nconst relPath = () =>\n  location.pathname.startsWith(BASE)\n    ? location.pathname.slice(BASE.length)\n    : location.pathname;\n\nconst { createRevisionPanel } = await import(\n  \\`\\${BASE}/static/revision-panel.js\\`\n);\n\nconst PATH_RE = /^\\\\/d\\\\/([0-9a-f]{12})(?:\\\\/([0-9a-f]{12}))?$/;\nconst titleEl = document.getElementById('title');\nconst barRightEl = document.getElementById('bar-right');\nconst panelEl = document.getElementById('revision-panel');\n\nconst match = relPath().match(PATH_RE);\n\nif (!match) {\n  titleEl.textContent = 'invalid URL';\n} else {\n  const root = match[1];\n\n  // Server-supplied license + resource base, fetched before bootstrapping\n  // CE.SDK. CE.SDK validates the license regardless of role; \\`resourceBase\\`\n  // is where workspace:// asset URIs resolve.\n  const cfgRes = await fetch(\\`\\${BASE}/api/config\\`);\n  if (!cfgRes.ok) throw new Error(\\`/api/config failed: \\${cfgRes.status}\\`);\n  const { license, resourceBase } = await cfgRes.json();\n\n  const cesdkMod =\n    await import('https://cdn.img.ly/packages/imgly/cesdk-js/1.77.0-rc.4/index.js');\n  const CreativeEditorSDK = cesdkMod.default ?? cesdkMod.CreativeEditorSDK;\n  const instance = await CreativeEditorSDK.create(\n    document.getElementById('cesdk'),\n    {\n      license,\n      role: 'Viewer',\n      theme: 'dark',\n      // The refresh moved all chrome out of CE.SDK and into our own floating\n      // pills + history panel — back / title / LIVE / Go Live / hash / History.\n      // CE.SDK's own nav + dock would render in the same physical space and,\n      // because #cesdk has no stacking context, their internal z-indexes\n      // outrank our z:10 pills, hiding them. \\`ui.hide: true\\` disables the\n      // CE.SDK chrome entirely; users keep mousewheel zoom + drag-to-pan via\n      // the engine, which is unaffected.\n      ui: { hide: true }\n    }\n  );\n\n  // Resolve workspace:// asset URIs to the /r/ HTTP route.\n  const absResourceBase = location.origin + resourceBase;\n  instance.engine.editor.setURIResolver((uri, defaultResolver) =>\n    uri.startsWith('workspace://')\n      ? absResourceBase + uri.slice('workspace://'.length)\n      : defaultResolver(uri)\n  );\n\n  // --- runtime state ----------------------------------------------------\n  let head = null; // the design's latest leaf\n  let currentRev = null; // the revision currently on canvas\n  let following = false; // true → the canvas tracks head as SSE arrives\n  let newCount = 0; // revisions arrived since following stopped\n  let panelOpen = false; // whether the history panel is visible\n\n  async function loadRevision(rev) {\n    const res = await fetch(\\`\\${BASE}/snapshot/\\${rev}\\`);\n    if (!res.ok) throw new Error(\\`snapshot \\${rev} \\${res.status}\\`);\n    const snap = await res.json();\n    await instance.engine.scene.loadFromString(snap.scene);\n    titleEl.textContent = snap.title ?? 'Untitled';\n  }\n\n  // Builds the right-side cluster from current state. Idempotent — called on\n  // every mode flip, panel toggle, and newCount change. Uses createElement +\n  // textContent everywhere (never innerHTML) so any author-supplied strings\n  // can't escape into HTML.\n  function renderRightCluster() {\n    const nodes = [];\n\n    if (following) {\n      // LIVE — read-only green-dot pill.\n      const live = document.createElement('span');\n      live.className = 'pill live';\n      live.textContent = 'LIVE';\n      nodes.push(live);\n    } else {\n      // PINNED — hash chip (click-to-copy) + Go Live (+ count badge).\n      const hash = document.createElement('button');\n      hash.type = 'button';\n      hash.className = 'pill hash';\n      hash.title = 'copy revision id';\n      hash.textContent = currentRev ? currentRev.slice(0, 7) : '';\n      hash.addEventListener('click', async () => {\n        if (!currentRev) return;\n        try {\n          await navigator.clipboard?.writeText(currentRev);\n        } catch {\n          /* clipboard unavailable — fail quietly (matches .rp-copy) */\n        }\n      });\n      nodes.push(hash);\n\n      const golive = document.createElement('button');\n      golive.type = 'button';\n      golive.className = 'pill golive';\n      golive.appendChild(document.createTextNode('Go Live →'));\n      if (newCount > 0) {\n        const count = document.createElement('span');\n        count.className = 'count';\n        count.textContent = String(newCount);\n        golive.appendChild(count);\n      }\n      golive.addEventListener('click', (e) => {\n        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)\n          return;\n        e.preventDefault();\n        if (head) show(head, { following: true, historyMode: 'push' });\n      });\n      nodes.push(golive);\n    }\n\n    const history = document.createElement('button');\n    history.type = 'button';\n    history.className = \\`pill history\\${panelOpen ? ' active' : ''}\\`;\n    history.textContent = 'History';\n    history.addEventListener('click', () => setPanelOpen(!panelOpen));\n    nodes.push(history);\n\n    barRightEl.replaceChildren(...nodes);\n  }\n\n  function setPanelOpen(open) {\n    panelOpen = open;\n    document.body.classList.toggle('panel-open', open);\n    renderRightCluster();\n  }\n\n  // The single navigation primitive. Loads \\`rev\\` onto the canvas, sets the\n  // LIVE/PINNED state, and writes the URL. \\`historyMode\\`: \"push\" adds a\n  // history entry, \"replace\" rewrites in place, \"none\" leaves history alone\n  // (used by popstate, where the browser already changed the URL).\n  async function show(rev, { following: nextFollowing, historyMode }) {\n    try {\n      await loadRevision(rev);\n      currentRev = rev;\n      following = nextFollowing;\n      if (following) newCount = 0;\n      const url = following ? \\`\\${BASE}/d/\\${root}\\` : \\`\\${BASE}/d/\\${root}/\\${rev}\\`;\n      if (historyMode === 'push') window.history.pushState({ rev }, '', url);\n      else if (historyMode === 'replace')\n        window.history.replaceState({ rev }, '', url);\n      panel.setCurrent(rev);\n    } catch {\n      titleEl.textContent = 'unknown revision';\n    }\n    renderRightCluster();\n  }\n\n  // --- revision panel ---------------------------------------------------\n  const panel = createRevisionPanel({\n    container: panelEl,\n    root,\n    // Clicking a node pins it — unless it is the head, which is LIVE.\n    onNavigate: (rev) =>\n      show(rev, { following: rev === head, historyMode: 'push' }),\n    onCount: () => {\n      /* The History pill no longer carries the total count; the unseen-since-\n\t\t\t   pin count lives on Go Live and is driven by \\`newCount\\` directly. */\n    }\n  });\n\n  // --- keyboard ---------------------------------------------------------\n  window.addEventListener('keydown', (e) => {\n    if (e.key === 'Escape' && panelOpen) setPanelOpen(false);\n  });\n\n  // --- bootstrap --------------------------------------------------------\n  let latestLeaf;\n  try {\n    const res = await fetch(\\`\\${BASE}/api/design/\\${root}\\`);\n    if (!res.ok) throw new Error(String(res.status));\n    latestLeaf = (await res.json()).latestLeaf;\n  } catch {\n    titleEl.textContent = 'unknown design';\n  }\n\n  if (latestLeaf !== undefined) {\n    head = latestLeaf;\n    const pinned = match[2]; // undefined → LIVE\n    // Mode is the URL shape: a pinned URL stays pinned even if <rev> is head.\n    await show(pinned ?? head, {\n      following: pinned === undefined,\n      historyMode: 'replace'\n    });\n\n    // SSE — held open for the life of the tab, in both modes. Every event\n    // refreshes the panel's tree; it moves the canvas only while following.\n    const es = new EventSource(\\`\\${BASE}/sse/\\${root}\\`);\n    es.onmessage = (ev) => {\n      let payload;\n      try {\n        payload = JSON.parse(ev.data);\n      } catch (err) {\n        console.error('sse parse failed', err);\n        return;\n      }\n      if (!payload || typeof payload.revision !== 'string') return;\n      head = payload.revision;\n      panel.refresh();\n      if (following) {\n        show(head, { following: true, historyMode: 'replace' });\n      } else {\n        newCount += 1;\n        renderRightCluster();\n      }\n    };\n  }\n\n  // Browser back/forward: re-resolve the URL shape and sync, without writing\n  // history (the entry already changed).\n  window.addEventListener('popstate', () => {\n    const m = relPath().match(PATH_RE);\n    if (!m || m[1] !== root) return;\n    const pinned = m[2];\n    show(pinned ?? head, {\n      following: pinned === undefined,\n      historyMode: 'none'\n    });\n  });\n}\n`,\n};\n"]}
+{"version":3,"file":"spa-assets.generated.js","sourceRoot":"","sources":["../../src/viewer/spa-assets.generated.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,MAAM,CAAC,MAAM,UAAU,GAA2B;IACjD,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2Td;IACA,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwMrB;IACA,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIf;IACA,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFb;IACA,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyPb;CACA,CAAC","sourcesContent":["// AUTO-GENERATED by scripts/generate-spa-assets.mjs. Do not edit by hand.\nexport const SPA_ASSETS: Record<string, string> = {\n\t\"index.html\": `<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>codesign viewer</title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <!-- Mount prefix injected by the viewer router (router.ts). \"\" on the stdio\n         listener, \"/viewer\" on the HTTP transport. Read by viewer.js. -->\n    <script>\n      window.__VIEWER_BASE__ = '{{VIEWER_BASE}}';\n    </script>\n    <style>\n      /* -------- reset & canvas -------- */\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        height: 100%;\n        width: 100%;\n        background: #1d1d1f;\n        color: #eee;\n        font-family: -apple-system, system-ui, sans-serif;\n      }\n      #cesdk {\n        position: fixed;\n        inset: 0;\n      }\n\n      /* -------- pill base (spec §7) -------- */\n      .pill {\n        display: inline-flex;\n        align-items: center;\n        gap: 5px;\n        padding: 6px 11px;\n        border-radius: 999px;\n        font:\n          500 12px -apple-system,\n          system-ui,\n          sans-serif;\n        color: #e8e8e8;\n        background: rgba(20, 20, 22, 0.72);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);\n        text-decoration: none;\n        cursor: pointer;\n        white-space: nowrap;\n      }\n      .pill.icon {\n        padding: 6px 9px;\n      }\n      .pill:hover {\n        background: rgba(30, 30, 33, 0.82);\n      }\n\n      /* -------- cluster anchors -------- */\n      #bar-left,\n      #bar-right {\n        position: fixed;\n        top: 14px;\n        z-index: 10;\n        display: flex;\n        gap: 8px;\n      }\n      #bar-left {\n        left: 14px;\n      }\n      #bar-right {\n        right: 14px;\n      }\n\n      /* -------- title pill --------\n\t\t\t   Non-interactive (no click handler) — override .pill's cursor + hover so\n\t\t\t   the title visually matches its actual behavior. For a local MCP the URL\n\t\t\t   isn't shareable, so there's nothing useful to copy. Revisit when a\n\t\t\t   remote MCP ships — copy-share-URL is the natural fit there. */\n      #title {\n        font-weight: 600;\n        max-width: 240px;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        cursor: default;\n      }\n      #title:hover {\n        background: rgba(20, 20, 22, 0.72);\n      }\n\n      /* -------- LIVE pill (read-only) -------- */\n      .pill.live {\n        color: #c8e6c9;\n        cursor: default;\n      }\n      .pill.live:hover {\n        background: rgba(20, 20, 22, 0.72);\n      }\n      .pill.live::before {\n        content: '';\n        width: 6px;\n        height: 6px;\n        border-radius: 999px;\n        background: #34c759;\n        box-shadow: 0 0 5px rgba(52, 199, 89, 0.55);\n      }\n\n      /* -------- hash chip -------- */\n      .pill.hash {\n        font-family: ui-monospace, monospace;\n        font-size: 11px;\n        color: #b8b8b8;\n      }\n\n      /* -------- Go Live pill + count badge -------- */\n      .pill.golive {\n        color: #9ec8ff;\n      }\n      .pill.golive .count {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        min-width: 16px;\n        height: 16px;\n        padding: 0 4px;\n        border-radius: 999px;\n        background: #2b6cb0;\n        color: #fff;\n        font-size: 10px;\n        font-weight: 600;\n        margin-left: 4px;\n      }\n\n      /* -------- History pill -------- */\n      .pill.history::before {\n        content: '⎇';\n        opacity: 0.8;\n      }\n      .pill.history.active,\n      .pill.history.active:hover {\n        background: rgba(43, 108, 176, 0.85);\n        border-color: rgba(43, 108, 176, 0.95);\n        color: #fff;\n      }\n\n      /* -------- floating history panel (spec §6) -------- */\n      #revision-panel {\n        position: fixed;\n        top: 62px;\n        right: 14px;\n        bottom: 14px;\n        width: 280px;\n        background: rgba(20, 20, 22, 0.88);\n        backdrop-filter: blur(16px);\n        -webkit-backdrop-filter: blur(16px);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 12px;\n        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.42);\n        box-sizing: border-box;\n        overflow-y: auto;\n        display: none;\n        opacity: 0;\n        transform: translateX(8px);\n        z-index: 10;\n      }\n      body.panel-open #revision-panel {\n        display: block;\n      }\n      @media (prefers-reduced-motion: no-preference) {\n        #revision-panel {\n          transition:\n            opacity 160ms ease-out,\n            transform 160ms ease-out;\n        }\n        body.panel-open #revision-panel {\n          opacity: 1;\n          transform: translateX(0);\n        }\n      }\n      @media (prefers-reduced-motion: reduce) {\n        body.panel-open #revision-panel {\n          opacity: 1;\n          transform: none;\n        }\n      }\n\n      /* -------- panel internals (polish pass) -------- */\n      .rp-header {\n        padding: 12px 14px 10px;\n        font-size: 10px;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #888;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n      }\n      .rp-tree {\n        padding: 8px 6px;\n      }\n      .rp-empty {\n        padding: 16px 14px;\n        font-size: 12px;\n        color: #888;\n      }\n\n      .rp-node {\n        display: block;\n        text-decoration: none;\n        color: inherit;\n        padding: 6px 8px;\n        border-radius: 6px;\n      }\n      .rp-node:hover {\n        background: rgba(255, 255, 255, 0.04);\n      }\n      .rp-node.rp-current {\n        background: rgba(30, 47, 68, 0.6);\n        box-shadow: inset 2px 0 0 #4a9eff;\n      }\n      .rp-node-row {\n        display: flex;\n        gap: 8px;\n        align-items: baseline;\n      }\n      .rp-elbow {\n        color: #555;\n        flex: none;\n      }\n      .rp-dot {\n        flex: none;\n        width: 12px;\n        text-align: center;\n        font-size: 10px;\n        color: #888;\n      }\n      .rp-node.rp-head .rp-dot {\n        color: #4a9eff;\n      }\n      .rp-node.rp-branch .rp-dot {\n        color: #d6973f;\n      }\n      .rp-body {\n        flex: 1;\n        min-width: 0;\n      }\n      .rp-id {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        font-family: ui-monospace, monospace;\n        font-size: 10px;\n        color: #888;\n      }\n      .rp-tag {\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        border-radius: 4px;\n        padding: 0 4px;\n        font-size: 9px;\n      }\n      .rp-tag.rp-tag-head {\n        background: rgba(43, 108, 176, 0.85);\n        border-color: rgba(43, 108, 176, 0.95);\n        color: #fff;\n      }\n      .rp-tag.rp-tag-fork {\n        color: #d6973f;\n        border-color: rgba(214, 151, 63, 0.35);\n      }\n      .rp-note {\n        font-size: 12px;\n        color: #eee;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n      .rp-time {\n        font-size: 10px;\n        color: #777;\n      }\n      .rp-node.rp-current .rp-time::after {\n        content: ' · on canvas';\n        color: #4a9eff;\n      }\n      .rp-copy {\n        font: inherit;\n        font-size: 9px;\n        color: #ccc;\n        background: rgba(20, 20, 22, 0.72);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 999px;\n        padding: 2px 7px;\n        cursor: pointer;\n        opacity: 0;\n        margin-left: auto;\n        transition:\n          opacity 120ms ease-out,\n          background 120ms ease-out;\n      }\n      .rp-node:hover .rp-copy {\n        opacity: 1;\n      }\n      .rp-copy:hover {\n        background: rgba(30, 30, 33, 0.82);\n      }\n    </style>\n  </head>\n  <body>\n    <div id=\"cesdk\"></div>\n    <div id=\"bar-left\">\n      <a id=\"back\" class=\"pill icon\" href=\"{{VIEWER_BASE}}/\">←</a>\n      <span id=\"title\" class=\"pill\">loading…</span>\n    </div>\n    <div id=\"bar-right\"></div>\n    <aside id=\"revision-panel\"></aside>\n    <script type=\"module\" src=\"{{VIEWER_BASE}}/static/viewer.js\"></script>\n  </body>\n</html>\n`,\n\t\"revision-panel.js\": `// revision-panel.js — the in-viewer revision history panel. Fetches a design's\n// full revision tree from /api/design/<root>/revisions and renders it; clicking\n// a node asks the viewer to navigate there. The viewer drives setCurrent()\n// (highlight) and refresh() (re-fetch on SSE).\n//\n// All DOM is built with createElement + textContent: revision notes are\n// agent-authored text and must never reach innerHTML.\n\n// Mount prefix set by index.html (\"\" on stdio, \"/viewer\" on HTTP); node hrefs\n// and the revisions fetch are built relative to it. See router.ts.\nconst BASE = window.__VIEWER_BASE__ ?? '';\n\nexport function createRevisionPanel({ container, root, onNavigate, onCount }) {\n  let currentRev = null;\n\n  function relTime(ms) {\n    const s = Math.max(0, Math.round((Date.now() - ms) / 1000));\n    if (s < 60) return \\`\\${s}s ago\\`;\n    const m = Math.round(s / 60);\n    if (m < 60) return \\`\\${m}m ago\\`;\n    const h = Math.round(m / 60);\n    if (h < 24) return \\`\\${h}h ago\\`;\n    return \\`\\${Math.round(h / 24)}d ago\\`;\n  }\n\n  // Depth-first walk. At each node the spine child (or, off-spine, the latest\n  // child) continues at the same depth; other children are branches at\n  // depth + 1, emitted before the continuation so the spine reads top-to-bottom.\n  function order(nodes) {\n    const byId = new Map(nodes.map((n) => [n.id, n]));\n    const children = new Map();\n    for (const n of nodes) {\n      if (n.parent != null) {\n        const sibs = children.get(n.parent) ?? [];\n        sibs.push(n);\n        children.set(n.parent, sibs);\n      }\n    }\n    for (const sibs of children.values())\n      sibs.sort((a, b) => a.createdAt - b.createdAt);\n    const rootNode = nodes.find((n) => n.parent === null);\n    const head = nodes.reduce((a, b) => (b.createdAt > a.createdAt ? b : a));\n    const spine = new Set();\n    for (let n = head; n; n = n.parent != null ? byId.get(n.parent) : null)\n      spine.add(n.id);\n    const out = [];\n    function walk(node, depth) {\n      out.push({\n        node,\n        depth,\n        isHead: node.id === head.id,\n        isRoot: node.parent === null\n      });\n      const kids = children.get(node.id) ?? [];\n      if (kids.length === 0) return;\n      const primary =\n        kids.find((k) => spine.has(k.id)) ?? kids[kids.length - 1];\n      for (const k of kids) if (k !== primary) walk(k, depth + 1);\n      walk(primary, depth);\n    }\n    if (rootNode) walk(rootNode, 0);\n    return out;\n  }\n\n  function tag(text, cls) {\n    const el = document.createElement('span');\n    el.className = cls ? \\`rp-tag \\${cls}\\` : 'rp-tag';\n    el.textContent = text;\n    return el;\n  }\n\n  function makeNode({ node, depth, isHead, isRoot }) {\n    const a = document.createElement('a');\n    a.className = \\`rp-node\\${depth > 0 ? ' rp-branch' : ''}\\${isHead ? ' rp-head' : ''}\\`;\n    if (isRoot) a.dataset.root = '';\n    a.dataset.rev = node.id;\n    a.href = \\`\\${BASE}/d/\\${root}/\\${node.id}\\`;\n    a.style.marginLeft = \\`\\${depth * 16}px\\`;\n    if (node.id === currentRev) a.classList.add('rp-current');\n\n    const row = document.createElement('div');\n    row.className = 'rp-node-row';\n    if (depth > 0) {\n      const elbow = document.createElement('span');\n      elbow.className = 'rp-elbow';\n      elbow.textContent = '└';\n      row.appendChild(elbow);\n    }\n    const dot = document.createElement('span');\n    dot.className = 'rp-dot';\n    dot.textContent = '●';\n    row.appendChild(dot);\n\n    const body = document.createElement('div');\n    body.className = 'rp-body';\n\n    const idLine = document.createElement('div');\n    idLine.className = 'rp-id';\n    const idText = document.createElement('span');\n    idText.textContent = node.id.slice(0, 7);\n    idLine.appendChild(idText);\n    if (isRoot) idLine.appendChild(tag('root', ''));\n    if (isHead) idLine.appendChild(tag('head', 'rp-tag-head'));\n    if (depth > 0) idLine.appendChild(tag('⑂ fork', 'rp-tag-fork'));\n\n    const copy = document.createElement('button');\n    copy.type = 'button';\n    copy.className = 'rp-copy';\n    copy.textContent = '⧉ copy id';\n    copy.addEventListener('click', async (e) => {\n      e.preventDefault();\n      e.stopPropagation();\n      try {\n        await navigator.clipboard?.writeText(node.id);\n        copy.textContent = 'copied';\n        setTimeout(() => {\n          copy.textContent = '⧉ copy id';\n        }, 1200);\n      } catch {\n        /* clipboard unavailable — fail quietly (spec §6) */\n      }\n    });\n    idLine.appendChild(copy);\n    body.appendChild(idLine);\n\n    const note = document.createElement('div');\n    note.className = 'rp-note';\n    note.textContent = node.note || '(no note)';\n    note.title = node.note || '';\n    body.appendChild(note);\n\n    const time = document.createElement('div');\n    time.className = 'rp-time';\n    time.textContent = relTime(node.createdAt);\n    body.appendChild(time);\n\n    row.appendChild(body);\n    a.appendChild(row);\n\n    a.addEventListener('click', (e) => {\n      // Modified clicks (⌘/Ctrl/Shift/middle) fall through to the browser,\n      // which opens the pinned /d/<root>/<rev> href in a new tab.\n      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)\n        return;\n      e.preventDefault();\n      onNavigate(node.id);\n    });\n    return a;\n  }\n\n  function paint(nodes) {\n    container.replaceChildren();\n    const header = document.createElement('div');\n    header.className = 'rp-header';\n    header.textContent = 'Revisions';\n    container.appendChild(header);\n    if (nodes.length === 0) {\n      const empty = document.createElement('div');\n      empty.className = 'rp-empty';\n      empty.textContent = 'no revisions yet';\n      container.appendChild(empty);\n      return;\n    }\n    const tree = document.createElement('div');\n    tree.className = 'rp-tree';\n    for (const item of order(nodes)) tree.appendChild(makeNode(item));\n    container.appendChild(tree);\n  }\n\n  function showError(message) {\n    container.replaceChildren();\n    const el = document.createElement('div');\n    el.className = 'rp-empty';\n    el.textContent = message;\n    container.appendChild(el);\n  }\n\n  async function refresh() {\n    try {\n      const res = await fetch(\\`\\${BASE}/api/design/\\${root}/revisions\\`);\n      if (!res.ok) throw new Error(String(res.status));\n      const nodes = await res.json();\n      paint(nodes);\n      onCount(nodes.length);\n    } catch {\n      showError(\"couldn't load history\");\n      onCount(0);\n    }\n  }\n\n  function setCurrent(rev) {\n    currentRev = rev;\n    for (const el of container.querySelectorAll('.rp-node')) {\n      el.classList.toggle('rp-current', el.dataset.rev === rev);\n    }\n  }\n\n  refresh();\n  return { setCurrent, refresh };\n}\n`,\n\t\"studio.html\": `<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <title>IMG.LY CODESIGN MCP Workspace</title>\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n    <!-- Mount prefix injected by the viewer router (router.ts). \"\" on the stdio\n         listener, \"/viewer\" on the HTTP transport. Read by studio.js. -->\n    <script>\n      window.__VIEWER_BASE__ = '{{VIEWER_BASE}}';\n    </script>\n    <style>\n      /* -------- reset --------\n\t\t\t   Same palette + typography as the viewer SPA so the overview reads\n\t\t\t   as part of the same product. See src/viewer/spa/index.html. */\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        min-height: 100%;\n        background: #1d1d1f;\n        color: #eee;\n        font-family: -apple-system, system-ui, sans-serif;\n      }\n\n      /* -------- sticky frosted strip --------\n\t\t\t   Same frosted-glass material as the viewer pills + history panel:\n\t\t\t   translucent dark + backdrop-blur + 1px hairline border. Sticky so\n\t\t\t   the title stays visible while scrolling. */\n      #bar {\n        position: sticky;\n        top: 0;\n        z-index: 10;\n        padding: 14px 24px;\n        background: rgba(20, 20, 22, 0.72);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n      }\n      #bar .title {\n        font:\n          600 14px -apple-system,\n          system-ui,\n          sans-serif;\n        letter-spacing: 0.02em;\n        color: #e8e8e8;\n      }\n\n      /* -------- design grid -------- */\n      .grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n        gap: 16px;\n        padding: 24px;\n      }\n\n      .empty {\n        padding: 24px 4px;\n        font-size: 13px;\n        color: #888;\n      }\n      .empty code {\n        font-family: ui-monospace, monospace;\n        background: rgba(255, 255, 255, 0.05);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 4px;\n        padding: 1px 6px;\n        font-size: 12px;\n        color: #cfcfcf;\n      }\n\n      /* -------- card --------\n\t\t\t   Frosted-glass card, same materials as the history panel rows.\n\t\t\t   Hover lifts the card and brightens the border + shadow to match the\n\t\t\t   pill-hover pattern in the viewer chrome. */\n      .card {\n        display: block;\n        text-decoration: none;\n        color: inherit;\n        background: rgba(20, 20, 22, 0.72);\n        backdrop-filter: blur(12px);\n        -webkit-backdrop-filter: blur(12px);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 12px;\n        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);\n        overflow: hidden;\n        transition:\n          transform 120ms ease-out,\n          border-color 120ms ease-out,\n          box-shadow 120ms ease-out;\n      }\n      .card:hover {\n        transform: translateY(-2px);\n        border-color: rgba(255, 255, 255, 0.15);\n        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);\n      }\n      .card img {\n        display: block;\n        width: 100%;\n        aspect-ratio: 4/3;\n        object-fit: cover;\n        background: #000;\n      }\n      .card .meta {\n        padding: 12px 14px;\n      }\n      .card .title {\n        font:\n          600 13px -apple-system,\n          system-ui,\n          sans-serif;\n        color: #eee;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n      .card .updated {\n        margin-top: 4px;\n        font-size: 11px;\n        color: #888;\n      }\n    </style>\n  </head>\n  <body>\n    <header id=\"bar\">\n      <span class=\"title\">IMG.LY CODESIGN MCP Workspace</span>\n    </header>\n    <div id=\"grid\" class=\"grid\"></div>\n    <script type=\"module\" src=\"{{VIEWER_BASE}}/static/studio.js\"></script>\n  </body>\n</html>\n`,\n\t\"studio.js\": `// Workspace overview landing page. Fetches /api/designs and renders one card\n// per design (keyed by root revision). Re-renders on tab focus and a 10s poll\n// so card links and thumbnails never go stale after the agent edits.\n//\n// DOM is built with createElement + textContent (never innerHTML for\n// design-supplied strings) so an author-controlled title can't escape into\n// HTML. Same pattern as viewer.js.\n\n// Mount prefix set by studio.html (\"\" on stdio, \"/viewer\" on HTTP); card\n// links, thumbnails, and the designs fetch are built relative to it. See\n// router.ts.\nconst BASE = window.__VIEWER_BASE__ ?? '';\n\nconst grid = document.getElementById('grid');\n\nfunction buildCard(d) {\n  const card = document.createElement('a');\n  card.className = 'card';\n  card.href = \\`\\${BASE}/d/\\${d.rootRevision}\\`;\n\n  const img = document.createElement('img');\n  img.src = \\`\\${BASE}/snapshot/\\${d.latestLeaf}/thumbnail\\`;\n  img.alt = '';\n  img.addEventListener('error', () => {\n    img.style.display = 'none';\n  });\n  card.appendChild(img);\n\n  const meta = document.createElement('div');\n  meta.className = 'meta';\n\n  const title = document.createElement('div');\n  title.className = 'title';\n  title.textContent = d.title || 'Untitled';\n  meta.appendChild(title);\n\n  const updated = document.createElement('div');\n  updated.className = 'updated';\n  updated.textContent = \\`updated \\${new Date(d.updatedAt).toLocaleString()}\\`;\n  meta.appendChild(updated);\n\n  card.appendChild(meta);\n  return card;\n}\n\nfunction renderEmptyText(text) {\n  const div = document.createElement('div');\n  div.className = 'empty';\n  div.textContent = text;\n  grid.replaceChildren(div);\n}\n\nfunction renderFirstRunEmpty() {\n  const div = document.createElement('div');\n  div.className = 'empty';\n  div.appendChild(document.createTextNode('No designs yet — your first '));\n  const code = document.createElement('code');\n  code.textContent = 'edit({ parent: null, ... })';\n  div.appendChild(code);\n  div.appendChild(document.createTextNode(' will land here.'));\n  grid.replaceChildren(div);\n}\n\nasync function render() {\n  const res = await fetch(\\`\\${BASE}/api/designs\\`);\n  if (!res.ok) {\n    renderEmptyText(\\`failed to load designs: \\${res.status}\\`);\n    return;\n  }\n  const designs = await res.json();\n  if (designs.length === 0) {\n    renderFirstRunEmpty();\n    return;\n  }\n  grid.replaceChildren(...designs.map(buildCard));\n}\n\n// \\`render()\\` rejects on a network error; every caller logs it rather than\n// leaving an unhandled promise rejection.\nawait render().catch(console.error);\ndocument.addEventListener('visibilitychange', () => {\n  if (!document.hidden) render().catch(console.error);\n});\nsetInterval(() => render().catch(console.error), 10000);\n`,\n\t\"viewer.js\": `// Read-only CE.SDK viewer with a revision-history side panel.\n//   /d/<root>        LIVE   — opens at the design head, follows new revisions\n//   /d/<root>/<rev>  PINNED — opens frozen at <rev>\n//\n// Chrome is floating pill clusters in the corners; the history panel is a\n// detached card on the right.\n// See: docs/superpowers/specs/2026-05-24-viewer-ui-refresh-design.md\n//\n// Navigation is client-side: clicking a panel node (or the \"Go Live →\"\n// affordance) swaps the canvas and rewrites the URL via the History API — one\n// CE.SDK instance for the life of the tab. The SSE connection is held open\n// in BOTH modes so the panel's tree always stays fresh; it moves the canvas\n// only while \\`following\\`.\n\n// Mount prefix set by index.html (\"\" on stdio, \"/viewer\" on HTTP). Every\n// API/asset/history URL below is built relative to it so the SPA works under\n// any mount path. See router.ts.\nconst BASE = window.__VIEWER_BASE__ ?? '';\n\n// Path of the current page with the mount prefix stripped, so PATH_RE (which\n// is written relative to the SPA root) matches under \"/viewer\" too.\nconst relPath = () =>\n  location.pathname.startsWith(BASE)\n    ? location.pathname.slice(BASE.length)\n    : location.pathname;\n\nconst { createRevisionPanel } = await import(\n  \\`\\${BASE}/static/revision-panel.js\\`\n);\n\nconst PATH_RE = /^\\\\/d\\\\/([0-9a-f]{12})(?:\\\\/([0-9a-f]{12}))?$/;\nconst titleEl = document.getElementById('title');\nconst barRightEl = document.getElementById('bar-right');\nconst panelEl = document.getElementById('revision-panel');\n\nconst match = relPath().match(PATH_RE);\n\nif (!match) {\n  titleEl.textContent = 'invalid URL';\n} else {\n  const root = match[1];\n\n  // Server-supplied license + resource base, fetched before bootstrapping\n  // CE.SDK. CE.SDK validates the license regardless of role; \\`resourceBase\\`\n  // is where workspace:// asset URIs resolve.\n  const cfgRes = await fetch(\\`\\${BASE}/api/config\\`);\n  if (!cfgRes.ok) throw new Error(\\`/api/config failed: \\${cfgRes.status}\\`);\n  const { license, resourceBase, cesdkEngineUrl } = await cfgRes.json();\n\n  const cesdkMod = await import(cesdkEngineUrl);\n  const CreativeEditorSDK = cesdkMod.default ?? cesdkMod.CreativeEditorSDK;\n  const instance = await CreativeEditorSDK.create(\n    document.getElementById('cesdk'),\n    {\n      license,\n      role: 'Viewer',\n      theme: 'dark',\n      // The refresh moved all chrome out of CE.SDK and into our own floating\n      // pills + history panel — back / title / LIVE / Go Live / hash / History.\n      // CE.SDK's own nav + dock would render in the same physical space and,\n      // because #cesdk has no stacking context, their internal z-indexes\n      // outrank our z:10 pills, hiding them. \\`ui.hide: true\\` disables the\n      // CE.SDK chrome entirely; users keep mousewheel zoom + drag-to-pan via\n      // the engine, which is unaffected.\n      ui: { hide: true }\n    }\n  );\n\n  // Resolve workspace:// asset URIs to the /r/ HTTP route.\n  const absResourceBase = location.origin + resourceBase;\n  instance.engine.editor.setURIResolver((uri, defaultResolver) =>\n    uri.startsWith('workspace://')\n      ? absResourceBase + uri.slice('workspace://'.length)\n      : defaultResolver(uri)\n  );\n\n  // --- runtime state ----------------------------------------------------\n  let head = null; // the design's latest leaf\n  let currentRev = null; // the revision currently on canvas\n  let following = false; // true → the canvas tracks head as SSE arrives\n  let newCount = 0; // revisions arrived since following stopped\n  let panelOpen = false; // whether the history panel is visible\n\n  async function loadRevision(rev) {\n    const res = await fetch(\\`\\${BASE}/snapshot/\\${rev}\\`);\n    if (!res.ok) throw new Error(\\`snapshot \\${rev} \\${res.status}\\`);\n    const snap = await res.json();\n    await instance.engine.scene.loadFromString(snap.scene);\n    titleEl.textContent = snap.title ?? 'Untitled';\n  }\n\n  // Builds the right-side cluster from current state. Idempotent — called on\n  // every mode flip, panel toggle, and newCount change. Uses createElement +\n  // textContent everywhere (never innerHTML) so any author-supplied strings\n  // can't escape into HTML.\n  function renderRightCluster() {\n    const nodes = [];\n\n    if (following) {\n      // LIVE — read-only green-dot pill.\n      const live = document.createElement('span');\n      live.className = 'pill live';\n      live.textContent = 'LIVE';\n      nodes.push(live);\n    } else {\n      // PINNED — hash chip (click-to-copy) + Go Live (+ count badge).\n      const hash = document.createElement('button');\n      hash.type = 'button';\n      hash.className = 'pill hash';\n      hash.title = 'copy revision id';\n      hash.textContent = currentRev ? currentRev.slice(0, 7) : '';\n      hash.addEventListener('click', async () => {\n        if (!currentRev) return;\n        try {\n          await navigator.clipboard?.writeText(currentRev);\n        } catch {\n          /* clipboard unavailable — fail quietly (matches .rp-copy) */\n        }\n      });\n      nodes.push(hash);\n\n      const golive = document.createElement('button');\n      golive.type = 'button';\n      golive.className = 'pill golive';\n      golive.appendChild(document.createTextNode('Go Live →'));\n      if (newCount > 0) {\n        const count = document.createElement('span');\n        count.className = 'count';\n        count.textContent = String(newCount);\n        golive.appendChild(count);\n      }\n      golive.addEventListener('click', (e) => {\n        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)\n          return;\n        e.preventDefault();\n        if (head) show(head, { following: true, historyMode: 'push' });\n      });\n      nodes.push(golive);\n    }\n\n    const history = document.createElement('button');\n    history.type = 'button';\n    history.className = \\`pill history\\${panelOpen ? ' active' : ''}\\`;\n    history.textContent = 'History';\n    history.addEventListener('click', () => setPanelOpen(!panelOpen));\n    nodes.push(history);\n\n    barRightEl.replaceChildren(...nodes);\n  }\n\n  function setPanelOpen(open) {\n    panelOpen = open;\n    document.body.classList.toggle('panel-open', open);\n    renderRightCluster();\n  }\n\n  // The single navigation primitive. Loads \\`rev\\` onto the canvas, sets the\n  // LIVE/PINNED state, and writes the URL. \\`historyMode\\`: \"push\" adds a\n  // history entry, \"replace\" rewrites in place, \"none\" leaves history alone\n  // (used by popstate, where the browser already changed the URL).\n  async function show(rev, { following: nextFollowing, historyMode }) {\n    try {\n      await loadRevision(rev);\n      currentRev = rev;\n      following = nextFollowing;\n      if (following) newCount = 0;\n      const url = following ? \\`\\${BASE}/d/\\${root}\\` : \\`\\${BASE}/d/\\${root}/\\${rev}\\`;\n      if (historyMode === 'push') window.history.pushState({ rev }, '', url);\n      else if (historyMode === 'replace')\n        window.history.replaceState({ rev }, '', url);\n      panel.setCurrent(rev);\n    } catch {\n      titleEl.textContent = 'unknown revision';\n    }\n    renderRightCluster();\n  }\n\n  // --- revision panel ---------------------------------------------------\n  const panel = createRevisionPanel({\n    container: panelEl,\n    root,\n    // Clicking a node pins it — unless it is the head, which is LIVE.\n    onNavigate: (rev) =>\n      show(rev, { following: rev === head, historyMode: 'push' }),\n    onCount: () => {\n      /* The History pill no longer carries the total count; the unseen-since-\n\t\t\t   pin count lives on Go Live and is driven by \\`newCount\\` directly. */\n    }\n  });\n\n  // --- keyboard ---------------------------------------------------------\n  window.addEventListener('keydown', (e) => {\n    if (e.key === 'Escape' && panelOpen) setPanelOpen(false);\n  });\n\n  // --- bootstrap --------------------------------------------------------\n  let latestLeaf;\n  try {\n    const res = await fetch(\\`\\${BASE}/api/design/\\${root}\\`);\n    if (!res.ok) throw new Error(String(res.status));\n    latestLeaf = (await res.json()).latestLeaf;\n  } catch {\n    titleEl.textContent = 'unknown design';\n  }\n\n  if (latestLeaf !== undefined) {\n    head = latestLeaf;\n    const pinned = match[2]; // undefined → LIVE\n    // Mode is the URL shape: a pinned URL stays pinned even if <rev> is head.\n    await show(pinned ?? head, {\n      following: pinned === undefined,\n      historyMode: 'replace'\n    });\n\n    // SSE — held open for the life of the tab, in both modes. Every event\n    // refreshes the panel's tree; it moves the canvas only while following.\n    const es = new EventSource(\\`\\${BASE}/sse/\\${root}\\`);\n    es.onmessage = (ev) => {\n      let payload;\n      try {\n        payload = JSON.parse(ev.data);\n      } catch (err) {\n        console.error('sse parse failed', err);\n        return;\n      }\n      if (!payload || typeof payload.revision !== 'string') return;\n      head = payload.revision;\n      panel.refresh();\n      if (following) {\n        show(head, { following: true, historyMode: 'replace' });\n      } else {\n        newCount += 1;\n        renderRightCluster();\n      }\n    };\n  }\n\n  // Browser back/forward: re-resolve the URL shape and sync, without writing\n  // history (the entry already changed).\n  window.addEventListener('popstate', () => {\n    const m = relPath().match(PATH_RE);\n    if (!m || m[1] !== root) return;\n    const pinned = m[2];\n    show(pinned ?? head, {\n      following: pinned === undefined,\n      historyMode: 'none'\n    });\n  });\n}\n`,\n};\n"]}

package/dist/workspace/content-hash.d.ts

@@ -0,0 +1,2 @@
+export declare function shortHash(bytes: Uint8Array): Promise<string>;
+//# sourceMappingURL=content-hash.d.ts.map

package/dist/workspace/content-hash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-hash.d.ts","sourceRoot":"","sources":["../../src/workspace/content-hash.ts"],"names":[],"mappings":"AAOA,wBAAsB,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,CAMlE"}

package/dist/workspace/content-hash.js

@@ -0,0 +1,15 @@
+//
+// Content-addressing hash for the workspace `assets/<sha>.<ext>` store.
+// 6 bytes of SHA-256 as hex — short enough for readable paths, collision-safe
+// at this workspace's scale. Shared by asset_generate and load so identical
+// bytes land at the identical path (automatic dedup) regardless of which tool
+// wrote them.
+export async function shortHash(bytes) {
+    const digest = await globalThis.crypto.subtle.digest('SHA-256', bytes);
+    const view = new Uint8Array(digest);
+    let hex = '';
+    for (let i = 0; i < 6; i++)
+        hex += view[i].toString(16).padStart(2, '0');
+    return hex;
+}
+//# sourceMappingURL=content-hash.js.map

package/dist/workspace/content-hash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-hash.js","sourceRoot":"","sources":["../../src/workspace/content-hash.ts"],"names":[],"mappings":"AAAA,EAAE;AACF,wEAAwE;AACxE,8EAA8E;AAC9E,4EAA4E;AAC5E,8EAA8E;AAC9E,cAAc;AAEd,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,KAAiB;IAC/C,MAAM,MAAM,GAAG,MAAM,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACvE,MAAM,IAAI,GAAG,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC;IACpC,IAAI,GAAG,GAAG,EAAE,CAAC;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;QAAE,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACzE,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["//\n// Content-addressing hash for the workspace `assets/<sha>.<ext>` store.\n// 6 bytes of SHA-256 as hex — short enough for readable paths, collision-safe\n// at this workspace's scale. Shared by asset_generate and load so identical\n// bytes land at the identical path (automatic dedup) regardless of which tool\n// wrote them.\n\nexport async function shortHash(bytes: Uint8Array): Promise<string> {\n  const digest = await globalThis.crypto.subtle.digest('SHA-256', bytes);\n  const view = new Uint8Array(digest);\n  let hex = '';\n  for (let i = 0; i < 6; i++) hex += view[i].toString(16).padStart(2, '0');\n  return hex;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imgly/codesign-mcp",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Codesign MCP server: SYSTEM prompt, prompts, skills, design tools as MCP resources/prompts/tools.",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://github.com/imgly/imgly-codesign/tree/main/packages/codesign-mcp",
@@ -35,7 +35,12 @@
     "./tools/design": {
       "types": "./dist/tools/index.d.ts",
       "import": "./dist/tools/index.js"
-    }
+    },
+    "./engine": {
+      "types": "./dist/engine/index.d.ts",
+      "import": "./dist/engine/index.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -45,11 +50,11 @@
   "scripts": {
     "clean": "shx rm -rf dist *.tsbuildinfo",
     "sync:cesdk-api": "node --experimental-strip-types scripts/sync-cesdk-api.ts",
+    "sync:cesdk-skills": "node --experimental-strip-types scripts/sync-cesdk-skills.ts",
     "generate-assets": "node scripts/generate-inline-assets.mjs",
     "generate-spa-assets": "node scripts/generate-spa-assets.mjs",
-    "generate-dashboard-assets": "node scripts/generate-spa-assets.mjs src/dashboard/spa src/dashboard/spa-assets.generated.ts",
     "generate-trial-license": "node scripts/generate-trial-license.mjs",
-    "refresh-assets": "pnpm run sync:cesdk-api && pnpm run generate-assets && pnpm run generate-spa-assets && pnpm run generate-dashboard-assets && pnpm run generate-trial-license",
+    "refresh-assets": "pnpm run sync:cesdk-api && pnpm run generate-assets && pnpm run generate-spa-assets && pnpm run generate-trial-license",
     "prebuild": "pnpm run refresh-assets",
     "precheck": "pnpm run refresh-assets",
     "pretest": "pnpm run refresh-assets",
@@ -57,15 +62,19 @@
     "prepare": "pnpm run build",
     "pack:release": "node scripts/pack-release.mjs",
     "publish:beta": "node scripts/publish-beta.mjs",
-    "check": "tsc --build tsconfig.src.json && tsc --build tsconfig.test.json",
-    "test": "vitest --run"
+    "check": "tsc --build tsconfig.src.json && tsc --build tsconfig.test.json && tsc -p tsconfig.scripts.json",
+    "test": "vitest --run",
+    "dev:claude": "bash scripts/dev-claude.sh",
+    "changelog:collate": "node --experimental-strip-types scripts/changelog-collate.ts",
+    "changelog:add": "node --experimental-strip-types scripts/changelog-add.ts",
+    "bump:cesdk": "node --experimental-strip-types scripts/bump-cesdk.ts"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1063.0",
     "@aws-sdk/s3-request-presigner": "^3.1063.0",
-    "@cesdk/engine": "1.77.0-rc.4",
-    "@cesdk/node": "1.77.0-rc.4",
-    "@cesdk/node-native": "1.77.0-rc.4",
+    "@cesdk/engine": "1.77.0",
+    "@cesdk/node": "1.77.0",
+    "@cesdk/node-native": "1.77.0",
     "@modelcontextprotocol/sdk": "^1.0.0",
     "@sinclair/typebox": "^0.34.0",
     "cors": "^2.8.5",