@almadar/std 2.1.1 → 2.4.1

package/dist/behaviors/data-management.js

@@ -1,85 +1,437 @@
 // behaviors/data-management.ts
+var DATA_ZINC_THEME = {
+  name: "data-zinc",
+  tokens: {
+    colors: {
+      primary: "#3f3f46",
+      "primary-hover": "#27272a",
+      "primary-foreground": "#ffffff",
+      accent: "#71717a",
+      "accent-foreground": "#ffffff",
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444"
+    }
+  }
+};
+var PRODUCT_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "database", size: "lg" },
+        { type: "typography", variant: "h2", content: "Products" },
+        { type: "badge", label: "Paginated", variant: "info" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      children: [
+        { type: "stats", label: "Page", value: "@entity.page" },
+        { type: "stats", label: "Page Size", value: "@entity.pageSize" },
+        { type: "stats", label: "Total", value: "@entity.totalItems" },
+        { type: "stats", label: "Total Pages", value: "@entity.totalPages" }
+      ]
+    },
+    { type: "progress-bar", value: "@entity.page", max: "@entity.totalPages", label: "Page Progress", icon: "book-open" },
+    {
+      type: "data-grid",
+      entity: "Product",
+      columns: ["name", "price"],
+      itemActions: [{ label: "Refresh", event: "INIT" }]
+    },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      justify: "center",
+      children: [
+        { type: "button", label: "Previous", action: "PREV_PAGE", variant: "secondary", icon: "arrow-left" },
+        { type: "button", label: "Next", action: "NEXT_PAGE", variant: "secondary", icon: "arrow-right" }
+      ]
+    }
+  ]
+}];
+var FILE_IDLE_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "folder", size: "lg" },
+        { type: "typography", variant: "h2", content: "Files" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "File",
+      fields: ["name", "size"],
+      itemActions: [
+        { label: "Select", event: "SELECT" },
+        { label: "View", event: "VIEW" }
+      ]
+    }
+  ]
+}];
+var FILE_SELECTED_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "folder", size: "lg" },
+        { type: "typography", variant: "h2", content: "Files" },
+        { type: "badge", label: "Selected", variant: "success" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "data-list",
+      entity: "File",
+      fields: ["name", "size", "isSelected"],
+      itemActions: [
+        { label: "Deselect", event: "DESELECT" },
+        { label: "View", event: "VIEW" }
+      ]
+    }
+  ]
+}];
+var FILE_DETAIL_MODAL = ["render-ui", "modal", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "file", size: "lg" },
+        { type: "typography", variant: "h3", content: "File Details" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "stack",
+      direction: "vertical",
+      gap: "sm",
+      children: [
+        { type: "typography", variant: "body", content: "@entity.name" },
+        { type: "stats", label: "Size", value: "@entity.size" }
+      ]
+    },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      justify: "end",
+      children: [
+        { type: "button", label: "Close", event: "CLOSE", variant: "secondary" }
+      ]
+    }
+  ]
+}];
+var CONTACT_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "table", size: "lg" },
+        { type: "typography", variant: "h2", content: "Contacts" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      children: [
+        { type: "stats", label: "Sort By", value: "@entity.sortField" },
+        { type: "stats", label: "Direction", value: "@entity.sortDirection" }
+      ]
+    },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      children: [
+        { type: "button", label: "Sort by Name", event: "SORT", variant: "secondary", icon: "arrow-up" },
+        { type: "button", label: "Toggle Direction", event: "TOGGLE_DIRECTION", variant: "secondary", icon: "filter" },
+        { type: "button", label: "Clear Sort", event: "CLEAR_SORT", variant: "ghost", icon: "x" }
+      ]
+    },
+    {
+      type: "data-grid",
+      entity: "Contact",
+      columns: ["name", "email"],
+      itemActions: [{ label: "Refresh", event: "INIT" }]
+    }
+  ]
+}];
+var TASK_BROWSING_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "table", size: "lg" },
+        { type: "typography", variant: "h2", content: "Tasks" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      children: [
+        { type: "badge", label: "All", variant: "primary", icon: "filter" },
+        { type: "button", label: "Filter", action: "FILTER", variant: "secondary", icon: "filter" },
+        { type: "button", label: "Clear Filters", action: "CLEAR_FILTERS", variant: "ghost", icon: "x" }
+      ]
+    },
+    {
+      type: "data-grid",
+      entity: "Task",
+      columns: ["title", "status", "priority"],
+      itemActions: [{ label: "Refresh", event: "INIT" }]
+    }
+  ]
+}];
+var TASK_FILTERED_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "filter", size: "lg" },
+        { type: "typography", variant: "h2", content: "Tasks" },
+        { type: "badge", label: "Filtered", variant: "warning" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      children: [
+        { type: "badge", label: "Filtered", variant: "warning", icon: "filter" },
+        { type: "badge", label: "@entity.status", variant: "info" },
+        { type: "button", label: "Change Filter", action: "FILTER", variant: "secondary", icon: "filter" },
+        { type: "button", label: "Clear Filters", action: "CLEAR_FILTERS", variant: "ghost", icon: "x" }
+      ]
+    },
+    {
+      type: "data-grid",
+      entity: "Task",
+      columns: ["title", "status", "priority"],
+      itemActions: [{ label: "View", event: "VIEW" }]
+    }
+  ]
+}];
+var ARTICLE_IDLE_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "search", size: "lg" },
+        { type: "typography", variant: "h2", content: "Search Articles" }
+      ]
+    },
+    { type: "divider" },
+    { type: "search-input", placeholder: "Search articles...", event: "SEARCH", icon: "search" },
+    {
+      type: "data-list",
+      entity: "Article",
+      fields: ["title", "content"],
+      itemActions: [{ label: "View", event: "VIEW" }]
+    }
+  ]
+}];
+var ARTICLE_SEARCHING_MAIN_VIEW = ["render-ui", "main", {
+  type: "stack",
+  direction: "vertical",
+  gap: "md",
+  children: [
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "icon", name: "search", size: "lg" },
+        { type: "typography", variant: "h2", content: "Search Articles" },
+        { type: "badge", label: "Active Search", variant: "info" }
+      ]
+    },
+    { type: "divider" },
+    {
+      type: "stack",
+      direction: "horizontal",
+      gap: "sm",
+      align: "center",
+      children: [
+        { type: "search-input", placeholder: "Search articles...", event: "SEARCH", icon: "search" },
+        { type: "button", label: "Clear", event: "CLEAR_SEARCH", variant: "ghost", icon: "x" }
+      ]
+    },
+    {
+      type: "data-list",
+      entity: "Article",
+      fields: ["title", "content"],
+      itemActions: [{ label: "View", event: "VIEW" }]
+    }
+  ]
+}];
 var PAGINATION_BEHAVIOR = {
   name: "std-pagination",
   version: "1.0.0",
   description: "Page-based navigation for large data sets",
+  theme: DATA_ZINC_THEME,
   orbitals: [
     {
       name: "PaginationOrbital",
       entity: {
-        name: "PaginationState",
-        persistence: "runtime",
+        name: "Product",
+        persistence: "persistent",
+        collection: "products",
         fields: [
           { name: "id", type: "string", required: true },
+          { name: "name", type: "string", default: "" },
+          { name: "price", type: "number", default: 0 },
           { name: "page", type: "number", default: 1 },
           { name: "pageSize", type: "number", default: 20 },
           { name: "totalItems", type: "number", default: 0 },
-          { name: "defaultPageSize", type: "number", default: 20 }
+          { name: "totalPages", type: "number", default: 1 }
         ]
       },
       traits: [
         {
-          name: "Pagination",
-          linkedEntity: "PaginationState",
+          name: "PaginationControl",
+          linkedEntity: "Product",
           category: "interaction",
           stateMachine: {
-            states: [{ name: "Active", isInitial: true }],
+            states: [{ name: "browsing", isInitial: true }],
             events: [
               { key: "INIT", name: "Initialize" },
               { key: "NEXT_PAGE", name: "Next Page" },
               { key: "PREV_PAGE", name: "Previous Page" },
-              { key: "GO_TO_PAGE", name: "Go to Page" },
-              { key: "SET_PAGE_SIZE", name: "Set Page Size" }
+              { key: "GO_TO_PAGE", name: "Go to Page", payloadSchema: [{ name: "page", type: "number", required: true }] },
+              { key: "SET_PAGE_SIZE", name: "Set Page Size", payloadSchema: [{ name: "size", type: "number", required: true }] }
             ],
             transitions: [
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "INIT",
                 effects: [
+                  ["fetch", "Product"],
                   ["set", "@entity.page", 1],
-                  ["set", "@entity.pageSize", "@entity.defaultPageSize"]
+                  PRODUCT_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "NEXT_PAGE",
                 guard: ["<", "@entity.page", ["math/ceil", ["/", "@entity.totalItems", "@entity.pageSize"]]],
-                effects: [["set", "@entity.page", ["+", "@entity.page", 1]]]
+                effects: [
+                  ["fetch", "Product"],
+                  ["set", "@entity.page", ["+", "@entity.page", 1]],
+                  PRODUCT_MAIN_VIEW
+                ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "PREV_PAGE",
                 guard: [">", "@entity.page", 1],
-                effects: [["set", "@entity.page", ["-", "@entity.page", 1]]]
+                effects: [
+                  ["fetch", "Product"],
+                  ["set", "@entity.page", ["-", "@entity.page", 1]],
+                  PRODUCT_MAIN_VIEW
+                ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "GO_TO_PAGE",
                 guard: [
                   "and",
                   [">=", "@payload.page", 1],
                   ["<=", "@payload.page", ["math/ceil", ["/", "@entity.totalItems", "@entity.pageSize"]]]
                 ],
-                effects: [["set", "@entity.page", "@payload.page"]]
+                effects: [
+                  ["fetch", "Product"],
+                  ["set", "@entity.page", "@payload.page"],
+                  PRODUCT_MAIN_VIEW
+                ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "SET_PAGE_SIZE",
                 effects: [
+                  ["fetch", "Product"],
                   ["set", "@entity.pageSize", "@payload.size"],
-                  ["set", "@entity.page", 1]
+                  ["set", "@entity.page", 1],
+                  PRODUCT_MAIN_VIEW
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "ProductsPage",
+          path: "/products",
+          isInitial: true,
+          traits: [{ ref: "PaginationControl" }]
+        }
+      ]
     }
   ]
 };
@@ -87,135 +439,112 @@ var SELECTION_BEHAVIOR = {
   name: "std-selection",
   version: "1.0.0",
   description: "Single or multi-selection management",
+  theme: DATA_ZINC_THEME,
   orbitals: [
     {
       name: "SelectionOrbital",
       entity: {
-        name: "SelectionState",
-        persistence: "runtime",
+        name: "File",
+        persistence: "persistent",
+        collection: "files",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "selected", type: "array", default: [] },
-          { name: "lastSelected", type: "string", default: null },
-          { name: "mode", type: "string", default: "multi" },
-          { name: "maxSelection", type: "number", default: null }
+          { name: "name", type: "string", default: "" },
+          { name: "size", type: "number", default: 0 },
+          { name: "isSelected", type: "boolean", default: false }
         ]
       },
       traits: [
         {
-          name: "Selection",
-          linkedEntity: "SelectionState",
+          name: "SelectionControl",
+          linkedEntity: "File",
           category: "interaction",
           stateMachine: {
-            states: [{ name: "Active", isInitial: true }],
+            states: [
+              { name: "idle", isInitial: true },
+              { name: "selected" },
+              { name: "viewing" }
+            ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "SELECT", name: "Select" },
+              { key: "SELECT", name: "Select", payloadSchema: [{ name: "id", type: "string", required: true }] },
               { key: "DESELECT", name: "Deselect" },
-              { key: "TOGGLE", name: "Toggle" },
-              { key: "SELECT_ALL", name: "Select All" },
-              { key: "CLEAR", name: "Clear" }
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] },
+              { key: "CLOSE", name: "Close" },
+              { key: "CANCEL", name: "Cancel" }
             ],
             transitions: [
               {
-                from: "Active",
-                to: "Active",
+                from: "idle",
+                to: "idle",
                 event: "INIT",
                 effects: [
-                  ["set", "@entity.selected", []],
-                  ["set", "@entity.lastSelected", null]
+                  ["fetch", "File"],
+                  FILE_IDLE_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "idle",
+                to: "selected",
                 event: "SELECT",
                 effects: [
-                  [
-                    "if",
-                    ["=", "@entity.mode", "single"],
-                    [
-                      "do",
-                      ["set", "@entity.selected", ["@payload.id"]],
-                      ["set", "@entity.lastSelected", "@payload.id"]
-                    ],
-                    [
-                      "if",
-                      [
-                        "or",
-                        ["not", "@entity.maxSelection"],
-                        ["<", ["array/len", "@entity.selected"], "@entity.maxSelection"]
-                      ],
-                      [
-                        "do",
-                        ["set", "@entity.selected", ["array/append", "@entity.selected", "@payload.id"]],
-                        ["set", "@entity.lastSelected", "@payload.id"]
-                      ],
-                      ["notify", "in_app", "Maximum selection reached"]
-                    ]
-                  ]
+                  ["fetch", "File"],
+                  ["set", "@entity.isSelected", true],
+                  FILE_SELECTED_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
-                event: "DESELECT",
+                from: "selected",
+                to: "selected",
+                event: "SELECT",
                 effects: [
-                  ["set", "@entity.selected", ["array/filter", "@entity.selected", ["fn", "id", ["!=", "@id", "@payload.id"]]]]
+                  ["fetch", "File"],
+                  ["set", "@entity.isSelected", true],
+                  FILE_SELECTED_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
-                event: "TOGGLE",
+                from: "selected",
+                to: "idle",
+                event: "DESELECT",
                 effects: [
-                  [
-                    "if",
-                    ["array/includes", "@entity.selected", "@payload.id"],
-                    ["set", "@entity.selected", ["array/filter", "@entity.selected", ["fn", "id", ["!=", "@id", "@payload.id"]]]],
-                    [
-                      "if",
-                      ["or", ["=", "@entity.mode", "single"], [
-                        "or",
-                        ["not", "@entity.maxSelection"],
-                        ["<", ["array/len", "@entity.selected"], "@entity.maxSelection"]
-                      ]],
-                      [
-                        "set",
-                        "@entity.selected",
-                        [
-                          "if",
-                          ["=", "@entity.mode", "single"],
-                          ["@payload.id"],
-                          ["array/append", "@entity.selected", "@payload.id"]
-                        ]
-                      ],
-                      ["notify", "in_app", "Maximum selection reached"]
-                    ]
-                  ]
+                  ["fetch", "File"],
+                  ["set", "@entity.isSelected", false],
+                  FILE_IDLE_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
-                event: "SELECT_ALL",
-                guard: ["=", "@entity.mode", "multi"],
-                effects: [["set", "@entity.selected", "@payload.ids"]]
+                from: "idle",
+                to: "viewing",
+                event: "VIEW",
+                effects: [
+                  ["fetch", "File"],
+                  FILE_DETAIL_MODAL
+                ]
               },
               {
-                from: "Active",
-                to: "Active",
-                event: "CLEAR",
+                from: "selected",
+                to: "viewing",
+                event: "VIEW",
                 effects: [
-                  ["set", "@entity.selected", []],
-                  ["set", "@entity.lastSelected", null]
+                  ["fetch", "File"],
+                  FILE_DETAIL_MODAL
                 ]
-              }
+              },
+              { from: "viewing", to: "idle", event: "CLOSE", effects: [["render-ui", "modal", null]] },
+              { from: "viewing", to: "idle", event: "CANCEL", effects: [["render-ui", "modal", null]] }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "FilesPage",
+          path: "/files",
+          isInitial: true,
+          traits: [{ ref: "SelectionControl" }]
+        }
+      ]
     }
   ]
 };
@@ -223,281 +552,308 @@ var SORT_BEHAVIOR = {
   name: "std-sort",
   version: "1.0.0",
   description: "Sorting by field with direction toggle",
+  theme: DATA_ZINC_THEME,
   orbitals: [
     {
       name: "SortOrbital",
       entity: {
-        name: "SortState",
-        persistence: "runtime",
+        name: "Contact",
+        persistence: "persistent",
+        collection: "contacts",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "sortField", type: "string", default: null },
-          { name: "sortDirection", type: "string", default: "asc" },
-          { name: "defaultField", type: "string", default: null },
-          { name: "defaultDirection", type: "string", default: "asc" }
+          { name: "name", type: "string", default: "" },
+          { name: "email", type: "string", default: "" },
+          { name: "sortField", type: "string", default: "name" },
+          { name: "sortDirection", type: "string", default: "asc" }
         ]
       },
       traits: [
         {
-          name: "Sort",
-          linkedEntity: "SortState",
+          name: "SortControl",
+          linkedEntity: "Contact",
           category: "interaction",
           stateMachine: {
-            states: [{ name: "Active", isInitial: true }],
+            states: [{ name: "browsing", isInitial: true }],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "SORT", name: "Sort" },
+              { key: "SORT", name: "Sort", payloadSchema: [{ name: "field", type: "string", required: true }] },
               { key: "TOGGLE_DIRECTION", name: "Toggle Direction" },
               { key: "CLEAR_SORT", name: "Clear Sort" }
             ],
             transitions: [
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "INIT",
                 effects: [
-                  ["set", "@entity.sortField", "@entity.defaultField"],
-                  ["set", "@entity.sortDirection", "@entity.defaultDirection"]
+                  ["fetch", "Contact"],
+                  ["set", "@entity.sortField", "name"],
+                  ["set", "@entity.sortDirection", "asc"],
+                  CONTACT_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "SORT",
                 effects: [
-                  [
-                    "if",
-                    ["=", "@entity.sortField", "@payload.field"],
-                    ["set", "@entity.sortDirection", ["if", ["=", "@entity.sortDirection", "asc"], "desc", "asc"]],
-                    [
-                      "do",
-                      ["set", "@entity.sortField", "@payload.field"],
-                      ["set", "@entity.sortDirection", "asc"]
-                    ]
-                  ]
+                  ["fetch", "Contact"],
+                  ["set", "@entity.sortField", "@payload.field"],
+                  CONTACT_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "TOGGLE_DIRECTION",
-                guard: ["!=", "@entity.sortField", null],
                 effects: [
-                  ["set", "@entity.sortDirection", ["if", ["=", "@entity.sortDirection", "asc"], "desc", "asc"]]
+                  ["fetch", "Contact"],
+                  ["set", "@entity.sortDirection", ["if", ["=", "@entity.sortDirection", "asc"], "desc", "asc"]],
+                  CONTACT_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "CLEAR_SORT",
                 effects: [
-                  ["set", "@entity.sortField", null],
-                  ["set", "@entity.sortDirection", "asc"]
+                  ["fetch", "Contact"],
+                  ["set", "@entity.sortField", "name"],
+                  ["set", "@entity.sortDirection", "asc"],
+                  CONTACT_MAIN_VIEW
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "ContactsPage",
+          path: "/contacts",
+          isInitial: true,
+          traits: [{ ref: "SortControl" }]
+        }
+      ]
     }
   ]
 };
 var FILTER_BEHAVIOR = {
   name: "std-filter",
   version: "1.0.0",
-  description: "Query Singleton pattern for explicit filtering - use with entity-table query prop",
+  description: "Query Singleton pattern for explicit filtering",
+  theme: DATA_ZINC_THEME,
   orbitals: [
     {
       name: "FilterOrbital",
       entity: {
-        name: "QueryState",
-        persistence: "runtime",
+        name: "Task",
+        persistence: "persistent",
+        collection: "tasks",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "status", type: "string", default: null },
-          { name: "priority", type: "string", default: null },
-          { name: "search", type: "string", default: "" },
-          { name: "sortBy", type: "string", default: "createdAt" },
-          { name: "sortOrder", type: "string", default: "desc" },
-          { name: "entityType", type: "string", default: "" },
-          { name: "filters", type: "array", default: [] },
-          { name: "columns", type: "array", default: [] }
+          { name: "title", type: "string", default: "" },
+          { name: "status", type: "string", default: "open" },
+          { name: "priority", type: "string", default: "medium" }
         ]
       },
       traits: [
         {
-          name: "Filter",
-          linkedEntity: "QueryState",
+          name: "FilterControl",
+          linkedEntity: "Task",
           category: "interaction",
           stateMachine: {
-            states: [{ name: "Active", isInitial: true }],
+            states: [
+              { name: "browsing", isInitial: true },
+              { name: "filtered" }
+            ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "FILTER", name: "Filter" },
-              { key: "SEARCH", name: "Search" },
-              { key: "SORT", name: "Sort" },
-              { key: "CLEAR_FILTERS", name: "Clear Filters" }
+              { key: "FILTER", name: "Filter", payloadSchema: [{ name: "status", type: "string", required: true }] },
+              { key: "CLEAR_FILTERS", name: "Clear Filters" },
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "browsing",
                 event: "INIT",
                 effects: [
-                  ["render-ui", "sidebar", {
-                    type: "filter-group",
-                    entity: "@entity.entityType",
-                    query: "@QueryState",
-                    filters: "@entity.filters"
-                  }],
-                  ["render-ui", "main", {
-                    type: "entity-table",
-                    entity: "@entity.entityType",
-                    query: "@QueryState",
-                    columns: "@entity.columns"
-                  }]
+                  ["fetch", "Task"],
+                  TASK_BROWSING_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
+                from: "browsing",
+                to: "filtered",
                 event: "FILTER",
                 effects: [
-                  ["set", "@QueryState.status", "@payload.status"],
-                  ["set", "@QueryState.priority", "@payload.priority"]
+                  ["fetch", "Task"],
+                  ["set", "@entity.status", "@payload.status"],
+                  TASK_FILTERED_MAIN_VIEW
                 ]
               },
               {
-                from: "Active",
-                to: "Active",
-                event: "SEARCH",
-                effects: [["set", "@QueryState.search", "@payload.searchTerm"]]
+                from: "filtered",
+                to: "filtered",
+                event: "FILTER",
+                effects: [
+                  ["fetch", "Task"],
+                  ["set", "@entity.status", "@payload.status"],
+                  TASK_FILTERED_MAIN_VIEW
+                ]
               },
               {
-                from: "Active",
-                to: "Active",
-                event: "SORT",
+                from: "filtered",
+                to: "browsing",
+                event: "CLEAR_FILTERS",
                 effects: [
-                  ["set", "@QueryState.sortBy", "@payload.field"],
-                  ["set", "@QueryState.sortOrder", "@payload.order"]
+                  ["set", "@entity.status", "open"],
+                  ["fetch", "Task"],
+                  TASK_BROWSING_MAIN_VIEW
                 ]
               },
+              // VIEW self-transitions
               {
-                from: "Active",
-                to: "Active",
-                event: "CLEAR_FILTERS",
+                from: "browsing",
+                to: "browsing",
+                event: "VIEW",
+                effects: [
+                  ["fetch", "Task"],
+                  TASK_BROWSING_MAIN_VIEW
+                ]
+              },
+              {
+                from: "filtered",
+                to: "filtered",
+                event: "VIEW",
                 effects: [
-                  ["set", "@QueryState.status", null],
-                  ["set", "@QueryState.priority", null],
-                  ["set", "@QueryState.search", ""]
+                  ["fetch", "Task"],
+                  TASK_FILTERED_MAIN_VIEW
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "TasksPage",
+          path: "/tasks",
+          isInitial: true,
+          traits: [{ ref: "FilterControl" }]
+        }
+      ]
     }
   ]
 };
 var SEARCH_BEHAVIOR = {
   name: "std-search",
   version: "1.0.0",
-  description: "Search with debounce - updates QueryState.search field",
+  description: "Search behavior for entity lists",
+  theme: DATA_ZINC_THEME,
   orbitals: [
     {
       name: "SearchOrbital",
       entity: {
-        name: "SearchState",
-        persistence: "runtime",
+        name: "Article",
+        persistence: "persistent",
+        collection: "articles",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "search", type: "string", default: "" },
-          { name: "isSearching", type: "boolean", default: false },
-          { name: "minLength", type: "number", default: 2 },
-          { name: "debounceMs", type: "number", default: 300 },
-          { name: "placeholder", type: "string", default: "Search..." }
+          { name: "title", type: "string", default: "" },
+          { name: "content", type: "string", default: "" },
+          { name: "searchTerm", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Search",
-          linkedEntity: "SearchState",
+          name: "SearchControl",
+          linkedEntity: "Article",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "Idle", isInitial: true },
-              { name: "Searching" }
+              { name: "idle", isInitial: true },
+              { name: "searching" }
             ],
             events: [
               { key: "INIT", name: "Initialize" },
-              { key: "SEARCH", name: "Search" },
+              { key: "SEARCH", name: "Search", payloadSchema: [{ name: "term", type: "string", required: true }] },
               { key: "CLEAR_SEARCH", name: "Clear Search" },
-              { key: "SEARCH_COMPLETE", name: "Search Complete" }
+              { key: "VIEW", name: "View", payloadSchema: [{ name: "id", type: "string", required: true }] }
             ],
             transitions: [
               {
-                from: "Idle",
-                to: "Idle",
+                from: "idle",
+                to: "idle",
                 event: "INIT",
                 effects: [
-                  ["set", "@entity.search", ""],
-                  ["set", "@entity.isSearching", false],
-                  ["render-ui", "main", {
-                    type: "search-input",
-                    query: "@SearchState",
-                    placeholder: "@entity.placeholder"
-                  }]
+                  ["fetch", "Article"],
+                  ARTICLE_IDLE_MAIN_VIEW
                 ]
               },
               {
-                from: "Idle",
-                to: "Searching",
+                from: "idle",
+                to: "searching",
                 event: "SEARCH",
-                guard: [">=", ["str/len", "@payload.term"], "@entity.minLength"],
                 effects: [
-                  ["set", "@entity.search", "@payload.term"],
-                  ["set", "@entity.isSearching", true],
-                  ["async/debounce", "@entity.debounceMs", ["emit", "SEARCH_COMPLETE"]]
+                  ["fetch", "Article"],
+                  ["set", "@entity.searchTerm", "@payload.term"],
+                  ARTICLE_SEARCHING_MAIN_VIEW
                 ]
               },
               {
-                from: "Idle",
-                to: "Idle",
+                from: "searching",
+                to: "searching",
                 event: "SEARCH",
-                guard: ["<", ["str/len", "@payload.term"], "@entity.minLength"],
-                effects: [["set", "@entity.search", "@payload.term"]]
+                effects: [
+                  ["fetch", "Article"],
+                  ["set", "@entity.searchTerm", "@payload.term"],
+                  ARTICLE_SEARCHING_MAIN_VIEW
+                ]
               },
               {
-                from: "Searching",
-                to: "Idle",
-                event: "SEARCH_COMPLETE",
-                effects: [["set", "@entity.isSearching", false]]
+                from: "searching",
+                to: "idle",
+                event: "CLEAR_SEARCH",
+                effects: [
+                  ["set", "@entity.searchTerm", ""],
+                  ["fetch", "Article"],
+                  ARTICLE_IDLE_MAIN_VIEW
+                ]
               },
+              // VIEW self-transitions
               {
-                from: "Idle",
-                to: "Idle",
-                event: "CLEAR_SEARCH",
+                from: "idle",
+                to: "idle",
+                event: "VIEW",
                 effects: [
-                  ["set", "@entity.search", ""],
-                  ["set", "@entity.isSearching", false]
+                  ["fetch", "Article"],
+                  ARTICLE_IDLE_MAIN_VIEW
                 ]
               },
               {
-                from: "Searching",
-                to: "Idle",
-                event: "CLEAR_SEARCH",
+                from: "searching",
+                to: "searching",
+                event: "VIEW",
                 effects: [
-                  ["set", "@entity.search", ""],
-                  ["set", "@entity.isSearching", false]
+                  ["fetch", "Article"],
+                  ARTICLE_SEARCHING_MAIN_VIEW
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "ArticlesPage",
+          path: "/articles",
+          isInitial: true,
+          traits: [{ ref: "SearchControl" }]
+        }
+      ]
     }
   ]
 };