@ikas/component-cli 0.132.0 → 1.1.0

package/templates/create/claude-md

@@ -1,275 +0,0 @@
-# ikas Code Components Project
-
-You are building **Preact + TypeScript components for an e-commerce storefront**.
-This project uses the ikas Code Components framework with an MCP server for API documentation.
-
-**ALWAYS query MCP tools before writing code that uses storefront APIs.**
-Never guess function signatures or type shapes — the MCP server is the source of truth.
-
-## CRITICAL: Auto-Generated Files
-
-**NEVER manually create or edit `ikas.config.json`, `types.ts`, `global-types.ts`, or `src/components/index.ts`** — they are all auto-generated by CLI commands.
-Use `npx ikas-component config add-component --props '[...]'` or `npx ikas-component config add-prop` to manage components and props.
-These commands update `ikas.config.json`, `types.ts`, `global-types.ts`, AND `src/components/index.ts` (including the component export) automatically.
-
-**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.
-
-## MCP Tools (12 tools)
-
-### Starting a New Section
-| Tool | Purpose |
-|------|---------|
-| `get_section_template(sectionType)` | **Start here** — production-ready starter template (index.tsx + types.ts + styles.css + config) for common sections: header, footer, product-detail, product-list, cart, login, register, hero-banner, blog-post, faq, etc. |
-| `get_framework_guide(topic)` | Framework docs — "ai-workflow", "common-pitfalls", "prop-types", "css-scoping", "form-handling", "imports", "sections-vs-components" |
-| `get_code_example(task)` | Code examples — "add to cart", "variant selection", "image-handling", "product-detail-section", "cart-section" |
-
-### Looking Up APIs
-| Tool | Purpose |
-|------|---------|
-| `search_docs(query)` | Search across all storefront API docs and framework guides |
-| `get_function_doc(name)` | Full docs for a specific function (e.g. "addItemToCart", "Router.navigate") |
-| `list_functions(category?)` | List functions by category: ProductDetail, Cart, ProductList, Navigation, Customer, Order, Image, Blog, Brand, Category, Pricing, Form, Validation, Pagination, Filtering |
-| `get_prop_types()` | All available ikas.config.json prop types with TS types and examples |
-
-### Exploring Types
-| Tool | Purpose |
-|------|---------|
-| `get_model_guide(model)` | **One-stop-shop** — type definition + all utility functions + examples + related types for a model (e.g. "IkasProduct", "IkasOrder") |
-| `get_type_definition(name)` | Full definition of a type or enum (e.g. "IkasProduct", "IkasOrderStatus") |
-| `get_functions_for_type(typeName)` | All utility functions for a type (e.g. "IkasImage") |
-| `search_types(query)` | Search types/enums by keyword (e.g. "price", "address", "status") |
-| `list_types(domain?, kind?)` | List all types, optionally filtered by domain ("product", "cart", "order") or kind ("type", "enum") |
-
-## CLI Commands
-
-**Never edit ikas.config.json or types.ts manually** — use the CLI commands:
-
-| Command | Purpose |
-|---------|---------|
-| `npx ikas-component config add-component --name "Name" --type section --props '[...]'` | **Primary** — create component with all props in one command |
-| `npx ikas-component config add-component --name "Name" --type section` | Create component with no props (add later) |
-| `npx ikas-component config add-prop --component "Name" --name title --displayName "Title" --type TEXT --required [--group content]` | Add a single prop incrementally |
-| `npx ikas-component config update-prop --component "Name" --prop title --type RICH_TEXT [--group colors]` | Update a prop's type or group |
-| `npx ikas-component config remove-prop --component "Name" --prop title` | Remove a prop |
-| `npx ikas-component config remove-component --name "Name"` | Remove a component |
-| `npx ikas-component config add-prop-group --component "Name" --id colors --name "Colors" [--description "..."] [--parent style]` | Create a prop group |
-| `npx ikas-component config update-prop-group --component "Name" --id colors [--name "..."] [--description "..."]` | Update a prop group |
-| `npx ikas-component config remove-prop-group --component "Name" --id colors` | Remove a prop group |
-| `npx ikas-component config list` | List all components and their props |
-| `npx ikas-component config add-enum --name "Size" --options '[{"name":"Small","value":"s"}]'` | Create a custom ENUM type (returns `enumTypeId`) |
-| `npx ikas-component config update-enum --id <enumId> --name "..." [--options '[...]']` | Update enum name/options |
-| `npx ikas-component config remove-enum --id <enumId>` | Remove enum (fails if any prop still references it) |
-| `npx ikas-component config list-enums` | List all custom enums |
-| `npx ikas-component check --json` | Type-check all components, output errors as JSON |
-| `npx ikas-component build` | Compile server.js + client.js + styles.css per component |
-| `npx ikas-component dev` | Start dev server (Vite 5200 + WebSocket 5201) |
-
-## Workflow: Building a New Section
-
-1. `get_section_template("product-detail-section")` → get starter files + CLI command with --props
-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.
-3. Run the CLI command (creates component + props + types.ts in one step)
-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)
-5. Look up APIs → `get_model_guide("IkasProduct")`, `get_function_doc("addItemToCart")`
-6. `npx ikas-component check --json` → fix type errors
-7. `npx ikas-component build` → verify clean build
-
-### Custom ENUM lifecycle
-
-- **Create:** `add-enum` → `add-prop --type ENUM --enumTypeId <id>`. The enum must exist before the prop is created.
-- **Rename options:** `update-enum --id <id> --options '[...]'`. `types.ts` regenerates automatically.
-- **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.
-- `global-types.ts` is regenerated unconditionally on `add-enum` / `update-enum` / `remove-enum` / `remove-prop` — never hand-edit it.
-- 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.
-
-## Sub-Component Structure
-
-**ALWAYS create sub-components in `src/sub-components/` with their own folder containing `index.tsx` and `styles.css`. NEVER create flat .tsx files inside a component folder.**
-
-```
-src/
-├── components/
-│   ├── ProductList/
-│   │   ├── index.tsx         # imports from ../../sub-components/...
-│   │   ├── types.ts          # auto-generated (CLI-managed)
-│   │   └── styles.css
-│   └── index.ts
-├── sub-components/
-│   ├── ProductCard/
-│   │   ├── index.tsx          # sub-component with inline Props
-│   │   └── styles.css
-│   └── FilterSidebar/
-│       ├── index.tsx
-│       └── styles.css
-├── global.css                 # unscoped global styles
-└── global-types.ts            # auto-generated shared enum types
-```
-
-**Key rules:**
-- `src/components/` = registered in ikas.config.json. `src/sub-components/` = internal helpers (NOT in ikas.config.json)
-- Sub-components do NOT have `types.ts` — define `Props` inline in `index.tsx`
-- Custom enum types are exported from `src/global-types.ts` (auto-generated). Sub-components can import them: `import type { MyEnum } from "../../global-types";`
-- TSX: use `import ProductCard from "../../sub-components/ProductCard";`
-- Sub-components should be wrapped with `observer()` from `@ikas/component-utils`
-- Sub-components can be shared across multiple parent sections
-
-```tsx
-// src/sub-components/ProductCard/index.tsx — inline Props, no types.ts
-import { IkasProduct, getSelectedProductVariant } from "@ikas/bp-storefront";
-
-interface Props { product: IkasProduct; }
-
-export default function ProductCard({ product }: Props) { ... }
-```
-
-## Key Patterns
-
-### Component Exports & Reactivity
-```tsx
-// Root components are automatically reactive — the ikas runtime wraps them in autorun().
-// Do NOT import or use observer() on root exports.
-import { Props } from "./types";
-
-export function MySection({ product }: Props) { ... }
-export default MySection;
-```
-
-```tsx
-// Only use observer() on extracted SUB-COMPONENTS
-import { observer } from "@ikas/component-utils";
-
-const CartBadge = observer(function CartBadge() {
-  const count = cartStore.order?.orderLineItems?.length ?? 0;
-  return <span>{count}</span>;
-});
-```
-
-### Null Safety
-```tsx
-// Storefront models can be null — always check before accessing
-if (!product) return null;
-const price = product.selectedVariant?.price?.formattedPrice ?? "";
-```
-
-### Mutations
-```tsx
-// Functions like addItemToCart() mutate the model in-place (MobX observable)
-// No need to capture return value — root components re-render automatically via autorun()
-await addItemToCart({ product });
-```
-
-### COMPONENT & COMPONENT_LIST Props
-These props let you create **slot-based** architectures where store owners can drag child components into your section/component from the editor.
-
-- `COMPONENT` — a single child component slot (TS type: `any`)
-- `COMPONENT_LIST` — a list of child components (TS type: `any`)
-
-**Rendering:** Use the `<IkasComponentRenderer>` wrapper to render child components:
-```tsx
-import { IkasComponentRenderer } from "@ikas/bp-storefront";
-import { Props } from "./types";
-
-export function MySection({ title, cardList, ...props }: Props) {
-  return (
-    <section>
-      <h2>{title}</h2>
-      <div className="cards">
-        {/* COMPONENT_LIST — render a list of child components */}
-        <IkasComponentRenderer
-          id="card-list"
-          components={cardList as any[]}
-          parentProps={props}
-        />
-      </div>
-    </section>
-  );
-}
-export default MySection;
-```
-
-**Key rules:**
-- Always pass `parentProps={props}` so child components can access parent data via dynamic values
-- Cast the prop value: `components={myList as any[]}` for COMPONENT_LIST, `components={[myComp] as any[]}` for COMPONENT
-- `<IkasComponentRenderer>` handles rendering, styling, and reactivity of child components automatically
-
-**Config example:**
-```json
-{
-  "name": "cardList",
-  "displayName": "Card List",
-  "type": "COMPONENT_LIST"
-}
-```
-
-### CSS Scoping
-All CSS is auto-scoped with `.cc_{componentId}` prefix. Write plain class names — they are scoped at build time.
-
-### Preact Event Handling
-Use `onInput` instead of `onChange` for text inputs (Preact behavior).
-
-### Import Source
-```tsx
-import { addItemToCart, IkasProduct, IkasImage } from "@ikas/bp-storefront";
-```
-
-## No Static Text Rule
-
-**CRITICAL: Never hardcode user-visible text in JSX.** All text strings (headings, button labels,
-empty states, loading messages, form labels) MUST be TEXT props with defaultValues.
-
-Wrong: `<h1>Sign In</h1>`
-Correct: `<h1>{title}</h1>` with `title` as TEXT prop (defaultValue: "Sign In")
-
-For button loading states, use two separate props:
-- `submitButtonText` (default: "Sign In")
-- `submittingButtonText` (default: "Signing in...")
-
-Group text props under a "Texts" propGroup or another specific text group name.
-
-**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.
-
-## Sections vs Components
-
-- **Sections** = page-level, full-width containers (Header, Hero, Product Grid, Footer).
-  Set `"type": "section"` via CLI. Use `<section>` root element. Props interface: `Props`.
-  **Sections MUST always include a `backgroundColor` COLOR prop** (default: `#ffffff`).
-  Apply via inline style: `style={backgroundColor ? { backgroundColor } : undefined}`
-  Consider also adding `textColor` COLOR props for text elements directly on the section background.
-- **Components** = child elements placed inside sections (buttons, cards, badges).
-  Defaults to `"component"`. Use `<div>` root element. Props interface: `Props`.
-
-## Prop Groups
-
-Organize props into collapsible groups in the editor sidebar. Use prop groups when a component has props that are related to each other.
-
-### Config Format
-- Define groups in `propGroups` array on the component in `ikas.config.json`
-- Assign props to groups via `groupId` on each prop
-- Groups can nest 1 level deep via `children`
-- Props without `groupId` appear ungrouped at root level
-- Group IDs must be unique within a component
-
-### CLI Commands
-- `config add-prop-group --component "Name" --id content --name "Content"` — create group
-- `config add-prop-group --component "Name" --id colors --name "Colors" --parent style` — create nested group
-- `config add-prop --component "Name" --name title --displayName "Title" --type TEXT --group content` — add prop to group
-- `config update-prop --component "Name" --prop title --group colors` — move prop to different group
-- `config remove-prop-group --component "Name" --id content` — remove group (props become ungrouped)
-
-### When to Use
-- props that are related to each other → group related props
-- Sections with content + style props → separate "Content" and "Appearance" groups
-- Complex sections → use nested groups (e.g., "Style" → "Colors", "Typography")
-
-## Workflow Addition
-
-When building a section with props that are related to each other, organize into prop groups after defining props:
-```bash
-npx ikas-component config add-prop-group --component "Name" --id content --name "Content"
-npx ikas-component config update-prop --component "Name" --prop title --group content
-```
-
-## Build Verification
-
-IMPORTANT: After completing any task, always run `npx ikas-component build` (or `npm run build`) to check for
-TypeScript and build errors. Fix any errors before considering the task done.

package/templates/create/cursorrules

@@ -1,123 +0,0 @@
-# ikas Code Components
-
-You are building **Preact + TypeScript components for an e-commerce storefront**.
-**ALWAYS query MCP tools before writing code that uses storefront APIs.**
-
-## CRITICAL: Auto-Generated Files
-
-**NEVER manually create or edit `ikas.config.json`, `types.ts` or `global-types.ts`** — they are auto-generated by CLI commands.
-Use `npx ikas-component config add-component --props '[...]'` or `npx ikas-component config add-prop` to manage props.
-These commands update `ikas.config.json`, `types.ts`, and `global-types.ts` automatically.
-
-**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.
-
-## MCP Tools (12 tools)
-
-### Starting a New Section
-- get_section_template(sectionType) — **Start here** — production-ready starter template for common sections (header, footer, product-detail, product-list, cart, login, hero-banner, blog-post, faq, etc.)
-- get_framework_guide(topic) — Framework docs ("ai-workflow", "common-pitfalls", "prop-types", "css-scoping", "form-handling", "imports")
-- get_code_example(task) — Code examples ("add to cart", "variant selection", "image-handling")
-
-### Looking Up APIs
-- search_docs(query) — Search all storefront API docs and framework guides
-- get_function_doc(name) — Full docs for a function (e.g. "addItemToCart", "Router.navigate")
-- list_functions(category?) — List functions by category (ProductDetail, Cart, ProductList, Navigation, Customer, Order, Image, Blog, Brand, Pricing, Form, Validation, Pagination, Filtering)
-- get_prop_types() — All available ikas.config.json prop types
-
-### Exploring Types
-- get_model_guide(model) — **One-stop-shop** — type def + utility functions + examples for a model (e.g. "IkasProduct", "IkasOrder")
-- get_type_definition(name) — Full definition of a type or enum
-- get_functions_for_type(typeName) — All utility functions for a type
-- search_types(query) — Search types/enums by keyword ("price", "address", "status")
-- list_types(domain?, kind?) — List all types, filter by domain or kind ("type"/"enum")
-
-## CLI Commands (never edit ikas.config.json or types.ts manually)
-- npx ikas-component config add-component --name "Name" --type section --props '[...]' — **Primary** — create with all props in one command
-- npx ikas-component config add-component --name "Name" --type section — Create component with no props
-- npx ikas-component config add-prop --component "Name" --name title --displayName "Title" --type TEXT --required [--group content] — Add a prop incrementally
-- npx ikas-component config update-prop --component "Name" --prop title --type RICH_TEXT [--group colors] — Update a prop or group
-- npx ikas-component config remove-prop --component "Name" --prop title — Remove a prop
-- npx ikas-component config remove-component --name "Name" — Remove a component
-- npx ikas-component config add-prop-group --component "Name" --id colors --name "Colors" [--parent style] — Create a prop group
-- npx ikas-component config update-prop-group --component "Name" --id colors [--name "..."] — Update a prop group
-- npx ikas-component config remove-prop-group --component "Name" --id colors — Remove a prop group
-- npx ikas-component config list — List all components and their props
-- npx ikas-component config add-enum --name "Size" --options '[{"name":"Small","value":"s"}]' — Create a custom ENUM type (returns enumTypeId)
-- npx ikas-component config update-enum --id <enumId> --name "..." [--options '[...]'] — Update enum name/options
-- npx ikas-component config remove-enum --id <enumId> — Remove enum (fails if any prop still references it)
-- npx ikas-component config list-enums — List all custom enums
-- npx ikas-component check --json — Type-check all components
-- npx ikas-component build — Compile server.js + client.js + styles.css per component
-- npx ikas-component dev — Start dev server (Vite 5200 + WebSocket 5201)
-
-## Workflow: Building a New Section
-1. get_section_template("product-detail-section") → get starter files + CLI command with --props
-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.
-3. Run the CLI command (creates component + props + types.ts in one step)
-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)
-5. Look up APIs: get_model_guide("IkasProduct"), get_function_doc("addItemToCart")
-6. npx ikas-component check --json → fix type errors
-7. npx ikas-component build → verify clean build
-
-### Custom ENUM lifecycle
-- **Create:** `add-enum` → `add-prop --type ENUM --enumTypeId <id>` (enum must exist before the prop is created).
-- **Rename options:** `update-enum --id <id> --options '[...]'` — types.ts regenerates automatically.
-- **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.
-- `global-types.ts` is regenerated unconditionally on `add-enum` / `update-enum` / `remove-enum` / `remove-prop` — never hand-edit it.
-- 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.
-
-## Sub-Component Structure
-**ALWAYS create sub-components in `src/sub-components/` with their own folder containing `index.tsx` and `styles.css`.**
-- `src/components/` = registered in ikas.config.json. `src/sub-components/` = internal helpers (NOT in ikas.config.json)
-- Sub-components do NOT have `types.ts` — define `Props` inline in `index.tsx`
-- Custom enum types are exported from `src/global-types.ts` (auto-generated). Sub-components can import them: `import type { MyEnum } from "../../global-types";`
-- TSX: `import ProductCard from "../../sub-components/ProductCard";`
-- Sub-components should be wrapped with `observer()` from `@ikas/component-utils`
-- Sub-components can be shared across multiple parent sections
-- NEVER create flat .tsx files inside a component folder
-
-## Key Patterns
-- Root components are automatically reactive (ikas runtime uses autorun). Do NOT use observer() on root exports.
-  Pattern: `export function MySection({ title }: Props) { ... }` + `export default MySection;`
-  Only use observer() on sub-components.
-- Null safety: storefront models can be null — always check before accessing
-- Mutations: addItemToCart() etc. mutate MobX observables in-place — no return capture needed
-- COMPONENT & COMPONENT_LIST props: slot-based child components rendered via `<IkasComponentRenderer>`
-  `import { IkasComponentRenderer } from "@ikas/bp-storefront"`
-  `<IkasComponentRenderer components={myList as any[]} parentProps={props} />`
-  Always pass `parentProps={props}` so children can access parent data. Cast with `as any[]`.
-- CSS: write plain class names — auto-scoped with .cc_{componentId} at build time
-- Events: use onInput (not onChange) for text inputs (Preact behavior)
-- Imports: `import { addItemToCart, IkasProduct } from "@ikas/bp-storefront"`
-
-## No Static Text Rule
-**CRITICAL: Never hardcode user-visible text in JSX.** All text strings (headings, button labels,
-empty states, loading messages, form labels) MUST be TEXT props with defaultValues.
-Wrong: `<h1>Sign In</h1>`
-Correct: `<h1>{title}</h1>` with `title` as TEXT prop (defaultValue: "Sign In")
-For button loading states, use two separate props (e.g., `submitButtonText` + `submittingButtonText`).
-Group text props under a "Texts" propGroup or another specific text group name.
-
-**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.
-
-## Sections vs Components
-- Sections = page-level containers (Header, Hero, Product Grid, Footer)
-  Set "type": "section" via CLI. Use <section> root element. Props interface: Props.
-  **Sections MUST always include a `backgroundColor` COLOR prop** (default: `#ffffff`).
-  Apply via inline style: `style={backgroundColor ? { backgroundColor } : undefined}`
-  Consider also adding `textColor` COLOR props for text elements directly on the section background.
-- Components = child elements inside sections (buttons, cards, badges)
-  Defaults to "component". Use <div> root element. Props interface: Props.
-
-## Prop Groups
-Organize props that are related to each other into collapsible groups in editor sidebar.
-- Define groups in `propGroups` on component in ikas.config.json
-- Assign props via `groupId` on each prop
-- Nest 1 level deep with `children`
-- Group IDs must be unique within a component
-- CLI: add-prop-group, update-prop-group, remove-prop-group
-- Add prop to group: add-prop --group <groupId> or update-prop --group <groupId>
-
-## Build Verification
-IMPORTANT: After completing any task, always run `npx ikas-component build` (or `npm run build`)
-to check for TypeScript and build errors. Fix any errors before considering the task done.

package/templates/create/gitignore

@@ -1,6 +0,0 @@
-node_modules/
-dist/
-.DS_Store
-*.log
-.ikas-dev-state.json
-asd

package/templates/create/ikas.config.json

@@ -1,95 +0,0 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "version": "1.0.0",
-  "projectId": "{{PROJECT_ID}}",
-  "globalStyles": "./src/global.css",
-  "components": [
-    {
-      "id": "{{EXAMPLE_COMPONENT_ID}}",
-      "name": "Example Component",
-      "entry": "./src/components/ExampleComponent/index.tsx",
-      "styles": "./src/components/ExampleComponent/styles.css",
-      "props": [
-        {
-          "name": "title",
-          "displayName": "Title",
-          "type": "TEXT",
-          "required": true,
-          "defaultValue": "Hello World",
-          "description": "The main title text"
-        },
-        {
-          "name": "description",
-          "displayName": "Description",
-          "type": "TEXT",
-          "required": false,
-          "defaultValue": "This is an example ikas code component built with Preact.",
-          "description": "The description text below the title"
-        },
-        {
-          "name": "showButton",
-          "displayName": "Show Button",
-          "type": "BOOLEAN",
-          "required": false,
-          "defaultValue": true,
-          "description": "Whether to show the action button"
-        },
-        {
-          "name": "buttonText",
-          "displayName": "Button Text",
-          "type": "TEXT",
-          "required": false,
-          "defaultValue": "Click Me",
-          "description": "The text displayed on the button"
-        }
-      ]
-    },
-    {
-      "id": "{{EXAMPLE_SECTION_ID}}",
-      "name": "Example Section",
-      "entry": "./src/components/ExampleSection/index.tsx",
-      "styles": "./src/components/ExampleSection/styles.css",
-      "type": "section",
-      "props": [
-        {
-          "name": "heading",
-          "displayName": "Heading",
-          "type": "TEXT",
-          "required": true,
-          "defaultValue": "Welcome to Our Store",
-          "description": "The section heading text",
-          "groupId": "content"
-        },
-        {
-          "name": "subtitle",
-          "displayName": "Subtitle",
-          "type": "TEXT",
-          "required": false,
-          "defaultValue": "Discover our latest products and collections.",
-          "description": "The subtitle text below the heading",
-          "groupId": "content"
-        },
-        {
-          "name": "backgroundColor",
-          "displayName": "Background Color",
-          "type": "COLOR",
-          "required": false,
-          "description": "The section background color",
-          "groupId": "appearance"
-        }
-      ],
-      "propGroups": [
-        {
-          "id": "content",
-          "name": "Content",
-          "description": "Text and copy settings"
-        },
-        {
-          "id": "appearance",
-          "name": "Appearance",
-          "description": "Colors and visual style"
-        }
-      ]
-    }
-  ]
-}

package/templates/create/mcp.json

@@ -1,10 +0,0 @@
-{
-  "mcpServers": {
-    "ikas-code-components": {
-      "command": "npx",
-      "args": [
-        "ikas-mcp"
-      ]
-    }
-  }
-}

package/templates/create/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "{{PROJECT_NAME}}",
-  "version": "1.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "ikas-component dev",
-    "build": "ikas-component build",
-    "add": "ikas-component add",
-    "publish": "ikas-component publish"
-  },
-  "dependencies": {
-    "preact": "^10.19.3"
-  },
-  "devDependencies": {
-    "@ikas/component-cli": "*",
-    "@ikas/bp-storefront": "*",
-    "@ikas/code-components-mcp": "*",
-    "@preact/preset-vite": "^2.10.3",
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0"
-  }
-}

package/templates/create/src/components/ExampleComponent/index.tsx

@@ -1,22 +0,0 @@
-import { Props } from "./types";
-
-export function ExampleComponent({
-  title,
-  description = "This is an example ikas code component built with Preact.",
-  showButton,
-  buttonText = "Click Me",
-}: Props) {
-  return (
-    <div className="example-component">
-      <h1 className="example-title">{title}</h1>
-      <p className="example-description">{description}</p>
-      {showButton && (
-        <button className="example-button">
-          {buttonText}
-        </button>
-      )}
-    </div>
-  );
-}
-
-export default ExampleComponent;

package/templates/create/src/components/ExampleComponent/styles.css

@@ -1,36 +0,0 @@
-.example-component {
-  padding: 24px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  font-family: system-ui, -apple-system, sans-serif;
-}
-
-.example-title {
-  margin: 0 0 12px 0;
-  font-size: 28px;
-  font-weight: 700;
-}
-
-.example-description {
-  margin: 0 0 20px 0;
-  font-size: 16px;
-  opacity: 0.9;
-}
-
-.example-button {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 6px;
-  background: white;
-  color: #667eea;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.example-button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}

package/templates/create/src/components/ExampleComponent/types.ts

@@ -1,7 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  title: string;
-  description?: string;
-  showButton?: boolean;
-  buttonText?: string;
-}

package/templates/create/src/components/ExampleSection/index.tsx

@@ -1,14 +0,0 @@
-import { Props } from "./types";
-
-export function ExampleSection({ heading, subtitle, backgroundColor }: Props) {
-  return (
-    <section className="example-section" style={backgroundColor ? { backgroundColor } : undefined}>
-      <div className="example-section-inner">
-        <h2 className="example-section-heading">{heading}</h2>
-        {subtitle && <p className="example-section-subtitle">{subtitle}</p>}
-      </div>
-    </section>
-  );
-}
-
-export default ExampleSection;

package/templates/create/src/components/ExampleSection/styles.css

@@ -1,29 +0,0 @@
-.example-section {
-  width: 100%;
-  padding: 64px 24px;
-  background: #f8f9fa;
-}
-
-.example-section-inner {
-  max-width: 1200px;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.example-section-heading {
-  margin: 0 0 16px 0;
-  font-size: 36px;
-  font-weight: 700;
-  color: #1a1a2e;
-  font-family: system-ui, -apple-system, sans-serif;
-}
-
-.example-section-subtitle {
-  margin: 0;
-  font-size: 18px;
-  color: #6b7280;
-  font-family: system-ui, -apple-system, sans-serif;
-  max-width: 600px;
-  margin-left: auto;
-  margin-right: auto;
-}

package/templates/create/src/components/ExampleSection/types.ts

@@ -1,6 +0,0 @@
-// This file is auto-generated — do not edit manually.
-export interface Props {
-  heading: string;
-  subtitle?: string;
-  backgroundColor?: string;
-}

package/templates/create/src/components/index.ts

@@ -1,2 +0,0 @@
-export { ExampleComponent } from "./ExampleComponent/index";
-export { ExampleSection } from "./ExampleSection/index";