@almadar/std 2.1.0 → 2.4.1

package/dist/behaviors/ui-interaction.js

@@ -1,512 +1,663 @@
 // behaviors/ui-interaction.ts
+var UI_SLATE_THEME = {
+  name: "ui-slate",
+  tokens: {
+    colors: {
+      primary: "#475569",
+      "primary-hover": "#334155",
+      "primary-foreground": "#ffffff",
+      accent: "#64748b",
+      "accent-foreground": "#ffffff",
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444"
+    }
+  }
+};
+var LIST_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "icon", name: "list", size: "lg" },
+      { type: "typography", content: "Items", variant: "heading" },
+      { type: "button", label: "Create", event: "CREATE", variant: "primary", icon: "plus" }
+    ] },
+    { type: "divider" },
+    { type: "data-grid", entity: "Item", columns: ["name", "status", "createdAt"], itemActions: [
+      { label: "View", event: "VIEW" },
+      { label: "Edit", event: "EDIT" },
+      { label: "Delete", event: "DELETE", variant: "danger" }
+    ] }
+  ]
+}];
 var LIST_BEHAVIOR = {
   name: "std-list",
   version: "1.0.0",
   description: "Entity list management with CRUD operations",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "ListOrbital",
       entity: {
-        name: "ListState",
-        persistence: "runtime",
+        name: "Item",
+        persistence: "persistent",
+        collection: "items",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "selectedId", type: "string", default: null },
-          { name: "entityType", type: "string", default: "" },
-          { name: "title", type: "string", default: "Items" },
-          { name: "columns", type: "array", default: [] }
+          { name: "name", type: "string", default: "" },
+          { name: "status", type: "enum", default: "active", values: ["active", "inactive", "archived"] },
+          { name: "createdAt", type: "date", default: "" }
         ]
       },
       traits: [
         {
-          name: "List",
-          linkedEntity: "ListState",
+          name: "ListManagement",
+          linkedEntity: "Item",
           category: "interaction",
+          // When composed with other behaviors, add emits for cross-trait events:
+          // emits: [{ event: 'ITEM_CREATED', scope: 'external', payloadSchema: [...] }]
           stateMachine: {
             states: [
-              { name: "Browsing", isInitial: true },
-              { name: "Creating" },
-              { name: "Viewing" },
-              { name: "Editing" },
-              { name: "Deleting" }
+              { name: "browsing", isInitial: true },
+              { name: "creating" },
+              { name: "viewing" },
+              { name: "editing" },
+              { name: "deleting" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
               { key: "CREATE", name: "Create" },
-              { key: "VIEW", name: "View" },
-              { key: "EDIT", name: "Edit" },
-              { key: "DELETE", name: "Delete" },
-              { key: "CONFIRM_DELETE", name: "Confirm Delete" },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] },
+              { key: "EDIT", name: "Edit", payloadSchema: [{ name: "id", type: "string", required: true }] },
+              { key: "DELETE", name: "Delete", payloadSchema: [{ name: "id", type: "string", required: true }] },
+              { key: "CONFIRM_DELETE", name: "Confirm Delete", payloadSchema: [{ name: "id", type: "string", required: true }] },
               { key: "CANCEL", name: "Cancel" },
-              { key: "SAVE", name: "Save" }
+              { key: "CLOSE", name: "Close" },
+              { key: "SAVE", name: "Save", payloadSchema: [{ name: "data", type: "object", required: true }] }
             ],
             transitions: [
               {
-                from: "Browsing",
-                to: "Browsing",
+                from: "browsing",
+                to: "browsing",
                 event: "INIT",
                 effects: [
-                  ["render-ui", "main", {
-                    type: "page-header",
-                    title: "@entity.title",
-                    actions: [{ label: "Create", event: "CREATE", variant: "primary" }]
-                  }],
-                  ["render-ui", "main", {
-                    type: "entity-table",
-                    entity: "@entity.entityType",
-                    columns: "@entity.columns",
-                    itemActions: [
-                      { label: "View", event: "VIEW", placement: "row" },
-                      { label: "Edit", event: "EDIT", placement: "row" },
-                      { label: "Delete", event: "DELETE", variant: "danger", placement: "row" }
-                    ]
-                  }]
+                  ["fetch", "Item"],
+                  LIST_MAIN_VIEW
                 ]
               },
               {
-                from: "Browsing",
-                to: "Creating",
+                from: "browsing",
+                to: "creating",
                 event: "CREATE",
                 effects: [
+                  ["fetch", "Item"],
                   ["render-ui", "modal", {
-                    type: "form-section",
-                    entity: "@entity.entityType",
-                    mode: "create",
-                    onSubmit: "SAVE",
-                    onCancel: "CANCEL"
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "plus-circle", size: "md" },
+                        { type: "typography", content: "Create Item", variant: "heading" }
+                      ] },
+                      { type: "divider" },
+                      { type: "form-section", entity: "Item", mode: "create", submitEvent: "SAVE", cancelEvent: "CANCEL" }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Browsing",
-                to: "Viewing",
+                from: "browsing",
+                to: "viewing",
                 event: "VIEW",
                 effects: [
-                  ["set", "@entity.selectedId", "@payload.id"],
-                  ["render-ui", "drawer", {
-                    type: "detail-panel",
-                    entity: "@entity.entityType",
-                    data: "@payload.id",
-                    actions: [
-                      { label: "Edit", event: "EDIT" },
-                      { label: "Close", event: "CANCEL" }
+                  ["fetch", "Item", { id: "@payload.id" }],
+                  ["render-ui", "modal", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "eye", size: "md" },
+                        { type: "typography", content: "@Item.name", variant: "heading" },
+                        { type: "badge", label: "@Item.status", variant: "outline" }
+                      ] },
+                      { type: "divider" },
+                      { type: "detail-panel", entity: "Item", fields: ["name", "status", "createdAt"] },
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "button", label: "Edit", event: "EDIT", actionPayload: { id: "@payload.id" }, variant: "primary", icon: "pencil" },
+                        { type: "button", label: "Close", event: "CLOSE", variant: "secondary" }
+                      ] }
                     ]
                   }]
                 ]
               },
               {
-                from: "Browsing",
-                to: "Editing",
+                from: "browsing",
+                to: "editing",
                 event: "EDIT",
                 effects: [
-                  ["set", "@entity.selectedId", "@payload.id"],
-                  ["render-ui", "drawer", {
-                    type: "form-section",
-                    entity: "@entity.entityType",
-                    initialData: "@payload.id",
-                    mode: "edit",
-                    onSubmit: "SAVE",
-                    onCancel: "CANCEL"
+                  ["fetch", "Item", { id: "@payload.id" }],
+                  ["render-ui", "modal", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "pencil", size: "md" },
+                        { type: "typography", content: "Edit Item", variant: "heading" }
+                      ] },
+                      { type: "divider" },
+                      { type: "form-section", entity: "Item", entityId: "@payload.id", submitEvent: "SAVE", cancelEvent: "CANCEL" }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Viewing",
-                to: "Editing",
+                from: "viewing",
+                to: "editing",
                 event: "EDIT",
                 effects: [
-                  ["render-ui", "drawer", {
-                    type: "form-section",
-                    entity: "@entity.entityType",
-                    initialData: "@entity.selectedId",
-                    mode: "edit",
-                    onSubmit: "SAVE",
-                    onCancel: "CANCEL"
+                  ["fetch", "Item", { id: "@payload.id" }],
+                  ["render-ui", "modal", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "pencil", size: "md" },
+                        { type: "typography", content: "Edit Item", variant: "heading" }
+                      ] },
+                      { type: "divider" },
+                      { type: "form-section", entity: "Item", entityId: "@payload.id", submitEvent: "SAVE", cancelEvent: "CANCEL" }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Browsing",
-                to: "Deleting",
+                from: "browsing",
+                to: "deleting",
                 event: "DELETE",
                 effects: [
-                  ["set", "@entity.selectedId", "@payload.id"],
+                  ["fetch", "Item", { id: "@payload.id" }],
                   ["render-ui", "modal", {
-                    type: "confirm-dialog",
-                    isOpen: true,
-                    onClose: "CANCEL",
-                    onConfirm: "CONFIRM_DELETE",
-                    title: "Delete Confirmation",
-                    message: "Are you sure you want to delete this item?",
-                    confirmText: "Delete",
-                    variant: "danger"
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "alert-triangle", size: "md" },
+                        { type: "typography", content: "Delete Confirmation", variant: "heading" }
+                      ] },
+                      { type: "divider" },
+                      { type: "typography", content: "Are you sure you want to delete this item?", variant: "body" },
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "button", label: "Delete", event: "CONFIRM_DELETE", actionPayload: { id: "@payload.id" }, variant: "primary", icon: "trash" },
+                        { type: "button", label: "Cancel", event: "CANCEL", variant: "secondary" }
+                      ] }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Creating",
-                to: "Browsing",
+                from: "creating",
+                to: "browsing",
                 event: "SAVE",
                 effects: [
-                  ["persist", "create", "@entity.entityType", "@payload.data"],
-                  ["notify", "in_app", "Created successfully"],
-                  ["emit", "INIT"]
+                  ["persist", "create", "Item", "@payload.data"],
+                  ["fetch", "Item"],
+                  ["render-ui", "modal", null]
                 ]
               },
               {
-                from: "Editing",
-                to: "Browsing",
+                from: "editing",
+                to: "browsing",
                 event: "SAVE",
                 effects: [
-                  ["persist", "update", "@entity.entityType", "@payload.data"],
-                  ["notify", "in_app", "Updated successfully"],
-                  ["emit", "INIT"]
+                  ["persist", "update", "Item", "@payload.data"],
+                  ["fetch", "Item"],
+                  ["render-ui", "modal", null]
                 ]
               },
               {
-                from: "Deleting",
-                to: "Browsing",
+                from: "deleting",
+                to: "browsing",
                 event: "CONFIRM_DELETE",
                 effects: [
-                  ["persist", "delete", "@entity.entityType", "@entity.selectedId"],
-                  ["notify", "in_app", "Deleted successfully"],
-                  ["emit", "INIT"]
+                  ["persist", "delete", "Item", { id: "@payload.id" }],
+                  ["fetch", "Item"],
+                  ["render-ui", "modal", null]
                 ]
               },
-              {
-                from: "Creating",
-                to: "Browsing",
-                event: "CANCEL",
-                effects: []
-              },
-              {
-                from: "Viewing",
-                to: "Browsing",
-                event: "CANCEL",
-                effects: []
-              },
-              {
-                from: "Editing",
-                to: "Browsing",
-                event: "CANCEL",
-                effects: []
-              },
-              {
-                from: "Deleting",
-                to: "Browsing",
-                event: "CANCEL",
-                effects: []
-              }
+              // CANCEL transitions (close modal + re-fetch collection)
+              { from: "creating", to: "browsing", event: "CANCEL", effects: [["fetch", "Item"], ["render-ui", "modal", null]] },
+              { from: "viewing", to: "browsing", event: "CANCEL", effects: [["fetch", "Item"], ["render-ui", "modal", null]] },
+              { from: "editing", to: "browsing", event: "CANCEL", effects: [["fetch", "Item"], ["render-ui", "modal", null]] },
+              { from: "deleting", to: "browsing", event: "CANCEL", effects: [["fetch", "Item"], ["render-ui", "modal", null]] },
+              // CLOSE transitions (alias for CANCEL on view states)
+              { from: "creating", to: "browsing", event: "CLOSE", effects: [["fetch", "Item"], ["render-ui", "modal", null]] },
+              { from: "viewing", to: "browsing", event: "CLOSE", effects: [["fetch", "Item"], ["render-ui", "modal", null]] },
+              { from: "editing", to: "browsing", event: "CLOSE", effects: [["fetch", "Item"], ["render-ui", "modal", null]] },
+              { from: "deleting", to: "browsing", event: "CLOSE", effects: [["fetch", "Item"], ["render-ui", "modal", null]] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "ItemsPage",
+          path: "/items",
+          isInitial: true,
+          traits: [{ ref: "ListManagement" }]
+        }
+      ]
     }
   ]
 };
+var DETAIL_LIST_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "file-text", size: "lg" },
+        { type: "typography", content: "Records", variant: "h2" }
+      ] },
+      { type: "button", label: "Create", action: "CREATE", variant: "primary", icon: "plus" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "Record",
+      fields: [
+        { name: "name", label: "Name", icon: "file-text", variant: "h4" },
+        { name: "description", label: "Description", icon: "align-left", variant: "body" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" }
+      ],
+      actions: [
+        { label: "View", event: "SELECT", icon: "eye", variant: "secondary" }
+      ]
+    }
+  ]
+}];
+var DETAIL_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "file-text", size: "lg" },
+        { type: "typography", content: "@entity.name", variant: "h2" }
+      ] },
+      { type: "badge", label: "@entity.status", variant: "outline" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "Record",
+      fields: [
+        { name: "name", label: "Name", icon: "file-text", variant: "h4" },
+        { name: "description", label: "Description", icon: "align-left", variant: "body" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" }
+      ]
+    },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Edit", action: "EDIT", variant: "primary", icon: "pencil" },
+      { type: "button", label: "Delete", action: "DELETE", variant: "secondary", icon: "trash" },
+      { type: "button", label: "Back", action: "BACK", variant: "ghost", icon: "arrow-left" }
+    ] }
+  ]
+}];
 var DETAIL_BEHAVIOR = {
   name: "std-detail",
   version: "1.0.0",
   description: "Single entity view with edit/delete capabilities",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "DetailOrbital",
       entity: {
-        name: "DetailState",
-        persistence: "runtime",
+        name: "Record",
+        persistence: "persistent",
+        collection: "records",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "entityId", type: "string", default: null },
-          { name: "isLoading", type: "boolean", default: false },
-          { name: "hasChanges", type: "boolean", default: false },
-          { name: "entityType", type: "string", default: "" },
-          { name: "fields", type: "array", default: [] },
-          { name: "returnUrl", type: "string", default: "/" }
+          { name: "name", type: "string", default: "" },
+          { name: "description", type: "string", default: "" },
+          { name: "status", type: "string", default: "active" }
         ]
       },
       traits: [
         {
-          name: "Detail",
-          linkedEntity: "DetailState",
+          name: "DetailView",
+          linkedEntity: "Record",
           category: "interaction",
+          // When composed: emits: [{ event: 'RECORD_UPDATED', ... }, { event: 'RECORD_DELETED', ... }]
           stateMachine: {
             states: [
-              { name: "Viewing", isInitial: true },
-              { name: "Editing" },
-              { name: "Deleting" }
+              { name: "browsing", isInitial: true },
+              { name: "viewing" },
+              { name: "creating" },
+              { name: "editing" },
+              { name: "deleting" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
+              { key: "SELECT", name: "Select Record" },
+              { key: "CREATE", name: "Create Record" },
+              { key: "BACK", name: "Back to List" },
               { key: "EDIT", name: "Edit" },
-              { key: "SAVE", name: "Save" },
+              { key: "SAVE", name: "Save", payloadSchema: [{ name: "data", type: "object", required: true }] },
               { key: "CANCEL", name: "Cancel" },
+              { key: "CLOSE", name: "Close" },
               { key: "DELETE", name: "Delete" },
               { key: "CONFIRM_DELETE", name: "Confirm Delete" }
             ],
             transitions: [
               {
-                from: "Viewing",
-                to: "Viewing",
+                from: "browsing",
+                to: "browsing",
                 event: "INIT",
                 effects: [
-                  ["render-ui", "main", {
-                    type: "page-header",
-                    title: "@entity.name",
-                    actions: [
-                      { label: "Edit", event: "EDIT" },
-                      { label: "Delete", event: "DELETE", variant: "danger" }
+                  ["fetch", "Record"],
+                  DETAIL_LIST_VIEW
+                ]
+              },
+              {
+                from: "browsing",
+                to: "viewing",
+                event: "SELECT",
+                effects: [
+                  ["fetch", "Record"],
+                  DETAIL_MAIN_VIEW
+                ]
+              },
+              {
+                from: "viewing",
+                to: "browsing",
+                event: "BACK",
+                effects: [
+                  ["fetch", "Record"],
+                  DETAIL_LIST_VIEW
+                ]
+              },
+              {
+                from: "browsing",
+                to: "creating",
+                event: "CREATE",
+                effects: [
+                  ["render-ui", "modal", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "plus", size: "md" },
+                        { type: "typography", content: "New Record", variant: "h3" }
+                      ] },
+                      { type: "divider" },
+                      { type: "form-section", entity: "Record", mode: "create", submitEvent: "SAVE", cancelEvent: "CANCEL" }
                     ]
-                  }],
-                  ["render-ui", "main", {
-                    type: "detail-panel",
-                    entity: "@entity.entityType",
-                    fieldNames: "@entity.fields"
                   }]
                 ]
               },
               {
-                from: "Viewing",
-                to: "Editing",
+                from: "creating",
+                to: "browsing",
+                event: "SAVE",
+                effects: [
+                  ["persist", "create", "Record", "@payload.data"],
+                  ["fetch", "Record"],
+                  ["render-ui", "modal", null],
+                  DETAIL_LIST_VIEW
+                ]
+              },
+              {
+                from: "viewing",
+                to: "editing",
                 event: "EDIT",
                 effects: [
-                  ["render-ui", "main", {
-                    type: "form-section",
-                    entity: "@entity.entityType",
-                    mode: "edit",
-                    fields: "@entity.fields",
-                    onSubmit: "SAVE",
-                    onCancel: "CANCEL"
+                  ["fetch", "Record"],
+                  ["render-ui", "modal", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "pencil", size: "md" },
+                        { type: "typography", content: "Edit Record", variant: "h3" }
+                      ] },
+                      { type: "divider" },
+                      { type: "form-section", entity: "Record", mode: "edit", submitEvent: "SAVE", cancelEvent: "CANCEL" }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Editing",
-                to: "Viewing",
+                from: "editing",
+                to: "viewing",
                 event: "SAVE",
                 effects: [
-                  ["persist", "update", "@entity.entityType", "@payload.data"],
-                  ["notify", "in_app", "Updated successfully"],
-                  ["emit", "INIT"]
+                  ["persist", "update", "Record", "@payload.data"],
+                  ["render-ui", "modal", null]
                 ]
               },
               {
-                from: "Editing",
-                to: "Viewing",
-                event: "CANCEL",
-                effects: [["emit", "INIT"]]
-              },
-              {
-                from: "Viewing",
-                to: "Deleting",
+                from: "viewing",
+                to: "deleting",
                 event: "DELETE",
                 effects: [
                   ["render-ui", "modal", {
-                    type: "confirm-dialog",
-                    isOpen: true,
-                    onClose: "CANCEL",
-                    onConfirm: "CONFIRM",
-                    title: "Delete Confirmation",
-                    message: "Are you sure you want to delete this item?"
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "alert-triangle", size: "md" },
+                        { type: "typography", content: "Delete Confirmation", variant: "h3" }
+                      ] },
+                      { type: "divider" },
+                      { type: "typography", content: "Are you sure you want to delete this record?", variant: "body" },
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "button", label: "Delete", action: "CONFIRM_DELETE", variant: "primary", icon: "trash" },
+                        { type: "button", label: "Cancel", action: "CANCEL", variant: "secondary" }
+                      ] }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Deleting",
-                to: "Viewing",
+                from: "deleting",
+                to: "browsing",
                 event: "CONFIRM_DELETE",
                 effects: [
-                  ["persist", "delete", "@entity.entityType", "@entity.id"],
-                  ["navigate", "@entity.returnUrl"]
+                  ["persist", "delete", "Record"],
+                  ["fetch", "Record"],
+                  ["render-ui", "modal", null],
+                  DETAIL_LIST_VIEW
                 ]
               },
-              {
-                from: "Deleting",
-                to: "Viewing",
-                event: "CANCEL",
-                effects: []
-              }
+              // Modal close transitions
+              { from: "creating", to: "browsing", event: "CANCEL", effects: [["render-ui", "modal", null], DETAIL_LIST_VIEW] },
+              { from: "creating", to: "browsing", event: "CLOSE", effects: [["render-ui", "modal", null], DETAIL_LIST_VIEW] },
+              { from: "editing", to: "viewing", event: "CANCEL", effects: [["render-ui", "modal", null]] },
+              { from: "editing", to: "viewing", event: "CLOSE", effects: [["render-ui", "modal", null]] },
+              { from: "deleting", to: "viewing", event: "CANCEL", effects: [["render-ui", "modal", null]] },
+              { from: "deleting", to: "viewing", event: "CLOSE", effects: [["render-ui", "modal", null]] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "RecordsPage",
+          path: "/records",
+          isInitial: true,
+          traits: [{ ref: "DetailView" }]
+        }
+      ]
     }
   ]
 };
+var FORM_EDITING_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "icon", name: "file-plus", size: "lg" },
+      { type: "typography", content: "New Entry", variant: "heading" }
+    ] },
+    { type: "divider" },
+    { type: "form-section", entity: "FormEntry", mode: "create", submitEvent: "SUBMIT" }
+  ]
+}];
 var FORM_BEHAVIOR = {
   name: "std-form",
   version: "1.0.0",
   description: "Form state management with validation and submission",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "FormOrbital",
       entity: {
-        name: "FormState",
-        persistence: "runtime",
+        name: "FormEntry",
+        persistence: "persistent",
+        collection: "entries",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "values", type: "object", default: {} },
-          { name: "errors", type: "object", default: {} },
-          { name: "touched", type: "object", default: {} },
-          { name: "isDirty", type: "boolean", default: false },
-          { name: "isSubmitting", type: "boolean", default: false },
-          { name: "entityType", type: "string", default: "" },
-          { name: "fields", type: "array", default: [] },
-          { name: "mode", type: "string", default: "create" },
-          { name: "validation", type: "object", default: {} },
-          { name: "cancelEvent", type: "string", default: "CANCEL" },
-          { name: "submitEvent", type: "string", default: "SUBMIT_SUCCESS" }
+          { name: "name", type: "string", default: "" },
+          { name: "value", type: "string", default: "" },
+          { name: "status", type: "string", default: "draft" }
         ]
       },
       traits: [
         {
-          name: "Form",
-          linkedEntity: "FormState",
+          name: "FormFlow",
+          linkedEntity: "FormEntry",
           category: "interaction",
+          // When composed: emits: [{ event: 'FORM_SUBMITTED', ... }]
           stateMachine: {
             states: [
-              { name: "Idle", isInitial: true },
-              { name: "Editing" },
-              { name: "Validating" },
-              { name: "Submitting" },
-              { name: "Success", isTerminal: true },
-              { name: "Error" }
+              { name: "idle", isInitial: true },
+              { name: "editing" },
+              { name: "submitting" },
+              { name: "success" },
+              { name: "error" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "FIELD_CHANGE", name: "Field Change" },
-              { key: "FIELD_BLUR", name: "Field Blur" },
-              { key: "SUBMIT", name: "Submit" },
-              { key: "VALIDATION_PASSED", name: "Validation Passed" },
-              { key: "VALIDATION_FAILED", name: "Validation Failed" },
+              { key: "SUBMIT", name: "Submit", payloadSchema: [{ name: "data", type: "object", required: true }] },
               { key: "SUBMIT_SUCCESS", name: "Submit Success" },
-              { key: "SUBMIT_ERROR", name: "Submit Error" },
-              { key: "RESET", name: "Reset" }
+              { key: "SUBMIT_ERROR", name: "Submit Error", payloadSchema: [{ name: "message", type: "string", required: true }] },
+              { key: "RESET", name: "Reset" },
+              { key: "RETRY", name: "Retry" }
             ],
             transitions: [
               {
-                from: "Idle",
-                to: "Editing",
+                from: "idle",
+                to: "editing",
                 event: "INIT",
                 effects: [
-                  ["render-ui", "main", {
-                    type: "form-section",
-                    entity: "@entity.entityType",
-                    fields: "@entity.fields",
-                    initialData: "@entity.values",
-                    onSubmit: "SUBMIT",
-                    onCancel: "@entity.cancelEvent"
-                  }]
-                ]
-              },
-              {
-                from: "Editing",
-                to: "Editing",
-                event: "FIELD_CHANGE",
-                effects: [
-                  ["set", "@entity.values", ["object/set", "@entity.values", "@payload.field", "@payload.value"]],
-                  ["set", "@entity.isDirty", true]
-                ]
-              },
-              {
-                from: "Editing",
-                to: "Editing",
-                event: "FIELD_BLUR",
-                effects: [
-                  ["set", "@entity.touched", ["object/set", "@entity.touched", "@payload.field", true]]
+                  ["fetch", "FormEntry"],
+                  FORM_EDITING_VIEW
                 ]
               },
               {
-                from: "Editing",
-                to: "Validating",
+                from: "editing",
+                to: "submitting",
                 event: "SUBMIT",
                 effects: [
-                  [
-                    "let",
-                    [["result", ["validate/check", "@entity.values", "@entity.validation"]]],
-                    [
-                      "if",
-                      "@result.valid",
-                      ["emit", "VALIDATION_PASSED"],
-                      [
-                        "do",
-                        ["set", "@entity.errors", "@result.errors"],
-                        ["emit", "VALIDATION_FAILED"]
-                      ]
+                  ["persist", "create", "FormEntry", "@payload.data"],
+                  ["render-ui", "main", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "icon", name: "loader", size: "lg" },
+                      { type: "typography", content: "Saving", variant: "heading" },
+                      { type: "typography", content: "Please wait...", variant: "body" },
+                      { type: "progress-bar", value: 50 }
                     ]
-                  ]
-                ]
-              },
-              {
-                from: "Validating",
-                to: "Submitting",
-                event: "VALIDATION_PASSED",
-                effects: [
-                  ["set", "@entity.isSubmitting", true],
-                  [
-                    "if",
-                    ["=", "@entity.mode", "create"],
-                    ["persist", "create", "@entity.entityType", "@entity.values"],
-                    ["persist", "update", "@entity.entityType", "@entity.values"]
-                  ]
+                  }]
                 ]
               },
               {
-                from: "Validating",
-                to: "Editing",
-                event: "VALIDATION_FAILED",
+                from: "submitting",
+                to: "success",
+                event: "SUBMIT_SUCCESS",
                 effects: [
-                  ["notify", "in_app", "Please fix the validation errors"]
+                  ["render-ui", "main", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "icon", name: "check-circle", size: "lg" },
+                      { type: "typography", content: "Success", variant: "heading" },
+                      { type: "typography", content: "Entry saved successfully.", variant: "body" },
+                      { type: "button", label: "Start Over", event: "RESET", variant: "primary", icon: "refresh-cw" }
+                    ]
+                  }]
                 ]
               },
               {
-                from: "Submitting",
-                to: "Success",
-                event: "SUBMIT_SUCCESS",
+                from: "submitting",
+                to: "error",
+                event: "SUBMIT_ERROR",
                 effects: [
-                  ["set", "@entity.isSubmitting", false],
-                  ["notify", "in_app", "Saved successfully"],
-                  ["emit", "@entity.submitEvent", { data: "@entity.values" }]
+                  ["render-ui", "main", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "icon", name: "x-circle", size: "lg" },
+                      { type: "typography", content: "Error", variant: "heading" },
+                      { type: "typography", content: "Failed to save. Please try again.", variant: "body" },
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "button", label: "Retry", event: "RETRY", variant: "primary", icon: "refresh-cw" },
+                        { type: "button", label: "Reset", event: "RESET", variant: "secondary" }
+                      ] }
+                    ]
+                  }]
                 ]
               },
               {
-                from: "Submitting",
-                to: "Error",
-                event: "SUBMIT_ERROR",
+                from: "error",
+                to: "editing",
+                event: "RETRY",
                 effects: [
-                  ["set", "@entity.isSubmitting", false],
-                  ["set", "@entity.errors", { _form: "@payload.error" }],
-                  ["notify", "in_app", "@payload.error"]
+                  ["fetch", "FormEntry"],
+                  FORM_EDITING_VIEW
                 ]
               },
               {
-                from: "Editing",
-                to: "Idle",
+                from: "success",
+                to: "idle",
                 event: "RESET",
-                effects: [
-                  ["set", "@entity.values", {}],
-                  ["set", "@entity.errors", {}],
-                  ["set", "@entity.touched", {}],
-                  ["set", "@entity.isDirty", false]
-                ]
+                effects: []
               },
               {
-                from: "Error",
-                to: "Idle",
+                from: "error",
+                to: "idle",
                 event: "RESET",
-                effects: [
-                  ["set", "@entity.values", {}],
-                  ["set", "@entity.errors", {}],
-                  ["set", "@entity.touched", {}],
-                  ["set", "@entity.isDirty", false]
-                ]
+                effects: []
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "FormPage",
+          path: "/entries/new",
+          isInitial: true,
+          traits: [{ ref: "FormFlow" }]
+        }
+      ]
     }
   ]
 };
@@ -514,120 +665,210 @@ var MODAL_BEHAVIOR = {
   name: "std-modal",
   version: "1.0.0",
   description: "Modal dialog with open/close state management",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "ModalOrbital",
       entity: {
-        name: "ModalState",
+        name: "ModalContent",
         persistence: "runtime",
+        collection: "modals",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "content", type: "object", default: null }
+          { name: "title", type: "string", default: "" },
+          { name: "message", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Modal",
-          linkedEntity: "ModalState",
+          name: "ModalControl",
+          linkedEntity: "ModalContent",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "Closed", isInitial: true },
-              { name: "Open" }
+              { name: "closed", isInitial: true },
+              { name: "open" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "OPEN", name: "Open" },
               { key: "CLOSE", name: "Close" },
+              { key: "CANCEL", name: "Cancel" },
               { key: "CONFIRM", name: "Confirm" }
             ],
             transitions: [
               {
-                from: "Closed",
-                to: "Open",
+                from: "closed",
+                to: "closed",
+                event: "INIT",
+                effects: [
+                  ["render-ui", "main", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "icon", name: "message-square", size: "lg" },
+                      { type: "typography", content: "Ready", variant: "heading" },
+                      { type: "typography", content: "Click to open dialog.", variant: "body" },
+                      { type: "button", label: "Open Dialog", event: "OPEN", variant: "primary", icon: "external-link" }
+                    ]
+                  }]
+                ]
+              },
+              {
+                from: "closed",
+                to: "open",
                 event: "OPEN",
                 effects: [
-                  ["set", "@entity.content", "@payload.content"],
                   ["render-ui", "modal", {
-                    type: "modal",
-                    isOpen: true,
-                    onClose: "CLOSE"
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "help-circle", size: "md" },
+                        { type: "typography", content: "@entity.title", variant: "heading" }
+                      ] },
+                      { type: "divider" },
+                      { type: "typography", content: "@entity.message", variant: "body" },
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "button", label: "Confirm", event: "CONFIRM", variant: "primary", icon: "check" },
+                        { type: "button", label: "Cancel", event: "CANCEL", variant: "secondary" }
+                      ] }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Open",
-                to: "Closed",
+                from: "open",
+                to: "closed",
                 event: "CLOSE",
-                effects: []
+                effects: [["render-ui", "modal", null]]
               },
               {
-                from: "Open",
-                to: "Closed",
+                from: "open",
+                to: "closed",
+                event: "CANCEL",
+                effects: [["render-ui", "modal", null]]
+              },
+              {
+                from: "open",
+                to: "closed",
                 event: "CONFIRM",
-                effects: []
+                effects: [["render-ui", "modal", null]]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "ModalDemoPage",
+          path: "/modal",
+          isInitial: true,
+          traits: [{ ref: "ModalControl" }]
+        }
+      ]
     }
   ]
 };
 var DRAWER_BEHAVIOR = {
   name: "std-drawer",
   version: "1.0.0",
-  description: "Side drawer panel for detail views and forms",
+  description: "Side drawer panel for detail views",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "DrawerOrbital",
       entity: {
-        name: "DrawerState",
+        name: "DrawerItem",
         persistence: "runtime",
+        collection: "draweritems",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "content", type: "object", default: null }
+          { name: "title", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Drawer",
-          linkedEntity: "DrawerState",
+          name: "DrawerControl",
+          linkedEntity: "DrawerItem",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "Closed", isInitial: true },
-              { name: "Open" }
+              { name: "closed", isInitial: true },
+              { name: "open" }
             ],
             events: [
+              { key: "INIT", name: "Initialize" },
               { key: "OPEN", name: "Open" },
-              { key: "CLOSE", name: "Close" }
+              { key: "CLOSE", name: "Close" },
+              { key: "CANCEL", name: "Cancel" }
             ],
             transitions: [
               {
-                from: "Closed",
-                to: "Open",
+                from: "closed",
+                to: "closed",
+                event: "INIT",
+                effects: [
+                  ["render-ui", "main", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "icon", name: "sidebar", size: "lg" },
+                      { type: "typography", content: "Drawer", variant: "heading" },
+                      { type: "typography", content: "Select an item to open the drawer.", variant: "body" }
+                    ]
+                  }]
+                ]
+              },
+              {
+                from: "closed",
+                to: "open",
                 event: "OPEN",
                 effects: [
-                  ["set", "@entity.content", "@payload.content"],
-                  ["render-ui", "drawer", {
-                    type: "drawer",
-                    isOpen: true,
-                    onClose: "CLOSE"
+                  ["fetch", "DrawerItem"],
+                  ["render-ui", "modal", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "sm", children: [
+                        { type: "icon", name: "info", size: "md" },
+                        { type: "typography", content: "@entity.title", variant: "heading" }
+                      ] },
+                      { type: "divider" },
+                      { type: "data-list", entity: "DrawerItem", fields: ["title"] },
+                      { type: "button", label: "Close", event: "CLOSE", variant: "secondary", icon: "x" }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Open",
-                to: "Closed",
+                from: "open",
+                to: "closed",
                 event: "CLOSE",
-                effects: []
+                effects: [["render-ui", "modal", null]]
+              },
+              {
+                from: "open",
+                to: "closed",
+                event: "CANCEL",
+                effects: [["render-ui", "modal", null]]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "DrawerDemoPage",
+          path: "/drawer",
+          isInitial: true,
+          traits: [{ ref: "DrawerControl" }]
+        }
+      ]
     }
   ]
 };
@@ -635,373 +876,542 @@ var TABS_BEHAVIOR = {
   name: "std-tabs",
   version: "1.0.0",
   description: "Tabbed navigation within a page",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "TabsOrbital",
       entity: {
-        name: "TabsState",
+        name: "TabContent",
         persistence: "runtime",
+        collection: "tabcontents",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "activeTab", type: "string", default: null },
-          { name: "tabs", type: "array", default: [] },
-          { name: "defaultTab", type: "string", default: null }
+          { name: "activeTab", type: "string", default: "overview" }
         ]
       },
       traits: [
         {
-          name: "Tabs",
-          linkedEntity: "TabsState",
+          name: "TabNavigation",
+          linkedEntity: "TabContent",
           category: "interaction",
           stateMachine: {
-            states: [{ name: "Active", isInitial: true }],
+            states: [{ name: "active", isInitial: true }],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "SELECT_TAB", name: "Select Tab" }
+              { key: "SELECT_TAB", name: "Select Tab", payloadSchema: [{ name: "tabId", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Active",
-                to: "Active",
+                from: "active",
+                to: "active",
                 event: "INIT",
                 effects: [
-                  ["set", "@entity.activeTab", "@entity.defaultTab"],
+                  ["fetch", "TabContent"],
                   ["render-ui", "main", {
-                    type: "tabs",
-                    tabs: "@entity.tabs",
-                    activeTab: "@entity.activeTab",
-                    onTabChange: "SELECT_TAB"
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "lg",
+                    children: [
+                      { type: "stack", direction: "horizontal", gap: "md", children: [
+                        { type: "icon", name: "layers", size: "lg" },
+                        { type: "typography", content: "Tabs", variant: "h2" },
+                        { type: "button", label: "Add Tab", action: "SELECT_TAB", icon: "plus", variant: "primary" }
+                      ] },
+                      { type: "divider" },
+                      {
+                        type: "tabs",
+                        entity: "TabContent",
+                        onTabChange: "SELECT_TAB",
+                        tabs: [
+                          { id: "overview", label: "Overview" },
+                          { id: "details", label: "Details" },
+                          { id: "settings", label: "Settings" }
+                        ]
+                      }
+                    ]
                   }]
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "active",
+                to: "active",
                 event: "SELECT_TAB",
-                effects: [["set", "@entity.activeTab", "@payload.tabId"]]
+                effects: [
+                  ["set", "@entity.activeTab", "@payload.tabId"]
+                ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "TabsPage",
+          path: "/tabs",
+          isInitial: true,
+          traits: [{ ref: "TabNavigation" }]
+        }
+      ]
     }
   ]
 };
+var WIZARD_STEPS = ["Basic Info", "Details", "Review"];
+var WIZARD_STEP1_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "icon", name: "clipboard", size: "lg" },
+      { type: "typography", content: "Setup Wizard", variant: "heading" },
+      { type: "badge", label: "Step 1 of 3", variant: "outline" }
+    ] },
+    { type: "wizard-progress", steps: WIZARD_STEPS, currentStep: 0 },
+    { type: "divider" },
+    { type: "form-section", entity: "WizardEntry", submitEvent: "NEXT" }
+  ]
+}];
+var WIZARD_STEP2_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "icon", name: "clipboard", size: "lg" },
+      { type: "typography", content: "Setup Wizard", variant: "heading" },
+      { type: "badge", label: "Step 2 of 3", variant: "outline" }
+    ] },
+    { type: "wizard-progress", steps: WIZARD_STEPS, currentStep: 1 },
+    { type: "divider" },
+    { type: "form-section", entity: "WizardEntry", submitEvent: "NEXT", cancelEvent: "PREV" }
+  ]
+}];
+var WIZARD_REVIEW_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "icon", name: "clipboard", size: "lg" },
+      { type: "typography", content: "Setup Wizard", variant: "heading" },
+      { type: "badge", label: "Step 3 of 3", variant: "outline" }
+    ] },
+    { type: "wizard-progress", steps: WIZARD_STEPS, currentStep: 2 },
+    { type: "divider" },
+    { type: "data-list", entity: "WizardEntry", fields: ["name", "category", "details", "status"] },
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "button", label: "Back", event: "PREV", variant: "secondary", icon: "arrow-left" },
+      { type: "button", label: "Complete", event: "COMPLETE", variant: "primary", icon: "check" }
+    ] }
+  ]
+}];
 var WIZARD_BEHAVIOR = {
   name: "std-wizard",
   version: "1.0.0",
-  description: "Multi-step wizard flow - each step is a state",
+  description: "Multi-step wizard flow",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "WizardOrbital",
       entity: {
-        name: "WizardState",
-        persistence: "runtime",
+        name: "WizardEntry",
+        persistence: "persistent",
+        collection: "wizardentries",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "stepData", type: "object", default: {} },
-          { name: "entityType", type: "string", default: "" },
-          { name: "step1Fields", type: "array", default: [] },
-          { name: "step2Fields", type: "array", default: [] },
-          { name: "completionUrl", type: "string", default: "/" }
+          { name: "name", type: "string", default: "" },
+          { name: "category", type: "string", default: "" },
+          { name: "details", type: "string", default: "" },
+          { name: "status", type: "string", default: "draft" }
         ]
       },
       traits: [
         {
-          name: "Wizard",
-          linkedEntity: "WizardState",
+          name: "WizardFlow",
+          linkedEntity: "WizardEntry",
           category: "interaction",
+          // When composed: emits: [{ event: 'WIZARD_COMPLETED', ... }]
           stateMachine: {
             states: [
-              { name: "Step1", isInitial: true },
-              { name: "Step2" },
-              { name: "Step3" },
-              { name: "Complete", isTerminal: true }
+              { name: "step1", isInitial: true },
+              { name: "step2" },
+              { name: "review" },
+              { name: "complete" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "NEXT", name: "Next" },
+              { key: "NEXT", name: "Next", payloadSchema: [{ name: "data", type: "object", required: true }] },
               { key: "PREV", name: "Previous" },
               { key: "COMPLETE", name: "Complete" }
             ],
             transitions: [
               {
-                from: "Step1",
-                to: "Step1",
+                from: "step1",
+                to: "step1",
                 event: "INIT",
                 effects: [
-                  ["render-ui", "main", {
-                    type: "wizard-progress",
-                    steps: ["Step 1", "Step 2", "Step 3"],
-                    currentStep: 0
-                  }],
-                  ["render-ui", "main", {
-                    type: "form-section",
-                    entity: "@entity.entityType",
-                    fields: "@entity.step1Fields",
-                    onSubmit: "NEXT"
-                  }]
+                  ["fetch", "WizardEntry"],
+                  WIZARD_STEP1_VIEW
                 ]
               },
               {
-                from: "Step1",
-                to: "Step2",
+                from: "step1",
+                to: "step2",
                 event: "NEXT",
                 effects: [
-                  ["set", "@entity.stepData.step1", "@payload"],
-                  ["render-ui", "main", {
-                    type: "wizard-progress",
-                    steps: ["Step 1", "Step 2", "Step 3"],
-                    currentStep: 1
-                  }],
-                  ["render-ui", "main", {
-                    type: "form-section",
-                    entity: "@entity.entityType",
-                    fields: "@entity.step2Fields",
-                    onSubmit: "NEXT",
-                    onCancel: "PREV"
-                  }]
+                  ["fetch", "WizardEntry"],
+                  WIZARD_STEP2_VIEW
                 ]
               },
               {
-                from: "Step2",
-                to: "Step1",
+                from: "step2",
+                to: "step1",
                 event: "PREV",
-                effects: [["emit", "INIT"]]
+                effects: [
+                  ["fetch", "WizardEntry"],
+                  WIZARD_STEP1_VIEW
+                ]
               },
               {
-                from: "Step2",
-                to: "Step3",
+                from: "step2",
+                to: "review",
                 event: "NEXT",
                 effects: [
-                  ["set", "@entity.stepData.step2", "@payload"],
-                  ["render-ui", "main", {
-                    type: "wizard-progress",
-                    steps: ["Step 1", "Step 2", "Step 3"],
-                    currentStep: 2
-                  }],
-                  ["render-ui", "main", {
-                    type: "detail-panel",
-                    entity: "@entity.entityType",
-                    fieldNames: ["step1", "step2"],
-                    title: "Review"
-                  }]
+                  ["fetch", "WizardEntry"],
+                  WIZARD_REVIEW_VIEW
                 ]
               },
               {
-                from: "Step3",
-                to: "Step2",
+                from: "review",
+                to: "step2",
                 event: "PREV",
-                effects: []
+                effects: [
+                  ["fetch", "WizardEntry"],
+                  WIZARD_STEP2_VIEW
+                ]
               },
               {
-                from: "Step3",
-                to: "Complete",
+                from: "review",
+                to: "complete",
                 event: "COMPLETE",
                 effects: [
-                  ["persist", "create", "@entity.entityType", "@entity.stepData"],
-                  ["notify", "in_app", "Wizard completed!"],
-                  ["navigate", "@entity.completionUrl"]
+                  ["persist", "create", "WizardEntry", {}],
+                  ["render-ui", "main", {
+                    type: "stack",
+                    direction: "vertical",
+                    gap: "md",
+                    children: [
+                      { type: "icon", name: "check-circle", size: "lg" },
+                      { type: "typography", content: "Complete", variant: "heading" },
+                      { type: "typography", content: "Your entry has been submitted.", variant: "body" },
+                      { type: "button", label: "Start New", event: "INIT", variant: "primary", icon: "plus" }
+                    ]
+                  }]
+                ]
+              },
+              {
+                from: "complete",
+                to: "step1",
+                event: "INIT",
+                effects: [
+                  ["fetch", "WizardEntry"],
+                  WIZARD_STEP1_VIEW
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "WizardPage",
+          path: "/wizard",
+          isInitial: true,
+          traits: [{ ref: "WizardFlow" }]
+        }
+      ]
     }
   ]
 };
+var MASTER_LIST_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "horizontal",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "vertical", gap: "md", children: [
+      { type: "stack", direction: "horizontal", gap: "md", children: [
+        { type: "icon", name: "layout", size: "lg" },
+        { type: "typography", content: "Assets", variant: "h2" }
+      ] },
+      { type: "data-list", entity: "Asset", fields: ["name", "type", "description"], itemActions: [{ label: "View", event: "SELECT" }] }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "vertical", gap: "md", align: "center", children: [
+      { type: "icon", name: "file-text", size: "xl" },
+      { type: "typography", content: "Select an item to view details", variant: "body" }
+    ] }
+  ]
+}];
+var MASTER_DETAIL_SELECTED_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "horizontal",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "vertical", gap: "md", children: [
+      { type: "stack", direction: "horizontal", gap: "md", children: [
+        { type: "icon", name: "layout", size: "lg" },
+        { type: "typography", content: "Assets", variant: "h2" }
+      ] },
+      { type: "data-list", entity: "Asset", fields: ["name", "type"], itemActions: [{ label: "View", event: "SELECT" }] }
+    ] },
+    { type: "divider" },
+    { type: "stack", direction: "vertical", gap: "md", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "file-text", size: "md" },
+        { type: "typography", content: "@entity.name", variant: "h3" },
+        { type: "badge", label: "@entity.type", variant: "outline" }
+      ] },
+      { type: "stack", direction: "horizontal", gap: "md", children: [
+        { type: "stat-card", label: "Name", value: "@entity.name", icon: "tag" },
+        { type: "stat-card", label: "Type", value: "@entity.type", icon: "folder" }
+      ] },
+      { type: "data-list", entity: "Asset", fields: ["name", "type", "description"] },
+      { type: "button", label: "Back", action: "DESELECT", variant: "secondary", icon: "arrow-left" }
+    ] }
+  ]
+}];
 var MASTER_DETAIL_BEHAVIOR = {
   name: "std-masterdetail",
   version: "1.0.0",
   description: "Master-detail layout with synchronized list and detail views",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "MasterDetailOrbital",
       entity: {
-        name: "MasterDetailState",
-        persistence: "runtime",
+        name: "Asset",
+        persistence: "persistent",
+        collection: "assets",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "selectedId", type: "string", default: null },
-          { name: "entityType", type: "string", default: "" },
-          { name: "masterColumns", type: "array", default: [] },
-          { name: "detailFields", type: "array", default: [] }
+          { name: "name", type: "string", default: "" },
+          { name: "type", type: "string", default: "" },
+          { name: "description", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "MasterDetail",
-          linkedEntity: "MasterDetailState",
+          name: "MasterDetailNav",
+          linkedEntity: "Asset",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "NoSelection", isInitial: true },
-              { name: "Selected" }
+              { name: "browsing", isInitial: true },
+              { name: "selected" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "SELECT", name: "Select" },
+              { key: "SELECT", name: "Select", payloadSchema: [{ name: "id", type: "string", required: true }] },
               { key: "DESELECT", name: "Deselect" }
             ],
             transitions: [
               {
-                from: "NoSelection",
-                to: "NoSelection",
+                from: "browsing",
+                to: "browsing",
                 event: "INIT",
                 effects: [
-                  ["render-ui", "main", {
-                    type: "master-detail",
-                    master: "@entity.entityType",
-                    detail: "@entity.selectedId",
-                    hasSelection: "@entity.hasSelection"
-                  }],
-                  ["render-ui", "main", {
-                    type: "empty-state",
-                    message: "Select an item to view details"
-                  }]
+                  ["fetch", "Asset"],
+                  MASTER_LIST_VIEW
                 ]
               },
               {
-                from: "NoSelection",
-                to: "Selected",
+                from: "browsing",
+                to: "selected",
                 event: "SELECT",
                 effects: [
-                  ["set", "@entity.selectedId", "@payload.id"],
-                  ["render-ui", "main", {
-                    type: "detail-panel",
-                    entity: "@entity.entityType",
-                    data: "@payload.id",
-                    fieldNames: "@entity.detailFields"
-                  }]
+                  ["fetch", "Asset"],
+                  MASTER_DETAIL_SELECTED_VIEW
                 ]
               },
               {
-                from: "Selected",
-                to: "Selected",
+                from: "selected",
+                to: "selected",
                 event: "SELECT",
                 effects: [
-                  ["set", "@entity.selectedId", "@payload.id"],
-                  ["render-ui", "main", {
-                    type: "detail-panel",
-                    entity: "@entity.entityType",
-                    data: "@payload.id",
-                    fieldNames: "@entity.detailFields"
-                  }]
+                  ["fetch", "Asset"],
+                  MASTER_DETAIL_SELECTED_VIEW
                 ]
               },
               {
-                from: "Selected",
-                to: "NoSelection",
+                from: "selected",
+                to: "browsing",
                 event: "DESELECT",
                 effects: [
-                  ["set", "@entity.selectedId", null],
-                  ["render-ui", "main", {
-                    type: "empty-state",
-                    message: "Select an item to view details"
-                  }]
+                  ["fetch", "Asset"],
+                  MASTER_LIST_VIEW
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "AssetsPage",
+          path: "/assets",
+          isInitial: true,
+          traits: [{ ref: "MasterDetailNav" }]
+        }
+      ]
     }
   ]
 };
+var FILTER_DEFAULT_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "icon", name: "search", size: "lg" },
+      { type: "typography", content: "Items", variant: "heading" }
+    ] },
+    { type: "search-input", placeholder: "Search items...", event: "SEARCH" },
+    { type: "divider" },
+    { type: "data-grid", entity: "FilterableItem", columns: ["name", "category", "status"], itemActions: [
+      { label: "Refresh", event: "INIT" }
+    ] }
+  ]
+}];
+var FILTER_ACTIVE_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "lg",
+  children: [
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "icon", name: "filter", size: "lg" },
+      { type: "typography", content: "Items", variant: "heading" },
+      { type: "badge", label: "Filtered", variant: "outline" },
+      { type: "button", label: "Clear", event: "CLEAR_FILTERS", variant: "secondary", icon: "x" }
+    ] },
+    { type: "search-input", placeholder: "Search items...", event: "SEARCH" },
+    { type: "divider" },
+    { type: "data-grid", entity: "FilterableItem", columns: ["name", "category", "status"], itemActions: [
+      { label: "View", event: "VIEW" }
+    ] }
+  ]
+}];
 var FILTER_BEHAVIOR = {
   name: "std-filter-ui",
   version: "1.0.0",
   description: "Filter and search management for lists",
+  theme: UI_SLATE_THEME,
   orbitals: [
     {
       name: "FilterOrbital",
       entity: {
-        name: "FilterState",
-        persistence: "runtime",
+        name: "FilterableItem",
+        persistence: "persistent",
+        collection: "filterableitems",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "filters", type: "object", default: {} },
-          { name: "searchTerm", type: "string", default: "" },
-          { name: "filterConfig", type: "array", default: [] }
+          { name: "name", type: "string", default: "" },
+          { name: "category", type: "string", default: "" },
+          { name: "status", type: "string", default: "active" }
         ]
       },
       traits: [
         {
-          name: "Filter",
-          linkedEntity: "FilterState",
+          name: "FilterControl",
+          linkedEntity: "FilterableItem",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "Idle", isInitial: true },
-              { name: "Filtering" }
+              { name: "idle", isInitial: true },
+              { name: "filtering" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "SET_FILTER", name: "Set Filter" },
+              { key: "SET_FILTER", name: "Set Filter", payloadSchema: [{ name: "field", type: "string", required: true }, { name: "value", type: "string", required: true }] },
               { key: "CLEAR_FILTERS", name: "Clear Filters" },
-              { key: "SEARCH", name: "Search" }
+              { key: "SEARCH", name: "Search", payloadSchema: [{ name: "term", type: "string", required: true }] },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Idle",
-                to: "Idle",
+                from: "idle",
+                to: "idle",
                 event: "INIT",
                 effects: [
-                  ["render-ui", "main", {
-                    type: "filter-group",
-                    entity: "@entity.entityType",
-                    filters: "@entity.filterConfig",
-                    onFilterChange: "SET_FILTER",
-                    onClearAll: "CLEAR_FILTERS"
-                  }]
+                  ["fetch", "FilterableItem"],
+                  FILTER_DEFAULT_VIEW
                 ]
               },
               {
-                from: "Idle",
-                to: "Filtering",
+                from: "idle",
+                to: "filtering",
                 event: "SET_FILTER",
                 effects: [
-                  ["set", "@entity.filters", ["object/set", "@entity.filters", "@payload.field", "@payload.value"]],
-                  ["emit", "FILTER_CHANGED", "@entity.filters"]
+                  ["fetch", "FilterableItem"],
+                  FILTER_ACTIVE_VIEW
                 ]
               },
               {
-                from: "Filtering",
-                to: "Idle",
+                from: "filtering",
+                to: "filtering",
                 event: "SET_FILTER",
                 effects: [
-                  ["set", "@entity.filters", ["object/set", "@entity.filters", "@payload.field", "@payload.value"]],
-                  ["emit", "FILTER_CHANGED", "@entity.filters"]
+                  ["fetch", "FilterableItem"],
+                  FILTER_ACTIVE_VIEW
                 ]
               },
               {
-                from: "Filtering",
-                to: "Idle",
+                from: "filtering",
+                to: "idle",
                 event: "CLEAR_FILTERS",
                 effects: [
-                  ["set", "@entity.filters", {}],
-                  ["set", "@entity.searchTerm", ""],
-                  ["emit", "FILTER_CHANGED", {}]
+                  ["fetch", "FilterableItem"],
+                  FILTER_DEFAULT_VIEW
                 ]
               },
               {
-                from: "Idle",
-                to: "Filtering",
+                from: "idle",
+                to: "filtering",
                 event: "SEARCH",
                 effects: [
-                  ["set", "@entity.searchTerm", "@payload.term"],
-                  ["emit", "SEARCH_CHANGED", "@payload.term"]
+                  ["fetch", "FilterableItem"],
+                  FILTER_ACTIVE_VIEW
+                ]
+              },
+              {
+                from: "filtering",
+                to: "filtering",
+                event: "VIEW",
+                effects: [
+                  ["fetch", "FilterableItem"],
+                  FILTER_ACTIVE_VIEW
+                ]
+              },
+              {
+                from: "idle",
+                to: "idle",
+                event: "VIEW",
+                effects: [
+                  ["fetch", "FilterableItem"],
+                  FILTER_DEFAULT_VIEW
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "FilterPage",
+          path: "/filter",
+          isInitial: true,
+          traits: [{ ref: "FilterControl" }]
+        }
+      ]
     }
   ]
 };