@onexapis/cli 1.1.16 → 1.1.17

package/dist/preview/preview-app.tsx

@@ -171,7 +171,102 @@ function toPascalCase(str: string): string {
     .join("");
 }
 
-// ===== 4. SECTION DATA ENRICHMENT =====
+// ===== 4. THEME CSS VARIABLE INJECTION =====
+
+const PALETTE_TO_CSS_VAR: Record<string, string> = {
+  primary: "--primary",
+  secondary: "--secondary",
+  accent: "--accent",
+  background: "--background",
+  foreground: "--foreground",
+  muted: "--muted",
+  mutedForeground: "--muted-foreground",
+  card: "--card",
+  cardForeground: "--card-foreground",
+  popover: "--popover",
+  popoverForeground: "--popover-foreground",
+  border: "--border",
+  input: "--input",
+  ring: "--ring",
+  destructive: "--destructive",
+};
+
+function hexToHsl(hex: string): string {
+  const cleaned = hex.replace(/^#/, "");
+  let r: number, g: number, b: number;
+  if (cleaned.length === 3) {
+    r = parseInt(cleaned[0] + cleaned[0], 16) / 255;
+    g = parseInt(cleaned[1] + cleaned[1], 16) / 255;
+    b = parseInt(cleaned[2] + cleaned[2], 16) / 255;
+  } else {
+    r = parseInt(cleaned.substring(0, 2), 16) / 255;
+    g = parseInt(cleaned.substring(2, 4), 16) / 255;
+    b = parseInt(cleaned.substring(4, 6), 16) / 255;
+  }
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return `0 0% ${Math.round(l * 100)}%`;
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+function paletteToCSS(palette: Record<string, string>): string {
+  const lines: string[] = [];
+  for (const [field, cssVar] of Object.entries(PALETTE_TO_CSS_VAR)) {
+    const value = palette[field];
+    if (value && value.startsWith("#")) {
+      lines.push(`  ${cssVar}: ${hexToHsl(value)};`);
+    }
+  }
+  return lines.join("\n");
+}
+
+function buildThemeStyleCSS(themeConfig: any): string | null {
+  if (!themeConfig?.colors?.light) return null;
+  const lightCSS = paletteToCSS(themeConfig.colors.light);
+  const darkCSS = themeConfig.colors.dark
+    ? paletteToCSS(themeConfig.colors.dark)
+    : "";
+  if (!lightCSS && !darkCSS) return null;
+  return [
+    lightCSS ? `:root {\n${lightCSS}\n}` : "",
+    darkCSS ? `.dark {\n${darkCSS}\n}` : "",
+  ]
+    .filter(Boolean)
+    .join("\n");
+}
+
+// ===== 5. RESOLVE SECTION LIST =====
+
+function resolveSections(
+  sectionConfigs: any[],
+  themeExports: ThemeExports,
+  themePrefix: string
+) {
+  return (sectionConfigs || [])
+    .filter((s: any) => s.enabled !== false)
+    .sort((a: any, b: any) => a.order - b.order)
+    .map((section: any) => {
+      const reg = getSectionComponent(
+        themeExports,
+        themePrefix,
+        section.type,
+        section.template || "default"
+      );
+      const enriched = reg?.schema
+        ? enrichSectionWithDefaults(section, reg.schema)
+        : section;
+      return { section: enriched, registration: reg };
+    });
+}
+
+// ===== 6. SECTION DATA ENRICHMENT =====
 
 /**
  * Merge schema defaults into section instances from page config.
@@ -199,7 +294,7 @@ function enrichSectionWithDefaults(section: any, schema: any): any {
   };
 }
 
-// ===== 5. PAGE CONFIG DISCOVERY =====
+// ===== 7. PAGE CONFIG DISCOVERY =====
 
 function discoverPageConfigs(
   themeExports: ThemeExports
@@ -231,7 +326,7 @@ function discoverPageConfigs(
   return pages;
 }
 
-// ===== 6. PREVIEW APP COMPONENT =====
+// ===== 8. PREVIEW APP COMPONENT =====
 
 /**
  * Match URL pathname to a page index.
@@ -297,7 +392,6 @@ function PreviewApp() {
 
       ws.onopen = () => {
         setWsStatus("connected");
-
       };
 
       ws.onmessage = (event) => {
@@ -306,7 +400,6 @@ function PreviewApp() {
           setWsStatus("rebuilding");
           loadTheme(msg.timestamp).then(() => {
             setWsStatus("connected");
-    
           });
         } else if (msg.type === "error") {
           setError(msg.message);
@@ -437,62 +530,91 @@ function PreviewApp() {
     );
   }
 
-  // Get sections for current page, enriched with schema defaults
-  const sections = (currentPage.config.sections || [])
-    .filter((s: any) => s.enabled !== false)
-    .sort((a: any, b: any) => a.order - b.order)
-    .map((section: any) => {
-      const reg = getSectionComponent(
-        themeExports,
-        themePrefix,
-        section.type,
-        section.template || "default"
+  // Build section data (Gap 4)
+  const sectionData = {
+    theme: themeExports.themeConfig || {},
+    page: currentPage.config,
+    products: [],
+    blogs: [],
+    settings: {},
+  };
+
+  // Resolve layout sections (Gap 1)
+  const layoutConfig = themeExports.layoutConfig;
+  const headerSections = resolveSections(
+    layoutConfig?.headerSections || [],
+    themeExports,
+    themePrefix
+  );
+  const footerSections = resolveSections(
+    layoutConfig?.footerSections || [],
+    themeExports,
+    themePrefix
+  );
+
+  // Resolve page sections
+  const pageSections = resolveSections(
+    currentPage.config.sections || [],
+    themeExports,
+    themePrefix
+  );
+
+  // Build theme CSS (Gap 2)
+  const themeCSS = buildThemeStyleCSS(themeExports.themeConfig);
+
+  const renderSection = ({ section, registration }: any) => {
+    if (!registration) {
+      return (
+        <div
+          key={section.id}
+          style={{
+            padding: "2rem",
+            border: "2px dashed #f59e0b",
+            margin: "1rem 0",
+            background: "#fffbeb",
+          }}
+        >
+          <h3 style={{ margin: 0, fontSize: "1.2rem", color: "#d97706" }}>
+            Section Not Found: {section.type}
+          </h3>
+        </div>
       );
-      const enriched = reg?.schema
-        ? enrichSectionWithDefaults(section, reg.schema)
-        : section;
-      return { section: enriched, registration: reg };
-    });
+    }
+    const { Component, schema, template } = registration;
+    return (
+      <Component
+        key={section.id}
+        section={section}
+        schema={schema}
+        template={template}
+        isEditing={false}
+        data={sectionData}
+      />
+    );
+  };
 
   return (
     <>
-      {/* Render sections */}
-      {sections.map(({ section, registration }: any) => {
-        if (!registration) {
-          return (
-            <div
-              key={section.id}
-              style={{
-                padding: "2rem",
-                border: "2px dashed #f59e0b",
-                margin: "1rem 0",
-                background: "#fffbeb",
-              }}
-            >
-              <h3 style={{ margin: 0, fontSize: "1.2rem", color: "#d97706" }}>
-                Section Not Found: {section.type}
-              </h3>
-            </div>
-          );
-        }
-        const { Component, schema, template } = registration;
-        return (
-          <Component
-            key={section.id}
-            section={section}
-            schema={schema}
-            template={template}
-            isEditing={false}
-            data={{}}
-          />
-        );
-      })}
+      {/* Inject theme CSS variables (Gap 2) */}
+      {themeCSS && <style dangerouslySetInnerHTML={{ __html: themeCSS }} />}
+
+      {/* Header (Gap 1) */}
+      {headerSections.length > 0 && (
+        <header>{headerSections.map(renderSection)}</header>
+      )}
+
+      {/* Page sections */}
+      <main>{pageSections.map(renderSection)}</main>
+
+      {/* Footer (Gap 1) */}
+      {footerSections.length > 0 && (
+        <footer>{footerSections.map(renderSection)}</footer>
+      )}
     </>
   );
 }
 
-
-// ===== 7. MOUNT =====
+// ===== 9. MOUNT =====
 
 const queryClient = new QueryClient({
   defaultOptions: {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@onexapis/cli",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "description": "CLI tool for OneX theme development - scaffolds themes using @onexapis/core",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "bin": {
-    "onex": "./bin/onex.js"
+    "onexthm": "./bin/onexthm.js"
   },
   "exports": {
     ".": {
@@ -15,6 +15,13 @@
       "require": "./dist/index.js"
     }
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts",
+    "prepublishOnly": "pnpm run type-check && pnpm run build"
+  },
   "keywords": [
     "onex",
     "cli",
@@ -41,8 +48,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.90.16",
     "@aws-sdk/client-s3": "^3.470.0",
+    "@onexapis/core": "workspace:*",
+    "@tanstack/react-query": "^5.90.16",
     "adm-zip": "^0.5.16",
     "archiver": "^7.0.1",
     "chalk": "^5.3.0",
@@ -52,6 +60,7 @@
     "ejs": "^3.1.10",
     "esbuild": "^0.25.0",
     "form-data": "^4.0.5",
+    "framer-motion": "^12.23.26",
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "inquirer": "^9.2.12",
@@ -59,8 +68,7 @@
     "node-fetch": "^3.3.2",
     "open": "^10.1.0",
     "ora": "^8.0.1",
-    "ws": "^8.18.0",
-    "@onexapis/core": "1.0.2"
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@types/adm-zip": "^0.5.7",
@@ -80,11 +88,5 @@
   ],
   "engines": {
     "node": ">=18.0.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext .ts"
   }
-}
+}