dekit-cli 0.3.0 → 0.4.0

package/README.md

@@ -54,6 +54,22 @@ When the agent starts the preview server, open the browser to review. Right-clic
 > The hero section $${home@.hero} needs more padding, and make the CTA button blue
 ```
 
+**Initialize in an existing project:**
+
+```
+> Initialize a dekit design project in the design/ directory using the dashboard template
+```
+
+The agent creates a `design/` subdirectory with all the scaffolding, without touching your existing code.
+
+**Build reusable components:**
+
+```
+> Create a ui-card component with an image slot and body slot, then build a showcase page that uses it
+```
+
+The agent creates Web Components with `<template>` + scoped CSS, registers them in `dekit.yaml`, and uses them in pages like `<ui-card>`.
+
 **Add a page to an existing design:**
 
 ```

package/bin/dekit.ts

@@ -26,7 +26,12 @@ Run 'dekit <command> --help' for command-specific help.
 }
 
 function findDefaultConfig(): string | undefined {
-  for (const name of ["dekit.yaml", "dekit.yml", "design.yaml", "design.yml"]) {
+  for (const name of [
+    ".dekit/dekit.yaml",
+    ".dekit/dekit.yml",
+    "dekit.yaml",
+    "dekit.yml",
+  ]) {
     const p = resolve(name);
     if (existsSync(p)) return p;
   }
@@ -57,7 +62,7 @@ async function loadConfig(configArg?: string) {
   const configPath = configArg ? resolve(configArg) : findDefaultConfig();
   if (!configPath) {
     console.error(
-      "Error: no dekit.yaml found in current directory. Use -c to specify a config file.\n"
+      "Error: no .dekit/dekit.yaml found. Run 'dekit init' or use -c to specify a config file.\n"
     );
     process.exit(1);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dekit-cli",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "A code-first design toolkit for agents and humans — create, preview, and screenshot HTML/CSS designs",
   "keywords": [
@@ -38,7 +38,7 @@
     "dekit": "./bin/dekit.js"
   },
   "scripts": {
-    "dev": "node --import tsx bin/dekit.ts serve -c example/dekit.yaml",
+    "dev": "node --import tsx bin/dekit.ts serve -c example/.dekit/dekit.yaml",
     "dev:editor": "vite dev --config editor/vite.config.ts",
     "build:editor": "vite build --config editor/vite.config.ts",
     "test": "vitest run",

package/src/cli/add.test.ts

@@ -7,10 +7,12 @@ import { runAdd } from "./add.js";
 import { parseDesignConfig } from "../parser.js";
 
 let tempDir: string;
+let dekitDir: string;
 
 beforeEach(async () => {
   tempDir = mkdtempSync(join(tmpdir(), "dekit-add-"));
   await runInit([tempDir]);
+  dekitDir = join(tempDir, ".dekit");
 });
 
 afterEach(() => {
@@ -19,44 +21,44 @@ afterEach(() => {
 
 describe("runAdd page", () => {
   test("adds a new page with blank template", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(dekitDir, "dekit.yaml"));
     await runAdd(config, ["page", "about"]);
 
-    expect(existsSync(join(tempDir, "pages/about/about.html"))).toBe(true);
-    expect(existsSync(join(tempDir, "pages/about/about.css"))).toBe(true);
+    expect(existsSync(join(dekitDir, "pages/about/about.html"))).toBe(true);
+    expect(existsSync(join(dekitDir, "pages/about/about.css"))).toBe(true);
 
-    const updatedYaml = readFileSync(join(tempDir, "dekit.yaml"), "utf-8");
+    const updatedYaml = readFileSync(join(dekitDir, "dekit.yaml"), "utf-8");
     expect(updatedYaml).toContain("about");
   });
 
   test("adds a page with hero template", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(dekitDir, "dekit.yaml"));
     await runAdd(config, ["page", "landing", "--template", "hero"]);
 
-    const html = readFileSync(join(tempDir, "pages/landing/landing.html"), "utf-8");
+    const html = readFileSync(join(dekitDir, "pages/landing/landing.html"), "utf-8");
     expect(html).toContain("hero");
   });
 
   test("rejects duplicate page name", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(dekitDir, "dekit.yaml"));
     await expect(runAdd(config, ["page", "home"])).rejects.toThrow(/already exists/i);
   });
 });
 
 describe("runAdd component", () => {
   test("adds a new component", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(dekitDir, "dekit.yaml"));
     await runAdd(config, ["component", "my-card"]);
 
-    expect(existsSync(join(tempDir, "components/my-card/my-card.html"))).toBe(true);
-    expect(existsSync(join(tempDir, "components/my-card/my-card.css"))).toBe(true);
+    expect(existsSync(join(dekitDir, "components/my-card/my-card.html"))).toBe(true);
+    expect(existsSync(join(dekitDir, "components/my-card/my-card.css"))).toBe(true);
 
-    const updatedYaml = readFileSync(join(tempDir, "dekit.yaml"), "utf-8");
+    const updatedYaml = readFileSync(join(dekitDir, "dekit.yaml"), "utf-8");
     expect(updatedYaml).toContain("my-card");
   });
 
   test("rejects component name without hyphen", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(dekitDir, "dekit.yaml"));
     await expect(runAdd(config, ["component", "card"])).rejects.toThrow(/hyphen/i);
   });
 });

package/src/cli/init.test.ts

@@ -15,39 +15,37 @@ afterEach(() => {
 });
 
 describe("runInit", () => {
-  test("creates blank project in target directory", async () => {
-    const target = join(tempDir, "my-design");
-    await runInit([target]);
-
-    expect(existsSync(join(target, "dekit.yaml"))).toBe(true);
-    expect(existsSync(join(target, "global.css"))).toBe(true);
-    expect(existsSync(join(target, "pages/home/home.html"))).toBe(true);
-    expect(existsSync(join(target, "pages/home/home.css"))).toBe(true);
+  test("creates blank project in .dekit/ under target directory", async () => {
+    await runInit([tempDir]);
+
+    const dekitDir = join(tempDir, ".dekit");
+    expect(existsSync(join(dekitDir, "dekit.yaml"))).toBe(true);
+    expect(existsSync(join(dekitDir, "global.css"))).toBe(true);
+    expect(existsSync(join(dekitDir, "pages/home/home.html"))).toBe(true);
+    expect(existsSync(join(dekitDir, "pages/home/home.css"))).toBe(true);
   });
 
-  test("creates blank project in current directory when no path given", async () => {
+  test("creates project in .dekit/ under current directory when no path given", async () => {
     const origCwd = process.cwd();
     process.chdir(tempDir);
     try {
       await runInit([]);
-      expect(existsSync(join(tempDir, "dekit.yaml"))).toBe(true);
+      expect(existsSync(join(tempDir, ".dekit/dekit.yaml"))).toBe(true);
     } finally {
       process.chdir(origCwd);
     }
   });
 
   test("creates landing template when specified", async () => {
-    const target = join(tempDir, "landing");
-    await runInit([target, "--template", "landing"]);
+    await runInit([tempDir, "--template", "landing"]);
 
-    const html = readFileSync(join(target, "pages/home/home.html"), "utf-8");
+    const html = readFileSync(join(tempDir, ".dekit/pages/home/home.html"), "utf-8");
     expect(html).toContain("hero");
   });
 
-  test("refuses to init in directory with existing dekit.yaml", async () => {
-    const target = join(tempDir, "existing");
-    await runInit([target]);
-    await expect(runInit([target])).rejects.toThrow(/already exists/i);
+  test("refuses to init when .dekit/dekit.yaml already exists", async () => {
+    await runInit([tempDir]);
+    await expect(runInit([tempDir])).rejects.toThrow(/already exists/i);
   });
 
   test("lists templates when --template given without value", async () => {

package/src/cli/init.ts

@@ -30,8 +30,10 @@ export async function runInit(args: string[]) {
     );
   }
 
-  if (existsSync(join(targetDir, "dekit.yaml"))) {
-    throw new Error(`dekit.yaml already exists in ${targetDir}`);
+  const dekitDir = join(targetDir, ".dekit");
+
+  if (existsSync(join(dekitDir, "dekit.yaml"))) {
+    throw new Error(`dekit.yaml already exists in ${dekitDir}`);
   }
 
   const templateDir = join(TEMPLATES_DIR, template);
@@ -39,8 +41,8 @@ export async function runInit(args: string[]) {
     throw new Error(`Template directory not found: ${templateDir}`);
   }
 
-  mkdirSync(targetDir, { recursive: true });
-  cpSync(templateDir, targetDir, { recursive: true });
+  mkdirSync(dekitDir, { recursive: true });
+  cpSync(templateDir, dekitDir, { recursive: true });
 
-  console.log(`Created dekit project in ${targetDir} (template: ${template})`);
+  console.log(`Created dekit project in ${dekitDir} (template: ${template})`);
 }

package/src/cli/ls.test.ts

@@ -19,7 +19,7 @@ afterEach(() => {
 
 describe("runLs", () => {
   test("lists pages", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     const spy = vi.spyOn(console, "log");
     await runLs(config);
     const output = spy.mock.calls.map((c) => c[0]).join("\n");

package/src/cli/resolve.test.ts

@@ -19,7 +19,7 @@ afterEach(() => {
 
 describe("runResolve", () => {
   test("resolves page ref to file path", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     const spy = vi.spyOn(console, "log");
     await runResolve(config, ["$${home}"]);
     expect(spy.mock.calls[0][0]).toContain("pages/home/home.html");
@@ -27,7 +27,7 @@ describe("runResolve", () => {
   });
 
   test("resolves element ref to file path with line range", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     const spy = vi.spyOn(console, "log");
     await runResolve(config, ["$${home@.hero}"]);
     const output = spy.mock.calls[0][0] as string;
@@ -37,7 +37,7 @@ describe("runResolve", () => {
   });
 
   test("rejects unknown page", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     await expect(runResolve(config, ["$${nonexistent}"])).rejects.toThrow(/not found/i);
   });
 });

package/src/cli/screenshot.test.ts

@@ -27,13 +27,13 @@ afterEach(() => {
 
 describe("runScreenshot", () => {
   test.skipIf(!hasChrome)("takes a page screenshot", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     await runScreenshot(config, ["$${home}"]);
     expect(existsSync(join(config.baseDir, "screenshots/home.png"))).toBe(true);
   }, 30000);
 
   test.skipIf(!hasChrome)("takes element screenshot", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     await runScreenshot(config, ["$${home@.hero}"]);
     // Output filename sanitizes the selector
     const screenshots = join(config.baseDir, "screenshots");
@@ -41,14 +41,14 @@ describe("runScreenshot", () => {
   }, 30000);
 
   test.skipIf(!hasChrome)("respects -o flag", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     const outPath = join(tempDir, "my-shot.png");
     await runScreenshot(config, ["$${home}", "-o", outPath]);
     expect(existsSync(outPath)).toBe(true);
   }, 30000);
 
   test("rejects invalid ref format", async () => {
-    const config = await parseDesignConfig(join(tempDir, "dekit.yaml"));
+    const config = await parseDesignConfig(join(tempDir, ".dekit/dekit.yaml"));
     await expect(runScreenshot(config, ["invalid"])).rejects.toThrow();
   });
 });

package/src/parser.test.ts

@@ -2,22 +2,22 @@ import { describe, test, expect } from "vitest";
 import { parseDesignConfig } from "./parser.js";
 import { join } from "node:path";
 
-const DESIGN_DIR = join(import.meta.dirname, "../example");
+const DESIGN_DIR = join(import.meta.dirname, "../example/.dekit");
 
 describe("parseDesignConfig", () => {
   test("parses valid dekit.yaml", async () => {
     const config = await parseDesignConfig(join(DESIGN_DIR, "dekit.yaml"));
     expect(config.version).toBe(1.0);
     expect(config.globalStyle).toBe("global.css");
-    expect(config.components["my-banner"]).toEqual({
-      template: "components/my-banner/banner.html",
-      style: "components/my-banner/banner.css",
+    expect(config.components["ui-card"]).toEqual({
+      template: "components/ui-card/ui-card.html",
+      style: "components/ui-card/ui-card.css",
     });
-    expect(config.pages["cover"]).toEqual({
-      template: "pages/cover/cover.html",
-      style: "pages/cover/cover.css",
+    expect(config.pages["home"]).toEqual({
+      template: "pages/home/home.html",
+      style: "pages/home/home.css",
     });
-    expect(config.pages["example"]).toBeDefined();
+    expect(config.pages["showcase"]).toBeDefined();
   });
 
   test("stores resolved base directory", async () => {

package/src/types.ts

@@ -13,7 +13,7 @@ export interface DesignConfig {
   globalStyle: string;
   components: Record<string, ComponentDef>;
   pages: Record<string, PageDef>;
-  baseDir: string; // absolute path to directory containing design.yaml
+  baseDir: string; // absolute path to .dekit/ directory (where dekit.yaml lives)
 }
 
 export interface PageRef {

package/src/vite-plugin-dekit.test.ts

@@ -3,21 +3,29 @@ import { assemblePageHtml } from "./vite-plugin-dekit.js";
 import type { DesignConfig } from "./types.js";
 import { join } from "node:path";
 
-const DESIGN_DIR = join(import.meta.dirname, "../example");
+const DESIGN_DIR = join(import.meta.dirname, "../example/.dekit");
 
 const mockConfig: DesignConfig = {
   version: 1.0,
   globalStyle: "global.css",
   components: {
-    "my-banner": {
-      template: "components/my-banner/banner.html",
-      style: "components/my-banner/banner.css",
+    "ui-card": {
+      template: "components/ui-card/ui-card.html",
+      style: "components/ui-card/ui-card.css",
+    },
+    "ui-button": {
+      template: "components/ui-button/ui-button.html",
+      style: "components/ui-button/ui-button.css",
     },
   },
   pages: {
-    cover: {
-      template: "pages/cover/cover.html",
-      style: "pages/cover/cover.css",
+    home: {
+      template: "pages/home/home.html",
+      style: "pages/home/home.css",
+    },
+    showcase: {
+      template: "pages/showcase/showcase.html",
+      style: "pages/showcase/showcase.css",
     },
   },
   baseDir: DESIGN_DIR,
@@ -25,13 +33,12 @@ const mockConfig: DesignConfig = {
 
 describe("assemblePageHtml", () => {
   test("generates valid HTML for a page", async () => {
-    const html = await assemblePageHtml(mockConfig, "cover");
+    const html = await assemblePageHtml(mockConfig, "home");
     expect(html).toContain("<!DOCTYPE html>");
     expect(html).toContain("global.css");
-    expect(html).toContain("pages/cover/cover.css");
-    expect(html).toContain("Welcome to Dekit");
+    expect(html).toContain("pages/home/home.css");
     expect(html).toContain("customElements.define");
-    expect(html).toContain("my-banner");
+    expect(html).toContain("ui-card");
   });
 
   test("throws for unknown page", async () => {
@@ -41,14 +48,14 @@ describe("assemblePageHtml", () => {
   });
 
   test("includes inspector script", async () => {
-    const html = await assemblePageHtml(mockConfig, "cover");
+    const html = await assemblePageHtml(mockConfig, "home");
     expect(html).toContain("postMessage");
     expect(html).toContain("NODE_SELECTED");
   });
 
   test("extracts template inner content for component registration", async () => {
-    const html = await assemblePageHtml(mockConfig, "cover");
-    expect(html).toContain("class=\"banner\"");
+    const html = await assemblePageHtml(mockConfig, "showcase");
+    expect(html).toContain("class=\"card\"");
     expect(html).toContain("<slot></slot>");
     expect(html).not.toMatch(/innerHTML\s*=\s*`\s*<template>/);
   });