@almadar/ui 5.151.0 → 5.153.0

package/dist/avl/index.js

@@ -7,9 +7,9 @@ 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';
 import { useTranslate } from '@almadar/ui/hooks';
 import { InMemoryPersistence, StateMachineManager, collectDeclaredConfigDefaults, resolveCallSitePayloadCaptures, createServerEffectHandlers, EffectExecutor, createContextFromBindings, createTickScheduler, isValidCronExpression, parseDurationString, normalizeCallSiteConfigToValues, interpolateValue } from '@almadar/runtime';
-import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER, ANIMATION_NAMES } from '@almadar/core';
+import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isRenderBindingMarker, containsEntityBinding, isSExpr, isEventPayloadValue, RENDER_BINDING_MARKER, isFileValue, ANIMATION_NAMES } from '@almadar/core';
 import * as LucideIcons2 from 'lucide-react';
-import { Loader2, X, Code, FileText, WrapText, Check, Copy, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ZoomOut, ZoomIn, Download, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, ArrowLeft, HelpCircle, PauseCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp, Tag, User, DollarSign } from 'lucide-react';
+import { Loader2, X, Code, FileText, WrapText, Check, Copy, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ArrowLeft, ZoomOut, ZoomIn, Download, DollarSign, ChevronDown, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, HelpCircle, PauseCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, ChevronUp, Tag, User } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { UISlotProvider, useUISlots, useTheme } from '@almadar/ui/context';
 import { evaluateGuard, evaluateListenPayloadExpr, evaluate, createMinimalContext, executeEffects } from '@almadar/evaluator';
@@ -73,7 +73,7 @@ import { sortableKeyboardCoordinates, useSortable, arrayMove, SortableContext, r
 import { CSS } from '@dnd-kit/utilities';
 import { ordered, lib } from 'emojilib';
 import { forceSimulation, forceLink, forceManyBody, forceCollide, forceX, forceY } from 'd3-force';
-import { isDrawHostPattern, getPatternDefinition, getComponentForPattern as getComponentForPattern$1, isEntityAwarePattern } from '@almadar/core/patterns';
+import { isDrawHostPattern, getPatternDefinition, getPatternFieldsContract, getComponentForPattern as getComponentForPattern$1, isEntityAwarePattern } from '@almadar/core/patterns';
 import { OrbitalServerRuntime } from '@almadar/runtime/OrbitalServerRuntime';
 import { isKnownStdOperator } from '@almadar/std/registry';
 
@@ -9470,27 +9470,61 @@ var init_InfiniteScrollSentinel = __esm({
     InfiniteScrollSentinel.displayName = "InfiniteScrollSentinel";
   }
 });
-function createParticles(count) {
-  return Array.from({ length: count }, () => {
-    particleIdCounter += 1;
-    return {
-      id: particleIdCounter,
-      color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
-      left: 30 + Math.random() * 40,
-      delay: Math.random() * 300,
-      angle: Math.random() * 360,
-      distance: 40 + Math.random() * 80,
-      rotation: Math.random() * 720 - 360,
-      size: 4 + Math.random() * 6
-    };
-  });
+
+// components/core/atoms/fx.ts
+function resolveFxView(item, presets) {
+  const row = presets?.find((p) => p.type === item.type);
+  if (!row) return item;
+  return {
+    ...item,
+    space: item.space ?? row.space,
+    effect: item.effect ?? row.effect,
+    color: item.color ?? row.color,
+    size: item.size ?? row.size,
+    vx: item.vx ?? row.vx,
+    vy: item.vy ?? row.vy,
+    vz: item.vz ?? row.vz,
+    particleCount: item.particleCount ?? row.particleCount,
+    shape: row.shape,
+    count: row.count,
+    glow: row.glow,
+    gravity: row.gravity,
+    color2: row.color2
+  };
 }
-var CONFETTI_COLORS, particleIdCounter, ConfettiEffect;
-var init_ConfettiEffect = __esm({
-  "components/core/atoms/ConfettiEffect.tsx"() {
-    "use client";
-    init_cn();
-    init_Box();
+function fxLifecycle(item, epochNowMs, tickMs) {
+  const maxTtl = Math.max(item.maxTtl ?? item.ttl, item.ttl, 1);
+  const lifeMs = maxTtl * tickMs;
+  const ageMs = item.bornAt !== void 0 && epochNowMs > 0 ? Math.max(0, epochNowMs - item.bornAt) : (1 - item.ttl / maxTtl) * lifeMs;
+  const progress = Math.min(1, Math.max(0, ageMs / lifeMs));
+  return { lifeMs, ageMs, progress, fade: 1 - progress };
+}
+function fxHash01(seed, salt) {
+  let h = 2166136261 ^ salt;
+  for (let i = 0; i < seed.length; i++) {
+    h ^= seed.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  h ^= h >>> 13;
+  h = Math.imul(h, 1274126177);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
+}
+function createConfettiParticles(count, seed) {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    color: CONFETTI_COLORS[Math.floor(fxHash01(seed, i * 7 + 1) * CONFETTI_COLORS.length)],
+    left: 30 + fxHash01(seed, i * 7 + 2) * 40,
+    delay: fxHash01(seed, i * 7 + 3) * 300,
+    angle: fxHash01(seed, i * 7 + 4) * 360,
+    distance: 40 + fxHash01(seed, i * 7 + 5) * 80,
+    rotation: fxHash01(seed, i * 7 + 6) * 720 - 360,
+    size: 4 + fxHash01(seed, i * 7 + 7) * 6
+  }));
+}
+var CONFETTI_COLORS, CONFETTI_BURST_KEYFRAMES;
+var init_fx = __esm({
+  "components/core/atoms/fx.ts"() {
     CONFETTI_COLORS = [
       "var(--color-primary)",
       "var(--color-success)",
@@ -9499,7 +9533,30 @@ var init_ConfettiEffect = __esm({
       "gold",
       "dodgerblue"
     ];
-    particleIdCounter = 0;
+    CONFETTI_BURST_KEYFRAMES = `
+@keyframes confetti-burst {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0) rotate(0deg) scale(1);
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
+  }
+}
+`;
+  }
+});
+var ConfettiEffect;
+var init_ConfettiEffect = __esm({
+  "components/core/atoms/ConfettiEffect.tsx"() {
+    "use client";
+    init_cn();
+    init_Box();
+    init_fx();
     ConfettiEffect = ({
       trigger,
       duration = 2e3,
@@ -9508,11 +9565,13 @@ var init_ConfettiEffect = __esm({
     }) => {
       const [particles, setParticles] = useState([]);
       const previousTriggerRef = useRef(false);
+      const burstRef = useRef(0);
       useEffect(() => {
         const wasFalse = !previousTriggerRef.current;
         previousTriggerRef.current = trigger;
         if (trigger && wasFalse) {
-          const newParticles = createParticles(particleCount);
+          burstRef.current += 1;
+          const newParticles = createConfettiParticles(particleCount, `confetti-${burstRef.current}`);
           setParticles(newParticles);
           const timer = window.setTimeout(() => {
             setParticles([]);
@@ -9560,21 +9619,7 @@ var init_ConfettiEffect = __esm({
                 p.id
               );
             }),
-            /* @__PURE__ */ jsx("style", { children: `
-        @keyframes confetti-burst {
-          0% {
-            opacity: 1;
-            transform: translate(0, 0) rotate(0deg) scale(1);
-          }
-          70% {
-            opacity: 1;
-          }
-          100% {
-            opacity: 0;
-            transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
-          }
-        }
-      ` })
+            /* @__PURE__ */ jsx("style", { children: CONFETTI_BURST_KEYFRAMES })
           ]
         }
       );
@@ -13130,7 +13175,7 @@ var init_DrawShape = __esm({
           const cx = p.x + (node.offsetX ?? 0) * tw;
           const cy = p.y + (node.offsetY ?? 0) * tw;
           const rx = (node.radiusX ?? 0) * tw;
-          const ry = (node.radiusY ?? rx) * tw;
+          const ry = (node.radiusY ?? node.radiusX ?? 0) * tw;
           if (pxFill) painter.fillEllipse(cx, cy, rx, ry, pxFill);
           if (patFill) painter.fillEllipse(cx, cy, rx, ry, patFill);
           if (pxStroke) painter.strokeEllipse(cx, cy, rx, ry, pxStroke, strokePx);
@@ -13320,6 +13365,172 @@ var init_DrawTextLayer = __esm({
     };
   }
 });
+
+// components/game/molecules/DrawFxLayer.tsx
+function fxPosition(view, dim, ageSec) {
+  const g = view.gravity ?? 0;
+  const fall = 0.5 * g * ageSec * ageSec;
+  {
+    const base2 = view.position ?? { x: view.x, y: view.z ?? view.y ?? 0 };
+    if (!Number.isFinite(base2.x) || !Number.isFinite(base2.y)) return void 0;
+    return {
+      x: base2.x + (view.vx ?? 0) * ageSec,
+      y: base2.y + (view.vz ?? 0) * ageSec + fall
+    };
+  }
+}
+function sparkShape(view, pos, i, fade, progress) {
+  const size = view.size ?? 0.5;
+  const angle = fxHash01(view.id, i * 3) * Math.PI * 2;
+  const dist = size * (0.4 + 0.6 * fxHash01(view.id, i * 3 + 1)) * easeOut2(progress);
+  const r2 = size * (0.06 + 0.06 * fxHash01(view.id, i * 3 + 2));
+  const color = view.color ?? DEFAULT_SPARK_COLOR;
+  return {
+    type: "draw-shape",
+    shape: "ellipse",
+    position: { ...pos, x: pos.x + Math.cos(angle) * dist, y: pos.y + Math.sin(angle) * dist },
+    anchor: "center",
+    radiusX: r2,
+    fill: color,
+    blendMode: "lighter",
+    opacity: fade,
+    ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+  };
+}
+function proceduralShapes(view, pos, fade, progress) {
+  const size = view.size ?? 0.5;
+  const color = view.color ?? DEFAULT_SPARK_COLOR;
+  switch (view.shape ?? "spark") {
+    case "ring": {
+      return [
+        {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: pos,
+          anchor: "center",
+          radiusX: size * easeOut2(progress),
+          stroke: view.color2 ?? color,
+          strokeWidth: 2,
+          blendMode: "lighter",
+          opacity: fade,
+          ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+        }
+      ];
+    }
+    case "puff": {
+      const count = view.count ?? 3;
+      return Array.from({ length: count }, (_, i) => {
+        const angle = fxHash01(view.id, i * 5) * Math.PI * 2;
+        const drift = size * 0.3 * fxHash01(view.id, i * 5 + 1) * easeOut2(progress);
+        return {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: { ...pos, x: pos.x + Math.cos(angle) * drift, y: pos.y + Math.sin(angle) * drift },
+          anchor: "center",
+          radiusX: size * (0.15 + 0.35 * progress) * (0.7 + 0.6 * fxHash01(view.id, i * 5 + 2)),
+          fill: i === 0 && view.color2 ? view.color2 : color,
+          opacity: fade * 0.6,
+          ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+        };
+      });
+    }
+    case "streak": {
+      const count = view.count ?? 5;
+      return Array.from({ length: count }, (_, i) => {
+        const angle = fxHash01(view.id, i * 3) * Math.PI * 2;
+        const inner = size * (0.2 + 0.8 * easeOut2(progress)) * (0.6 + 0.4 * fxHash01(view.id, i * 3 + 1));
+        const len = size * 0.35;
+        return {
+          type: "draw-shape",
+          shape: "ellipse",
+          position: pos,
+          anchor: "center",
+          offsetX: inner + len / 2,
+          offsetY: 0,
+          radiusX: len / 2,
+          radiusY: size * 0.04,
+          rotate: angle,
+          fill: color,
+          blendMode: "lighter",
+          opacity: fade,
+          ...view.glow ? { shadow: { color, blur: view.glow } } : {}
+        };
+      });
+    }
+    default: {
+      const count = view.count ?? 6;
+      return Array.from({ length: count }, (_, i) => sparkShape(view, pos, i, fade, progress));
+    }
+  }
+}
+function expandFxItem(view, node, epochNowMs, dim) {
+  if (view.space === "screen") return [];
+  const tickMs = node.tickMs ?? DEFAULT_TICK_MS;
+  const { ageMs, progress, fade } = fxLifecycle(view, epochNowMs, tickMs);
+  if (progress >= 1) return [];
+  const pos = fxPosition(view, dim, ageMs / 1e3);
+  if (!pos) return [];
+  const out = [];
+  const artItems = node.art?.[view.type]?.["idle"];
+  const sprite = node.sprites?.[view.type];
+  if (Array.isArray(artItems)) {
+    out.push({
+      type: "draw-group",
+      position: pos,
+      opacity: fade,
+      ...view.size !== void 0 ? { scale: view.size } : {},
+      items: artItems
+    });
+  } else if (sprite?.url) {
+    const spriteSize = view.size ?? 0.6;
+    out.push({
+      type: "draw-sprite",
+      position: pos,
+      asset: sprite,
+      anchor: "center",
+      width: spriteSize,
+      height: spriteSize,
+      opacity: fade
+    });
+  } else {
+    out.push(...proceduralShapes(view, pos, fade, progress));
+  }
+  if (view.message) {
+    const text = {
+      type: "draw-text",
+      text: view.message,
+      position: pos,
+      offsetY: -(0.15 + 0.55 * progress),
+      color: view.color ?? node.textColor ?? DEFAULT_TEXT_COLOR,
+      opacity: fade
+    };
+    out.push(text);
+  }
+  return out;
+}
+function expandFxLayer(node, epochNowMs, dim) {
+  if (!Array.isArray(node.items)) return [];
+  const out = [];
+  for (const item of node.items) {
+    if (!item || typeof item.id !== "string") continue;
+    out.push(...expandFxItem(resolveFxView(item, node.presets), node, epochNowMs, dim));
+  }
+  return out;
+}
+function DrawFxLayer(_props) {
+  return null;
+}
+var DEFAULT_TICK_MS, DEFAULT_TEXT_COLOR, DEFAULT_SPARK_COLOR, easeOut2;
+var init_DrawFxLayer = __esm({
+  "components/game/molecules/DrawFxLayer.tsx"() {
+    "use client";
+    init_fx();
+    DEFAULT_TICK_MS = 500;
+    DEFAULT_TEXT_COLOR = "#ffe066";
+    DEFAULT_SPARK_COLOR = "#ffffff";
+    easeOut2 = (t) => 1 - (1 - t) * (1 - t);
+  }
+});
 function paintDrawable(painter, node, dctx) {
   switch (node.type) {
     case "draw-sprite":
@@ -13367,6 +13578,11 @@ function paintDrawable(painter, node, dctx) {
     case "draw-text-layer":
       paintTextLayer(painter, node, dctx);
       break;
+    case "draw-fx-layer": {
+      const epochNow = dctx.time > 0 && typeof performance !== "undefined" ? performance.timeOrigin + dctx.time : 0;
+      for (const child of expandFxLayer(node, epochNow, "2d")) paintDrawable(painter, child, dctx);
+      break;
+    }
   }
 }
 var paint2dLog, warnedUnsupported2d, warnUnsupported2d;
@@ -13381,6 +13597,7 @@ var init_paintDispatch = __esm({
     init_DrawSpriteLayer();
     init_DrawShapeLayer();
     init_DrawTextLayer();
+    init_DrawFxLayer();
     paint2dLog = createLogger("almadar:ui:drawable-2d");
     warnedUnsupported2d = /* @__PURE__ */ new Set();
     warnUnsupported2d = (kind) => {
@@ -13629,6 +13846,7 @@ function Canvas2D({
       return isAnimatedGroup(node) || Array.isArray(node.items) && node.items.some(drawableIsAnimated);
     if (node.type === "draw-shape-layer") return Array.isArray(node.items) && node.items.some(isAnimatedShape);
     if (node.type === "draw-sprite-layer") return Array.isArray(node.items) && node.items.some(isAnimatedSprite);
+    if (node.type === "draw-fx-layer") return Array.isArray(node.items) && node.items.length > 0;
     return false;
   };
   const animRafRef = useRef(0);
@@ -17259,7 +17477,7 @@ var init_AlgoGraphCanvas = __esm({
         }
         const badgeGeoms = [];
         for (const g of nodeGeoms) {
-          if (!g.badge) continue;
+          if (!g.badge || g.badge.text === "") continue;
           const w = Math.min(42, Math.max(18, g.badge.text.length * 6 + 10));
           badgeGeoms.push({
             cx: g.x + g.radius * 0.75,
@@ -17325,7 +17543,7 @@ var init_AlgoGraphCanvas = __esm({
     };
   }
 });
-var DEFAULT_BAR_COLOR, DEFAULT_CELL_COLOR, DEFAULT_POINTER_COLOR, POINTER_BAND, TOP_PAD, PANEL_FAMILY_ORDER, RANGE_COLOR_DEFAULT, RANGE_FILL_OPACITY, BRACKET_TOP_OFFSET, BRACKET_ROW_H, BRACKET_TICK_H, BRACKET_LABEL_OFFSET, SLOT_EMPTY_FILL, SLOT_EMPTY_STROKE, SLOT_FILLED_STROKE, SLOT_HIGHLIGHT_DEFAULT, SLOT_VALUE_TEXT_COLOR, FRAME_ACTIVE_COLOR, FRAME_RETURNING_COLOR, FRAME_DONE_COLOR, FRAME_LABEL_COLOR, FRAME_DETAIL_COLOR, FRAME_TWO_LINE_MIN_H, BUCKET_INDEX_FILL, BUCKET_INDEX_STROKE, BUCKET_INDEX_TEXT, BUCKET_ENTRY_TEXT, BUCKET_ENTRY_DEFAULT, BUCKET_ENTRY_HIGHLIGHT, BUCKET_ENTRY_PROBING, BUCKET_ENTRY_MIN_W, BUCKET_ENTRY_MAX_W, AXIS_LABEL_COLOR, AXIS_LABEL_FONT_SIZE, CORNER_TEXT_COLOR, CORNER_FONT_SIZE, CORNER_MIN_CELL, CORNER_INSET_X, CORNER_INSET_Y, AUX_PRIMARY_RATIO, AUX_LABEL_BAND, AUX_BASELINE_PAD, AlgorithmCanvas;
+var DEFAULT_BAR_COLOR, DEFAULT_CELL_COLOR, DEFAULT_POINTER_COLOR, POINTER_BAND, TOP_PAD, PANEL_FAMILY_ORDER, RANGE_COLOR_DEFAULT, RANGE_FILL_OPACITY, BRACKET_TOP_OFFSET, BRACKET_ROW_H, BRACKET_TICK_H, BRACKET_LABEL_OFFSET, SLOT_EMPTY_FILL, SLOT_EMPTY_STROKE, SLOT_FILLED_STROKE, SLOT_HIGHLIGHT_DEFAULT, SLOT_VALUE_TEXT_COLOR, FRAME_ACTIVE_COLOR, FRAME_RETURNING_COLOR, FRAME_DONE_COLOR, FRAME_RIM_COLOR, FRAME_LABEL_COLOR, FRAME_DETAIL_COLOR, FRAME_TWO_LINE_MIN_H, FRAME_STRIP_H, FRAME_GAP, FRAME_BOTTOM_PAD, FRAME_MIN_H, BUCKET_INDEX_FILL, BUCKET_INDEX_STROKE, BUCKET_INDEX_TEXT, BUCKET_ENTRY_TEXT, BUCKET_ENTRY_DEFAULT, BUCKET_ENTRY_HIGHLIGHT, BUCKET_ENTRY_PROBING, BUCKET_ENTRY_MIN_W, BUCKET_ENTRY_MAX_W, AXIS_LABEL_COLOR, AXIS_LABEL_FONT_SIZE, CORNER_TEXT_COLOR, CORNER_FONT_SIZE, CORNER_MIN_CELL, CORNER_INSET_X, CORNER_INSET_Y, AUX_PRIMARY_RATIO, AUX_LABEL_BAND, AUX_BASELINE_PAD, AlgorithmCanvas;
 var init_AlgorithmCanvas = __esm({
   "components/learning/molecules/AlgorithmCanvas.tsx"() {
     "use client";
@@ -17352,9 +17570,18 @@ var init_AlgorithmCanvas = __esm({
     FRAME_ACTIVE_COLOR = "#3b82f6";
     FRAME_RETURNING_COLOR = "#f59e0b";
     FRAME_DONE_COLOR = "#94a3b8";
+    FRAME_RIM_COLOR = {
+      active: "#1d4ed8",
+      returning: "#b45309",
+      done: "#64748b"
+    };
     FRAME_LABEL_COLOR = "#ffffff";
     FRAME_DETAIL_COLOR = "#e2e8f0";
     FRAME_TWO_LINE_MIN_H = 22;
+    FRAME_STRIP_H = 44;
+    FRAME_GAP = 6;
+    FRAME_BOTTOM_PAD = 8;
+    FRAME_MIN_H = 12;
     BUCKET_INDEX_FILL = "#e2e8f0";
     BUCKET_INDEX_STROKE = "#9ca3af";
     BUCKET_INDEX_TEXT = "#374151";
@@ -17851,14 +18078,18 @@ var init_AlgorithmCanvas = __esm({
         if (frames.length > 0) {
           const panelYFrames = panelY.frames;
           const n = frames.length;
-          const frameH = panelHeight / n;
+          const maxStride = (panelHeight - FRAME_BOTTOM_PAD - TOP_PAD) / n;
+          const stride = Math.min(FRAME_STRIP_H + FRAME_GAP, maxStride);
+          const frameH = Math.max(FRAME_MIN_H, stride - FRAME_GAP);
           const x = 8;
           const w = width - 16;
+          const bottom = panelYFrames + panelHeight - FRAME_BOTTOM_PAD;
           frames.forEach((f3, i) => {
-            const y = panelYFrames + panelHeight - (i + 1) * frameH;
+            const y = bottom - i * stride - frameH;
             const state = f3.state ?? "active";
             const fill = state === "returning" ? f3.color ?? FRAME_RETURNING_COLOR : state === "done" ? f3.color ?? FRAME_DONE_COLOR : f3.color ?? FRAME_ACTIVE_COLOR;
-            out.push({ type: "rect", id: `frame-${i}`, x, y, width: w, height: frameH, color: fill, fill });
+            const rim = f3.color ?? FRAME_RIM_COLOR[state] ?? FRAME_RIM_COLOR.active;
+            out.push({ type: "rect", id: `frame-${i}`, x, y, width: w, height: frameH, color: rim, fill });
             if (frameH >= FRAME_TWO_LINE_MIN_H) {
               out.push({
                 type: "text",
@@ -17866,14 +18097,14 @@ var init_AlgorithmCanvas = __esm({
                 y: y + frameH * 0.35,
                 text: f3.label,
                 color: FRAME_LABEL_COLOR,
-                fontSize: 10,
+                fontSize: 11,
                 align: "left"
               });
               if (f3.detail) {
                 out.push({
                   type: "text",
                   x: 16,
-                  y: y + frameH * 0.7,
+                  y: y + frameH * 0.72,
                   text: f3.detail,
                   color: FRAME_DETAIL_COLOR,
                   fontSize: 10,
@@ -23559,8 +23790,6 @@ var init_ButtonGroup = __esm({
     ButtonGroup.displayName = "ButtonGroup";
   }
 });
-
-// lib/getNestedValue.ts
 function getNestedValue(obj, path) {
   if (obj === null || obj === void 0 || !path) {
     return void 0;
@@ -23581,6 +23810,15 @@ function getNestedValue(obj, path) {
   }
   return value;
 }
+function resolveImageUrl(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (isFileValue(value)) {
+    return value.url;
+  }
+  return void 0;
+}
 var init_getNestedValue = __esm({
   "lib/getNestedValue.ts"() {
   }
@@ -24285,8 +24523,8 @@ var init_CardGrid = __esm({
               actionPayload: { row: itemData },
               children: [
                 imageField && (() => {
-                  const imgUrl = getNestedValue(itemData, imageField);
-                  if (!imgUrl || typeof imgUrl !== "string") return null;
+                  const imgUrl = resolveImageUrl(getNestedValue(itemData, imageField));
+                  if (!imgUrl) return null;
                   return /* @__PURE__ */ jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-lg", children: /* @__PURE__ */ jsx(
                     "img",
                     {
@@ -28316,8 +28554,8 @@ function DataGrid({
                   ),
                   children: [
                     imageField && (() => {
-                      const imgUrl = getNestedValue(itemData, imageField);
-                      if (!imgUrl || typeof imgUrl !== "string") return null;
+                      const imgUrl = resolveImageUrl(getNestedValue(itemData, imageField));
+                      if (!imgUrl) return null;
                       return /* @__PURE__ */ jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-lg", children: /* @__PURE__ */ jsx(
                         "img",
                         {
@@ -30371,6 +30609,196 @@ var init_PageTransition = __esm({
     PageTransition.displayName = "PageTransition";
   }
 });
+function ConfettiBurst({ item, lifeMs }) {
+  const particles = createConfettiParticles(item.particleCount ?? 30, item.id);
+  const left = (item.x ?? 0.5) * 100;
+  const top = (item.z ?? item.y ?? 0.4) * 100;
+  return /* @__PURE__ */ jsx(Box, { position: "absolute", style: { left: `${left}%`, top: `${top}%` }, children: particles.map((p) => {
+    const rad = p.angle * Math.PI / 180;
+    const tx = Math.cos(rad) * p.distance * (item.size ?? 1);
+    const ty = Math.sin(rad) * p.distance * (item.size ?? 1) - 20;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "absolute rounded-sm",
+        style: {
+          left: (p.left - 50) * 2,
+          top: -10,
+          width: p.size,
+          height: p.size,
+          backgroundColor: item.color ?? p.color,
+          animation: `confetti-burst ${Math.max(lifeMs - p.delay, 200)}ms ease-out ${p.delay}ms forwards`,
+          opacity: 0,
+          "--confetti-tx": `${tx}px`,
+          "--confetti-ty": `${ty}px`,
+          "--confetti-rotate": `${p.rotation}deg`
+        }
+      },
+      p.id
+    );
+  }) });
+}
+function SparkleBurst({ item, lifeMs }) {
+  const count = item.particleCount ?? 8;
+  const scale = item.size ?? 1;
+  const left = (item.x ?? 0.5) * 100;
+  const top = (item.z ?? item.y ?? 0.4) * 100;
+  return /* @__PURE__ */ jsx(Box, { position: "absolute", style: { left: `${left}%`, top: `${top}%` }, children: Array.from({ length: count }, (_, i) => {
+    const dx = (fxHash01(item.id, i * 4) - 0.5) * 160 * scale;
+    const dy = (fxHash01(item.id, i * 4 + 1) - 0.5) * 120 * scale;
+    const dot = (4 + fxHash01(item.id, i * 4 + 2) * 5) * scale;
+    const delay = fxHash01(item.id, i * 4 + 3) * lifeMs * 0.4;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "absolute rounded-full",
+        style: {
+          left: dx,
+          top: dy,
+          width: dot,
+          height: dot,
+          backgroundColor: item.color ?? "gold",
+          opacity: 0,
+          animation: `fx-overlay-sparkle ${Math.max(lifeMs - delay, 200)}ms ease-in-out ${delay}ms forwards`
+        }
+      },
+      i
+    );
+  }) });
+}
+function OverlayFxNode({ item, tickMs }) {
+  const lifeMs = lifeMsOf(item, tickMs);
+  switch (item.effect ?? "sparkle") {
+    case "confetti":
+      return /* @__PURE__ */ jsx(ConfettiBurst, { item, lifeMs });
+    case "flash":
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          position: "absolute",
+          className: "inset-0",
+          style: {
+            backgroundColor: item.color ?? "#ffffff",
+            opacity: 0,
+            animation: `fx-overlay-flash ${lifeMs}ms ease-out forwards`
+          }
+        }
+      );
+    case "streak-glow":
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          position: "absolute",
+          className: "inset-0",
+          style: {
+            boxShadow: `inset 0 0 ${60 * (item.size ?? 1)}px ${item.color ?? "var(--color-warning)"}`,
+            opacity: 0,
+            animation: `fx-overlay-glow ${lifeMs}ms ease-in-out forwards`
+          }
+        }
+      );
+    case "float-text": {
+      if (!item.message) return null;
+      return /* @__PURE__ */ jsx(
+        Box,
+        {
+          position: "absolute",
+          style: {
+            left: `${(item.x ?? 0.5) * 100}%`,
+            top: `${(item.z ?? item.y ?? 0.4) * 100}%`,
+            color: item.color ?? "var(--color-success)",
+            fontWeight: 700,
+            fontSize: 16 * (item.size ?? 1),
+            textShadow: "0 1px 2px rgba(0,0,0,0.4)",
+            opacity: 0,
+            animation: `fx-overlay-float ${lifeMs}ms ease-out forwards`,
+            whiteSpace: "nowrap"
+          },
+          children: item.message
+        }
+      );
+    }
+    case "shake":
+      return null;
+    default:
+      return /* @__PURE__ */ jsx(SparkleBurst, { item, lifeMs });
+  }
+}
+var DEFAULT_TICK_MS2, FX_OVERLAY_KEYFRAMES, lifeMsOf, FxOverlay;
+var init_FxOverlay = __esm({
+  "components/core/molecules/FxOverlay.tsx"() {
+    "use client";
+    init_cn();
+    init_Box();
+    init_fx();
+    DEFAULT_TICK_MS2 = 500;
+    FX_OVERLAY_KEYFRAMES = `
+${CONFETTI_BURST_KEYFRAMES}
+@keyframes fx-overlay-flash {
+  0% { opacity: 0.75; }
+  100% { opacity: 0; }
+}
+@keyframes fx-overlay-glow {
+  0% { opacity: 0.9; }
+  60% { opacity: 0.6; }
+  100% { opacity: 0; }
+}
+@keyframes fx-overlay-sparkle {
+  0% { opacity: 0; transform: scale(0); }
+  30% { opacity: 1; transform: scale(1); }
+  100% { opacity: 0; transform: scale(0.3); }
+}
+@keyframes fx-overlay-float {
+  0% { opacity: 0; transform: translate(-50%, 8px); }
+  15% { opacity: 1; }
+  100% { opacity: 0; transform: translate(-50%, -40px); }
+}
+@keyframes fx-overlay-shake {
+  0% { transform: translateX(0); }
+  15% { transform: translateX(-6px); }
+  30% { transform: translateX(5px); }
+  45% { transform: translateX(-4px); }
+  60% { transform: translateX(3px); }
+  75% { transform: translateX(-2px); }
+  100% { transform: translateX(0); }
+}
+`;
+    lifeMsOf = (it, tickMs) => Math.max(it.maxTtl ?? it.ttl, it.ttl, 1) * tickMs;
+    FxOverlay = ({ items, tickMs = DEFAULT_TICK_MS2, children, className }) => {
+      const screenItems = (Array.isArray(items) ? items : []).filter(
+        (it) => Boolean(it) && typeof it.id === "string" && it.space !== "world"
+      );
+      const shakeItem = [...screenItems].reverse().find((it) => it.effect === "shake");
+      const overlay = /* @__PURE__ */ jsxs(
+        Box,
+        {
+          position: "absolute",
+          className: cn("inset-0 pointer-events-none overflow-hidden z-50", !children && className),
+          "aria-hidden": "true",
+          children: [
+            screenItems.map((it) => /* @__PURE__ */ jsx(OverlayFxNode, { item: it, tickMs }, it.id)),
+            /* @__PURE__ */ jsx("style", { children: FX_OVERLAY_KEYFRAMES })
+          ]
+        }
+      );
+      if (children !== void 0 && children !== null) {
+        return /* @__PURE__ */ jsxs(Box, { position: "relative", className, children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: shakeItem ? { animation: `fx-overlay-shake ${Math.min(lifeMsOf(shakeItem, tickMs), 600)}ms ease-in-out` } : void 0,
+              children
+            },
+            shakeItem?.id ?? "steady"
+          ),
+          overlay
+        ] });
+      }
+      return overlay;
+    };
+    FxOverlay.displayName = "FxOverlay";
+  }
+});
 function computePopoverStyle(position, triggerRect, popoverWidth) {
   if (position === "left" || position === "right") {
     return {
@@ -30927,7 +31355,7 @@ var init_SearchInput = __esm({
         /* @__PURE__ */ jsx(
           Input,
           {
-            type: "text",
+            type: "search",
             value: searchValue,
             onChange: handleChange,
             placeholder: resolvedPlaceholder,
@@ -32253,6 +32681,7 @@ var MathCanvas;
 var init_MathCanvas = __esm({
   "components/learning/molecules/MathCanvas.tsx"() {
     "use client";
+    init_useEventBus();
     init_atoms();
     init_Stack();
     init_LearningCanvas();
@@ -32284,9 +32713,32 @@ var init_MathCanvas = __esm({
       interactive = false,
       animate = false,
       onShapeClick,
+      keyMap,
+      keyUpMap,
       isLoading,
       error
     }) => {
+      const eventBus = useEventBus();
+      useEffect(() => {
+        if (!keyMap && !keyUpMap) return;
+        const onDown = (e) => {
+          const ev = keyMap?.[e.code];
+          if (ev) {
+            eventBus.emit(`UI:${ev}`, {});
+            e.preventDefault();
+          }
+        };
+        const onUp = (e) => {
+          const ev = keyUpMap?.[e.code];
+          if (ev) eventBus.emit(`UI:${ev}`, {});
+        };
+        window.addEventListener("keydown", onDown);
+        window.addEventListener("keyup", onUp);
+        return () => {
+          window.removeEventListener("keydown", onDown);
+          window.removeEventListener("keyup", onUp);
+        };
+      }, [keyMap, keyUpMap, eventBus]);
       const derivedShapes = useMemo(() => {
         const out = [];
         const margin = 24;
@@ -32299,11 +32751,11 @@ var init_MathCanvas = __esm({
         if (showGrid) {
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep) {
             const px = mapX(x);
-            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#e5e7eb", lineWidth: 1 });
+            out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
           }
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep) {
             const py = mapY(y);
-            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#e5e7eb", lineWidth: 1 });
+            out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color: "#9ca3af", opacity: 0.35, lineWidth: 1 });
           }
         }
         if (showTickLabels) {
@@ -32352,7 +32804,7 @@ var init_MathCanvas = __esm({
               x: mapX((first.x + last.x) / 2),
               y: (mapY(region.samples[mid].y) + mapY(baseline)) / 2,
               text: region.label,
-              color: "#111827",
+              color,
               fontSize: 11
             });
           }
@@ -32385,14 +32837,14 @@ var init_MathCanvas = __esm({
             const px = mapX(guide.at);
             out.push({ type: "line", x1: px, y1: margin, x2: px, y2: height - margin, color, dash });
             if (guide.label) {
-              out.push({ type: "text", x: px + 4, y: margin + 10, text: guide.label, color: "#111827", fontSize: 11 });
+              out.push({ type: "text", x: px + 4, y: margin + 10, text: guide.label, color, fontSize: 11 });
             }
           } else {
             if (guide.at < yMin || guide.at > yMax) continue;
             const py = mapY(guide.at);
             out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color, dash });
             if (guide.label) {
-              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color: "#111827", fontSize: 11, align: "right" });
+              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color, fontSize: 11, align: "right" });
             }
           }
         }
@@ -32458,7 +32910,7 @@ var init_MathCanvas = __esm({
               x: (x1 + x2) / 2,
               y: xAxisY - peak - 8,
               text: hop.label,
-              color: "#111827",
+              color,
               fontSize: 10,
               align: "center"
             });
@@ -32485,7 +32937,7 @@ var init_MathCanvas = __esm({
               x: mapX(angle.x + 1.35 * radius * Math.cos(rad)),
               y: mapY(angle.y + 1.35 * radius * Math.sin(rad)),
               text: angle.label,
-              color: "#111827",
+              color,
               fontSize: 11,
               align: "center"
             });
@@ -32503,7 +32955,7 @@ var init_MathCanvas = __esm({
             fill: isOpen ? "#ffffff" : p.color ?? "#dc2626"
           });
           if (p.label) {
-            out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: "#111827", fontSize: 12 });
+            out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: p.color ?? "#111827", fontSize: 12 });
           }
         }
         for (const v of vectors) {
@@ -32514,7 +32966,7 @@ var init_MathCanvas = __esm({
           const y2 = mapY(v.y + v.vy);
           out.push({ type: "arrow", x1, y1, x2, y2, color: v.color ?? "#7c3aed", lineWidth: 2 });
           if (v.label) {
-            out.push({ type: "text", x: x2 + 6, y: y2 - 6, text: v.label, color: "#111827", fontSize: 12 });
+            out.push({ type: "text", x: x2 + 6, y: y2 - 6, text: v.label, color: v.color ?? "#7c3aed", fontSize: 12 });
           }
         }
         out.push(...shapes);
@@ -33778,13 +34230,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect64, useRef: useRef65, useCallback: useCallback96, useState: useState100 } = React94__default;
+      const { useEffect: useEffect65, useRef: useRef65, useCallback: useCallback96, useState: useState100 } = React94__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
         const prevRef = useRef65({ centerLat, centerLng, zoom });
-        useEffect64(() => {
+        useEffect65(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -33795,7 +34247,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect64(() => {
+        useEffect65(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -40202,6 +40654,7 @@ var init_PageHeader = __esm({
       className
     }) => {
       const eventBus = useEventBus();
+      const statusBadge = typeof status === "string" ? status ? { label: status } : void 0 : status;
       const handleBack = () => {
         eventBus.emit(`UI:${backEvent}`);
       };
@@ -40249,15 +40702,15 @@ var init_PageHeader = __esm({
             /* @__PURE__ */ jsxs(Box, { children: [
               /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3", children: [
                 /* @__PURE__ */ jsx(Typography, { variant: "h1", className: "text-2xl font-bold text-foreground", children: title != null ? String(title) : "" }),
-                status && /* @__PURE__ */ jsx(
+                statusBadge && /* @__PURE__ */ jsx(
                   Typography,
                   {
                     variant: "small",
                     className: cn(
                       "px-2.5 py-1 rounded-full text-xs font-medium",
-                      statusColors2[status.variant || "default"]
+                      statusColors2[statusBadge.variant || "default"]
                     ),
-                    children: status.label
+                    children: statusBadge.label
                   }
                 )
               ] }),
@@ -43486,7 +43939,7 @@ function formatFieldValue2(value, fieldName) {
   }
   return String(value);
 }
-function renderRichFieldValue(value, fieldName, fieldType) {
+function renderRichFieldValue(value, fieldName, fieldType, meta) {
   if (value === void 0 || value === null) return "\u2014";
   const str = String(value);
   switch (fieldType) {
@@ -43553,19 +44006,58 @@ function renderRichFieldValue(value, fieldName, fieldType) {
         }
       );
     case "date":
-    case "datetime": {
+    case "datetime":
+    case "timestamp": {
       const d = new Date(str);
       if (!isNaN(d.getTime())) {
         return d.toLocaleDateString(void 0, {
           year: "numeric",
           month: "long",
           day: "numeric",
-          ...fieldType === "datetime" ? { hour: "2-digit", minute: "2-digit" } : {}
+          ...fieldType !== "date" ? { hour: "2-digit", minute: "2-digit" } : {}
         });
       }
       return str;
     }
+    case "money": {
+      const n = typeof value === "number" ? value : Number(str);
+      if (!isNaN(n)) {
+        return new Intl.NumberFormat(void 0, {
+          style: "currency",
+          currency: "USD"
+        }).format(n);
+      }
+      return str;
+    }
+    case "relation": {
+      const match = meta?.options?.find((opt) => opt.value === str);
+      return match ? match.label : str;
+    }
+    case "file": {
+      if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+        const file = value;
+        const label = typeof file.name === "string" && file.name ? file.name : "file";
+        const size = typeof file.sizeBytes === "number" ? ` \xB7 ${formatFileSize(file.sizeBytes)}` : "";
+        return /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: typeof file.url === "string" ? file.url : void 0,
+            download: label,
+            className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-muted px-2 py-1 text-sm text-foreground no-underline hover:bg-accent",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: FileText, size: "sm", className: "text-muted-foreground" }),
+              label,
+              size && /* @__PURE__ */ jsx(Typography, { as: "span", variant: "caption", color: "muted", children: size })
+            ]
+          }
+        );
+      }
+      return str;
+    }
     default:
+      if (meta?.values && meta.values.length > 0 && meta.values.includes(str)) {
+        return /* @__PURE__ */ jsx(Badge, { variant: getBadgeVariant(fieldName, str), children: humanizeEnumValue(str) });
+      }
       return formatFieldValue2(value, fieldName);
   }
 }
@@ -43592,8 +44084,18 @@ function buildFieldTypeMap(fields) {
   const map = {};
   if (!fields) return map;
   for (const f3 of fields) {
-    if (typeof f3 === "object" && "name" in f3 && "type" in f3) {
-      map[f3.name] = f3.type;
+    if (typeof f3 === "object" && f3.type !== void 0) {
+      map["name" in f3 ? f3.name : f3.key] = f3.type;
+    }
+  }
+  return map;
+}
+function buildFieldMetaMap(fields) {
+  const map = {};
+  if (!fields) return map;
+  for (const f3 of fields) {
+    if (typeof f3 === "object" && (f3.type !== void 0 || f3.values !== void 0 || f3.relation !== void 0)) {
+      map["name" in f3 ? f3.name : f3.key] = { type: f3.type, values: f3.values, relation: f3.relation };
     }
   }
   return map;
@@ -43613,6 +44115,7 @@ var init_DetailPanel = __esm({
     init_format();
     init_getNestedValue();
     init_useEventBus();
+    init_UploadDropZone();
     formatFieldLabel = humanizeFieldName;
     ReactMarkdown2 = lazy(() => import('react-markdown'));
     DetailPanel = ({
@@ -43622,6 +44125,7 @@ var init_DetailPanel = __esm({
       avatar,
       sections: propSections,
       actions,
+      backAction,
       footer,
       slideOver = false,
       className,
@@ -43630,7 +44134,8 @@ var init_DetailPanel = __esm({
       fieldNames,
       initialData,
       isLoading = false,
-      error
+      error,
+      relationsData
     }) => {
       const eventBus = useEventBus();
       const { t } = useTranslate();
@@ -43641,8 +44146,15 @@ var init_DetailPanel = __esm({
       };
       const effectiveFieldNames = isFieldDefArray(propFields) ? normalizeFieldDefs(propFields) : fieldNames;
       const fieldTypeMap = isFieldDefArray(propFields) ? buildFieldTypeMap(propFields) : {};
+      const fieldMetaMap = isFieldDefArray(propFields) ? buildFieldMetaMap(propFields) : {};
       const fieldLabelMap = isFieldDefArray(propFields) ? buildFieldLabelMap(propFields) : {};
       const labelFor = (field) => fieldLabelMap[field] ?? formatFieldLabel(field);
+      const metaFor = (field) => {
+        const base = fieldMetaMap[field];
+        const options = relationsData?.[field];
+        if (!base && !options) return void 0;
+        return { ...base, options };
+      };
       const handleActionClick = useCallback(
         (action, data2) => {
           if (action.navigatesTo) {
@@ -43721,7 +44233,7 @@ var init_DetailPanel = __esm({
             if (value !== void 0 && value !== null) {
               overviewFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field]),
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
                 icon: getFieldIcon(field)
               });
             }
@@ -43737,7 +44249,7 @@ var init_DetailPanel = __esm({
             if (value !== void 0 && value !== null) {
               metricsFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field]),
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
                 icon: getFieldIcon(field)
               });
             }
@@ -43753,7 +44265,7 @@ var init_DetailPanel = __esm({
             if (value !== void 0 && value !== null) {
               timelineFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field]),
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
                 icon: getFieldIcon(field)
               });
             }
@@ -43769,7 +44281,7 @@ var init_DetailPanel = __esm({
             if (value !== void 0 && value !== null) {
               descFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field]),
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
                 icon: getFieldIcon(field)
               });
             }
@@ -43817,7 +44329,7 @@ var init_DetailPanel = __esm({
               const value = normalizedData ? getNestedValue(normalizedData, field) : void 0;
               allFields.push({
                 label: labelFor(field),
-                value: renderRichFieldValue(value, field, fieldTypeMap[field]),
+                value: renderRichFieldValue(value, field, fieldTypeMap[field], metaFor(field)),
                 icon: getFieldIcon(field)
               });
             } else {
@@ -43832,34 +44344,49 @@ var init_DetailPanel = __esm({
       const otherActions = actions?.filter((a) => a !== closeAction) ?? [];
       const effectiveCloseAction = closeAction ?? { event: void 0};
       const content = /* @__PURE__ */ jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxs(VStack, { gap: "md", className: "p-6", children: [
-        /* @__PURE__ */ jsxs(HStack, { justify: "end", align: "center", gap: "xs", children: [
-          otherActions.map((action, idx) => /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: action.variant || "secondary",
-              size: "sm",
-              action: action.navigatesTo ? void 0 : action.event,
-              actionPayload: { row: normalizedData },
-              onClick: action.navigatesTo ? () => handleActionClick(action, normalizedData) : void 0,
-              icon: action.icon,
-              "data-testid": action.event ? `action-${action.event}` : void 0,
-              "data-row-id": normalizedData?.id !== void 0 ? String(normalizedData.id) : void 0,
-              children: action.label
-            },
-            idx
-          )),
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsx(HStack, { align: "center", gap: "xs", children: backAction && /* @__PURE__ */ jsx(
             Button,
             {
-              variant: "ghost",
+              variant: backAction.variant || "ghost",
               size: "sm",
-              action: effectiveCloseAction.event,
+              action: backAction.navigatesTo ? void 0 : backAction.event,
               actionPayload: { row: normalizedData },
-              onClick: effectiveCloseAction.event ? void 0 : handleClose,
-              icon: X,
-              "data-testid": effectiveCloseAction.event ? `action-${effectiveCloseAction.event}` : "action-close"
+              onClick: backAction.navigatesTo ? () => handleActionClick(backAction, normalizedData) : void 0,
+              icon: backAction.icon ?? ArrowLeft,
+              "data-testid": backAction.event ? `action-${backAction.event}` : "action-back",
+              children: backAction.label
             }
-          )
+          ) }),
+          /* @__PURE__ */ jsxs(HStack, { justify: "end", align: "center", gap: "xs", children: [
+            otherActions.map((action, idx) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: action.variant || "secondary",
+                size: "sm",
+                action: action.navigatesTo ? void 0 : action.event,
+                actionPayload: { row: normalizedData },
+                onClick: action.navigatesTo ? () => handleActionClick(action, normalizedData) : void 0,
+                icon: action.icon,
+                "data-testid": action.event ? `action-${action.event}` : void 0,
+                "data-row-id": normalizedData?.id !== void 0 ? String(normalizedData.id) : void 0,
+                children: action.label
+              },
+              idx
+            )),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                action: effectiveCloseAction.event,
+                actionPayload: { row: normalizedData },
+                onClick: effectiveCloseAction.event ? void 0 : handleClose,
+                icon: X,
+                "data-testid": effectiveCloseAction.event ? `action-${effectiveCloseAction.event}` : "action-close"
+              }
+            )
+          ] })
         ] }),
         avatar,
         /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
@@ -44174,6 +44701,10 @@ function determineInputType(field) {
       return "password";
     case "url":
       return "url";
+    case "file":
+      return "file";
+    case "money":
+      return "currency";
     case "number":
     case "integer":
     case "float":
@@ -44235,6 +44766,7 @@ var init_Form = __esm({
     init_Typography();
     init_Icon();
     init_RelationSelect();
+    init_UploadDropZone();
     init_Alert();
     init_useEventBus();
     init_debug();
@@ -44277,6 +44809,7 @@ var init_Form = __esm({
       cancelEvent = "CANCEL",
       relationsData = {},
       relationsLoading = {},
+      fieldOverrides,
       // Inspection form extensions - may come as boolean true from generated code (meaning enabled but config loaded separately)
       conditionalFields: conditionalFieldsRaw = {},
       hiddenCalculations: hiddenCalculationsRaw = [],
@@ -44523,7 +45056,8 @@ var init_Form = __esm({
               label,
               field.required && /* @__PURE__ */ jsx(Typography, { as: "span", color: "error", className: "ml-1", children: "*" })
             ] }),
-            renderFieldInput(field, fieldName, inputType, currentValue, label)
+            renderFieldInput(field, fieldName, inputType, currentValue, label),
+            field.hint && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: field.hint })
           ] }, fieldName);
         },
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
@@ -44539,6 +45073,7 @@ var init_Form = __esm({
                 name: field,
                 type: entityField.type,
                 required: entityField.required,
+                hint: entityField.description,
                 // EntityField.default is typed `unknown` upstream — safe cast: schema defaults are always FieldValues.
                 defaultValue: entityField.default,
                 // EntityField is a discriminated union — `values` lives on Scalar/Enum, `relation` lives on Relation.
@@ -44551,8 +45086,18 @@ var init_Form = __esm({
             return { name: field, type: "string" };
           }
           return field;
+        }).map((field) => {
+          const fieldName = field.name || field.field;
+          const override = fieldOverrides?.find((o) => o.name === fieldName);
+          if (!override) return field;
+          return {
+            ...field,
+            ...override.label !== void 0 ? { label: override.label } : {},
+            ...override.placeholder !== void 0 ? { placeholder: override.placeholder } : {},
+            ...override.hint !== void 0 ? { hint: override.hint } : {}
+          };
         });
-      }, [effectiveFields, resolvedEntity]);
+      }, [effectiveFields, resolvedEntity, fieldOverrides]);
       const schemaFields = React94__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
@@ -44676,6 +45221,44 @@ var init_Form = __esm({
                 max: field.max
               }
             );
+          case "currency":
+            return /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...commonProps,
+                type: "number",
+                step: "0.01",
+                icon: DollarSign,
+                value: currentValue !== void 0 && currentValue !== "" ? String(currentValue) : "",
+                onChange: (e) => handleChange(
+                  fieldName,
+                  e.target.value ? Number(e.target.value) : void 0
+                ),
+                min: field.min,
+                max: field.max
+              }
+            );
+          case "file":
+            return /* @__PURE__ */ jsx(
+              UploadDropZone,
+              {
+                accept: field.pattern,
+                maxFiles: 1,
+                disabled: isLoading,
+                onFiles: (files) => {
+                  const f3 = files[0];
+                  if (!f3) return;
+                  const reader = new FileReader();
+                  reader.onload = () => handleChange(fieldName, {
+                    name: f3.name,
+                    mimeType: f3.type,
+                    sizeBytes: f3.size,
+                    url: typeof reader.result === "string" ? reader.result : ""
+                  });
+                  reader.readAsDataURL(f3);
+                }
+              }
+            );
           case "date":
             return /* @__PURE__ */ jsx(
               Input,
@@ -45708,6 +46291,7 @@ var COLUMN_CLASSES, ASPECT_CLASSES, MediaGallery;
 var init_MediaGallery = __esm({
   "components/core/organisms/MediaGallery.tsx"() {
     "use client";
+    init_getNestedValue();
     init_cn();
     init_atoms();
     init_Stack();
@@ -45776,9 +46360,9 @@ var init_MediaGallery = __esm({
         return entityData.map((record, idx) => {
           return {
             id: String(record.id ?? idx),
-            src: String(record.src ?? ("url" in record ? record.url : "") ?? ("image" in record ? record.image : "") ?? ""),
+            src: resolveImageUrl(record.src ?? ("url" in record ? record.url : void 0) ?? ("image" in record ? record.image : void 0)) ?? "",
             alt: record.alt ? String(record.alt) : void 0,
-            thumbnail: record.thumbnail ? String(record.thumbnail) : void 0,
+            thumbnail: resolveImageUrl(record.thumbnail),
             caption: record.caption ? String(record.caption) : "title" in record ? String(record.title) : void 0
           };
         });
@@ -49665,6 +50249,7 @@ var init_component_registry_generated = __esm({
     init_DocSidebar();
     init_DocTOC();
     init_DocumentViewer();
+    init_DrawFxLayer();
     init_DrawGroup();
     init_DrawMesh();
     init_DrawShape();
@@ -49695,6 +50280,7 @@ var init_component_registry_generated = __esm({
     init_FormField();
     init_FormSection();
     init_FormSectionHeader();
+    init_FxOverlay();
     init_GameAudioToggle();
     init_GameHud();
     init_GameIcon();
@@ -49935,6 +50521,7 @@ var init_component_registry_generated = __esm({
       "DocSidebar": DocSidebar,
       "DocTOC": DocTOC,
       "DocumentViewer": DocumentViewer,
+      "DrawFxLayer": DrawFxLayer,
       "DrawGroup": DrawGroup,
       "DrawMesh": DrawMesh,
       "DrawShape": DrawShape,
@@ -49965,6 +50552,7 @@ var init_component_registry_generated = __esm({
       "FormField": FormField,
       "FormLayout": FormLayout,
       "FormSectionHeader": FormSectionHeader,
+      "FxOverlay": FxOverlay,
       "GameAudioToggle": GameAudioToggle,
       "GameHud": GameHud,
       "GameIcon": GameIcon,
@@ -50140,7 +50728,8 @@ __export(UISlotRenderer_exports, {
   SlotContentRenderer: () => SlotContentRenderer,
   SuspenseConfigProvider: () => SuspenseConfigProvider,
   UISlotComponent: () => UISlotComponent,
-  UISlotRenderer: () => UISlotRenderer
+  UISlotRenderer: () => UISlotRenderer,
+  renderPatternValue: () => renderPatternValue
 });
 function SuspenseConfigProvider({
   config,
@@ -50176,6 +50765,9 @@ function enrichFormFields(fields, entityDef) {
           type: entityField.type,
           required: entityField.required ?? false
         };
+        if (entityField.description) {
+          enriched.hint = entityField.description;
+        }
         if (entityField.values && entityField.values.length > 0) {
           enriched.values = entityField.values;
         } else if (entityField.enumValues && entityField.enumValues.length > 0) {
@@ -50199,6 +50791,9 @@ function enrichFormFields(fields, entityDef) {
       if (entityField.required && !("required" in obj)) {
         enriched.required = true;
       }
+      if (entityField.description && !obj.hint && !obj.help) {
+        enriched.hint = entityField.description;
+      }
       if (!obj.values && !obj.options) {
         if (entityField.values && entityField.values.length > 0) {
           enriched.values = entityField.values;
@@ -50214,6 +50809,32 @@ function enrichFormFields(fields, entityDef) {
     return field;
   });
 }
+function enrichDetailFields(fields, entityDef) {
+  const fieldMap = new Map(entityDef.fields.map((f3) => [f3.name, f3]));
+  const metaFor = (name) => {
+    const entityField = fieldMap.get(name);
+    if (!entityField) return void 0;
+    const meta = { type: entityField.type };
+    const values = entityField.values ?? entityField.enumValues;
+    if (values && values.length > 0) meta.values = values;
+    if (entityField.relation) meta.relation = entityField.relation.entity;
+    return meta;
+  };
+  return fields.map((field) => {
+    if (typeof field === "string") {
+      const meta = metaFor(field);
+      return meta ? { key: field, ...meta } : field;
+    }
+    if (field && typeof field === "object" && !Array.isArray(field) && !React94__default.isValidElement(field) && !(field instanceof Date)) {
+      const obj = field;
+      const fieldName = typeof obj.key === "string" ? obj.key : typeof obj.name === "string" ? obj.name : void 0;
+      if (!fieldName || obj.type) return field;
+      const meta = metaFor(fieldName);
+      return meta ? { ...obj, ...meta } : field;
+    }
+    return field;
+  });
+}
 function renderContainedPortal(t, slot, content, onDismiss) {
   const slotContent = /* @__PURE__ */ jsx(MaybeTraitScope, { sourceTrait: content.sourceTrait, children: /* @__PURE__ */ jsx(SlotContentRenderer, { content, onDismiss }) });
   const slotId = `slot-${slot}`;
@@ -50723,6 +51344,24 @@ function isPatternConfig(value) {
   const record = value;
   return "type" in record && typeof record.type === "string" && getComponentForPattern$1(record.type) !== null;
 }
+function renderPatternValue(value) {
+  if (value === null || value === void 0) return null;
+  if (typeof value === "boolean" || typeof value === "function") return null;
+  if (typeof value === "number") return value;
+  if (typeof value === "string") return renderPatternChildren(value, () => {
+  });
+  if (value instanceof Date) return value.toLocaleString();
+  if (React94__default.isValidElement(value)) return value;
+  if (Array.isArray(value)) {
+    return value.map((item, index) => /* @__PURE__ */ jsx(React94__default.Fragment, { children: renderPatternValue(item) }, index));
+  }
+  if (isPatternConfig(value)) {
+    const { type, ...props } = value;
+    return renderPatternChildren({ type, props }, () => {
+    });
+  }
+  return null;
+}
 function isPlainConfigObject(value) {
   if (React94__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
@@ -50924,9 +51563,9 @@ function SlotContentRenderer({
         finalProps.fields = keys.map((k, i) => ({ name: k, variant: i === 0 ? "h4" : "body" }));
       }
     }
-    const isFormPattern = FORM_PATTERNS.has(content.pattern) || content.pattern.includes("form");
-    if (isFormPattern && entityDef && Array.isArray(finalProps.fields) && finalProps.fields[0] !== "fn") {
-      finalProps.fields = enrichFormFields([...finalProps.fields], entityDef);
+    const fieldsContract = getPatternFieldsContract(content.pattern) ?? (getPatternDefinition(content.pattern) === null && content.pattern.includes("form") ? "form" : void 0);
+    if (fieldsContract && entityDef && Array.isArray(finalProps.fields) && finalProps.fields[0] !== "fn") {
+      finalProps.fields = fieldsContract === "form" ? enrichFormFields([...finalProps.fields], entityDef) : enrichDetailFields([...finalProps.fields], entityDef);
     }
     const acceptsChildren = PATTERNS_WITH_CHILDREN.has(content.pattern);
     return /* @__PURE__ */ jsx(
@@ -51036,7 +51675,7 @@ function UISlotRenderer({
   }
   return wrapped;
 }
-var scopeWrapLog, TRAIT_BINDING_RE, SuspenseConfigContext, SlotContainedContext, SLOT_SKELETON_MAP, FORM_PATTERNS, SELF_OVERLAY_PATTERNS, CONTENT_NODE_SLOTS, PATTERNS_WITH_CHILDREN;
+var scopeWrapLog, TRAIT_BINDING_RE, SuspenseConfigContext, SlotContainedContext, SLOT_SKELETON_MAP, SELF_OVERLAY_PATTERNS, CONTENT_NODE_SLOTS, PATTERNS_WITH_CHILDREN;
 var init_UISlotRenderer = __esm({
   "components/core/organisms/UISlotRenderer.tsx"() {
     "use client";
@@ -51067,12 +51706,6 @@ var init_UISlotRenderer = __esm({
       modal: "form",
       drawer: "form"
     };
-    FORM_PATTERNS = /* @__PURE__ */ new Set([
-      "form",
-      "form-section",
-      "inline-edit-form",
-      "wizard-step"
-    ]);
     SELF_OVERLAY_PATTERNS = /* @__PURE__ */ new Set(["modal", "confirm-dialog"]);
     CONTENT_NODE_SLOTS = /* @__PURE__ */ new Set([
       "logo",