dekit-cli 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/README.md +23 -0
  2. package/bin/dekit.js +16 -0
  3. package/bin/dekit.ts +98 -35
  4. package/dist/editor/assets/{index-DK9iczjI.js → index-yt1AtkL3.js} +6 -6
  5. package/dist/editor/index.html +1 -1
  6. package/docs/usage.md +127 -0
  7. package/editor/src/App.tsx +9 -11
  8. package/editor/src/types.ts +1 -0
  9. package/package.json +37 -12
  10. package/src/chrome.test.ts +24 -0
  11. package/src/chrome.ts +37 -0
  12. package/src/cli/add.test.ts +62 -0
  13. package/src/cli/add.ts +104 -0
  14. package/src/cli/init.test.ts +61 -0
  15. package/src/cli/init.ts +46 -0
  16. package/src/cli/ls.test.ts +29 -0
  17. package/src/cli/ls.ts +24 -0
  18. package/src/cli/resolve.test.ts +43 -0
  19. package/src/cli/resolve.ts +92 -0
  20. package/src/cli/screenshot.test.ts +54 -0
  21. package/src/cli/screenshot.ts +154 -0
  22. package/src/cli/usage.ts +8 -0
  23. package/src/devices.ts +23 -0
  24. package/src/injected/inspector.ts +31 -0
  25. package/src/parser.test.ts +6 -6
  26. package/src/parser.ts +2 -2
  27. package/src/ref.test.ts +68 -0
  28. package/src/ref.ts +42 -0
  29. package/src/server.ts +8 -5
  30. package/src/types.ts +13 -0
  31. package/src/vite-plugin-dekit.ts +13 -6
  32. package/templates/components/blank/component.css +3 -0
  33. package/templates/components/blank/component.html +5 -0
  34. package/templates/pages/blank/page.css +3 -0
  35. package/templates/pages/blank/page.html +3 -0
  36. package/templates/pages/form/page.css +88 -0
  37. package/templates/pages/form/page.html +21 -0
  38. package/templates/pages/grid/page.css +84 -0
  39. package/templates/pages/grid/page.html +40 -0
  40. package/templates/pages/hero/page.css +62 -0
  41. package/templates/pages/hero/page.html +10 -0
  42. package/templates/projects/blank/dekit.yaml +9 -0
  43. package/templates/projects/blank/global.css +18 -0
  44. package/templates/projects/blank/pages/home/home.css +3 -0
  45. package/templates/projects/blank/pages/home/home.html +3 -0
  46. package/templates/projects/dashboard/dekit.yaml +9 -0
  47. package/templates/projects/dashboard/global.css +18 -0
  48. package/templates/projects/dashboard/pages/home/home.css +248 -0
  49. package/templates/projects/dashboard/pages/home/home.html +100 -0
  50. package/templates/projects/landing/dekit.yaml +9 -0
  51. package/templates/projects/landing/global.css +18 -0
  52. package/templates/projects/landing/pages/home/home.css +255 -0
  53. package/templates/projects/landing/pages/home/home.html +79 -0
  54. package/templates/projects/mobile/dekit.yaml +9 -0
  55. package/templates/projects/mobile/global.css +20 -0
  56. package/templates/projects/mobile/pages/home/home.css +267 -0
  57. package/templates/projects/mobile/pages/home/home.html +110 -0
package/README.md CHANGED
@@ -76,3 +76,26 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup and guidelines.
76
76
  ## License
77
77
 
78
78
  [Apache 2.0](LICENSE)
79
+
80
+ ## For Agents
81
+
82
+ Install dekit globally:
83
+
84
+ ```bash
85
+ npm install -g dekit-cli
86
+ ```
87
+
88
+ Run `dekit usage` to get the full usage guide.
89
+
90
+ ### Skill Setup (Optional)
91
+
92
+ Create a skill file for your agent (e.g. `.claude/skills/dekit.md`):
93
+
94
+ ```markdown
95
+ ---
96
+ name: dekit
97
+ description: Use dekit to create, preview, and iterate on HTML/CSS designs
98
+ ---
99
+ Run `dekit usage` to get the full usage guide.
100
+ Follow the guide to complete your design task.
101
+ ```
package/bin/dekit.js ADDED
@@ -0,0 +1,16 @@
1
+ #!/usr/bin/env node
2
+ import { execFileSync } from "node:child_process";
3
+ import { fileURLToPath } from "node:url";
4
+ import { dirname, join } from "node:path";
5
+
6
+ const __dirname = dirname(fileURLToPath(import.meta.url));
7
+
8
+ try {
9
+ execFileSync(process.execPath, [
10
+ "--import", "tsx",
11
+ join(__dirname, "dekit.ts"),
12
+ ...process.argv.slice(2),
13
+ ], { stdio: "inherit" });
14
+ } catch (e) {
15
+ process.exit(e.status ?? 1);
16
+ }
package/bin/dekit.ts CHANGED
@@ -1,4 +1,3 @@
1
- #!/usr/bin/env tsx
2
1
  import { resolve } from "node:path";
3
2
  import { existsSync } from "node:fs";
4
3
  import { parseDesignConfig } from "../src/parser.js";
@@ -6,73 +5,137 @@ import { startServers } from "../src/server.js";
6
5
 
7
6
  function printUsage() {
8
7
  console.log(`
9
- Usage: dekit [-c <design.yaml>]
8
+ Usage: dekit <command> [options]
9
+
10
+ Commands:
11
+ init [path] Initialize a new design project
12
+ add <type> <name> Add a page or component
13
+ ls List pages and components
14
+ serve Start the preview server (default)
15
+ screenshot <ref> Take a screenshot of a page or element
16
+ resolve <ref> Resolve a ref to file path and line range
17
+ usage Print the agent usage guide
10
18
 
11
19
  Options:
12
- -c, --config Path to design.yaml (default: ./design.yaml or ./design.yml)
13
- -p, --port Editor server port (default: 3000)
14
- --design-port Design server port (default: 3001)
15
- -h, --help Show this help message
20
+ -c, --config Path to dekit.yaml
21
+ -h, --help Show this help message
22
+
23
+ Run 'dekit <command> --help' for command-specific help.
16
24
  `);
17
25
  }
18
26
 
19
27
  function findDefaultConfig(): string | undefined {
20
- for (const name of ["design.yaml", "design.yml"]) {
28
+ for (const name of ["dekit.yaml", "dekit.yml", "design.yaml", "design.yml"]) {
21
29
  const p = resolve(name);
22
30
  if (existsSync(p)) return p;
23
31
  }
24
32
  }
25
33
 
26
- function parseArgs(args: string[]) {
27
- const result: Record<string, string> = {};
34
+ function extractGlobalArgs(args: string[]): {
35
+ config?: string;
36
+ help: boolean;
37
+ rest: string[];
38
+ } {
39
+ const rest: string[] = [];
40
+ let config: string | undefined;
41
+ let help = false;
28
42
  for (let i = 0; i < args.length; i++) {
29
43
  const arg = args[i];
30
44
  if (arg === "-c" || arg === "--config") {
31
- result.config = args[++i];
32
- } else if (arg === "-p" || arg === "--port") {
33
- result.port = args[++i];
34
- } else if (arg === "--design-port") {
35
- result.designPort = args[++i];
45
+ config = args[++i];
36
46
  } else if (arg === "-h" || arg === "--help") {
37
- result.help = "true";
47
+ help = true;
48
+ } else {
49
+ rest.push(arg);
38
50
  }
39
51
  }
40
- return result;
52
+ return { config, help, rest };
41
53
  }
42
54
 
43
- async function main() {
44
- const args = parseArgs(process.argv.slice(2));
45
-
46
- if (args.help) {
47
- printUsage();
48
- process.exit(0);
49
- }
50
-
51
- const configPath = args.config
52
- ? resolve(args.config)
53
- : findDefaultConfig();
54
-
55
+ async function loadConfig(configArg?: string) {
56
+ const configPath = configArg ? resolve(configArg) : findDefaultConfig();
55
57
  if (!configPath) {
56
58
  console.error(
57
- "Error: no design.yaml or design.yml found in current directory. Use -c to specify a config file.\n"
59
+ "Error: no dekit.yaml found in current directory. Use -c to specify a config file.\n"
58
60
  );
59
- printUsage();
60
61
  process.exit(1);
61
62
  }
62
- let config;
63
63
  try {
64
- config = await parseDesignConfig(configPath);
64
+ return await parseDesignConfig(configPath);
65
65
  } catch (err) {
66
66
  console.error(
67
67
  `Error parsing config: ${err instanceof Error ? err.message : err}`
68
68
  );
69
69
  process.exit(1);
70
70
  }
71
+ }
72
+
73
+ async function main() {
74
+ const { config: configArg, help, rest } = extractGlobalArgs(
75
+ process.argv.slice(2)
76
+ );
77
+ const command = rest[0] ?? "serve";
78
+ const commandArgs = rest.slice(1);
71
79
 
72
- const port = parseInt(args.port ?? "3000", 10);
73
- const designPort = parseInt(args.designPort ?? "3001", 10);
80
+ if (help && !rest.length) {
81
+ printUsage();
82
+ process.exit(0);
83
+ }
74
84
 
75
- await startServers({ config, port, designPort });
85
+ switch (command) {
86
+ case "init": {
87
+ const { runInit } = await import("../src/cli/init.js");
88
+ await runInit(commandArgs);
89
+ break;
90
+ }
91
+ case "add": {
92
+ const config = await loadConfig(configArg);
93
+ const { runAdd } = await import("../src/cli/add.js");
94
+ await runAdd(config, commandArgs);
95
+ break;
96
+ }
97
+ case "ls": {
98
+ const config = await loadConfig(configArg);
99
+ const { runLs } = await import("../src/cli/ls.js");
100
+ await runLs(config);
101
+ break;
102
+ }
103
+ case "serve": {
104
+ const config = await loadConfig(configArg);
105
+ const port = parseInt(
106
+ commandArgs.find((_, i, a) => a[i - 1] === "-p") ?? "3000",
107
+ 10
108
+ );
109
+ const designPort = parseInt(
110
+ commandArgs.find((_, i, a) => a[i - 1] === "--design-port") ?? "3001",
111
+ 10
112
+ );
113
+ const noOpen = commandArgs.includes("--no-open");
114
+ await startServers({ config, port, designPort, noOpen });
115
+ break;
116
+ }
117
+ case "screenshot": {
118
+ const config = await loadConfig(configArg);
119
+ const { runScreenshot } = await import("../src/cli/screenshot.js");
120
+ await runScreenshot(config, commandArgs);
121
+ break;
122
+ }
123
+ case "resolve": {
124
+ const config = await loadConfig(configArg);
125
+ const { runResolve } = await import("../src/cli/resolve.js");
126
+ await runResolve(config, commandArgs);
127
+ break;
128
+ }
129
+ case "usage": {
130
+ const { runUsage } = await import("../src/cli/usage.js");
131
+ await runUsage();
132
+ break;
133
+ }
134
+ default:
135
+ console.error(`Unknown command: ${command}\n`);
136
+ printUsage();
137
+ process.exit(1);
138
+ }
76
139
  }
77
140
 
78
141
  main();