desen-cli 1.0.0-draft.7 → 1.0.0-draft.8

package/dist/index.js

@@ -188,32 +188,43 @@ program
             if (!payloads || payloads.length === 0 || !payloads[0].path) {
                 return res.status(400).json({ error: "Missing payloads or path in request body" });
             }
-            // SECURITY BARRICADE: Validate strictly using @desen/core specs before disk IO
+            // ─────────────────────────────────────────────────────────
+            // VALIDATION (Warn-and-Proceed for Development)
+            // Daemon is a dev tool — strict fail-closed enforcement
+            // belongs in `desen validate` (CI/CD pipeline).
+            // Here we log warnings but NEVER block the sync.
+            // ─────────────────────────────────────────────────────────
+            let validationWarnings = 0;
             for (const item of payloads) {
                 if (!item.path || !item.ast)
                     continue;
                 let result;
-                if (item.path.startsWith('surface/')) {
+                if (item.path.includes('surfaces/')) {
                     result = desen_core_1.surfaceSpec.safeParse(item.ast);
                 }
-                else if (item.path.startsWith('element/') || item.path.startsWith('composition/')) {
+                else if (item.path.includes('elements/') || item.path.includes('compositions/')) {
                     result = desen_core_1.nodeSpec.safeParse(item.ast);
                 }
-                else if (item.path.startsWith('themes/')) {
-                    result = { success: true }; // Token bypass for now
+                else if (item.path.includes('themes/')) {
+                    result = { success: true };
                 }
                 else {
                     result = desen_core_1.nodeSpec.safeParse(item.ast);
                 }
                 if (!result.success) {
-                    console.error(chalk_1.default.red(`❌ [Fail-Closed] Payload validation failed for ${item.path}`));
-                    console.error(chalk_1.default.yellow(JSON.stringify(result.error.format(), null, 2)));
-                    return res.status(400).json({
-                        error: "Validation failed against desen-core schemas",
-                        path: item.path,
-                        issues: result.error.errors
-                    });
+                    validationWarnings++;
+                    console.warn(chalk_1.default.yellow(`⚠️  [Validation Warning] ${item.path}`));
+                    const formatted = result.error.format();
+                    // Log a concise summary instead of the full error tree
+                    const issues = result.error.errors.map((e) => `   → [${e.path.join('.')}] ${e.message}`).join('\n');
+                    console.warn(chalk_1.default.yellow(issues));
                 }
+                else {
+                    console.log(chalk_1.default.green(`  ✓ ${item.path}`));
+                }
+            }
+            if (validationWarnings > 0) {
+                console.warn(chalk_1.default.yellow(`\n⚠️  ${validationWarnings} file(s) have validation warnings. Run 'desen validate' for strict checks.`));
             }
             const projectRoot = process.cwd();
             const workspaceDir = path_1.default.join(projectRoot, "desen-workspace");
@@ -288,7 +299,7 @@ program
                 const appDir = path_1.default.join(workspaceDir, "src", "app");
                 fs_1.default.mkdirSync(appDir, { recursive: true });
                 // Find first surface directly
-                const firstSurface = payloads.find((p) => p.path.startsWith('surface/'))?.path || 'surface/frame-1.desen.json';
+                const firstSurface = payloads.find((p) => p.path.includes('surfaces/'))?.path || 'desen/surfaces/frame-1.desen.json';
                 // API Route to load local .desen.json dynamically
                 const apiDir = path_1.default.join(appDir, "api", "surface", "route");
                 fs_1.default.mkdirSync(apiDir, { recursive: true });
@@ -413,67 +424,6 @@ export default function Page() {
                 fs_1.default.writeFileSync(path_1.default.join(libDir, "desenRegistry.tsx"), `
 import React from 'react';
 
-function resolveToken(tokenStr: string): string | undefined {
-    if (!tokenStr) return undefined;
-    const match = tokenStr.match(/t_([a-fA-F0-9]{3,8})/);
-    return match ? \`#\${match[1]}\` : undefined;
-}
-
-function resolveColor(tokenStr?: string, hexStr?: string): string | undefined {
-    if (tokenStr) return resolveToken(tokenStr);
-    if (hexStr) return hexStr;
-    return undefined;
-}
-
-function buildCssFromNode(layout: any, style: any, opts?: { isText?: boolean; isSurfaceRoot?: boolean }): React.CSSProperties {
-    const css: any = { boxSizing: 'border-box' };
-
-    if (layout) {
-        css.display = 'flex';
-        css.flexDirection = (layout.direction === 'row' || layout.direction === 'horizontal') ? 'row' : 'column';
-        if (layout.gap !== undefined && layout.gap !== 0) css.gap = layout.gap;
-
-        const am: Record<string, string> = { start:'flex-start', end:'flex-end', center:'center', 'space-between':'space-between', 'space-around':'space-around', 'space-evenly':'space-evenly' };
-        css.alignItems = am[layout.align_items] || 'stretch';
-        css.justifyContent = am[layout.align_content] || 'flex-start';
-
-        if (layout.padding !== undefined) {
-            css.padding = Array.isArray(layout.padding) ? layout.padding.map((p:number)=>p+'px').join(' ') : layout.padding !== 0 ? layout.padding+'px' : undefined;
-        }
-
-        if (opts?.isSurfaceRoot) {
-            css.width = '100%'; css.minHeight = '100vh';
-        } else {
-            if (layout.sizing_h === 'FILL') css.width = '100%';
-            else if (layout.sizing_h === 'FIXED' && style?.width !== undefined) css.width = style.width;
-            if (layout.sizing_v === 'FILL') css.height = '100%';
-            else if (layout.sizing_v === 'FIXED' && style?.height !== undefined) css.height = style.height;
-        }
-    }
-
-    if (style) {
-        const bgColor = resolveColor(style.bg_color_token, style.bg_color);
-        if (bgColor) { if (opts?.isText) css.color = bgColor; else css.backgroundColor = bgColor; }
-        const bc = resolveColor(style.border_color_token, style.border_color);
-        if (bc) css.borderColor = bc;
-        if (style.border_width !== undefined) { css.borderWidth = style.border_width; css.borderStyle = 'solid'; }
-        if (style.border_radius !== undefined) {
-            css.borderRadius = Array.isArray(style.border_radius) ? style.border_radius.map((r:number)=>r+'px').join(' ') : style.border_radius;
-        }
-        if (!layout && !opts?.isText) { if (style.width !== undefined) css.width = style.width; if (style.height !== undefined) css.height = style.height; }
-        if (style.opacity !== undefined) css.opacity = style.opacity;
-        if (style.font_size) css.fontSize = style.font_size;
-        if (style.font_weight) css.fontWeight = style.font_weight;
-        if (style.font_family) css.fontFamily = style.font_family;
-        if (style.letter_spacing) css.letterSpacing = style.letter_spacing;
-        if (style.line_height) css.lineHeight = style.line_height + 'px';
-        if (style.text_align) css.textAlign = style.text_align;
-        if (style.text_decoration) css.textDecoration = style.text_decoration;
-        if (style.text_transform) css.textTransform = style.text_transform;
-    }
-    return css;
-}
-
 const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
     if (!fonts || fonts.length === 0) return null;
 
@@ -497,31 +447,28 @@ const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
 };
 
 const SurfaceComponent = (props: any) => (
-    <div style={{ width: '100%', minHeight: '100vh', boxSizing: 'border-box' }}>
+    <div style={props.parsedStyle}>
         <DynamicFontLoader fonts={props.metadata?.fonts} />
         {props.children}
     </div>
 );
 
 const GenericContainer = (props: any) => (
-    <div style={buildCssFromNode(props.layout, props.style, { isSurfaceRoot: props._isSurfaceRoot })}>{props.children}</div>
+    <div style={props.parsedStyle}>{props.children}</div>
 );
 
 const TextComponent = (props: any) => (
-    <span style={buildCssFromNode(props.layout, props.style, { isText: true })}>{props.content || props.text || props.name}</span>
+    <span style={props.parsedStyle}>{props.content || props.text || props.name}</span>
 );
 
 const ButtonComponent = (props: any) => {
-    const adjLayout = { ...props.layout };
-    if (adjLayout && !props.children && adjLayout.align_content === 'space-between') adjLayout.align_content = 'center';
-    const css: any = { ...buildCssFromNode(adjLayout, props.style), cursor: 'pointer', border: 'none' };
-    if (props.text_style) {
-        const tc = resolveColor(props.text_style.bg_color_token, props.text_style.bg_color);
-        if (tc) css.color = tc;
-        if (props.text_style.font_size) css.fontSize = props.text_style.font_size;
-        if (props.text_style.font_weight) css.fontWeight = props.text_style.font_weight;
-        if (props.text_style.font_family) css.fontFamily = props.text_style.font_family;
-        if (props.text_style.text_align) css.textAlign = props.text_style.text_align;
+    const css: any = { ...props.parsedStyle, cursor: 'pointer', border: 'none' };
+    
+    // If no layout, center text by default (most buttons center their text)
+    if (!props.layout) {
+        css.display = 'flex';
+        css.alignItems = 'center';
+        css.justifyContent = 'center';
     }
     return <button style={css}>{props.children || props.content || props.text || props.name}</button>;
 };
@@ -542,9 +489,9 @@ export const registry: Record<string, React.FC<any>> = {
     Text: TextComponent,
     button: ButtonComponent,
     Button: ButtonComponent,
-    input: (props: any) => <input style={buildCssFromNode(props.layout, props.style)} placeholder={props.content || props.name} />,
-    icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
-    Icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    input: (props: any) => <input style={props.parsedStyle} placeholder={props.content || props.name} />,
+    icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    Icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
 };
 `.trim());
                 console.log(chalk_1.default.green(`✅ Done! Standalone App Scaffolded.`));

package/package.json

@@ -1,23 +1,26 @@
 {
-  "name": "desen-cli",
-  "version": "1.0.0-draft.7",
-  "main": "dist/index.js",
-  "dependencies": {
-    "chalk": "^5.6.2",
-    "commander": "^14.0.3",
-    "express": "^4.19.2",
-    "cors": "^2.8.5",
-    "desen-core": "1.0.0-draft.7"
-  },
-  "devDependencies": {
-    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.6",
-    "@types/node": "^20.19.33",
-    "typescript": "^5.0.0"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc -w",
-    "clean": "rm -rf dist"
-  }
+    "name": "desen-cli",
+    "version": "1.0.0-draft.8",
+    "main": "dist/index.js",
+    "bin": {
+        "desen": "dist/index.js"
+    },
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc -w",
+        "clean": "rm -rf dist"
+    },
+    "dependencies": {
+        "desen-core": "1.0.0-draft.8",
+        "chalk": "^5.6.2",
+        "commander": "^14.0.3",
+        "express": "^4.19.2",
+        "cors": "^2.8.5"
+    },
+    "devDependencies": {
+        "@types/cors": "^2.8.19",
+        "@types/express": "^5.0.6",
+        "@types/node": "^20.19.33",
+        "typescript": "^5.0.0"
+    }
 }

package/src/index.ts

@@ -209,31 +209,41 @@ program
                     return res.status(400).json({ error: "Missing payloads or path in request body" });
                 }
 
-                // SECURITY BARRICADE: Validate strictly using @desen/core specs before disk IO
+                // ─────────────────────────────────────────────────────────
+                // VALIDATION (Warn-and-Proceed for Development)
+                // Daemon is a dev tool — strict fail-closed enforcement
+                // belongs in `desen validate` (CI/CD pipeline).
+                // Here we log warnings but NEVER block the sync.
+                // ─────────────────────────────────────────────────────────
+                let validationWarnings = 0;
                 for (const item of payloads) {
                     if (!item.path || !item.ast) continue;
 
                     let result: any;
-                    if (item.path.startsWith('surface/')) {
+                    if (item.path.includes('surfaces/')) {
                         result = surfaceSpec.safeParse(item.ast);
-                    } else if (item.path.startsWith('element/') || item.path.startsWith('composition/')) {
+                    } else if (item.path.includes('elements/') || item.path.includes('compositions/')) {
                         result = nodeSpec.safeParse(item.ast);
-                    } else if (item.path.startsWith('themes/')) {
-                        result = { success: true }; // Token bypass for now
+                    } else if (item.path.includes('themes/')) {
+                        result = { success: true };
                     } else {
                         result = nodeSpec.safeParse(item.ast);
                     }
 
                     if (!result.success) {
-                        console.error(chalk.red(`❌ [Fail-Closed] Payload validation failed for ${item.path}`));
-                        console.error(chalk.yellow(JSON.stringify(result.error.format(), null, 2)));
-                        return res.status(400).json({
-                            error: "Validation failed against desen-core schemas",
-                            path: item.path,
-                            issues: result.error.errors
-                        });
+                        validationWarnings++;
+                        console.warn(chalk.yellow(`⚠️  [Validation Warning] ${item.path}`));
+                        const formatted = result.error.format();
+                        // Log a concise summary instead of the full error tree
+                        const issues = result.error.errors.map((e: any) => `   → [${e.path.join('.')}] ${e.message}`).join('\n');
+                        console.warn(chalk.yellow(issues));
+                    } else {
+                        console.log(chalk.green(`  ✓ ${item.path}`));
                     }
                 }
+                if (validationWarnings > 0) {
+                    console.warn(chalk.yellow(`\n⚠️  ${validationWarnings} file(s) have validation warnings. Run 'desen validate' for strict checks.`));
+                }
 
                 const projectRoot = process.cwd();
                 const workspaceDir = path.join(projectRoot, "desen-workspace");
@@ -317,7 +327,7 @@ program
                     fs.mkdirSync(appDir, { recursive: true });
 
                     // Find first surface directly
-                    const firstSurface = payloads.find((p: any) => p.path.startsWith('surface/'))?.path || 'surface/frame-1.desen.json';
+                    const firstSurface = payloads.find((p: any) => p.path.includes('surfaces/'))?.path || 'desen/surfaces/frame-1.desen.json';
 
                     // API Route to load local .desen.json dynamically
                     const apiDir = path.join(appDir, "api", "surface", "route");
@@ -448,67 +458,6 @@ export default function Page() {
                     fs.writeFileSync(path.join(libDir, "desenRegistry.tsx"), `
 import React from 'react';
 
-function resolveToken(tokenStr: string): string | undefined {
-    if (!tokenStr) return undefined;
-    const match = tokenStr.match(/t_([a-fA-F0-9]{3,8})/);
-    return match ? \`#\${match[1]}\` : undefined;
-}
-
-function resolveColor(tokenStr?: string, hexStr?: string): string | undefined {
-    if (tokenStr) return resolveToken(tokenStr);
-    if (hexStr) return hexStr;
-    return undefined;
-}
-
-function buildCssFromNode(layout: any, style: any, opts?: { isText?: boolean; isSurfaceRoot?: boolean }): React.CSSProperties {
-    const css: any = { boxSizing: 'border-box' };
-
-    if (layout) {
-        css.display = 'flex';
-        css.flexDirection = (layout.direction === 'row' || layout.direction === 'horizontal') ? 'row' : 'column';
-        if (layout.gap !== undefined && layout.gap !== 0) css.gap = layout.gap;
-
-        const am: Record<string, string> = { start:'flex-start', end:'flex-end', center:'center', 'space-between':'space-between', 'space-around':'space-around', 'space-evenly':'space-evenly' };
-        css.alignItems = am[layout.align_items] || 'stretch';
-        css.justifyContent = am[layout.align_content] || 'flex-start';
-
-        if (layout.padding !== undefined) {
-            css.padding = Array.isArray(layout.padding) ? layout.padding.map((p:number)=>p+'px').join(' ') : layout.padding !== 0 ? layout.padding+'px' : undefined;
-        }
-
-        if (opts?.isSurfaceRoot) {
-            css.width = '100%'; css.minHeight = '100vh';
-        } else {
-            if (layout.sizing_h === 'FILL') css.width = '100%';
-            else if (layout.sizing_h === 'FIXED' && style?.width !== undefined) css.width = style.width;
-            if (layout.sizing_v === 'FILL') css.height = '100%';
-            else if (layout.sizing_v === 'FIXED' && style?.height !== undefined) css.height = style.height;
-        }
-    }
-
-    if (style) {
-        const bgColor = resolveColor(style.bg_color_token, style.bg_color);
-        if (bgColor) { if (opts?.isText) css.color = bgColor; else css.backgroundColor = bgColor; }
-        const bc = resolveColor(style.border_color_token, style.border_color);
-        if (bc) css.borderColor = bc;
-        if (style.border_width !== undefined) { css.borderWidth = style.border_width; css.borderStyle = 'solid'; }
-        if (style.border_radius !== undefined) {
-            css.borderRadius = Array.isArray(style.border_radius) ? style.border_radius.map((r:number)=>r+'px').join(' ') : style.border_radius;
-        }
-        if (!layout && !opts?.isText) { if (style.width !== undefined) css.width = style.width; if (style.height !== undefined) css.height = style.height; }
-        if (style.opacity !== undefined) css.opacity = style.opacity;
-        if (style.font_size) css.fontSize = style.font_size;
-        if (style.font_weight) css.fontWeight = style.font_weight;
-        if (style.font_family) css.fontFamily = style.font_family;
-        if (style.letter_spacing) css.letterSpacing = style.letter_spacing;
-        if (style.line_height) css.lineHeight = style.line_height + 'px';
-        if (style.text_align) css.textAlign = style.text_align;
-        if (style.text_decoration) css.textDecoration = style.text_decoration;
-        if (style.text_transform) css.textTransform = style.text_transform;
-    }
-    return css;
-}
-
 const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
     if (!fonts || fonts.length === 0) return null;
 
@@ -532,31 +481,28 @@ const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
 };
 
 const SurfaceComponent = (props: any) => (
-    <div style={{ width: '100%', minHeight: '100vh', boxSizing: 'border-box' }}>
+    <div style={props.parsedStyle}>
         <DynamicFontLoader fonts={props.metadata?.fonts} />
         {props.children}
     </div>
 );
 
 const GenericContainer = (props: any) => (
-    <div style={buildCssFromNode(props.layout, props.style, { isSurfaceRoot: props._isSurfaceRoot })}>{props.children}</div>
+    <div style={props.parsedStyle}>{props.children}</div>
 );
 
 const TextComponent = (props: any) => (
-    <span style={buildCssFromNode(props.layout, props.style, { isText: true })}>{props.content || props.text || props.name}</span>
+    <span style={props.parsedStyle}>{props.content || props.text || props.name}</span>
 );
 
 const ButtonComponent = (props: any) => {
-    const adjLayout = { ...props.layout };
-    if (adjLayout && !props.children && adjLayout.align_content === 'space-between') adjLayout.align_content = 'center';
-    const css: any = { ...buildCssFromNode(adjLayout, props.style), cursor: 'pointer', border: 'none' };
-    if (props.text_style) {
-        const tc = resolveColor(props.text_style.bg_color_token, props.text_style.bg_color);
-        if (tc) css.color = tc;
-        if (props.text_style.font_size) css.fontSize = props.text_style.font_size;
-        if (props.text_style.font_weight) css.fontWeight = props.text_style.font_weight;
-        if (props.text_style.font_family) css.fontFamily = props.text_style.font_family;
-        if (props.text_style.text_align) css.textAlign = props.text_style.text_align;
+    const css: any = { ...props.parsedStyle, cursor: 'pointer', border: 'none' };
+    
+    // If no layout, center text by default (most buttons center their text)
+    if (!props.layout) {
+        css.display = 'flex';
+        css.alignItems = 'center';
+        css.justifyContent = 'center';
     }
     return <button style={css}>{props.children || props.content || props.text || props.name}</button>;
 };
@@ -577,9 +523,9 @@ export const registry: Record<string, React.FC<any>> = {
     Text: TextComponent,
     button: ButtonComponent,
     Button: ButtonComponent,
-    input: (props: any) => <input style={buildCssFromNode(props.layout, props.style)} placeholder={props.content || props.name} />,
-    icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
-    Icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    input: (props: any) => <input style={props.parsedStyle} placeholder={props.content || props.name} />,
+    icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    Icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
 };
 `.trim());