@almadar/ui 3.8.2 → 3.9.0

package/dist/runtime/index.js

@@ -36,7 +36,7 @@ import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { isCircuitEvent, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1, isEntityCall, isInlineTrait } from '@almadar/core';
 import '@tanstack/react-query';
-import { StateMachineManager, createContextFromBindings, interpolateValue, EffectExecutor } from '@almadar/runtime';
+import { StateMachineManager, createContextFromBindings, interpolateValue, createServerEffectHandlers, EffectExecutor, InMemoryPersistence } from '@almadar/runtime';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18869,10 +18869,7 @@ var init_DataList = __esm({
                     HStack,
                     {
                       gap: "xs",
-                      className: cn(
-                        "flex-shrink-0 transition-opacity duration-200",
-                        "opacity-0 group-hover:opacity-100"
-                      ),
+                      className: "flex-shrink-0",
                       children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
                         Button,
                         {
@@ -18962,33 +18959,23 @@ var init_DataList = __esm({
                     ] }, field.name);
                   })
                 ] }),
-                itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
-                  HStack,
+                itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                  Button,
                   {
-                    gap: "xs",
+                    variant: action.variant ?? "ghost",
+                    size: "sm",
+                    onClick: handleActionClick(action, itemData),
+                    "data-testid": `action-${action.event}`,
                     className: cn(
-                      "flex-shrink-0 transition-opacity duration-200",
-                      "opacity-0 group-hover:opacity-100"
+                      action.variant === "danger" && "text-error hover:bg-error/10"
                     ),
-                    children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                      Button,
-                      {
-                        variant: action.variant ?? "ghost",
-                        size: "sm",
-                        onClick: handleActionClick(action, itemData),
-                        "data-testid": `action-${action.event}`,
-                        className: cn(
-                          action.variant === "danger" && "text-error hover:bg-error/10"
-                        ),
-                        children: [
-                          action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                          action.label
-                        ]
-                      },
-                      idx
-                    ))
-                  }
-                )
+                    children: [
+                      action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                      action.label
+                    ]
+                  },
+                  idx
+                )) })
               ]
             }
           ),
@@ -30218,75 +30205,66 @@ var init_List = __esm({
                     hasProgress && /* @__PURE__ */ jsx(Box, { className: "ml-auto", children: /* @__PURE__ */ jsx(ProgressIndicator, { value: progressValue }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs(
-                  HStack,
-                  {
-                    className: cn(
-                      "flex items-center gap-1 flex-shrink-0 transition-opacity duration-200",
-                      "opacity-0 group-hover:opacity-100"
-                    ),
-                    children: [
-                      editAction && /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          variant: "ghost",
-                          action: editAction.event,
-                          className: cn(
-                            "p-2 rounded-lg transition-all duration-200",
-                            "hover:bg-primary/10 hover:text-primary",
-                            "text-muted-foreground",
-                            "active:scale-95"
-                          ),
-                          title: editAction.label,
-                          "data-testid": editAction.event ? `action-${editAction.event}` : void 0,
-                          children: /* @__PURE__ */ jsx(Pencil, { className: "w-4 h-4" })
-                        }
+                /* @__PURE__ */ jsxs(HStack, { className: "flex items-center gap-1 flex-shrink-0", children: [
+                  editAction && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      action: editAction.event,
+                      className: cn(
+                        "p-2 rounded-lg transition-all duration-200",
+                        "hover:bg-primary/10 hover:text-primary",
+                        "text-muted-foreground",
+                        "active:scale-95"
                       ),
-                      viewAction && /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          variant: "ghost",
-                          action: viewAction.event,
-                          className: cn(
-                            "p-2 rounded-lg transition-all duration-200",
-                            "hover:bg-muted hover:text-foreground",
-                            "text-muted-foreground",
-                            "active:scale-95"
-                          ),
-                          title: viewAction.label,
-                          "data-testid": viewAction.event ? `action-${viewAction.event}` : void 0,
-                          children: /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" })
-                        }
+                      title: editAction.label,
+                      "data-testid": editAction.event ? `action-${editAction.event}` : void 0,
+                      children: /* @__PURE__ */ jsx(Pencil, { className: "w-4 h-4" })
+                    }
+                  ),
+                  viewAction && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      action: viewAction.event,
+                      className: cn(
+                        "p-2 rounded-lg transition-all duration-200",
+                        "hover:bg-muted hover:text-foreground",
+                        "text-muted-foreground",
+                        "active:scale-95"
                       ),
-                      (() => {
-                        const filteredActions = actions.filter(
-                          (a) => !a.label.toLowerCase().includes("edit") && !a.label.toLowerCase().includes("view") && !a.label.toLowerCase().includes("open")
-                        );
-                        return filteredActions.length > 0 ? /* @__PURE__ */ jsx(
-                          Menu,
+                      title: viewAction.label,
+                      "data-testid": viewAction.event ? `action-${viewAction.event}` : void 0,
+                      children: /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" })
+                    }
+                  ),
+                  (() => {
+                    const filteredActions = actions.filter(
+                      (a) => !a.label.toLowerCase().includes("edit") && !a.label.toLowerCase().includes("view") && !a.label.toLowerCase().includes("open")
+                    );
+                    return filteredActions.length > 0 ? /* @__PURE__ */ jsx(
+                      Menu,
+                      {
+                        trigger: /* @__PURE__ */ jsx(
+                          Button,
                           {
-                            trigger: /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                variant: "ghost",
-                                className: cn(
-                                  "p-2 rounded-lg transition-all duration-200",
-                                  "hover:bg-muted hover:shadow-sm",
-                                  "text-muted-foreground hover:text-foreground",
-                                  "active:scale-95"
-                                ),
-                                children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4" })
-                              }
+                            variant: "ghost",
+                            className: cn(
+                              "p-2 rounded-lg transition-all duration-200",
+                              "hover:bg-muted hover:shadow-sm",
+                              "text-muted-foreground hover:text-foreground",
+                              "active:scale-95"
                             ),
-                            items: filteredActions,
-                            position: "bottom-right"
+                            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-4 h-4" })
                           }
-                        ) : null;
-                      })(),
-                      hasExplicitClick && /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-muted-foreground/50 group-hover:text-muted-foreground group-hover:translate-x-0.5 transition-all" })
-                    ]
-                  }
-                )
+                        ),
+                        items: filteredActions,
+                        position: "bottom-right"
+                      }
+                    ) : null;
+                  })(),
+                  hasExplicitClick && /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-muted-foreground/50 group-hover:text-muted-foreground group-hover:translate-x-0.5 transition-all" })
+                ] })
               ]
             }
           ),
@@ -38140,7 +38118,7 @@ function useTraitStateMachine(traitBindings, slotsActions, options) {
           effects: result.effects,
           traitDefinition: binding.trait
         };
-        const handlers = createClientEffectHandlers({
+        const clientHandlers = createClientEffectHandlers({
           eventBus,
           slotSetter: {
             addPattern: (slot, pattern, props) => {
@@ -38155,6 +38133,43 @@ function useTraitStateMachine(traitBindings, slotsActions, options) {
           navigate: optionsRef.current?.navigate,
           notify: optionsRef.current?.notify
         });
+        const persistence = optionsRef.current?.persistence;
+        let handlers = clientHandlers;
+        if (persistence) {
+          const sharedBindings = {
+            entity: payload ?? {},
+            payload: payload || {},
+            state: result.previousState
+          };
+          if (binding.config) {
+            sharedBindings.config = binding.config;
+          }
+          const serverHandlers = createServerEffectHandlers({
+            persistence,
+            eventBus,
+            entityType: linkedEntity,
+            entityId,
+            bindings: sharedBindings,
+            context: {
+              traitName: binding.trait.name,
+              state: result.previousState,
+              transition: `${result.previousState}->${result.newState}`,
+              linkedEntity,
+              entityId
+            },
+            source: { trait: binding.trait.name },
+            callService: optionsRef.current?.callService
+          });
+          handlers = {
+            ...serverHandlers,
+            // Client handlers own UI + emit: keep the slot setter
+            // and pre-prefixed UI:* emit path intact.
+            emit: clientHandlers.emit,
+            renderUI: clientHandlers.renderUI,
+            navigate: clientHandlers.navigate,
+            notify: clientHandlers.notify
+          };
+        }
         const entityFromPayload = payload ?? {};
         const bindingCtx = {
           entity: entityFromPayload,
@@ -38776,7 +38791,7 @@ function applyServerEffects(effects, uiSlots, onNavigate) {
     }
   }
 }
-function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback }) {
+function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback, persistence }) {
   const slotsActions = useSlotsActions();
   const bridge = useServerBridge();
   const uiSlots = useUISlots();
@@ -38788,7 +38803,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
       applyServerEffects(effects, uiSlots, onNavigate);
     }
   }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate]);
-  const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate } : { navigate: onNavigate };
+  const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate } : { navigate: onNavigate, persistence };
   const { sendEvent } = useTraitStateMachine(traits2, slotsActions, opts);
   const initSentRef = useRef(false);
   useEffect(() => {
@@ -38833,7 +38848,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
   }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate]);
   return null;
 }
-function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate, onLocalFallback }) {
+function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = useMemo(() => {
     if (pageName && traits2.length > 0) return traits2;
@@ -38866,7 +38881,8 @@ function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate, onLoc
         traits: allPageTraits,
         orbitalNames: serverUrl ? orbitalNames : void 0,
         onNavigate,
-        onLocalFallback
+        onLocalFallback,
+        persistence
       }
     ),
     /* @__PURE__ */ jsx(SlotBridge, {}),
@@ -38914,6 +38930,13 @@ function OrbPreview({
   }, [schema, autoMock, serverUrl, mockData]);
   const parsedSchema = parseResult.ok ? parseResult.schema : null;
   const effectiveMockData = parseResult.ok ? parseResult.mockData : {};
+  const persistence = useMemo(() => {
+    if (!parsedSchema || serverUrl) return void 0;
+    if (!autoMock) return void 0;
+    const adapter = new InMemoryPersistence();
+    adapter.seed(effectiveMockData);
+    return adapter;
+  }, [parsedSchema, serverUrl, autoMock, effectiveMockData]);
   const pages = useMemo(() => {
     if (!parsedSchema) return [];
     try {
@@ -38968,7 +38991,8 @@ function OrbPreview({
             mockData: effectiveMockData,
             pageName: currentPage,
             onNavigate: handleNavigate,
-            onLocalFallback: handleLocalFallback
+            onLocalFallback: handleLocalFallback,
+            persistence
           }
         ) }) })
       ]

package/dist/runtime/useTraitStateMachine.d.ts

@@ -38,6 +38,17 @@ export interface UseTraitStateMachineOptions {
     navigate?: (path: string, params?: Record<string, unknown>) => void;
     /** Notification function for notify effects */
     notify?: (message: string, type?: 'success' | 'error' | 'warning' | 'info') => void;
+    /**
+     * Offline-preview persistence layer. When set, the client runtime merges
+     * `@almadar/runtime` `createServerEffectHandlers` on top of the default
+     * client handlers so `fetch` / `persist` / `set` / `ref` / `deref` /
+     * `swap!` / `atomic` / `callService` run against this adapter — matching
+     * what `OrbitalServerRuntime` would do on the server. Left unset in the
+     * server-bridge path; effects there flow to the real server.
+     */
+    persistence?: import('@almadar/runtime').PersistenceAdapter;
+    /** Optional consumer `call-service` hook forwarded to the mock server handlers. */
+    callService?: (service: string, action: string, params: unknown) => Promise<unknown>;
 }
 /**
  * useTraitStateMachine - Manages state machines for multiple traits

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "3.8.2",
+  "version": "3.9.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",
@@ -121,7 +121,7 @@
     "@almadar/core": ">=5.7.0",
     "@almadar/evaluator": ">=2.9.2",
     "@almadar/patterns": ">=2.17.1",
-    "@almadar/runtime": ">=4.3.0",
+    "@almadar/runtime": "^4.11.1",
     "@almadar/std": ">=6.4.1",
     "@almadar/syntax": ">=1.3.1",
     "@xyflow/react": "12.10.1",