@almadar/ui 6.51.2 → 6.52.0

package/dist/{chunk-OLZ3EEML.js → chunk-G4GMXYMY.js}

@@ -1,10 +1,115 @@
-import { useSyncExternalStore } from 'react';
+import { domPassthrough, cn } from './chunk-IN3BVW2Z.js';
+import { useState, useRef, useCallback, useLayoutEffect, useEffect, useSyncExternalStore } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { ENTER_DELAY_STEPS, ENTER_ANIMATIONS, isFileValue } from '@almadar/core';
+export { getNestedValue } from '@almadar/core';
 import { perfStore, pushPerfEntry } from '@almadar/runtime/ui';
 export { PERF_NAMESPACE, clearPerf, perfEnd, perfGauge, perfStart, perfTime, perfTimeAsync } from '@almadar/runtime/ui';
-import { isFileValue } from '@almadar/core';
-export { getNestedValue } from '@almadar/core';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 
+var SAFE_EXIT_MS = 1e3;
+var motionEnabledCache = null;
+function isMotionEnabled() {
+  if (typeof document === "undefined") return true;
+  if (motionEnabledCache !== null) return motionEnabledCache;
+  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
+  motionEnabledCache = v !== "off";
+  return motionEnabledCache;
+}
+function usePresence(show, opts) {
+  const { animation, animate = true, onExited } = opts;
+  const [mounted, setMounted] = useState(show);
+  const [exiting, setExiting] = useState(false);
+  const prev = useRef(show);
+  const onExitedRef = useRef(onExited);
+  onExitedRef.current = onExited;
+  const safeTimer = useRef(null);
+  const clearSafe = useCallback(() => {
+    if (safeTimer.current) {
+      clearTimeout(safeTimer.current);
+      safeTimer.current = null;
+    }
+  }, []);
+  const finishExit = useCallback(() => {
+    clearSafe();
+    setExiting(false);
+    setMounted(false);
+    onExitedRef.current?.();
+  }, [clearSafe]);
+  useLayoutEffect(() => {
+    const moving = animate && isMotionEnabled();
+    if (show && !prev.current) {
+      setExiting(false);
+      setMounted(true);
+    } else if (!show && prev.current) {
+      if (moving) {
+        setExiting(true);
+        clearSafe();
+        safeTimer.current = setTimeout(finishExit, SAFE_EXIT_MS);
+      } else {
+        setMounted(false);
+        setExiting(false);
+        onExitedRef.current?.();
+      }
+    }
+    prev.current = show;
+  }, [show, animate, clearSafe, finishExit]);
+  useEffect(() => () => clearSafe(), [clearSafe]);
+  const disabled = !animate || !isMotionEnabled();
+  const className = disabled ? "" : show ? `animate-${animation}-in` : `animate-${animation}-out`;
+  const onAnimationEnd = useCallback(
+    (e) => {
+      if (e.target !== e.currentTarget) return;
+      if (exiting) finishExit();
+    },
+    [exiting, finishExit]
+  );
+  return { mounted, exiting, className, onAnimationEnd };
+}
+var Presence = ({ show, className, children, ...rest }) => {
+  const { mounted, className: animClass, onAnimationEnd } = usePresence(show, rest);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn(animClass, className), onAnimationEnd, ...domPassthrough(rest), children });
+};
+Presence.displayName = "Presence";
+var ENTER_SLOT_CLASS = "almadar-enter-slot";
+function asEnterAnimation(value) {
+  return ENTER_ANIMATIONS.find((e) => e === value);
+}
+var MAX_ENTER_DELAY = ENTER_DELAY_STEPS.length;
+function enterClassName(enter, enterDelay) {
+  if (enter === void 0 || enter === "none" || !isMotionEnabled()) return void 0;
+  const base = `almadar-enter-${enter}`;
+  if (enterDelay === void 0 || !Number.isInteger(enterDelay) || enterDelay < 1 || enterDelay > MAX_ENTER_DELAY) return base;
+  return `${base} almadar-enter-delay-${enterDelay}`;
+}
+function slotPlaysDefaultEnter(rootEnter) {
+  return rootEnter === void 0 && isMotionEnabled();
+}
+function useSlotEnterRestart(ref, contentKey, active) {
+  const lastKey = useRef(contentKey);
+  useLayoutEffect(() => {
+    if (lastKey.current === contentKey) return;
+    lastKey.current = contentKey;
+    const el = ref.current;
+    if (!el || !active) return;
+    el.classList.remove(ENTER_SLOT_CLASS);
+    void el.offsetWidth;
+    el.classList.add(ENTER_SLOT_CLASS);
+  }, [contentKey, active, ref]);
+}
+function usePerfBuffer() {
+  return useSyncExternalStore(perfStore.subscribe, perfStore.getSnapshot, perfStore.getSnapshot);
+}
+var profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
+  pushPerfEntry({
+    name: `profiler:${id}:${phase}`,
+    durationMs: actualDuration,
+    ts: commitTime,
+    detail: { baseDuration }
+  });
+};
+
 // lib/jazari/svg-paths.ts
 function gearTeethPath(cx, cy, innerRadius, outerRadius, numTeeth) {
   const parts = [];
@@ -85,17 +190,6 @@ function eightPointedStarPath(cx, cy, outerR, innerR) {
 function arrowheadPath(size) {
   return `M 0 0 L ${size} ${size / 2} L 0 ${size} Z`;
 }
-function usePerfBuffer() {
-  return useSyncExternalStore(perfStore.subscribe, perfStore.getSnapshot, perfStore.getSnapshot);
-}
-var profilerOnRender = (id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
-  pushPerfEntry({
-    name: `profiler:${id}:${phase}`,
-    durationMs: actualDuration,
-    ts: commitTime,
-    detail: { baseDuration }
-  });
-};
 
 // lib/editorMotions.ts
 var EDITOR_MOTIONS = [
@@ -1102,4 +1196,4 @@ function initDebugShortcut() {
   return () => window.removeEventListener("keydown", handleKeyDown);
 }
 
-export { EDITOR_MOTIONS, EDITOR_OPERATORS, INDENT_UNIT, applyMotion, applyOperator, arrowheadPath, brainIconPath, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, computeLineDiff, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, eightPointedStarPath, gearTeethPath, getAllTicks, getAllTraits, getDebugEvents, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getRecentEvents, getRecentGuardEvaluations, getTick, getTrait, initDebugShortcut, isDebugEnabled, isDebugEnabled2, isEditorMotion, isEditorOperator, lockIconPath, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, motionRange, onDebugToggle, parseContentSegments, parseLessonSegments, parseMarkdownWithCodeBlocks, parseMarkdownWithCodeBlocks2, pipeIconPath, profilerOnRender, recordGuardEvaluation, registerTick, registerTrait, resolveImageUrl, setDebugEnabled, setEntityProvider, setTickActive, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, toggleDebug, unregisterTick, unregisterTrait, updateGuardResult, updateTickExecution, updateTraitState, usePerfBuffer };
+export { EDITOR_MOTIONS, EDITOR_OPERATORS, ENTER_SLOT_CLASS, INDENT_UNIT, MAX_ENTER_DELAY, Presence, applyMotion, applyOperator, arrowheadPath, asEnterAnimation, brainIconPath, clearDebugEvents, clearEntityProvider, clearGuardHistory, clearTicks, clearTraits, computeLineDiff, debug, debugCollision, debugError, debugGameState, debugGroup, debugGroupEnd, debugInput, debugPhysics, debugTable, debugTime, debugTimeEnd, debugWarn, eightPointedStarPath, enterClassName, gearTeethPath, getAllTicks, getAllTraits, getDebugEvents, getEntitiesByType, getEntityById, getEntitySnapshot, getEventsBySource, getEventsByType, getGuardEvaluationsForTrait, getGuardHistory, getRecentEvents, getRecentGuardEvaluations, getTick, getTrait, initDebugShortcut, isDebugEnabled, isDebugEnabled2, isEditorMotion, isEditorOperator, isMotionEnabled, lockIconPath, logDebugEvent, logEffectExecuted, logError, logEventFired, logInfo, logStateChange, logWarning, motionRange, onDebugToggle, parseContentSegments, parseLessonSegments, parseMarkdownWithCodeBlocks, parseMarkdownWithCodeBlocks2, pipeIconPath, profilerOnRender, recordGuardEvaluation, registerTick, registerTrait, resolveImageUrl, setDebugEnabled, setEntityProvider, setTickActive, slotPlaysDefaultEnter, subscribeToDebugEvents, subscribeToGuardChanges, subscribeToTickChanges, subscribeToTraitChanges, toggleDebug, unregisterTick, unregisterTrait, updateGuardResult, updateTickExecution, updateTraitState, usePerfBuffer, usePresence, useSlotEnterRestart };

package/dist/{chunk-HQDKHLFG.js → chunk-IN3BVW2Z.js}

@@ -1,6 +1,20 @@
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 
+// lib/domPassthrough.ts
+var GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set(["role", "id", "lang", "dir", "tabIndex"]);
+function domPassthrough(props) {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("aria-") || key.startsWith("data-") || GLOBAL_ATTRIBUTES.has(key)) {
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
+        out[key] = value;
+      }
+    }
+  }
+  return out;
+}
+
 // lib/theme-scale.ts
 var THEME_SCALE_KEYS = {
   height: ["button-sm", "button-md", "button-lg", "input-sm", "input-md", "input-lg", "row-compact", "row-normal", "row-spacious", "icon-default"],
@@ -33,4 +47,4 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-export { cn };
+export { cn, domPassthrough };

package/dist/{chunk-FGHRVJCI.js → chunk-MSBMVG3B.js}

@@ -98,7 +98,10 @@ var MOTION_SHAPE_VARS = [
   { cssVar: "--motion-popover-exit-to-transform", key: "popoverExit" },
   { cssVar: "--motion-toast-enter-from-transform", key: "toastEnter" },
   { cssVar: "--motion-toast-exit-to-transform", key: "toastExit" },
-  { cssVar: "--motion-page-enter-from-transform", key: "pageEnter" }
+  { cssVar: "--motion-page-enter-from-transform", key: "pageEnter" },
+  { cssVar: "--motion-enter-rise-from-transform", key: "enterRise" },
+  { cssVar: "--motion-enter-scale-from-transform", key: "enterScale" },
+  { cssVar: "--motion-enter-slide-from-transform", key: "enterSlide" }
 ];
 var ICONOGRAPHY_VARS = [
   { cssVar: "--icon-family", key: "family" },
@@ -122,6 +125,7 @@ var GEOMETRY_VARS = [
   { cssVar: "--border-heavy", key: "borderHeavy" },
   { cssVar: "--corner-shape", key: "cornerShape" },
   { cssVar: "--corner-shape-pill", key: "cornerShapePill" },
+  { cssVar: "--corner-shape-interactive", key: "cornerShapeInteractive" },
   { cssVar: "--border-style", key: "borderStyle" },
   { cssVar: "--border-style-interactive", key: "borderStyleInteractive" }
 ];
@@ -260,6 +264,12 @@ function emitMotion(m, vars) {
     }
   }
   applyFlat(m.shapes, MOTION_SHAPE_VARS, vars);
+  if (m.entry?.default !== void 0) vars["--motion-enter-default"] = enterKeyframe(m.entry.default);
+  if (m.entry?.stagger !== void 0) vars["--motion-enter-stagger"] = m.entry.stagger;
+  if (m.busyDelay !== void 0) vars["--motion-busy-delay"] = m.busyDelay;
+}
+function enterKeyframe(enter) {
+  return enter === "none" ? "none" : `almadar-enter-${enter}`;
 }
 function emitIconography(i, vars) {
   applyFlat(i, ICONOGRAPHY_VARS, vars);
@@ -276,4 +286,4 @@ function resolveThemeForRuntime(theme) {
   return theme;
 }
 
-export { DENSITY_ELEMENT_VARS, DENSITY_SPACING_VARS, ELEVATION_VARS, GEOMETRY_VARS, ICONOGRAPHY_VARS, LEGACY_PREFIXES, MOTION_DURATION_KEYS, MOTION_EASING_KEYS, MOTION_INTENT_VARS, MOTION_SHAPE_VARS, SURFACE_VARS, TYPE_FAMILY_VARS, TYPE_HEADING_VARS, TYPE_INTENT_VARS, TYPE_SIZE_KEYS, resolveThemeForRuntime, themeTokensToCssVars };
+export { DENSITY_ELEMENT_VARS, DENSITY_SPACING_VARS, ELEVATION_VARS, GEOMETRY_VARS, ICONOGRAPHY_VARS, LEGACY_PREFIXES, MOTION_DURATION_KEYS, MOTION_EASING_KEYS, MOTION_INTENT_VARS, MOTION_SHAPE_VARS, SURFACE_VARS, TYPE_FAMILY_VARS, TYPE_HEADING_VARS, TYPE_INTENT_VARS, TYPE_SIZE_KEYS, enterKeyframe, resolveThemeForRuntime, themeTokensToCssVars };

package/dist/{chunk-YKHNK5JH.js → chunk-NCNP2RKZ.js}

@@ -1,6 +1,6 @@
-import { DEFAULT_CURRENCY } from './chunk-GHXWGQTX.js';
-import { en_default } from './chunk-L55SAFKL.js';
-import { createContext, useContext, useMemo } from 'react';
+import { DEFAULT_CURRENCY } from './chunk-V5AGW2JN.js';
+import { en_default } from './chunk-WB2A6V3I.js';
+import React, { createContext, useEffect, useContext, useMemo } from 'react';
 
 var { $meta: _meta, ...coreMessages } = en_default;
 var coreLocale = coreMessages;
@@ -18,7 +18,14 @@ var I18nContext = createContext({
   }
 });
 I18nContext.displayName = "I18nContext";
-var I18nProvider = I18nContext.Provider;
+function I18nProvider({ value, children, documentRoot }) {
+  useEffect(() => {
+    if (!documentRoot) return;
+    document.documentElement.lang = value.locale;
+    document.documentElement.dir = value.direction;
+  }, [documentRoot, value.locale, value.direction]);
+  return React.createElement(I18nContext.Provider, { value }, children);
+}
 function useTranslate() {
   return useContext(I18nContext);
 }

package/dist/{chunk-T7IH5ABO.js → chunk-QWDKMVLX.js}

@@ -1,10 +1,11 @@
 import { runTickFrame } from './chunk-DQTV6QVS.js';
-import { ALL_SLOTS } from './chunk-6CFYRP4S.js';
-import { UISlotRenderer } from './chunk-GIPZSCND.js';
-import { Box } from './chunk-BUEIZY54.js';
-import { Typography } from './chunk-MWPX2O4M.js';
+import { ALL_SLOTS } from './chunk-2QB2PXOO.js';
+import { UISlotRenderer } from './chunk-EERAGPBW.js';
+import { Box } from './chunk-BHZG4PDZ.js';
+import { Typography } from './chunk-CLSLVFSP.js';
+import { beginPending, endPending } from './chunk-TWHYH25Q.js';
 import { useEventBus } from './chunk-6EV3OEBQ.js';
-import { registerTrait, unregisterTrait, perfTimeAsync } from './chunk-OLZ3EEML.js';
+import { registerTrait, unregisterTrait, perfTimeAsync } from './chunk-G4GMXYMY.js';
 import { bindTraitStateGetter, registerTraitSnapshot, recordTransition, recordingTransport, recordServerResponse } from './chunk-O7OLVVBR.js';
 import { isNotificationSlot } from './chunk-YHY5K2Y7.js';
 import React, { useState, useMemo, useEffect, useRef, useCallback, useSyncExternalStore } from 'react';
@@ -363,8 +364,12 @@ function useBusIngress(traitBindings, traitIndex, settle, eventBus) {
     const dispatch = (traitName, eventKey, payload, source) => {
       if (!claim(source, traitName, eventKey)) return;
       const tick = source?.tick;
+      const pendingKey = source?.pendingKey;
+      if (pendingKey !== void 0) beginPending(pendingKey);
       void settle(traitName, eventKey, payload, tick).catch((err) => {
         log2.error("dispatch:failed", { trait: traitName, event: eventKey, error: String(err) });
+      }).finally(() => {
+        if (pendingKey !== void 0) endPending(pendingKey);
       });
     };
     for (const binding of traitBindings) {
@@ -514,7 +519,7 @@ function resolveLambdaBindings(body, params, item, index) {
   return body;
 }
 var LazySlotContentRenderer = React.lazy(
-  () => import('./UISlotRenderer-7UYHFW4S.js').then((m) => ({ default: m.SlotContentRenderer }))
+  () => import('./UISlotRenderer-CR7SCAMR.js').then((m) => ({ default: m.SlotContentRenderer }))
 );
 function deferLambdaEntityExprs(value) {
   if (typeof value === "string") {
@@ -638,12 +643,15 @@ function useSlotFlush(uiSlots, embeddedTraits) {
   uiSlotsRef.current = uiSlots;
   const embeddedTraitsRef = useRef(embeddedTraits);
   embeddedTraitsRef.current = embeddedTraits;
+  const writtenRef = useRef(/* @__PURE__ */ new Map());
+  const keyOf = (slot, trait) => `${slot}\0${trait}`;
   const flushSlot = useCallback((traitName, slot, patterns, source) => {
     const slots = uiSlotsRef.current;
     const embedded = embeddedTraitsRef.current;
     if (patterns.length === 0) {
       flushLog.debug("clear", { traitName, slot });
       slots.clearBySource(slot, traitName);
+      writtenRef.current.set(keyOf(slot, traitName), { kind: "clear", slot, trait: traitName });
       return;
     }
     const last = patterns[patterns.length - 1];
@@ -652,19 +660,20 @@ function useSlotFlush(uiSlots, embeddedTraits) {
     const props = convertFnFormLambdasInProps(rawProps, typeof patternType === "string" ? patternType : void 0);
     const isEmbedded = (embedded?.has(traitName) ?? false) && !isNotificationSlot(slot);
     if (isEmbedded) {
-      slots.updateTraitContent(traitName, {
+      const content = {
         pattern: patternType,
         props,
         slot,
         priority: 0,
-        animation: "fade",
         transitionEvent: source?.event,
         fromState: source?.state,
         entity: source?.entity
-      });
+      };
+      slots.updateTraitContent(traitName, content);
+      writtenRef.current.set(keyOf(slot, traitName), { kind: "trait", trait: traitName, content });
       return;
     }
-    slots.render({
+    const config = {
       target: slot,
       pattern: patternType,
       props,
@@ -672,7 +681,9 @@ function useSlotFlush(uiSlots, embeddedTraits) {
       transitionEvent: source?.event,
       fromState: source?.state,
       entity: source?.entity
-    });
+    };
+    slots.render(config);
+    writtenRef.current.set(keyOf(slot, traitName), { kind: "render", config });
   }, []);
   const applyClientEffects = useCallback((clientEffects, clientEffectsByTrait, onNavigate, onNavigateBack, activeTraits) => {
     const slots = uiSlotsRef.current;
@@ -687,13 +698,18 @@ function useSlotFlush(uiSlots, embeddedTraits) {
         const { bareTraitRef, patternType, props: unwrapped } = unwrapPattern(pattern);
         const isEmbedded = (embedded?.has(sourceTrait) ?? false) && !isNotificationSlot(slot);
         const propsValue = bareTraitRef !== void 0 ? bareTraitRef : { ...unwrapped ?? {}, ...rawProps };
-        const props = convertFnFormLambdasInProps(propsValue);
+        const props = convertFnFormLambdasInProps(propsValue, typeof patternType === "string" ? patternType : void 0);
         if (pattern === null) {
           slots.clearBySource(slot, sourceTrait);
+          writtenRef.current.set(keyOf(slot, sourceTrait), { kind: "clear", slot, trait: sourceTrait });
         } else if (isEmbedded) {
-          slots.updateTraitContent(sourceTrait, { pattern: patternType, props, slot, priority: 0, animation: "fade", transitionEvent: event, fromState });
+          const content = { pattern: patternType, props, slot, priority: 0, transitionEvent: event, fromState };
+          slots.updateTraitContent(sourceTrait, content);
+          writtenRef.current.set(keyOf(slot, sourceTrait), { kind: "trait", trait: sourceTrait, content });
         } else {
-          slots.render({ target: slot, pattern: patternType, props, sourceTrait, transitionEvent: event, fromState });
+          const config = { target: slot, pattern: patternType, props, sourceTrait, transitionEvent: event, fromState };
+          slots.render(config);
+          writtenRef.current.set(keyOf(slot, sourceTrait), { kind: "render", config });
         }
       } else if (kind === "navigate") {
         const [, route, params, options] = effect;
@@ -703,7 +719,26 @@ function useSlotFlush(uiSlots, embeddedTraits) {
       }
     }
   }, []);
-  return useMemo(() => ({ flushSlot, applyClientEffects }), [flushSlot, applyClientEffects]);
+  const checkpoint = useCallback(() => new Map(writtenRef.current), []);
+  const rollback = useCallback((cp) => {
+    const slots = uiSlotsRef.current;
+    for (const [key, now] of writtenRef.current) {
+      const then = cp.get(key);
+      if (then === now) continue;
+      if (then === void 0 || then.kind === "clear") {
+        if (now.kind === "render") slots.clearBySource(now.config.target, now.config.sourceTrait ?? "kernel");
+        else if (now.kind === "trait") {
+          flushLog.warn("rollback:embedded-frame-kept", { trait: now.trait });
+        }
+      } else if (then.kind === "render") {
+        slots.render(then.config);
+      } else {
+        slots.updateTraitContent(then.trait, then.content);
+      }
+    }
+    writtenRef.current = new Map(cp);
+  }, []);
+  return useMemo(() => ({ flushSlot, applyClientEffects, checkpoint, rollback }), [flushSlot, applyClientEffects, checkpoint, rollback]);
 }
 var log3 = createLogger("almadar:ui:circuit:effect-runner");
 async function runCircuitEffects(params) {
@@ -1196,6 +1231,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     const orbitalName = traitIndex.byName.get(traitName)?.orbitalName ?? traitName;
     let outcome;
     const composedBefore = new Map(store.callsitePayloads);
+    let beforeLocalPaint;
     try {
       outcome = await kernel.dispatch({
         event: eventKey,
@@ -1203,15 +1239,31 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         ...entityId !== void 0 ? { entityId } : {},
         ...tick !== void 0 ? { tick } : {},
         targetTrait: traitName
+      }, {
+        onLocal: (local) => {
+          beforeLocalPaint = slotFlush.checkpoint();
+          slotFlush.applyClientEffects(
+            local.clientEffects ?? [],
+            local.clientEffectsByTrait,
+            options.navigate,
+            options.navigateBack,
+            activeTraitNamesRef.current
+          );
+        }
       });
     } catch (err) {
+      if (beforeLocalPaint !== void 0) slotFlush.rollback(beforeLocalPaint);
       recordDispatchVerdict(orbitalName, eventKey, { error: err instanceof Error ? err : String(err) });
       throw err;
     }
     recordDispatchVerdict(orbitalName, eventKey, { response: outcome.response });
+    if (outcome.localPainted && !outcome.response.success && beforeLocalPaint !== void 0) {
+      slotFlush.rollback(beforeLocalPaint);
+    }
+    const settledEffects = outcome.localPainted && outcome.serverEffects !== void 0 ? outcome.serverEffects : outcome.response;
     slotFlush.applyClientEffects(
-      outcome.response.clientEffects ?? [],
-      outcome.response.clientEffectsByTrait,
+      settledEffects.clientEffects ?? [],
+      settledEffects.clientEffectsByTrait,
       options.navigate,
       options.navigateBack,
       activeTraitNamesRef.current

package/dist/{chunk-NTO555KF.js → chunk-TWHYH25Q.js}

@@ -1,24 +1,121 @@
 import { useEventBus } from './chunk-6EV3OEBQ.js';
-import { useCallback, useSyncExternalStore, useRef, useEffect, useState, useMemo } from 'react';
+import { createContext, useRef, useCallback, useState, useSyncExternalStore, useContext, useEffect, useMemo } from 'react';
 
-function useMediaQuery(query) {
-  const subscribe = useCallback(
-    (onChange) => {
-      if (!hasMatchMedia()) return () => void 0;
-      const mql = window.matchMedia(query);
-      mql.addEventListener("change", onChange);
-      return () => mql.removeEventListener("change", onChange);
+var counts = /* @__PURE__ */ new Map();
+var keyListeners = /* @__PURE__ */ new Map();
+var seq = 0;
+function notify(key) {
+  keyListeners.get(key)?.forEach((cb) => cb());
+}
+function newPendingKey() {
+  seq += 1;
+  return `pending-${seq}`;
+}
+function beginPending(key) {
+  counts.set(key, (counts.get(key) ?? 0) + 1);
+  if (counts.get(key) === 1) notify(key);
+}
+function endPending(key) {
+  const n = (counts.get(key) ?? 0) - 1;
+  if (n > 0) {
+    counts.set(key, n);
+    return;
+  }
+  counts.delete(key);
+  notify(key);
+}
+function isPending(key) {
+  return (counts.get(key) ?? 0) > 0;
+}
+function subscribePending(key, cb) {
+  let set = keyListeners.get(key);
+  if (!set) {
+    set = /* @__PURE__ */ new Set();
+    keyListeners.set(key, set);
+  }
+  set.add(cb);
+  return () => {
+    set?.delete(cb);
+    if (set && set.size === 0) keyListeners.delete(key);
+  };
+}
+var PendingScopeContext = createContext(null);
+function usePendingScopeValue() {
+  const keys = useRef(/* @__PURE__ */ new Set());
+  const listeners = useRef(/* @__PURE__ */ new Set());
+  const emitChange = useCallback(() => listeners.current.forEach((cb) => cb()), []);
+  return useState(() => ({
+    track: (key) => {
+      if (!isPending(key)) return;
+      keys.current.add(key);
+      emitChange();
+      const unsub = subscribePending(key, () => {
+        if (isPending(key)) return;
+        keys.current.delete(key);
+        unsub();
+        emitChange();
+      });
     },
-    [query]
-  );
+    hasPending: () => keys.current.size > 0,
+    subscribe: (cb) => {
+      listeners.current.add(cb);
+      return () => listeners.current.delete(cb);
+    }
+  }))[0];
+}
+function useScopeHasPending(scope) {
   return useSyncExternalStore(
-    subscribe,
-    () => hasMatchMedia() && window.matchMedia(query).matches,
+    useCallback((cb) => scope ? scope.subscribe(cb) : () => {
+    }, [scope]),
+    () => scope ? scope.hasPending() : false,
     () => false
   );
 }
-function hasMatchMedia() {
-  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+function usePendingAction() {
+  const scope = useContext(PendingScopeContext);
+  const [key, setKey] = useState(null);
+  const pending = useSyncExternalStore(
+    useCallback((cb) => key ? subscribePending(key, cb) : () => {
+    }, [key]),
+    () => key ? isPending(key) : false,
+    () => false
+  );
+  useEffect(() => {
+    if (key && !pending) setKey(null);
+  }, [key, pending]);
+  const activate = useCallback((emit) => {
+    const k = newPendingKey();
+    emit(k);
+    if (!isPending(k)) return;
+    scope?.track(k);
+    setKey(k);
+  }, [scope]);
+  return { pending, activate };
+}
+function usePendingRows() {
+  const [rows, setRows] = useState(/* @__PURE__ */ new Map());
+  const unsubs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => () => unsubs.current.forEach((u) => u()), []);
+  const activateRow = useCallback((rowId, emit) => {
+    const k = newPendingKey();
+    emit(k);
+    if (!isPending(k)) return;
+    setRows((prev) => new Map(prev).set(rowId, k));
+    unsubs.current.get(rowId)?.();
+    unsubs.current.set(rowId, subscribePending(k, () => {
+      if (isPending(k)) return;
+      unsubs.current.get(rowId)?.();
+      unsubs.current.delete(rowId);
+      setRows((prev) => {
+        if (prev.get(rowId) !== k) return prev;
+        const next = new Map(prev);
+        next.delete(rowId);
+        return next;
+      });
+    }));
+  }, []);
+  const isRowPending = useCallback((rowId) => rows.has(rowId), [rows]);
+  return { isRowPending, activateRow };
 }
 function useInfiniteScroll(onLoadMore, options = {}) {
   const { rootMargin = "200px", hasMore = true, isLoading = false } = options;
@@ -50,6 +147,30 @@ function useInfiniteScroll(onLoadMore, options = {}) {
   }, [rootMargin]);
   return { sentinelRef };
 }
+function useMediaQuery(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      if (!hasMatchMedia()) return () => void 0;
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return useSyncExternalStore(
+    subscribe,
+    () => hasMatchMedia() && window.matchMedia(query).matches,
+    () => false
+  );
+}
+function hasMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+
+// hooks/usePrefersReducedMotion.ts
+function usePrefersReducedMotion() {
+  return useMediaQuery("(prefers-reduced-motion: reduce)");
+}
 function useSwipeGesture(callbacks, options = {}) {
   const { threshold = 50, velocityThreshold = 0.3, preventDefault = false } = options;
   const startX = useRef(0);
@@ -557,4 +678,4 @@ function usePullToRefresh(onRefresh, options = {}) {
   };
 }
 
-export { ALMADAR_DND_MIME, parseQueryBinding, useAuthContext, useCanvasGestures, useDragReorder, useDraggable, useDropZone, useInfiniteScroll, useLongPress, useMediaQuery, usePullToRefresh, useQuerySingleton, useSwipeGesture };
+export { ALMADAR_DND_MIME, PendingScopeContext, beginPending, endPending, parseQueryBinding, useAuthContext, useCanvasGestures, useDragReorder, useDraggable, useDropZone, useInfiniteScroll, useLongPress, useMediaQuery, usePendingAction, usePendingRows, usePendingScopeValue, usePrefersReducedMotion, usePullToRefresh, useQuerySingleton, useScopeHasPending, useSwipeGesture };

package/dist/{chunk-GHXWGQTX.js → chunk-V5AGW2JN.js}

@@ -1,4 +1,4 @@
-import { en_default } from './chunk-L55SAFKL.js';
+import { en_default } from './chunk-WB2A6V3I.js';
 
 // lib/format.ts
 var { $meta: _meta, ...coreMessages } = en_default;

package/dist/{chunk-L55SAFKL.js → chunk-WB2A6V3I.js}

@@ -1151,7 +1151,37 @@ var en_default = {
   "flowCanvas.presetSize": "{{label}} ({{width}}px)",
   "avl.breadcrumb.transitionNumber": "Transition #{{n}}",
   "orbInspector.pattern": "Pattern",
-  "orbInspector.slotLabel": "slot: {{slot}}"
+  "orbInspector.slotLabel": "slot: {{slot}}",
+  "detailPanel.section.activity": "Activity",
+  "detailPanel.section.lineItems": "Line items",
+  "detailPanel.tab.overview": "Overview",
+  "detailPanel.thread.empty": "No messages yet",
+  "detailPanel.openImage": "Open image",
+  "detailPanel.showImage": "Show image {{index}}",
+  "aria.clearSelection": "Clear selection",
+  "aria.searchOptions": "Search options",
+  "aria.zoomIn": "Zoom in",
+  "aria.zoomOut": "Zoom out",
+  "aria.previousPage": "Previous page",
+  "aria.nextPage": "Next page",
+  "aria.downloadDocument": "Download document",
+  "aria.printDocument": "Print document",
+  "aria.wrapLines": "Wrap lines",
+  "aria.copyCode": "Copy code",
+  "aria.clearInput": "Clear input",
+  "aria.skipToContent": "Skip to content",
+  "aria.mainNavigation": "Main navigation",
+  "aria.carouselSlides": "Slides",
+  "aria.minimap": "Minimap",
+  "aria.canvasScene": "Game scene",
+  "aria.learningCanvas": "Interactive diagram",
+  "aria.scene3d": "3D scene",
+  "aria.graphCanvas": "Graph",
+  "aria.positionedCanvas": "Floor plan",
+  "aria.walkTraitDone": "completed",
+  "aria.walkTraitPending": "pending",
+  "aria.walkGraph": "State graph for {{trait}}: {{from}} to {{to}}",
+  "aria.loading": "Loading"
 };
 
 export { en_default };

package/dist/{chunk-JXUYEO7U.js → chunk-XUSSAWKL.js}

@@ -1,3 +1,4 @@
+import { beginPending, endPending } from './chunk-TWHYH25Q.js';
 import { useEventBus } from './chunk-6EV3OEBQ.js';
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { createLogger } from '@almadar/logger';
@@ -856,7 +857,12 @@ function useUIEvents(dispatch, traitName, validEvents, eventBusInstance) {
         if (event.source && event.source.dispatched) {
           return;
         }
-        dispatch(smEvent, event.payload);
+        const pendingKey = event.source?.pendingKey;
+        const settled = dispatch(smEvent, event.payload);
+        if (pendingKey !== void 0 && settled instanceof Promise) {
+          beginPending(pendingKey);
+          void settled.finally(() => endPending(pendingKey));
+        }
       };
       unsubscribes.push(
         eventBus.on(`${UI_PREFIX}${traitName}.${smEvent}`, handler)