@almadar/std 2.1.1 → 2.4.1

package/dist/behaviors/feedback.js

@@ -1,332 +1,417 @@
 // behaviors/feedback.ts
+var FEEDBACK_THEME = {
+  name: "feedback-amber",
+  tokens: {
+    colors: {
+      primary: "#d97706",
+      "primary-hover": "#b45309",
+      "primary-foreground": "#ffffff",
+      accent: "#f59e0b",
+      "accent-foreground": "#000000",
+      success: "#22c55e",
+      warning: "#f59e0b",
+      error: "#ef4444"
+    }
+  }
+};
+var notificationEmptyEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "bell-off", size: "lg" },
+      { type: "typography", variant: "h2", content: "Notifications" }
+    ] },
+    { type: "divider" },
+    // Empty state
+    { type: "stack", direction: "vertical", gap: "md", align: "center", children: [
+      { type: "icon", name: "inbox", size: "xl" },
+      { type: "typography", variant: "h3", content: "No Notifications" },
+      { type: "typography", variant: "body", content: "Nothing to display" },
+      { type: "button", label: "Send Test Notification", action: "SHOW", icon: "bell", variant: "primary" }
+    ] }
+  ] }]
+];
+var notificationVisibleEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "bell", size: "lg" },
+      { type: "typography", variant: "h2", content: "Notifications" }
+    ] },
+    { type: "divider" },
+    // Notification list
+    {
+      type: "data-list",
+      entity: "Notification",
+      fields: [
+        { name: "title", label: "Title", icon: "tag", variant: "h4" },
+        { name: "message", label: "Message", icon: "message-square", variant: "body" },
+        { name: "type", label: "Type", icon: "info", variant: "badge" }
+      ],
+      actions: [
+        { label: "Dismiss", event: "HIDE", icon: "x", variant: "ghost" }
+      ]
+    }
+  ] }]
+];
 var NOTIFICATION_BEHAVIOR = {
   name: "std-notification",
   version: "1.0.0",
   description: "Toast notification with auto-dismiss",
+  theme: FEEDBACK_THEME,
   orbitals: [
     {
       name: "NotificationOrbital",
       entity: {
-        name: "NotificationState",
+        name: "Notification",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "notifications", type: "array", default: [] },
-          { name: "currentId", type: "number", default: 0 },
-          { name: "autoDismissMs", type: "number", default: 5e3 }
+          { name: "message", type: "string", default: "" },
+          { name: "type", type: "string", default: "info" },
+          { name: "title", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Notification",
-          linkedEntity: "NotificationState",
+          name: "NotificationDisplay",
+          linkedEntity: "Notification",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "Hidden", isInitial: true },
-              { name: "Visible" },
-              { name: "Dismissing" }
+              { name: "hidden", isInitial: true },
+              { name: "visible" }
             ],
             events: [
-              { key: "SHOW", name: "Show" },
-              { key: "HIDE", name: "Hide" },
-              { key: "DISMISS", name: "Dismiss" },
-              { key: "AUTO_DISMISS", name: "Auto Dismiss" }
+              { key: "INIT", name: "Initialize" },
+              {
+                key: "SHOW",
+                name: "Show",
+                payloadSchema: [
+                  { name: "message", type: "string", required: true },
+                  { name: "type", type: "string", required: false },
+                  { name: "title", type: "string", required: false }
+                ]
+              },
+              { key: "HIDE", name: "Hide" }
             ],
             transitions: [
               {
-                from: "Hidden",
-                to: "Visible",
-                event: "SHOW",
+                from: "hidden",
+                to: "hidden",
+                event: "INIT",
                 effects: [
-                  [
-                    "let",
-                    [["id", ["+", "@entity.currentId", 1]]],
-                    [
-                      "do",
-                      ["set", "@entity.currentId", "@id"],
-                      [
-                        "set",
-                        "@entity.notifications",
-                        ["array/append", "@entity.notifications", {
-                          id: "@id",
-                          type: "@payload.type",
-                          message: "@payload.message",
-                          title: "@payload.title"
-                        }]
-                      ],
-                      [
-                        "when",
-                        [">", "@entity.autoDismissMs", 0],
-                        ["async/delay", "@entity.autoDismissMs", ["emit", "AUTO_DISMISS", { id: "@id" }]]
-                      ]
-                    ]
-                  ]
+                  ...notificationEmptyEffects
                 ]
               },
               {
-                from: "Visible",
-                to: "Visible",
+                from: "hidden",
+                to: "visible",
                 event: "SHOW",
                 effects: [
-                  [
-                    "let",
-                    [["id", ["+", "@entity.currentId", 1]]],
-                    [
-                      "do",
-                      ["set", "@entity.currentId", "@id"],
-                      [
-                        "set",
-                        "@entity.notifications",
-                        ["array/append", "@entity.notifications", {
-                          id: "@id",
-                          type: "@payload.type",
-                          message: "@payload.message",
-                          title: "@payload.title"
-                        }]
-                      ],
-                      [
-                        "when",
-                        [">", "@entity.autoDismissMs", 0],
-                        ["async/delay", "@entity.autoDismissMs", ["emit", "AUTO_DISMISS", { id: "@id" }]]
-                      ]
-                    ]
-                  ]
+                  ["fetch", "Notification"],
+                  ["set", "@entity.message", "@payload.message"],
+                  ["set", "@entity.type", "@payload.type"],
+                  ["set", "@entity.title", "@payload.title"],
+                  ...notificationVisibleEffects
                 ]
               },
               {
-                from: "Visible",
-                to: "Visible",
-                event: "DISMISS",
+                from: "visible",
+                to: "visible",
+                event: "SHOW",
                 effects: [
-                  [
-                    "set",
-                    "@entity.notifications",
-                    ["array/filter", "@entity.notifications", ["fn", "n", ["!=", "@n.id", "@payload.id"]]]
-                  ]
+                  ["fetch", "Notification"],
+                  ["set", "@entity.message", "@payload.message"],
+                  ["set", "@entity.type", "@payload.type"],
+                  ["set", "@entity.title", "@payload.title"],
+                  ...notificationVisibleEffects
                 ]
               },
               {
-                from: "Visible",
-                to: "Visible",
-                event: "AUTO_DISMISS",
+                from: "visible",
+                to: "hidden",
+                event: "HIDE",
                 effects: [
-                  [
-                    "set",
-                    "@entity.notifications",
-                    ["array/filter", "@entity.notifications", ["fn", "n", ["!=", "@n.id", "@payload.id"]]]
-                  ]
+                  ["set", "@entity.message", ""],
+                  ["set", "@entity.title", ""],
+                  ...notificationEmptyEffects
                 ]
-              },
-              {
-                from: "Visible",
-                to: "Hidden",
-                event: "HIDE",
-                effects: [["set", "@entity.notifications", []]]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "NotificationsPage",
+          path: "/notifications",
+          isInitial: true,
+          traits: [{ ref: "NotificationDisplay" }]
+        }
+      ]
     }
   ]
 };
+var confirmationClosedEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title
+    { type: "stack", direction: "horizontal", gap: "sm", children: [
+      { type: "icon", name: "shield-check", size: "lg" },
+      { type: "typography", variant: "h2", content: "Confirmation" }
+    ] },
+    { type: "divider" },
+    // Idle state
+    { type: "stack", direction: "vertical", gap: "md", align: "center", children: [
+      { type: "icon", name: "check-circle", size: "xl" },
+      { type: "typography", variant: "body", content: "No pending confirmations" }
+    ] }
+  ] }]
+];
 var CONFIRMATION_BEHAVIOR = {
   name: "std-confirmation",
   version: "1.0.0",
   description: "Confirmation dialog with confirm/cancel actions",
+  theme: FEEDBACK_THEME,
   orbitals: [
     {
       name: "ConfirmationOrbital",
       entity: {
-        name: "ConfirmationState",
+        name: "Confirmation",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
           { name: "title", type: "string", default: "" },
-          { name: "message", type: "string", default: "" },
-          { name: "pendingAction", type: "object", default: null },
-          { name: "confirmLabel", type: "string", default: "Confirm" },
-          { name: "cancelLabel", type: "string", default: "Cancel" },
-          { name: "confirmVariant", type: "string", default: "danger" }
+          { name: "message", type: "string", default: "" }
         ]
       },
       traits: [
         {
-          name: "Confirmation",
-          linkedEntity: "ConfirmationState",
+          name: "ConfirmationDialog",
+          linkedEntity: "Confirmation",
           category: "interaction",
           stateMachine: {
             states: [
-              { name: "Closed", isInitial: true },
-              { name: "Open" }
+              { name: "closed", isInitial: true },
+              { name: "open" }
             ],
             events: [
-              { key: "REQUEST", name: "Request" },
+              { key: "INIT", name: "Initialize" },
+              {
+                key: "REQUEST",
+                name: "Request",
+                payloadSchema: [
+                  { name: "title", type: "string", required: true },
+                  { name: "message", type: "string", required: true }
+                ]
+              },
               { key: "CONFIRM", name: "Confirm" },
-              { key: "CANCEL", name: "Cancel" }
+              { key: "CANCEL", name: "Cancel" },
+              { key: "CLOSE", name: "Close" }
             ],
             transitions: [
               {
-                from: "Closed",
-                to: "Open",
+                from: "closed",
+                to: "closed",
+                event: "INIT",
+                effects: [
+                  ...confirmationClosedEffects
+                ]
+              },
+              {
+                from: "closed",
+                to: "open",
                 event: "REQUEST",
                 effects: [
                   ["set", "@entity.title", "@payload.title"],
                   ["set", "@entity.message", "@payload.message"],
-                  ["set", "@entity.pendingAction", "@payload.onConfirm"],
-                  ["render-ui", "modal", {
-                    type: "confirm-dialog",
-                    isOpen: true,
-                    onClose: "CANCEL",
-                    onConfirm: "CONFIRM",
-                    title: "@entity.title",
-                    message: "@entity.message",
-                    confirmText: "@entity.confirmLabel",
-                    cancelText: "@entity.cancelLabel",
-                    variant: "@entity.confirmVariant"
-                  }]
+                  ["render-ui", "modal", { type: "stack", direction: "vertical", gap: "lg", children: [
+                    // Modal header: warning icon + title
+                    { type: "stack", direction: "horizontal", gap: "sm", children: [
+                      { type: "icon", name: "alert-triangle", size: "lg" },
+                      { type: "typography", variant: "h3", content: "@entity.title" }
+                    ] },
+                    { type: "divider" },
+                    // Message body
+                    { type: "typography", variant: "body", content: "@entity.message" },
+                    { type: "divider" },
+                    // Action buttons
+                    { type: "stack", direction: "horizontal", gap: "md", justify: "end", children: [
+                      { type: "button", label: "Cancel", icon: "x", variant: "secondary", action: "CANCEL" },
+                      { type: "button", label: "Confirm", icon: "check", variant: "primary", action: "CONFIRM" }
+                    ] }
+                  ] }]
                 ]
               },
               {
-                from: "Open",
-                to: "Closed",
+                from: "open",
+                to: "closed",
                 event: "CONFIRM",
                 effects: [
-                  ["when", "@entity.pendingAction", ["emit", "@entity.pendingAction.event", "@entity.pendingAction.payload"]],
-                  ["set", "@entity.pendingAction", null]
+                  ["set", "@entity.title", ""],
+                  ["set", "@entity.message", ""],
+                  ["render-ui", "modal", null]
                 ]
               },
               {
-                from: "Open",
-                to: "Closed",
+                from: "open",
+                to: "closed",
                 event: "CANCEL",
-                effects: [["set", "@entity.pendingAction", null]]
+                effects: [
+                  ["set", "@entity.title", ""],
+                  ["set", "@entity.message", ""],
+                  ["render-ui", "modal", null]
+                ]
+              },
+              {
+                from: "open",
+                to: "closed",
+                event: "CLOSE",
+                effects: [
+                  ["set", "@entity.title", ""],
+                  ["set", "@entity.message", ""],
+                  ["render-ui", "modal", null]
+                ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "ConfirmationPage",
+          path: "/confirmation",
+          isInitial: true,
+          traits: [{ ref: "ConfirmationDialog" }]
+        }
+      ]
     }
   ]
 };
+var undoReadyEffects = [
+  ["render-ui", "main", { type: "stack", direction: "vertical", gap: "lg", children: [
+    // Header: icon + title + clear button
+    { type: "stack", direction: "horizontal", justify: "space-between", children: [
+      { type: "stack", direction: "horizontal", gap: "sm", children: [
+        { type: "icon", name: "rotate-ccw", size: "lg" },
+        { type: "typography", variant: "h2", content: "Undo History" }
+      ] },
+      { type: "button", label: "Clear All", icon: "trash-2", variant: "ghost", action: "CLEAR" }
+    ] },
+    { type: "divider" },
+    // Stats row
+    { type: "stack", direction: "horizontal", gap: "md", children: [
+      { type: "stats", label: "Actions", icon: "layers", entity: "UndoEntry" },
+      { type: "stats", label: "Status", icon: "activity", entity: "UndoEntry" }
+    ] },
+    { type: "divider" },
+    // Undo entries data grid
+    {
+      type: "data-grid",
+      entity: "UndoEntry",
+      cols: 1,
+      gap: "sm",
+      fields: [
+        { name: "action", label: "Action", icon: "zap", variant: "h4" },
+        { name: "description", label: "Description", icon: "file-text", variant: "body" },
+        { name: "status", label: "Status", icon: "circle", variant: "badge" }
+      ],
+      actions: [
+        { label: "Undo", event: "UNDO", icon: "rotate-ccw", variant: "secondary" }
+      ]
+    }
+  ] }]
+];
 var UNDO_BEHAVIOR = {
   name: "std-undo",
   version: "1.0.0",
-  description: "Undo/redo stack for reversible actions",
+  description: "Undo stack for reversible actions",
+  theme: FEEDBACK_THEME,
   orbitals: [
     {
       name: "UndoOrbital",
       entity: {
-        name: "UndoState",
+        name: "UndoEntry",
         persistence: "runtime",
         fields: [
           { name: "id", type: "string", required: true },
-          { name: "undoStack", type: "array", default: [] },
-          { name: "redoStack", type: "array", default: [] },
-          { name: "maxHistory", type: "number", default: 50 },
-          { name: "showToast", type: "boolean", default: true }
+          { name: "action", type: "string", default: "" },
+          { name: "description", type: "string", default: "" },
+          { name: "status", type: "string", default: "ready" }
         ]
       },
       traits: [
         {
-          name: "Undo",
-          linkedEntity: "UndoState",
+          name: "UndoManagement",
+          linkedEntity: "UndoEntry",
           category: "interaction",
           stateMachine: {
-            states: [{ name: "Ready", isInitial: true }],
+            states: [
+              { name: "ready", isInitial: true }
+            ],
             events: [
-              { key: "PUSH", name: "Push" },
+              { key: "INIT", name: "Initialize" },
+              {
+                key: "PUSH",
+                name: "Push",
+                payloadSchema: [
+                  { name: "action", type: "string", required: true },
+                  { name: "description", type: "string", required: true }
+                ]
+              },
               { key: "UNDO", name: "Undo" },
-              { key: "REDO", name: "Redo" },
               { key: "CLEAR", name: "Clear" }
             ],
             transitions: [
               {
-                from: "Ready",
-                to: "Ready",
-                event: "PUSH",
+                from: "ready",
+                to: "ready",
+                event: "INIT",
                 effects: [
-                  [
-                    "set",
-                    "@entity.undoStack",
-                    [
-                      "array/slice",
-                      ["array/prepend", "@entity.undoStack", {
-                        action: "@payload.action",
-                        data: "@payload.data",
-                        reverseAction: "@payload.reverseAction",
-                        reverseData: "@payload.reverseData",
-                        description: "@payload.description"
-                      }],
-                      0,
-                      "@entity.maxHistory"
-                    ]
-                  ],
-                  ["set", "@entity.redoStack", []],
-                  [
-                    "when",
-                    "@entity.showToast",
-                    ["emit", "NOTIFY", {
-                      type: "info",
-                      message: ["str/concat", "@payload.description", " - Click to undo"],
-                      action: { label: "Undo", event: "UNDO" }
-                    }]
-                  ]
+                  ["fetch", "UndoEntry"],
+                  ...undoReadyEffects
                 ]
               },
               {
-                from: "Ready",
-                to: "Ready",
-                event: "UNDO",
-                guard: [">", ["array/len", "@entity.undoStack"], 0],
+                from: "ready",
+                to: "ready",
+                event: "PUSH",
                 effects: [
-                  [
-                    "let",
-                    [["action", ["array/first", "@entity.undoStack"]]],
-                    [
-                      "do",
-                      ["set", "@entity.undoStack", ["array/slice", "@entity.undoStack", 1]],
-                      ["set", "@entity.redoStack", ["array/prepend", "@entity.redoStack", "@action"]],
-                      ["emit", "@action.reverseAction", "@action.reverseData"]
-                    ]
-                  ]
+                  ["set", "@entity.action", "@payload.action"],
+                  ["set", "@entity.description", "@payload.description"],
+                  ["set", "@entity.status", "recorded"]
                 ]
               },
               {
-                from: "Ready",
-                to: "Ready",
-                event: "REDO",
-                guard: [">", ["array/len", "@entity.redoStack"], 0],
+                from: "ready",
+                to: "ready",
+                event: "UNDO",
                 effects: [
-                  [
-                    "let",
-                    [["action", ["array/first", "@entity.redoStack"]]],
-                    [
-                      "do",
-                      ["set", "@entity.redoStack", ["array/slice", "@entity.redoStack", 1]],
-                      ["set", "@entity.undoStack", ["array/prepend", "@entity.undoStack", "@action"]],
-                      ["emit", "@action.action", "@action.data"]
-                    ]
-                  ]
+                  ["set", "@entity.status", "undone"]
                 ]
               },
               {
-                from: "Ready",
-                to: "Ready",
+                from: "ready",
+                to: "ready",
                 event: "CLEAR",
                 effects: [
-                  ["set", "@entity.undoStack", []],
-                  ["set", "@entity.redoStack", []]
+                  ["set", "@entity.action", ""],
+                  ["set", "@entity.description", ""],
+                  ["set", "@entity.status", "ready"]
                 ]
               }
             ]
           }
         }
       ],
-      pages: []
+      pages: [
+        {
+          name: "UndoPage",
+          path: "/undo",
+          isInitial: true,
+          traits: [{ ref: "UndoManagement" }]
+        }
+      ]
     }
   ]
 };