@onexapis/cli 1.1.34 → 1.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.34",
+  "version": "1.1.36",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/templates/default/CLAUDE.md

@@ -464,44 +464,36 @@ Without these, the editor cannot select sections/blocks for editing.
 
 34 built-in components from `@onexapis/core` that render inside sections via `ComponentRenderer`:
 
-| Component          | Description        | Key Settings                                                          |
-| ------------------ | ------------------ | --------------------------------------------------------------------- |
-| `heading`          | H1-H6 text         | text, tag, fontSize, fontWeight, colorToken, textAlign                |
-| `paragraph`        | Body text          | text, fontSize, color, lineHeight, textAlign                          |
-| `button`           | Clickable button   | text, url, target, variant (default/outline/ghost/link), size         |
-| `icon`             | Lucide icon        | iconName, size (xs-2xl), color, strokeWidth, rotation                 |
-| `badge`            | Label/tag          | text, variant (default/primary/success/warning/danger), size, rounded |
-| `image`            | Image display      | src, alt, width, height, objectFit, borderRadius, aspectRatio         |
-| `video`            | Video embed        | videoType (youtube/vimeo/hosted), videoUrl, autoplay, loop            |
-| `divider`          | Separator line     | color, width, style (solid/dashed/dotted)                             |
-| `quote`            | Block quote        | text, author, color, fontStyle                                        |
-| `alert`            | Alert box          | title, message, type (info/success/warning/error), dismissible        |
-| `progress`         | Progress bar       | value (0-100), label, color                                           |
-| `rating`           | Star rating        | value (1-5), readOnly, size                                           |
-| `social-links`     | Social media links | Reads from WebsiteSettings context                                    |
-| `hotline-contacts` | Contact info       | Reads from WebsiteSettings context                                    |
-| `company-info`     | Company details    | Reads from WebsiteSettings context                                    |
-| `product-card`     | Product display    | product (Product), showQuickAdd                                       |
-| `blog-card`        | Blog post card     | blog (Blog)                                                           |
+| Component | Description | Key Settings |
+| --------- | ----------- | ------------ |
+
+**Text:** `heading` (H1-H6), `paragraph`, `quote`
+**Interactive:** `button` (default/outline/ghost/link), `link`, `input`, `textarea`, `checkbox`, `select`
+**Media:** `image`, `video` (youtube/vimeo/hosted), `icon` (Lucide icons), `gallery`
+**Layout:** `divider`, `spacer`, `container`, `grid`, `columns`, `card`
+**Display:** `badge`, `alert`, `progress`, `rating`, `timer`, `list`, `table`, `accordion`, `tabs`, `code`, `map`
+**Special:** `product-card`, `blog-card`, `social-links`, `hotline-contacts`, `company-info`
+**Decorative:** `torn-separator`
+
+Use `onexthm://components` MCP resource for full details (content/style fields, slots, examples).
 
 Components are rendered via `ComponentRenderer` — you don't import them directly.
 
 ## Component Slots
 
-Components use `slot` to semantically identify their role in a section:
+Components use `slot` to identify their role:
 
 ```tsx
-// In section component
 const titleComp = components.find((c) => c.slot === "section-title");
 const ctaButton = components.find((c) => c.slot === "cta-button");
-const subtitle = components.find((c) => c.slot === "description");
 ```
 
-Common slot names: `section-title`, `section-subtitle`, `description`, `cta-button`, `secondary-cta`, `badge`, `icon`, `image`
+Common slots: `section-title`, `section-subtitle`, `description`, `cta-button`, `secondary-cta`, `badge`, `icon`, `image`, `block-title`, `block-description`, `feature-icon`
 
 ## Block System
 
-Blocks are nested containers inside sections. They can contain components AND other blocks (recursive):
+Blocks are nested containers inside sections. They hold components and can nest other blocks.
+Use `onexthm://blocks` MCP resource for full block patterns (features, testimonials, pricing, FAQ, team).
 
 ```tsx
 // Section → Blocks → Components
@@ -521,6 +513,68 @@ Blocks are nested containers inside sections. They can contain components AND ot
 
 Use `BlockRenderer` to render blocks — it handles recursive nesting automatically.
 
+### Defining Blocks in Schema
+
+```tsx
+// In your-section.schema.ts
+export const mySchema: SectionSchema = {
+  type: "features",
+  // ...settings, defaults...
+  blocks: [
+    {
+      type: "feature-item",
+      name: "Feature Item",
+      limit: 6, // Max 6 blocks of this type
+      settings: [
+        {
+          id: "backgroundColor",
+          type: "color",
+          label: "Background",
+          default: "#FFFFFF",
+        },
+      ],
+      components: [
+        { type: "icon", slot: "feature-icon", label: "Icon" },
+        { type: "heading", slot: "block-title", label: "Title" },
+        { type: "paragraph", slot: "block-description", label: "Description" },
+      ],
+    },
+  ],
+};
+```
+
+### Rendering Blocks
+
+```tsx
+const blocks = (section.blocks || []).filter((b) => b.enabled !== false);
+
+{
+  blocks.map((block) => (
+    <div
+      key={block.id}
+      data-section-id={section.id} // REQUIRED
+      data-block-id={block.id} // REQUIRED
+      data-block-type={block.type} // REQUIRED
+      className="p-6 rounded-xl border"
+    >
+      <BlockRenderer
+        block={block}
+        sectionId={section.id}
+        isEditing={isEditing}
+      />
+    </div>
+  ));
+}
+
+{
+  blocks.length === 0 && isEditing && (
+    <div className="text-center py-12 border-2 border-dashed border-gray-300 rounded-lg">
+      <p className="text-gray-500">Add blocks to populate this section</p>
+    </div>
+  );
+}
+```
+
 ## Animation System
 
 Sections, blocks, and components support animations via framer-motion: