@vinena/vectoys-cli 0.1.0 → 0.2.0

package/SKILL.md

@@ -11,7 +11,7 @@ vectoys draws 3D objects as plain SVG paths. An item is a small React component
 
 1. `npx @vinena/vectoys-cli create <name>` writes `./<name>/` (or under `--dir <dir>`): `item.json`, `src/geometry.ts`, `src/<name>.tsx`, `src/index.ts`, a test, `package.json` and `tsconfig.json`. It renders a shaded, tilted slab. Under `registry/` of a vectoys checkout it uses the workspace's packages, which `bun install` links. Anywhere else it asks for `@vinena/vectoys` and `@vinena/vectoys-react` from npm by version: install them with `npm install` (or your package manager) in the item folder before you check it.
 2. Edit `src/geometry.ts` (parts, camera, poses) and `src/<name>.tsx` (looks, motion, interaction). Write a real `title` and `description` in `item.json`. List every source file in `files`.
-3. `npx @vinena/vectoys-cli check <dir>` runs 8 checks: item.json is valid, the files are under 64 KB together, item.json names no brand, the component renders on the server with no props, the markup has no `NaN` or `Infinity`, two renders give the same markup, the rendered text names no brand, and the root has an accessible name. It needs bun. Fix every FAIL line.
+3. `npx @vinena/vectoys-cli check <dir>` runs 8 checks: item.json is valid, the files are under 96 KB together, item.json names no brand, the component renders on the server with no props, the markup has no `NaN` or `Infinity`, two renders give the same markup, the rendered text names no brand, and the root has an accessible name. It needs bun. Fix every FAIL line.
 4. `npx @vinena/vectoys-cli preview <dir>` writes `<dir>/preview.html` (`--open` opens it): the item rendered on the server in light and dark, and at a row of yaws when the component takes a `yaw` prop. Look at it. Faces drawn in the wrong order, gaps, and parts that float show here, not in the checks.
 5. Iterate on 2 to 4 until it looks right in both themes and at every yaw.
 6. `npx @vinena/vectoys-cli submit <dir>` runs the checks, then opens a pull request (it needs the GitHub CLI, `gh`) that adds the item to vinenastudio/vectoys. If you host your own registry, `npx @vinena/vectoys-cli submit --registry <url>` opens a pull request that lists it. Until submissions open at launch, submit prints what it would send and sends nothing. `--dry-run` does the same at any time.
@@ -20,7 +20,7 @@ vectoys draws 3D objects as plain SVG paths. An item is a small React component
 
 Units are scene units. The camera's `width` (100 by default) and `height` are the SVG viewBox. Pick a scale such as `const mm = (v: number) => v * 0.4` and write real sizes.
 
-Axes. A part's own plane is x right, y down, z out of its top face. The model is x across, y towards the front, z up. A part lying flat faces up. Stand it upright towards the eye with `rotation: rotateX(-90)`.
+Axes. A part's own plane is x right, y down, z out of its top face. The model is x across, y toward the front, z up. A part lying flat faces up. Stand it upright toward the eye with `rotation: rotateX(-90)`.
 
 Parts (`@vinena/vectoys`):
 
@@ -35,7 +35,7 @@ Poses and joints. A `Pose` is `{ position: [x, y, z], rotation }`. Build rotatio
 
 Camera. `camera({ width, height, perspective, yaw, pitch, roll, anchorX, anchorY, back, originX, originY })`. `perspective` about 280 to 400 for a scene 100 wide. `yaw` turns the model about its up axis and `pitch` tips it to or from the eye. A device at rest usually sits near `yaw: -24, pitch: -16`.
 
-Drawing. `draw(scene, eye)` returns `{ faces, hulls }`: the faces that face the eye, far to near, and each part's silhouette. Parts sort by `order` first, then by depth. Leave `order` out unless two parts draw in the wrong order: parts that interlock, or one that swings past another's centre (a lid over its base). Then give the part in front a higher `order`.
+Drawing. `draw(scene, eye)` returns `{ faces, hulls }`: the faces that face the eye, far to near, and each part's silhouette. Parts sort by `order` first, then by depth. Leave `order` out unless two parts draw in the wrong order: parts that interlock, or one that swings past another's center (a lid over its base). Then give the part in front a higher `order`.
 
 `footprint(scene, eye, { gap, spread, ahead })` is the shadow on the ground under the model. Draw it first, blurred if you like. `poses(scene)` maps each part's name to its pose in the scene, for laying a screen on a child part.
 
@@ -45,13 +45,13 @@ Keep `seen(...)` in `geometry.ts`: one pure function from the item's state (open
 
 `<Faces faces hulls styles shading />` draws what `draw` returned. `styles` maps a role to SVG path props: `top`, `side`, `bottom`, a plate's `role`, or `"part.role"` for one part only (`"body.top"`, `"knot.side"`). Write fills as `style: { fill }`.
 
-Take colours from the page's CSS variables, each with a fallback so the item shows before the page sets them:
+Take colors from the page's CSS variables, each with a fallback so the item shows before the page sets them:
 
 - `--vectoys-finish`: the main material. Expose a `finish` prop that sets it.
 - `--vectoys-surface`, `--vectoys-hairline`, `--vectoys-shadow`, `--vectoys-accent`, `--vectoys-ink`, `--vectoys-bg`. Add an item variable such as `--vectoys-paper` only when none of these fits.
 - `--vectoys-focus` and `--vectoys-focus-width` for focus rings.
 
-Mix tones with `color-mix(in srgb, ...)` instead of new colours. `shading` darkens faces turned from the light and lifts the few turned right at it. The page tunes it with `--vectoys-shade-strength` (0.5), `--vectoys-shade-color`, `--vectoys-highlight-strength` (0.25) and `--vectoys-highlight`. Draw a hairline outline over the main body's hull with `vectorEffect: "non-scaling-stroke"`. Check the item on a dark page too.
+Mix tones with `color-mix(in srgb, ...)` instead of new colors. `shading` darkens faces turned from the light and lifts the few turned right at it. The page tunes it with `--vectoys-shade-strength` (0.5), `--vectoys-shade-color`, `--vectoys-highlight-strength` (0.25) and `--vectoys-highlight`. Draw a hairline outline over the main body's hull with `vectorEffect: "non-scaling-stroke"`. Check the item on a dark page too.
 
 ## Live HTML on a face
 
@@ -75,21 +75,21 @@ The same props must give the same markup on the server and the client, every tim
 ## Accessibility
 
 - A picture: the root is `role="img"` with an `aria-label` (Stage takes `role` and `label`). With live content inside, use `role="group"` so its links stay reachable.
-- Interactive: use a real `<button>` or `<a href>` with a label, laid over the item's bounds. Give it a visible `:focus-visible` ring in `--vectoys-focus`. Enter and Space must do what a click does.
+- Interactive: use a real `<button>` or `<a href>` with a label, laid over the item's bounds. Give it a visible `:focus-visible` ring in `--vectoys-focus`. A `<button>` must do on Enter and Space what a click does, and an `<a href>` on Enter: both already do this natively, so do not call `preventDefault` on those keys or the click is cancelled. A link does nothing on Space; if it acts as a button, make it a `<button>`.
 - Respect reduced motion: the state still changes, only without the motion.
 - Start hover effects only when `event.pointerType === "mouse"`, so a tap does not stick in the hover state.
 
 ## Rules
 
 - No brand, maker or product names (no trademarked device names) in item.json, the code or the rendered text. Make a generic phone, not a named one.
-- Keep the files under 64 KB together.
+- Keep the files under 96 KB together. Most items need far less; the limit leaves room for a device item with a full 3D model and a hand-drawn front.
 - React 19. Depend only on `@vinena/vectoys`, `@vinena/vectoys-react` and React. No other packages.
 - TypeScript strict. One component per item, named after the item (`my-toy` exports `MyToy`).
 - Props: `label`, `finish`, `yaw` (and `pitch`) for a device that turns, and the state as controlled plus default (`open` and `defaultOpen` with `onOpenChange`), as the registry items do.
 
 ## Example
 
-A badge that lifts towards the mouse and shows live HTML on its face. It passes all 8 checks.
+A badge that lifts toward the mouse and shows live HTML on its face. It passes all 8 checks.
 
 `src/geometry.ts`:
 
@@ -136,7 +136,7 @@ const SHADOW = "var(--vectoys-shadow, rgba(0, 0, 0, 0.08))";
 const fill = (color: string): Look => ({ style: { fill: color } });
 const STYLES: Record<string, Look> = { top: fill(FINISH), side: fill(FINISH), bottom: fill(FINISH), face: fill(SURFACE) };
 
-/** A badge that lifts and turns towards a mouse over it, with live HTML on its face. */
+/** A badge that lifts and turns toward a mouse over it, with live HTML on its face. */
 export function Badge({ children, label = "Badge" }: { children?: ReactNode; label?: string }) {
   const [over, setOver] = useState(false);
   // Springs to its target each frame; under reduced motion it jumps there.

package/dist/index.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
 // src/index.ts
-import { resolve as resolve6 } from "node:path";
+import { resolve as resolve7 } from "node:path";
 // package.json
-var version = "0.1.0";
+var version = "0.2.0";
 
 // src/args.ts
 var VALUES = new Map([
@@ -58,9 +58,9 @@ function parseArgs(argv) {
 
 // src/check.ts
 import { spawnSync as spawnSync3 } from "node:child_process";
-import { existsSync as existsSync5, lstatSync, mkdtempSync, readFileSync as readFileSync5, rmSync, writeFileSync as writeFileSync4 } from "node:fs";
+import { existsSync as existsSync6, lstatSync, mkdtempSync, readFileSync as readFileSync6, rmSync, writeFileSync as writeFileSync4 } from "node:fs";
 import { tmpdir } from "node:os";
-import { basename, extname, join as join5, relative as relative3, resolve as resolve3, sep as sep3 } from "node:path";
+import { basename, extname, join as join6, relative as relative3, resolve as resolve4, sep as sep3 } from "node:path";
 
 // ../registry-build/src/index.ts
 function checkItem(value, file) {
@@ -76,8 +76,8 @@ function checkItem(value, file) {
 
 // src/commands.ts
 import { spawnSync } from "node:child_process";
-import { existsSync as existsSync3, mkdirSync, readFileSync as readFileSync3, writeFileSync as writeFileSync2 } from "node:fs";
-import { dirname, relative, resolve, sep } from "node:path";
+import { existsSync as existsSync4, mkdirSync, readFileSync as readFileSync4, writeFileSync as writeFileSync2 } from "node:fs";
+import { dirname as dirname3, relative, resolve as resolve2, sep } from "node:path";
 
 // src/config.ts
 import { existsSync, readFileSync, writeFileSync } from "node:fs";
@@ -149,9 +149,121 @@ function shared(dirs) {
   return first.slice(0, length).join("/") || ".";
 }
 
+// src/imports.ts
+import { existsSync as existsSync2, readFileSync as readFileSync2, statSync } from "node:fs";
+import { dirname, isAbsolute, join as join2, posix as posix2, resolve } from "node:path";
+var NODE = new Set(["node16", "node18", "node20", "nodenext"]);
+function importExtension(cwd) {
+  const path = nearest(cwd, "tsconfig.json");
+  if (!path)
+    return;
+  const options = compilerOptions(path, new Set);
+  const resolution = lower(options.moduleResolution) ?? (NODE.has(lower(options.module) ?? "") ? "nodenext" : undefined);
+  if (!resolution || !NODE.has(resolution))
+    return;
+  return options.allowImportingTsExtensions === true ? "ts" : "js";
+}
+var SPECIFIER = /(\bfrom\s*|\bimport\s*\(\s*|\bimport\s+)(["'])(\.\.?\/[^"'\n]*)\2/g;
+var SOURCE = /\.tsx?$/;
+function withExtensions(files, extension) {
+  if (!extension)
+    return files;
+  const paths = new Set(files.map((file) => file.to));
+  return files.map((file) => {
+    if (!SOURCE.test(file.to))
+      return file;
+    const content = file.content.replace(SPECIFIER, (match, before, quote, specifier) => {
+      const base = posix2.join(posix2.dirname(file.to), specifier).replace(/\/$/, "");
+      if (paths.has(base))
+        return match;
+      const suffix = ["", "/index"].flatMap((index) => [`${index}.ts`, `${index}.tsx`]).find((candidate) => paths.has(base + candidate));
+      if (!suffix)
+        return match;
+      const named = extension === "ts" ? suffix : suffix.replace(SOURCE, ".js");
+      return `${before}${quote}${specifier.replace(/\/$/, "")}${named}${quote}`;
+    });
+    return { ...file, content };
+  });
+}
+function nearest(from, name) {
+  for (let dir = from;; dir = dirname(dir)) {
+    if (existsSync2(join2(dir, name)))
+      return join2(dir, name);
+    if (dirname(dir) === dir)
+      return;
+  }
+}
+function compilerOptions(path, seen) {
+  if (seen.has(path) || !existsSync2(path))
+    return {};
+  let config;
+  try {
+    config = JSON.parse(jsonc(readFileSync2(path, "utf8")));
+  } catch {
+    return {};
+  }
+  const parents = (Array.isArray(config.extends) ? config.extends : [config.extends]).filter((parent) => typeof parent === "string");
+  const inherited = parents.reduce((options, parent) => {
+    const file = extended(path, parent);
+    return file ? { ...options, ...compilerOptions(file, new Set([...seen, path])) } : options;
+  }, {});
+  return { ...inherited, ...config.compilerOptions };
+}
+function extended(path, parent) {
+  const named = (file) => [file, `${file}.json`].find((candidate) => existsSync2(candidate) && statSync(candidate).isFile());
+  if (/^\.\.?\//.test(parent) || isAbsolute(parent))
+    return named(resolve(dirname(path), parent));
+  for (let dir = dirname(path);; dir = dirname(dir)) {
+    const base = join2(dir, "node_modules", parent);
+    const found = named(base) ?? named(join2(base, packageConfig(base)));
+    if (found)
+      return found;
+    if (dirname(dir) === dir)
+      return;
+  }
+}
+function packageConfig(folder) {
+  try {
+    const { tsconfig } = JSON.parse(readFileSync2(join2(folder, "package.json"), "utf8"));
+    return typeof tsconfig === "string" ? tsconfig : "tsconfig.json";
+  } catch {
+    return "tsconfig.json";
+  }
+}
+function jsonc(text) {
+  let out = "";
+  for (let i = 0;i < text.length; i++) {
+    const char = text[i];
+    if (char === '"') {
+      let end = i + 1;
+      while (end < text.length && text[end] !== '"')
+        end += text[end] === "\\" ? 2 : 1;
+      out += text.slice(i, end + 1);
+      i = end;
+    } else if (char === "/" && text[i + 1] === "/") {
+      while (i < text.length && text[i] !== `
+`)
+        i++;
+      out += `
+`;
+    } else if (char === "/" && text[i + 1] === "*") {
+      const end = text.indexOf("*/", i + 2);
+      i = end === -1 ? text.length : end + 1;
+    } else if (char === "}" || char === "]") {
+      out = out.replace(/,\s*$/, "") + char;
+    } else {
+      out += char;
+    }
+  }
+  return out;
+}
+function lower(value) {
+  return typeof value === "string" ? value.toLowerCase() : undefined;
+}
+
 // src/pm.ts
-import { existsSync as existsSync2, readFileSync as readFileSync2 } from "node:fs";
-import { join as join2 } from "node:path";
+import { existsSync as existsSync3, readFileSync as readFileSync3 } from "node:fs";
+import { dirname as dirname2, join as join3 } from "node:path";
 var LOCKFILES = [
   ["bun.lock", "bun"],
   ["bun.lockb", "bun"],
@@ -164,16 +276,37 @@ function isPackageSpec(value) {
   return typeof value === "string" && SPEC.test(value);
 }
 function detect(cwd) {
-  return LOCKFILES.find(([file]) => existsSync2(join2(cwd, file)))?.[1] ?? "npm";
+  for (let dir = cwd;; dir = dirname2(dir)) {
+    const pkg = readPackage(join3(dir, "package.json"));
+    const named = typeof pkg?.packageManager === "string" ? pkg.packageManager.split("@")[0] : undefined;
+    if (named === "bun" || named === "pnpm" || named === "yarn" || named === "npm")
+      return named;
+    const locked = LOCKFILES.find(([file]) => existsSync3(join3(dir, file)))?.[1];
+    if (locked)
+      return locked;
+    if (existsSync3(join3(dir, "pnpm-workspace.yaml")))
+      return "pnpm";
+    if (pkg?.packageManager || pkg?.workspaces || existsSync3(join3(dir, ".git")) || dirname2(dir) === dir)
+      return "npm";
+  }
+}
+function readPackage(path) {
+  if (!existsSync3(path))
+    return;
+  try {
+    return JSON.parse(readFileSync3(path, "utf8"));
+  } catch {
+    return;
+  }
 }
 function installCommand(pm, packages) {
   return [pm, [pm === "npm" ? "install" : "add", ...packages]];
 }
 function missing(cwd, wanted) {
-  const path = join2(cwd, "package.json");
-  if (!existsSync2(path))
+  const path = join3(cwd, "package.json");
+  if (!existsSync3(path))
     return wanted;
-  const pkg = JSON.parse(readFileSync2(path, "utf8"));
+  const pkg = JSON.parse(readFileSync3(path, "utf8"));
   const have = new Set(["dependencies", "devDependencies", "peerDependencies"].flatMap((field) => Object.keys(pkg[field] ?? {})));
   return wanted.filter((spec) => !have.has(packageName(spec)));
 }
@@ -186,10 +319,10 @@ function packageName(spec) {
 import { createInterface } from "node:readline";
 function confirm(question) {
   const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve) => {
+  return new Promise((resolve2) => {
     rl.question(`${question} (y/N) `, (answer) => {
       rl.close();
-      resolve(/^y(es)?$/i.test(answer.trim()));
+      resolve2(/^y(es)?$/i.test(answer.trim()));
     });
   });
 }
@@ -200,13 +333,13 @@ function itemUrl(spec, config, registry = config.registry) {
     return spec;
   const scoped = /^(@[^/]+)\/(.+)$/.exec(spec);
   if (scoped)
-    return join3(registryFor(scoped[1], config), scoped[2]);
+    return join4(registryFor(scoped[1], config), scoped[2]);
   if (!/^[\w.-]+$/.test(spec))
     throw new Error(`"${spec}" is not an item name, an @scope/name or a URL.`);
-  return join3(registry, spec);
+  return join4(registry, spec);
 }
 function indexUrl(scope, config, registry = config.registry) {
-  return join3(scope ? registryFor(scope, config) : registry, "index");
+  return join4(scope ? registryFor(scope, config) : registry, "index");
 }
 function registryFor(scope, config) {
   const registry = config.registries[scope];
@@ -215,7 +348,7 @@ function registryFor(scope, config) {
   }
   return registry;
 }
-function join3(registry, name) {
+function join4(registry, name) {
   if (registry.includes("{name}"))
     return registry.replace("{name}", name);
   return `${registry.replace(/\/+$/, "")}/${name}.json`;
@@ -244,11 +377,12 @@ async function add(context, specs) {
     const url = itemUrl(spec, config, context.registry);
     return { url, item: check(await fetchJson(url), url) };
   }));
-  const root = resolve(context.cwd, config.dir);
+  const root = resolve2(context.cwd, config.dir);
+  const extension = importExtension(context.cwd);
   const writes = items.flatMap(({ url, item }) => {
-    const folder = resolve(root, item.name);
-    return place(item.files).map((file) => {
-      const path = resolve(folder, file.to);
+    const folder = resolve2(root, item.name);
+    return withExtensions(place(item.files), extension).map((file) => {
+      const path = resolve2(folder, file.to);
       if (!folder.startsWith(root + sep) || !path.startsWith(folder + sep))
         throw new Error(`${url} has a file that would land outside ${config.dir}.`);
       return { path, content: file.content };
@@ -290,8 +424,8 @@ function check(value, url) {
 }
 async function write(context, path, content) {
   const shown = relative(context.cwd, path);
-  if (existsSync3(path)) {
-    if (readFileSync3(path, "utf8") === content) {
+  if (existsSync4(path)) {
+    if (readFileSync4(path, "utf8") === content) {
       context.log(`Same     ${shown}`);
       return;
     }
@@ -301,7 +435,7 @@ async function write(context, path, content) {
       return;
     }
   }
-  mkdirSync(dirname(path), { recursive: true });
+  mkdirSync(dirname3(path), { recursive: true });
   writeFileSync2(path, content);
   context.log(`Wrote    ${shown}`);
 }
@@ -324,8 +458,8 @@ function installMissing(context, dependencies) {
 
 // src/create.ts
 import { spawnSync as spawnSync2 } from "node:child_process";
-import { existsSync as existsSync4, mkdirSync as mkdirSync2, readFileSync as readFileSync4, writeFileSync as writeFileSync3 } from "node:fs";
-import { dirname as dirname2, join as join4, relative as relative2, resolve as resolve2, sep as sep2 } from "node:path";
+import { existsSync as existsSync5, mkdirSync as mkdirSync2, readFileSync as readFileSync5, writeFileSync as writeFileSync3 } from "node:fs";
+import { dirname as dirname4, join as join5, relative as relative2, resolve as resolve3, sep as sep2 } from "node:path";
 // ../../package.json
 var devDependencies = {
   "@happy-dom/global-registrator": "20.14.5",
@@ -334,7 +468,7 @@ var devDependencies = {
 };
 
 // ../../tsconfig.base.json
-var compilerOptions = {
+var compilerOptions2 = {
   target: "ES2022",
   lib: ["ES2022", "DOM"],
   module: "ESNext",
@@ -360,19 +494,19 @@ function itemTsconfig(inRepo) {
   const include = ["src", "test"];
   if (inRepo)
     return { extends: BASE_TSCONFIG, compilerOptions: { jsx: "react-jsx" }, include };
-  const { paths, rewriteRelativeImportExtensions, ...own } = compilerOptions;
+  const { paths, rewriteRelativeImportExtensions, ...own } = compilerOptions2;
   return { compilerOptions: { ...own, jsx: "react-jsx" }, include };
 }
 function inVectoysRepo(folder) {
-  for (let dir = dirname2(folder);; dir = dirname2(dir)) {
-    const pkg = join4(dir, "package.json");
-    if (existsSync4(pkg) && existsSync4(join4(dir, "registry"))) {
-      const value = JSON.parse(readFileSync4(pkg, "utf8"));
+  for (let dir = dirname4(folder);; dir = dirname4(dir)) {
+    const pkg = join5(dir, "package.json");
+    if (existsSync5(pkg) && existsSync5(join5(dir, "registry"))) {
+      const value = JSON.parse(readFileSync5(pkg, "utf8"));
       const named = typeof value === "object" && value !== null && "name" in value && value.name === "vectoys-workspace";
       if (named)
-        return folder.startsWith(join4(dir, "registry") + sep2);
+        return folder.startsWith(join5(dir, "registry") + sep2);
     }
-    if (dirname2(dir) === dir)
+    if (dirname4(dir) === dir)
       return false;
   }
 }
@@ -439,7 +573,7 @@ export const HEIGHT = 40;
 export const THICKNESS = 4;
 const INSET = 6;
 
-/** How the slab turns towards the eye at rest, in degrees. */
+/** How the slab turns toward the eye at rest, in degrees. */
 export const TILT = { yaw: -24, pitch: -16 } as const;
 
 function parts(pose: Pose): Part[] {
@@ -470,7 +604,7 @@ export type View = ReturnType<typeof seen>;
 import { useMemo, type CSSProperties } from "react";
 import { TILT, seen } from "./geometry";
 
-// The page's colours, as CSS variables, each with a tone so the item shows as
+// The page's colors, as CSS variables, each with a tone so the item shows as
 // meant before they are set.
 const HAIRLINE = "var(--vectoys-hairline, #8a8a8a)";
 const SURFACE = "var(--vectoys-surface, #f5f5f5)";
@@ -494,17 +628,17 @@ const OUTLINE: Look = {
 export type ${component}Props = {
   /** What the item shows, for assistive technology. */
   label?: string;
-  /** The slab's colour; by default the page's \`--vectoys-finish\`. */
+  /** The slab's color; by default the page's \`--vectoys-finish\`. */
   finish?: string;
   /** How far it turns about its up axis, in degrees. */
   yaw?: number;
-  /** How far it tips towards or away from the eye, in degrees. */
+  /** How far it tips toward or away from the eye, in degrees. */
   pitch?: number;
   className?: string;
   style?: CSSProperties;
 };
 
-/** ${title}: a slab tilted towards the eye, drawn the same on the server and the client. */
+/** ${title}: a slab tilted toward the eye, drawn the same on the server and the client. */
 export function ${component}({ label = ${JSON.stringify(title)}, finish, yaw = TILT.yaw, pitch = TILT.pitch, className, style }: ${component}Props) {
   const view = useMemo(() => seen(yaw, pitch), [yaw, pitch]);
   const body = view.drawn.hulls.find((hull) => hull.part === "body");
@@ -540,13 +674,13 @@ function create(context, name, under) {
     throw new Error('Name the new item, as "vectoys create spinner".');
   if (!ITEM_NAME.test(name))
     throw new Error(`"${name}" is not an item name. Use letters, digits, dots, dashes and underscores.`);
-  const folder = resolve2(context.cwd, under ?? ".", name);
+  const folder = resolve3(context.cwd, under ?? ".", name);
   const shown = relative2(context.cwd, folder) || ".";
-  if (existsSync4(folder) && !context.overwrite)
+  if (existsSync5(folder) && !context.overwrite)
     throw new Error(`${shown} is already there. Pass --overwrite to write over it.`);
   for (const [path, content] of Object.entries(scaffold(name, gitAuthor(context.cwd), inVectoysRepo(folder)))) {
-    const to = join4(folder, path);
-    mkdirSync2(dirname2(to), { recursive: true });
+    const to = join5(folder, path);
+    mkdirSync2(dirname4(to), { recursive: true });
     writeFileSync3(to, content);
     context.log(`Wrote    ${relative2(context.cwd, to)}`);
   }
@@ -573,7 +707,7 @@ var BRANDS = [
   "nintendo"
 ];
 var BRAND = new RegExp(`\\b(${BRANDS.map((brand) => brand.replace(" ", "\\s+")).join("|")})\\b`, "gi");
-var MAX_SOURCE = 64 * 1024;
+var MAX_SOURCE = 96 * 1024;
 function brands(text) {
   return [...new Set([...text.matchAll(BRAND)].map((match) => match[0].toLowerCase().replace(/\s+/g, " ")))];
 }
@@ -605,9 +739,9 @@ function isRendered(value) {
   return "name" in value && typeof value.name === "string" && "html" in value && Array.isArray(value.html) && value.html.length === 2 && value.html.every((html) => typeof html === "string");
 }
 function runInBun(script, entry, dir, wanted) {
-  const work = mkdtempSync(join5(tmpdir(), "vectoys-check-"));
+  const work = mkdtempSync(join6(tmpdir(), "vectoys-check-"));
   try {
-    const runner = join5(work, "render.mjs");
+    const runner = join6(work, "render.mjs");
     writeFileSync4(runner, script);
     const result = spawnSync3("bun", [runner, entry, dir, wanted], { cwd: dir, encoding: "utf8", timeout: 60000, maxBuffer: 64 * 1024 * 1024 });
     if (result.error) {
@@ -661,12 +795,12 @@ function accessibleName(html) {
 function itemProblem(item, dir) {
   if (!ITEM_NAME.test(item.name))
     return `"${item.name}" is not an item name`;
-  const file = item.files.find((path) => typeof path !== "string" || !resolve3(dir, path).startsWith(dir + sep3) || !existsSync5(resolve3(dir, path)));
+  const file = item.files.find((path) => typeof path !== "string" || !resolve4(dir, path).startsWith(dir + sep3) || !existsSync6(resolve4(dir, path)));
   if (file !== undefined)
     return `files lists ${JSON.stringify(file)}, which is not a file in the folder`;
-  const other = item.files.find((path) => !lstatSync(resolve3(dir, path)).isFile());
+  const other = item.files.find((path) => !lstatSync(resolve4(dir, path)).isFile());
   if (other !== undefined) {
-    const stat = lstatSync(resolve3(dir, other));
+    const stat = lstatSync(resolve4(dir, other));
     const kind = stat.isSymbolicLink() ? "a symlink, " : stat.isDirectory() ? "a folder, " : "";
     return `files lists ${JSON.stringify(other)}, which is ${kind}not a regular file`;
   }
@@ -676,12 +810,12 @@ function itemProblem(item, dir) {
   return;
 }
 function readItem(dir) {
-  const path = join5(dir, "item.json");
-  if (!existsSync5(path))
+  const path = join6(dir, "item.json");
+  if (!existsSync6(path))
     return "there is no item.json";
   let value;
   try {
-    value = JSON.parse(readFileSync5(path, "utf8"));
+    value = JSON.parse(readFileSync6(path, "utf8"));
   } catch (error) {
     return `item.json is not valid JSON: ${error instanceof Error ? error.message : String(error)}`;
   }
@@ -702,7 +836,7 @@ function checks(dir) {
   if (typeof item === "string")
     return [{ pass: false, line: item }];
   const results = [{ pass: true, line: "item.json has what the registry needs" }];
-  const size = item.files.reduce((sum, file) => sum + lstatSync(resolve3(dir, file)).size, 0);
+  const size = item.files.reduce((sum, file) => sum + lstatSync(resolve4(dir, file)).size, 0);
   const kb = (bytes) => `${(bytes / 1024).toFixed(1)} KB`;
   results.push({ pass: size < MAX_SOURCE, line: `the files are ${kb(size)}, ${size < MAX_SOURCE ? "under" : "over"} ${kb(MAX_SOURCE)}` });
   const named = brands([item.name, item.title, item.description].join(" "));
@@ -710,7 +844,7 @@ function checks(dir) {
   const component = componentFile(item);
   if (!component)
     return [...results, { pass: false, line: "files lists no .tsx component to render" }];
-  const rendered = render(resolve3(dir, component), dir, componentName(item.name));
+  const rendered = render(resolve4(dir, component), dir, componentName(item.name));
   if ("error" in rendered)
     return [...results, { pass: false, line: `${component} does not render on the server: ${rendered.error}` }];
   const [html, again] = rendered.html;
@@ -725,7 +859,7 @@ function checks(dir) {
   return results;
 }
 function check2(context, given) {
-  const dir = resolve3(context.cwd, given ?? ".");
+  const dir = resolve4(context.cwd, given ?? ".");
   context.log(`Checking ${relative3(context.cwd, dir) || "."}`);
   const results = checks(dir);
   for (const result of results)
@@ -739,7 +873,7 @@ function check2(context, given) {
 // src/preview.ts
 import { spawn } from "node:child_process";
 import { writeFileSync as writeFileSync5 } from "node:fs";
-import { join as join6, relative as relative4, resolve as resolve4 } from "node:path";
+import { join as join7, relative as relative4, resolve as resolve5 } from "node:path";
 var YAWS = [-45, -20, 0, 20, 45];
 var RUNNER2 = bunScript(`const render = (props) => renderToStaticMarkup(createElement(mod[name], props));
   const yaws = ${JSON.stringify(YAWS)}.map((yaw) => ({ yaw, html: render({ yaw }) }));
@@ -810,19 +944,19 @@ function open(path) {
   spawn(command, args, { detached: true, stdio: "ignore" }).unref();
 }
 function preview(context, given, opening = false) {
-  const dir = resolve4(context.cwd, given ?? ".");
+  const dir = resolve5(context.cwd, given ?? ".");
   const item = readItem(dir);
   if (typeof item === "string")
     throw new Error(`${relative4(context.cwd, dir) || "."} is not an item to preview: ${item}.`);
   const component = componentFile(item);
   if (!component)
     throw new Error("item.json lists no .tsx component to render.");
-  const ran = runInBun(RUNNER2, resolve4(dir, component), dir, componentName(item.name));
+  const ran = runInBun(RUNNER2, resolve5(dir, component), dir, componentName(item.name));
   if ("error" in ran)
     throw new Error(`${component} does not render on the server: ${ran.error}`);
   if (!isPreview(ran.value))
     throw new Error("bun gave back something other than markup.");
-  const path = join6(dir, "preview.html");
+  const path = join7(dir, "preview.html");
   writeFileSync5(path, previewPage(item.title, ran.value));
   context.log(path);
   if (opening)
@@ -831,20 +965,20 @@ function preview(context, given, opening = false) {
 }
 
 // src/skill.ts
-import { existsSync as existsSync6, readFileSync as readFileSync6 } from "node:fs";
+import { existsSync as existsSync7, readFileSync as readFileSync7 } from "node:fs";
 import { fileURLToPath } from "node:url";
 var SKILL = fileURLToPath(new URL("../SKILL.md", import.meta.url));
 function skill(context, path = SKILL) {
-  if (!existsSync6(path))
+  if (!existsSync7(path))
     throw new Error(`${path} is missing. Reinstall vectoys.`);
-  context.log(readFileSync6(path, "utf8").trimEnd());
+  context.log(readFileSync7(path, "utf8").trimEnd());
 }
 
 // src/submit.ts
 import { spawnSync as spawnSync4 } from "node:child_process";
-import { cpSync, existsSync as existsSync7, mkdirSync as mkdirSync3, mkdtempSync as mkdtempSync2, readFileSync as readFileSync7, rmSync as rmSync2, writeFileSync as writeFileSync6 } from "node:fs";
+import { cpSync, existsSync as existsSync8, mkdirSync as mkdirSync3, mkdtempSync as mkdtempSync2, readFileSync as readFileSync8, rmSync as rmSync2, writeFileSync as writeFileSync6 } from "node:fs";
 import { tmpdir as tmpdir2 } from "node:os";
-import { dirname as dirname3, join as join7, relative as relative5, resolve as resolve5 } from "node:path";
+import { dirname as dirname5, join as join8, relative as relative5, resolve as resolve6 } from "node:path";
 var SUBMISSIONS_OPEN = false;
 var UPSTREAM = "vinenastudio/vectoys";
 var CLOSED = "Submissions open when vectoys launches. Nothing was sent.";
@@ -871,9 +1005,9 @@ function openPullRequest(change, runner, cwd) {
   const login = must(runner, "gh", ["api", "user", "--jq", ".login"], cwd);
   must(runner, "gh", ["repo", "fork", UPSTREAM, "--clone=false"], cwd);
   must(runner, "gh", ["repo", "sync", `${login}/vectoys`, "--branch", "main"], cwd);
-  const work = mkdtempSync2(join7(tmpdir2(), "vectoys-submit-"));
+  const work = mkdtempSync2(join8(tmpdir2(), "vectoys-submit-"));
   try {
-    const clone = join7(work, "vectoys");
+    const clone = join8(work, "vectoys");
     must(runner, "gh", ["repo", "clone", `${login}/vectoys`, clone, "--", "--depth", "1"], work);
     must(runner, "git", ["checkout", "-b", change.branch], clone);
     change.write(clone);
@@ -902,14 +1036,14 @@ function steps(change, own) {
   ];
 }
 function itemFiles(dir, listed) {
-  const extra = ["package.json", "tsconfig.json", "test"].filter((path) => existsSync7(join7(dir, path)));
+  const extra = ["package.json", "tsconfig.json", "test"].filter((path) => existsSync8(join8(dir, path)));
   return [...new Set(["item.json", ...listed, ...extra])];
 }
 var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 function inRepoForm(folder) {
-  const pkgPath = join7(folder, "package.json");
-  if (existsSync7(pkgPath)) {
-    const pkg = JSON.parse(readFileSync7(pkgPath, "utf8"));
+  const pkgPath = join8(folder, "package.json");
+  if (existsSync8(pkgPath)) {
+    const pkg = JSON.parse(readFileSync8(pkgPath, "utf8"));
     if (!isRecord(pkg))
       throw new Error("The item's package.json is not an object.");
     for (const field of ["dependencies", "devDependencies", "peerDependencies"]) {
@@ -925,13 +1059,13 @@ function inRepoForm(folder) {
     writeFileSync6(pkgPath, `${JSON.stringify(pkg, null, 2)}
 `);
   }
-  const tsPath = join7(folder, "tsconfig.json");
-  if (existsSync7(tsPath)) {
-    const tsconfig = JSON.parse(readFileSync7(tsPath, "utf8"));
+  const tsPath = join8(folder, "tsconfig.json");
+  if (existsSync8(tsPath)) {
+    const tsconfig = JSON.parse(readFileSync8(tsPath, "utf8"));
     if (!isRecord(tsconfig))
       throw new Error("The item's tsconfig.json is not an object.");
     const own = isRecord(tsconfig.compilerOptions) ? tsconfig.compilerOptions : {};
-    const kept = Object.fromEntries(Object.entries(own).filter(([key]) => !(key in compilerOptions)));
+    const kept = Object.fromEntries(Object.entries(own).filter(([key]) => !(key in compilerOptions2)));
     writeFileSync6(tsPath, `${JSON.stringify({ extends: BASE_TSCONFIG, ...tsconfig, compilerOptions: kept }, null, 2)}
 `);
   }
@@ -971,11 +1105,11 @@ function itemChange(context, dir) {
     steps: steps({ branch, title }, [`Copy ${files.join(", ")} into registry/${item.name}/`]),
     write: (clone) => {
       for (const file of files) {
-        const to = join7(clone, "registry", item.name, file);
-        mkdirSync3(dirname3(to), { recursive: true });
-        cpSync(join7(dir, file), to, { recursive: true });
+        const to = join8(clone, "registry", item.name, file);
+        mkdirSync3(dirname5(to), { recursive: true });
+        cpSync(join8(dir, file), to, { recursive: true });
       }
-      inRepoForm(join7(clone, "registry", item.name));
+      inRepoForm(join8(clone, "registry", item.name));
     }
   };
 }
@@ -1031,8 +1165,8 @@ async function listingChange(context, given, runner) {
     body,
     steps: steps({ branch, title }, [`Add ${JSON.stringify(listing)} to registries.json, sorted by name`]),
     write: (clone) => {
-      const path = join7(clone, "registries.json");
-      const found = existsSync7(path) ? JSON.parse(readFileSync7(path, "utf8")) : [];
+      const path = join8(clone, "registries.json");
+      const found = existsSync8(path) ? JSON.parse(readFileSync8(path, "utf8")) : [];
       if (!isListings(found))
         throw new Error("registries.json in the fork is not a list of registries.");
       writeFileSync6(path, `${JSON.stringify(listed(found, listing), null, 2)}
@@ -1042,7 +1176,7 @@ async function listingChange(context, given, runner) {
 }
 async function submit(context, given, options) {
   const runner = options.run ?? run;
-  const change = options.registry ? await listingChange(context, options.registry, runner) : itemChange(context, resolve5(context.cwd, given ?? "."));
+  const change = options.registry ? await listingChange(context, options.registry, runner) : itemChange(context, resolve6(context.cwd, given ?? "."));
   if (!(options.submissionsOpen ?? SUBMISSIONS_OPEN) || options.dryRun) {
     context.log("");
     context.log("submit would:");
@@ -1101,7 +1235,7 @@ async function main(argv) {
   if (flags.help || !command)
     return console.log(HELP);
   const context = {
-    cwd: resolve6(flags.cwd ?? process.cwd()),
+    cwd: resolve7(flags.cwd ?? process.cwd()),
     registry: flags.registry ?? (process.env.VECTOYS_REGISTRY || undefined),
     registryFlag: flags.registry,
     yes: flags.yes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinena/vectoys-cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Copy vectoys devices and toys into your project.",
   "license": "MIT",
   "homepage": "https://github.com/vinenastudio/vectoys#readme",