@onexapis/cli 1.1.22 → 1.1.25

package/dist/preview/preview-app.tsx

@@ -13,6 +13,7 @@ import * as coreContexts from "@onexapis/core/contexts";
 import * as coreComponents from "@onexapis/core/components";
 import * as coreRegistry from "@onexapis/core/registry";
 import * as coreCommerce from "@onexapis/core/commerce";
+import * as coreHooks from "@onexapis/core/hooks";
 import * as coreCommerceHooks from "@onexapis/core/commerce/hooks";
 import * as coreAuth from "@onexapis/core/auth";
 import * as coreCart from "@onexapis/core/cart";
@@ -44,6 +45,7 @@ import { LocaleProvider } from "@onexapis/core/contexts";
   ...coreComponents,
   ...coreRegistry,
   ...coreCommerce,
+  ...coreHooks,
   ...coreCommerceHooks,
   ...coreAuth,
   ...coreCart,
@@ -59,6 +61,7 @@ import { LocaleProvider } from "@onexapis/core/contexts";
   components: coreComponents,
   registry: coreRegistry,
   commerce: coreCommerce,
+  hooks: coreHooks,
   "commerce/hooks": coreCommerceHooks,
   auth: coreAuth,
   cart: coreCart,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.22",
+  "version": "1.1.25",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,7 +20,8 @@
     "dev": "tsup --watch",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts",
-    "prepublishOnly": "pnpm run type-check && pnpm run build"
+    "prepublishOnly": "pnpm run type-check && pnpm run build",
+    "release": "npm version patch --no-git-tag-version && node -e \"const p=require('./package.json');const fs=require('fs');const cv=require('../core/package.json').version;p.dependencies['@onexapis/core']='^'+cv;fs.writeFileSync('package.json',JSON.stringify(p,null,2)+'\\n')\" && npm publish --access public && node -e \"const p=require('./package.json');const fs=require('fs');p.dependencies['@onexapis/core']='workspace:*';fs.writeFileSync('package.json',JSON.stringify(p,null,2)+'\\n')\""
   },
   "keywords": [
     "onex",
@@ -49,7 +50,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.470.0",
-    "@onexapis/core": "^1.0.2",
+    "@onexapis/core": "workspace:*",
     "@tanstack/react-query": "^5.90.16",
     "adm-zip": "^0.5.16",
     "archiver": "^7.0.1",

package/templates/default/.mcp.json

@@ -2,7 +2,11 @@
   "mcpServers": {
     "onexthm": {
       "command": "npx",
-      "args": ["@onexapis/theme-mcp"]
+      "args": ["-y", "@onexapis/theme-mcp"]
+    },
+    "figma": {
+      "command": "npx",
+      "args": ["-y", "figma-developer-mcp", "--figma-api-key=__FIGMA_API_KEY__", "--stdio"]
     }
   }
 }

package/templates/default/CLAUDE.md

@@ -911,16 +911,48 @@ export default ProductGrid;
 
 ## MCP Servers
 
-This project has TWO separate MCP servers. Do NOT confuse them:
+This project has THREE MCP servers. Do NOT confuse them:
 
 ### `onexthm` MCP (Theme Development) — USE THIS
 
 Registered in `.mcp.json` in this project. Provides theme-specific tools:
 
-- `onexthm_create_section` — Generate section files (component + schema + index)
-- `onexthm_validate` — Validate theme structure
-- `onexthm_list_hooks` — List available hooks with examples
-- `onexthm_generate_schema` — Generate schema from natural language
+- `onexthm_create_section` — Generate section files (component + schema + index) from structured input
+- `onexthm_validate` — Validate theme structure (7 checks: entry file, config, sections, blocks, code quality, registry)
+- `onexthm_list_hooks` — List available hooks with usage examples
+- `onexthm_generate_schema` — Generate schema from natural language description
+- `onexthm_from_figma` — **Convert Figma design to OneX section** (see Figma Integration below)
+
+Resources (auto-loaded context):
+- `onexthm://rules` — Theme development rules (DOs/DON'Ts)
+- `onexthm://field-types` — All available field types and categories
+- `onexthm://hooks` — Hooks reference with examples
+
+Prompts (guided workflows):
+- `create_section` — Guided section creation workflow
+- `review_theme` — Review theme for issues
+- `figma_to_section` — Full Figma-to-OneX conversion pipeline
+
+### `figma` MCP (Figma Design) — USE WITH `onexthm`
+
+Registered in `.mcp.json`. Reads Figma designs for design-to-code conversion:
+
+- `get_metadata` — Layer hierarchy (IDs, names, types, positions, sizes)
+- `get_design_context` — React + Tailwind code suggestion for selected layers
+- `get_variable_defs` — Design tokens (colors, typography, spacing variables)
+- `get_screenshot` — Visual screenshot of selected elements
+- `search_design_system` — Search components, variables, styles from libraries
+
+**Setup**: Requires Figma API key in `.mcp.json`:
+```json
+{
+  "figma": {
+    "command": "npx",
+    "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
+  }
+}
+```
+Get your key: Figma → Settings → Account → Personal access tokens.
 
 ### `onex-platform` MCP (Backend Services) — DO NOT USE FOR THEMES
 
@@ -932,10 +964,81 @@ This is for managing microservices on the OneXEOS platform. Its tools are:
 
 ### When to use which
 
-| Task                     | MCP to use                   |
-| ------------------------ | ---------------------------- |
-| Create a new section     | `onexthm_create_section`     |
-| Validate theme structure | `onexthm_validate`           |
-| Look up available hooks  | `onexthm_list_hooks`         |
-| Deploy a backend service | `onex_deploy` (platform MCP) |
-| Check service health     | `onex_status` (platform MCP) |
+| Task                              | MCP to use                                |
+| --------------------------------- | ----------------------------------------- |
+| Create a new section              | `onexthm_create_section`                  |
+| Convert Figma design to section   | `onexthm_from_figma` + `figma` tools      |
+| Validate theme structure          | `onexthm_validate`                        |
+| Look up available hooks           | `onexthm_list_hooks`                      |
+| Generate schema from description  | `onexthm_generate_schema`                 |
+| Read Figma design layers          | `figma:get_metadata`                      |
+| Get Figma design tokens           | `figma:get_variable_defs`                 |
+| Deploy a backend service          | `onex_deploy` (platform MCP)              |
+| Check service health              | `onex_status` (platform MCP)              |
+
+## Figma → OneX Conversion
+
+Convert Figma designs directly to OneX theme sections using the combined Figma + OneX MCP pipeline.
+
+### Quick Start
+
+Use the `figma_to_section` prompt for a guided workflow:
+```
+"Convert the selected Figma frame to a section called 'hero'"
+```
+
+Or manually orchestrate the steps:
+
+```
+1. figma:get_metadata        → Get layer hierarchy
+2. figma:get_variable_defs   → Get design tokens
+3. figma:get_design_context  → Get React+Tailwind code
+4. onexthm:onexthm_from_figma → Convert to OneX section files
+5. Write files to sections/ directory
+6. onexthm:onexthm_validate  → Validate
+7. Register in sections-registry.ts
+```
+
+### How Figma Layers Map to OneX
+
+```
+Figma Layer                     →   OneX Concept
+────────────────────────────────────────────────
+Top-level Frame                 →   Section
+Nested Frame/Group              →   Block
+TEXT (large >=24px, bold >=600) →   heading (h1-h6)
+TEXT (body <24px)               →   paragraph
+Button instance                 →   button component
+Image node                      →   image component
+Icon instance                   →   icon component
+Badge/Label                     →   badge component
+Repeating children (same shape) →   Block definition
+Background color fill           →   backgroundColor setting
+Background image fill           →   backgroundImage setting
+Auto Layout horizontal          →   flex flex-row (Tailwind)
+Auto Layout vertical            →   flex flex-col (Tailwind)
+Auto Layout gap                 →   gap-N (Tailwind)
+```
+
+### `onexthm_from_figma` Tool Parameters
+
+```typescript
+{
+  figmaMetadata: string,    // Required: XML/JSON from figma:get_metadata
+  figmaVariables?: string,  // Optional: JSON from figma:get_variable_defs
+  figmaCode?: string,       // Optional: code from figma:get_design_context (fallback)
+  sectionName: string,      // Required: kebab-case name (e.g., "hero")
+  category?: string,        // Optional: section category
+  themePrefix?: string,     // Optional: type prefix (e.g., "my-simple")
+}
+```
+
+Returns generated files: `{name}.schema.ts`, `{name}-default.tsx`, `index.ts`, plus registry entry.
+
+### Pixel → Tailwind Reference
+
+```
+Font Size:  12→xs  14→sm  16→base  18→lg  20→xl  24→2xl  30→3xl  36→4xl  48→5xl  60→6xl
+Spacing:    4→1  8→2  12→3  16→4  20→5  24→6  32→8  40→10  48→12  64→16  80→20  96→24
+Weight:     100-400→normal  500→medium  600→semibold  700+→bold
+```