@drawcall/design 0.1.8 → 0.2.0

package/dist/v1/schemas.js

@@ -1,8 +1,9 @@
 import { z } from "zod";
 export const MAX_FRAME_DIMENSION = 4_096;
-export const MAX_SOURCE_FILE_COUNT = 64;
-export const MAX_SOURCE_FILE_LENGTH = 512_000;
-export const MAX_SOURCE_TOTAL_LENGTH = 4_000_000;
+export const MAX_FILE_LENGTH = 512_000;
+export const designIdSchema = z
+    .string()
+    .regex(/^[a-z0-9]{14}$/, "IDs are 14 lowercase alphanumeric characters");
 export const projectNameSchema = z
     .string()
     .trim()
@@ -22,37 +23,28 @@ export const httpUrlSchema = z
     .url()
     .refine(isHttpUrl, "URLs must use HTTP or HTTPS");
 export const imageUrlSchema = httpUrlSchema;
-export const sourcePathSchema = z.string().max(1_024).refine(isSourcePath, {
-    message: "Source paths must be absolute and cannot contain empty, . or .. segments",
+/** An absolute path in the hosted project filesystem. */
+export const projectPathSchema = z.string().max(1_024).refine(isProjectPath, {
+    message: "Project paths must be absolute and cannot contain empty, . or .. segments",
 });
-export const sourceCodeSchema = z.string().max(MAX_SOURCE_FILE_LENGTH);
-export const sourceFilesSchema = z
-    .record(sourcePathSchema, sourceCodeSchema)
-    .superRefine((files, context) => {
-    const entries = Object.entries(files);
-    if (entries.length > MAX_SOURCE_FILE_COUNT) {
-        context.addIssue({
-            code: "custom",
-            message: `Source cannot contain more than ${MAX_SOURCE_FILE_COUNT} files`,
-        });
-    }
-    const totalLength = entries.reduce((total, [, code]) => total + code.length, 0);
-    if (totalLength > MAX_SOURCE_TOTAL_LENGTH) {
-        context.addIssue({
-            code: "custom",
-            message: `Source cannot exceed ${MAX_SOURCE_TOTAL_LENGTH} characters`,
-        });
-    }
-})
-    .refine((files) => !("/index.js" in files && "/index.ts" in files), {
-    message: "A frame cannot contain both /index.js and /index.ts",
+/** A project directory path. `/` denotes the project root. */
+export const projectDirectoryPathSchema = z
+    .union([z.literal("/"), projectPathSchema])
+    .refine((path) => path === "/" || !path.endsWith("/"), {
+    message: "Directory paths cannot end with /",
 });
-export const sourceDeletePathsSchema = z
-    .array(z.union([sourcePathSchema, z.literal("*")]))
+export const fileTextSchema = z.string().max(MAX_FILE_LENGTH);
+export const marketAssetNameSchema = z
+    .string()
     .min(1)
-    .refine((paths) => !paths.includes("*") || paths.length === 1, {
-    message: "* must be the only delete path",
-});
+    .max(128)
+    .regex(/^[a-z0-9][a-z0-9-]*[a-z0-9]$/, "Asset names must be lowercase alphanumeric with hyphens");
+export const marketAssetVersionSchema = z
+    .string()
+    .regex(/^\d+\.\d+\.\d+(-[a-zA-Z0-9.]+)?(\+[a-zA-Z0-9.]+)?$/, "Asset versions must be exact semver versions (for example 1.0.0)");
+export const marketAssetSchema = z
+    .string()
+    .refine(isMarketAsset, "Assets must use exact name@version references");
 export const userSchema = z.object({
     id: z.string().min(1),
     name: z.string(),
@@ -60,72 +52,99 @@ export const userSchema = z.object({
     image: z.string().url().nullable(),
 });
 export const projectSchema = z.object({
-    id: z.string().min(1),
+    id: designIdSchema,
     name: projectNameSchema,
     createdAt: z.string().datetime(),
     updatedAt: z.string().datetime(),
 });
 const frameBaseSchema = z.object({
-    id: z.string().uuid(),
-    projectId: z.string().min(1),
+    id: designIdSchema,
+    projectId: designIdSchema,
     name: frameNameSchema,
     x: framePositionSchema,
     y: framePositionSchema,
     width: frameSizeSchema,
     height: frameSizeSchema,
+    viewUrl: httpUrlSchema,
     createdAt: z.string().datetime(),
     updatedAt: z.string().datetime(),
 });
-export const codeFrameSchema = frameBaseSchema.extend({
-    kind: z.literal("code"),
-    viewUrl: httpUrlSchema,
+export const gltsFrameSchema = frameBaseSchema.extend({
+    type: z.literal("glts"),
 });
 export const imageFrameSchema = frameBaseSchema.extend({
-    kind: z.literal("image"),
-    contentUrl: httpUrlSchema,
+    type: z.literal("image"),
+    file: projectPathSchema,
 });
-export const frameSchema = z.discriminatedUnion("kind", [
-    codeFrameSchema,
+export const marketFrameSchema = frameBaseSchema.extend({
+    type: z.literal("market"),
+    asset: marketAssetSchema,
+});
+export const frameSchema = z.discriminatedUnion("type", [
+    gltsFrameSchema,
     imageFrameSchema,
+    marketFrameSchema,
 ]);
 const createFrameBaseSchema = z.object({
-    project: projectNameSchema,
+    project: designIdSchema,
     name: frameNameSchema,
-    width: frameSizeSchema,
-    height: frameSizeSchema,
     x: framePositionSchema.optional(),
     y: framePositionSchema.optional(),
 });
-export const createCodeFrameSchema = createFrameBaseSchema.extend({
-    kind: z.literal("code"),
-    source: sourceFilesSchema.optional(),
-});
-export const createImageFrameSchema = createFrameBaseSchema.extend({
-    kind: z.literal("image"),
+export const createGltsFrameSchema = createFrameBaseSchema
+    .extend({
+    type: z.literal("glts"),
+    width: frameSizeSchema,
+    height: frameSizeSchema,
+})
+    .strict();
+export const createImageFrameSchema = createFrameBaseSchema
+    .extend({
+    type: z.literal("image"),
     image: z.union([
         z.file().mime(["image/png", "image/jpeg", "image/webp"]),
         imageUrlSchema,
     ]),
-});
-export const createFrameSchema = z.discriminatedUnion("kind", [
-    createCodeFrameSchema,
+})
+    .strict();
+export const createMarketFrameSchema = createFrameBaseSchema
+    .extend({
+    type: z.literal("market"),
+    asset: marketAssetSchema,
+})
+    .strict();
+export const createFrameSchema = z.discriminatedUnion("type", [
+    createGltsFrameSchema,
     createImageFrameSchema,
+    createMarketFrameSchema,
 ]);
-export const sourceListSchema = z.object({
-    paths: z.array(sourcePathSchema),
+export const fileListSchema = z.object({
+    paths: z.array(projectPathSchema),
+});
+export const textFileSchema = z.object({
+    type: z.literal("text"),
+    path: projectPathSchema,
+    text: z.string(),
+    mediaType: z.literal("text/plain"),
 });
-export const sourceFileSchema = z.object({
-    path: sourcePathSchema,
-    code: z.string(),
+export const binaryFileSchema = z.object({
+    type: z.literal("binary"),
+    path: projectPathSchema,
+    url: httpUrlSchema,
+    mediaType: z.string().min(1),
 });
-export const sourceMutationSchema = sourceListSchema;
+export const fileSchema = z.discriminatedUnion("type", [
+    textFileSchema,
+    binaryFileSchema,
+]);
+export const fileMutationSchema = fileListSchema;
 export const screenshotSchema = z.object({
     url: httpUrlSchema,
     width: frameSizeSchema,
     height: frameSizeSchema,
     mediaType: z.literal("image/png"),
 });
-function isSourcePath(path) {
+function isProjectPath(path) {
     if (!path.startsWith("/") || path === "/" || path.endsWith("/"))
         return false;
     if (path.includes("\\") || path.includes("\0"))
@@ -135,6 +154,13 @@ function isSourcePath(path) {
         .split("/")
         .every((segment) => segment.length > 0 && segment !== "." && segment !== "..");
 }
+function isMarketAsset(value) {
+    const separator = value.lastIndexOf("@");
+    if (separator < 1 || separator === value.length - 1)
+        return false;
+    return (marketAssetNameSchema.safeParse(value.slice(0, separator)).success &&
+        marketAssetVersionSchema.safeParse(value.slice(separator + 1)).success);
+}
 function isHttpUrl(value) {
     if (!URL.canParse(value))
         return false;

package/package.json

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

package/skills/drawcall-design/SKILL.md

@@ -1,35 +1,50 @@
 ---
 name: drawcall-design
-description: 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.
+description: 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.
 ---
 
 # Drawcall Design
 
-Use 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.
+Use 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.
 
-A 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`.
+## Project filesystem
 
-Source 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.
+A 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`.
 
-A 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.
+Create 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`.
 
-Create 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.
+Read 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.
+
+## GLTS assets
+
+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.
 
 ```ts
 import * as THREE from "three";
+import Wheel from "./parts/wheel.glts";
+
+export default class Racecar extends THREE.Group {
+  constructor() {
+    super();
+    this.add(new Wheel());
+  }
+}
+```
 
-const root = new THREE.Scene();
-// Build the object or scene.
+Use relative `.glts` imports within a frame. Use a project-absolute path to import a GLTS asset from another frame:
 
-export const scene: THREE.Object3D = root;
+```ts
+import Chassis from "/other-frame-id/index.glts";
+```
 
-const view = new THREE.PerspectiveCamera(35, 1, 0.1, 100);
-view.position.set(4, 3, 5);
-view.lookAt(0, 0, 0);
+For a non-GLTS file from an image or Market frame, preserve the project filesystem URL through `import.meta.url`:
 
-export const camera: THREE.Camera = view;
+```ts
+const modelUrl = new URL("/market-frame-id/models/car.glb", import.meta.url);
 ```
 
-Read 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.
+GLTS 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.
+
+The 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.
 
-After every meaningful visual change, take a frame screenshot and inspect it. Iterate until the rendered object, composition, and frame size satisfy the request.
+After every meaningful visual change, take and inspect a screenshot. Iterate until the asset, camera, composition, and requested frame size are right.

package/dist/source.d.ts

@@ -1,10 +0,0 @@
-import type { SourceFiles } from "./v1/schemas.js";
-export declare class SourceEditError extends Error {
-    constructor(message: string);
-}
-export declare class SourceFileNotFoundError extends Error {
-    constructor(path: string);
-}
-export declare function editSourceCode(code: string, oldText: string, newText: string): string;
-export declare function editSourceFile(files: SourceFiles, path: string, oldText: string, newText: string): SourceFiles;
-export declare function deleteSourceFiles(files: SourceFiles, paths: string[]): SourceFiles;

package/dist/source.js

@@ -1,38 +0,0 @@
-export class SourceEditError extends Error {
-    constructor(message) {
-        super(message);
-        this.name = "SourceEditError";
-    }
-}
-export class SourceFileNotFoundError extends Error {
-    constructor(path) {
-        super(`Source file not found: ${path}`);
-        this.name = "SourceFileNotFoundError";
-    }
-}
-export function editSourceCode(code, oldText, newText) {
-    if (oldText.length === 0)
-        throw new SourceEditError("oldText cannot be empty");
-    const match = code.indexOf(oldText);
-    if (match === -1)
-        throw new SourceEditError("oldText does not occur in the source file");
-    if (code.indexOf(oldText, match + 1) !== -1) {
-        throw new SourceEditError("oldText occurs more than once in the source file");
-    }
-    return code.slice(0, match) + newText + code.slice(match + oldText.length);
-}
-export function editSourceFile(files, path, oldText, newText) {
-    const code = files[path];
-    if (code === undefined)
-        throw new SourceFileNotFoundError(path);
-    return { ...files, [path]: editSourceCode(code, oldText, newText) };
-}
-export function deleteSourceFiles(files, paths) {
-    if (paths.length === 1 && paths[0] === "*")
-        return {};
-    for (const path of paths) {
-        if (!Object.hasOwn(files, path))
-            throw new SourceFileNotFoundError(path);
-    }
-    return Object.fromEntries(Object.entries(files).filter(([path]) => !paths.includes(path)));
-}