@almadar/ui 5.121.3 → 5.121.4

package/dist/components/index.cjs

@@ -1088,9 +1088,9 @@ function getGlobalEventBus() {
 function useEventBus() {
   const context = React73.useContext(providers.EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
-  const scope = providers.useTraitScope();
+  const chain = providers.useTraitScopeChain();
   return React73.useMemo(() => {
-    if (!scope) {
+    if (chain.length === 0) {
       return {
         ...baseBus,
         emit: (type, payload, source) => {
@@ -1106,22 +1106,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();
@@ -1398,13 +1407,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 = React73__namespace.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
@@ -1881,7 +1890,7 @@ var init_Input = __esm({
             eventBus.emit(`UI:${action}`, { value: e.currentTarget.value });
           }
         };
-        const wrapField = (field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+        const wrapField = (field, fullWidth = true) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fullWidth ? "w-full" : "w-fit", children: [
           label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-foreground mb-1", children: label }),
           field,
           (helperText || error) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-xs", error ? "text-error" : "text-muted-foreground"), children: error ?? helperText })
@@ -1941,7 +1950,8 @@ var init_Input = __esm({
                 ),
                 ...props
               }
-            )
+            ),
+            false
           );
         }
         return wrapField(
@@ -4110,6 +4120,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)" },
@@ -4801,6 +4812,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);
+  }
+}
 exports.AnimatedCounter = void 0;
 var init_AnimatedCounter = __esm({
   "components/marketing/atoms/AnimatedCounter.tsx"() {
@@ -4812,6 +4835,7 @@ var init_AnimatedCounter = __esm({
       duration = 600,
       prefix,
       suffix,
+      format,
       className
     }) => {
       const numericRaw = typeof rawValue === "number" ? rawValue : Number.parseFloat(String(rawValue ?? ""));
@@ -4827,6 +4851,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) {
@@ -4848,7 +4876,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__ */ jsxRuntime.jsxs(exports.Typography, { variant: "h3", className: cn("tabular-nums", className), children: [
         prefix,
         formattedValue,
@@ -6061,6 +6089,15 @@ var init_Modal = __esm({
       const [dragY, setDragY] = React73.useState(0);
       const dragStartY = React73.useRef(0);
       const isDragging = React73.useRef(false);
+      const [closing, setClosing] = React73.useState(false);
+      const wasOpenRef = React73.useRef(isOpen);
+      React73.useEffect(() => {
+        if (wasOpenRef.current && !isOpen) setClosing(true);
+        wasOpenRef.current = isOpen;
+      }, [isOpen]);
+      const handleAnimEnd = (e) => {
+        if (closing && e.target === e.currentTarget) setClosing(false);
+      };
       React73.useEffect(() => {
         if (isOpen) {
           previousActiveElement.current = document.activeElement;
@@ -6094,7 +6131,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();
@@ -6111,7 +6152,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,
@@ -6139,8 +6181,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",
                   lookStyles2[look],
-                  className
+                  className,
+                  dialogAnim
                 ),
+                onAnimationEnd: handleAnimEnd,
                 style: dragY > 0 ? {
                   transform: `translateY(${dragY}px)`,
                   transition: isDragging.current ? "none" : "transform 200ms ease-out"
@@ -9777,7 +9821,8 @@ var init_LoadingState = __esm({
     exports.LoadingState = ({
       title,
       message,
-      className
+      className,
+      fullPage = false
     }) => {
       const { t } = hooks.useTranslate();
       const displayMessage = message ?? t("common.loading");
@@ -9786,7 +9831,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: [
@@ -12988,7 +13034,7 @@ var init_BookCoverPage = __esm({
                 size: "lg",
                 action: "BOOK_START",
                 className: "mt-8",
-                children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", children: t("book.startReading") })
+                children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "inherit", children: t("book.startReading") })
               }
             )
           ]
@@ -15771,6 +15817,10 @@ function Canvas2D({
       window.removeEventListener("keyup", onUp);
     };
   }, [keyMap, keyUpMap, eventBus]);
+  React73.useEffect(() => {
+    if (!keyMap && !keyUpMap) return;
+    canvasRef.current?.focus();
+  }, [keyMap, keyUpMap]);
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("flex items-center justify-center w-full h-full bg-[var(--color-card)] rounded-container", className), children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Stack, { direction: "vertical", gap: "md", align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "alert-circle", size: "xl" }),
@@ -15819,7 +15869,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
@@ -16885,8 +16935,9 @@ var init_Chart = __esm({
                   align: "center",
                   flex: true,
                   className: "min-w-0",
+                  style: { height: "100%" },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: histogram ? "none" : "xs", align: "end", className: "w-full", style: { height: "100%" }, children: series.map((s, sIdx) => {
+                    /* @__PURE__ */ jsxRuntime.jsx(exports.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);
@@ -16899,6 +16950,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?.(
@@ -16933,8 +16986,9 @@ var init_Chart = __esm({
                 align: "center",
                 flex: true,
                 className: "min-w-0",
+                style: { height: "100%" },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.VStack, { gap: "none", className: "w-full", style: { height: "100%" }, justify: "end", children: series.map((s, sIdx) => {
+                  /* @__PURE__ */ jsxRuntime.jsx(exports.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);
@@ -16979,6 +17033,7 @@ var init_Chart = __esm({
       const innerRadius = donut ? radius * 0.6 : 0;
       const center = size / 2;
       const segments = React73.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;
@@ -16990,13 +17045,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`;
           }
@@ -20396,10 +20463,10 @@ function DataGrid({
                         ] }),
                         badgeFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.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__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
                             field.icon && renderIconInput(field.icon, { size: "xs" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: resolveBadgeVariant(field, String(val)), children: String(val) })
+                            /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: resolveBadgeVariant(field, String(val)), children: formatValue(val, field.format) })
                           ] }, field.name);
                         }) })
                       ] }),
@@ -25790,7 +25857,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 = React73__namespace.useCallback(
     (option) => {
@@ -31534,6 +31601,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",
@@ -35439,7 +35511,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",
@@ -35449,10 +35521,10 @@ var init_Sidebar = __esm({
           title: collapsed ? item.label : void 0,
           children: [
             item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, size: "sm", className: cn("min-w-[20px] flex-shrink-0", isActive && "text-primary-foreground") }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon: item.icon, size: "sm", className: cn("min-w-[20px] flex-shrink-0", isActive && "text-primary-foreground") })),
-            !collapsed && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: isActive ? "inherit" : "primary", className: "font-medium truncate flex-1 text-left", children: item.label }),
+            !collapsed && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: isActive ? "inherit" : "primary", className: "font-medium truncate flex-1 text-start", children: item.label }),
             !collapsed && item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "danger", size: "sm", children: item.badge }),
             collapsed && /* @__PURE__ */ jsxRuntime.jsx(exports.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",
@@ -35507,7 +35579,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
@@ -36668,7 +36740,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; exports.GraphCanvas = void 0;
+var GROUP_COLORS2, GROUP_GRAVITY, UNGROUPED_GRAVITY, labelMeasureCtx, MAX_LABEL_CHARS, NO_NODES, NO_EDGES, NO_SIM; exports.GraphCanvas = void 0;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
     "use client";
@@ -36692,11 +36764,14 @@ var init_GraphCanvas = __esm({
     UNGROUPED_GRAVITY = 0.02;
     labelMeasureCtx = null;
     MAX_LABEL_CHARS = 22;
+    NO_NODES = [];
+    NO_EDGES = [];
+    NO_SIM = [];
     exports.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,
@@ -36746,6 +36821,7 @@ var init_GraphCanvas = __esm({
       const interactionRef = React73.useRef({
         mode: "none",
         dragNodeId: null,
+        pressedNodeId: null,
         startMouse: { x: 0, y: 0 },
         startOffset: { x: 0, y: 0 },
         downPos: { x: 0, y: 0 }
@@ -36793,6 +36869,11 @@ var init_GraphCanvas = __esm({
         () => [...new Set(propNodes.map((n) => n.group).filter(Boolean))],
         [propNodes]
       );
+      const nodesKey = React73.useMemo(() => propNodes.map((n) => n.id).join("
"), [propNodes]);
+      const edgesKey = React73.useMemo(
+        () => propEdges.map((e) => `${e.source}
${e.target}`).join("
"),
+        [propEdges]
+      );
       React73.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas || propNodes.length === 0) return;
@@ -36973,7 +37054,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]);
       React73.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -37103,6 +37184,7 @@ var init_GraphCanvas = __esm({
       const cancelSinglePointer = React73.useCallback(() => {
         interactionRef.current.mode = "none";
         interactionRef.current.dragNodeId = null;
+        interactionRef.current.pressedNodeId = null;
       }, []);
       const handlePointerDown = React73.useCallback(
         (e) => {
@@ -37113,6 +37195,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;
@@ -37164,7 +37247,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 r = (node.size || 8) + (selectedNodeId === node.id ? 4 : 0);
@@ -37184,6 +37268,7 @@ var init_GraphCanvas = __esm({
       );
       const handlePointerLeave = React73.useCallback(() => {
         setHoveredNode(null);
+        interactionRef.current.pressedNodeId = null;
       }, []);
       const gestureHandlers = useCanvasGestures({
         canvasRef,
@@ -40352,8 +40437,17 @@ var init_MediaGallery = __esm({
       const eventBus = useEventBus();
       const { t } = hooks.useTranslate();
       const [lightboxItem, setLightboxItem] = React73.useState(null);
+      const [failedIds, setFailedIds] = React73.useState(/* @__PURE__ */ new Set());
       const closeLightbox = React73.useCallback(() => setLightboxItem(null), []);
       useEventListener("UI:LIGHTBOX_CLOSE", closeLightbox);
+      const handleImageError = React73.useCallback((id) => {
+        setFailedIds((prev) => {
+          if (prev.has(id)) return prev;
+          const next = new Set(prev);
+          next.add(id);
+          return next;
+        });
+      }, []);
       const handleItemClick = React73.useCallback(
         (item) => {
           if (selectable) {
@@ -40369,7 +40463,7 @@ var init_MediaGallery = __esm({
       );
       const entityData = Array.isArray(entity) ? entity : [];
       const items = React73__namespace.default.useMemo(() => {
-        if (propItems) return propItems;
+        if (propItems && propItems.length > 0) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
           return {
@@ -40452,13 +40546,14 @@ var init_MediaGallery = __esm({
                     ),
                     onClick: () => handleItemClick(item),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
+                      failedIds.has(item.id) ? /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-full h-full flex items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon: LucideIcons2.Image, size: "lg" }) }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -43946,6 +44041,11 @@ var init_TeamOrganism = __esm({
     exports.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; exports.Timeline = void 0;
 var init_Timeline = __esm({
   "components/core/organisms/Timeline.tsx"() {
@@ -44073,7 +44173,7 @@ var init_Timeline = __esm({
             /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "xs", className: cn("flex-1 min-w-0", !isLast && "pb-6"), children: [
               /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { justify: "between", align: "start", wrap: true, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", weight: "semibold", children: item.title }),
-                item.date && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", className: "flex-shrink-0", children: item.date })
+                item.date && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", className: "flex-shrink-0", children: formatDate4(item.date) })
               ] }),
               item.description && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "secondary", children: item.description }),
               item.tags && item.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", wrap: true, children: item.tags.map((tag, tagIdx) => /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", children: tag }, tagIdx)) }),
@@ -45285,7 +45385,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") {
@@ -45303,9 +45403,10 @@ function renderPatternProps(props, onDismiss) {
       };
       rendered[key] = /* @__PURE__ */ jsxRuntime.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;
@@ -45393,14 +45494,15 @@ function SlotContentRenderer({
         );
       }
     }
-    const renderedProps = renderPatternProps(restProps, onDismiss);
     const patternDef = patterns.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] = ui.wrapCallbackForEvent(
           `UI:${propValue}`,
           propDef.callbackArgs,
@@ -47189,6 +47291,16 @@ function useSharedEntityStore() {
   }
   return storeRef.current;
 }
+var SharedEntityStoreContext = React73.createContext(null);
+function useSharedEntityStoreContext() {
+  const store = React73.useContext(SharedEntityStoreContext);
+  if (!store) {
+    throw new Error(
+      "useSharedEntityStoreContext: no SharedEntityStoreContext.Provider found in the component tree"
+    );
+  }
+  return store;
+}
 function useSharedEntitySnapshot(store, entityId) {
   return React73.useSyncExternalStore(
     (onStoreChange) => store.subscribe(entityId, onStoreChange),
@@ -48121,6 +48233,7 @@ exports.OrbitalStateMachineView = exports.StateMachineView;
 exports.RuntimeDebugger = RuntimeDebugger;
 exports.ScoreDisplay = ScoreDisplay;
 exports.SequenceBar = SequenceBar;
+exports.SharedEntityStoreContext = SharedEntityStoreContext;
 exports.Skeleton = Skeleton;
 exports.SlotContentRenderer = SlotContentRenderer;
 exports.StatBadge = StatBadge;
@@ -48215,6 +48328,7 @@ exports.useQuerySingleton = useQuerySingleton;
 exports.useRenderInterpolation = useRenderInterpolation;
 exports.useSharedEntitySnapshot = useSharedEntitySnapshot;
 exports.useSharedEntityStore = useSharedEntityStore;
+exports.useSharedEntityStoreContext = useSharedEntityStoreContext;
 exports.useSwipeGesture = useSwipeGesture;
 exports.useTapReveal = useTapReveal;
 exports.useTraitListens = useTraitListens;