@wire-dsl/web 0.0.7 → 0.1.0

package/dist/examples/form-example.wire

@@ -0,0 +1,50 @@
+project "Form Example" {
+  theme {
+    density: "normal"
+    spacing: "md"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen FormScreen {
+    layout stack(direction: vertical, gap: md, padding: lg) {
+      component Heading text: "User Registration"
+      
+      component Text content: "Please fill in all required fields below"
+
+      layout stack(direction: vertical, gap: md, padding: md) {
+        component Input label: "Full Name" placeholder: "John Doe"
+        
+        component Input label: "Email" placeholder: "john@example.com"
+        
+        component Textarea label: "Bio" placeholder: "Tell us about yourself..." rows: 4
+        
+        component Select label: "Country" items: "USA,Canada,Mexico,UK,Spain"
+        
+        layout stack(direction: vertical, gap: sm, padding: md) {
+          component Heading text: "Preferences"
+          
+          component Checkbox label: "Subscribe to newsletter"
+          component Checkbox label: "Enable notifications"
+        }
+        
+        layout stack(direction: vertical, gap: sm, padding: md) {
+          component Heading text: "Account Type"
+          
+          component Radio label: "Personal"
+          component Radio label: "Business"
+        }
+        
+        layout stack(direction: vertical, gap: md) {
+          component Toggle label: "Terms & Conditions"
+        }
+      }
+
+      layout stack(direction: horizontal, gap: md) {
+        component Button text: "Cancel"
+        component Button text: "Submit" variant: primary
+      }
+    }
+  }
+}

package/dist/examples/simple-dashboard.wire

@@ -0,0 +1,40 @@
+project "Simple Dashboard" {
+  theme {
+    density: "comfortable"
+    spacing: "lg"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen Dashboard {
+    layout stack(direction: vertical, gap: lg, padding: xl) {
+      component Topbar title: "Dashboard"
+      
+      layout grid(columns: 12, gap: lg) {
+        cell span: 4 {
+          layout card(padding: md, gap: md) {
+            component Heading text: "Total Users"
+            component StatCard title: "Count" value: "2,543"
+          }
+        }
+        cell span: 4 {
+          layout card(padding: md, gap: md) {
+            component Heading text: "Active Sessions"
+            component StatCard title: "Active" value: "856"
+          }
+        }
+        cell span: 4 {
+          layout card(padding: md, gap: md) {
+            component Heading text: "Revenue"
+            component StatCard title: "Total" value: "$45.2K"
+          }
+        }
+      }
+
+      component ChartPlaceholder type: "bar" height: 300
+
+      component Table columns: "Date,Event,User" rows: 5
+    }
+  }
+}

package/dist/examples/simple-multi-screen.wire

@@ -0,0 +1,30 @@
+project "Admin Dashboard Simple" {
+  theme {
+    density: "normal"
+    spacing: "md"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen Dashboard {
+    layout stack(direction: vertical, gap: lg, padding: lg) {
+      component Topbar title: "Dashboard" subtitle: "Main view"
+      component StatCard title: "Count" value: "42"
+    }
+  }
+
+  screen Settings {
+    layout stack(direction: vertical, gap: lg, padding: lg) {
+      component Topbar title: "Settings"
+      component Input label: "Username" placeholder: "user@example.com"
+    }
+  }
+
+  screen Profile {
+    layout stack(direction: vertical, gap: lg, padding: lg) {
+      component Topbar title: "Profile" subtitle: "User info"
+      component Checkbox label: "Notifications enabled"
+    }
+  }
+}

package/dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>WireDSL - Wireframes as Code</title>
-    <script type="module" crossorigin src="/assets/index-CHiOjnNN.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CUIy2zPc.css">
+    <script type="module" crossorigin src="/assets/index-C6yQ9VSx.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CmAJnnOw.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wire-dsl/web",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "description": "WireDSL Web - Live editor with React and Monaco",
   "type": "module",
   "publishConfig": {
@@ -14,7 +14,9 @@
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-slot": "1.2.4",
     "lucide-react": "0.562.0",
-    "@wire-dsl/core": "0.1.5"
+    "@wire-dsl/engine": "0.0.2",
+    "@wire-dsl/editor-ui": "0.0.1",
+    "@wire-dsl/language-support": "0.0.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "4.1.18",
@@ -36,7 +38,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",

package/postcss.config.mjs

@@ -1,5 +1,7 @@
 export default {
     plugins: {
-        '@tailwindcss/postcss': {}
+        '@tailwindcss/postcss': {
+            optimize: false
+        }
     }
 };

package/public/examples/admin-dashboard.wire

@@ -0,0 +1,95 @@
+project "Admin Dashboard" {
+  theme {
+    density: "normal"
+    spacing: "md"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen UsersList {
+    layout split(sidebar: 240, gap: lg) {
+      layout stack(direction: vertical, gap: md, padding: md) {
+        component Heading text: "Menu"
+        component SidebarMenu items: "Users,Roles,Permissions,Audit,Settings" active: 0
+      }
+
+      layout stack(direction: vertical, gap: lg, padding: lg) {
+        component Heading text: "Users"
+        component Text content: "Manage system users"
+
+        layout grid(columns: 12, gap: md) {
+          cell span: 8 {
+            component Input label: "Search user" placeholder: "name, email..."
+          }
+          cell span: 4 align: end {
+            component Button text: "Create user" variant: primary
+          }
+        }
+
+        component Table columns: "ID,Name,Email,Status,Role" rows: 8
+      }
+    }
+  }
+
+  screen UserDetail {
+    layout stack(direction: vertical, gap: lg, padding: lg) {
+      component Breadcrumbs items: "Users,User Details"
+      
+      component Heading text: "User Details"
+      component Text content: "View and edit user information"
+
+      layout panel(padding: lg) {
+        layout stack(direction: vertical, gap: md) {
+          component Heading text: "Account Status"
+          component Text content: "User account is active and in good standing"
+
+          component Textarea label: "Bio" placeholder: "User bio and notes..." rows: 4
+
+          component Checkbox label: "Email verified"
+
+          component Toggle label: "Two-factor authentication"
+
+          component Select label: "Status" items: "Active,Inactive,Pending"
+
+          component Divider
+          
+          layout stack(direction: horizontal, gap: md) {
+            component Button text: "Save" variant: primary
+            component Button text: "Cancel"
+          }
+        }
+      }
+    }
+  }
+
+  screen UserCreate {
+    layout stack(direction: vertical, gap: lg, padding: xl) {
+      component Heading text: "Create New User"
+      component Text content: "Add a new user to the system"
+
+      layout panel(padding: lg) {
+        layout stack(direction: vertical, gap: md) {
+          component Input label: "First Name" placeholder: "John"
+
+          component Input label: "Last Name" placeholder: "Doe"
+
+          component Input label: "Email Address" placeholder: "john.doe@example.com"
+
+          component Select label: "Role" items: "Admin,Editor,Viewer,Moderator,User"
+
+          component Select label: "Status" items: "Active,Inactive,Pending"
+
+          component Checkbox label: "Send welcome email"
+
+          component Checkbox label: "Require password change on first login"
+
+          layout stack(direction: horizontal, gap: md) {
+            component Button text: "Create User" variant: primary
+            component Button text: "Cancel"
+          }
+        }
+      }
+    }
+  }
+}

package/public/examples/analytics-dashboard.wire

@@ -0,0 +1,65 @@
+project "Analytics Dashboard" {
+  theme {
+    density: "normal"
+    spacing: "md"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen Dashboard {
+    layout stack(direction: vertical, gap: lg, padding: xl) {
+      component Topbar title: "Analytics" subtitle: "Realtime overview"
+
+      layout split(sidebar: 260, gap: lg) {
+        layout stack(direction: vertical, gap: md, padding: md) {
+          component Heading title: "Filters"
+          component Select label: "Date Range" items: "Last 7 days,Last 30 days,Last 90 days"
+          component Select label: "Channel" items: "All channels,Social,Email,Direct"
+          component Select label: "Region" items: "Global,North America,Europe,Asia"
+          component Divider
+          component Checkbox label: "Email alerts"
+          component Checkbox label: "Slack alerts"
+        }
+
+        layout stack(direction: vertical, gap: lg, padding: lg) {
+          layout grid(columns: 12, gap: md) {
+            cell span: 3 {
+              component Badge text: "+12%" variant: primary
+            }
+            cell span: 3 {
+              component Badge text: "-3%" variant: secondary
+            }
+            cell span: 3 {
+              component Badge text: "4.5k" variant: primary
+            }
+            cell span: 3 {
+              component Badge text: "1.2k" variant: secondary
+            }
+          }
+
+          component Tabs items: "Overview,Traffic,Revenue,Engagement" activeIndex: 0
+
+          layout grid(columns: 12, gap: md) {
+            cell span: 6 {
+              component ChartPlaceholder type: "bar" height: 250
+            }
+            cell span: 6 {
+              component ChartPlaceholder type: "line" height: 250
+            }
+            cell span: 12 {
+              component ChartPlaceholder type: "area" height: 250
+            }
+          }
+
+          layout stack(direction: vertical, gap: sm) {
+            component Alert type: "warning" message: "Traffic spike detected on mobile devices"
+            component Alert type: "error" message: "Sync delayed for EU region"
+          }
+
+          component Table columns: "User,Country,Device,Time" rows: 10
+        }
+      }
+    }
+  }
+}

package/public/examples/form-example.wire

@@ -0,0 +1,50 @@
+project "Form Example" {
+  theme {
+    density: "normal"
+    spacing: "md"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen FormScreen {
+    layout stack(direction: vertical, gap: md, padding: lg) {
+      component Heading text: "User Registration"
+      
+      component Text content: "Please fill in all required fields below"
+
+      layout stack(direction: vertical, gap: md, padding: md) {
+        component Input label: "Full Name" placeholder: "John Doe"
+        
+        component Input label: "Email" placeholder: "john@example.com"
+        
+        component Textarea label: "Bio" placeholder: "Tell us about yourself..." rows: 4
+        
+        component Select label: "Country" items: "USA,Canada,Mexico,UK,Spain"
+        
+        layout stack(direction: vertical, gap: sm, padding: md) {
+          component Heading text: "Preferences"
+          
+          component Checkbox label: "Subscribe to newsletter"
+          component Checkbox label: "Enable notifications"
+        }
+        
+        layout stack(direction: vertical, gap: sm, padding: md) {
+          component Heading text: "Account Type"
+          
+          component Radio label: "Personal"
+          component Radio label: "Business"
+        }
+        
+        layout stack(direction: vertical, gap: md) {
+          component Toggle label: "Terms & Conditions"
+        }
+      }
+
+      layout stack(direction: horizontal, gap: md) {
+        component Button text: "Cancel"
+        component Button text: "Submit" variant: primary
+      }
+    }
+  }
+}

package/public/examples/simple-dashboard.wire

@@ -0,0 +1,40 @@
+project "Simple Dashboard" {
+  theme {
+    density: "comfortable"
+    spacing: "lg"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen Dashboard {
+    layout stack(direction: vertical, gap: lg, padding: xl) {
+      component Topbar title: "Dashboard"
+      
+      layout grid(columns: 12, gap: lg) {
+        cell span: 4 {
+          layout card(padding: md, gap: md) {
+            component Heading text: "Total Users"
+            component StatCard title: "Count" value: "2,543"
+          }
+        }
+        cell span: 4 {
+          layout card(padding: md, gap: md) {
+            component Heading text: "Active Sessions"
+            component StatCard title: "Active" value: "856"
+          }
+        }
+        cell span: 4 {
+          layout card(padding: md, gap: md) {
+            component Heading text: "Revenue"
+            component StatCard title: "Total" value: "$45.2K"
+          }
+        }
+      }
+
+      component ChartPlaceholder type: "bar" height: 300
+
+      component Table columns: "Date,Event,User" rows: 5
+    }
+  }
+}

package/public/examples/simple-multi-screen.wire

@@ -0,0 +1,30 @@
+project "Admin Dashboard Simple" {
+  theme {
+    density: "normal"
+    spacing: "md"
+    radius: "md"
+    stroke: "normal"
+    font: "base"
+  }
+
+  screen Dashboard {
+    layout stack(direction: vertical, gap: lg, padding: lg) {
+      component Topbar title: "Dashboard" subtitle: "Main view"
+      component StatCard title: "Count" value: "42"
+    }
+  }
+
+  screen Settings {
+    layout stack(direction: vertical, gap: lg, padding: lg) {
+      component Topbar title: "Settings"
+      component Input label: "Username" placeholder: "user@example.com"
+    }
+  }
+
+  screen Profile {
+    layout stack(direction: vertical, gap: lg, padding: lg) {
+      component Topbar title: "Profile" subtitle: "User info"
+      component Checkbox label: "Notifications enabled"
+    }
+  }
+}

package/src/App.tsx

@@ -1,15 +1,5 @@
+import { WireLiveEditor } from './components/WireLiveEditor';
+
 export default function App() {
-  return (
-    <div className="h-screen bg-slate-50 flex items-center justify-center">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold text-slate-900 mb-4">✨ WireDSL Web Editor</h1>
-        <p className="text-lg text-slate-600 mb-8">Wireframes as Code - Coming Soon</p>
-        <div className="space-y-2 text-sm text-slate-500">
-          <p>📝 Monaco Editor ready</p>
-          <p>🎨 Tailwind CSS configured</p>
-          <p>🚀 React 18 running</p>
-        </div>
-      </div>
-    </div>
-  );
+  return <WireLiveEditor />;
 }

package/src/components/MonacoEditorComponent.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from 'react';
+import * as monaco from 'monaco-editor';
+
+export interface MonacoEditorProps {
+  content: string;
+  onChange: (content: string) => void;
+  fileName?: string;
+  language?: string;
+  readOnly?: boolean;
+  className?: string;
+}
+
+export const MonacoEditorComponent = React.forwardRef<
+  monaco.editor.IStandaloneCodeEditor | null,
+  MonacoEditorProps
+>(
+  (
+    {
+      content,
+      onChange,
+      fileName = 'untitled.wire',
+      language = 'wire',
+      readOnly = false,
+      className = '',
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const isInitializedRef = useRef(false);
+
+    // Inicializar Monaco Editor - solo una vez
+    useEffect(() => {
+      if (!containerRef.current || isInitializedRef.current) return;
+
+      try {
+        const editor = monaco.editor.create(containerRef.current, {
+          value: content,
+          language,
+          theme: 'vs-light',
+          fontSize: 14,
+          fontFamily: 'Fira Code, monospace',
+          lineNumbers: 'on',
+          wordWrap: 'on',
+          autoClosingBrackets: 'always',
+          autoClosingQuotes: 'always',
+          autoIndent: 'full',
+          formatOnPaste: true,
+          tabSize: 2,
+          insertSpaces: true,
+          readOnly,
+          minimap: { enabled: true },
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+        });
+
+        editorRef.current = editor;
+        isInitializedRef.current = true;
+
+        // Actualizar ref para acceso desde el parent
+        if (typeof ref === 'function') {
+          ref(editor);
+        } else if (ref) {
+          ref.current = editor;
+        }
+      } catch (error) {
+        console.error('Error creating Monaco editor:', error);
+      }
+    }, []);
+
+    // Setup listener - separado, se ejecuta cada vez que onChange cambia
+    useEffect(() => {
+      if (!editorRef.current) return;
+
+      const disposable = editorRef.current.onDidChangeModelContent(() => {
+        const newContent = editorRef.current!.getValue();
+        onChange(newContent);
+      });
+
+      return () => {
+        disposable.dispose();
+      };
+    }, [onChange]);
+
+    // Actualizar contenido cuando el prop cambia externamente
+    useEffect(() => {
+      if (
+        editorRef.current &&
+        editorRef.current.getValue() !== content
+      ) {
+        editorRef.current.setValue(content);
+      }
+    }, [content]);
+
+    return (
+      <div
+        ref={containerRef}
+        className={className}
+        style={{
+          display: 'flex',
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#ffffff',
+        }}
+      />
+    );
+  }
+);
+
+MonacoEditorComponent.displayName = 'MonacoEditorComponent';
+
+MonacoEditorComponent.displayName = 'MonacoEditorComponent';