npm - @imgly/codesign-mcp - Versions diffs - 0.1.2 → 0.1.5 - Mend

@imgly/codesign-mcp 0.1.2 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/assets/docs/api/index.d.ts +457 -27
package/dist/assets/inline.generated.js +1 -1
package/dist/assets/inline.generated.js.map +1 -1
package/dist/cli.js +14 -0
package/dist/cli.js.map +1 -1
package/dist/test/test/tools/edit.test.js +11 -11
package/dist/test/test/tools/edit.test.js.map +1 -1
package/dist/test/tsconfig.test.tsbuildinfo +1 -1
package/dist/tools/edit.d.ts.map +1 -1
package/dist/tools/edit.js +6 -13
package/dist/tools/edit.js.map +1 -1
package/dist/viewer/spa-assets.generated.js +1 -1
package/dist/viewer/spa-assets.generated.js.map +1 -1
package/package.json +7 -4

package/dist/tools/edit.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../src/tools/edit.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,OAAO;IAChD,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC1B;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC;IAClB,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;KACtB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,gGAAgG;IAChG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,CAAC,CAAC;KACX,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IAC1B,2FAA2F;IAC3F,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAiDD,wBAAgB,cAAc,CAAC,CAAC,GAAG,OAAO,EACxC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC7B,2BAA2B,~~CA2H7B~~"}
1	+ {"version":3,"file":"edit.d.ts","sourceRoot":"","sources":["../../src/tools/edit.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,OAAO;IAChD,KAAK,EAAE,aAAa,CAAC;IACrB,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAC1B;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC;IAClB,iEAAiE;IACjE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC;KACtB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,gGAAgG;IAChG,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,CAAC,CAAC;KACX,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;IAC1B,2FAA2F;IAC3F,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAiDD,wBAAgB,cAAc,CAAC,CAAC,GAAG,OAAO,EACxC,IAAI,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAC7B,2BAA2B,CAoH7B"}

package/dist/tools/edit.js CHANGED Viewed

@@ -28,7 +28,7 @@ const EDIT_INPUT_SCHEMA = {
     properties: {
         parent: {
             oneOf: [{ type: 'string' }, { type: 'null' }],
-            description: 'Parent revision id (string), or the JSON null literal (no quotes — the value null, not the four-character string "null") for a new design root. REQUIRED — there is no implicit default.'
+            description: 'Parent revision id from a previous edit (a string). To start a new design root, use the JSON null literal. REQUIRED — there is no implicit default.'
         },
         code: {
             type: 'string',
@@ -66,18 +66,11 @@ export function createEditTool(opts) {
                 };
             }
             if (args.parent === 'null') {
-                // LLMs sometimes serialize JSON null as the string "null" when the
-                // description mentions null in backticks. Catch it explicitly so
-                // the agent gets a teaching message instead of "unknown revision".
-                return {
-                    isError: true,
-                    content: [
-                        {
-                            type: 'text',
-                            text: 'edit: `parent` arrived as the four-character string "null" (with quotes). Pass JSON null (the literal, no quotes) to create a new design root.'
-                        }
-                    ]
-                };
+                // Some LLMs / MCP clients emit the JSON string "null" instead of the
+                // bare null literal — a quoting slip, not a real revision id. Coerce it
+                // rather than reject: this quoting nuance must never block creating a
+                // new design root. (Stochastic, model-dependent; see edit.test.ts.)
+                args.parent = null;
             }
             if (typeof args.code !== 'string') {
                 return {

package/dist/tools/edit.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"edit.js","sourceRoot":"","sources":["../../src/tools/edit.ts"],"names":[],"mappings":"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","sourcesContent":["// packages/codesign-mcp/src/tools/edit.ts\n//\n// `edit` — the spec's central tool (§6.1). Replaces `exec.ts`. Differences\n// from the POC `exec`:\n// - `parent` is mandatory (null = new design root).\n// - `title?` set on root creation; `note?` annotates this revision.\n// - Writes a new revision via RevisionStore after `code` returns.\n// - Reloads engine if session slot's currentRevision !== parent.\n// - Dirty-on-throw: failed code marks the slot dirty.\n// - Returns {revision, parent} JSON as the first MessagePart (text).\n//\n// `onLeafWritten` is the viewer hook: called after a successful write so the\n// SSE broadcaster can fan out the new revision id to subscribed viewers.\n\nimport type { Mutex } from '../engine/mutex.js';\nimport type { EngineSession } from '../engine/session.js';\nimport type { RevisionStore } from '../revisions/store.js';\nimport type { CodesignMcpToolRegistration } from '../server.js';\nimport type { WorkspaceFS } from '../workspace/types.js';\nimport { normalizeResult } from './result.js';\n\nexport interface CreateEditToolOptions<E = unknown> {\n store: RevisionStore;\n session: EngineSession<E>;\n /*\n Guards the shared engine. The acquire → run code → save → thumbnail\n * sequence below mutates one engine across several awaits; this serializes\n * it against any other engine-touching tool call (see engine/mutex.ts).\n /\n engineLock: Mutex;\n /* Called after a successful edit writes a new leaf revision. /\n onLeafWritten?: (event: {\n revision: string;\n rootRevision: string;\n }) => void \| Promise<void>;\n /* Render a thumbnail for the newly committed revision. Best-effort: failures are swallowed. /\n renderThumbnail?: (event: {\n revision: string;\n engine: E;\n }) => Promise<Uint8Array>;\n /* Workspace FS for persisting the thumbnail (required if renderThumbnail is supplied). */\n fs?: WorkspaceFS;\n}\n\nconst DESCRIPTION = [\n 'Edit the CE.SDK canvas by running JavaScript against the live CreativeEngine, then commit the result as a new revision.',\n '',\n '⚠ Call `handbook` BEFORE your first `edit`. It documents the mandatory `parent` argument, the dirty-on-throw safety contract, the typeface schema, and the runtime quirks.',\n '',\n \"REQUIRED: `parent` is a revision id (returned by a previous edit), or the JSON null literal (no quotes) to start a new design. Omitting it is an error — there is no implicit 'continue from wherever'.\",\n '',\n 'Returns: the first content part is JSON `{ revision, parent }` — store `revision` so you can pass it as `parent` on the next edit.',\n '',\n \"Optional: `title` (set on parent=null only — the design's display name) and `note` (a one-liner describing what this edit accomplished — purely descriptive, helps you re-ground after a rewind).\"\n].join('\\n');\n\ninterface EditArgs {\n parent: string \| null;\n code: string;\n title?: string;\n note?: string;\n}\n\nconst EDIT_INPUT_SCHEMA = {\n type: 'object' as const,\n properties: {\n parent: {\n oneOf: [{ type: 'string' as const }, { type: 'null' as const }],\n description:\n 'Parent revision id (string), or the JSON null literal (no quotes — the value null, not the four-character string \"null\") for a new design root. REQUIRED — there is no implicit default.'\n },\n code: {\n type: 'string' as const,\n description:\n 'Async JS body. `engine` is in scope. Strict return contract per the handbook.'\n },\n title: {\n type: 'string' as const,\n description:\n 'Display name for the design. Set only when parent=null (creating a new design). For mid-chain renames use the `rename` tool.'\n },\n note: {\n type: 'string' as const,\n description:\n 'Freeform descriptive text — what this edit accomplished. Metadata only; never load-bearing.'\n }\n },\n required: ['parent', 'code'],\n additionalProperties: false\n};\n\nexport function createEditTool<E = unknown>(\n opts: CreateEditToolOptions<E>\n): CodesignMcpToolRegistration {\n const { store, session, onLeafWritten, renderThumbnail, fs, engineLock } =\n opts;\n return {\n name: 'edit',\n description: DESCRIPTION,\n inputSchema: EDIT_INPUT_SCHEMA,\n call: async (rawArgs) => {\n const args = (rawArgs ?? {}) as Partial<EditArgs>;\n if (!Object.hasOwn(args, 'parent')) {\n return {\n isError: true,\n content: [\n {\n type: 'text' as const,\n text: 'edit: `parent` is required. Pass the revision id from a previous edit, or the JSON null literal (no quotes) for a new design root. See `handbook` for the rewind-recovery flow.'\n }\n ]\n };\n }\n if (args.parent === 'null') {\n // LLMs sometimes serialize JSON null as the string \"null\" when the\n // description mentions null in backticks. Catch it explicitly so\n // the agent gets a teaching message instead of \"unknown revision\".\n return {\n isError: true,\n content: [\n {\n type: 'text' as const,\n text: 'edit: `parent` arrived as the four-character string \"null\" (with quotes). Pass JSON null (the literal, no quotes) to create a new design root.'\n }\n ]\n };\n }\n if (typeof args.code !== 'string') {\n return {\n isError: true,\n content: [\n {\n type: 'text' as const,\n text: 'edit: `code` (string) is required.'\n }\n ]\n };\n }\n // The shared engine is loaded, mutated by user code, then saved across\n // several awaits below. Serialize the whole sequence so a concurrent\n // session sharing this engine can't swap the scene out mid-edit.\n return engineLock.runExclusive(async () => {\n // Pre-stage scene bytes for the session if parent is non-null.\n if (args.parent !== null) {\n const parentRev = await store.read(args.parent as string);\n await session.populate(args.parent as string, parentRev.scene);\n }\n const slot = await session.acquire(args.parent ?? null);\n let codeResult: unknown;\n try {\n const AsyncFunction = Object.getPrototypeOf(\n async () => {}\n ).constructor;\n const fn = new AsyncFunction('engine', args.code);\n codeResult = await fn(slot.engine);\n } catch (err) {\n session.markDirty(slot);\n return {\n isError: true,\n content: [\n {\n type: 'text' as const,\n text: `edit: code threw — engine slot marked dirty (next edit pays one reload). ${\n err instanceof Error\n ? (err.stack ?? err.message)\n : String(err)\n }`\n }\n ]\n };\n }\n const adapter = (\n session as unknown as {\n opts: { adapter: { saveToString(e: E): Promise<string> } };\n }\n ).opts.adapter;\n const sceneBytes = await adapter.saveToString(slot.engine);\n const written = await store.write({\n scene: sceneBytes,\n parent: args.parent ?? null,\n title: args.title,\n note: args.note,\n code: args.code\n });\n session.commit(slot, written.id);\n if (renderThumbnail && fs) {\n try {\n const bytes = await renderThumbnail({\n revision: written.id,\n engine: slot.engine\n });\n const shard = written.id.slice(0, 2);\n const rest = written.id.slice(2);\n await fs.writeFile(`exports/${shard}/${rest}/preview.webp`, bytes);\n } catch {\n // best-effort; thumbnail failure must not poison the edit success path\n }\n }\n if (onLeafWritten) {\n const rootRevision =\n args.parent === null\n ? written.id\n : (await store.historyOf(written.id))[0].id;\n await onLeafWritten({ revision: written.id, rootRevision });\n }\n const envelope = { revision: written.id, parent: args.parent ?? null };\n const codeParts = normalizeResult(codeResult);\n return {\n content: [\n { type: 'text' as const, text: JSON.stringify(envelope) },\n ...codeParts\n ]\n };\n });\n }\n };\n}\n"]}
1	+ {"version":3,"file":"edit.js","sourceRoot":"","sources":["../../src/tools/edit.ts"],"names":[],"mappings":"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","sourcesContent":["// packages/codesign-mcp/src/tools/edit.ts\n//\n// `edit` — the spec's central tool (§6.1). Replaces `exec.ts`. Differences\n// from the POC `exec`:\n// - `parent` is mandatory (null = new design root).\n// - `title?` set on root creation; `note?` annotates this revision.\n// - Writes a new revision via RevisionStore after `code` returns.\n// - Reloads engine if session slot's currentRevision !== parent.\n// - Dirty-on-throw: failed code marks the slot dirty.\n// - Returns {revision, parent} JSON as the first MessagePart (text).\n//\n// `onLeafWritten` is the viewer hook: called after a successful write so the\n// SSE broadcaster can fan out the new revision id to subscribed viewers.\n\nimport type { Mutex } from '../engine/mutex.js';\nimport type { EngineSession } from '../engine/session.js';\nimport type { RevisionStore } from '../revisions/store.js';\nimport type { CodesignMcpToolRegistration } from '../server.js';\nimport type { WorkspaceFS } from '../workspace/types.js';\nimport { normalizeResult } from './result.js';\n\nexport interface CreateEditToolOptions<E = unknown> {\n store: RevisionStore;\n session: EngineSession<E>;\n /*\n Guards the shared engine. The acquire → run code → save → thumbnail\n * sequence below mutates one engine across several awaits; this serializes\n * it against any other engine-touching tool call (see engine/mutex.ts).\n /\n engineLock: Mutex;\n /* Called after a successful edit writes a new leaf revision. /\n onLeafWritten?: (event: {\n revision: string;\n rootRevision: string;\n }) => void \| Promise<void>;\n /* Render a thumbnail for the newly committed revision. Best-effort: failures are swallowed. /\n renderThumbnail?: (event: {\n revision: string;\n engine: E;\n }) => Promise<Uint8Array>;\n /* Workspace FS for persisting the thumbnail (required if renderThumbnail is supplied). */\n fs?: WorkspaceFS;\n}\n\nconst DESCRIPTION = [\n 'Edit the CE.SDK canvas by running JavaScript against the live CreativeEngine, then commit the result as a new revision.',\n '',\n '⚠ Call `handbook` BEFORE your first `edit`. It documents the mandatory `parent` argument, the dirty-on-throw safety contract, the typeface schema, and the runtime quirks.',\n '',\n \"REQUIRED: `parent` is a revision id (returned by a previous edit), or the JSON null literal (no quotes) to start a new design. Omitting it is an error — there is no implicit 'continue from wherever'.\",\n '',\n 'Returns: the first content part is JSON `{ revision, parent }` — store `revision` so you can pass it as `parent` on the next edit.',\n '',\n \"Optional: `title` (set on parent=null only — the design's display name) and `note` (a one-liner describing what this edit accomplished — purely descriptive, helps you re-ground after a rewind).\"\n].join('\\n');\n\ninterface EditArgs {\n parent: string \| null;\n code: string;\n title?: string;\n note?: string;\n}\n\nconst EDIT_INPUT_SCHEMA = {\n type: 'object' as const,\n properties: {\n parent: {\n oneOf: [{ type: 'string' as const }, { type: 'null' as const }],\n description:\n 'Parent revision id from a previous edit (a string). To start a new design root, use the JSON null literal. REQUIRED — there is no implicit default.'\n },\n code: {\n type: 'string' as const,\n description:\n 'Async JS body. `engine` is in scope. Strict return contract per the handbook.'\n },\n title: {\n type: 'string' as const,\n description:\n 'Display name for the design. Set only when parent=null (creating a new design). For mid-chain renames use the `rename` tool.'\n },\n note: {\n type: 'string' as const,\n description:\n 'Freeform descriptive text — what this edit accomplished. Metadata only; never load-bearing.'\n }\n },\n required: ['parent', 'code'],\n additionalProperties: false\n};\n\nexport function createEditTool<E = unknown>(\n opts: CreateEditToolOptions<E>\n): CodesignMcpToolRegistration {\n const { store, session, onLeafWritten, renderThumbnail, fs, engineLock } =\n opts;\n return {\n name: 'edit',\n description: DESCRIPTION,\n inputSchema: EDIT_INPUT_SCHEMA,\n call: async (rawArgs) => {\n const args = (rawArgs ?? {}) as Partial<EditArgs>;\n if (!Object.hasOwn(args, 'parent')) {\n return {\n isError: true,\n content: [\n {\n type: 'text' as const,\n text: 'edit: `parent` is required. Pass the revision id from a previous edit, or the JSON null literal (no quotes) for a new design root. See `handbook` for the rewind-recovery flow.'\n }\n ]\n };\n }\n if (args.parent === 'null') {\n // Some LLMs / MCP clients emit the JSON string \"null\" instead of the\n // bare null literal — a quoting slip, not a real revision id. Coerce it\n // rather than reject: this quoting nuance must never block creating a\n // new design root. (Stochastic, model-dependent; see edit.test.ts.)\n args.parent = null;\n }\n if (typeof args.code !== 'string') {\n return {\n isError: true,\n content: [\n {\n type: 'text' as const,\n text: 'edit: `code` (string) is required.'\n }\n ]\n };\n }\n // The shared engine is loaded, mutated by user code, then saved across\n // several awaits below. Serialize the whole sequence so a concurrent\n // session sharing this engine can't swap the scene out mid-edit.\n return engineLock.runExclusive(async () => {\n // Pre-stage scene bytes for the session if parent is non-null.\n if (args.parent !== null) {\n const parentRev = await store.read(args.parent as string);\n await session.populate(args.parent as string, parentRev.scene);\n }\n const slot = await session.acquire(args.parent ?? null);\n let codeResult: unknown;\n try {\n const AsyncFunction = Object.getPrototypeOf(\n async () => {}\n ).constructor;\n const fn = new AsyncFunction('engine', args.code);\n codeResult = await fn(slot.engine);\n } catch (err) {\n session.markDirty(slot);\n return {\n isError: true,\n content: [\n {\n type: 'text' as const,\n text: `edit: code threw — engine slot marked dirty (next edit pays one reload). ${\n err instanceof Error\n ? (err.stack ?? err.message)\n : String(err)\n }`\n }\n ]\n };\n }\n const adapter = (\n session as unknown as {\n opts: { adapter: { saveToString(e: E): Promise<string> } };\n }\n ).opts.adapter;\n const sceneBytes = await adapter.saveToString(slot.engine);\n const written = await store.write({\n scene: sceneBytes,\n parent: args.parent ?? null,\n title: args.title,\n note: args.note,\n code: args.code\n });\n session.commit(slot, written.id);\n if (renderThumbnail && fs) {\n try {\n const bytes = await renderThumbnail({\n revision: written.id,\n engine: slot.engine\n });\n const shard = written.id.slice(0, 2);\n const rest = written.id.slice(2);\n await fs.writeFile(`exports/${shard}/${rest}/preview.webp`, bytes);\n } catch {\n // best-effort; thumbnail failure must not poison the edit success path\n }\n }\n if (onLeafWritten) {\n const rootRevision =\n args.parent === null\n ? written.id\n : (await store.historyOf(written.id))[0].id;\n await onLeafWritten({ revision: written.id, rootRevision });\n }\n const envelope = { revision: written.id, parent: args.parent ?? null };\n const codeParts = normalizeResult(codeResult);\n return {\n content: [\n { type: 'text' as const, text: JSON.stringify(envelope) },\n ...codeParts\n ]\n };\n });\n }\n };\n}\n"]}

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

@@ -784,7 +784,7 @@ if (!match) {
   const { license, resourceBase } = await cfgRes.json();
   const cesdkMod =
-    await import('https://cdn.img.ly/packages/imgly/cesdk-js/1.74.0/index.js');
+    await import('https://cdn.img.ly/packages/imgly/cesdk-js/1.77.0-rc.4/index.js');
   const CreativeEditorSDK = cesdkMod.default ?? cesdkMod.CreativeEditorSDK;
   const instance = await CreativeEditorSDK.create(
     document.getElementById('cesdk'),

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

	@@ -1 +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.74.0/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"]}
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"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@imgly/codesign-mcp",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "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",
@@ -13,6 +13,9 @@
     "access": "public"
   },
   "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
   "bin": {
     "codesign-mcp": "dist/cli.js"
   },
@@ -60,9 +63,9 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1063.0",
     "@aws-sdk/s3-request-presigner": "^3.1063.0",
-    "@cesdk/engine": "1.76.0",
-    "@cesdk/node": "1.76.0",
-    "@cesdk/node-native": "1.77.0-nightly.20260610",
+    "@cesdk/engine": "1.77.0-rc.4",
+    "@cesdk/node": "1.77.0-rc.4",
+    "@cesdk/node-native": "1.77.0-rc.4",
     "@modelcontextprotocol/sdk": "^1.0.0",
     "@sinclair/typebox": "^0.34.0",
     "cors": "^2.8.5",