@almadar/ui 5.121.3 → 5.121.4

package/dist/avl/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React90 from 'react';
 import React90__default, { createContext, useState, useMemo, useRef, useEffect, useContext, useCallback, Suspense, useLayoutEffect, Profiler, useReducer, useSyncExternalStore, lazy, useId } from 'react';
-import { getAllPages, OrbitalProvider, EventBusContext, useTraitScope, ServerBridgeProvider, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge, useEntitySchema, useEntitySchemaOptional, TraitScopeProvider, useCurrentPagePath, useGameAudioContextOptional } from '@almadar/ui/providers';
+import { getAllPages, OrbitalProvider, EventBusContext, useTraitScopeChain, ServerBridgeProvider, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge, useEntitySchema, useEntitySchemaOptional, TraitScopeProvider, useCurrentPagePath, useGameAudioContextOptional } from '@almadar/ui/providers';
 import { createLogger, setNamespaceLevel, isLogLevelEnabled } from '@almadar/logger';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { MarkerType, useReactFlow, Handle, Position, getBezierPath, EdgeLabelRenderer, useNodeId, ReactFlowProvider, BaseEdge, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
@@ -36,7 +36,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
-import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, isCircuitEvent, walkSExpr, mergeEntityFrame, isSExpr, isEventPayloadValue } from '@almadar/core';
+import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, walkSExpr, isSExpr, isEventPayloadValue } from '@almadar/core';
 import { useDroppable, useDraggable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, useSortable, arrayMove, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -3225,9 +3225,9 @@ function getGlobalEventBus() {
 function useEventBus() {
   const context = useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
-  const scope = useTraitScope();
+  const chain = useTraitScopeChain();
   return useMemo(() => {
-    if (!scope) {
+    if (chain.length === 0) {
       return {
         ...baseBus,
         emit: (type, payload, source) => {
@@ -3243,22 +3243,31 @@ function useEventBus() {
       emit: (type, payload, source) => {
         if (typeof type === "string" && type.startsWith("UI:")) {
           const tail = type.slice(3);
-          const qualified = tail.includes(".") ? type : `UI:${scope.orbital}.${scope.trait}.${tail}`;
-          if (qualified !== type) {
-            scopeLog.info("emit:qualified", {
+          const isQualified = tail.includes(".");
+          const event = isQualified ? tail.split(".").slice(2).join(".") : tail;
+          if (!event) {
+            baseBus.emit(type, payload, source);
+            return;
+          }
+          const keys = /* @__PURE__ */ new Set();
+          if (isQualified) keys.add(type);
+          for (const sc of chain) {
+            keys.add(`UI:${sc.orbital}.${sc.trait}.${event}`);
+          }
+          if (keys.size > 1) {
+            scopeLog.info("emit:fan-out", {
               from: type,
-              to: qualified,
-              scopeOrbital: scope.orbital,
-              scopeTrait: scope.trait
+              keys: Array.from(keys),
+              chainDepth: chain.length
             });
           }
-          baseBus.emit(qualified, payload, source);
+          for (const key of keys) baseBus.emit(key, payload, source);
           return;
         }
         baseBus.emit(type, payload, source);
       }
     };
-  }, [baseBus, scope]);
+  }, [baseBus, chain]);
 }
 function useEventListener(event, handler) {
   const eventBus = useEventBus();
@@ -4615,13 +4624,13 @@ var init_Icon = __esm({
       style
     }) => {
       const directIcon = typeof icon === "string" ? void 0 : icon;
-      const effectiveName = typeof icon === "string" ? icon : name;
+      const effectiveName = typeof icon === "string" && icon !== "" ? icon : name;
+      const effectiveStrokeWidth = strokeWidth != null && strokeWidth > 0 ? strokeWidth : void 0;
       const family = useIconFamily();
       const RenderedComponent = React90__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName) : null;
       }, [directIcon, effectiveName, family]);
-      const effectiveStrokeWidth = strokeWidth ?? void 0;
       const inlineStyle = {
         ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
         ...style
@@ -5103,6 +5112,15 @@ var init_Modal = __esm({
       const [dragY, setDragY] = useState(0);
       const dragStartY = useRef(0);
       const isDragging = useRef(false);
+      const [closing, setClosing] = useState(false);
+      const wasOpenRef = useRef(isOpen);
+      useEffect(() => {
+        if (wasOpenRef.current && !isOpen) setClosing(true);
+        wasOpenRef.current = isOpen;
+      }, [isOpen]);
+      const handleAnimEnd = (e) => {
+        if (closing && e.target === e.currentTarget) setClosing(false);
+      };
       useEffect(() => {
         if (isOpen) {
           previousActiveElement.current = document.activeElement;
@@ -5136,7 +5154,11 @@ var init_Modal = __esm({
           document.body.style.overflow = "";
         };
       }, [isOpen]);
-      if (!isOpen || typeof document === "undefined") return null;
+      if (typeof document === "undefined") return null;
+      const renderOpen = isOpen || closing;
+      if (!renderOpen) return null;
+      const dialogAnim = closing ? "animate-modal-out" : "animate-modal-in";
+      const overlayAnim = closing ? "animate-overlay-out" : "animate-overlay-in";
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -5153,7 +5175,8 @@ var init_Modal = __esm({
             className: cn(
               "fixed inset-0 z-[1000]",
               "flex items-start justify-center px-4 pb-4 pt-[10vh]",
-              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
+              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0",
+              overlayAnim
             ),
             style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
             onClick: handleOverlayClick,
@@ -5181,8 +5204,10 @@ var init_Modal = __esm({
                   // full height, no rounded corners, no min-width.
                   "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
                   lookStyles[look],
-                  className
+                  className,
+                  dialogAnim
                 ),
+                onAnimationEnd: handleAnimEnd,
                 style: dragY > 0 ? {
                   transform: `translateY(${dragY}px)`,
                   transition: isDragging.current ? "none" : "transform 200ms ease-out"
@@ -5291,6 +5316,7 @@ var init_Overlay = __esm({
           className: cn(
             "fixed inset-0 z-40",
             blur && "backdrop-blur-sm",
+            "animate-overlay-in",
             className
           ),
           style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
@@ -6703,7 +6729,7 @@ var init_Input = __esm({
             eventBus.emit(`UI:${action}`, { value: e.currentTarget.value });
           }
         };
-        const wrapField = (field) => /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+        const wrapField = (field, fullWidth = true) => /* @__PURE__ */ jsxs("div", { className: fullWidth ? "w-full" : "w-fit", children: [
           label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-foreground mb-1", children: label }),
           field,
           (helperText || error) && /* @__PURE__ */ jsx("p", { className: cn("mt-1 text-xs", error ? "text-error" : "text-muted-foreground"), children: error ?? helperText })
@@ -6763,7 +6789,8 @@ var init_Input = __esm({
                 ),
                 ...props
               }
-            )
+            ),
+            false
           );
         }
         return wrapField(
@@ -9006,6 +9033,18 @@ var init_RangeSlider = __esm({
 function easeOut(t) {
   return t * (2 - t);
 }
+function formatDisplay(value, format, decimals) {
+  switch (format) {
+    case "currency":
+      return `$${value.toFixed(2)}`;
+    case "percent":
+      return `${Math.round(value)}%`;
+    case "number":
+      return value.toLocaleString();
+    default:
+      return value.toFixed(decimals);
+  }
+}
 var AnimatedCounter;
 var init_AnimatedCounter = __esm({
   "components/marketing/atoms/AnimatedCounter.tsx"() {
@@ -9017,6 +9056,7 @@ var init_AnimatedCounter = __esm({
       duration = 600,
       prefix,
       suffix,
+      format,
       className
     }) => {
       const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
@@ -9032,6 +9072,10 @@ var init_AnimatedCounter = __esm({
           setDisplayValue(to);
           return;
         }
+        if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+          setDisplayValue(to);
+          return;
+        }
         const startTime = performance.now();
         const diff = to - from;
         function animate(currentTime) {
@@ -9053,7 +9097,7 @@ var init_AnimatedCounter = __esm({
         };
       }, [value, duration]);
       const decimalPlaces = Number.isInteger(value) ? 0 : String(value).split(".")[1]?.length ?? 0;
-      const formattedValue = displayValue.toFixed(decimalPlaces);
+      const formattedValue = formatDisplay(displayValue, format, decimalPlaces);
       return /* @__PURE__ */ jsxs(Typography, { variant: "h3", className: cn("tabular-nums", className), children: [
         prefix,
         formattedValue,
@@ -10332,14 +10376,29 @@ function recordTransition(trace) {
         "pass"
       );
     } else {
-      const hasRenderUI = entry.effects.some((e) => e.type === "render-ui");
-      if (hasRenderUI) {
-        registerCheck(
-          checkId,
-          `INIT transition for "${entry.traitName}" missing fetch effect`,
-          "fail",
-          "Entity-bound render-ui without a fetch effect will show empty data"
+      const rendersEntityData = entry.effects.some(
+        (e) => e.type === "render-ui" && JSON.stringify(e.args).includes("@entity.")
+      );
+      if (rendersEntityData) {
+        const siblingSeeds = getState().transitions.some(
+          (t) => t.event === "INIT" && t.effects.some(
+            (e) => e.type === "fetch" || e.type === "set" && typeof e.args[0] === "string" && e.args[0].startsWith("@entity.")
+          )
         );
+        if (siblingSeeds) {
+          registerCheck(
+            checkId,
+            `INIT transition for "${entry.traitName}" has sibling entity-seed (shared entity)`,
+            "pass"
+          );
+        } else {
+          registerCheck(
+            checkId,
+            `INIT transition for "${entry.traitName}" missing fetch effect`,
+            "fail",
+            "Entity-bound render-ui without a fetch effect will show empty data"
+          );
+        }
       }
     }
   }
@@ -11484,7 +11543,7 @@ function GameMenu({
   logo,
   className
 }) {
-  const resolvedOptions = options ?? menuItems ?? DEFAULT_MENU_OPTIONS;
+  const resolvedOptions = (options?.length ? options : void 0) ?? (menuItems?.length ? menuItems : void 0) ?? DEFAULT_MENU_OPTIONS;
   const eventBus = useEventBus();
   const handleOptionClick = React90.useCallback(
     (option) => {
@@ -12882,6 +12941,10 @@ function Canvas2D({
       window.removeEventListener("keyup", onUp);
     };
   }, [keyMap, keyUpMap, eventBus]);
+  useEffect(() => {
+    if (!keyMap && !keyUpMap) return;
+    canvasRef.current?.focus();
+  }, [keyMap, keyUpMap]);
   if (error) {
     return /* @__PURE__ */ jsx(Box, { className: cn("flex items-center justify-center w-full h-full bg-[var(--color-card)] rounded-container", className), children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
       /* @__PURE__ */ jsx(Icon, { name: "alert-circle", size: "xl" }),
@@ -12930,7 +12993,7 @@ function Canvas2D({
             onWheel: gestureHandlers.onWheel,
             onContextMenu: (e) => e.preventDefault(),
             className: "cursor-pointer touch-none",
-            tabIndex: isFree ? 0 : void 0,
+            tabIndex: isFree || keyMap || keyUpMap ? 0 : void 0,
             style: {
               width: viewportSize.width,
               height: viewportSize.height
@@ -16354,7 +16417,8 @@ var init_LoadingState = __esm({
     LoadingState = ({
       title,
       message,
-      className
+      className,
+      fullPage = false
     }) => {
       const { t } = useTranslate();
       const displayMessage = message ?? t("common.loading");
@@ -16363,7 +16427,8 @@ var init_LoadingState = __esm({
         {
           align: "center",
           className: cn(
-            "justify-center py-12",
+            "justify-center",
+            fullPage ? "fixed inset-0 z-[1000] py-12 bg-background/80 backdrop-blur-sm animate-overlay-in" : "py-12",
             className
           ),
           children: [
@@ -19565,7 +19630,7 @@ var init_BookCoverPage = __esm({
                 size: "lg",
                 action: "BOOK_START",
                 className: "mt-8",
-                children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: t("book.startReading") })
+                children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "inherit", children: t("book.startReading") })
               }
             )
           ]
@@ -21877,8 +21942,9 @@ var init_Chart = __esm({
                   align: "center",
                   flex: true,
                   className: "min-w-0",
+                  style: { height: "100%" },
                   children: [
-                    /* @__PURE__ */ jsx(HStack, { gap: histogram ? "none" : "xs", align: "end", className: "w-full", style: { height: "100%" }, children: series.map((s, sIdx) => {
+                    /* @__PURE__ */ jsx(HStack, { gap: histogram ? "none" : "xs", align: "end", justify: histogram ? void 0 : "center", className: "w-full flex-1 min-h-0", children: series.map((s, sIdx) => {
                       const value = valueAt(s, label);
                       const barHeight = value / maxValue * 100;
                       const color = seriesColor(s, sIdx);
@@ -21891,6 +21957,8 @@ var init_Chart = __esm({
                           ),
                           style: {
                             height: `${barHeight}%`,
+                            // Cap width so a lone category doesn't paint the whole plot as one solid block; narrow columns are unaffected (flex-1 binds first).
+                            ...!histogram && { maxWidth: 72 },
                             backgroundColor: color
                           },
                           onClick: () => onPointClick?.(
@@ -21925,8 +21993,9 @@ var init_Chart = __esm({
                 align: "center",
                 flex: true,
                 className: "min-w-0",
+                style: { height: "100%" },
                 children: [
-                  /* @__PURE__ */ jsx(VStack, { gap: "none", className: "w-full", style: { height: "100%" }, justify: "end", children: series.map((s, sIdx) => {
+                  /* @__PURE__ */ jsx(VStack, { gap: "none", className: "w-full flex-1 min-h-0", justify: "end", children: series.map((s, sIdx) => {
                     const value = valueAt(s, label);
                     const ratio = stack === "normalize" ? total === 0 ? 0 : value / total * 100 : value / maxValue * 100;
                     const color = seriesColor(s, sIdx);
@@ -21971,6 +22040,7 @@ var init_Chart = __esm({
       const innerRadius = donut ? radius * 0.6 : 0;
       const center = size / 2;
       const segments = useMemo(() => {
+        if (!Number.isFinite(total) || total <= 0) return [];
         let currentAngle = -Math.PI / 2;
         return data.map((point, idx) => {
           const angle = point.value / total * 2 * Math.PI;
@@ -21982,13 +22052,25 @@ var init_Chart = __esm({
           const y1 = center + radius * Math.sin(startAngle);
           const x2 = center + radius * Math.cos(endAngle);
           const y2 = center + radius * Math.sin(endAngle);
+          const fullCircle = angle >= 2 * Math.PI - 1e-9;
+          const midAngle = startAngle + angle / 2;
+          const xm = center + radius * Math.cos(midAngle);
+          const ym = center + radius * Math.sin(midAngle);
           let d;
           if (innerRadius > 0) {
             const ix1 = center + innerRadius * Math.cos(startAngle);
             const iy1 = center + innerRadius * Math.sin(startAngle);
             const ix2 = center + innerRadius * Math.cos(endAngle);
             const iy2 = center + innerRadius * Math.sin(endAngle);
-            d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
+            if (fullCircle) {
+              const ixm = center + innerRadius * Math.cos(midAngle);
+              const iym = center + innerRadius * Math.sin(midAngle);
+              d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${radius} ${radius} 0 1 1 ${xm} ${ym} A ${radius} ${radius} 0 1 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerRadius} ${innerRadius} 0 1 0 ${ixm} ${iym} A ${innerRadius} ${innerRadius} 0 1 0 ${ix1} ${iy1} Z`;
+            } else {
+              d = `M ${ix1} ${iy1} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
+            }
+          } else if (fullCircle) {
+            d = `M ${center} ${center} L ${x1} ${y1} A ${radius} ${radius} 0 1 1 ${xm} ${ym} A ${radius} ${radius} 0 1 1 ${x2} ${y2} Z`;
           } else {
             d = `M ${center} ${center} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
           }
@@ -25015,10 +25097,10 @@ function DataGrid({
                         ] }),
                         badgeFields.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap", children: badgeFields.map((field) => {
                           const val = getNestedValue(itemData, field.name);
-                          if (val === void 0 || val === null) return null;
+                          if (val === void 0 || val === null || val === "") return null;
                           return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
                             field.icon && renderIconInput(field.icon, { size: "xs" }),
-                            /* @__PURE__ */ jsx(Badge, { variant: resolveBadgeVariant(field, String(val)), children: String(val) })
+                            /* @__PURE__ */ jsx(Badge, { variant: resolveBadgeVariant(field, String(val)), children: formatValue(val, field.format) })
                           ] }, field.name);
                         }) })
                       ] }),
@@ -32508,6 +32590,11 @@ var init_VoteStack = __esm({
         {
           className: cn(
             "inline-flex items-center justify-center",
+            // Shrink-wrap in stretch contexts (slot/sidecar wrappers are
+            // flex-column with stretch alignment): without this the root spans
+            // the full wrapper width and the count row's `w-full` turns the
+            // compact pill into a page-wide band.
+            "w-fit",
             variant === "vertical" ? "flex-col" : "flex-row",
             "rounded-sm",
             "border-[length:var(--border-width)] border-border",
@@ -36004,7 +36091,7 @@ var init_Sidebar = __esm({
             isActive ? [
               "bg-primary text-primary-foreground",
               "font-medium shadow-sm",
-              "border-primary translate-x-1 -translate-y-0.5"
+              "border-primary translate-x-1 rtl:-translate-x-1 -translate-y-0.5"
             ].join(" ") : [
               "text-foreground",
               "hover:bg-muted hover:border-border",
@@ -36014,10 +36101,10 @@ var init_Sidebar = __esm({
           title: collapsed ? item.label : void 0,
           children: [
             item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: cn("min-w-[20px] flex-shrink-0", isActive && "text-primary-foreground") }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: cn("min-w-[20px] flex-shrink-0", isActive && "text-primary-foreground") })),
-            !collapsed && /* @__PURE__ */ jsx(Typography, { variant: "body", color: isActive ? "inherit" : "primary", className: "font-medium truncate flex-1 text-left", children: item.label }),
+            !collapsed && /* @__PURE__ */ jsx(Typography, { variant: "body", color: isActive ? "inherit" : "primary", className: "font-medium truncate flex-1 text-start", children: item.label }),
             !collapsed && item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "danger", size: "sm", children: item.badge }),
             collapsed && /* @__PURE__ */ jsx(Box, { className: cn(
-              "absolute left-full ml-2 px-2 py-1 text-xs opacity-0 group-hover:opacity-100",
+              "absolute start-full ms-2 px-2 py-1 text-xs opacity-0 group-hover:opacity-100",
               "pointer-events-none whitespace-nowrap z-50 transition-opacity",
               "bg-primary text-primary-foreground",
               "border-[length:var(--border-width-thin)] border-border",
@@ -36072,7 +36159,7 @@ var init_Sidebar = __esm({
           as: "aside",
           className: cn(
             "flex flex-col h-full",
-            "bg-card border-r border-border",
+            "bg-card border-e border-border",
             "transition-all duration-300 ease-in-out",
             collapsed ? "w-20" : "w-64",
             className
@@ -37233,7 +37320,7 @@ function resolveColor3(color, el) {
 function truncateLabel(label) {
   return label.length > MAX_LABEL_CHARS ? label.slice(0, MAX_LABEL_CHARS - 1) + "\u2026" : label;
 }
-var GROUP_COLORS2, GROUP_GRAVITY, UNGROUPED_GRAVITY, labelMeasureCtx, MAX_LABEL_CHARS, GraphCanvas;
+var GROUP_COLORS2, GROUP_GRAVITY, UNGROUPED_GRAVITY, labelMeasureCtx, MAX_LABEL_CHARS, NO_NODES, NO_EDGES, NO_SIM, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -37257,11 +37344,14 @@ var init_GraphCanvas = __esm({
     UNGROUPED_GRAVITY = 0.02;
     labelMeasureCtx = null;
     MAX_LABEL_CHARS = 22;
+    NO_NODES = [];
+    NO_EDGES = [];
+    NO_SIM = [];
     GraphCanvas = ({
       title,
-      nodes: propNodes = [],
-      edges: propEdges = [],
-      similarity: propSimilarity = [],
+      nodes: propNodes = NO_NODES,
+      edges: propEdges = NO_EDGES,
+      similarity: propSimilarity = NO_SIM,
       height = 400,
       showLabels = true,
       interactive = true,
@@ -37311,6 +37401,7 @@ var init_GraphCanvas = __esm({
       const interactionRef = useRef({
         mode: "none",
         dragNodeId: null,
+        pressedNodeId: null,
         startMouse: { x: 0, y: 0 },
         startOffset: { x: 0, y: 0 },
         downPos: { x: 0, y: 0 }
@@ -37358,6 +37449,11 @@ var init_GraphCanvas = __esm({
         () => [...new Set(propNodes.map((n) => n.group).filter(Boolean))],
         [propNodes]
       );
+      const nodesKey = useMemo(() => propNodes.map((n) => n.id).join("
"), [propNodes]);
+      const edgesKey = useMemo(
+        () => propEdges.map((e) => `${e.source}
${e.target}`).join("
"),
+        [propEdges]
+      );
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas || propNodes.length === 0) return;
@@ -37538,7 +37634,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, propSimilarity, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
+      }, [nodesKey, edgesKey, propSimilarity, layout, repulsion, linkDistance, nodeSpacing, showLabels]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -37668,6 +37764,7 @@ var init_GraphCanvas = __esm({
       const cancelSinglePointer = useCallback(() => {
         interactionRef.current.mode = "none";
         interactionRef.current.dragNodeId = null;
+        interactionRef.current.pressedNodeId = null;
       }, []);
       const handlePointerDown = useCallback(
         (e) => {
@@ -37678,6 +37775,7 @@ var init_GraphCanvas = __esm({
           state.downPos = { x: e.clientX, y: e.clientY };
           state.startMouse = { x: e.clientX, y: e.clientY };
           state.startOffset = { ...offset };
+          state.pressedNodeId = node?.id ?? null;
           if (draggable && node) {
             state.mode = "dragging";
             state.dragNodeId = node.id;
@@ -37729,7 +37827,8 @@ var init_GraphCanvas = __esm({
           if (moved < 4) {
             const coords = toCoords(e);
             if (!coords) return;
-            const node = nodeAt(coords.graphX, coords.graphY);
+            const node = (state.pressedNodeId ? nodesRef.current.find((n) => n.id === state.pressedNodeId) : void 0) ?? nodeAt(coords.graphX, coords.graphY);
+            state.pressedNodeId = null;
             if (node) {
               if (node.badge && node.badge > 1 && onBadgeClick) {
                 const r2 = (node.size || 8) + (selectedNodeId === node.id ? 4 : 0);
@@ -37749,6 +37848,7 @@ var init_GraphCanvas = __esm({
       );
       const handlePointerLeave = useCallback(() => {
         setHoveredNode(null);
+        interactionRef.current.pressedNodeId = null;
       }, []);
       const gestureHandlers = useCanvasGestures({
         canvasRef,
@@ -40700,8 +40800,17 @@ var init_MediaGallery = __esm({
       const eventBus = useEventBus();
       const { t } = useTranslate();
       const [lightboxItem, setLightboxItem] = useState(null);
+      const [failedIds, setFailedIds] = useState(/* @__PURE__ */ new Set());
       const closeLightbox = useCallback(() => setLightboxItem(null), []);
       useEventListener("UI:LIGHTBOX_CLOSE", closeLightbox);
+      const handleImageError = useCallback((id) => {
+        setFailedIds((prev) => {
+          if (prev.has(id)) return prev;
+          const next = new Set(prev);
+          next.add(id);
+          return next;
+        });
+      }, []);
       const handleItemClick = useCallback(
         (item) => {
           if (selectable) {
@@ -40717,7 +40826,7 @@ var init_MediaGallery = __esm({
       );
       const entityData = Array.isArray(entity) ? entity : [];
       const items = React90__default.useMemo(() => {
-        if (propItems) return propItems;
+        if (propItems && propItems.length > 0) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
           return {
@@ -40800,13 +40909,14 @@ var init_MediaGallery = __esm({
                     ),
                     onClick: () => handleItemClick(item),
                     children: [
-                      /* @__PURE__ */ jsx(
+                      failedIds.has(item.id) ? /* @__PURE__ */ jsx(Box, { className: "w-full h-full flex items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { icon: Image$1, size: "lg" }) }) : /* @__PURE__ */ jsx(
                         "img",
                         {
                           src: item.thumbnail || item.src,
                           alt: item.alt || item.caption || "",
                           className: "w-full h-full object-cover",
-                          loading: "lazy"
+                          loading: "lazy",
+                          onError: () => handleImageError(item.id)
                         }
                       ),
                       /* @__PURE__ */ jsx(
@@ -44313,6 +44423,11 @@ var init_TeamOrganism = __esm({
     TeamOrganism.displayName = "TeamOrganism";
   }
 });
+function formatDate4(value) {
+  const d = new Date(value);
+  if (isNaN(d.getTime())) return value;
+  return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
 var lookStyles10, STATUS_STYLES2, Timeline;
 var init_Timeline = __esm({
   "components/core/organisms/Timeline.tsx"() {
@@ -44440,7 +44555,7 @@ var init_Timeline = __esm({
             /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: cn("flex-1 min-w-0", !isLast && "pb-6"), children: [
               /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "start", wrap: true, children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", children: item.title }),
-                item.date && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "flex-shrink-0", children: item.date })
+                item.date && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "flex-shrink-0", children: formatDate4(item.date) })
               ] }),
               item.description && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: item.description }),
               item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", wrap: true, children: item.tags.map((tag, tagIdx) => /* @__PURE__ */ jsx(Badge, { variant: "default", children: tag }, tagIdx)) }),
@@ -45652,7 +45767,7 @@ function substituteTraitRefsDeep(value, pathKey) {
   }
   return value;
 }
-function renderPatternProps(props, onDismiss) {
+function renderPatternProps(props, onDismiss, propsSchema) {
   const rendered = {};
   for (const [key, value] of Object.entries(props)) {
     if (key === "children") {
@@ -45670,9 +45785,10 @@ function renderPatternProps(props, onDismiss) {
       };
       rendered[key] = /* @__PURE__ */ jsx(SlotContentRenderer, { content: childContent, onDismiss });
     } else if (Array.isArray(value)) {
+      const isDataArray = propsSchema?.[key]?.items?.types?.includes("object") ?? false;
       rendered[key] = value.map((item, i) => {
         const el = item;
-        if (isPatternConfig(el)) {
+        if (!isDataArray && isPatternConfig(el)) {
           const nestedProps = {};
           for (const [k, v] of Object.entries(el)) {
             if (k !== "type") nestedProps[k] = v;
@@ -45760,14 +45876,15 @@ function SlotContentRenderer({
         );
       }
     }
-    const renderedProps = renderPatternProps(restProps, onDismiss);
     const patternDef = getPatternDefinition(content.pattern);
     const propsSchema = patternDef?.propsSchema;
+    const renderedProps = renderPatternProps(restProps, onDismiss, propsSchema);
     if (propsSchema) {
       for (const [propKey, propValue] of Object.entries(renderedProps)) {
         if (typeof propValue !== "string") continue;
         const propDef = propsSchema[propKey];
         if (!propDef || propDef.kind !== "callback") continue;
+        if (propValue === "") continue;
         renderedProps[propKey] = wrapCallbackForEvent(
           `UI:${propValue}`,
           propDef.callbackArgs,
@@ -49562,6 +49679,7 @@ function useSharedEntityStore() {
   }
   return storeRef.current;
 }
+createContext(null);
 function runTickFrame(entityId, orderedWriters, store) {
   let scratch = store.getSnapshot(entityId);
   for (const writer of orderedWriters) {
@@ -49659,6 +49777,11 @@ var SYNC_TICK_OPERATORS = /* @__PURE__ */ new Set([
   "do",
   "when"
 ]);
+var REACTIVE_REPAINT_PATTERN_TYPES = /* @__PURE__ */ new Set([
+  "canvas",
+  "game-hud",
+  "game-shell"
+]);
 var LIFECYCLE_EVENTS = ["INIT", "LOAD", "$MOUNT"];
 function toTraitDefinition(binding) {
   return {
@@ -49911,6 +50034,8 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
   }, [traitStates]);
   const traitSnapshotDataRef = useRef(/* @__PURE__ */ new Map());
   const traitFieldStatesRef = useRef(/* @__PURE__ */ new Map());
+  const lastCanvasRenderUiRef = useRef(/* @__PURE__ */ new Map());
+  const executeTransitionEffectsRef = useRef(null);
   useEffect(() => {
     const mgr = managerRef.current;
     const bindings = traitBindingsRef.current;
@@ -49951,11 +50076,9 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     bindTraitStateGetter((traitName) => {
       const allStates = newManager.getAllStates();
       if (allStates instanceof Map) {
-        const val = allStates.get(traitName);
-        return typeof val === "string" ? val : void 0;
+        return allStates.get(traitName)?.currentState;
       }
-      const state = newManager.getState(traitName);
-      return typeof state === "string" ? state : void 0;
+      return newManager.getState(traitName)?.currentState;
     });
     const snapshotUnregs = [];
     for (const binding of traitBindingsRef.current) {
@@ -50040,6 +50163,15 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           const existing = pendingSlots.get(slot) || [];
           existing.push({ pattern, props: props || {} });
           pendingSlots.set(slot, existing);
+          const patternType = pattern?.type;
+          if (patternType !== void 0 && REACTIVE_REPAINT_PATTERN_TYPES.has(patternType)) {
+            const rawForSlot = effects.filter(
+              (e) => Array.isArray(e) && (e[0] === "render-ui" || e[0] === "render") && e[1] === slot
+            );
+            if (rawForSlot.length > 0) {
+              lastCanvasRenderUiRef.current.set(traitName, rawForSlot);
+            }
+          }
         },
         clearSlot: (slot) => {
           pendingSlots.set(slot, []);
@@ -50110,11 +50242,15 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         notify: clientHandlers.notify
       };
     }
+    const sharedWrites = [];
     const baseSet = handlers.set;
     handlers = {
       ...handlers,
       set: async (targetId, field, value) => {
         if (baseSet) await baseSet(targetId, field, value);
+        if (sharedKey !== void 0) {
+          sharedWrites.push({ field, value });
+        }
         log11.debug("set:write", {
           traitName,
           field,
@@ -50190,7 +50326,10 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         });
       }
       if (sharedKey !== void 0) {
-        sharedEntityStore.commit(sharedKey, liveEntity);
+        sharedEntityStore.commit(
+          sharedKey,
+          mergeEntityFrame(sharedEntityStore.getSnapshot(sharedKey), sharedWrites)
+        );
       }
       log11.debug("effects:executed", () => ({
         traitName,
@@ -50216,6 +50355,38 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
           entity: binding.linkedEntity
         });
       }
+      if (pendingSlots.size === 0 && effectsCallOp(effects, SHARED_ENTITY_WRITE_OPS)) {
+        const stashed = lastCanvasRenderUiRef.current.get(traitName);
+        if (stashed !== void 0 && stashed.length > 0) {
+          await executor.executeAll(stashed);
+          for (const [slot, patterns] of pendingSlots) {
+            flushSlot(traitName, slot, patterns, {
+              event: flushEvent,
+              state: previousState,
+              entity: binding.linkedEntity
+            });
+          }
+        }
+        if (sharedKey !== void 0 && executeTransitionEffectsRef.current !== null) {
+          for (const sibling of traitBindingsRef.current) {
+            const siblingName = sibling.trait.name;
+            if (siblingName === traitName) continue;
+            if (sharedKeyByTraitNameRef.current.get(siblingName) !== sharedKey) continue;
+            const siblingStash = lastCanvasRenderUiRef.current.get(siblingName);
+            if (siblingStash === void 0 || siblingStash.length === 0) continue;
+            const siblingState = traitStatesRef.current.get(siblingName)?.currentState ?? "";
+            await executeTransitionEffectsRef.current({
+              binding: sibling,
+              effects: siblingStash,
+              previousState: siblingState,
+              newState: siblingState,
+              flushEvent: `${flushEvent}:repaint`,
+              syncOnly,
+              log: log11
+            });
+          }
+        }
+      }
     } catch (error) {
       log11.error("effects:error", {
         traitName,
@@ -50227,6 +50398,9 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     }
     return emittedDuringExec;
   }, [eventBus, flushSlot, sharedEntityStore]);
+  useEffect(() => {
+    executeTransitionEffectsRef.current = executeTransitionEffects;
+  }, [executeTransitionEffects]);
   const runTickEffects = useCallback((tick, binding) => {
     const traitName = binding.trait.name;
     const currentState = traitStatesRef.current.get(traitName)?.currentState ?? "";
@@ -50289,6 +50463,24 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
             ({ binding, tick }) => createSharedEntityWriter(binding, tick, traitStatesRef, emitFromSharedWriter)
           );
           runTickFrame(group.storeKey, writers, sharedEntityStore);
+          const repaint = executeTransitionEffectsRef.current;
+          if (repaint !== null) {
+            for (const renderBinding of group.renderBindings) {
+              const renderTraitName = renderBinding.trait.name;
+              const stash = lastCanvasRenderUiRef.current.get(renderTraitName);
+              if (stash === void 0 || stash.length === 0) continue;
+              const renderState = traitStatesRef.current.get(renderTraitName)?.currentState ?? "";
+              void repaint({
+                binding: renderBinding,
+                effects: stash,
+                previousState: renderState,
+                newState: renderState,
+                flushEvent: "tick:repaint",
+                syncOnly: true,
+                log: sharedEntityLog
+              });
+            }
+          }
         };
         if (interval === "frame") {
           scheduler.add(0, onDue);
@@ -50338,6 +50530,13 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         entityByTrait[name] = fields;
       }
     }
+    for (const binding of bindings) {
+      const name = binding.trait.name;
+      const sharedKey = sharedKeyByTraitNameRef.current.get(name);
+      if (sharedKey !== void 0) {
+        entityByTrait[name] = { ...sharedEntityStore.getSnapshot(sharedKey) };
+      }
+    }
     const results = currentManager.sendEvent(
       normalizedEvent,
       payload,
@@ -50491,7 +50690,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
       }
       await onEventProcessed(normalizedEvent, payload, dispatchedOrbitals);
     }
-  }, [entities, eventBus]);
+  }, [entities, eventBus, sharedEntityStore]);
   const drainEventQueue = useCallback(async () => {
     if (processingRef.current) return;
     processingRef.current = true;
@@ -50561,6 +50760,24 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         });
       }
     }
+    const bareCascadeKeys = /* @__PURE__ */ new Set();
+    for (const binding of traitBindings) {
+      for (const transition of binding.trait.transitions) {
+        const eventKey = transition.event;
+        if (LIFECYCLE_EVENTS.includes(eventKey)) continue;
+        if (bareCascadeKeys.has(eventKey)) continue;
+        bareCascadeKeys.add(eventKey);
+        const bareKey = `UI:${eventKey}`;
+        const unsub = eventBus.on(bareKey, (event) => {
+          crossTraitLog.debug("bare-cascade:fire", { bareKey, eventKey });
+          enqueueAndDrain(eventKey, event.payload);
+        });
+        unsubscribes.push(() => {
+          crossTraitLog.debug("bare-cascade:unsubscribe", { bareKey, eventKey });
+          unsub();
+        });
+      }
+    }
     for (const binding of traitBindings) {
       const ownOrbital = orbitalsByTrait?.[binding.trait.name];
       const listens = binding.trait.listens ?? [];
@@ -50644,9 +50861,16 @@ function normalizeChild(child) {
     props: { ...rest, ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {} }
   };
 }
-function applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits) {
+function applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraits) {
   for (const eff of effects) {
     if (eff.type === "render-ui" && eff.slot && eff.pattern) {
+      if (eff.traitName && activeTraits && !activeTraits.has(eff.traitName)) {
+        xOrbitalLog.debug("slot:off-page-trait-skipped", {
+          sourceTrait: eff.traitName,
+          slot: eff.slot
+        });
+        continue;
+      }
       const patternRecord = eff.pattern;
       const { type: patternType, children, ...inlineProps } = patternRecord;
       const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
@@ -50687,8 +50911,38 @@ function applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits) {
     }
   }
 }
-function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits }) {
+function collectServerActiveTraits(ir, allTraits, mountedTraitNames) {
+  if (!ir?.pages || ir.pages.size <= 1) return void 0;
+  const pageBound = /* @__PURE__ */ new Set();
+  for (const page of ir.pages.values()) {
+    const queue = page.traits.map((b) => b.trait.name).filter((n) => !!n);
+    for (const name of queue) {
+      if (pageBound.has(name)) continue;
+      pageBound.add(name);
+      const rt = allTraits.get(name);
+      if (!rt) continue;
+      queue.push(...collectTraitRefsFromResolvedTrait(rt));
+    }
+  }
+  const active = new Set(mountedTraitNames);
+  for (const name of allTraits.keys()) {
+    if (!pageBound.has(name)) active.add(name);
+  }
+  return active;
+}
+function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, serverActiveTraits }) {
   const bridge = useServerBridge();
+  const activeTraitNames = useMemo(
+    () => new Set(traits2.map((b) => b.trait.name).filter((n) => !!n)),
+    [traits2]
+  );
+  const withActiveTraits = useCallback(
+    (payload) => {
+      if (!serverActiveTraits || serverActiveTraits.size === 0) return payload;
+      return { ...payload ?? {}, _activeTraits: Array.from(serverActiveTraits) };
+    },
+    [serverActiveTraits]
+  );
   const uiSlots = useUISlots();
   const onEventProcessed = useCallback(async (event, payload, dispatchedOrbitals) => {
     if (!bridge.connected || !orbitalNames?.length) return;
@@ -50700,11 +50954,11 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
       dispatchedOrbitalsSize: dispatchedOrbitals?.size ?? 0
     }));
     for (const name of targets) {
-      const { effects, meta } = await bridge.sendEvent(name, event, payload);
+      const { effects, meta } = await bridge.sendEvent(name, event, withActiveTraits(payload));
       recordServerResponse(name, event, meta);
-      applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits);
+      applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames);
     }
-  }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, embeddedTraits]);
+  }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits]);
   const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits };
   const { sendEvent } = useTraitStateMachine(traits2, uiSlots, opts);
   const initSentRef = useRef(false);
@@ -50741,7 +50995,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
     initSentRef.current = true;
     (async () => {
       for (const name of orbitalNames) {
-        const { effects, meta } = await bridge.sendEvent(name, "INIT", {});
+        const { effects, meta } = await bridge.sendEvent(name, "INIT", withActiveTraits({}));
         recordServerResponse(name, "INIT", meta);
         const effectTraces = [
           { type: "fetch", args: [], status: "executed" },
@@ -50759,10 +51013,10 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
           effects: effectTraces,
           timestamp: Date.now()
         });
-        applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits);
+        applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames);
       }
     })();
-  }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, embeddedTraits]);
+  }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits]);
   return null;
 }
 function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavigate, onLocalFallback, persistence }) {
@@ -50849,6 +51103,14 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
     }
     return Array.from(set);
   }, [allPageTraits, orbitalsByTrait]);
+  const serverActiveTraits = useMemo(
+    () => collectServerActiveTraits(
+      ir,
+      allTraits,
+      new Set(allPageTraits.map((b) => b.trait.name).filter((n) => !!n))
+    ),
+    [ir, allTraits, allPageTraits]
+  );
   useEffect(() => {
     const traitNames = allPageTraits.map((b) => b.trait.name);
     const orbitalsByTraitForPage = {};
@@ -50858,7 +51120,7 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
     }
     xOrbitalLog.info("SchemaRunner:mount", {
       pageName,
-      traitNames,
+      traitNames: traitNames.join(","),
       orbitalsByTraitForPage,
       pageOrbitalNames: pageOrbitalNames.join(",")
     });
@@ -50903,6 +51165,7 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
             traitConfigsByName,
             orbitalsByTrait,
             embeddedTraits,
+            serverActiveTraits,
             onNavigate,
             onLocalFallback,
             persistence