@almadar/std 2.1.1 → 2.4.1

package/dist/behaviors/async.js

@@ -1,579 +1,1352 @@
 // behaviors/async.ts
+var ASYNC_THEME = {
+  name: "async-blue",
+  tokens: {
+    colors: {
+      primary: "#2563eb",
+      "primary-hover": "#1d4ed8",
+      "primary-foreground": "#ffffff",
+      accent: "#3b82f6",
+      "accent-foreground": "#ffffff",
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444"
+    }
+  }
+};
+var loadingDashboardEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "loader", size: "lg" },
+        { type: "typography", variant: "h2", content: "Loading Dashboard" }
+      ] },
+      { type: "button", label: "Start", icon: "play", variant: "primary", action: "START" }
+    ] },
+    { type: "divider" },
+    // Stats row
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Records", icon: "database", entity: "LoadingRecord" },
+      { type: "stats", label: "Status", icon: "activity", entity: "LoadingRecord" }
+    ] },
+    { type: "divider" },
+    // Data grid
+    {
+      type: "data-grid",
+      entity: "LoadingRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "label", label: "Label", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var loadingInProgressEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: spinner + title
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "loader", size: "lg" },
+      { type: "typography", variant: "h2", content: "Loading..." }
+    ] },
+    { type: "divider" },
+    // Loading indicator with icon and descriptive text
+    { type: "stack", direction: "vertical", gap: "sm", align: "center", children: [
+      { type: "icon", name: "loader", size: "xl" },
+      { type: "typography", variant: "body", content: "Please wait while your data is being loaded." }
+    ] },
+    { type: "progress-bar", value: 0, label: "Processing", icon: "clock" },
+    { type: "divider" },
+    // Data grid
+    {
+      type: "data-grid",
+      entity: "LoadingRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "label", label: "Label", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var loadingSuccessEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: success icon + title + reset
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "check-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Loaded" }
+      ] },
+      { type: "button", label: "Reset", icon: "refresh-cw", variant: "secondary", action: "RESET" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Complete", variant: "success", icon: "check" },
+    { type: "divider" },
+    // Data grid
+    {
+      type: "data-grid",
+      entity: "LoadingRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "label", label: "Label", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var loadingErrorEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: error icon + title + reset
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "alert-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Error" }
+      ] },
+      { type: "button", label: "Reset", icon: "refresh-cw", variant: "secondary", action: "RESET" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Failed", variant: "error", icon: "x-circle" },
+    { type: "divider" },
+    // Data grid
+    {
+      type: "data-grid",
+      entity: "LoadingRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "label", label: "Label", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var loadingViewEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "loader", size: "lg" },
+      { type: "typography", variant: "h2", content: "Loading Dashboard" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "LoadingRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "label", label: "Label", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
 var LOADING_BEHAVIOR = {
   name: "std-loading",
   version: "1.0.0",
   description: "Loading state management with success/error handling",
+  theme: ASYNC_THEME,
   orbitals: [
     {
       name: "LoadingOrbital",
       entity: {
-        name: "LoadingState",
-        persistence: "runtime",
+        name: "LoadingRecord",
+        persistence: "persistent",
+        collection: "loading_records",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "isLoading", type: "boolean", default: false },
-          { name: "error", type: "object", default: null },
-          { name: "data", type: "object", default: null },
-          { name: "startTime", type: "number", default: null }
+          { name: "label", type: "string", default: "" },
+          { name: "status", type: "string", default: "idle" },
+          { name: "message", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Loading",
-          linkedEntity: "LoadingState",
-          category: "lifecycle",
+          name: "LoadingManagement",
+          linkedEntity: "LoadingRecord",
+          category: "interaction",
           stateMachine: {
             states: [
-              { name: "Idle", isInitial: true },
-              { name: "Loading" },
-              { name: "Success" },
-              { name: "Error" }
+              { name: "idle", isInitial: true },
+              { name: "loading" },
+              { name: "loaded" },
+              { name: "error" }
             ],
             events: [
-              { key: "START", name: "Start" },
-              { key: "SUCCESS", name: "Success" },
-              { key: "ERROR", name: "Error" },
-              { key: "RETRY", name: "Retry" },
-              { key: "RESET", name: "Reset" }
+              { key: "INIT", name: "Initialize" },
+              { key: "START", name: "Start Loading" },
+              { key: "COMPLETE", name: "Complete" },
+              { key: "FAIL", name: "Fail", payloadSchema: [{ name: "message", type: "string", required: true }] },
+              { key: "RESET", name: "Reset" },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Idle",
-                to: "Loading",
-                event: "START",
+                from: "idle",
+                to: "idle",
+                event: "INIT",
                 effects: [
-                  ["set", "@entity.isLoading", true],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.startTime", ["time/now"]],
-                  ["render-ui", "content", {
-                    type: "loading-state"
-                  }]
+                  ["fetch", "LoadingRecord"],
+                  ...loadingDashboardEffects
                 ]
               },
               {
-                from: "Loading",
-                to: "Success",
-                event: "SUCCESS",
+                from: "idle",
+                to: "loading",
+                event: "START",
                 effects: [
-                  ["set", "@entity.isLoading", false],
-                  ["set", "@entity.data", "@payload.data"]
+                  ["fetch", "LoadingRecord"],
+                  ["set", "@entity.status", "loading"],
+                  ...loadingInProgressEffects
                 ]
               },
               {
-                from: "Loading",
-                to: "Error",
-                event: "ERROR",
+                from: "loading",
+                to: "loaded",
+                event: "COMPLETE",
                 effects: [
-                  ["set", "@entity.isLoading", false],
-                  ["set", "@entity.error", "@payload.error"],
-                  ["render-ui", "content", {
-                    type: "error-state",
-                    message: "@entity.error",
-                    onRetry: "RETRY"
-                  }]
+                  ["fetch", "LoadingRecord"],
+                  ["set", "@entity.status", "loaded"],
+                  ...loadingSuccessEffects
                 ]
               },
               {
-                from: "Error",
-                to: "Loading",
-                event: "RETRY",
+                from: "loading",
+                to: "error",
+                event: "FAIL",
                 effects: [
-                  ["set", "@entity.isLoading", true],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.startTime", ["time/now"]],
-                  ["render-ui", "content", {
-                    type: "loading-state"
-                  }]
+                  ["fetch", "LoadingRecord"],
+                  ["set", "@entity.status", "error"],
+                  ["set", "@entity.message", "@payload.message"],
+                  ...loadingErrorEffects
                 ]
               },
               {
-                from: "Success",
-                to: "Idle",
+                from: "loaded",
+                to: "idle",
                 event: "RESET",
                 effects: [
-                  ["set", "@entity.isLoading", false],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.data", null]
+                  ["fetch", "LoadingRecord"],
+                  ["set", "@entity.status", "idle"],
+                  ...loadingDashboardEffects
                 ]
               },
               {
-                from: "Error",
-                to: "Idle",
+                from: "error",
+                to: "idle",
                 event: "RESET",
                 effects: [
-                  ["set", "@entity.isLoading", false],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.data", null]
+                  ["fetch", "LoadingRecord"],
+                  ["set", "@entity.status", "idle"],
+                  ["set", "@entity.message", ""],
+                  ...loadingDashboardEffects
                 ]
-              }
+              },
+              // VIEW self-transitions for each state
+              { from: "idle", to: "idle", event: "VIEW", effects: [["fetch", "LoadingRecord"], ...loadingViewEffects] },
+              { from: "loading", to: "loading", event: "VIEW", effects: [["fetch", "LoadingRecord"], ...loadingViewEffects] },
+              { from: "loaded", to: "loaded", event: "VIEW", effects: [["fetch", "LoadingRecord"], ...loadingViewEffects] },
+              { from: "error", to: "error", event: "VIEW", effects: [["fetch", "LoadingRecord"], ...loadingViewEffects] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [{ name: "LoadingPage", path: "/loading", isInitial: true, traits: [{ ref: "LoadingManagement" }] }]
     }
   ]
 };
+var fetchIdleEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title + fetch button
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "download-cloud", size: "lg" },
+        { type: "typography", variant: "h2", content: "Data Browser" }
+      ] },
+      { type: "button", label: "Fetch", icon: "download", variant: "primary", action: "FETCH" }
+    ] },
+    { type: "divider" },
+    // Stats
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Records", icon: "database", entity: "FetchRecord" },
+      { type: "stats", label: "Status", icon: "activity", entity: "FetchRecord" }
+    ] },
+    { type: "divider" },
+    // Data list
+    {
+      type: "data-list",
+      entity: "FetchRecord",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var fetchingEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "download-cloud", size: "lg" },
+      { type: "typography", variant: "h2", content: "Fetching..." }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: 0, label: "Fetching data", icon: "clock" },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "FetchRecord",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var fetchFreshEffects = [
+  ["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: "check-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Data Browser" }
+      ] },
+      { type: "button", label: "Refresh", icon: "refresh-cw", variant: "secondary", action: "REFRESH" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Fresh", variant: "success", icon: "check" },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "FetchRecord",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var fetchStaleEffects = [
+  ["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: "clock", size: "lg" },
+        { type: "typography", variant: "h2", content: "Data Stale" }
+      ] },
+      { type: "button", label: "Refresh", icon: "refresh-cw", variant: "primary", action: "REFRESH" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Stale", variant: "warning", icon: "alert-triangle" },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "FetchRecord",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var fetchErrorEffects = [
+  ["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: "alert-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Fetch Error" }
+      ] },
+      { type: "button", label: "Refresh", icon: "refresh-cw", variant: "secondary", action: "REFRESH" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Error", variant: "error", icon: "x-circle" },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "FetchRecord",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var fetchViewEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "download-cloud", size: "lg" },
+      { type: "typography", variant: "h2", content: "Data Browser" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "FetchRecord",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
 var FETCH_BEHAVIOR = {
   name: "std-fetch",
   version: "1.0.0",
-  description: "Data fetching with caching and refresh capabilities",
+  description: "Data fetching with refresh capabilities",
+  theme: ASYNC_THEME,
   orbitals: [
     {
       name: "FetchOrbital",
       entity: {
-        name: "FetchState",
-        persistence: "runtime",
+        name: "FetchRecord",
+        persistence: "persistent",
+        collection: "fetch_records",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "data", type: "object", default: null },
-          { name: "error", type: "object", default: null },
-          { name: "isFetching", type: "boolean", default: false },
-          { name: "lastFetchedAt", type: "number", default: null }
+          { name: "name", type: "string", default: "" },
+          { name: "status", type: "string", default: "idle" },
+          { name: "message", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Fetch",
-          linkedEntity: "FetchState",
-          category: "lifecycle",
+          name: "FetchManagement",
+          linkedEntity: "FetchRecord",
+          category: "interaction",
           stateMachine: {
             states: [
-              { name: "Idle", isInitial: true },
-              { name: "Fetching" },
-              { name: "Stale" },
-              { name: "Fresh" },
-              { name: "Error" }
+              { name: "idle", isInitial: true },
+              { name: "fetching" },
+              { name: "fresh" },
+              { name: "stale" },
+              { name: "error" }
             ],
             events: [
-              { key: "FETCH", name: "Fetch" },
-              { key: "FETCH_SUCCESS", name: "Fetch Success" },
-              { key: "FETCH_ERROR", name: "Fetch Error" },
+              { key: "INIT", name: "Initialize" },
+              { key: "FETCH", name: "Fetch Data" },
+              { key: "COMPLETE", name: "Fetch Complete" },
+              { key: "FAIL", name: "Fetch Fail", payloadSchema: [{ name: "message", type: "string", required: true }] },
+              { key: "INVALIDATE", name: "Invalidate" },
               { key: "REFRESH", name: "Refresh" },
-              { key: "INVALIDATE", name: "Invalidate" }
+              { key: "RESET", name: "Reset" },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Idle",
-                to: "Fetching",
-                event: "FETCH",
+                from: "idle",
+                to: "idle",
+                event: "INIT",
                 effects: [
-                  ["set", "@entity.isFetching", true],
-                  ["set", "@entity.error", null]
+                  ["fetch", "FetchRecord"],
+                  ...fetchIdleEffects
                 ]
               },
               {
-                from: "Stale",
-                to: "Fetching",
+                from: "idle",
+                to: "fetching",
                 event: "FETCH",
                 effects: [
-                  ["set", "@entity.isFetching", true],
-                  ["set", "@entity.error", null]
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "fetching"],
+                  ...fetchingEffects
                 ]
               },
               {
-                from: "Fetching",
-                to: "Fresh",
-                event: "FETCH_SUCCESS",
+                from: "fetching",
+                to: "fresh",
+                event: "COMPLETE",
                 effects: [
-                  ["set", "@entity.isFetching", false],
-                  ["set", "@entity.data", "@payload.data"],
-                  ["set", "@entity.lastFetchedAt", ["time/now"]]
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "fresh"],
+                  ...fetchFreshEffects
                 ]
               },
               {
-                from: "Fetching",
-                to: "Error",
-                event: "FETCH_ERROR",
+                from: "fetching",
+                to: "error",
+                event: "FAIL",
                 effects: [
-                  ["set", "@entity.isFetching", false],
-                  ["set", "@entity.error", "@payload.error"]
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "error"],
+                  ["set", "@entity.message", "@payload.message"],
+                  ...fetchErrorEffects
                 ]
               },
               {
-                from: "Fresh",
-                to: "Stale",
+                from: "fresh",
+                to: "stale",
                 event: "INVALIDATE",
-                effects: [["set", "@entity.lastFetchedAt", null]]
+                effects: [
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "stale"],
+                  ...fetchStaleEffects
+                ]
               },
               {
-                from: "Fresh",
-                to: "Fetching",
+                from: "fresh",
+                to: "fetching",
                 event: "REFRESH",
                 effects: [
-                  ["set", "@entity.isFetching", true],
-                  ["set", "@entity.error", null]
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "fetching"],
+                  ...fetchingEffects
                 ]
               },
               {
-                from: "Stale",
-                to: "Fetching",
+                from: "stale",
+                to: "fetching",
                 event: "REFRESH",
                 effects: [
-                  ["set", "@entity.isFetching", true],
-                  ["set", "@entity.error", null]
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "fetching"],
+                  ...fetchingEffects
                 ]
               },
               {
-                from: "Error",
-                to: "Fetching",
+                from: "error",
+                to: "fetching",
                 event: "REFRESH",
                 effects: [
-                  ["set", "@entity.isFetching", true],
-                  ["set", "@entity.error", null]
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "fetching"],
+                  ["set", "@entity.message", ""],
+                  ...fetchingEffects
+                ]
+              },
+              {
+                from: "error",
+                to: "idle",
+                event: "RESET",
+                effects: [
+                  ["fetch", "FetchRecord"],
+                  ["set", "@entity.status", "idle"],
+                  ["set", "@entity.message", ""],
+                  ...fetchIdleEffects
                 ]
-              }
+              },
+              // VIEW self-transitions for each state
+              { from: "idle", to: "idle", event: "VIEW", effects: [["fetch", "FetchRecord"], ...fetchViewEffects] },
+              { from: "fetching", to: "fetching", event: "VIEW", effects: [["fetch", "FetchRecord"], ...fetchViewEffects] },
+              { from: "fresh", to: "fresh", event: "VIEW", effects: [["fetch", "FetchRecord"], ...fetchViewEffects] },
+              { from: "stale", to: "stale", event: "VIEW", effects: [["fetch", "FetchRecord"], ...fetchViewEffects] },
+              { from: "error", to: "error", event: "VIEW", effects: [["fetch", "FetchRecord"], ...fetchViewEffects] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [{ name: "DataBrowserPage", path: "/data-browser", isInitial: true, traits: [{ ref: "FetchManagement" }] }]
     }
   ]
 };
+var submitIdleEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "send", size: "lg" },
+      { type: "typography", variant: "h2", content: "Submissions" }
+    ] },
+    { type: "divider" },
+    // Stats
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Total", icon: "hash", entity: "Submission" },
+      { type: "stats", label: "Status", icon: "activity", entity: "Submission" }
+    ] },
+    { type: "divider" },
+    // Submission list
+    {
+      type: "data-list",
+      entity: "Submission",
+      fields: [
+        { name: "name", label: "Name", icon: "file-text", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var submittingEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "send", size: "lg" },
+      { type: "typography", variant: "h2", content: "Submitting..." }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: 0, label: "Sending", icon: "upload" },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "Submission",
+      fields: [
+        { name: "name", label: "Name", icon: "file-text", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var submitSuccessEffects = [
+  ["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: "check-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Success" }
+      ] },
+      { type: "button", label: "Reset", icon: "refresh-cw", variant: "secondary", action: "RESET" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Submitted", variant: "success", icon: "check" },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "Submission",
+      fields: [
+        { name: "name", label: "Name", icon: "file-text", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var submitErrorEffects = [
+  ["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: "alert-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Submission Failed" }
+      ] },
+      { type: "button", label: "Reset", icon: "refresh-cw", variant: "secondary", action: "RESET" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Error", variant: "error", icon: "x-circle" },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "Submission",
+      fields: [
+        { name: "name", label: "Name", icon: "file-text", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var submitViewEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "send", size: "lg" },
+      { type: "typography", variant: "h2", content: "Submissions" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "Submission",
+      fields: [
+        { name: "name", label: "Name", icon: "file-text", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
 var SUBMIT_BEHAVIOR = {
   name: "std-submit",
   version: "1.0.0",
-  description: "Async submission with retry capabilities",
+  description: "Form submission with success/error handling",
+  theme: ASYNC_THEME,
   orbitals: [
     {
       name: "SubmitOrbital",
       entity: {
-        name: "SubmitState",
-        persistence: "runtime",
+        name: "Submission",
+        persistence: "persistent",
+        collection: "submissions",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "isSubmitting", type: "boolean", default: false },
-          { name: "error", type: "object", default: null },
-          { name: "lastSubmittedData", type: "object", default: null },
-          { name: "successMessage", type: "string", default: "Submitted successfully" },
-          { name: "errorMessage", type: "string", default: "Submission failed" },
-          { name: "resetOnSuccess", type: "boolean", default: false }
+          { name: "name", type: "string", default: "" },
+          { name: "status", type: "string", default: "idle" },
+          { name: "message", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Submit",
-          linkedEntity: "SubmitState",
-          category: "lifecycle",
+          name: "SubmitManagement",
+          linkedEntity: "Submission",
+          category: "interaction",
           stateMachine: {
             states: [
-              { name: "Idle", isInitial: true },
-              { name: "Submitting" },
-              { name: "Success" },
-              { name: "Error" }
+              { name: "idle", isInitial: true },
+              { name: "submitting" },
+              { name: "success" },
+              { name: "error" }
             ],
             events: [
-              { key: "SUBMIT", name: "Submit" },
-              { key: "SUBMIT_SUCCESS", name: "Submit Success" },
-              { key: "SUBMIT_ERROR", name: "Submit Error" },
-              { key: "RETRY", name: "Retry" },
-              { key: "RESET", name: "Reset" }
+              { key: "INIT", name: "Initialize" },
+              { key: "SUBMIT", name: "Submit", payloadSchema: [{ name: "name", type: "string", required: true }] },
+              { key: "COMPLETE", name: "Submit Complete" },
+              { key: "FAIL", name: "Submit Fail", payloadSchema: [{ name: "message", type: "string", required: true }] },
+              { key: "RESET", name: "Reset" },
+              { key: "CLOSE", name: "Close" },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Idle",
-                to: "Submitting",
-                event: "SUBMIT",
+                from: "idle",
+                to: "idle",
+                event: "INIT",
                 effects: [
-                  ["set", "@entity.isSubmitting", true],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.lastSubmittedData", "@payload.data"]
+                  ["fetch", "Submission"],
+                  ...submitIdleEffects
                 ]
               },
               {
-                from: "Submitting",
-                to: "Success",
-                event: "SUBMIT_SUCCESS",
+                from: "idle",
+                to: "submitting",
+                event: "SUBMIT",
                 effects: [
-                  ["set", "@entity.isSubmitting", false],
-                  ["notify", "in_app", "@entity.successMessage"],
-                  ["when", "@entity.resetOnSuccess", ["emit", "RESET"]]
+                  ["fetch", "Submission"],
+                  ["set", "@entity.status", "submitting"],
+                  ["set", "@entity.name", "@payload.name"],
+                  ...submittingEffects
                 ]
               },
               {
-                from: "Submitting",
-                to: "Error",
-                event: "SUBMIT_ERROR",
+                from: "submitting",
+                to: "success",
+                event: "COMPLETE",
                 effects: [
-                  ["set", "@entity.isSubmitting", false],
-                  ["set", "@entity.error", "@payload.error"],
-                  ["notify", "in_app", "@entity.errorMessage"]
+                  ["fetch", "Submission"],
+                  ["set", "@entity.status", "success"],
+                  ["persist", "create", "Submission", { name: "@entity.name", status: "success" }],
+                  ...submitSuccessEffects
                 ]
               },
               {
-                from: "Error",
-                to: "Submitting",
-                event: "RETRY",
+                from: "submitting",
+                to: "error",
+                event: "FAIL",
                 effects: [
-                  ["set", "@entity.isSubmitting", true],
-                  ["set", "@entity.error", null]
+                  ["fetch", "Submission"],
+                  ["set", "@entity.status", "error"],
+                  ["set", "@entity.message", "@payload.message"],
+                  ...submitErrorEffects
                 ]
               },
               {
-                from: "Success",
-                to: "Idle",
+                from: "success",
+                to: "idle",
                 event: "RESET",
                 effects: [
-                  ["set", "@entity.isSubmitting", false],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.lastSubmittedData", null]
+                  ["fetch", "Submission"],
+                  ["set", "@entity.status", "idle"],
+                  ...submitIdleEffects
                 ]
               },
               {
-                from: "Error",
-                to: "Idle",
+                from: "error",
+                to: "idle",
                 event: "RESET",
                 effects: [
-                  ["set", "@entity.isSubmitting", false],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.lastSubmittedData", null]
+                  ["fetch", "Submission"],
+                  ["set", "@entity.status", "idle"],
+                  ["set", "@entity.message", ""],
+                  ...submitIdleEffects
                 ]
-              }
+              },
+              {
+                from: "success",
+                to: "idle",
+                event: "CLOSE",
+                effects: [
+                  ["fetch", "Submission"],
+                  ["set", "@entity.status", "idle"],
+                  ...submitIdleEffects
+                ]
+              },
+              // VIEW self-transitions for each state
+              { from: "idle", to: "idle", event: "VIEW", effects: [["fetch", "Submission"], ...submitViewEffects] },
+              { from: "submitting", to: "submitting", event: "VIEW", effects: [["fetch", "Submission"], ...submitViewEffects] },
+              { from: "success", to: "success", event: "VIEW", effects: [["fetch", "Submission"], ...submitViewEffects] },
+              { from: "error", to: "error", event: "VIEW", effects: [["fetch", "Submission"], ...submitViewEffects] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [{ name: "SubmissionsPage", path: "/submissions", isInitial: true, traits: [{ ref: "SubmitManagement" }] }]
     }
   ]
 };
+var retryIdleEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title + start button
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "repeat", size: "lg" },
+        { type: "typography", variant: "h2", content: "Operations" }
+      ] },
+      { type: "button", label: "Start", icon: "play", variant: "primary", action: "START" }
+    ] },
+    { type: "divider" },
+    // Stats row
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Records", icon: "database", entity: "RetryRecord" },
+      { type: "stats", label: "Attempts", icon: "repeat", entity: "RetryRecord" }
+    ] },
+    { type: "divider" },
+    // Data grid
+    {
+      type: "data-grid",
+      entity: "RetryRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "attempt", label: "Attempt", icon: "hash", variant: "body", format: "number" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var retryAttemptingEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "repeat", size: "lg" },
+      { type: "typography", variant: "h2", content: "Attempting..." }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: 0, label: "Processing", icon: "clock" },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "RetryRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "attempt", label: "Attempt", icon: "hash", variant: "body", format: "number" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var retrySuccessEffects = [
+  ["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: "check-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Success" }
+      ] },
+      { type: "button", label: "Reset", icon: "refresh-cw", variant: "secondary", action: "RESET" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Complete", variant: "success", icon: "check" },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "RetryRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "attempt", label: "Attempt", icon: "hash", variant: "body", format: "number" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var retryFailedEffects = [
+  ["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: "alert-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Failed" }
+      ] },
+      { type: "button", label: "Retry", icon: "repeat", variant: "primary", action: "RETRY" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Failed", variant: "error", icon: "x-circle" },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "RetryRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "attempt", label: "Attempt", icon: "hash", variant: "body", format: "number" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var retryViewEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "repeat", size: "lg" },
+      { type: "typography", variant: "h2", content: "Operations" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "RetryRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "attempt", label: "Attempt", icon: "hash", variant: "body", format: "number" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
 var RETRY_BEHAVIOR = {
   name: "std-retry",
   version: "1.0.0",
-  description: "Automatic retry with exponential backoff",
+  description: "Operation with retry capability",
+  theme: ASYNC_THEME,
   orbitals: [
     {
       name: "RetryOrbital",
       entity: {
-        name: "RetryState",
-        persistence: "runtime",
+        name: "RetryRecord",
+        persistence: "persistent",
+        collection: "retry_records",
         fields: [
           { name: "id", type: "string", required: true },
+          { name: "name", type: "string", default: "" },
+          { name: "status", type: "string", default: "idle" },
           { name: "attempt", type: "number", default: 0 },
-          { name: "error", type: "object", default: null },
-          { name: "nextRetryAt", type: "number", default: null },
-          { name: "maxAttempts", type: "number", default: 3 },
-          { name: "initialDelayMs", type: "number", default: 1e3 },
-          { name: "backoffMultiplier", type: "number", default: 2 },
-          { name: "maxDelayMs", type: "number", default: 3e4 }
+          { name: "message", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Retry",
-          linkedEntity: "RetryState",
-          category: "lifecycle",
+          name: "RetryManagement",
+          linkedEntity: "RetryRecord",
+          category: "interaction",
           stateMachine: {
             states: [
-              { name: "Idle", isInitial: true },
-              { name: "Attempting" },
-              { name: "Waiting" },
-              { name: "Success", isTerminal: true },
-              { name: "Failed", isTerminal: true }
+              { name: "idle", isInitial: true },
+              { name: "attempting" },
+              { name: "success" },
+              { name: "failed" }
             ],
             events: [
-              { key: "START", name: "Start" },
-              { key: "ATTEMPT_SUCCESS", name: "Attempt Success" },
-              { key: "ATTEMPT_ERROR", name: "Attempt Error" },
-              { key: "RETRY_TICK", name: "Retry Tick" },
-              { key: "GIVE_UP", name: "Give Up" },
-              { key: "RESET", name: "Reset" }
+              { key: "INIT", name: "Initialize" },
+              { key: "START", name: "Start Operation" },
+              { key: "COMPLETE", name: "Operation Complete" },
+              { key: "FAIL", name: "Operation Fail", payloadSchema: [{ name: "message", type: "string", required: true }] },
+              { key: "RETRY", name: "Retry" },
+              { key: "RESET", name: "Reset" },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Idle",
-                to: "Attempting",
-                event: "START",
+                from: "idle",
+                to: "idle",
+                event: "INIT",
                 effects: [
-                  ["set", "@entity.attempt", 1],
-                  ["set", "@entity.error", null]
+                  ["fetch", "RetryRecord"],
+                  ...retryIdleEffects
                 ]
               },
               {
-                from: "Attempting",
-                to: "Success",
-                event: "ATTEMPT_SUCCESS",
-                effects: []
-              },
-              {
-                from: "Attempting",
-                to: "Waiting",
-                event: "ATTEMPT_ERROR",
-                guard: ["<", "@entity.attempt", "@entity.maxAttempts"],
+                from: "idle",
+                to: "attempting",
+                event: "START",
                 effects: [
-                  ["set", "@entity.error", "@payload.error"],
-                  [
-                    "let",
-                    [["delay", [
-                      "math/min",
-                      ["*", "@entity.initialDelayMs", ["math/pow", "@entity.backoffMultiplier", "@entity.attempt"]],
-                      "@entity.maxDelayMs"
-                    ]]],
-                    ["set", "@entity.nextRetryAt", ["+", ["time/now"], "@delay"]],
-                    ["async/delay", "@delay", ["emit", "RETRY_TICK"]]
-                  ]
+                  ["fetch", "RetryRecord"],
+                  ["set", "@entity.status", "attempting"],
+                  ["set", "@entity.attempt", 1],
+                  ...retryAttemptingEffects
                 ]
               },
               {
-                from: "Attempting",
-                to: "Failed",
-                event: "ATTEMPT_ERROR",
-                guard: [">=", "@entity.attempt", "@entity.maxAttempts"],
+                from: "attempting",
+                to: "success",
+                event: "COMPLETE",
                 effects: [
-                  ["set", "@entity.error", "@payload.error"],
-                  ["notify", "in_app", "All retry attempts failed"]
+                  ["fetch", "RetryRecord"],
+                  ["set", "@entity.status", "success"],
+                  ...retrySuccessEffects
                 ]
               },
               {
-                from: "Waiting",
-                to: "Attempting",
-                event: "RETRY_TICK",
-                effects: [["set", "@entity.attempt", ["+", "@entity.attempt", 1]]]
+                from: "attempting",
+                to: "failed",
+                event: "FAIL",
+                effects: [
+                  ["fetch", "RetryRecord"],
+                  ["set", "@entity.status", "failed"],
+                  ["set", "@entity.message", "@payload.message"],
+                  ...retryFailedEffects
+                ]
               },
               {
-                from: "Waiting",
-                to: "Failed",
-                event: "GIVE_UP",
-                effects: [["notify", "in_app", "Retry cancelled"]]
+                from: "failed",
+                to: "attempting",
+                event: "RETRY",
+                effects: [
+                  ["fetch", "RetryRecord"],
+                  ["set", "@entity.status", "attempting"],
+                  ["set", "@entity.message", ""],
+                  ...retryAttemptingEffects
+                ]
               },
               {
-                from: "Success",
-                to: "Idle",
+                from: "success",
+                to: "idle",
                 event: "RESET",
                 effects: [
+                  ["fetch", "RetryRecord"],
+                  ["set", "@entity.status", "idle"],
                   ["set", "@entity.attempt", 0],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.nextRetryAt", null]
+                  ...retryIdleEffects
                 ]
               },
               {
-                from: "Failed",
-                to: "Idle",
+                from: "failed",
+                to: "idle",
                 event: "RESET",
                 effects: [
+                  ["fetch", "RetryRecord"],
+                  ["set", "@entity.status", "idle"],
                   ["set", "@entity.attempt", 0],
-                  ["set", "@entity.error", null],
-                  ["set", "@entity.nextRetryAt", null]
+                  ["set", "@entity.message", ""],
+                  ...retryIdleEffects
                 ]
-              }
+              },
+              // VIEW self-transitions for each state
+              { from: "idle", to: "idle", event: "VIEW", effects: [["fetch", "RetryRecord"], ...retryViewEffects] },
+              { from: "attempting", to: "attempting", event: "VIEW", effects: [["fetch", "RetryRecord"], ...retryViewEffects] },
+              { from: "success", to: "success", event: "VIEW", effects: [["fetch", "RetryRecord"], ...retryViewEffects] },
+              { from: "failed", to: "failed", event: "VIEW", effects: [["fetch", "RetryRecord"], ...retryViewEffects] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [{ name: "OperationsPage", path: "/operations", isInitial: true, traits: [{ ref: "RetryManagement" }] }]
     }
   ]
 };
+var pollStoppedEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title + start button
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "radio", size: "lg" },
+        { type: "typography", variant: "h2", content: "Poll Monitor" }
+      ] },
+      { type: "button", label: "Start", icon: "play", variant: "primary", action: "START" }
+    ] },
+    { type: "divider" },
+    // Stats
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Records", icon: "database", entity: "PollRecord" },
+      { type: "stats", label: "Poll Count", icon: "hash", entity: "PollRecord" }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Stopped", variant: "secondary", icon: "square" },
+    { type: "divider" },
+    // Data grid for poll records
+    {
+      type: "data-grid",
+      entity: "PollRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "count", label: "Count", icon: "hash", variant: "body", format: "number" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var pollActiveEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title + pause/stop buttons
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "radio", size: "lg" },
+        { type: "typography", variant: "h2", content: "Polling..." }
+      ] },
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "button", label: "Pause", icon: "pause", variant: "secondary", action: "PAUSE" },
+        { type: "button", label: "Stop", icon: "square", variant: "ghost", action: "STOP" }
+      ] }
+    ] },
+    { type: "divider" },
+    { type: "progress-bar", value: 0, label: "Polling active", icon: "activity" },
+    { type: "divider" },
+    // Stats
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Records", icon: "database", entity: "PollRecord" },
+      { type: "stats", label: "Poll Count", icon: "hash", entity: "PollRecord" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "PollRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "count", label: "Count", icon: "hash", variant: "body", format: "number" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var pollPausedEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title + resume/stop buttons
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "pause-circle", size: "lg" },
+        { type: "typography", variant: "h2", content: "Paused" }
+      ] },
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "button", label: "Resume", icon: "play", variant: "primary", action: "RESUME" },
+        { type: "button", label: "Stop", icon: "square", variant: "ghost", action: "STOP" }
+      ] }
+    ] },
+    { type: "divider" },
+    { type: "badge", label: "Paused", variant: "warning", icon: "pause" },
+    { type: "divider" },
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Records", icon: "database", entity: "PollRecord" },
+      { type: "stats", label: "Poll Count", icon: "hash", entity: "PollRecord" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "PollRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "count", label: "Count", icon: "hash", variant: "body", format: "number" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
+var pollViewEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "radio", size: "lg" },
+      { type: "typography", variant: "h2", content: "Poll Monitor" }
+    ] },
+    { type: "divider" },
+    {
+      type: "data-grid",
+      entity: "PollRecord",
+      cols: 2,
+      gap: "md",
+      fields: [
+        { name: "name", label: "Name", icon: "tag", variant: "h4" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" },
+        { name: "count", label: "Count", icon: "hash", variant: "body", format: "number" }
+      ],
+      actions: [
+        { label: "View", event: "VIEW", icon: "eye", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
 var POLL_BEHAVIOR = {
   name: "std-poll",
   version: "1.0.0",
-  description: "Periodic polling with start/stop control",
+  description: "Polling monitor with start/stop/pause control",
+  theme: ASYNC_THEME,
   orbitals: [
     {
       name: "PollOrbital",
       entity: {
-        name: "PollState",
-        persistence: "runtime",
+        name: "PollRecord",
+        persistence: "persistent",
+        collection: "poll_records",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "isPolling", type: "boolean", default: false },
-          { name: "pollCount", type: "number", default: 0 },
-          { name: "lastPollAt", type: "number", default: null },
-          { name: "error", type: "object", default: null },
-          { name: "intervalMs", type: "number", default: 5e3 },
-          { name: "maxPolls", type: "number", default: null },
-          { name: "stopOnError", type: "boolean", default: false }
+          { name: "name", type: "string", default: "" },
+          { name: "status", type: "string", default: "stopped" },
+          { name: "count", type: "number", default: 0 }
         ]
       },
       traits: [
         {
-          name: "Poll",
-          linkedEntity: "PollState",
-          category: "lifecycle",
+          name: "PollManagement",
+          linkedEntity: "PollRecord",
+          category: "interaction",
           stateMachine: {
             states: [
-              { name: "Stopped", isInitial: true },
-              { name: "Polling" },
-              { name: "Paused" }
+              { name: "stopped", isInitial: true },
+              { name: "polling" },
+              { name: "paused" }
             ],
             events: [
-              { key: "START", name: "Start" },
-              { key: "STOP", name: "Stop" },
-              { key: "PAUSE", name: "Pause" },
-              { key: "RESUME", name: "Resume" },
-              { key: "POLL_TICK", name: "Poll Tick" },
-              { key: "POLL_SUCCESS", name: "Poll Success" },
-              { key: "POLL_ERROR", name: "Poll Error" }
+              { key: "INIT", name: "Initialize" },
+              { key: "START", name: "Start Polling" },
+              { key: "STOP", name: "Stop Polling" },
+              { key: "PAUSE", name: "Pause Polling" },
+              { key: "RESUME", name: "Resume Polling" },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Stopped",
-                to: "Polling",
-                event: "START",
+                from: "stopped",
+                to: "stopped",
+                event: "INIT",
                 effects: [
-                  ["set", "@entity.isPolling", true],
-                  ["set", "@entity.pollCount", 0],
-                  ["async/interval", "@entity.intervalMs", ["emit", "POLL_TICK"]]
+                  ["fetch", "PollRecord"],
+                  ...pollStoppedEffects
                 ]
               },
               {
-                from: "Polling",
-                to: "Polling",
-                event: "POLL_TICK",
-                guard: ["or", ["=", "@entity.maxPolls", null], ["<", "@entity.pollCount", "@entity.maxPolls"]],
-                effects: [["set", "@entity.lastPollAt", ["time/now"]]]
-              },
-              {
-                from: "Polling",
-                to: "Polling",
-                event: "POLL_SUCCESS",
+                from: "stopped",
+                to: "polling",
+                event: "START",
                 effects: [
-                  ["set", "@entity.pollCount", ["+", "@entity.pollCount", 1]],
-                  ["set", "@entity.error", null]
+                  ["fetch", "PollRecord"],
+                  ["set", "@entity.status", "polling"],
+                  ["set", "@entity.count", 0],
+                  ...pollActiveEffects
                 ]
               },
               {
-                from: "Polling",
-                to: "Polling",
-                event: "POLL_ERROR",
+                from: "polling",
+                to: "paused",
+                event: "PAUSE",
                 effects: [
-                  ["set", "@entity.error", "@payload.error"],
-                  ["when", "@entity.stopOnError", ["emit", "STOP"]]
+                  ["fetch", "PollRecord"],
+                  ["set", "@entity.status", "paused"],
+                  ...pollPausedEffects
                 ]
               },
               {
-                from: "Polling",
-                to: "Paused",
-                event: "PAUSE",
-                effects: [["set", "@entity.isPolling", false]]
-              },
-              {
-                from: "Paused",
-                to: "Polling",
+                from: "paused",
+                to: "polling",
                 event: "RESUME",
                 effects: [
-                  ["set", "@entity.isPolling", true],
-                  ["async/interval", "@entity.intervalMs", ["emit", "POLL_TICK"]]
+                  ["fetch", "PollRecord"],
+                  ["set", "@entity.status", "polling"],
+                  ...pollActiveEffects
                 ]
               },
               {
-                from: "Polling",
-                to: "Stopped",
+                from: "polling",
+                to: "stopped",
                 event: "STOP",
-                effects: [["set", "@entity.isPolling", false]]
+                effects: [
+                  ["fetch", "PollRecord"],
+                  ["set", "@entity.status", "stopped"],
+                  ...pollStoppedEffects
+                ]
               },
               {
-                from: "Paused",
-                to: "Stopped",
+                from: "paused",
+                to: "stopped",
                 event: "STOP",
-                effects: [["set", "@entity.isPolling", false]]
-              }
+                effects: [
+                  ["fetch", "PollRecord"],
+                  ["set", "@entity.status", "stopped"],
+                  ...pollStoppedEffects
+                ]
+              },
+              // VIEW self-transitions for each state
+              { from: "stopped", to: "stopped", event: "VIEW", effects: [["fetch", "PollRecord"], ...pollViewEffects] },
+              { from: "polling", to: "polling", event: "VIEW", effects: [["fetch", "PollRecord"], ...pollViewEffects] },
+              { from: "paused", to: "paused", event: "VIEW", effects: [["fetch", "PollRecord"], ...pollViewEffects] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [{ name: "PollMonitorPage", path: "/poll-monitor", isInitial: true, traits: [{ ref: "PollManagement" }] }]
     }
   ]
 };