@cxtms/cx-schema 1.3.2 → 1.4.0

package/.claude/skills/cx-module/SKILL.md

@@ -156,7 +156,7 @@ Read the relevant category ref file when building specific component types:
 
 | Category | Components | File |
 |----------|-----------|------|
-| **Layout & Structure** | `layout`, `row`, `col`, `header`, `tabs`, `toolbar`, `card`, `line` | `.claude/skills/cx-module/ref-components-layout.md` |
+| **Layout & Structure** | `layout`, `row`, `col`, `header`, `tabs`, `toolbar`, `card`, `line`, `slot` | `.claude/skills/cx-module/ref-components-layout.md` |
 | **Forms & Input** | `form`, `field`, `field-collection`, `barcodeScanner` | `.claude/skills/cx-module/ref-components-forms.md` |
 | **Data Display** | `dataGrid`, `text`, `markup`, `badge`, `icon`, `image`, `photo`, `summary`, `diff`, `viewer`, `embed` | `.claude/skills/cx-module/ref-components-display.md` |
 | **Interactive & Nav** | `button`, `dropdown`, `menuButton`, `link`, `redirect`, `navbar`, `navbarItem`, `navbarLink`, `navDropdown` | `.claude/skills/cx-module/ref-components-interactive.md` |
@@ -179,7 +179,7 @@ Read the relevant template after scaffolding to understand the generated structu
 
 Read schema files from `.cx-schema/` only when debugging validation errors:
 - `schemas.json` — main schema definitions
-- `components/<type>.json` — component schemas (layout, form, dataGrid, field, button, tabs, card, calendar, collection, appComponent, module)
+- `components/<type>.json` — component schemas (layout, form, dataGrid, field, button, tabs, card, calendar, collection, appComponent, slot, module)
 - `fields/<type>.json` — field schemas (text, select, select-async)
 - `actions/<type>.json` — action schemas (navigate, mutation, dialog, all)
 

package/.claude/skills/cx-module/ref-components-layout.md

@@ -293,3 +293,46 @@ props:
   options:
     style: { margin: "1rem 0" }
 ```
+
+---
+
+## slot
+
+Extension point that renders UI elements injected by other modules (via `appComponent` with `targetSlot`). Slots render extensions from the database — they have no YAML `children`.
+
+**Props:**
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `name` | `string` | Yes | Slot name to match against. Extension components target this name via `targetSlot`. Supports template expressions. |
+| `itemTag` | `string` | No | HTML element type to wrap each extension (e.g., `li`, `div`) |
+
+**Children:** No — slots render extension components registered in the database, not YAML children.
+
+**Naming convention:** Use `Module/Entity/Location` pattern for slot names to avoid collisions (e.g., `Orders/Detail/Sidebar`, `Contacts/Form/Actions`).
+
+```yaml
+# Basic slot — extension point in a layout
+component: slot
+name: sidebarSlot
+props:
+  name: "Orders/Detail/Sidebar"
+```
+
+```yaml
+# Dynamic slot name using template expression
+component: slot
+name: entitySlot
+props:
+  name: "{{ eval `Orders/${entityType}/Actions` }}"
+```
+
+```yaml
+# Slot with itemTag for list-style extensions
+component: slot
+name: menuSlot
+props:
+  name: "Navigation/MainMenu/Items"
+  itemTag: li
+```
+
+**How extensions target slots:** Other modules register extension components using `appComponent` with `targetSlot` and optional `order` to control rendering position within the slot. See `appComponent.json` schema for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cxtms/cx-schema",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Schema validation package for CargoXplorer YAML modules",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/schemas/components/index.json

@@ -63,6 +63,9 @@
     },
     "module": {
       "$ref": "module.json"
+    },
+    "slot": {
+      "$ref": "slot.json"
     }
   }
 }

package/schemas/components/slot.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "Slot Component",
+  "type": "object",
+  "properties": {
+    "component": {
+      "type": "string",
+      "const": "slot"
+    },
+    "name": {
+      "type": "string",
+      "description": "Component instance name"
+    },
+    "props": {
+      "type": "object",
+      "properties": {
+        "name": {
+          "type": "string",
+          "description": "Slot name to match against (supports template expressions)"
+        },
+        "itemTag": {
+          "type": "string",
+          "description": "HTML element type to wrap each extension (e.g., li, div)"
+        }
+      },
+      "required": ["name"]
+    }
+  },
+  "required": ["component", "props"]
+}