@ikas/code-components-mcp 1.4.0-beta.197 → 1.4.0-beta.199

package/data/framework.json

@@ -4,7 +4,7 @@
     "project-structure": {
       "title": "Project Structure",
       "description": "How an ikas code components project is organized",
-      "content": "An ikas code components project follows this structure:\n\n```\nmy-project/\n├── src/\n│   ├── global.css              # Optional: project-wide unscoped CSS (variables, resets)\n│   └── components/\n│       ├── MyComponent/\n│       │   ├── index.tsx      # Component implementation (Preact)\n│       │   ├── types.ts       # TypeScript props interface\n│       │   └── styles.css     # Scoped component styles\n│       └── index.ts           # Component exports barrel\n├── ikas.config.json           # Component definitions, props, metadata\n├── package.json\n├── tsconfig.json\n└── vite.config.ts\n```\n\nEach component lives in its own directory under `src/components/`. The component's entry point is `index.tsx`, which exports a default Preact function component. The `types.ts` file defines the props interface matching the props declared in `ikas.config.json`. The `styles.css` file contains CSS that is automatically scoped to the component.\n\n### Project with Sub-Components\n\nWhen components grow complex, extract sub-components into `src/sub-components/`. See `get_framework_guide(\"sub-component-patterns\")` for full details.\n\n```\nmy-project/\n├── src/\n│   ├── components/\n│   │   ├── ProductList/\n│   │   │   ├── index.tsx         # Imports from ../../sub-components/...\n│   │   │   ├── types.ts          # Auto-generated (CLI-managed)\n│   │   │   └── styles.css        # component styles (sub-component styles.css collected automatically)\n│   │   └── index.ts\n│   └── sub-components/\n│       ├── ProductCard/\n│       │   ├── index.tsx          # Sub-component with inline Props\n│       │   └── styles.css         # Sub-component styles\n│       └── FilterSidebar/\n│           ├── index.tsx\n│           └── styles.css\n├── ikas.config.json\n├── package.json\n├── tsconfig.json\n└── vite.config.ts\n```\n\n**Key:** `src/components/` = registered components (in ikas.config.json). `src/sub-components/` = internal helpers (NOT in ikas.config.json).",
+      "content": "An ikas code components project follows this structure:\n\n```\nmy-project/\n├── src/\n│   ├── global.css              # Optional: project-wide CSS, scoped to this project (variables, fonts, resets)\n│   └── components/\n│       ├── MyComponent/\n│       │   ├── index.tsx      # Component implementation (Preact)\n│       │   ├── types.ts       # TypeScript props interface\n│       │   └── styles.css     # Scoped component styles\n│       └── index.ts           # Component exports barrel\n├── ikas.config.json           # Component definitions, props, metadata\n├── package.json\n├── tsconfig.json\n└── vite.config.ts\n```\n\nEach component lives in its own directory under `src/components/`. The component's entry point is `index.tsx`, which exports a default Preact function component. The `types.ts` file defines the props interface matching the props declared in `ikas.config.json`. The `styles.css` file contains CSS that is automatically scoped to the component.\n\n### Project with Sub-Components\n\nWhen components grow complex, extract sub-components into `src/sub-components/`. See `get_framework_guide(\"sub-component-patterns\")` for full details.\n\n```\nmy-project/\n├── src/\n│   ├── components/\n│   │   ├── ProductList/\n│   │   │   ├── index.tsx         # Imports from ../../sub-components/...\n│   │   │   ├── types.ts          # Auto-generated (CLI-managed)\n│   │   │   └── styles.css        # component styles (sub-component styles.css collected automatically)\n│   │   └── index.ts\n│   └── sub-components/\n│       ├── ProductCard/\n│       │   ├── index.tsx          # Sub-component with inline Props\n│       │   └── styles.css         # Sub-component styles\n│       └── FilterSidebar/\n│           ├── index.tsx\n│           └── styles.css\n├── ikas.config.json\n├── package.json\n├── tsconfig.json\n└── vite.config.ts\n```\n\n**Key:** `src/components/` = registered components (in ikas.config.json). `src/sub-components/` = internal helpers (NOT in ikas.config.json).",
       "tags": [
         "structure",
         "project",
@@ -114,13 +114,13 @@
     "css-scoping": {
       "title": "CSS Scoping Rules",
       "description": "How CSS is scoped to prevent conflicts between components",
-      "content": "CSS files referenced in `ikas.config.json` are automatically scoped at build time.\n\n### How it works:\n- Each component's CSS selectors are prefixed with a unique scope identifier\n- `.my-class` becomes `.[scope]-my-class` in the output\n- This prevents style conflicts between different components on the same page\n\n### Best practices:\n- Use class selectors (`.my-class`) rather than element selectors (`div`, `h1`)\n- Avoid using `!important` - scoping handles isolation\n- Don't use global selectors or `@global` - they won't be scoped\n- Keep CSS in the component's `styles.css` file referenced in config, or in a sub-component's sibling `styles.css` — both are collected and scoped automatically on `dev`/`publish`\n- Nested selectors work: `.parent .child` both get scoped\n\n### Example:\n```css\n/* What you write */\n.product-card {\n  padding: 16px;\n  border: 1px solid #eee;\n}\n\n.product-card .title {\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.product-card .price {\n  color: #e53e3e;\n}\n```\n\nThe build system transforms this so your `.product-card`, `.title`, and `.price` classes are unique to your component and won't clash with any other component or theme styles.\n\n### Global CSS Exception\n\nThe one intentional exception to scoping is **Global CSS** — project-wide styles defined in `src/global.css` that are loaded unscoped before any component CSS. Global CSS is ideal for CSS custom properties (variables), resets, and shared utility classes. The loading order is: **Global CSS → Shared chunk CSS → Component CSS**, so global styles have the lowest specificity and component styles always win.\n\nSee `get_framework_guide(\"global-css\")` for full details on global CSS setup and usage.",
+      "content": "CSS files referenced in `ikas.config.json` are automatically scoped at build time.\n\n### How it works:\n- Each component's CSS selectors are prefixed with a unique scope identifier\n- `.my-class` becomes `.[scope]-my-class` in the output\n- This prevents style conflicts between different components on the same page\n\n### Best practices:\n- Use class selectors (`.my-class`) rather than element selectors (`div`, `h1`)\n- Avoid using `!important` - scoping handles isolation\n- Don't use global selectors or `@global` - they won't be scoped\n- Keep CSS in the component's `styles.css` file referenced in config, or in a sub-component's sibling `styles.css` — both are collected and scoped automatically on `dev`/`publish`\n- Nested selectors work: `.parent .child` both get scoped\n\n### Example:\n```css\n/* What you write */\n.product-card {\n  padding: 16px;\n  border: 1px solid #eee;\n}\n\n.product-card .title {\n  font-size: 18px;\n  font-weight: bold;\n}\n\n.product-card .price {\n  color: #e53e3e;\n}\n```\n\nThe build system transforms this so your `.product-card`, `.title`, and `.price` classes are unique to your component and won't clash with any other component or theme styles.\n\n### Global CSS Exception\n\nThe one intentional exception to component scoping is **Global CSS** — project-wide styles defined in `src/global.css`. It gets no `.cc_{componentId}` prefix, but it is still isolated to your project: every rule is wrapped in `:where([data-cc-scope~=\"<projectId>\"])`, and `@font-face` / `@keyframes` / `@counter-style` names declared there are prefixed with `cc_<projectId>_` (references in component CSS are rewritten to match automatically). Global CSS is ideal for CSS custom properties (variables), fonts, resets, and shared utility classes. The loading order is: **Global CSS → Shared chunk CSS → Component CSS**, so global styles have the lowest specificity and component styles always win.\n\nSee `get_framework_guide(\"global-css\")` for full details on global CSS setup and usage.",
       "tags": ["css", "scoping", "styles", "isolation", "classes", "global"]
     },
     "global-css": {
       "title": "Global CSS",
-      "description": "Project-wide unscoped CSS for variables, resets, and shared utilities",
-      "content": "## Global CSS\n\nGlobal CSS lets you define project-wide styles that are shared across all components — without scoping. This is ideal for:\n\n- **CSS custom properties (variables)** — colors, spacing, typography tokens\n- **CSS resets** — normalize/reset base styles\n- **Base typography** — font-family, line-height defaults\n- **Utility classes** — common layout helpers\n\n### Setup\n\n1. Create a `src/global.css` file in your project root:\n\n```css\n/* src/global.css */\n:root {\n  --color-primary: #2563eb;\n  --color-secondary: #7c3aed;\n  --color-text: #1f2937;\n  --color-text-muted: #6b7280;\n  --color-border: #e5e7eb;\n  --color-background: #ffffff;\n\n  --spacing-xs: 4px;\n  --spacing-sm: 8px;\n  --spacing-md: 16px;\n  --spacing-lg: 24px;\n  --spacing-xl: 48px;\n\n  --font-sans: system-ui, -apple-system, sans-serif;\n  --font-mono: ui-monospace, monospace;\n\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 16px;\n}\n```\n\n2. Add the `globalStyles` field to `ikas.config.json`:\n\n```json\n{\n  \"name\": \"my-project\",\n  \"version\": \"1.0.0\",\n  \"globalStyles\": \"./src/global.css\",\n  \"components\": [...]\n}\n```\n\n### Using Global CSS Variables in Components\n\nOnce defined in `global.css`, CSS custom properties are available in any component's `styles.css`:\n\n```css\n/* src/components/ProductCard/styles.css */\n.product-card {\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-md);\n  font-family: var(--font-sans);\n}\n\n.product-card .title {\n  color: var(--color-text);\n}\n\n.product-card .price {\n  color: var(--color-primary);\n}\n```\n\n### Loading Order\n\nCSS is loaded in this order, from lowest to highest specificity:\n\n1. **Global CSS** (`global.css`) — unscoped, loaded first\n2. **Shared chunk CSS** — scoped styles from shared internal components (their sibling `styles.css` files, collected automatically)\n3. **Component CSS** (`styles.css`) — scoped per-component styles\n\nBecause global CSS loads first and is unscoped, component-scoped styles will always override global styles when selectors conflict. This means you can safely define base defaults in `global.css` and override them in component `styles.css` files.\n\n### Key Differences from Component CSS\n\n| | Global CSS | Component CSS |\n|---|---|---|\n| **File** | `src/global.css` | `src/components/X/styles.css` |\n| **Scoping** | NOT scoped (no `.cc_` prefix) | Scoped with `.cc_{componentId}` prefix |\n| **Config** | `globalStyles` in ikas.config.json | `styles` on each component |\n| **Purpose** | CSS variables, resets, utilities | Component-specific styles |\n| **Load order** | First (lowest specificity) | Last (highest specificity) |\n\n### Best Practices\n\n- **Use CSS custom properties** for design tokens (colors, spacing, fonts) — they cascade naturally and components can reference them\n- **Keep global CSS minimal** — only put truly shared values here. Component-specific styles belong in the component's `styles.css`\n- **Avoid class selectors in global CSS** that target component internals — use custom properties instead for themeable values\n- **Don't duplicate** — if a style only applies to one component, put it in that component's `styles.css`\n\n### Project Structure with Global CSS\n\n```\nmy-project/\n├── src/\n│   ├── global.css              # Project-wide unscoped CSS\n│   └── components/\n│       ├── ProductCard/\n│       │   ├── index.tsx\n│       │   ├── types.ts\n│       │   └── styles.css      # Uses var(--color-primary) etc.\n│       └── index.ts\n├── ikas.config.json            # Has globalStyles: \"./src/global.css\"\n├── package.json\n└── tsconfig.json\n```\n\nSee `get_framework_guide(\"css-scoping\")` for details on how component CSS scoping works.",
+      "description": "Project-wide CSS (scoped to your project) for variables, fonts, resets, and shared utilities",
+      "content": "## Global CSS\n\nGlobal CSS lets you define project-wide styles that are shared across all components of your project. It is isolated per project at build time (every rule is wrapped in `:where([data-cc-scope~=\"<projectId>\"])`), but not per component. This is ideal for:\n\n- **CSS custom properties (variables)** — colors, spacing, typography tokens\n- **CSS resets** — normalize/reset base styles\n- **Base typography** — font-family, line-height defaults\n- **Utility classes** — common layout helpers\n\n### Setup\n\n1. Create a `src/global.css` file in your project root:\n\n```css\n/* src/global.css */\n:root {\n  --color-primary: #2563eb;\n  --color-secondary: #7c3aed;\n  --color-text: #1f2937;\n  --color-text-muted: #6b7280;\n  --color-border: #e5e7eb;\n  --color-background: #ffffff;\n\n  --spacing-xs: 4px;\n  --spacing-sm: 8px;\n  --spacing-md: 16px;\n  --spacing-lg: 24px;\n  --spacing-xl: 48px;\n\n  --font-sans: system-ui, -apple-system, sans-serif;\n  --font-mono: ui-monospace, monospace;\n\n  --radius-sm: 4px;\n  --radius-md: 8px;\n  --radius-lg: 16px;\n}\n```\n\n2. Add the `globalStyles` field to `ikas.config.json`:\n\n```json\n{\n  \"name\": \"my-project\",\n  \"version\": \"1.0.0\",\n  \"globalStyles\": \"./src/global.css\",\n  \"components\": [...]\n}\n```\n\n### Using Global CSS Variables in Components\n\nOnce defined in `global.css`, CSS custom properties are available in any component's `styles.css`:\n\n```css\n/* src/components/ProductCard/styles.css */\n.product-card {\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  padding: var(--spacing-md);\n  font-family: var(--font-sans);\n}\n\n.product-card .title {\n  color: var(--color-text);\n}\n\n.product-card .price {\n  color: var(--color-primary);\n}\n```\n\n### Fonts, Keyframes and Counter Styles\n\n`@font-face`, `@keyframes` and `@counter-style` names live in a document-global namespace, so the build (editor preview and publish alike) prefixes every name declared in `global.css` with `cc_<projectId>_` — `\"Tanker\"` becomes `\"cc_<projectId>_Tanker\"`. You keep writing the plain name; references are rewritten to match automatically in:\n\n- component and shared-chunk CSS: `font`, `font-family`, `animation`, `animation-name`, `list-style`, `list-style-type`, `counter()` / `counters()`\n- CSS custom properties, for **font names only**: `--font-display: \"Tanker\", serif` is rewritten, so `font-family: var(--font-display)` works\n\n```css\n/* src/global.css */\n@font-face {\n  font-family: \"Tanker\";\n  /* absolute URL — local font files are not shipped with the project */\n  src: url(\"https://cdn.example.com/tanker.woff2\") format(\"woff2\");\n  font-display: swap;\n}\n\n:root {\n  --font-display: \"Tanker\", Georgia, serif;\n}\n```\n\n```css\n/* src/components/Hero/styles.css */\n.hero-headline {\n  font-family: var(--font-display); /* or: font-family: \"Tanker\", Georgia, serif; */\n}\n```\n\nNot rewritten — avoid these for names declared in `global.css`:\n\n- inline JS styles (`style={{ fontFamily: \"Tanker\" }}`) — use a class instead\n- keyframe / counter-style names inside custom properties (`--anim: fade`) — reference them from `animation` / `list-style` declarations directly\n- top-level `body { }` / `html { }` rules — they are dropped; style the elements you render (`.hero`, `img`, `[data-x]`)\n\nFonts that come from an external stylesheet (`@import url(\"https://fonts.googleapis.com/...\")` as the first rule of `global.css`) or from the theme's typography tokens (see `get_framework_guide(\"theme-globals\")`) keep their original names and need no rewriting.\n\n### Loading Order\n\nCSS is loaded in this order, from lowest to highest specificity:\n\n1. **Global CSS** (`global.css`) — project-scoped, loaded first\n2. **Shared chunk CSS** — scoped styles from shared internal components (their sibling `styles.css` files, collected automatically)\n3. **Component CSS** (`styles.css`) — scoped per-component styles\n\nBecause global CSS loads first and has the lowest specificity, component-scoped styles will always override global styles when selectors conflict. This means you can safely define base defaults in `global.css` and override them in component `styles.css` files.\n\n### Key Differences from Component CSS\n\n| | Global CSS | Component CSS |\n|---|---|---|\n| **File** | `src/global.css` | `src/components/X/styles.css` |\n| **Scoping** | Scoped per project (`[data-cc-scope]`); no `.cc_{componentId}` prefix | Scoped with `.cc_{componentId}` prefix |\n| **Config** | `globalStyles` in ikas.config.json | `styles` on each component |\n| **Purpose** | CSS variables, resets, utilities | Component-specific styles |\n| **Load order** | First (lowest specificity) | Last (highest specificity) |\n\n### Best Practices\n\n- **Use CSS custom properties** for design tokens (colors, spacing, fonts) — they cascade naturally and components can reference them (font names declared with `@font-face` in `global.css` are rewritten inside custom properties too — see \"Fonts, Keyframes and Counter Styles\")\n- **Keep global CSS minimal** — only put truly shared values here. Component-specific styles belong in the component's `styles.css`\n- **Avoid class selectors in global CSS** that target component internals — use custom properties instead for themeable values\n- **Don't duplicate** — if a style only applies to one component, put it in that component's `styles.css`\n\n### Project Structure with Global CSS\n\n```\nmy-project/\n├── src/\n│   ├── global.css              # Project-wide CSS (scoped to the project)\n│   └── components/\n│       ├── ProductCard/\n│       │   ├── index.tsx\n│       │   ├── types.ts\n│       │   └── styles.css      # Uses var(--color-primary) etc.\n│       └── index.ts\n├── ikas.config.json            # Has globalStyles: \"./src/global.css\"\n├── package.json\n└── tsconfig.json\n```\n\nSee `get_framework_guide(\"css-scoping\")` for details on how component CSS scoping works.",
       "tags": [
         "css",
         "global",
@@ -129,7 +129,11 @@
         "reset",
         "utilities",
         "global.css",
-        "globalStyles"
+        "globalStyles",
+        "font-face",
+        "fonts",
+        "keyframes",
+        "counter-style"
       ]
     },
     "dev-server": {

package/data/storefront-api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-28T14:44:18.573Z",
+  "generatedAt": "2026-09-29T09:46:50.728Z",
   "functions": [
     {
       "name": "apiListProductBrand",
@@ -43,6 +43,20 @@
         "IkasStorefrontWidgetSettings"
       ]
     },
+    {
+      "name": "apiGetLoyaltyProgram",
+      "signature": "async function apiGetLoyaltyProgram(): Promise<APIResponse<IkasLoyaltyProgram>>",
+      "description": "",
+      "params": [],
+      "returnType": "Promise<APIResponse<IkasLoyaltyProgram>>",
+      "categories": [],
+      "related": [],
+      "isAsync": true,
+      "isClass": false,
+      "parameterTypes": [
+        "IkasLoyaltyProgram"
+      ]
+    },
     {
       "name": "apiListEarningMethods",
       "signature": "async function apiListEarningMethods(): Promise<APIResponse<IkasLoyaltyProgramEarningMethod[]>>",

package/data/storefront-types.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-09-28T14:44:18.598Z",
+  "generatedAt": "2026-09-29T09:46:50.761Z",
   "types": [
     {
       "name": "TextElementTagTypes",
@@ -5083,11 +5083,21 @@
       "kind": "type",
       "domain": "loyalty-program",
       "properties": [
+        {
+          "name": "availablePoint",
+          "type": "number",
+          "optional": false
+        },
         {
           "name": "cartLoyaltyLines",
           "type": "IkasCartLoyaltyLine[] | null",
           "optional": false
         },
+        {
+          "name": "cumulativeEarnedPoints",
+          "type": "number",
+          "optional": false
+        },
         {
           "name": "customerTier",
           "type": "IkasLoyaltyProgramTier | null",
@@ -5224,6 +5234,11 @@
           "name": "validityPeriod",
           "type": "LoyaltyProgramPeriod | null",
           "optional": false
+        },
+        {
+          "name": "waitingPeriodDays",
+          "type": "number | null",
+          "optional": false
         }
       ],
       "filePath": "loyalty-program/earning-method/index.ts",
@@ -5357,9 +5372,17 @@
           "name": "validityPeriod",
           "type": "LoyaltyProgramPeriod | null",
           "optional": false
+        },
+        {
+          "name": "waitingPeriodDays",
+          "type": "number | null",
+          "optional": false
         }
       ],
-      "filePath": "loyalty-program/index.ts"
+      "filePath": "loyalty-program/index.ts",
+      "relatedFunctions": [
+        "apiGetLoyaltyProgram"
+      ]
     },
     {
       "name": "IkasLoyaltyProgramPointHistory",
@@ -5371,6 +5394,11 @@
           "type": "number",
           "optional": false
         },
+        {
+          "name": "availableDate",
+          "type": "any | null",
+          "optional": false
+        },
         {
           "name": "createdAt",
           "type": "any | null",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/code-components-mcp",
-  "version": "1.4.0-beta.197",
+  "version": "1.4.0-beta.199",
   "description": "MCP server for ikas code components documentation",
   "type": "module",
   "main": "dist/index.js",