@drawcall/design 0.2.13 → 0.4.0

package/README.md

@@ -32,4 +32,4 @@ npx @drawcall/design -p r6z2n9k4x8m1qc frame create oak-chair \
   --type market --asset oak-chair@1.2.3
 ```
 
-GLTS frames accept only `.glts` files. `index.glts` is optional: an absent entry renders an empty frame. Image and Market files are available through the same filesystem but are read-only. Read `npx @drawcall/design skill` (or MCP `get_skill`) before creating or changing a GLTS asset.
+GLTS frames accept only `.glts` files. An absent `index.glts` still renders an intentionally empty frame. For authored scenes, work top-down: write `index.glts`, reference planned child assets, then implement those children progressively. A missing imported `.glts` path renders a labeled glowing placeholder without creating a stored file; writing the real file replaces it on revalidation. Image and Market files are available through the same filesystem but are read-only. Read `npx @drawcall/design skill` (or MCP `get_skill`) before creating or changing a GLTS asset.

package/dist/index.d.ts

@@ -3,4 +3,4 @@ export { designSkill } from "./skill.generated.js";
 export { frameCreationCapabilities, type FrameCreationCapability, type FrameCreationCapabilityId, type FrameCreationInput, } from "./v1/capabilities.js";
 export { parseFrameSize } from "./target.js";
 export { acknowledgesInspection, inspectionCommandSchema, inspectionFrameMessageSchema, inspectionMessageTypes, projectSyncMaps, projectSyncUrl, type InspectionAppliedMessage, type InspectionCommand, type InspectionFrameMessage, } from "./protocol.js";
-export type { BinaryFile, CreateFrame, CreateProjectFromBrief, CreateGltsFrame, CreateImageFrame, CreateMarketFrame, DesignFile, FileList, FileMutation, Frame, GltsFrame, ImageFrame, MarketFrame, Project, ProjectDerivationStatus, Screenshot, TextFile, User, } from "./v1/schemas.js";
+export type { BinaryFile, CreateFrame, CreateProjectFromBrief, CreateGltsFrame, CreateImageFrame, CreateMarketFrame, GenerateImageFrame, DesignFile, FileList, FileMutation, Frame, GltsFrame, ImageFrame, ImageGenerationOperation, ImageGenerationProvenance, ImageGenerationResult, MarketFrame, Project, ProjectDerivationStatus, Screenshot, TextFile, User, } from "./v1/schemas.js";

package/dist/protocol.d.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 export declare const projectSyncMaps: {
+    readonly frameContentRevisions: "frame-content-revisions";
     readonly filesystemRevision: "filesystem-revision";
     readonly frameRecords: "frame-records";
 };

package/dist/protocol.js

@@ -1,5 +1,6 @@
 import { z } from "zod";
 export const projectSyncMaps = {
+    frameContentRevisions: "frame-content-revisions",
     filesystemRevision: "filesystem-revision",
     frameRecords: "frame-records",
 };

package/dist/skill.generated.d.ts

@@ -1 +1 @@
-export declare const designSkill = "---\nname: drawcall-design\ndescription: Create, modify, inspect, and screenshot 3D assets and reference frames in Drawcall Design. Use for Drawcall Design projects, frames, the project filesystem, GLTS assets, or Drawcall Market frames. Do not use for full games or applications.\n---\n\n# Drawcall Design\n\nUse the Drawcall Design MCP tools when available. Otherwise use `npx @drawcall/design`. Design is a remote, current-state canvas: inspect the project and its frames before changing them. Use immutable IDs for every project and frame target; names are only labels.\n\n## Project filesystem\n\nA project is a hosted filesystem at `https://<project-id>.design.drawcallcontent.com/`. Each frame owns one top-level folder, `/<frame-id>/`. The CLI selects the project with `-p <project-id>`; its file paths are exactly the absolute paths inside that project, for example `/f7k3m9q2x8vd/index.glts`.\n\nCreate frames with an explicit type. GLTS frames require `--size`; image and Market frames derive their canvas size. A Market frame requires an exact public asset reference, `name@version`.\n\nRead a file before editing it. Use a narrow edit for one known change and write a complete file when replacing it. Only GLTS frame files may be created or deleted. Image and Market frame files are read-only.\n\n## GLTS assets\n\nA GLTS frame contains only `.glts` files. `index.glts` is its optional root asset; without it the frame renders empty. Every `.glts` file is a trusted TypeScript ESM module that default-exports a no-argument class derived from `THREE.Object3D`. Avoid top-level side effects because reload evaluates the module again. Implement `dispose()` when the asset exclusively owns disposable resources.\n\n```ts\nimport * as THREE from \"three\";\nimport Wheel from \"./parts/wheel.glts\";\n\nexport default class Racecar extends THREE.Group {\n  constructor() {\n    super();\n    this.add(new Wheel());\n  }\n}\n```\n\nUse relative `.glts` imports within a frame. Use a project-absolute path to import a GLTS asset from another frame:\n\n```ts\nimport Chassis from \"/other-frame-id/index.glts\";\n```\n\nFor a non-GLTS file from an image or Market frame, preserve the project filesystem URL through `import.meta.url`:\n\n```ts\nconst modelUrl = new URL(\"/market-frame-id/models/car.glb\", import.meta.url);\n```\n\nGLTS supports static `.glts`, `three`, Three addons, and bare npm imports. It does not support local helper `.ts` modules, dynamic imports, cyclic GLTS graphs, or cross-asset inheritance. Keep the asset self-contained and compose with nested GLTS assets.\n\nThe viewer uses the first camera found by depth-first traversal. If none exists, it autofits the asset. Put an authored camera in the scene only when its framing is intentional. Double-clicking a frame enters orbit from that resolved view; deselecting restores it.\n\nAfter every meaningful visual change, take and inspect a screenshot. Iterate until the asset, camera, composition, and requested frame size are right.\n";
+export declare const designSkill = "---\nname: drawcall-design\ndescription: Create, modify, inspect, and screenshot 3D assets and reference frames in Drawcall Design. Use for Drawcall Design projects, frames, the project filesystem, GLTS assets, or Drawcall Market frames. Do not use for full games or applications.\n---\n\n# Drawcall Design\n\nUse the Drawcall Design MCP tools when available. Otherwise use `npx @drawcall/design`. Design is a remote, current-state canvas: inspect the project and its frames before changing them. Use immutable IDs for every project and frame target; names are only labels.\n\n## Project filesystem\n\nA project is a hosted filesystem at `https://<project-id>.design.drawcallcontent.com/`. Each frame owns one top-level folder, `/<frame-id>/`. The CLI selects the project with `-p <project-id>`; its file paths are exactly the absolute paths inside that project, for example `/f7k3m9q2x8vd/index.glts`.\n\nCreate frames with an explicit type. GLTS frames require `--size`; image and Market frames derive their canvas size. A Market frame requires an exact public asset reference, `name@version`.\n\nRead a file before editing it. Use a narrow edit for one known change and write a complete file when replacing it. Only GLTS frame files may be created or deleted. Image and Market frame files are read-only.\n\n## GLTS assets\n\nA GLTS frame contains only `.glts` files. `index.glts` is its optional root asset; without it the frame renders empty. Every `.glts` file is a trusted TypeScript ESM module that default-exports a no-argument class derived from `THREE.Object3D`. Avoid top-level side effects because reload evaluates the module again. Implement `dispose()` when the asset exclusively owns disposable resources.\n\nAuthor GLTS scenes top-down: create the root entry scene first, reference the child `.glts` assets it will compose, then implement those children progressively. A missing `.glts` import renders as a glowing marker labeled with its filename until the real file is written, so the completed parts of the scene remain visible. Treat the marker and its console warning as a temporary missing-dependency diagnostic, not as authored content.\n\n```ts\nimport * as THREE from \"three\";\nimport Wheel from \"./parts/wheel.glts\";\n\nexport default class Racecar extends THREE.Group {\n  constructor() {\n    super();\n    this.add(new Wheel());\n  }\n}\n```\n\nUse relative `.glts` imports within a frame. Use a project-absolute path to import a GLTS asset from another frame:\n\n```ts\nimport Chassis from \"/other-frame-id/index.glts\";\n```\n\nFor a non-GLTS file from an image or Market frame, preserve the project filesystem URL through `import.meta.url`:\n\n```ts\nconst modelUrl = new URL(\"/market-frame-id/models/car.glb\", import.meta.url);\n```\n\nGLTS supports static `.glts`, `three`, Three addons, and bare npm imports. It does not support local helper `.ts` modules, dynamic imports, cyclic GLTS graphs, or cross-asset inheritance. Keep the asset self-contained and compose with nested GLTS assets.\n\nThe viewer uses the first camera found by depth-first traversal. If none exists, it autofits the asset. Put an authored camera in the scene only when its framing is intentional. Double-clicking a frame enters orbit from that resolved view; deselecting restores it.\n\nAfter every meaningful visual change, take and inspect a screenshot. Iterate until the asset, camera, composition, and requested frame size are right.\n";

package/dist/skill.generated.js

@@ -1,2 +1,2 @@
 // Generated from skills/drawcall-design/SKILL.md.
-export const designSkill = '---\nname: drawcall-design\ndescription: Create, modify, inspect, and screenshot 3D assets and reference frames in Drawcall Design. Use for Drawcall Design projects, frames, the project filesystem, GLTS assets, or Drawcall Market frames. Do not use for full games or applications.\n---\n\n# Drawcall Design\n\nUse the Drawcall Design MCP tools when available. Otherwise use `npx @drawcall/design`. Design is a remote, current-state canvas: inspect the project and its frames before changing them. Use immutable IDs for every project and frame target; names are only labels.\n\n## Project filesystem\n\nA project is a hosted filesystem at `https://<project-id>.design.drawcallcontent.com/`. Each frame owns one top-level folder, `/<frame-id>/`. The CLI selects the project with `-p <project-id>`; its file paths are exactly the absolute paths inside that project, for example `/f7k3m9q2x8vd/index.glts`.\n\nCreate frames with an explicit type. GLTS frames require `--size`; image and Market frames derive their canvas size. A Market frame requires an exact public asset reference, `name@version`.\n\nRead a file before editing it. Use a narrow edit for one known change and write a complete file when replacing it. Only GLTS frame files may be created or deleted. Image and Market frame files are read-only.\n\n## GLTS assets\n\nA GLTS frame contains only `.glts` files. `index.glts` is its optional root asset; without it the frame renders empty. Every `.glts` file is a trusted TypeScript ESM module that default-exports a no-argument class derived from `THREE.Object3D`. Avoid top-level side effects because reload evaluates the module again. Implement `dispose()` when the asset exclusively owns disposable resources.\n\n```ts\nimport * as THREE from "three";\nimport Wheel from "./parts/wheel.glts";\n\nexport default class Racecar extends THREE.Group {\n  constructor() {\n    super();\n    this.add(new Wheel());\n  }\n}\n```\n\nUse relative `.glts` imports within a frame. Use a project-absolute path to import a GLTS asset from another frame:\n\n```ts\nimport Chassis from "/other-frame-id/index.glts";\n```\n\nFor a non-GLTS file from an image or Market frame, preserve the project filesystem URL through `import.meta.url`:\n\n```ts\nconst modelUrl = new URL("/market-frame-id/models/car.glb", import.meta.url);\n```\n\nGLTS supports static `.glts`, `three`, Three addons, and bare npm imports. It does not support local helper `.ts` modules, dynamic imports, cyclic GLTS graphs, or cross-asset inheritance. Keep the asset self-contained and compose with nested GLTS assets.\n\nThe viewer uses the first camera found by depth-first traversal. If none exists, it autofits the asset. Put an authored camera in the scene only when its framing is intentional. Double-clicking a frame enters orbit from that resolved view; deselecting restores it.\n\nAfter every meaningful visual change, take and inspect a screenshot. Iterate until the asset, camera, composition, and requested frame size are right.\n';
+export const designSkill = '---\nname: drawcall-design\ndescription: Create, modify, inspect, and screenshot 3D assets and reference frames in Drawcall Design. Use for Drawcall Design projects, frames, the project filesystem, GLTS assets, or Drawcall Market frames. Do not use for full games or applications.\n---\n\n# Drawcall Design\n\nUse the Drawcall Design MCP tools when available. Otherwise use `npx @drawcall/design`. Design is a remote, current-state canvas: inspect the project and its frames before changing them. Use immutable IDs for every project and frame target; names are only labels.\n\n## Project filesystem\n\nA project is a hosted filesystem at `https://<project-id>.design.drawcallcontent.com/`. Each frame owns one top-level folder, `/<frame-id>/`. The CLI selects the project with `-p <project-id>`; its file paths are exactly the absolute paths inside that project, for example `/f7k3m9q2x8vd/index.glts`.\n\nCreate frames with an explicit type. GLTS frames require `--size`; image and Market frames derive their canvas size. A Market frame requires an exact public asset reference, `name@version`.\n\nRead a file before editing it. Use a narrow edit for one known change and write a complete file when replacing it. Only GLTS frame files may be created or deleted. Image and Market frame files are read-only.\n\n## GLTS assets\n\nA GLTS frame contains only `.glts` files. `index.glts` is its optional root asset; without it the frame renders empty. Every `.glts` file is a trusted TypeScript ESM module that default-exports a no-argument class derived from `THREE.Object3D`. Avoid top-level side effects because reload evaluates the module again. Implement `dispose()` when the asset exclusively owns disposable resources.\n\nAuthor GLTS scenes top-down: create the root entry scene first, reference the child `.glts` assets it will compose, then implement those children progressively. A missing `.glts` import renders as a glowing marker labeled with its filename until the real file is written, so the completed parts of the scene remain visible. Treat the marker and its console warning as a temporary missing-dependency diagnostic, not as authored content.\n\n```ts\nimport * as THREE from "three";\nimport Wheel from "./parts/wheel.glts";\n\nexport default class Racecar extends THREE.Group {\n  constructor() {\n    super();\n    this.add(new Wheel());\n  }\n}\n```\n\nUse relative `.glts` imports within a frame. Use a project-absolute path to import a GLTS asset from another frame:\n\n```ts\nimport Chassis from "/other-frame-id/index.glts";\n```\n\nFor a non-GLTS file from an image or Market frame, preserve the project filesystem URL through `import.meta.url`:\n\n```ts\nconst modelUrl = new URL("/market-frame-id/models/car.glb", import.meta.url);\n```\n\nGLTS supports static `.glts`, `three`, Three addons, and bare npm imports. It does not support local helper `.ts` modules, dynamic imports, cyclic GLTS graphs, or cross-asset inheritance. Keep the asset self-contained and compose with nested GLTS assets.\n\nThe viewer uses the first camera found by depth-first traversal. If none exists, it autofits the asset. Put an authored camera in the scene only when its framing is intentional. Double-clicking a frame enters orbit from that resolved view; deselecting restores it.\n\nAfter every meaningful visual change, take and inspect a screenshot. Iterate until the asset, camera, composition, and requested frame size are right.\n';

package/dist/v1/capabilities.d.ts

@@ -1,5 +1,5 @@
-export type FrameCreationCapabilityId = "add-image" | "create-glts" | "search-assets";
-export type FrameCreationInput = "asset" | "height" | "image" | "name" | "width";
+export type FrameCreationCapabilityId = "add-image" | "create-glts" | "generate-image" | "search-assets";
+export type FrameCreationInput = "asset" | "height" | "image" | "name" | "prompt" | "references" | "width";
 export interface FrameCreationCapability {
     id: FrameCreationCapabilityId;
     frameType: "glts" | "image" | "market";

package/dist/v1/capabilities.js

@@ -13,6 +13,13 @@ export const frameCreationCapabilities = [
         description: "Create an empty programmable 3D frame",
         inputs: ["name", "width", "height"],
     },
+    {
+        id: "generate-image",
+        frameType: "image",
+        label: "Generate image",
+        description: "Create or edit an image with optional frame references",
+        inputs: ["name", "prompt", "references"],
+    },
     {
         id: "search-assets",
         frameType: "market",

package/dist/v1/contract.d.ts

@@ -76,6 +76,24 @@ export declare const contract: {
             createdAt: z.ZodString;
             updatedAt: z.ZodString;
         }, z.core.$strip>, Record<never, never>, Record<never, never>>;
+        rename: import("@orpc/contract").ContractProcedureBuilderWithInputOutput<z.ZodObject<{
+            project: z.ZodString;
+            name: z.ZodString;
+        }, z.core.$strip>, z.ZodObject<{
+            id: z.ZodString;
+            name: z.ZodString;
+            sourceBrief: z.ZodNullable<z.ZodString>;
+            title: z.ZodNullable<z.ZodString>;
+            summary: z.ZodNullable<z.ZodString>;
+            derivationStatus: z.ZodEnum<{
+                not_requested: "not_requested";
+                pending: "pending";
+                failed: "failed";
+                complete: "complete";
+            }>;
+            createdAt: z.ZodString;
+            updatedAt: z.ZodString;
+        }, z.core.$strip>, Record<never, never>, Record<never, never>>;
         delete: import("@orpc/contract").ContractProcedureBuilderWithInputOutput<z.ZodObject<{
             project: z.ZodString;
         }, z.core.$strip>, z.ZodObject<{
@@ -110,6 +128,24 @@ export declare const contract: {
             updatedAt: z.ZodString;
             type: z.ZodLiteral<"image">;
             file: z.ZodString;
+            provenance: z.ZodOptional<z.ZodObject<{
+                kind: z.ZodLiteral<"generated">;
+                operation: z.ZodEnum<{
+                    generate: "generate";
+                    edit: "edit";
+                }>;
+                prompt: z.ZodString;
+                references: z.ZodArray<z.ZodObject<{
+                    frameId: z.ZodString;
+                    frameUpdatedAt: z.ZodString;
+                }, z.core.$strip>>;
+                provider: z.ZodLiteral<"cloudflare-workers-ai">;
+                model: z.ZodLiteral<"@cf/black-forest-labs/flux-2-klein-4b">;
+                result: z.ZodEnum<{
+                    replace: "replace";
+                    new: "new";
+                }>;
+            }, z.core.$strip>>;
         }, z.core.$strip>, z.ZodObject<{
             id: z.ZodString;
             projectId: z.ZodString;
@@ -171,6 +207,97 @@ export declare const contract: {
             updatedAt: z.ZodString;
             type: z.ZodLiteral<"image">;
             file: z.ZodString;
+            provenance: z.ZodOptional<z.ZodObject<{
+                kind: z.ZodLiteral<"generated">;
+                operation: z.ZodEnum<{
+                    generate: "generate";
+                    edit: "edit";
+                }>;
+                prompt: z.ZodString;
+                references: z.ZodArray<z.ZodObject<{
+                    frameId: z.ZodString;
+                    frameUpdatedAt: z.ZodString;
+                }, z.core.$strip>>;
+                provider: z.ZodLiteral<"cloudflare-workers-ai">;
+                model: z.ZodLiteral<"@cf/black-forest-labs/flux-2-klein-4b">;
+                result: z.ZodEnum<{
+                    replace: "replace";
+                    new: "new";
+                }>;
+            }, z.core.$strip>>;
+        }, z.core.$strip>, z.ZodObject<{
+            id: z.ZodString;
+            projectId: z.ZodString;
+            name: z.ZodString;
+            x: z.ZodNumber;
+            y: z.ZodNumber;
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+            viewUrl: z.ZodString;
+            createdAt: z.ZodString;
+            updatedAt: z.ZodString;
+            type: z.ZodLiteral<"market">;
+            asset: z.ZodString;
+        }, z.core.$strip>], "type">, Record<never, never>, Record<never, never>>;
+        generateImage: import("@orpc/contract").ContractProcedureBuilderWithInputOutput<z.ZodObject<{
+            project: z.ZodString;
+            operation: z.ZodEnum<{
+                generate: "generate";
+                edit: "edit";
+            }>;
+            prompt: z.ZodString;
+            target: z.ZodOptional<z.ZodString>;
+            references: z.ZodDefault<z.ZodArray<z.ZodString>>;
+            result: z.ZodEnum<{
+                replace: "replace";
+                new: "new";
+            }>;
+            name: z.ZodOptional<z.ZodString>;
+            x: z.ZodOptional<z.ZodNumber>;
+            y: z.ZodOptional<z.ZodNumber>;
+        }, z.core.$strict>, z.ZodDiscriminatedUnion<[z.ZodObject<{
+            id: z.ZodString;
+            projectId: z.ZodString;
+            name: z.ZodString;
+            x: z.ZodNumber;
+            y: z.ZodNumber;
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+            viewUrl: z.ZodString;
+            createdAt: z.ZodString;
+            updatedAt: z.ZodString;
+            type: z.ZodLiteral<"glts">;
+        }, z.core.$strip>, z.ZodObject<{
+            id: z.ZodString;
+            projectId: z.ZodString;
+            name: z.ZodString;
+            x: z.ZodNumber;
+            y: z.ZodNumber;
+            width: z.ZodNumber;
+            height: z.ZodNumber;
+            viewUrl: z.ZodString;
+            createdAt: z.ZodString;
+            updatedAt: z.ZodString;
+            type: z.ZodLiteral<"image">;
+            file: z.ZodString;
+            provenance: z.ZodOptional<z.ZodObject<{
+                kind: z.ZodLiteral<"generated">;
+                operation: z.ZodEnum<{
+                    generate: "generate";
+                    edit: "edit";
+                }>;
+                prompt: z.ZodString;
+                references: z.ZodArray<z.ZodObject<{
+                    frameId: z.ZodString;
+                    frameUpdatedAt: z.ZodString;
+                }, z.core.$strip>>;
+                provider: z.ZodLiteral<"cloudflare-workers-ai">;
+                model: z.ZodLiteral<"@cf/black-forest-labs/flux-2-klein-4b">;
+                result: z.ZodEnum<{
+                    replace: "replace";
+                    new: "new";
+                }>;
+            }, z.core.$strip>>;
         }, z.core.$strip>, z.ZodObject<{
             id: z.ZodString;
             projectId: z.ZodString;
@@ -214,6 +341,24 @@ export declare const contract: {
             updatedAt: z.ZodString;
             type: z.ZodLiteral<"image">;
             file: z.ZodString;
+            provenance: z.ZodOptional<z.ZodObject<{
+                kind: z.ZodLiteral<"generated">;
+                operation: z.ZodEnum<{
+                    generate: "generate";
+                    edit: "edit";
+                }>;
+                prompt: z.ZodString;
+                references: z.ZodArray<z.ZodObject<{
+                    frameId: z.ZodString;
+                    frameUpdatedAt: z.ZodString;
+                }, z.core.$strip>>;
+                provider: z.ZodLiteral<"cloudflare-workers-ai">;
+                model: z.ZodLiteral<"@cf/black-forest-labs/flux-2-klein-4b">;
+                result: z.ZodEnum<{
+                    replace: "replace";
+                    new: "new";
+                }>;
+            }, z.core.$strip>>;
         }, z.core.$strip>, z.ZodObject<{
             id: z.ZodString;
             projectId: z.ZodString;

package/dist/v1/contract.js

@@ -1,6 +1,6 @@
 import { oc } from "@orpc/contract";
 import { z } from "zod";
-import { createFrameSchema, createProjectFromBriefSchema, designIdSchema, fileListSchema, fileMutationSchema, fileSchema, fileTextSchema, frameNameSchema, frameSchema, projectDirectoryPathSchema, projectNameSchema, projectPathSchema, projectSchema, screenshotSchema, userSchema, } from "./schemas.js";
+import { createFrameSchema, createProjectFromBriefSchema, designIdSchema, fileListSchema, fileMutationSchema, fileSchema, fileTextSchema, frameNameSchema, frameSchema, generateImageFrameSchema, projectDirectoryPathSchema, projectNameSchema, projectPathSchema, projectSchema, screenshotSchema, userSchema, } from "./schemas.js";
 const projectInputSchema = z.object({ project: designIdSchema });
 const frameInputSchema = projectInputSchema.extend({ frame: designIdSchema });
 const fileInputSchema = projectInputSchema.extend({ path: projectPathSchema });
@@ -28,6 +28,10 @@ export const contract = {
         })
             .input(projectInputSchema)
             .output(projectSchema),
+        rename: oc
+            .route({ method: "PATCH", path: "/projects/{project}" })
+            .input(projectInputSchema.extend({ name: projectNameSchema }))
+            .output(projectSchema),
         delete: oc
             .route({ method: "DELETE", path: "/projects/{project}" })
             .input(projectInputSchema)
@@ -42,6 +46,13 @@ export const contract = {
             .route({ method: "POST", path: "/projects/{project}/frames" })
             .input(createFrameSchema)
             .output(frameSchema),
+        generateImage: oc
+            .route({
+            method: "POST",
+            path: "/projects/{project}/images/generations",
+        })
+            .input(generateImageFrameSchema)
+            .output(frameSchema),
         rename: oc
             .route({ method: "PATCH", path: "/projects/{project}/frames/{frame}" })
             .input(frameInputSchema.extend({ name: frameNameSchema }))

package/dist/v1/schemas.d.ts

@@ -1,6 +1,8 @@
 import { z } from "zod";
 export declare const MAX_FRAME_DIMENSION = 4096;
 export declare const MAX_FILE_LENGTH = 512000;
+export declare const MAX_IMAGE_GENERATION_PROMPT_LENGTH = 2048;
+export declare const MAX_IMAGE_GENERATION_REFERENCES = 4;
 export declare const designIdSchema: z.ZodString;
 export declare const projectNameSchema: z.ZodString;
 export declare const projectBriefSchema: z.ZodString;
@@ -62,6 +64,36 @@ export declare const gltsFrameSchema: z.ZodObject<{
     updatedAt: z.ZodString;
     type: z.ZodLiteral<"glts">;
 }, z.core.$strip>;
+export declare const imageGenerationOperationSchema: z.ZodEnum<{
+    generate: "generate";
+    edit: "edit";
+}>;
+export declare const imageGenerationResultSchema: z.ZodEnum<{
+    replace: "replace";
+    new: "new";
+}>;
+export declare const imageGenerationReferenceSchema: z.ZodObject<{
+    frameId: z.ZodString;
+    frameUpdatedAt: z.ZodString;
+}, z.core.$strip>;
+export declare const imageGenerationProvenanceSchema: z.ZodObject<{
+    kind: z.ZodLiteral<"generated">;
+    operation: z.ZodEnum<{
+        generate: "generate";
+        edit: "edit";
+    }>;
+    prompt: z.ZodString;
+    references: z.ZodArray<z.ZodObject<{
+        frameId: z.ZodString;
+        frameUpdatedAt: z.ZodString;
+    }, z.core.$strip>>;
+    provider: z.ZodLiteral<"cloudflare-workers-ai">;
+    model: z.ZodLiteral<"@cf/black-forest-labs/flux-2-klein-4b">;
+    result: z.ZodEnum<{
+        replace: "replace";
+        new: "new";
+    }>;
+}, z.core.$strip>;
 export declare const imageFrameSchema: z.ZodObject<{
     id: z.ZodString;
     projectId: z.ZodString;
@@ -75,6 +107,24 @@ export declare const imageFrameSchema: z.ZodObject<{
     updatedAt: z.ZodString;
     type: z.ZodLiteral<"image">;
     file: z.ZodString;
+    provenance: z.ZodOptional<z.ZodObject<{
+        kind: z.ZodLiteral<"generated">;
+        operation: z.ZodEnum<{
+            generate: "generate";
+            edit: "edit";
+        }>;
+        prompt: z.ZodString;
+        references: z.ZodArray<z.ZodObject<{
+            frameId: z.ZodString;
+            frameUpdatedAt: z.ZodString;
+        }, z.core.$strip>>;
+        provider: z.ZodLiteral<"cloudflare-workers-ai">;
+        model: z.ZodLiteral<"@cf/black-forest-labs/flux-2-klein-4b">;
+        result: z.ZodEnum<{
+            replace: "replace";
+            new: "new";
+        }>;
+    }, z.core.$strip>>;
 }, z.core.$strip>;
 export declare const marketFrameSchema: z.ZodObject<{
     id: z.ZodString;
@@ -115,6 +165,24 @@ export declare const frameSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     updatedAt: z.ZodString;
     type: z.ZodLiteral<"image">;
     file: z.ZodString;
+    provenance: z.ZodOptional<z.ZodObject<{
+        kind: z.ZodLiteral<"generated">;
+        operation: z.ZodEnum<{
+            generate: "generate";
+            edit: "edit";
+        }>;
+        prompt: z.ZodString;
+        references: z.ZodArray<z.ZodObject<{
+            frameId: z.ZodString;
+            frameUpdatedAt: z.ZodString;
+        }, z.core.$strip>>;
+        provider: z.ZodLiteral<"cloudflare-workers-ai">;
+        model: z.ZodLiteral<"@cf/black-forest-labs/flux-2-klein-4b">;
+        result: z.ZodEnum<{
+            replace: "replace";
+            new: "new";
+        }>;
+    }, z.core.$strip>>;
 }, z.core.$strip>, z.ZodObject<{
     id: z.ZodString;
     projectId: z.ZodString;
@@ -177,6 +245,23 @@ export declare const createFrameSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     type: z.ZodLiteral<"market">;
     asset: z.ZodString;
 }, z.core.$strict>], "type">;
+export declare const generateImageFrameSchema: z.ZodObject<{
+    project: z.ZodString;
+    operation: z.ZodEnum<{
+        generate: "generate";
+        edit: "edit";
+    }>;
+    prompt: z.ZodString;
+    target: z.ZodOptional<z.ZodString>;
+    references: z.ZodDefault<z.ZodArray<z.ZodString>>;
+    result: z.ZodEnum<{
+        replace: "replace";
+        new: "new";
+    }>;
+    name: z.ZodOptional<z.ZodString>;
+    x: z.ZodOptional<z.ZodNumber>;
+    y: z.ZodOptional<z.ZodNumber>;
+}, z.core.$strict>;
 export declare const fileListSchema: z.ZodObject<{
     paths: z.ZodArray<z.ZodString>;
 }, z.core.$strip>;
@@ -218,12 +303,16 @@ export type CreateProjectFromBrief = z.infer<typeof createProjectFromBriefSchema
 export type ProjectDerivationStatus = z.infer<typeof projectDerivationStatusSchema>;
 export type GltsFrame = z.infer<typeof gltsFrameSchema>;
 export type ImageFrame = z.infer<typeof imageFrameSchema>;
+export type ImageGenerationOperation = z.infer<typeof imageGenerationOperationSchema>;
+export type ImageGenerationResult = z.infer<typeof imageGenerationResultSchema>;
+export type ImageGenerationProvenance = z.infer<typeof imageGenerationProvenanceSchema>;
 export type MarketFrame = z.infer<typeof marketFrameSchema>;
 export type Frame = z.infer<typeof frameSchema>;
 export type CreateGltsFrame = z.infer<typeof createGltsFrameSchema>;
 export type CreateImageFrame = z.infer<typeof createImageFrameSchema>;
 export type CreateMarketFrame = z.infer<typeof createMarketFrameSchema>;
 export type CreateFrame = z.infer<typeof createFrameSchema>;
+export type GenerateImageFrame = z.infer<typeof generateImageFrameSchema>;
 export type FileList = z.infer<typeof fileListSchema>;
 export type TextFile = z.infer<typeof textFileSchema>;
 export type BinaryFile = z.infer<typeof binaryFileSchema>;

package/dist/v1/schemas.js

@@ -1,6 +1,8 @@
 import { z } from "zod";
 export const MAX_FRAME_DIMENSION = 4_096;
 export const MAX_FILE_LENGTH = 512_000;
+export const MAX_IMAGE_GENERATION_PROMPT_LENGTH = 2_048;
+export const MAX_IMAGE_GENERATION_REFERENCES = 4;
 export const designIdSchema = z
     .string()
     .regex(/^[a-z0-9]{14}$/, "IDs are 14 lowercase alphanumeric characters");
@@ -91,9 +93,27 @@ const frameBaseSchema = z.object({
 export const gltsFrameSchema = frameBaseSchema.extend({
     type: z.literal("glts"),
 });
+export const imageGenerationOperationSchema = z.enum(["generate", "edit"]);
+export const imageGenerationResultSchema = z.enum(["new", "replace"]);
+export const imageGenerationReferenceSchema = z.object({
+    frameId: designIdSchema,
+    frameUpdatedAt: z.string().datetime(),
+});
+export const imageGenerationProvenanceSchema = z.object({
+    kind: z.literal("generated"),
+    operation: imageGenerationOperationSchema,
+    prompt: z.string().min(1).max(MAX_IMAGE_GENERATION_PROMPT_LENGTH),
+    references: z
+        .array(imageGenerationReferenceSchema)
+        .max(MAX_IMAGE_GENERATION_REFERENCES),
+    provider: z.literal("cloudflare-workers-ai"),
+    model: z.literal("@cf/black-forest-labs/flux-2-klein-4b"),
+    result: imageGenerationResultSchema,
+});
 export const imageFrameSchema = frameBaseSchema.extend({
     type: z.literal("image"),
     file: projectPathSchema,
+    provenance: imageGenerationProvenanceSchema.optional(),
 });
 export const marketFrameSchema = frameBaseSchema.extend({
     type: z.literal("market"),
@@ -137,6 +157,85 @@ export const createFrameSchema = z.discriminatedUnion("type", [
     createImageFrameSchema,
     createMarketFrameSchema,
 ]);
+export const generateImageFrameSchema = z
+    .object({
+    project: designIdSchema,
+    operation: imageGenerationOperationSchema,
+    prompt: z.string().trim().min(1).max(MAX_IMAGE_GENERATION_PROMPT_LENGTH),
+    target: designIdSchema.optional(),
+    references: z
+        .array(designIdSchema)
+        .max(MAX_IMAGE_GENERATION_REFERENCES)
+        .default([]),
+    result: imageGenerationResultSchema,
+    name: frameNameSchema.optional(),
+    x: framePositionSchema.optional(),
+    y: framePositionSchema.optional(),
+})
+    .strict()
+    .superRefine((input, context) => {
+    const orderedReferences = [
+        ...(input.target ? [input.target] : []),
+        ...input.references,
+    ];
+    if (new Set(orderedReferences).size !== orderedReferences.length) {
+        context.addIssue({
+            code: "custom",
+            path: ["references"],
+            message: "Image references must be unique",
+        });
+    }
+    if (orderedReferences.length > MAX_IMAGE_GENERATION_REFERENCES) {
+        context.addIssue({
+            code: "custom",
+            path: ["references"],
+            message: `Image generation supports at most ${MAX_IMAGE_GENERATION_REFERENCES} references`,
+        });
+    }
+    if (input.operation === "generate" && input.target) {
+        context.addIssue({
+            code: "custom",
+            path: ["target"],
+            message: "A generation request cannot have an edit target",
+        });
+    }
+    if (input.operation === "edit" && !input.target) {
+        context.addIssue({
+            code: "custom",
+            path: ["target"],
+            message: "An edit request requires an image target",
+        });
+    }
+    if (input.result === "replace" && input.operation !== "edit") {
+        context.addIssue({
+            code: "custom",
+            path: ["result"],
+            message: "Only an image edit can replace a frame",
+        });
+    }
+    if (input.result === "new" && !input.name) {
+        context.addIssue({
+            code: "custom",
+            path: ["name"],
+            message: "A new generated frame requires a name",
+        });
+    }
+    if (input.result === "replace" && input.name) {
+        context.addIssue({
+            code: "custom",
+            path: ["name"],
+            message: "A replacement keeps the target frame name",
+        });
+    }
+    if (input.result === "replace" &&
+        (input.x !== undefined || input.y !== undefined)) {
+        context.addIssue({
+            code: "custom",
+            path: [input.x !== undefined ? "x" : "y"],
+            message: "A replacement keeps the target frame position",
+        });
+    }
+});
 export const fileListSchema = z.object({
     paths: z.array(projectPathSchema),
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawcall/design",
-  "version": "0.2.13",
+  "version": "0.4.0",
   "description": "Typed API and remote CLI for Drawcall Design",
   "repository": {
     "type": "git",

package/skills/drawcall-design/SKILL.md

@@ -19,6 +19,8 @@ Read a file before editing it. Use a narrow edit for one known change and write
 
 A GLTS frame contains only `.glts` files. `index.glts` is its optional root asset; without it the frame renders empty. Every `.glts` file is a trusted TypeScript ESM module that default-exports a no-argument class derived from `THREE.Object3D`. Avoid top-level side effects because reload evaluates the module again. Implement `dispose()` when the asset exclusively owns disposable resources.
 
+Author GLTS scenes top-down: create the root entry scene first, reference the child `.glts` assets it will compose, then implement those children progressively. A missing `.glts` import renders as a glowing marker labeled with its filename until the real file is written, so the completed parts of the scene remain visible. Treat the marker and its console warning as a temporary missing-dependency diagnostic, not as authored content.
+
 ```ts
 import * as THREE from "three";
 import Wheel from "./parts/wheel.glts";