@drawcall/design 0.8.0 → 0.9.0

package/dist/command/context.js

@@ -0,0 +1,17 @@
+import { getCliClient } from "../cli-client.js";
+import { apiOption } from "../options.js";
+import { designIdSchema } from "../v1/schemas.js";
+export function clientFor(command) {
+    return getCliClient(apiOption(command));
+}
+export 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);
+}
+export function requireConfirmation(confirmed) {
+    if (!confirmed)
+        throw new Error("Destructive commands require --yes.");
+}

package/dist/command/filesystem.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from "commander";
+export declare function registerFilesystemCommands(program: Command): void;

package/dist/command/filesystem.js

@@ -0,0 +1,80 @@
+import { clientFor, projectId, requireConfirmation } from "./context.js";
+export function registerFilesystemCommands(program) {
+    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.filesystem.list({
+            project: projectId(command),
+            path,
+        });
+        for (const item of result.paths)
+            console.log(item);
+    });
+    program
+        .command("read")
+        .description("Read a project file")
+        .argument("<path>", "Absolute project path")
+        .action(async (path, _options, command) => {
+        const client = await clientFor(command);
+        const file = await client.filesystem.read({
+            project: projectId(command),
+            path,
+        });
+        if (file.type === "text") {
+            process.stdout.write(file.text);
+            return;
+        }
+        console.log(file.url);
+    });
+    program
+        .command("write")
+        .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.filesystem.write({
+            project: projectId(command),
+            path,
+            text: text === undefined || text === "-" ? await readStdin() : text,
+        });
+        console.log(`Wrote ${path}.`);
+    });
+    program
+        .command("edit")
+        .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 (path, oldText, newText, _options, command) => {
+        const client = await clientFor(command);
+        await client.filesystem.edit({
+            project: projectId(command),
+            path,
+            oldText,
+            newText,
+        });
+        console.log(`Edited ${path}.`);
+    });
+    program
+        .command("delete")
+        .description("Delete a project file")
+        .argument("<path>", "Absolute project path")
+        .option("-y, --yes", "Confirm deletion", false)
+        .action(async (path, options, command) => {
+        requireConfirmation(options.yes);
+        const client = await clientFor(command);
+        await client.filesystem.delete({ project: projectId(command), path });
+        console.log(`Deleted ${path}.`);
+    });
+}
+async function readStdin() {
+    const chunks = [];
+    for await (const chunk of process.stdin) {
+        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
+    }
+    return Buffer.concat(chunks).toString("utf8");
+}

package/dist/command/frame.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from "commander";
+export declare function registerFrameCommands(program: Command): void;

package/dist/command/frame.js

@@ -0,0 +1,127 @@
+import { readImageInput } from "../image.js";
+import { parseFrameSize } from "../target.js";
+import { designIdSchema, marketAssetSchema, } from "../v1/schemas.js";
+import { clientFor, projectId, requireConfirmation } from "./context.js";
+import { registerImageCommands } from "./image.js";
+export function registerFrameCommands(program) {
+    const frame = program.command("frame").description("Manage frames");
+    frame
+        .command("list")
+        .description("List frames in the selected project")
+        .action(async (_options, command) => {
+        const client = await clientFor(command);
+        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.id}\t${item.name}\t${item.type}\t${item.width}x${item.height}`);
+        }
+    });
+    frame
+        .command("create")
+        .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 = 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("<frame-id>", "Frame ID")
+        .argument("<name>", "New frame name")
+        .action(async (frameId, name, _options, command) => {
+        const id = designIdSchema.parse(frameId);
+        const client = await clientFor(command);
+        const renamed = await client.frame.rename({
+            project: projectId(command),
+            frame: id,
+            name,
+        });
+        console.log(`Renamed ${renamed.id}\t${renamed.name}.`);
+    });
+    frame
+        .command("delete")
+        .description("Delete frames")
+        .argument("<frame-id...>", "Frame IDs")
+        .option("-y, --yes", "Confirm deletion", false)
+        .action(async (frameIds, options, command) => {
+        requireConfirmation(options.yes);
+        const project = projectId(command);
+        const client = await clientFor(command);
+        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("<frame-id...>", "Frame IDs")
+        .action(async (frameIds, _options, command) => {
+        const project = projectId(command);
+        const client = await clientFor(command);
+        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}`);
+        }
+    });
+    registerImageCommands(frame);
+}
+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");
+}

package/dist/command/image.d.ts

@@ -0,0 +1,2 @@
+import { Command } from "commander";
+export declare function registerImageCommands(frame: Command): void;

package/dist/command/image.js

@@ -0,0 +1,69 @@
+import { Command, Option } from "commander";
+import { readImageInput } from "../image.js";
+import { designIdSchema, generateImageSchema, } from "../v1/schemas.js";
+import { clientFor, projectId } from "./context.js";
+export function registerImageCommands(frame) {
+    frame
+        .command("generate-image")
+        .description("Generate a new image frame")
+        .argument("<name>", "New frame name")
+        .requiredOption("--prompt <text>", "Image generation prompt")
+        .option("--reference <url-or-path>", "Reference image URL or local PNG, JPEG, or WebP; repeat to preserve order", collect, [])
+        .action(async (name, options, command) => {
+        const input = await resolveImageReferences({
+            project: projectId(command),
+            operation: "generate",
+            prompt: options.prompt,
+            references: options.reference,
+            result: "new",
+            name,
+        });
+        const client = await clientFor(command);
+        printGeneratedFrame(await client.frame.generateImage(input));
+    });
+    frame
+        .command("edit-image")
+        .description("Edit an image frame")
+        .argument("<target>", "Image frame ID")
+        .requiredOption("--prompt <text>", "Image edit prompt")
+        .addOption(new Option("--replace", "Replace the target image frame").conflicts("name"))
+        .addOption(new Option("--name <new>", "Create the edit as a new image frame").conflicts("replace"))
+        .option("--reference <url-or-path>", "Additional image URL or local PNG, JPEG, or WebP; repeat to preserve order", collect, [])
+        .action(async (target, options, command) => {
+        const input = await resolveImageReferences({
+            project: projectId(command),
+            operation: "edit",
+            prompt: options.prompt,
+            target: designIdSchema.parse(target),
+            references: options.reference,
+            ...editOutput(options),
+        });
+        const client = await clientFor(command);
+        printGeneratedFrame(await client.frame.generateImage(input));
+    });
+}
+async function resolveImageReferences(input) {
+    const maximum = input.operation === "edit" ? 3 : 4;
+    if (input.references.length > maximum) {
+        throw new Error(`${input.operation === "edit" ? "Image editing" : "Image generation"} supports at most ${maximum} --reference values.`);
+    }
+    return generateImageSchema.parse({
+        ...input,
+        references: await Promise.all(input.references.map(readImageInput)),
+    });
+}
+function editOutput(options) {
+    if (options.replace)
+        return { result: "replace" };
+    if (options.name !== undefined) {
+        return { result: "new", name: options.name };
+    }
+    throw new Error("Choose exactly one of --replace or --name <new>.");
+}
+function collect(value, previous) {
+    return [...previous, value];
+}
+function printGeneratedFrame(frame) {
+    console.log(`Generated ${frame.id}\t${frame.name}\timage`);
+    console.log(`Path /${frame.id}/`);
+}

package/dist/command/project.d.ts

@@ -0,0 +1,2 @@
+import type { Command } from "commander";
+export declare function registerProjectCommands(program: Command): void;

package/dist/command/project.js

@@ -0,0 +1,39 @@
+import { designIdSchema } from "../v1/schemas.js";
+import { clientFor, requireConfirmation } from "./context.js";
+export function registerProjectCommands(program) {
+    const project = program.command("project").description("Manage projects");
+    project
+        .command("list")
+        .description("List projects")
+        .action(async (_options, command) => {
+        const client = await clientFor(command);
+        const projects = await client.project.list();
+        if (projects.length === 0) {
+            console.log("No projects.");
+            return;
+        }
+        for (const item of projects)
+            console.log(`${item.id}\t${item.name}`);
+    });
+    project
+        .command("create")
+        .description("Create a project")
+        .argument("<name>", "Project name")
+        .action(async (name, _options, command) => {
+        const client = await clientFor(command);
+        const created = await client.project.create({ name });
+        console.log(`Created ${created.id}\t${created.name}`);
+    });
+    project
+        .command("delete")
+        .description("Delete a project")
+        .argument("<project-id>", "Project ID")
+        .option("-y, --yes", "Confirm deletion", false)
+        .action(async (projectId, options, command) => {
+        requireConfirmation(options.yes);
+        const id = designIdSchema.parse(projectId);
+        const client = await clientFor(command);
+        await client.project.delete({ project: id });
+        console.log(`Deleted ${id}.`);
+    });
+}

package/dist/command.js

@@ -1,11 +1,9 @@
 import { createRequire } from "node:module";
 import { Command, Option } from "commander";
-import { getCliClient } from "./cli-client.js";
-import { readImageInput } from "./image.js";
-import { apiOption } from "./options.js";
+import { registerFilesystemCommands } from "./command/filesystem.js";
+import { registerFrameCommands } from "./command/frame.js";
+import { registerProjectCommands } from "./command/project.js";
 import { cliDesignSkill } from "./skill.generated.js";
-import { parseFrameSize } from "./target.js";
-import { designIdSchema, marketAssetSchema } from "./v1/schemas.js";
 export function createDesignCommand(options = {}) {
     const program = new Command()
         .name(options.name ?? "design")
@@ -19,251 +17,11 @@ export function createDesignCommand(options = {}) {
         .action(() => {
         process.stdout.write(cliDesignSkill);
     });
-    const project = program.command("project").description("Manage projects");
-    project
-        .command("list")
-        .description("List projects")
-        .action(async (_options, command) => {
-        const client = await clientFor(command);
-        const projects = await client.project.list();
-        if (projects.length === 0) {
-            console.log("No projects.");
-            return;
-        }
-        for (const item of projects)
-            console.log(`${item.id}\t${item.name}`);
-    });
-    project
-        .command("create")
-        .description("Create a project")
-        .argument("<name>", "Project name")
-        .action(async (name, _options, command) => {
-        const client = await clientFor(command);
-        const created = await client.project.create({ name });
-        console.log(`Created ${created.id}\t${created.name}`);
-    });
-    project
-        .command("delete")
-        .description("Delete a project")
-        .argument("<project-id>", "Project ID")
-        .option("-y, --yes", "Confirm deletion", false)
-        .action(async (projectId, options, command) => {
-        requireConfirmation(options.yes);
-        const id = designIdSchema.parse(projectId);
-        const client = await clientFor(command);
-        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 the selected project")
-        .action(async (_options, command) => {
-        const client = await clientFor(command);
-        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.id}\t${item.name}\t${item.type}\t${item.width}x${item.height}`);
-        }
-    });
-    frame
-        .command("create")
-        .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 = 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("<frame-id>", "Frame ID")
-        .argument("<name>", "New frame name")
-        .action(async (frameId, name, _options, command) => {
-        const id = designIdSchema.parse(frameId);
-        const client = await clientFor(command);
-        const renamed = await client.frame.rename({
-            project: projectId(command),
-            frame: id,
-            name,
-        });
-        console.log(`Renamed ${renamed.id}\t${renamed.name}.`);
-    });
-    frame
-        .command("delete")
-        .description("Delete frames")
-        .argument("<frame-id...>", "Frame IDs")
-        .option("-y, --yes", "Confirm deletion", false)
-        .action(async (frameIds, options, command) => {
-        requireConfirmation(options.yes);
-        const project = projectId(command);
-        const client = await clientFor(command);
-        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("<frame-id...>", "Frame IDs")
-        .action(async (frameIds, _options, command) => {
-        const project = projectId(command);
-        const client = await clientFor(command);
-        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}`);
-        }
-    });
-    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.filesystem.list({
-            project: projectId(command),
-            path,
-        });
-        for (const item of result.paths)
-            console.log(item);
-    });
-    program
-        .command("read")
-        .description("Read a project file")
-        .argument("<path>", "Absolute project path")
-        .action(async (path, _options, command) => {
-        const client = await clientFor(command);
-        const file = await client.filesystem.read({
-            project: projectId(command),
-            path,
-        });
-        if (file.type === "text") {
-            process.stdout.write(file.text);
-            return;
-        }
-        console.log(file.url);
-    });
-    program
-        .command("write")
-        .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.filesystem.write({
-            project: projectId(command),
-            path,
-            text: text === undefined || text === "-" ? await readStdin() : text,
-        });
-        console.log(`Wrote ${path}.`);
-    });
-    program
-        .command("edit")
-        .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 (path, oldText, newText, _options, command) => {
-        const client = await clientFor(command);
-        await client.filesystem.edit({
-            project: projectId(command),
-            path,
-            oldText,
-            newText,
-        });
-        console.log(`Edited ${path}.`);
-    });
-    program
-        .command("delete")
-        .description("Delete a project file")
-        .argument("<path>", "Absolute project path")
-        .option("-y, --yes", "Confirm deletion", false)
-        .action(async (path, options, command) => {
-        requireConfirmation(options.yes);
-        const client = await clientFor(command);
-        await client.filesystem.delete({ project: projectId(command), path });
-        console.log(`Deleted ${path}.`);
-    });
+    registerProjectCommands(program);
+    registerFrameCommands(program);
+    registerFilesystemCommands(program);
     return program;
 }
-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));
-}
-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 readStdin() {
-    const chunks = [];
-    for await (const chunk of process.stdin) {
-        chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk));
-    }
-    return Buffer.concat(chunks).toString("utf8");
-}
 function readPackageVersion() {
     const manifest = createRequire(import.meta.url)("../package.json");
     if (!manifest ||

package/dist/frame-image.d.ts

@@ -0,0 +1 @@
+export declare function frameImageUrl(viewUrl: string, frameId: string): string;

package/dist/frame-image.js

@@ -0,0 +1,6 @@
+import { designIdSchema, httpUrlSchema } from "./v1/schemas.js";
+export function frameImageUrl(viewUrl, frameId) {
+    const view = new URL(httpUrlSchema.parse(viewUrl));
+    const id = designIdSchema.parse(frameId);
+    return new URL(`/${id}.webp`, view.origin).href;
+}

package/dist/image.d.ts

@@ -1 +1,2 @@
-export declare function readImageInput(value: string): Promise<File | string>;
+import { type ImageInput } from "./v1/schemas.js";
+export declare function readImageInput(value: string): Promise<ImageInput>;

package/dist/image.js

@@ -1,6 +1,6 @@
 import { readFile } from "node:fs/promises";
 import { basename, extname } from "node:path";
-import { imageUrlSchema } from "./v1/schemas.js";
+import { imageInputSchema, imageUrlSchema, } from "./v1/schemas.js";
 export async function readImageInput(value) {
     if (/^https?:/i.test(value) || value.includes("://")) {
         return imageUrlSchema.parse(value);
@@ -10,9 +10,7 @@ export async function readImageInput(value) {
     if (mediaType === undefined) {
         throw new Error("Local images must be PNG, JPEG, or WebP files");
     }
-    return new File([await readFile(value)], basename(value), {
-        type: mediaType,
-    });
+    return imageInputSchema.parse(new File([await readFile(value)], basename(value), { type: mediaType }));
 }
 function mediaTypeForExtension(extension) {
     if (extension === ".jpeg" || extension === ".jpg")