@ikas/component-cli 0.109.0 → 0.111.0

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 (5) hide show
  1. package/package.json +1 -1
  2. package/templates/create/claude-md +23 -6
  3. package/templates/create/cursorrules +22 -6
  4. package/templates/create-full/claude-md +22 -6
  5. package/templates/create-full/cursorrules +21 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ikas/component-cli",
3
- "version": "0.109.0",
3
+ "version": "0.111.0",
4
4
  "description": "CLI for developing ikas code components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/templates/create/claude-md CHANGED
@@ -12,6 +12,8 @@ Never guess function signatures or type shapes — the MCP server is the source
12
12
  Use `npx ikas-component config add-component --props '[...]'` or `npx ikas-component config add-prop` to manage props.
13
13
  These commands update `ikas.config.json`, `types.ts`, and `global-types.ts` automatically.
14
14
 
15
+ **The CLI does NOT edit your component source.** `remove-prop` and `remove-enum` update `ikas.config.json` and the generated `types.ts` / `global-types.ts` only — `index.tsx`, sub-components, and `styles.css` are untouched. After removing a prop or enum, grep the source for the old identifier and clean up dead references yourself before building.
16
+
15
17
  ## MCP Tools (12 tools)
16
18
 
17
19
  ### Starting a New Section
@@ -54,18 +56,31 @@ These commands update `ikas.config.json`, `types.ts`, and `global-types.ts` auto
54
56
  | `npx ikas-component config update-prop-group --component "Name" --id colors [--name "..."] [--description "..."]` | Update a prop group |
55
57
  | `npx ikas-component config remove-prop-group --component "Name" --id colors` | Remove a prop group |
56
58
  | `npx ikas-component config list` | List all components and their props |
59
+ | `npx ikas-component config add-enum --name "Size" --options '[{"name":"Small","value":"s"}]'` | Create a custom ENUM type (returns `enumTypeId`) |
60
+ | `npx ikas-component config update-enum --id <enumId> --name "..." [--options '[...]']` | Update enum name/options |
61
+ | `npx ikas-component config remove-enum --id <enumId>` | Remove enum (fails if any prop still references it) |
62
+ | `npx ikas-component config list-enums` | List all custom enums |
57
63
  | `npx ikas-component check --json` | Type-check all components, output errors as JSON |
58
64
  | `npx ikas-component build` | Compile server.js + client.js + styles.css per component |
59
65
  | `npx ikas-component dev` | Start dev server (Vite 5200 + WebSocket 5201) |
60
66
 
61
67
  ## Workflow: Building a New Section
62
68
 
63
- 1. `get_section_template("product-detail")` → get starter files + CLI command with --props
64
- 2. Run the CLI command (creates component + props + types.ts in one step)
65
- 3. Write `index.tsx` and `styles.css` using the template (do NOT edit types.ts — it's already generated)
66
- 4. Look up APIs → `get_model_guide("IkasProduct")`, `get_function_doc("addItemToCart")`
67
- 5. `npx ikas-component check --json` → fix type errors
68
- 6. `npx ikas-component build` → verify clean build
69
+ 1. `get_section_template("product-detail-section")` → get starter files + CLI command with --props
70
+ 2. For any custom ENUM props the section needs: `config add-enum` **first** (capture the returned `enumTypeId`), then reference it in `add-prop --type ENUM --enumTypeId <id>`. Order matters — an ENUM prop without a pre-existing `enumTypeId` is rejected.
71
+ 3. Run the CLI command (creates component + props + types.ts in one step)
72
+ 4. Write `index.tsx` and `styles.css` using the template (do NOT edit `types.ts` or `global-types.ts` — both are regenerated on every prop/enum mutation)
73
+ 5. Look up APIs → `get_model_guide("IkasProduct")`, `get_function_doc("addItemToCart")`
74
+ 6. `npx ikas-component check --json` → fix type errors
75
+ 7. `npx ikas-component build` → verify clean build
76
+
77
+ ### Custom ENUM lifecycle
78
+
79
+ - **Create:** `add-enum` → `add-prop --type ENUM --enumTypeId <id>`. The enum must exist before the prop is created.
80
+ - **Rename options:** `update-enum --id <id> --options '[...]'`. `types.ts` regenerates automatically.
81
+ - **Remove:** remove (or repoint) every prop that references the enum **first**, then `remove-enum`. `remove-enum` blocks with an error while any prop still references the id.
82
+ - `global-types.ts` is regenerated unconditionally on `add-enum` / `update-enum` / `remove-enum` / `remove-prop` — never hand-edit it.
83
+ - Template snippets from `get_section_template` use `{{ENUM_ID:<EnumName>}}` placeholders (e.g. `{{ENUM_ID:AspectRatio}}`). Create the matching `add-enum` first, then substitute the returned id.
69
84
 
70
85
  ## Sub-Component Structure
71
86
 
@@ -212,6 +227,8 @@ For button loading states, use two separate props:
212
227
 
213
228
  Group text props under a "Texts" propGroup or another specific text group name.
214
229
 
230
+ **Assistive strings (`aria-label`, `aria-describedby`, `alt`, sr-only text):** if the string is meaningful to end users (e.g. icon-only button label, product image alt), make it a TEXT prop. English literal defaults are acceptable for purely structural labels a merchant would never want to change (e.g. `role="dialog" aria-modal="true"`). When in doubt, make it a prop.
231
+
215
232
  ## Sections vs Components
216
233
 
217
234
  - **Sections** = page-level, full-width containers (Header, Hero, Product Grid, Footer).
package/templates/create/cursorrules CHANGED
@@ -9,6 +9,8 @@ You are building **Preact + TypeScript components for an e-commerce storefront**
9
9
  Use `npx ikas-component config add-component --props '[...]'` or `npx ikas-component config add-prop` to manage props.
10
10
  These commands update `ikas.config.json`, `types.ts`, and `global-types.ts` automatically.
11
11
 
12
+ **The CLI does NOT edit your component source.** `remove-prop` and `remove-enum` update `ikas.config.json` and the generated `types.ts` / `global-types.ts` only — `index.tsx`, sub-components, and `styles.css` are untouched. After removing a prop or enum, grep the source for the old identifier and clean up dead references yourself before building.
13
+
12
14
  ## MCP Tools (12 tools)
13
15
 
14
16
  ### Starting a New Section
@@ -40,17 +42,29 @@ These commands update `ikas.config.json`, `types.ts`, and `global-types.ts` auto
40
42
  - npx ikas-component config update-prop-group --component "Name" --id colors [--name "..."] — Update a prop group
41
43
  - npx ikas-component config remove-prop-group --component "Name" --id colors — Remove a prop group
42
44
  - npx ikas-component config list — List all components and their props
45
+ - npx ikas-component config add-enum --name "Size" --options '[{"name":"Small","value":"s"}]' — Create a custom ENUM type (returns enumTypeId)
46
+ - npx ikas-component config update-enum --id <enumId> --name "..." [--options '[...]'] — Update enum name/options
47
+ - npx ikas-component config remove-enum --id <enumId> — Remove enum (fails if any prop still references it)
48
+ - npx ikas-component config list-enums — List all custom enums
43
49
  - npx ikas-component check --json — Type-check all components
44
50
  - npx ikas-component build — Compile server.js + client.js + styles.css per component
45
51
  - npx ikas-component dev — Start dev server (Vite 5200 + WebSocket 5201)
46
52
 
47
53
  ## Workflow: Building a New Section
48
- 1. get_section_template("product-detail") → get starter files + CLI command with --props
49
- 2. Run the CLI command (creates component + props + types.ts in one step)
50
- 3. Write index.tsx and styles.css using the template (do NOT edit types.ts — it's already generated)
51
- 4. Look up APIs: get_model_guide("IkasProduct"), get_function_doc("addItemToCart")
52
- 5. npx ikas-component check --json → fix type errors
53
- 6. npx ikas-component build → verify clean build
54
+ 1. get_section_template("product-detail-section") → get starter files + CLI command with --props
55
+ 2. For any custom ENUM props the section needs: `config add-enum` FIRST (capture the returned enumTypeId), then reference it in `add-prop --type ENUM --enumTypeId <id>`. Order matters — an ENUM prop without a pre-existing enumTypeId is rejected.
56
+ 3. Run the CLI command (creates component + props + types.ts in one step)
57
+ 4. Write index.tsx and styles.css using the template (do NOT edit types.ts or global-types.ts — both are regenerated on every prop/enum mutation)
58
+ 5. Look up APIs: get_model_guide("IkasProduct"), get_function_doc("addItemToCart")
59
+ 6. npx ikas-component check --json → fix type errors
60
+ 7. npx ikas-component build → verify clean build
61
+
62
+ ### Custom ENUM lifecycle
63
+ - **Create:** `add-enum` → `add-prop --type ENUM --enumTypeId <id>` (enum must exist before the prop is created).
64
+ - **Rename options:** `update-enum --id <id> --options '[...]'` — types.ts regenerates automatically.
65
+ - **Remove:** remove (or repoint) every prop that references the enum FIRST, then `remove-enum`. `remove-enum` blocks with an error while any prop still references the id.
66
+ - `global-types.ts` is regenerated unconditionally on `add-enum` / `update-enum` / `remove-enum` / `remove-prop` — never hand-edit it.
67
+ - Template snippets from `get_section_template` use `{{ENUM_ID:<EnumName>}}` placeholders (e.g. `{{ENUM_ID:AspectRatio}}`). Create the matching `add-enum` first, then substitute the returned id.
54
68
 
55
69
  ## Sub-Component Structure
56
70
  **ALWAYS create sub-components in `src/sub-components/` with their own folder containing `index.tsx` and `styles.css`.**
@@ -84,6 +98,8 @@ Correct: `<h1>{title}</h1>` with `title` as TEXT prop (defaultValue: "Sign In")
84
98
  For button loading states, use two separate props (e.g., `submitButtonText` + `submittingButtonText`).
85
99
  Group text props under a "Texts" propGroup or another specific text group name.
86
100
 
101
+ **Assistive strings (`aria-label`, `aria-describedby`, `alt`, sr-only text):** if the string is meaningful to end users (e.g. icon-only button label, product image alt), make it a TEXT prop. English literal defaults are acceptable for purely structural labels where a merchant would never want to change them (e.g. `role="dialog" aria-modal="true"`). When in doubt, make it a prop.
102
+
87
103
  ## Sections vs Components
88
104
  - Sections = page-level containers (Header, Hero, Product Grid, Footer)
89
105
  Set "type": "section" via CLI. Use <section> root element. Props interface: Props.
package/templates/create-full/claude-md CHANGED
@@ -14,6 +14,8 @@ Never guess function signatures or type shapes — the MCP server is the source
14
14
  Use `npx ikas-component config add-component --props '[...]'` or `npx ikas-component config add-prop` to manage props.
15
15
  These commands update BOTH `ikas.config.json` AND `types.ts` automatically.
16
16
 
17
+ **The CLI does NOT edit your component source.** `remove-prop` and `remove-enum` update `ikas.config.json` and the generated `types.ts` / `global-types.ts` only — `index.tsx`, sub-components, and `styles.css` are untouched. After removing a prop or enum, grep the source for the old identifier and clean up dead references yourself before building.
18
+
17
19
  ## MCP Tools (12 tools)
18
20
 
19
21
  ### Starting a New Section
@@ -59,18 +61,30 @@ These commands update BOTH `ikas.config.json` AND `types.ts` automatically.
59
61
  | `npx ikas-component config update-prop-group --component "Name" --id colors [--name "..."] [--description "..."]` | Update a prop group |
60
62
  | `npx ikas-component config remove-prop-group --component "Name" --id colors` | Remove a prop group |
61
63
  | `npx ikas-component config list` | List all components and their props |
64
+ | `npx ikas-component config add-enum --name "Size" --options '[{"name":"Small","value":"s"}]'` | Create a custom ENUM type (returns `enumTypeId`) |
65
+ | `npx ikas-component config update-enum --id <enumId> --name "..." [--options '[...]']` | Update enum name/options |
66
+ | `npx ikas-component config remove-enum --id <enumId>` | Remove enum (fails if any prop still references it) |
67
+ | `npx ikas-component config list-enums` | List all custom enums |
62
68
  | `npx ikas-component check --json` | Type-check all components, output errors as JSON |
63
69
  | `npx ikas-component build` | Compile server.js + client.js + styles.css per component |
64
70
  | `npx ikas-component dev` | Start dev server (Vite 5200 + WebSocket 5201) |
65
71
 
66
72
  ## Workflow: Building a New Section
67
73
 
68
- 1. `get_section_template("product-detail")` → get starter files + CLI command with --props
69
- 2. Run the CLI command (creates component + props + types.ts in one step)
70
- 3. Write `index.tsx` and `styles.css` using the template (do NOT edit types.ts — it's already generated)
71
- 4. Look up APIs → `get_model_guide("IkasProduct")`, `get_function_doc("addItemToCart")`
72
- 5. `npx ikas-component check --json` → fix type errors
73
- 6. `npx ikas-component build` → verify clean build
74
+ 1. `get_section_template("product-detail-section")` → get starter files + CLI command with --props
75
+ 2. For any custom ENUM props the section needs: `config add-enum` **first** (capture the returned `enumTypeId`), then reference it in `add-prop --type ENUM --enumTypeId <id>`. Order matters — an ENUM prop without a pre-existing `enumTypeId` is rejected.
76
+ 3. Run the CLI command (creates component + props + types.ts in one step)
77
+ 4. Write `index.tsx` and `styles.css` using the template (do NOT edit `types.ts` or `global-types.ts` — both are regenerated on every prop/enum mutation)
78
+ 5. Look up APIs → `get_model_guide("IkasProduct")`, `get_function_doc("addItemToCart")`
79
+ 6. `npx ikas-component check --json` → fix type errors
80
+ 7. `npx ikas-component build` → verify clean build
81
+
82
+ ### Custom ENUM lifecycle
83
+
84
+ - **Create:** `add-enum` → `add-prop --type ENUM --enumTypeId <id>`. The enum must exist before the prop is created.
85
+ - **Rename options:** `update-enum --id <id> --options '[...]'`. `types.ts` regenerates automatically.
86
+ - **Remove:** remove (or repoint) every prop that references the enum **first**, then `remove-enum`. `remove-enum` blocks with an error while any prop still references the id.
87
+ - `global-types.ts` is regenerated unconditionally on `add-enum` / `update-enum` / `remove-enum` / `remove-prop` — never hand-edit it.
74
88
 
75
89
  ## Sub-Component Structure
76
90
 
@@ -447,6 +461,8 @@ For button loading states, use two separate props:
447
461
 
448
462
  Group text props under a "Texts" propGroup when the component has 5+ props.
449
463
 
464
+ **Assistive strings (`aria-label`, `aria-describedby`, `alt`, sr-only text):** if the string is meaningful to end users (e.g. icon-only button label, product image alt), make it a TEXT prop. English literal defaults are acceptable for purely structural labels a merchant would never want to change (e.g. `role="dialog" aria-modal="true"`). When in doubt, make it a prop.
465
+
450
466
  ## Sections vs Components
451
467
 
452
468
  - **Sections** = page-level, full-width containers (Header, Hero, Product Grid, Footer).
package/templates/create-full/cursorrules CHANGED
@@ -9,6 +9,8 @@ You are building **Preact + TypeScript components for an e-commerce storefront**
9
9
  Use `npx ikas-component config add-component --props '[...]'` or `npx ikas-component config add-prop` to manage props.
10
10
  These commands update BOTH `ikas.config.json` AND `types.ts` automatically.
11
11
 
12
+ **The CLI does NOT edit your component source.** `remove-prop` and `remove-enum` update `ikas.config.json` and the generated `types.ts` / `global-types.ts` only — `index.tsx`, sub-components, and `styles.css` are untouched. After removing a prop or enum, grep the source for the old identifier and clean up dead references yourself before building.
13
+
12
14
  ## MCP Tools (12 tools)
13
15
 
14
16
  ### Starting a New Section
@@ -40,17 +42,28 @@ These commands update BOTH `ikas.config.json` AND `types.ts` automatically.
40
42
  - npx ikas-component config update-prop-group --component "Name" --id colors [--name "..."] — Update a prop group
41
43
  - npx ikas-component config remove-prop-group --component "Name" --id colors — Remove a prop group
42
44
  - npx ikas-component config list — List all components and their props
45
+ - npx ikas-component config add-enum --name "Size" --options '[{"name":"Small","value":"s"}]' — Create a custom ENUM type (returns enumTypeId)
46
+ - npx ikas-component config update-enum --id <enumId> --name "..." [--options '[...]'] — Update enum name/options
47
+ - npx ikas-component config remove-enum --id <enumId> — Remove enum (fails if any prop still references it)
48
+ - npx ikas-component config list-enums — List all custom enums
43
49
  - npx ikas-component check --json — Type-check all components
44
50
  - npx ikas-component build — Compile server.js + client.js + styles.css per component
45
51
  - npx ikas-component dev — Start dev server (Vite 5200 + WebSocket 5201)
46
52
 
47
53
  ## Workflow: Building a New Section
48
- 1. get_section_template("product-detail") → get starter files + CLI command with --props
49
- 2. Run the CLI command (creates component + props + types.ts in one step)
50
- 3. Write index.tsx and styles.css using the template (do NOT edit types.ts — it's already generated)
51
- 4. Look up APIs: get_model_guide("IkasProduct"), get_function_doc("addItemToCart")
52
- 5. npx ikas-component check --json → fix type errors
53
- 6. npx ikas-component build → verify clean build
54
+ 1. get_section_template("product-detail-section") → get starter files + CLI command with --props
55
+ 2. For any custom ENUM props the section needs: `config add-enum` FIRST (capture the returned enumTypeId), then reference it in `add-prop --type ENUM --enumTypeId <id>`. Order matters — an ENUM prop without a pre-existing enumTypeId is rejected.
56
+ 3. Run the CLI command (creates component + props + types.ts in one step)
57
+ 4. Write index.tsx and styles.css using the template (do NOT edit types.ts or global-types.ts — both are regenerated on every prop/enum mutation)
58
+ 5. Look up APIs: get_model_guide("IkasProduct"), get_function_doc("addItemToCart")
59
+ 6. npx ikas-component check --json → fix type errors
60
+ 7. npx ikas-component build → verify clean build
61
+
62
+ ### Custom ENUM lifecycle
63
+ - **Create:** `add-enum` → `add-prop --type ENUM --enumTypeId <id>` (enum must exist before the prop is created).
64
+ - **Rename options:** `update-enum --id <id> --options '[...]'` — types.ts regenerates automatically.
65
+ - **Remove:** remove (or repoint) every prop that references the enum FIRST, then `remove-enum`. `remove-enum` blocks with an error while any prop still references the id.
66
+ - `global-types.ts` is regenerated unconditionally on `add-enum` / `update-enum` / `remove-enum` / `remove-prop` — never hand-edit it.
54
67
 
55
68
  ## Sub-Component Structure
56
69
  **ALWAYS create sub-components in `src/sub-components/` with their own folder containing `index.tsx` and `styles.css`.**
@@ -80,6 +93,8 @@ Correct: `<h1>{title}</h1>` with `title` as TEXT prop (defaultValue: "Sign In")
80
93
  For button loading states, use two separate props (e.g., `submitButtonText` + `submittingButtonText`).
81
94
  Group text props under a "Texts" propGroup when the component has 5+ props.
82
95
 
96
+ **Assistive strings (`aria-label`, `aria-describedby`, `alt`, sr-only text):** if the string is meaningful to end users (e.g. icon-only button label, product image alt), make it a TEXT prop. English literal defaults are acceptable for purely structural labels where a merchant would never want to change them (e.g. `role="dialog" aria-modal="true"`). When in doubt, make it a prop.
97
+
83
98
  ## Sections vs Components
84
99
  - Sections = page-level containers (Header, Hero, Product Grid, Footer)
85
100
  Set "type": "section" via CLI. Use <section> root element. Props interface: Props.