@almadar/ui 5.158.0 → 5.159.0

package/dist/avl/index.js

@@ -13,7 +13,7 @@ import { Loader2, X, Code, FileText, WrapText, Check, Copy, Lightbulb, CheckCirc
 import { createPortal } from 'react-dom';
 import { UISlotProvider, useUISlots, useTheme } from '@almadar/ui/context';
 import { evaluateGuard, evaluateListenPayloadExpr, evaluate, createMinimalContext, executeEffects } from '@almadar/evaluator';
-import { prepareSchemaForPreview, collectTraitRefsFromResolvedTrait, buildOrbitalsByTrait, collectEmbeddedTraits, wrapCallbackForEvent, pushPerfEntry, perfStart, perfEnd } from '@almadar/runtime/ui';
+import { prepareSchemaForPreview, collectTraitRefsFromResolvedTrait, buildOrbitalsByTrait, collectEmbeddedTraits, perfStart, perfEnd, perfGauge, perfTimeAsync, wrapCallbackForEvent, pushPerfEntry } from '@almadar/runtime/ui';
 import { Link, Outlet, useLocation } from 'react-router-dom';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light.js';
 import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js';
@@ -4588,7 +4588,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" && !React94__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;
@@ -4610,10 +4619,23 @@ function subtreeHasMarker(value) {
 }
 function walkValue(value, scopeTrait, entity, config, state) {
   if (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" && !React94__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) {
@@ -4628,10 +4650,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 };
@@ -4643,11 +4669,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)) {
@@ -4655,13 +4683,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 getCurrentIconFamily() {
@@ -15266,6 +15298,19 @@ var init_molecules = __esm({
     init_puzzleObject();
   }
 });
+var profilerOnRender;
+var init_perf = __esm({
+  "lib/perf.ts"() {
+    profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
+      pushPerfEntry({
+        name: `profiler:${id}:${phase}`,
+        durationMs: actualDuration,
+        ts: commitTime,
+        detail: { baseDuration }
+      });
+    };
+  }
+});
 function themeBodyFont(el) {
   if (typeof getComputedStyle !== "function") return "system-ui, sans-serif";
   const v = getComputedStyle(el).getPropertyValue("--font-family-body").trim();
@@ -15614,6 +15659,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"];
@@ -15657,6 +15703,7 @@ var init_LearningCanvas = __esm({
         return [...shapes, ...traceOut, ...readoutOut];
       }, [shapes, traces, readouts, width, height]);
       const draw = useCallback(() => {
+        const _perfT = perfStart("learningcanvas:paint");
         const canvas = canvasRef.current;
         if (!canvas) return;
         const ctx = canvas.getContext("2d");
@@ -15678,6 +15725,7 @@ var init_LearningCanvas = __esm({
         for (const shape of derivedShapes) {
           if (shape.type === "text") drawShape(ctx, shape, width, height, derivedShapes);
         }
+        perfEnd("learningcanvas:paint", _perfT);
       }, [width, height, backgroundColor, derivedShapes]);
       useEffect(() => {
         draw();
@@ -32872,6 +32920,7 @@ var init_MathCanvas = __esm({
   "components/learning/molecules/MathCanvas.tsx"() {
     "use client";
     init_useEventBus();
+    init_perf();
     init_atoms();
     init_Stack();
     init_LearningCanvas();
@@ -32937,6 +32986,7 @@ var init_MathCanvas = __esm({
         };
       }, [stableKeyMap, stableKeyUpMap, eventBus]);
       const derivedShapes = useMemo(() => {
+        const _perfT = perfStart("mathcanvas:derive");
         const out = [];
         const margin = 24;
         const plotW = width - margin * 2;
@@ -33180,6 +33230,7 @@ var init_MathCanvas = __esm({
           }
         }
         out.push(...shapes);
+        perfEnd("mathcanvas:derive", _perfT);
         return out;
       }, [
         width,
@@ -39533,7 +39584,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__ */ jsx(
               Box,
@@ -44352,6 +44403,7 @@ var init_DetailPanel = __esm({
     "use client";
     init_atoms();
     init_Box();
+    init_Input();
     init_Stack();
     init_SimpleGrid();
     init_Menu();
@@ -44367,6 +44419,7 @@ var init_DetailPanel = __esm({
     ReactMarkdown2 = lazy(() => import('react-markdown'));
     DetailPanel = ({
       title: propTitle,
+      onTitleCommit,
       subtitle,
       status,
       avatar,
@@ -44388,6 +44441,7 @@ var init_DetailPanel = __esm({
     }) => {
       const eventBus = useEventBus();
       const { t } = useTranslate();
+      const [titleDraft, setTitleDraft] = React94__default.useState(null);
       const isFieldDefArray = (arr) => {
         if (!arr || arr.length === 0) return false;
         const first = arr[0];
@@ -44608,6 +44662,50 @@ var init_DetailPanel = __esm({
         }),
         status && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" })
+        }
+      ) : /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" });
       const content = /* @__PURE__ */ jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxs(VStack, { gap: "md", className: "p-6", children: [
         /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "start", gap: "md", children: [
           /* @__PURE__ */ jsxs(HStack, { align: "start", gap: "sm", className: "min-w-0", children: [
@@ -44627,7 +44725,7 @@ var init_DetailPanel = __esm({
             avatar,
             /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "min-w-0", children: [
               /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "sm", wrap: true, children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
+                titleNode,
                 statusBadges
               ] }),
               subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: subtitle })
@@ -45188,7 +45286,7 @@ var init_Form = __esm({
               });
               debug(
                 "forms",
-                `Calculation triggered: ${calc.variableName} = ${value}`
+                `Calculation triggered: ${calc.variableName} = ${String(value)}`
               );
             }
           });
@@ -51687,6 +51785,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;
@@ -51759,6 +51858,10 @@ function renderPatternProps(props, onDismiss, propsSchema) {
       };
       rendered[key] = /* @__PURE__ */ 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;
@@ -55785,6 +55888,7 @@ function enqueueEvent(queue, entry) {
 }
 
 // hooks/useTraitStateMachine.ts
+init_perf();
 init_traitRegistry();
 init_verificationRegistry();
 var crossTraitLog = createLogger("almadar:ui:cross-trait");
@@ -56471,6 +56575,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   }, [eventBus]);
   useEffect(() => {
     const scheduler = createTickScheduler();
+    const timedTick = (key, fn) => () => perfTimeAsync(key, fn);
     const pureWriterTickKeys = /* @__PURE__ */ new Set();
     for (const group of sharedGroups.values()) {
       const ticksByInterval = /* @__PURE__ */ new Map();
@@ -56487,12 +56592,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") {
@@ -56510,14 +56615,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 (isValidCronExpression(tick.interval)) {
-          scheduler.addCron(tick.interval, () => runTickEffects(tick, binding));
+          scheduler.addCron(tick.interval, timedTick(tickKey, () => runTickEffects(tick, binding)));
         } else {
-          scheduler.add(parseDurationString(tick.interval), () => runTickEffects(tick, binding));
+          scheduler.add(parseDurationString(tick.interval), timedTick(tickKey, () => runTickEffects(tick, binding)));
         }
       }
     }
@@ -56525,6 +56631,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   }, [traitBindings, runTickEffects, sharedGroups, sharedEntityStore, emitFromSharedWriter]);
   const processEventQueued = useCallback(async (eventKey, payload, targetTrait, tick, sourceTrait) => {
     const normalizedEvent = normalizeEventKey(eventKey);
+    const _perfT0 = perfStart("processEvent:total");
     const bindings = traitBindingsRef.current;
     const currentManager = managerRef.current;
     crossTraitLog.debug("processEvent:enter", () => ({
@@ -56548,6 +56655,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         entityByTrait[name] = { ...sharedEntityStore.getSnapshot(sharedKey) };
       }
     }
+    const _perfT1 = perfStart("processEvent:guardMatch");
     const results = currentManager.sendEvent(
       normalizedEvent,
       payload,
@@ -56556,6 +56664,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       void 0,
       targetTrait
     );
+    perfEnd("processEvent:guardMatch", _perfT1);
     crossTraitLog.debug("processEvent:results", {
       event: normalizedEvent,
       executedCount: results.length,
@@ -56605,6 +56714,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           transition: `${result.previousState} -> ${result.newState}`,
           effects: JSON.stringify(result.effects)
         }));
+        const _perfT2 = 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)
@@ -56616,6 +56726,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           syncOnly: false,
           log: stateLog
         });
+        perfEnd("processEvent:executeAll", _perfT2);
         emittedByTrait.set(traitName, emittedDuringExec);
         for (const emittedKey of emittedDuringExec) {
           bridgeEchoPendingRef.current.set(
@@ -56712,27 +56823,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);
     }
+    perfEnd("processEvent:total", _perfT0);
+    perfEnd(`event:${normalizedEvent}`, _perfT0);
   }, [entities, eventBus, sharedEntityStore]);
   const drainEventQueue = useCallback(async () => {
     if (processingRef.current) return;
     processingRef.current = true;
+    const _perfT = 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;
+      perfEnd("drain:pass", _perfT);
+      perfGauge("drain:passEntries", _perfN);
     }
   }, [processEventQueued]);
   const enqueueAndDrain = useCallback((eventKey, payload, targetTrait, tick, sourceTrait) => {
     enqueueEvent(eventQueueRef.current, { eventKey, payload, targetTrait, tick, sourceTrait });
+    perfGauge("queue:depthAtEnqueue", eventQueueRef.current.length);
     void drainEventQueue();
   }, [drainEventQueue]);
   useCallback((eventKey, payload) => {
@@ -57031,7 +57146,7 @@ function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNaviga
     [serverActiveTraits]
   );
   const uiSlots = useUISlots();
-  const onEventProcessed = useCallback(async (event, payload, dispatchedOrbitals, tick, sourceTrait) => {
+  const onEventProcessed = 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", () => ({
@@ -57045,9 +57160,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 };
@@ -57365,14 +57481,15 @@ function OrbPreview({
     return pattern.replace(/:([A-Za-z0-9_]+)/g, (whole, key) => routeParams[key] ?? whole);
   }, [currentPagePath, routeParams]);
   const navStackRef = useRef(null);
-  const handleNavigate = useCallback((path) => {
+  const handleNavigate = useCallback((path, navState) => {
     const hit = 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) {
@@ -57387,9 +57504,9 @@ function OrbPreview({
     }
   }, [pages]);
   const handleNavigateEffect = useCallback(
-    (path, _params, crumb) => {
+    (path, params, crumb) => {
       navStackRef.current?.beginNavigate(path, crumb);
-      handleNavigate(path);
+      handleNavigate(path, params);
     },
     [handleNavigate]
   );
@@ -59706,14 +59823,7 @@ TraitCardNode.displayName = "TraitCardNode";
 
 // components/avl/organisms/FlowCanvas.tsx
 init_useEventBus();
-var profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
-  pushPerfEntry({
-    name: `profiler:${id}:${phase}`,
-    durationMs: actualDuration,
-    ts: commitTime,
-    detail: { baseDuration }
-  });
-};
+init_perf();
 var flowCanvasLog = createLogger("almadar:ui:flow-canvas");
 var NODE_TYPES = {
   preview: OrbPreviewNode,