@ikas/component-cli 0.130.0 → 0.132.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/component-cli",
-  "version": "0.130.0",
+  "version": "0.132.0",
   "description": "CLI for developing ikas code components",
   "type": "module",
   "main": "./dist/index.js",

package/templates/create/claude-md

@@ -8,9 +8,9 @@ Never guess function signatures or type shapes — the MCP server is the source
 
 ## 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.
+**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.
 
@@ -92,7 +92,7 @@ src/
 │   ├── ProductList/
 │   │   ├── index.tsx         # imports from ../../sub-components/...
 │   │   ├── types.ts          # auto-generated (CLI-managed)
-│   │   └── styles.css        # @import "../../sub-components/.../styles.css"
+│   │   └── styles.css
 │   └── index.ts
 ├── sub-components/
 │   ├── ProductCard/
@@ -109,7 +109,6 @@ src/
 - `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";`
-- CSS: use `@import "../../sub-components/ProductCard/styles.css";` in parent styles.css
 - 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

package/templates/create-full/claude-md

@@ -10,9 +10,9 @@ Never guess function signatures or type shapes — the MCP server is the source
 
 ## CRITICAL: Auto-Generated Files
 
-**NEVER manually create or edit `types.ts`** — it is 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 BOTH `ikas.config.json` AND `types.ts` automatically.
+**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.
 
@@ -96,7 +96,7 @@ src/
 │   ├── ProductList/
 │   │   ├── index.tsx         # imports from ../../sub-components/...
 │   │   ├── types.ts          # auto-generated (CLI-managed)
-│   │   └── styles.css        # @import "../../sub-components/.../styles.css"
+│   │   └── styles.css
 │   └── index.ts
 └── sub-components/
     ├── ProductCard/
@@ -111,7 +111,6 @@ src/
 
 - `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`
-- CSS: use `@import "../../sub-components/ProductCard/styles.css";` in parent styles.css
 - TSX: use `import ProductCard from "../../sub-components/ProductCard";`
 - Sub-components that read MobX stores need `observer()`, others don't
 - Sub-components can be shared across multiple parent sections
@@ -185,7 +184,6 @@ The `.kombos-icon` base class uses `width: 1em; height: 1em` so icons scale with
 
 **CRITICAL: Never write custom button styles in components.** All buttons MUST use `src/sub-components/Button`.
 Import: `import Button from "../../sub-components/Button";`
-CSS import: `@import "../../sub-components/Button/styles.css";` in parent styles.css
 
 ### Variants
 
@@ -226,7 +224,6 @@ When placed in flex containers, add a layout class (e.g. `className="my-section_
 
 **CRITICAL: Never write custom input styles in components.** All text inputs MUST use `src/sub-components/Input`.
 Import: `import Input from "../../sub-components/Input";`
-CSS import: `@import "../../sub-components/Input/styles.css";` in parent styles.css
 
 Input is a pure input field — no label, no helper text. Wrap with `FormItem` for labels and validation messages.
 
@@ -267,7 +264,6 @@ import Input from "../../sub-components/Input";
 
 Wraps form controls (Input, select, etc.) with a label and helper/error text.
 Import: `import FormItem from "../../sub-components/FormItem";`
-CSS import: `@import "../../sub-components/FormItem/styles.css";` in parent styles.css
 
 ### Props
 
@@ -416,6 +412,25 @@ const CartBadge = observer(function CartBadge() {
 });
 ```
 
+```tsx
+// ALSO wrap EXTRACTED HELPER COMPONENTS declared inside a component file —
+// especially list items rendered via .map() that read/write MobX state
+// (e.g., offer.isSelected, option.values). Without observer(), the helper
+// won't re-render when the observable changes.
+const OfferCard = observer(function OfferCard({ offer }) {
+  const isSelected = offer.isSelected;
+  return <div>{isSelected ? "ON" : "OFF"}</div>;
+});
+
+export function MySection({ product }: Props) {
+  return product.offers.map((offer) => (
+    <OfferCard key={offer.id} offer={offer} />
+  ));
+}
+```
+
+**Rule of thumb:** if a non-root component reads or writes MobX observables (store fields, `offer.isSelected`, `option.values`, etc.), wrap it with `observer()`. Without it, MobX mutations won't trigger re-renders.
+
 ### Null Safety
 
 ```tsx

package/templates/create-full/cursorrules

@@ -69,7 +69,6 @@ These commands update BOTH `ikas.config.json` AND `types.ts` automatically.
 **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`
-- CSS: `@import "../../sub-components/ProductCard/styles.css";` in parent styles.css
 - TSX: `import ProductCard from "../../sub-components/ProductCard";`
 - Sub-components that read MobX stores need `observer()`, others don't
 - Sub-components can be shared across multiple parent sections