@wire-dsl/web 0.3.2 → 0.3.4

package/dist/examples/analytics-dashboard.wire

@@ -1,5 +1,5 @@
-project "Analytics Dashboard" {
-  config {
+project "Admin Dashboard" {
+  style {
     density: "normal"
     spacing: "md"
     radius: "md"
@@ -7,57 +7,87 @@ project "Analytics Dashboard" {
     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"
-        }
+  screen UsersList {
+    layout split(left: 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) {
-          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
-            }
-          }
+      layout stack(direction: vertical, gap: lg, padding: lg) {
+        component Heading text: "Users"
+        component Text text: "Manage system users"
 
-          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 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 labelSpace: true size: lg
           }
+        }
+
+        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 text: "View and edit user information"
+
+      layout panel(padding: lg) {
+        layout stack(direction: vertical, gap: md) {
+          component Heading text: "Account Status"
+          component Text text: "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"
 
-          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 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 text: "Add a new user to the system"
 
-          component Table columns: "User,Country,Device,Time" rows: 10
+      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/dist/examples/form-example.wire

@@ -1,5 +1,5 @@
 project "Form Example" {
-  config {
+  style {
     density: "normal"
     spacing: "md"
     radius: "md"

package/dist/examples/simple-dashboard.wire

@@ -1,5 +1,5 @@
 project "Simple Dashboard" {
-  config {
+  style {
     density: "comfortable"
     spacing: "lg"
     radius: "md"
@@ -32,7 +32,7 @@ project "Simple Dashboard" {
         }
       }
 
-      component ChartPlaceholder type: "bar" height: 300
+      component Chart type: "bar" height: 300
 
       component Table columns: "Date,Event,User" rows: 5
     }

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

@@ -1,5 +1,5 @@
 project "Admin Dashboard Simple" {
-  config {
+  style {
     density: "normal"
     spacing: "md"
     radius: "md"

package/dist/index.html

@@ -5,7 +5,7 @@
     <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-CSmMwHsK.js"></script>
+    <script type="module" crossorigin src="/assets/index-DxoM11k4.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CmAJnnOw.css">
   </head>
   <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wire-dsl/web",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "WireDSL Web - Live editor with React and Monaco",
   "type": "module",
   "publishConfig": {
@@ -14,9 +14,9 @@
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-slot": "1.2.4",
     "lucide-react": "0.562.0",
-    "@wire-dsl/engine": "0.5.0",
+    "@wire-dsl/engine": "0.7.0",
     "@wire-dsl/editor-ui": "0.0.1",
-    "@wire-dsl/language-support": "0.5.0"
+    "@wire-dsl/language-support": "0.7.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "4.1.18",

package/public/examples/admin-dashboard.wire

@@ -1,5 +1,5 @@
 project "Admin Dashboard" {
-  config {
+  style {
     density: "normal"
     spacing: "md"
     radius: "md"
@@ -23,7 +23,7 @@
             component Input label: "Search user" placeholder: "name, email..."
           }
           cell span: 4 align: end {
-            component Button text: "Create user" variant: primary
+            component Button text: "Create user" variant: primary labelSpace: true size: lg
           }
         }
 

package/public/examples/analytics-dashboard.wire

@@ -1,5 +1,5 @@
-project "Analytics Dashboard" {
-  config {
+project "Admin Dashboard" {
+  style {
     density: "normal"
     spacing: "md"
     radius: "md"
@@ -7,57 +7,87 @@ project "Analytics Dashboard" {
     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"
-        }
+  screen UsersList {
+    layout split(left: 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) {
-          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
-            }
-          }
+      layout stack(direction: vertical, gap: lg, padding: lg) {
+        component Heading text: "Users"
+        component Text text: "Manage system users"
 
-          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 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 labelSpace: true size: lg
           }
+        }
+
+        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 text: "View and edit user information"
+
+      layout panel(padding: lg) {
+        layout stack(direction: vertical, gap: md) {
+          component Heading text: "Account Status"
+          component Text text: "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"
 
-          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 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 text: "Add a new user to the system"
 
-          component Table columns: "User,Country,Device,Time" rows: 10
+      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/form-example.wire

@@ -1,5 +1,5 @@
 project "Form Example" {
-  config {
+  style {
     density: "normal"
     spacing: "md"
     radius: "md"

package/public/examples/simple-dashboard.wire

@@ -1,5 +1,5 @@
 project "Simple Dashboard" {
-  config {
+  style {
     density: "comfortable"
     spacing: "lg"
     radius: "md"
@@ -32,7 +32,7 @@ project "Simple Dashboard" {
         }
       }
 
-      component ChartPlaceholder type: "bar" height: 300
+      component Chart type: "bar" height: 300
 
       component Table columns: "Date,Event,User" rows: 5
     }

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

@@ -1,5 +1,5 @@
 project "Admin Dashboard Simple" {
-  config {
+  style {
     density: "normal"
     spacing: "md"
     radius: "md"