@almadar/ui 5.158.0 → 5.160.0

package/dist/runtime/index.cjs

@@ -3,6 +3,7 @@
 var React85 = require('react');
 var providers = require('@almadar/ui/providers');
 var logger = require('@almadar/logger');
+var ui = require('@almadar/runtime/ui');
 var runtime = require('@almadar/runtime');
 var core = require('@almadar/core');
 var clsx = require('clsx');
@@ -13,7 +14,6 @@ var reactDom = require('react-dom');
 var hooks = require('@almadar/ui/hooks');
 var context = require('@almadar/ui/context');
 var evaluator = require('@almadar/evaluator');
-var ui = require('@almadar/runtime/ui');
 var reactRouterDom = require('react-router-dom');
 var ELK = require('elkjs/lib/elk.bundled.js');
 var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism-light.js');
@@ -867,6 +867,22 @@ var init_useTapReveal = __esm({
   "hooks/useTapReveal.ts"() {
   }
 });
+function usePerfBuffer() {
+  return React85.useSyncExternalStore(ui.perfStore.subscribe, ui.perfStore.getSnapshot, ui.perfStore.getSnapshot);
+}
+exports.profilerOnRender = void 0;
+var init_perf = __esm({
+  "lib/perf.ts"() {
+    exports.profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
+      ui.pushPerfEntry({
+        name: `profiler:${id}:${phase}`,
+        durationMs: actualDuration,
+        ts: commitTime,
+        detail: { baseDuration }
+      });
+    };
+  }
+});
 function resolveMarkerExpression(expression, entity, config, state) {
   const ctx = runtime.createContextFromBindings({
     entity,
@@ -884,7 +900,16 @@ function isPlainObject(value) {
   if (typeof value === "function") return false;
   return true;
 }
+function isEvaluatorResolvedData(value) {
+  return evaluatorResolvedData.has(value);
+}
+function brandResolved(value) {
+  if (value !== null && typeof value === "object" && !React85__namespace.default.isValidElement(value) && !(value instanceof Date)) {
+    resolvedMarkerFree.add(value);
+  }
+}
 function subtreeHasMarker(value) {
+  if (resolvedMarkerFree.has(value)) return false;
   const cached = markerPresenceCache.get(value);
   if (cached !== void 0) return cached;
   let found = false;
@@ -906,10 +931,23 @@ function subtreeHasMarker(value) {
 }
 function walkValue(value, scopeTrait, entity, config, state) {
   if (core.isRenderBindingMarker(value)) {
-    return { resolved: resolveMarkerExpression(value.expression, entity, config, state), changed: true };
+    const cached = markerResolutionCache.get(value);
+    if (cached !== void 0 && cached.entity === entity && cached.config === config && cached.state === state) {
+      return { resolved: cached.resolved, changed: false };
+    }
+    const resolved = resolveMarkerExpression(value.expression, entity, config, state);
+    markerResolutionCache.set(value, { entity, config, state, resolved });
+    if (resolved !== null && typeof resolved === "object" && !React85__namespace.default.isValidElement(resolved) && !(resolved instanceof Date)) {
+      resolvedMarkerFree.add(resolved);
+      evaluatorResolvedData.add(resolved);
+    }
+    return { resolved, changed: true };
   }
   if (Array.isArray(value)) {
-    if (!subtreeHasMarker(value)) return { resolved: value, changed: false };
+    if (!subtreeHasMarker(value)) {
+      brandResolved(value);
+      return { resolved: value, changed: false };
+    }
     const out = [];
     let changed = false;
     for (const item of value) {
@@ -924,10 +962,14 @@ function walkValue(value, scopeTrait, entity, config, state) {
       out.push(resolved);
       if (itemChanged) changed = true;
     }
+    brandResolved(out);
     return changed ? { resolved: out, changed: true } : { resolved: value, changed: false };
   }
   if (isPlainObject(value)) {
-    if (!subtreeHasMarker(value)) return { resolved: value, changed: false };
+    if (!subtreeHasMarker(value)) {
+      brandResolved(value);
+      return { resolved: value, changed: false };
+    }
     const sourceTrait = value._sourceTrait;
     if (typeof sourceTrait === "string" && sourceTrait !== scopeTrait) {
       return { resolved: value, changed: false };
@@ -939,11 +981,13 @@ function walkValue(value, scopeTrait, entity, config, state) {
       out[key] = resolved;
       if (itemChanged) changed = true;
     }
+    brandResolved(out);
     return changed ? { resolved: out, changed: true } : { resolved: value, changed: false };
   }
   return { resolved: value, changed: false };
 }
 function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state) {
+  if (resolvedMarkerFree.has(props)) return props;
   const out = {};
   let changed = false;
   for (const [key, value] of Object.entries(props)) {
@@ -951,13 +995,17 @@ function resolveRenderBindingMarkers(props, scopeTrait, entity, config, state) {
     out[key] = resolved;
     if (propChanged) changed = true;
   }
+  brandResolved(out);
   return changed ? out : props;
 }
-var markerPresenceCache;
+var markerPresenceCache, markerResolutionCache, resolvedMarkerFree, evaluatorResolvedData;
 var init_resolve_render_bindings = __esm({
   "lib/resolve-render-bindings.ts"() {
     "use client";
     markerPresenceCache = /* @__PURE__ */ new WeakMap();
+    markerResolutionCache = /* @__PURE__ */ new WeakMap();
+    resolvedMarkerFree = /* @__PURE__ */ new WeakSet();
+    evaluatorResolvedData = /* @__PURE__ */ new WeakSet();
   }
 });
 function cn(...inputs) {
@@ -12282,6 +12330,7 @@ var init_LearningCanvas = __esm({
   "components/learning/atoms/LearningCanvas.tsx"() {
     "use client";
     init_cn();
+    init_perf();
     init_useEventBus();
     DASH_PATTERNS = { dashed: [6, 4], dotted: [2, 3] };
     TRACE_SERIES_COLORS = ["#2563eb", "#dc2626", "#16a34a", "#f59e0b"];
@@ -12325,6 +12374,7 @@ var init_LearningCanvas = __esm({
         return [...shapes, ...traceOut, ...readoutOut];
       }, [shapes, traces, readouts, width, height]);
       const draw = React85.useCallback(() => {
+        const _perfT = ui.perfStart("learningcanvas:paint");
         const canvas = canvasRef.current;
         if (!canvas) return;
         const ctx = canvas.getContext("2d");
@@ -12346,6 +12396,7 @@ var init_LearningCanvas = __esm({
         for (const shape of derivedShapes) {
           if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes);
         }
+        ui.perfEnd("learningcanvas:paint", _perfT);
       }, [width, height, backgroundColor, derivedShapes]);
       React85.useEffect(() => {
         draw();
@@ -26128,8 +26179,8 @@ function DataGrid({
                         }
                         return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                           field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", className: "sr-only", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue(value, field.format) })
                         ] }, field.name);
                       }) })
                     ] }) })
@@ -26557,7 +26608,11 @@ function DataList({
           Box,
           {
             className: cn(
-              "group flex items-center gap-4 transition-all duration-fast",
+              // items-start, not items-center: a multi-line row (title + meta +
+              // progress) centred its action cluster in the vertical middle, so
+              // the buttons floated between the meta fields instead of anchoring
+              // to the title they act on (U-DATALIST-ACTIONS-FLOAT-MID-ROW).
+              "group flex items-start gap-4 transition-all duration-fast",
               isCompact ? "px-4 py-2" : "px-6 py-4",
               "hover:bg-muted/80",
               !isCard && !isCompact && "rounded-lg border border-transparent hover:border-border"
@@ -26588,11 +26643,19 @@ function DataList({
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
                     field.icon && renderIconInput2(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", color: "secondary", children: [
-                      field.label ?? fieldLabel3(field.name),
-                      ":"
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        className: cn(field.format !== "boolean" && "sr-only"),
+                        children: [
+                          field.label ?? fieldLabel3(field.name),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", children: formatValue2(value, field.format, { yes: t("common.yes"), no: t("common.no") }) })
                   ] }, field.name);
                 }) }),
                 progressFields.map((field) => {
@@ -26611,7 +26674,7 @@ function DataList({
             ]
           }
         ),
-        isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
+        (isCard || isCompact) && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("border-b border-border/40", isCompact ? "mx-4" : "mx-6") })
       ] }, id)
     );
   };
@@ -26621,7 +26684,13 @@ function DataList({
       {
         className: cn(
           isCard && "bg-card rounded-xl border border-border shadow-elevation-dialog overflow-hidden",
-          !isCard && gapClass,
+          // `gap-*` is inert on a block container, and Box only emits a display
+          // class when its `display` prop is set — so every non-card list had
+          // been asking for a gap that CSS silently dropped. flex-col makes it
+          // real. `compact` keeps gap-0 on purpose: it separates with the row
+          // divider above instead, never both (Almadar_UI_Beauty.md 6).
+          !isCard && "flex flex-col",
+          !isCard && !isCompact && gapClass,
           listLookStyles[look],
           className
         ),
@@ -30172,6 +30241,7 @@ var init_MathCanvas = __esm({
   "components/learning/molecules/MathCanvas.tsx"() {
     "use client";
     init_useEventBus();
+    init_perf();
     init_atoms();
     init_Stack();
     init_LearningCanvas();
@@ -30237,6 +30307,7 @@ var init_MathCanvas = __esm({
         };
       }, [stableKeyMap, stableKeyUpMap, eventBus]);
       const derivedShapes = React85.useMemo(() => {
+        const _perfT = ui.perfStart("mathcanvas:derive");
         const out = [];
         const margin = 24;
         const plotW = width - margin * 2;
@@ -30480,6 +30551,7 @@ var init_MathCanvas = __esm({
           }
         }
         out.push(...shapes);
+        ui.perfEnd("mathcanvas:derive", _perfT);
         return out;
       }, [
         width,
@@ -36695,7 +36767,7 @@ var init_RichBlockEditor = __esm({
         {
           variant: "bordered",
           padding: "none",
-          className: cn("flex flex-col", className),
+          className: cn("flex flex-col text-card-foreground", className),
           children: [
             enableBlocks && showToolbar && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
               Box,
@@ -41923,6 +41995,7 @@ var init_DetailPanel = __esm({
     "use client";
     init_atoms();
     init_Box();
+    init_Input();
     init_Stack();
     init_SimpleGrid();
     init_Menu();
@@ -41938,6 +42011,7 @@ var init_DetailPanel = __esm({
     ReactMarkdown2 = React85.lazy(() => import('react-markdown'));
     DetailPanel = ({
       title: propTitle,
+      onTitleCommit,
       subtitle,
       status,
       avatar,
@@ -41959,6 +42033,7 @@ var init_DetailPanel = __esm({
     }) => {
       const eventBus = useEventBus();
       const { t } = hooks.useTranslate();
+      const [titleDraft, setTitleDraft] = React85__namespace.default.useState(null);
       const isFieldDefArray = (arr) => {
         if (!arr || arr.length === 0) return false;
         const first = arr[0];
@@ -42179,6 +42254,50 @@ var init_DetailPanel = __esm({
         }),
         status && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: status.variant ?? "default", children: status.label })
       ] });
+      const commitTitle = () => {
+        if (!onTitleCommit) return;
+        const next = (titleDraft ?? "").trim();
+        setTitleDraft(null);
+        if (!next || next === title) return;
+        onTitleCommit(next, normalizedData?.id !== void 0 ? String(normalizedData.id) : "");
+      };
+      const titleNode = onTitleCommit && titleDraft !== null ? /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          value: titleDraft,
+          autoFocus: true,
+          "aria-label": t("common.title"),
+          className: "h-auto py-1 text-3xl font-bold tracking-tight",
+          onChange: (e) => setTitleDraft(e.target.value),
+          onBlur: commitTitle,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commitTitle();
+            } else if (e.key === "Escape") {
+              e.preventDefault();
+              setTitleDraft(null);
+            }
+          },
+          "data-testid": "detail-title-input"
+        }
+      ) : onTitleCommit ? /* @__PURE__ */ jsxRuntime.jsx(
+        Box,
+        {
+          role: "button",
+          tabIndex: 0,
+          className: "cursor-text rounded px-1 -mx-1 transition-colors hover:bg-muted/40",
+          onClick: () => setTitleDraft(title ?? ""),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              setTitleDraft(title ?? "");
+            }
+          },
+          "data-testid": "detail-title-editable",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" })
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" });
       const content = /* @__PURE__ */ jsxRuntime.jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", className: "p-6", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "between", align: "start", gap: "md", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", gap: "sm", className: "min-w-0", children: [
@@ -42198,7 +42317,7 @@ var init_DetailPanel = __esm({
             avatar,
             /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "sm", wrap: true, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
+                titleNode,
                 statusBadges
               ] }),
               subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: subtitle })
@@ -42298,16 +42417,11 @@ var init_DetailPanel = __esm({
           footer
         ] })
       ] }) });
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Box,
-        {
-          className: cn(
-            slideOver && "fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6",
-            className
-          ),
-          children: content
-        }
-      );
+      if (!slideOver) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, children: content });
+      }
+      const panel = /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("fixed inset-y-0 right-0 w-full max-w-2xl bg-card shadow-lg z-50 overflow-y-auto p-6", className), children: content });
+      return typeof document === "undefined" ? panel : reactDom.createPortal(panel, document.body);
     };
     DetailPanel.displayName = "DetailPanel";
   }
@@ -42759,7 +42873,7 @@ var init_Form = __esm({
               });
               debug(
                 "forms",
-                `Calculation triggered: ${calc.variableName} = ${value}`
+                `Calculation triggered: ${calc.variableName} = ${String(value)}`
               );
             }
           });
@@ -49258,6 +49372,7 @@ function isPlainConfigObject(value) {
   return proto === Object.prototype || proto === null;
 }
 function subtreeHasTraitRef(value) {
+  if (isEvaluatorResolvedData(value)) return false;
   const cached = traitRefPresenceCache.get(value);
   if (cached !== void 0) return cached;
   let found = false;
@@ -49330,6 +49445,10 @@ function renderPatternProps(props, onDismiss, propsSchema) {
       };
       rendered[key] = /* @__PURE__ */ jsxRuntime.jsx(SlotContentRenderer, { content: childContent, onDismiss });
     } else if (Array.isArray(value)) {
+      if (!isEvaluatorResolvedData(value) && value.some((el) => isPatternConfig(el))) ; else if (!subtreeHasTraitRef(value)) {
+        rendered[key] = value;
+        continue;
+      }
       const isDataArray = propsSchema?.[key]?.items?.types?.includes("object") ?? false;
       rendered[key] = value.map((item, i) => {
         const el = item;
@@ -49808,6 +49927,9 @@ function enqueueEvent(queue, entry) {
   }
   queue.push(entry);
 }
+
+// hooks/useTraitStateMachine.ts
+init_perf();
 var lambdaLog = logger.createLogger("almadar:ui:fn-form-lambda");
 function isOperatorCall(value) {
   const first = value[0];
@@ -50666,6 +50788,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   }, [eventBus]);
   React85.useEffect(() => {
     const scheduler = runtime.createTickScheduler();
+    const timedTick = (key, fn) => () => ui.perfTimeAsync(key, fn);
     const pureWriterTickKeys = /* @__PURE__ */ new Set();
     for (const group of sharedGroups.values()) {
       const ticksByInterval = /* @__PURE__ */ new Map();
@@ -50682,12 +50805,12 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       }
       for (const entries of ticksByInterval.values()) {
         const interval = entries[0].tick.interval;
-        const onDue = () => {
+        const onDue = timedTick(`tick:shared:${group.storeKey}@${String(interval)}`, () => {
           const writers = entries.map(
             ({ binding, tick }) => createSharedEntityWriter(binding, tick, traitStatesRef, emitFromSharedWriter)
           );
           runTickFrame(group.storeKey, writers, sharedEntityStore);
-        };
+        });
         if (interval === "frame") {
           scheduler.add(0, onDue);
         } else if (typeof interval === "number") {
@@ -50705,14 +50828,15 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         if (sharedKey !== void 0 && pureWriterTickKeys.has(`${binding.trait.name}::${tick.name}`)) {
           continue;
         }
+        const tickKey = `tick:${binding.trait.name}::${tick.name}`;
         if (tick.interval === "frame") {
-          scheduler.add(0, () => runTickEffects(tick, binding));
+          scheduler.add(0, timedTick(tickKey, () => runTickEffects(tick, binding)));
         } else if (typeof tick.interval === "number") {
-          scheduler.add(tick.interval, () => runTickEffects(tick, binding));
+          scheduler.add(tick.interval, timedTick(tickKey, () => runTickEffects(tick, binding)));
         } else if (runtime.isValidCronExpression(tick.interval)) {
-          scheduler.addCron(tick.interval, () => runTickEffects(tick, binding));
+          scheduler.addCron(tick.interval, timedTick(tickKey, () => runTickEffects(tick, binding)));
         } else {
-          scheduler.add(runtime.parseDurationString(tick.interval), () => runTickEffects(tick, binding));
+          scheduler.add(runtime.parseDurationString(tick.interval), timedTick(tickKey, () => runTickEffects(tick, binding)));
         }
       }
     }
@@ -50720,6 +50844,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   }, [traitBindings, runTickEffects, sharedGroups, sharedEntityStore, emitFromSharedWriter]);
   const processEventQueued = React85.useCallback(async (eventKey, payload, targetTrait, tick, sourceTrait) => {
     const normalizedEvent = normalizeEventKey(eventKey);
+    const _perfT0 = ui.perfStart("processEvent:total");
     const bindings = traitBindingsRef.current;
     const currentManager = managerRef.current;
     crossTraitLog.debug("processEvent:enter", () => ({
@@ -50743,6 +50868,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         entityByTrait[name] = { ...sharedEntityStore.getSnapshot(sharedKey) };
       }
     }
+    const _perfT1 = ui.perfStart("processEvent:guardMatch");
     const results = currentManager.sendEvent(
       normalizedEvent,
       payload,
@@ -50751,6 +50877,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       void 0,
       targetTrait
     );
+    ui.perfEnd("processEvent:guardMatch", _perfT1);
     crossTraitLog.debug("processEvent:results", {
       event: normalizedEvent,
       executedCount: results.length,
@@ -50800,6 +50927,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           transition: `${result.previousState} -> ${result.newState}`,
           effects: JSON.stringify(result.effects)
         }));
+        const _perfT2 = ui.perfStart("processEvent:executeAll");
         const emittedDuringExec = await executeTransitionEffects({
           binding,
           // upstream gap: /runtime TransitionResult.effects is unknown[] — they are SExpr at runtime (see Almadar_UI_Gaps.md)
@@ -50811,6 +50939,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           syncOnly: false,
           log: stateLog
         });
+        ui.perfEnd("processEvent:executeAll", _perfT2);
         emittedByTrait.set(traitName, emittedDuringExec);
         for (const emittedKey of emittedDuringExec) {
           bridgeEchoPendingRef.current.set(
@@ -50907,27 +51036,31 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         if (orbital) dispatchedOrbitals.add(orbital);
       }
       const relayPayload = targetTrait !== void 0 ? { ...payload ?? {}, _targetTrait: targetTrait } : payload;
-      if (tick !== void 0) {
-        void onEventProcessed(normalizedEvent, relayPayload, dispatchedOrbitals, tick, sourceTrait);
-      } else {
-        await onEventProcessed(normalizedEvent, relayPayload, dispatchedOrbitals);
-      }
+      void onEventProcessed(normalizedEvent, relayPayload, dispatchedOrbitals, tick, sourceTrait);
     }
+    ui.perfEnd("processEvent:total", _perfT0);
+    ui.perfEnd(`event:${normalizedEvent}`, _perfT0);
   }, [entities, eventBus, sharedEntityStore]);
   const drainEventQueue = React85.useCallback(async () => {
     if (processingRef.current) return;
     processingRef.current = true;
+    const _perfT = ui.perfStart("drain:pass");
+    let _perfN = 0;
     try {
       while (eventQueueRef.current.length > 0) {
         const entry = eventQueueRef.current.shift();
+        _perfN++;
         await processEventQueued(entry.eventKey, entry.payload, entry.targetTrait, entry.tick, entry.sourceTrait);
       }
     } finally {
       processingRef.current = false;
+      ui.perfEnd("drain:pass", _perfT);
+      ui.perfGauge("drain:passEntries", _perfN);
     }
   }, [processEventQueued]);
   const enqueueAndDrain = React85.useCallback((eventKey, payload, targetTrait, tick, sourceTrait) => {
     enqueueEvent(eventQueueRef.current, { eventKey, payload, targetTrait, tick, sourceTrait });
+    ui.perfGauge("queue:depthAtEnqueue", eventQueueRef.current.length);
     void drainEventQueue();
   }, [drainEventQueue]);
   React85.useCallback((eventKey, payload) => {
@@ -51329,7 +51462,7 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
     [serverActiveTraits]
   );
   const uiSlots = context.useUISlots();
-  const onEventProcessed = React85.useCallback(async (event, payload, dispatchedOrbitals, tick, sourceTrait) => {
+  const onEventProcessed = React85.useCallback((event, payload, dispatchedOrbitals, tick, sourceTrait) => {
     if (!bridge.connected || !orbitalNames?.length) return;
     const targets = dispatchedOrbitals && dispatchedOrbitals.size > 0 ? orbitalNames.filter((n) => dispatchedOrbitals.has(n)) : orbitalNames;
     xOrbitalLog.debug("TraitInitializer:fanout", () => ({
@@ -51343,9 +51476,10 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
         void bridge.sendEvent(name, event, withActiveTraits(payload), tick, sourceTrait);
         continue;
       }
-      const { effects, meta } = await bridge.sendEvent(name, event, withActiveTraits(payload));
-      recordServerResponse(name, event, meta);
-      applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames, onNavigateBack);
+      void bridge.sendEvent(name, event, withActiveTraits(payload)).then(({ effects, meta }) => {
+        recordServerResponse(name, event, meta);
+        applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames, onNavigateBack);
+      });
     }
   }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, onNavigateBack, embeddedTraits, activeTraitNames, withActiveTraits]);
   const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, navigateBack: onNavigateBack, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams } : { navigate: onNavigate, navigateBack: onNavigateBack, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams };
@@ -51663,14 +51797,15 @@ function OrbPreview({
     return pattern.replace(/:([A-Za-z0-9_]+)/g, (whole, key) => routeParams[key] ?? whole);
   }, [currentPagePath, routeParams]);
   const navStackRef = React85.useRef(null);
-  const handleNavigate = React85.useCallback((path) => {
+  const handleNavigate = React85.useCallback((path, navState) => {
     const hit = providers.matchPathAmong(pages, path, (entry) => entry.page.path);
     const match = hit?.candidate;
-    const params = hit?.params ?? {};
+    const params = { ...hit?.params ?? {}, ...navState ?? {} };
     navLog.debug("handleNavigate", () => ({
       path,
       matched: match?.page.name ?? null,
       params,
+      navState: navState ? JSON.stringify(navState) : void 0,
       availablePaths: pages.map((p) => p.page.path)
     }));
     if (match?.page.name) {
@@ -51685,9 +51820,9 @@ function OrbPreview({
     }
   }, [pages]);
   const handleNavigateEffect = React85.useCallback(
-    (path, _params, crumb) => {
+    (path, params, crumb) => {
       navStackRef.current?.beginNavigate(path, crumb);
-      handleNavigate(path);
+      handleNavigate(path, params);
     },
     [handleNavigate]
   );
@@ -51842,17 +51977,9 @@ function BrowserPlayground({
     }
   );
 }
-function usePerfBuffer() {
-  return React85.useSyncExternalStore(ui.perfStore.subscribe, ui.perfStore.getSnapshot, ui.perfStore.getSnapshot);
-}
-var profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
-  ui.pushPerfEntry({
-    name: `profiler:${id}:${phase}`,
-    durationMs: actualDuration,
-    ts: commitTime,
-    detail: { baseDuration }
-  });
-};
+
+// runtime/index.ts
+init_perf();
 
 Object.defineProperty(exports, "EntitySchemaProvider", {
   enumerable: true,
@@ -51930,7 +52057,6 @@ exports.BrowserPlayground = BrowserPlayground;
 exports.OrbPreview = OrbPreview;
 exports.clearSchemaCache = clearSchemaCache;
 exports.createClientEffectHandlers = createClientEffectHandlers;
-exports.profilerOnRender = profilerOnRender;
 exports.usePerfBuffer = usePerfBuffer;
 exports.useResolvedSchema = useResolvedSchema;
 exports.useTraitStateMachine = useTraitStateMachine;

package/dist/runtime/index.d.cts

@@ -5,11 +5,11 @@ import * as _almadar_runtime from '@almadar/runtime';
 import { TraitState, EffectHandlers } from '@almadar/runtime';
 import '../useEventBus-Ckr4wqW3.cjs';
 import { c as useUISlots } from '../UISlotContext-BlRDbHDy.cjs';
-import { a as EntityBindingSource, h as ServerBridgeTransport } from '../EntityBindingContext-Bn3ePJQC.cjs';
-export { b as EntitySchemaContextValue, c as EntitySchemaProvider, d as EntitySchemaProviderProps, e as ServerBridgeContextValue, f as ServerBridgeProvider, i as ServerClientEffect, T as TraitContext, k as TraitContextValue, l as TraitInstance, m as TraitProvider, n as TraitProviderProps, o as useEntitySchema, p as useEntitySchemaOptional, q as useServerBridge, r as useTrait, s as useTraitContext } from '../EntityBindingContext-Bn3ePJQC.cjs';
-import { PerfEntry } from '@almadar/runtime/ui';
+import { E as EntityBindingSource, S as ServerBridgeTransport } from '../EntityBindingContext-0Evn_LcT.cjs';
+export { a as EntitySchemaContextValue, b as EntitySchemaProvider, c as EntitySchemaProviderProps, d as ServerBridgeContextValue, e as ServerBridgeProvider, f as ServerClientEffect, T as TraitContext, g as TraitContextValue, h as TraitInstance, i as TraitProvider, j as TraitProviderProps, u as useEntitySchema, k as useEntitySchemaOptional, l as useServerBridge, m as useTrait, n as useTraitContext } from '../EntityBindingContext-0Evn_LcT.cjs';
 export { PERF_NAMESPACE, PerfEntry, PreparedPreviewSchema, adjustSchemaForMockData, buildMockData, clearPerf, perfEnd, perfStart, perfTime, prepareSchemaForPreview, wrapCallbackForEvent } from '@almadar/runtime/ui';
-import React__default, { ProfilerOnRenderCallback } from 'react';
+import React__default from 'react';
+export { p as profilerOnRender, u as usePerfBuffer } from '../perf-DaVdsbU0.cjs';
 import '../event-bus-types-Bl78kokd.cjs';
 import '../useUISlots-GNwGLlW2.cjs';
 import '@almadar/core/patterns';
@@ -312,21 +312,4 @@ interface BrowserPlaygroundProps {
 }
 declare function BrowserPlayground({ schema, mode, initialPagePath, height, className, }: BrowserPlaygroundProps): React__default.ReactElement;
 
-/**
- * @almadar/ui/runtime — perf instrumentation
- *
- * React-specific consumption layer on top of the renderer-agnostic perf ring
- * now living in `@almadar/runtime/ui/perf`. Re-exports the framework-free
- * timing primitives and adds `useSyncExternalStore` / `React.Profiler` hooks.
- */
-
-/**
- * React hook: returns the current perf ring snapshot, re-renders on push.
- */
-declare function usePerfBuffer(): readonly PerfEntry[];
-/**
- * React.Profiler `onRender` callback. Records `actualDuration` per commit.
- */
-declare const profilerOnRender: ProfilerOnRenderCallback;
-
-export { BrowserPlayground, type BrowserPlaygroundProps, type ClientEventBus, type CreateClientEffectHandlersOptions, OrbPreview, type OrbPreviewProps, type ResolvedSchemaResult, ServerBridgeTransport, type SlotPatternEntry, type SlotSetter, type SlotSource, type TraitStateMachineResult, type UseTraitStateMachineOptions, clearSchemaCache, createClientEffectHandlers, profilerOnRender, usePerfBuffer, useResolvedSchema, useTraitStateMachine };
+export { BrowserPlayground, type BrowserPlaygroundProps, type ClientEventBus, type CreateClientEffectHandlersOptions, OrbPreview, type OrbPreviewProps, type ResolvedSchemaResult, ServerBridgeTransport, type SlotPatternEntry, type SlotSetter, type SlotSource, type TraitStateMachineResult, type UseTraitStateMachineOptions, clearSchemaCache, createClientEffectHandlers, useResolvedSchema, useTraitStateMachine };