@drawcall/design 0.1.8 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @drawcall/design
 
-The Drawcall Design v1 API contract and its remote CLI.
+The typed Drawcall Design v1 contract, client, and remote CLI.
 
 ```ts
 import { v1 } from "@drawcall/design";
@@ -9,17 +9,27 @@ const design = v1.createClient({ authToken: process.env.DRAWCALL_AUTH_TOKEN });
 const projects = await design.project.list();
 ```
 
+Projects and frames have immutable 14-character lowercase IDs. A project is a hosted filesystem at `https://<project-id>.design.drawcallcontent.com/`; every frame owns `/<frame-id>/` within it.
+
 ```sh
 npx @drawcall/design login
-npx @drawcall/design skill
 npx @drawcall/design project create showroom
-npx @drawcall/design frame create showroom/chair --size 800x800 'import * as THREE from "three"; export const scene = new THREE.Group()'
-npx @drawcall/design frame create showroom/reference --size 800x800 --image ./reference.png
-npx @drawcall/design frame create showroom/mood --size 800x800 --image https://example.com/mood.webp
-npx @drawcall/design frame screenshot showroom/chair
+# `project list` prints: <project-id> <name>
+
+npx @drawcall/design -p r6z2n9k4x8m1qc frame create racecar \
+  --type glts --size 800x800
+# `frame create` prints its frame ID and /<frame-id>/ path.
+
+npx @drawcall/design -p r6z2n9k4x8m1qc write /a4z8m2q7v9kcde/index.glts \
+  'export default class Racecar extends THREE.Group {}'
+npx @drawcall/design -p r6z2n9k4x8m1qc ls /
+npx @drawcall/design -p r6z2n9k4x8m1qc read /a4z8m2q7v9kcde/index.glts
+npx @drawcall/design -p r6z2n9k4x8m1qc frame screenshot a4z8m2q7v9kcde
+
+npx @drawcall/design -p r6z2n9k4x8m1qc frame create reference \
+  --type image --image ./reference.png
+npx @drawcall/design -p r6z2n9k4x8m1qc frame create oak-chair \
+  --type market --asset oak-chair@1.2.3
 ```
 
-Source is always remote. Commands accept inline text or stdin; there is no checkout or local project
-linking. `frame source replace` accepts a `Record<path, code>` JSON object inline or on stdin.
-Agents should read `npx @drawcall/design skill` before creating or changing code-frame source. MCP
-clients get the same text from `get_skill`.
+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.

package/dist/cli.js

@@ -5,18 +5,17 @@ import { clearConfig, getConfigPath, saveConfig } from "./config.js";
 import { getCliClient } from "./cli-client.js";
 import { readImageInput } from "./image.js";
 import { designSkill } from "./skill.generated.js";
-import { parseFrameSize, parseFrameTarget, parseScreenshotTarget, parseSourceFiles, } from "./target.js";
+import { parseFrameSize } from "./target.js";
 import { createClient, DEFAULT_BASE_URL } from "./v1/client.js";
+import { designIdSchema, marketAssetSchema } from "./v1/schemas.js";
 const AUTH_ISSUER_URL = "https://auth.drawcall.ai/api/auth";
 const DEVICE_CLIENT_ID = "drawcall-cli";
-function sourceInput(source) {
-    return source === undefined ? {} : { source: { "/index.ts": source } };
-}
 const program = new Command()
     .name("design")
-    .description("Design 3D scenes on Drawcall Design")
+    .description("Design 3D assets on Drawcall Design")
     .version(readPackageVersion())
-    .addOption(new Option("--api <url>", "Design API URL").default(process.env.DESIGN_API_URL, "from DESIGN_API_URL / config / default"));
+    .addOption(new Option("--api <url>", "Design API URL").default(process.env.DESIGN_API_URL, "from DESIGN_API_URL / config / default"))
+    .addOption(new Option("-p, --project <id>", "Project ID"));
 program
     .command("skill")
     .description("Print the Drawcall Design skill")
@@ -53,7 +52,7 @@ project
         return;
     }
     for (const item of projects)
-        console.log(`${item.name}\t${item.id}`);
+        console.log(`${item.id}\t${item.name}`);
 });
 project
     .command("create")
@@ -62,190 +61,163 @@ project
     .action(async (name, _options, command) => {
     const client = await clientFor(command);
     const created = await client.project.create({ name });
-    console.log(`Created ${created.name}\t${created.id}`);
+    console.log(`Created ${created.id}\t${created.name}`);
 });
 project
     .command("delete")
     .description("Delete a project")
-    .argument("<name>", "Project name")
+    .argument("<project-id>", "Project ID")
     .option("-y, --yes", "Confirm deletion", false)
-    .action(async (name, options, command) => {
+    .action(async (projectId, options, command) => {
     requireConfirmation(options.yes);
+    const id = designIdSchema.parse(projectId);
     const client = await clientFor(command);
-    await client.project.delete({ project: name });
-    console.log(`Deleted ${name}.`);
+    await client.project.delete({ project: id });
+    console.log(`Deleted ${id}.`);
 });
 const frame = program.command("frame").description("Manage frames");
 frame
     .command("list")
-    .description("List frames in a project")
-    .argument("<project>", "Project name")
-    .action(async (projectName, _options, command) => {
+    .description("List frames in the selected project")
+    .action(async (_options, command) => {
     const client = await clientFor(command);
-    const frames = await client.frame.list({ project: projectName });
+    const frames = await client.frame.list({ project: projectId(command) });
     if (frames.length === 0) {
         console.log("No frames.");
         return;
     }
     for (const item of frames) {
-        console.log(`${item.name}\t${item.kind}\t${item.width}x${item.height}\t${item.id}`);
+        console.log(`${item.id}\t${item.name}\t${item.type}\t${item.width}x${item.height}`);
     }
 });
 frame
     .command("create")
-    .description("Create a code or image frame")
-    .argument("<target>", "Project and frame as <project>/<frame>")
-    .argument("[source]", "Inline /index.ts source, or - to read it from stdin")
-    .requiredOption("-s, --size <width>x<height>", "Authoritative frame size")
-    .option("--image <url-or-path>", "Create an image frame from a URL or file")
-    .action(async (targetValue, sourceValue, options, command) => {
-    const target = parseFrameTarget(targetValue);
-    const size = parseFrameSize(options.size);
-    if (options.image !== undefined && sourceValue !== undefined) {
-        throw new Error("Source and --image cannot be used together");
-    }
+    .description("Create a GLTS, image, or pinned Market frame")
+    .argument("<name>", "Frame name")
+    .requiredOption("-t, --type <type>", "glts, image, or market")
+    .option("-s, --size <width>x<height>", "GLTS viewport size")
+    .option("--image <url-or-path>", "Image URL or local PNG, JPEG, or WebP")
+    .option("--asset <name@version>", "Exact public Market asset version")
+    .action(async (name, options, command) => {
+    const project = projectId(command);
+    const input = await createFrameInput(project, name, options);
     const client = await clientFor(command);
-    const created = options.image === undefined
-        ? await client.frame.create({
-            project: target.project,
-            name: target.frame,
-            kind: "code",
-            ...size,
-            ...sourceInput(await optionalIndexSource(sourceValue)),
-        })
-        : await client.frame.create({
-            project: target.project,
-            name: target.frame,
-            kind: "image",
-            image: await readImageInput(options.image),
-            ...size,
-        });
-    console.log(`Created ${targetValue}\t${created.id}`);
+    const created = await client.frame.create(input);
+    console.log(`Created ${created.id}\t${created.name}\t${created.type}`);
+    console.log(`Path /${created.id}/`);
 });
 frame
     .command("rename")
     .description("Rename a frame")
-    .argument("<target>", "Project and frame as <project>/<frame>")
+    .argument("<frame-id>", "Frame ID")
     .argument("<name>", "New frame name")
-    .action(async (targetValue, name, _options, command) => {
+    .action(async (frameId, name, _options, command) => {
+    const id = designIdSchema.parse(frameId);
     const client = await clientFor(command);
     const renamed = await client.frame.rename({
-        ...parseFrameTarget(targetValue),
+        project: projectId(command),
+        frame: id,
         name,
     });
-    console.log(`Renamed ${targetValue} to ${renamed.name}.`);
+    console.log(`Renamed ${renamed.id}\t${renamed.name}.`);
 });
 frame
     .command("delete")
-    .description("Delete one or more frames")
-    .argument("<targets...>", "Frames as <project>/<frame>")
+    .description("Delete frames")
+    .argument("<frame-id...>", "Frame IDs")
     .option("-y, --yes", "Confirm deletion", false)
-    .action(async (targets, options, command) => {
+    .action(async (frameIds, options, command) => {
     requireConfirmation(options.yes);
+    const project = projectId(command);
     const client = await clientFor(command);
-    for (const targetValue of targets) {
-        await client.frame.delete(parseFrameTarget(targetValue));
-        console.log(`Deleted ${targetValue}.`);
+    for (const frameId of frameIds) {
+        const id = designIdSchema.parse(frameId);
+        await client.frame.delete({ project, frame: id });
+        console.log(`Deleted ${id}.`);
     }
 });
 frame
     .command("screenshot")
     .description("Render frames and print their screenshot URLs")
-    .argument("<targets...>", "Projects or frames as <project> or <project>/<frame>")
-    .action(async (targets, _options, command) => {
+    .argument("<frame-id...>", "Frame IDs")
+    .action(async (frameIds, _options, command) => {
+    const project = projectId(command);
     const client = await clientFor(command);
-    for (const value of targets)
-        await screenshotTarget(client, value);
+    for (const frameId of frameIds) {
+        const id = designIdSchema.parse(frameId);
+        const result = await client.frame.screenshot({ project, frame: id });
+        console.log(`${id}\t${result.url}`);
+    }
 });
-const source = frame.command("source").description("Manage code-frame source");
-source
-    .command("list")
-    .description("List source paths")
-    .argument("<target>", "Project and frame as <project>/<frame>")
-    .action(async (targetValue, _options, command) => {
+program
+    .command("ls")
+    .description("List paths in the selected project filesystem")
+    .argument("[path]", "Absolute directory path", "/")
+    .action(async (path, _options, command) => {
     const client = await clientFor(command);
-    const result = await client.frame.source.list(parseFrameTarget(targetValue));
-    for (const path of result.paths)
-        console.log(path);
+    const result = await client.filesystem.list({
+        project: projectId(command),
+        path,
+    });
+    for (const item of result.paths)
+        console.log(item);
 });
-source
+program
     .command("read")
-    .description("Read one source file")
-    .argument("<target>", "Project and frame as <project>/<frame>")
-    .argument("<path>", "Absolute source path")
-    .action(async (targetValue, path, _options, command) => {
+    .description("Read a project file")
+    .argument("<path>", "Absolute project path")
+    .action(async (path, _options, command) => {
     const client = await clientFor(command);
-    const result = await client.frame.source.read({
-        ...parseFrameTarget(targetValue),
+    const file = await client.filesystem.read({
+        project: projectId(command),
         path,
     });
-    process.stdout.write(result.code);
+    if (file.type === "text") {
+        process.stdout.write(file.text);
+        return;
+    }
+    console.log(file.url);
 });
-source
+program
     .command("write")
-    .description("Create or replace one source file")
-    .argument("<target>", "Project and frame as <project>/<frame>")
-    .argument("<path>", "Absolute source path")
-    .argument("[code]", "Inline code; omit or use - to read stdin")
-    .action(async (targetValue, path, codeValue, _options, command) => {
-    const code = codeValue === undefined || codeValue === "-"
-        ? await readStdin()
-        : codeValue;
+    .description("Create or overwrite a text project file")
+    .argument("<path>", "Absolute project path")
+    .argument("[text]", "Inline text; omit or use - to read stdin")
+    .action(async (path, text, _options, command) => {
     const client = await clientFor(command);
-    await client.frame.source.write({
-        ...parseFrameTarget(targetValue),
+    await client.filesystem.write({
+        project: projectId(command),
         path,
-        code,
+        text: text === undefined || text === "-" ? await readStdin() : text,
     });
     console.log(`Wrote ${path}.`);
 });
-source
+program
     .command("edit")
-    .description("Replace text that occurs exactly once in one source file")
-    .argument("<target>", "Project and frame as <project>/<frame>")
-    .argument("<path>", "Absolute source path")
+    .description("Replace text that occurs exactly once in a project file")
+    .argument("<path>", "Absolute project path")
     .argument("<old-text>", "Text that must occur exactly once")
     .argument("<new-text>", "Replacement text")
-    .action(async (targetValue, path, oldText, newText, _options, command) => {
+    .action(async (path, oldText, newText, _options, command) => {
     const client = await clientFor(command);
-    await client.frame.source.edit({
-        ...parseFrameTarget(targetValue),
+    await client.filesystem.edit({
+        project: projectId(command),
         path,
         oldText,
         newText,
     });
     console.log(`Edited ${path}.`);
 });
-source
-    .command("replace")
-    .description("Replace all source files from a Record<path, code> JSON object")
-    .argument("<target>", "Project and frame as <project>/<frame>")
-    .argument("[files]", "Inline JSON, or omit/use - to read stdin")
-    .action(async (targetValue, filesValue, _options, command) => {
-    const input = filesValue === undefined || filesValue === "-"
-        ? await readStdin()
-        : filesValue;
-    const client = await clientFor(command);
-    await client.frame.source.replace({
-        ...parseFrameTarget(targetValue),
-        files: parseSourceFiles(input),
-    });
-    console.log("Replaced source.");
-});
-source
+program
     .command("delete")
-    .description("Delete exact source paths, or all source with a quoted *")
-    .argument("<target>", "Project and frame as <project>/<frame>")
-    .argument("<paths...>", "Absolute paths, or quoted *")
+    .description("Delete a project file")
+    .argument("<path>", "Absolute project path")
     .option("-y, --yes", "Confirm deletion", false)
-    .action(async (targetValue, paths, options, command) => {
+    .action(async (path, options, command) => {
     requireConfirmation(options.yes);
     const client = await clientFor(command);
-    await client.frame.source.delete({
-        ...parseFrameTarget(targetValue),
-        paths,
-    });
-    console.log("Deleted source.");
+    await client.filesystem.delete({ project: projectId(command), path });
+    console.log(`Deleted ${path}.`);
 });
 if (process.argv.length <= 2) {
     program.outputHelp();
@@ -256,6 +228,49 @@ else {
         process.exitCode = 1;
     });
 }
+async function createFrameInput(project, name, options) {
+    if (options.type === "glts") {
+        if (options.image !== undefined || options.asset !== undefined) {
+            throw new Error("GLTS frames do not accept --image or --asset");
+        }
+        if (options.size === undefined) {
+            throw new Error("GLTS frames require --size <width>x<height>");
+        }
+        return {
+            project,
+            name,
+            type: "glts",
+            ...parseFrameSize(options.size),
+        };
+    }
+    if (options.type === "image") {
+        if (options.size !== undefined || options.asset !== undefined) {
+            throw new Error("Image frames do not accept --size or --asset");
+        }
+        if (options.image === undefined)
+            throw new Error("Image frames require --image");
+        return {
+            project,
+            name,
+            type: "image",
+            image: await readImageInput(options.image),
+        };
+    }
+    if (options.type === "market") {
+        if (options.size !== undefined || options.image !== undefined) {
+            throw new Error("Market frames do not accept --size or --image");
+        }
+        if (options.asset === undefined)
+            throw new Error("Market frames require --asset");
+        return {
+            project,
+            name,
+            type: "market",
+            asset: marketAssetSchema.parse(options.asset),
+        };
+    }
+    throw new Error("--type must be glts, image, or market");
+}
 async function clientFor(command) {
     return getCliClient(apiOption(command));
 }
@@ -263,15 +278,17 @@ function apiOption(command) {
     const value = command.optsWithGlobals().api;
     return typeof value === "string" ? value : undefined;
 }
+function projectId(command) {
+    const value = command.optsWithGlobals().project;
+    if (typeof value !== "string") {
+        throw new Error("Select a project with -p, --project <project-id>.");
+    }
+    return designIdSchema.parse(value);
+}
 function requireConfirmation(confirmed) {
     if (!confirmed)
         throw new Error("Destructive commands require --yes.");
 }
-async function optionalIndexSource(value) {
-    if (value === undefined)
-        return undefined;
-    return value === "-" ? readStdin() : value;
-}
 async function readStdin() {
     const chunks = [];
     for await (const chunk of process.stdin) {
@@ -279,22 +296,6 @@ async function readStdin() {
     }
     return Buffer.concat(chunks).toString("utf8");
 }
-async function screenshotTarget(client, value) {
-    const target = parseScreenshotTarget(value);
-    if (target.frame) {
-        const result = await client.frame.screenshot(target);
-        console.log(`${value}\t${result.url}`);
-        return;
-    }
-    const frames = await client.frame.list({ project: target.project });
-    for (const item of frames) {
-        const result = await client.frame.screenshot({
-            project: target.project,
-            frame: item.name,
-        });
-        console.log(`${target.project}/${item.name}\t${result.url}`);
-    }
-}
 function readPackageVersion() {
     const manifest = createRequire(import.meta.url)("../package.json");
     if (!manifest ||

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 export * as v1 from "./v1/index.js";
 export { designSkill } from "./skill.generated.js";
-export { deleteSourceFiles, editSourceCode, editSourceFile, SourceEditError, SourceFileNotFoundError, } from "./source.js";
-export { parseFrameSize, parseFrameTarget, parseScreenshotTarget, parseSourceFiles, type FrameTarget, type ScreenshotTarget, } from "./target.js";
+export { parseFrameSize } from "./target.js";
 export { acknowledgesInspection, inspectionCommandSchema, inspectionFrameMessageSchema, inspectionMessageTypes, projectSyncUrl, type InspectionAppliedMessage, type InspectionCommand, type InspectionFrameMessage, } from "./protocol.js";
-export type { CodeFrame, CreateCodeFrame, CreateFrame, CreateImageFrame, Frame, ImageFrame, Project, Screenshot, SourceFile, SourceFiles, SourceList, SourceMutation, User, } from "./v1/schemas.js";
+export type { BinaryFile, CreateFrame, CreateGltsFrame, CreateImageFrame, CreateMarketFrame, DesignFile, FileList, FileMutation, Frame, GltsFrame, ImageFrame, MarketFrame, Project, Screenshot, TextFile, User, } from "./v1/schemas.js";

package/dist/index.js

@@ -1,5 +1,4 @@
 export * as v1 from "./v1/index.js";
 export { designSkill } from "./skill.generated.js";
-export { deleteSourceFiles, editSourceCode, editSourceFile, SourceEditError, SourceFileNotFoundError, } from "./source.js";
-export { parseFrameSize, parseFrameTarget, parseScreenshotTarget, parseSourceFiles, } from "./target.js";
+export { parseFrameSize } from "./target.js";
 export { acknowledgesInspection, inspectionCommandSchema, inspectionFrameMessageSchema, inspectionMessageTypes, projectSyncUrl, } from "./protocol.js";

package/dist/skill.generated.d.ts

@@ -1 +1 @@
-export declare const designSkill = "---\nname: drawcall-design\ndescription: Create, modify, inspect, and screenshot 3D objects and scenes in Drawcall Design using its MCP tools or @drawcall/design CLI. Use for Drawcall Design projects, frames, and code-frame source. 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`. Drawcall Design is a remote, current-state canvas: inspect the existing project, frames, and source before changing them.\n\nA code frame stores source as a `Record<absolute path, code>`. A renderable frame has exactly one `/index.ts` or `/index.js`. That module must export `scene`, whose value is a `THREE.Object3D`, and may export `camera`, whose value is a `THREE.Camera`.\n\nSource runs as browser ESM. Use relative imports with explicit extensions for other frame files and normal package imports for browser-compatible packages. Top-level await is supported. In TypeScript files, use syntax that can be erased; avoid features that generate JavaScript.\n\nA code frame represents a designed state rather than a running application. Complete asynchronous setup before exporting the scene, and add any lighting or environment the object needs.\n\nCreate image frames from a public HTTP(S) URL through MCP. In the CLI, `frame create --image` accepts either an HTTP(S) URL or a local PNG, JPEG, or WebP file.\n\n```ts\nimport * as THREE from \"three\";\n\nconst root = new THREE.Scene();\n// Build the object or scene.\n\nexport const scene: THREE.Object3D = root;\n\nconst view = new THREE.PerspectiveCamera(35, 1, 0.1, 100);\nview.position.set(4, 3, 5);\nview.lookAt(0, 0, 0);\n\nexport const camera: THREE.Camera = view;\n```\n\nRead source before editing it. Prefer an exact edit for a small change, write one file when replacing that file, and replace the complete source only when the whole frame should change.\n\nAfter every meaningful visual change, take a frame screenshot and inspect it. Iterate until the rendered object, composition, and frame size satisfy the request.\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\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 objects and scenes in Drawcall Design using its MCP tools or @drawcall/design CLI. Use for Drawcall Design projects, frames, and code-frame source. 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`. Drawcall Design is a remote, current-state canvas: inspect the existing project, frames, and source before changing them.\n\nA code frame stores source as a `Record<absolute path, code>`. A renderable frame has exactly one `/index.ts` or `/index.js`. That module must export `scene`, whose value is a `THREE.Object3D`, and may export `camera`, whose value is a `THREE.Camera`.\n\nSource runs as browser ESM. Use relative imports with explicit extensions for other frame files and normal package imports for browser-compatible packages. Top-level await is supported. In TypeScript files, use syntax that can be erased; avoid features that generate JavaScript.\n\nA code frame represents a designed state rather than a running application. Complete asynchronous setup before exporting the scene, and add any lighting or environment the object needs.\n\nCreate image frames from a public HTTP(S) URL through MCP. In the CLI, `frame create --image` accepts either an HTTP(S) URL or a local PNG, JPEG, or WebP file.\n\n```ts\nimport * as THREE from "three";\n\nconst root = new THREE.Scene();\n// Build the object or scene.\n\nexport const scene: THREE.Object3D = root;\n\nconst view = new THREE.PerspectiveCamera(35, 1, 0.1, 100);\nview.position.set(4, 3, 5);\nview.lookAt(0, 0, 0);\n\nexport const camera: THREE.Camera = view;\n```\n\nRead source before editing it. Prefer an exact edit for a small change, write one file when replacing that file, and replace the complete source only when the whole frame should change.\n\nAfter every meaningful visual change, take a frame screenshot and inspect it. Iterate until the rendered object, composition, and frame size satisfy the request.\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\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/target.d.ts

@@ -1,18 +1,4 @@
-export interface FrameTarget {
-    project: string;
-    frame: string;
-}
-export type ScreenshotTarget = {
-    project: string;
-    frame?: never;
-} | {
-    project: string;
-    frame: string;
-};
-export declare function parseFrameTarget(value: string): FrameTarget;
-export declare function parseScreenshotTarget(value: string): ScreenshotTarget;
 export declare function parseFrameSize(value: string): {
     width: number;
     height: number;
 };
-export declare function parseSourceFiles(value: string): Record<string, string>;

package/dist/target.js

@@ -1,22 +1,3 @@
-import { z } from "zod";
-import { frameNameSchema, projectNameSchema, sourceFilesSchema, } from "./v1/schemas.js";
-export function parseFrameTarget(value) {
-    const segments = value.split("/");
-    const project = segments[0];
-    const frame = segments[1];
-    if (segments.length !== 2 || project === undefined || frame === undefined) {
-        throw new Error(`Expected <project>/<frame>, received ${JSON.stringify(value)}`);
-    }
-    return {
-        project: projectNameSchema.parse(project),
-        frame: frameNameSchema.parse(frame),
-    };
-}
-export function parseScreenshotTarget(value) {
-    if (value.includes("/"))
-        return parseFrameTarget(value);
-    return { project: projectNameSchema.parse(value) };
-}
 export function parseFrameSize(value) {
     const match = /^(\d+)[x×](\d+)$/i.exec(value);
     const widthText = match?.[1];
@@ -34,7 +15,3 @@ export function parseFrameSize(value) {
     }
     return { width, height };
 }
-export function parseSourceFiles(value) {
-    const parsed = JSON.parse(value);
-    return sourceFilesSchema.parse(parsed);
-}