@almadar/ui 5.25.1 → 5.26.1

package/dist/components/index.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import * as React81 from 'react';
-import React81__default, { useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, lazy, createContext, useLayoutEffect, useId, useSyncExternalStore } from 'react';
+import * as React79 from 'react';
+import React79__default, { useContext, useMemo, useRef, useEffect, useCallback, Suspense, useState, lazy, createContext, useLayoutEffect, useId, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import * as LucideIcons2 from 'lucide-react';
-import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, CheckCircle, XCircle, Wrench, RotateCcw, Send, Search, ChevronUp, ChevronDown, MoreHorizontal, Bug, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, ArrowRight, Pause, Play, SkipForward, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Code, GitBranch, Plus, Trash, ArrowLeft, Menu as Menu$1, Check, AlertTriangle, Trash2, Eraser, FileText, ZoomOut, Download, WrapText, Copy, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
+import { Loader2, X, List, Printer, ChevronRight, ChevronLeft, CheckCircle, XCircle, Wrench, RotateCcw, Send, Search, ChevronUp, ChevronDown, MoreHorizontal, Bug, Package, Calendar, Pencil, Eye, Image as Image$1, Upload, ZoomIn, ArrowRight, Pause, Play, SkipForward, TrendingUp, TrendingDown, Minus, AlertCircle, Circle, Clock, CheckCircle2, Code, FileText, WrapText, Check, Copy, HelpCircle, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, GitBranch, Plus, Trash, ArrowLeft, Menu as Menu$1, AlertTriangle, Trash2, Eraser, ZoomOut, Download, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 import * as TablerIcons from '@tabler/icons-react';
 import * as FaIcons from 'react-icons/fa';
@@ -116,18 +116,22 @@ var init_SvgBranch = __esm({
   "components/core/atoms/svg/SvgBranch.tsx"() {
     "use client";
     SvgBranch = ({
-      x,
-      y,
+      x = 5,
+      y = 50,
       variant = "fork",
       branches = 2,
       size = 1,
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
+      let inner;
       if (variant === "diamond") {
         const points = buildDiamondPoints(x, y, size);
-        return /* @__PURE__ */ jsx("g", { className, opacity, children: /* @__PURE__ */ jsx(
+        inner = /* @__PURE__ */ jsx("g", { className, opacity, children: /* @__PURE__ */ jsx(
           "polygon",
           {
             points,
@@ -137,23 +141,28 @@ var init_SvgBranch = __esm({
             strokeLinejoin: "round"
           }
         ) });
+      } else {
+        const paths = variant === "fork" ? buildForkPaths(x, y, branches, size) : buildMergePaths(x, y, branches, size);
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+          paths.map((d, i) => /* @__PURE__ */ jsx(
+            "path",
+            {
+              d,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2,
+              strokeLinecap: "round"
+            },
+            i
+          )),
+          variant === "fork" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color }),
+          variant === "merge" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color })
+        ] });
       }
-      const paths = variant === "fork" ? buildForkPaths(x, y, branches, size) : buildMergePaths(x, y, branches, size);
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-        paths.map((d, i) => /* @__PURE__ */ jsx(
-          "path",
-          {
-            d,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 2,
-            strokeLinecap: "round"
-          },
-          i
-        )),
-        variant === "fork" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color }),
-        variant === "merge" && /* @__PURE__ */ jsx("circle", { cx: x + 30 * size, cy: y, r: 3, fill: color })
-      ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: inner });
     };
     SvgBranch.displayName = "SvgBranch";
   }
@@ -163,20 +172,23 @@ var init_SvgConnection = __esm({
   "components/core/atoms/svg/SvgConnection.tsx"() {
     "use client";
     SvgConnection = ({
-      x1,
-      y1,
-      x2,
-      y2,
+      x1 = 10,
+      y1 = 50,
+      x2 = 90,
+      y2 = 50,
       variant = "solid",
       color = "var(--color-primary)",
       strokeWidth = 1.5,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const dashProps = variant === "solid" ? {} : {
         strokeDasharray: "8 6"
       };
-      return /* @__PURE__ */ jsx(
+      const inner = /* @__PURE__ */ jsx(
         "line",
         {
           className: [
@@ -194,24 +206,32 @@ var init_SvgConnection = __esm({
           ...dashProps
         }
       );
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgConnection.displayName = "SvgConnection";
   }
 });
-var flowIdCounter, SvgFlow;
+var flowIdCounter, DEFAULT_POINTS, SvgFlow;
 var init_SvgFlow = __esm({
   "components/core/atoms/svg/SvgFlow.tsx"() {
     "use client";
     flowIdCounter = 0;
+    DEFAULT_POINTS = [[10, 50], [50, 20], [90, 50]];
     SvgFlow = ({
-      points,
+      points = DEFAULT_POINTS,
       color = "var(--color-primary)",
       strokeWidth = 1.5,
       animated = false,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
-      const markerId = React81__default.useMemo(() => {
+      const markerId = React79__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -219,7 +239,7 @@ var init_SvgFlow = __esm({
         return null;
       }
       const pathData = points.map((pt, i) => `${i === 0 ? "M" : "L"}${pt[0]},${pt[1]}`).join(" ");
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
           "marker",
           {
@@ -248,6 +268,10 @@ var init_SvgFlow = __esm({
           }
         )
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgFlow.displayName = "SvgFlow";
   }
@@ -257,8 +281,8 @@ var init_SvgGrid = __esm({
   "components/core/atoms/svg/SvgGrid.tsx"() {
     "use client";
     SvgGrid = ({
-      x,
-      y,
+      x = 10,
+      y = 10,
       cols = 4,
       rows: rows2 = 3,
       spacing = 20,
@@ -266,10 +290,13 @@ var init_SvgGrid = __esm({
       color = "var(--color-primary)",
       opacity = 1,
       className,
-      highlights = []
+      highlights = [],
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const highlightSet = new Set(highlights);
-      return /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: rows2 }).map(
+      const inner = /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: rows2 }).map(
         (_, row) => Array.from({ length: cols }).map((_2, col) => {
           const index = row * cols + col;
           const isHighlighted = highlightSet.has(index);
@@ -288,6 +315,10 @@ var init_SvgGrid = __esm({
           );
         })
       ) });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgGrid.displayName = "SvgGrid";
   }
@@ -297,15 +328,18 @@ var init_SvgLobe = __esm({
   "components/core/atoms/svg/SvgLobe.tsx"() {
     "use client";
     SvgLobe = ({
-      cx,
-      cy,
+      cx = 50,
+      cy = 50,
       rx = 14,
       ry = 20,
       rotation = 0,
       shells = 2,
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
       const clampedShells = Math.max(1, Math.min(3, shells));
       const renderShell = (shellIndex) => {
@@ -340,7 +374,7 @@ var init_SvgLobe = __esm({
           )
         ] }, shellIndex);
       };
-      return /* @__PURE__ */ jsx(
+      const inner = /* @__PURE__ */ jsx(
         "g",
         {
           className,
@@ -349,6 +383,10 @@ var init_SvgLobe = __esm({
           children: Array.from({ length: clampedShells }, (_, i) => renderShell(i))
         }
       );
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgLobe.displayName = "SvgLobe";
   }
@@ -377,18 +415,21 @@ var init_SvgMesh = __esm({
   "components/core/atoms/svg/SvgMesh.tsx"() {
     "use client";
     SvgMesh = ({
-      cx,
-      cy,
+      cx = 60,
+      cy = 60,
       nodes = 6,
       radius = 50,
       color = "var(--color-primary)",
       connectionDensity = 0.5,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 120,
+      height = 120
     }) => {
       const positions = getNodePositions(cx, cy, nodes, radius);
       const connections = getConnections(nodes, connectionDensity);
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         connections.map(([a, b]) => /* @__PURE__ */ jsx(
           "line",
           {
@@ -413,6 +454,10 @@ var init_SvgMesh = __esm({
           i
         ))
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgMesh.displayName = "SvgMesh";
   }
@@ -554,74 +599,82 @@ var init_SvgMorph = __esm({
     };
     FlowArrow.displayName = "FlowArrow";
     SvgMorph = ({
-      x,
-      y,
+      x = 5,
+      y = 10,
       size = 1,
       variant = "generic",
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 130,
+      height = 50
     }) => {
       const gap = 40 * size;
       const midY = y + 10 * size;
+      let inner;
       if (variant === "text-to-code") {
         const leftEnd = x + 30 * size;
         const rightStart = leftEnd + gap;
-        return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
           /* @__PURE__ */ jsx(TextLines, { x, y, scale: size, color }),
           /* @__PURE__ */ jsx(FlowArrow, { x1: leftEnd, y: midY, x2: rightStart, scale: size, color }),
           /* @__PURE__ */ jsx(CodeBrackets, { x: rightStart, y, scale: size, color })
         ] });
-      }
-      if (variant === "code-to-app") {
+      } else if (variant === "code-to-app") {
         const leftEnd = x + 26 * size;
         const rightStart = leftEnd + gap;
-        return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
           /* @__PURE__ */ jsx(CodeBrackets, { x, y, scale: size, color }),
           /* @__PURE__ */ jsx(FlowArrow, { x1: leftEnd, y: midY, x2: rightStart, scale: size, color }),
           /* @__PURE__ */ jsx(AppRect, { x: rightStart, y, scale: size, color })
         ] });
+      } else {
+        const circleR = 10 * size;
+        const circleX = x + circleR;
+        const squareStart = x + circleR * 2 + gap;
+        const squareSize = circleR * 2;
+        inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: circleX,
+              cy: midY,
+              r: circleR,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2 * size
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            FlowArrow,
+            {
+              x1: circleX + circleR + 2 * size,
+              y: midY,
+              x2: squareStart,
+              scale: size,
+              color
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: squareStart,
+              y: midY - circleR,
+              width: squareSize,
+              height: squareSize,
+              rx: 3 * size,
+              fill: "none",
+              stroke: color,
+              strokeWidth: 2 * size
+            }
+          )
+        ] });
       }
-      const circleR = 10 * size;
-      const circleX = x + circleR;
-      const squareStart = x + circleR * 2 + gap;
-      const squareSize = circleR * 2;
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: circleX,
-            cy: midY,
-            r: circleR,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 2 * size
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FlowArrow,
-          {
-            x1: circleX + circleR + 2 * size,
-            y: midY,
-            x2: squareStart,
-            scale: size,
-            color
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: squareStart,
-            y: midY - circleR,
-            width: squareSize,
-            height: squareSize,
-            rx: 3 * size,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 2 * size
-          }
-        )
-      ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: inner });
     };
     SvgMorph.displayName = "SvgMorph";
   }
@@ -631,16 +684,19 @@ var init_SvgNode = __esm({
   "components/core/atoms/svg/SvgNode.tsx"() {
     "use client";
     SvgNode = ({
-      x,
-      y,
+      x = 50,
+      y = 50,
       r = 6,
       variant = "filled",
       color = "var(--color-primary)",
       opacity = 1,
       className,
-      label
+      label,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         variant === "pulse" && /* @__PURE__ */ jsx(
           "circle",
           {
@@ -678,6 +734,10 @@ var init_SvgNode = __esm({
           }
         )
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgNode.displayName = "SvgNode";
   }
@@ -699,16 +759,19 @@ var init_SvgPulse = __esm({
 }
 `;
     SvgPulse = ({
-      cx,
-      cy,
+      cx = 70,
+      cy = 70,
       rings = 3,
       maxRadius = 60,
       color = "var(--color-primary)",
       animated = true,
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 140,
+      height = 140
     }) => {
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         animated && /* @__PURE__ */ jsx("style", { children: PULSE_KEYFRAMES }),
         Array.from({ length: rings }).map((_, i) => {
           const ringRadius = (i + 1) / rings * maxRadius;
@@ -734,6 +797,10 @@ var init_SvgPulse = __esm({
         }),
         /* @__PURE__ */ jsx("circle", { cx, cy, r: 3, fill: color })
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgPulse.displayName = "SvgPulse";
   }
@@ -744,21 +811,24 @@ var init_SvgRing = __esm({
     "use client";
     ringIdCounter = 0;
     SvgRing = ({
-      cx,
-      cy,
+      cx = 50,
+      cy = 50,
       r = 40,
       variant = "solid",
       color = "var(--color-primary)",
       strokeWidth = 1.5,
       opacity = 1,
       className,
-      label
+      label,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
-      const gradientId = React81__default.useMemo(() => {
+      const gradientId = React79__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
-      return /* @__PURE__ */ jsxs("g", { className, opacity, children: [
+      const inner = /* @__PURE__ */ jsxs("g", { className, opacity, children: [
         variant === "glow" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "50%", children: [
             /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
@@ -791,6 +861,10 @@ var init_SvgRing = __esm({
           }
         )
       ] });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgRing.displayName = "SvgRing";
   }
@@ -802,15 +876,18 @@ var init_SvgShield = __esm({
     SHIELD_PATH = "M15,2 C15,2 5,5 2,6 C2,6 2,18 5,24 C8,30 15,34 15,34 C15,34 22,30 25,24 C28,18 28,6 28,6 C25,5 15,2 15,2 Z";
     CHECK_PATH = "M10,18 L14,22 L21,13";
     SvgShield = ({
-      x,
-      y,
+      x = 50,
+      y = 50,
       size = 1,
       variant = "outline",
       color = "var(--color-primary)",
       opacity = 1,
-      className
+      className,
+      asRoot = true,
+      width = 100,
+      height = 100
     }) => {
-      return /* @__PURE__ */ jsxs(
+      const inner = /* @__PURE__ */ jsxs(
         "g",
         {
           className,
@@ -841,6 +918,10 @@ var init_SvgShield = __esm({
           ]
         }
       );
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${width} ${height}`, width, height, children: inner });
+      }
+      return inner;
     };
     SvgShield.displayName = "SvgShield";
   }
@@ -850,20 +931,23 @@ var init_SvgStack = __esm({
   "components/core/atoms/svg/SvgStack.tsx"() {
     "use client";
     SvgStack = ({
-      x,
-      y,
+      x = 10,
+      y = 40,
       layers: rawLayers = 3,
       width = 60,
       height = 40,
       color = "var(--color-primary)",
       opacity = 1,
       className,
-      labels
+      labels,
+      asRoot = true,
+      svgWidth = 90,
+      svgHeight = 80
     }) => {
       const layers = Math.max(2, Math.min(4, rawLayers));
       const verticalOffset = 8;
       const horizontalOffset = 4;
-      return /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: layers }).map((_, i) => {
+      const inner = /* @__PURE__ */ jsx("g", { className, opacity, children: Array.from({ length: layers }).map((_, i) => {
         const layerIndex = layers - 1 - i;
         const layerX = x + layerIndex * horizontalOffset;
         const layerY = y - layerIndex * verticalOffset;
@@ -901,6 +985,10 @@ var init_SvgStack = __esm({
           )
         ] }, layerIndex);
       }) });
+      if (asRoot) {
+        return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${svgWidth} ${svgHeight}`, width: svgWidth, height: svgHeight, children: inner });
+      }
+      return inner;
     };
     SvgStack.displayName = "SvgStack";
   }
@@ -1792,12 +1880,20 @@ function doResolve(name) {
   if (asIs && typeof asIs === "object") return asIs;
   return LucideIcons2.HelpCircle;
 }
-var iconAliases, resolvedCache, sizeClasses, animationClasses, Icon;
+var colorTokenClasses, iconAliases, resolvedCache, sizeClasses, animationClasses, Icon;
 var init_Icon = __esm({
   "components/core/atoms/Icon.tsx"() {
     "use client";
     init_cn();
     init_iconFamily();
+    colorTokenClasses = {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error",
+      muted: "text-muted-foreground"
+    };
     iconAliases = {
       "close": LucideIcons2.X,
       "trash": LucideIcons2.Trash2,
@@ -1836,7 +1932,7 @@ var init_Icon = __esm({
       const directIcon = typeof icon === "string" ? void 0 : icon;
       const effectiveName = typeof icon === "string" ? icon : name;
       const family = useIconFamily();
-      const RenderedComponent = React81__default.useMemo(() => {
+      const RenderedComponent = React79__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
       }, [directIcon, effectiveName, family]);
@@ -1845,10 +1941,11 @@ var init_Icon = __esm({
         ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
         ...style
       };
+      const resolvedColor = color ? color in colorTokenClasses ? colorTokenClasses[color] : color : "text-current";
       const composedClassName = cn(
         sizeClasses[size],
         animationClasses[animation],
-        color ? color : "text-current",
+        resolvedColor,
         className
       );
       if (directIcon) {
@@ -1894,7 +1991,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React81__default.isValidElement(value)) {
+  if (React79__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -1970,7 +2067,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React81__default.forwardRef(
+    Button = React79__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -2036,7 +2133,7 @@ var init_Input = __esm({
   "components/core/atoms/Input.tsx"() {
     init_cn();
     init_Icon();
-    Input = React81__default.forwardRef(
+    Input = React79__default.forwardRef(
       ({
         className,
         inputType,
@@ -2157,7 +2254,7 @@ var Label;
 var init_Label = __esm({
   "components/core/atoms/Label.tsx"() {
     init_cn();
-    Label = React81__default.forwardRef(
+    Label = React79__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -2183,7 +2280,7 @@ var Textarea;
 var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
-    Textarea = React81__default.forwardRef(
+    Textarea = React79__default.forwardRef(
       ({ className, error, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "textarea",
@@ -2213,7 +2310,7 @@ var init_Select = __esm({
   "components/core/atoms/Select.tsx"() {
     init_cn();
     init_Icon();
-    Select = React81__default.forwardRef(
+    Select = React79__default.forwardRef(
       ({ className, options, placeholder, error, ...props }, ref) => {
         return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           /* @__PURE__ */ jsxs(
@@ -2255,7 +2352,7 @@ var Checkbox;
 var init_Checkbox = __esm({
   "components/core/atoms/Checkbox.tsx"() {
     init_cn();
-    Checkbox = React81__default.forwardRef(
+    Checkbox = React79__default.forwardRef(
       ({ className, label, id, ...props }, ref) => {
         const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
         return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -2346,7 +2443,7 @@ var init_Card = __esm({
       chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
       "tile-image-first": "p-0 overflow-hidden"
     };
-    Card = React81__default.forwardRef(
+    Card = React79__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -2384,9 +2481,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React79__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React79__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -2399,11 +2496,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React79__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React81__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React79__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -2456,7 +2553,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React81__default.forwardRef(
+    Badge = React79__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
@@ -2549,7 +2646,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React81__default.forwardRef(
+    FilterPill = React79__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -2626,7 +2723,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React81__default.forwardRef(
+    Spinner = React79__default.forwardRef(
       ({ className, size = "md", ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "div",
@@ -2705,13 +2802,12 @@ var init_Avatar = __esm({
       actionPayload
     }) => {
       const eventBus = useEventBus();
-      const [imgFailed, setImgFailed] = React81__default.useState(false);
-      React81__default.useEffect(() => {
+      const [imgFailed, setImgFailed] = React79__default.useState(false);
+      React79__default.useEffect(() => {
         setImgFailed(false);
       }, [src]);
       const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
       const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
-      const hasImage = !!src && !imgFailed;
       const hasIcon = !!IconComponent;
       const hasInitials = !!initials && !(hasIcon && !providedInitials);
       const getInitialsBackground = () => "bg-primary text-primary-foreground";
@@ -2737,15 +2833,13 @@ var init_Avatar = __esm({
             onClick: isClickable ? handleClick : void 0,
             role: isClickable ? "button" : void 0,
             tabIndex: isClickable ? 0 : void 0,
-            children: hasImage ? /* @__PURE__ */ jsx(
+            children: src && !imgFailed ? /* @__PURE__ */ jsx(
               "img",
               {
                 src,
                 alt: alt || "Avatar",
                 className: "w-full h-full object-cover",
-                onError: () => {
-                  setImgFailed(true);
-                }
+                onError: () => setImgFailed(true)
               }
             ) : hasInitials ? /* @__PURE__ */ jsx(
               "div",
@@ -2913,7 +3007,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React81__default.forwardRef(
+    Box = React79__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -2963,7 +3057,7 @@ var init_Box = __esm({
           onMouseLeave?.(e);
         }, [hoverEvent, eventBus, onMouseLeave]);
         const isClickable = action || onClick;
-        return React81__default.createElement(
+        return React79__default.createElement(
           Component,
           {
             ref,
@@ -3120,6 +3214,7 @@ var init_ProgressBar = __esm({
       primary: "bg-primary",
       success: "bg-success",
       warning: "bg-warning",
+      error: "bg-error",
       danger: "bg-error"
     };
     circularSizeClasses = {
@@ -3144,10 +3239,11 @@ var init_ProgressBar = __esm({
       const effectiveColor = color ?? variant;
       const effectiveShowPercentage = showPercentage || showLabel;
       if (progressType === "linear") {
+        const showHeader = label || effectiveShowPercentage;
         return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-          label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-foreground", children: label }),
-            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: "text-sm text-foreground font-medium", children: [
+          showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-foreground", children: label }),
+            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: cn("text-sm text-foreground font-medium", !label && "ml-auto"), children: [
               Math.round(percentage),
               "%"
             ] })
@@ -3232,10 +3328,11 @@ var init_ProgressBar = __esm({
         const stepValue = max / steps;
         const activeSteps = Math.floor(value / stepValue);
         const partialStep = value % stepValue / stepValue;
+        const showStepHeader = label || effectiveShowPercentage;
         return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-          label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }),
-            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          showStepHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+            label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }),
+            effectiveShowPercentage && /* @__PURE__ */ jsxs("span", { className: cn("text-sm text-muted-foreground", !label && "ml-auto"), children: [
               Math.round(percentage),
               "%"
             ] })
@@ -3285,7 +3382,7 @@ var init_Radio = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    Radio = React81__default.forwardRef(
+    Radio = React79__default.forwardRef(
       ({
         label,
         helperText,
@@ -3302,12 +3399,12 @@ var init_Radio = __esm({
         onChange,
         ...props
       }, ref) => {
-        const reactId = React81__default.useId();
+        const reactId = React79__default.useId();
         const baseId = id || `radio-${reactId}`;
         const hasError = !!error;
         const eventBus = useEventBus();
-        const [selected, setSelected] = React81__default.useState(value);
-        React81__default.useEffect(() => {
+        const [selected, setSelected] = React79__default.useState(value);
+        React79__default.useEffect(() => {
           if (value !== void 0) setSelected(value);
         }, [value]);
         const pick = (next, e) => {
@@ -3489,7 +3586,7 @@ var init_Switch = __esm({
   "components/core/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React81.forwardRef(
+    Switch = React79.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -3500,10 +3597,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React81.useState(
+        const [isChecked, setIsChecked] = React79.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React81.useEffect(() => {
+        React79.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -4332,7 +4429,7 @@ var Dialog;
 var init_Dialog = __esm({
   "components/core/atoms/Dialog.tsx"() {
     init_cn();
-    Dialog = React81__default.forwardRef(
+    Dialog = React79__default.forwardRef(
       ({
         role = "dialog",
         "aria-modal": ariaModal = true,
@@ -4358,7 +4455,7 @@ var Aside;
 var init_Aside = __esm({
   "components/core/atoms/Aside.tsx"() {
     init_cn();
-    Aside = React81__default.forwardRef(
+    Aside = React79__default.forwardRef(
       ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
     );
     Aside.displayName = "Aside";
@@ -4436,8 +4533,8 @@ var init_LawReferenceTooltip = __esm({
       className
     }) => {
       const { t } = useTranslate();
-      const [isVisible, setIsVisible] = React81__default.useState(false);
-      const timeoutRef = React81__default.useRef(null);
+      const [isVisible, setIsVisible] = React79__default.useState(false);
+      const timeoutRef = React79__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -4446,7 +4543,7 @@ var init_LawReferenceTooltip = __esm({
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         setIsVisible(false);
       };
-      React81__default.useEffect(() => {
+      React79__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -4656,7 +4753,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React81__default.forwardRef(
+    StatusDot = React79__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -4710,7 +4807,7 @@ var init_TrendIndicator = __esm({
       down: "trending-down",
       flat: "arrow-right"
     };
-    TrendIndicator = React81__default.forwardRef(
+    TrendIndicator = React79__default.forwardRef(
       ({
         className,
         value,
@@ -4777,7 +4874,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React81__default.forwardRef(
+    RangeSlider = React79__default.forwardRef(
       ({
         className,
         min = 0,
@@ -5373,7 +5470,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React81__default.forwardRef(
+    ContentSection = React79__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -5907,7 +6004,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React81__default.forwardRef(
+    AnimatedReveal = React79__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -6067,7 +6164,7 @@ var init_AnimatedGraphic = __esm({
   "components/marketing/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React81__default.forwardRef(
+    AnimatedGraphic = React79__default.forwardRef(
       ({
         src,
         svgContent,
@@ -6090,7 +6187,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React81__default.useCallback(
+        const setRef = React79__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -6196,7 +6293,6 @@ var init_Modal = __esm({
     init_Button();
     init_Dialog();
     init_Typography();
-    init_Overlay();
     init_cn();
     init_useEventBus();
     sizeClasses6 = {
@@ -6286,124 +6382,117 @@ var init_Modal = __esm({
         }
       };
       return createPortal(
-        /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Overlay,
-            {
-              isVisible: isOpen,
-              onClick: handleOverlayClick,
-              className: "z-[1000]"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: cn(
-                "fixed inset-0 z-[1001] pointer-events-none",
-                "flex items-start justify-center px-4 pb-4 pt-[10vh]",
-                "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
-              ),
-              children: /* @__PURE__ */ jsxs(
-                Dialog,
-                {
-                  ref: modalRef,
-                  open: true,
-                  className: cn(
-                    // Reset browser-default dialog chrome — we own styling. `static`
-                    // overrides the user-agent `position: absolute` so the parent
-                    // flex container's `justify-center` actually centers the dialog
-                    // (without this, the dialog drops out of flex flow and `m-0`
-                    // kills the user-agent's `margin: auto` centering, pinning the
-                    // dialog to top-left).
-                    "static m-0 p-0 border-0 bg-transparent",
-                    // Pre-existing dialog frame
-                    "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
-                    // Desktop sizing + viewport-aware floor.
-                    sizeClasses6[size],
-                    minWidthClasses[size],
-                    "max-h-[80vh]",
-                    // Mobile: take the entire screen. Override desktop max-w cap,
-                    // 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
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            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"
+            ),
+            style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
+            onClick: handleOverlayClick,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxs(
+              Dialog,
+              {
+                ref: modalRef,
+                open: true,
+                className: cn(
+                  // Reset browser-default dialog chrome — we own styling. `static`
+                  // overrides the user-agent `position: absolute` so the parent
+                  // flex container's `justify-center` actually centers the dialog
+                  // (without this, the dialog drops out of flex flow and `m-0`
+                  // kills the user-agent's `margin: auto` centering, pinning the
+                  // dialog to top-left).
+                  "static m-0 p-0 border-0 bg-transparent",
+                  // Pre-existing dialog frame
+                  "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
+                  // Desktop sizing + viewport-aware floor.
+                  sizeClasses6[size],
+                  minWidthClasses[size],
+                  "max-h-[80vh]",
+                  // Mobile: take the entire screen. Override desktop max-w cap,
+                  // 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
+                ),
+                style: dragY > 0 ? {
+                  transform: `translateY(${dragY}px)`,
+                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                } : void 0,
+                ...title && { "aria-labelledby": "modal-title" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
+                      onPointerDown: (e) => {
+                        if (!swipeDownToClose) return;
+                        dragStartY.current = e.clientY;
+                        isDragging.current = true;
+                        e.target.setPointerCapture(e.pointerId);
+                      },
+                      onPointerMove: (e) => {
+                        if (!isDragging.current) return;
+                        const dy = Math.max(0, e.clientY - dragStartY.current);
+                        setDragY(dy);
+                      },
+                      onPointerUp: () => {
+                        if (!isDragging.current) return;
+                        isDragging.current = false;
+                        if (dragY > 100) {
+                          handleClose();
+                        }
+                        setDragY(0);
+                      },
+                      onPointerCancel: () => {
+                        isDragging.current = false;
+                        setDragY(0);
+                      },
+                      children: /* @__PURE__ */ jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
+                    }
                   ),
-                  style: dragY > 0 ? {
-                    transform: `translateY(${dragY}px)`,
-                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                  } : void 0,
-                  ...title && { "aria-labelledby": "modal-title" },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
-                        onPointerDown: (e) => {
-                          if (!swipeDownToClose) return;
-                          dragStartY.current = e.clientY;
-                          isDragging.current = true;
-                          e.target.setPointerCapture(e.pointerId);
-                        },
-                        onPointerMove: (e) => {
-                          if (!isDragging.current) return;
-                          const dy = Math.max(0, e.clientY - dragStartY.current);
-                          setDragY(dy);
-                        },
-                        onPointerUp: () => {
-                          if (!isDragging.current) return;
-                          isDragging.current = false;
-                          if (dragY > 100) {
-                            handleClose();
+                  (title || showCloseButton) && /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      className: cn(
+                        "px-6 py-4 flex items-center justify-between",
+                        "border-b-[length:var(--border-width)] border-border"
+                      ),
+                      children: [
+                        title && /* @__PURE__ */ jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
+                        showCloseButton && /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            icon: "x",
+                            onClick: handleClose,
+                            "data-event": "CLOSE",
+                            "aria-label": t("aria.closeModal")
                           }
-                          setDragY(0);
-                        },
-                        onPointerCancel: () => {
-                          isDragging.current = false;
-                          setDragY(0);
-                        },
-                        children: /* @__PURE__ */ jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
-                      }
-                    ),
-                    (title || showCloseButton) && /* @__PURE__ */ jsxs(
-                      Box,
-                      {
-                        className: cn(
-                          "px-6 py-4 flex items-center justify-between",
-                          "border-b-[length:var(--border-width)] border-border"
-                        ),
-                        children: [
-                          title && /* @__PURE__ */ jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
-                          showCloseButton && /* @__PURE__ */ jsx(
-                            Button,
-                            {
-                              variant: "ghost",
-                              size: "sm",
-                              icon: "x",
-                              onClick: handleClose,
-                              "data-event": "CLOSE",
-                              "aria-label": t("aria.closeModal")
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
-                    footer && /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        className: cn(
-                          "px-6 py-4 bg-muted",
-                          "border-t-[length:var(--border-width)] border-border"
-                        ),
-                        children: footer
-                      }
-                    )
-                  ]
-                }
-              )
-            }
-          )
-        ] }),
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
+                  footer && /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      className: cn(
+                        "px-6 py-4 bg-muted",
+                        "border-t-[length:var(--border-width)] border-border"
+                      ),
+                      children: footer
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
         document.body
       );
     };
@@ -6780,7 +6869,7 @@ var init_ErrorBoundary = __esm({
         }
       );
     };
-    ErrorBoundary = class extends React81__default.Component {
+    ErrorBoundary = class extends React79__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -7832,7 +7921,7 @@ var init_Tooltip = __esm({
           setIsVisible(false);
         }, hideDelay);
       };
-      useEffect(() => {
+      useLayoutEffect(() => {
         if (isVisible) {
           updatePosition();
         }
@@ -7843,8 +7932,8 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React81__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-      const trigger = React81__default.cloneElement(triggerElement, {
+      const triggerElement = React79__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const trigger = React79__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -7991,8 +8080,8 @@ var init_Popover = __esm({
         onMouseEnter: handleOpen,
         onMouseLeave: handleClose
       };
-      const childElement = React81__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-      const triggerElement = React81__default.cloneElement(
+      const childElement = React79__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React79__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -8008,7 +8097,10 @@ var init_Popover = __esm({
             "bg-card border-2 border-border shadow-elevation-popover",
             className
           ),
-          style: computePopoverStyle(position, triggerRect, popoverWidth),
+          style: {
+            ...computePopoverStyle(position, triggerRect, popoverWidth),
+            ...popoverWidth === 0 ? { visibility: "hidden" } : void 0
+          },
           role: "dialog",
           onMouseEnter: trigger === "hover" ? handleOpen : void 0,
           onMouseLeave: trigger === "hover" ? handleClose : void 0,
@@ -8118,8 +8210,8 @@ var init_Menu = __esm({
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
       const subMenuSideClass = direction === "rtl" ? "right-full mr-2" : "left-full ml-2";
-      const triggerChild = React81__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
-      const triggerElement = React81__default.cloneElement(
+      const triggerChild = React79__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx(Typography, { variant: "small", as: "span", children: trigger });
+      const triggerElement = React79__default.cloneElement(
         triggerChild,
         {
           ref: triggerRef,
@@ -8526,7 +8618,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect71, useRef: useRef68, useCallback: useCallback116, useState: useState102 } = React81__default;
+      const { useEffect: useEffect71, useRef: useRef68, useCallback: useCallback114, useState: useState100 } = React79__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 }) {
@@ -8571,8 +8663,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState102(null);
-        const handleMapClick = useCallback116((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState100(null);
+        const handleMapClick = useCallback114((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -8581,7 +8673,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback116((marker) => {
+        const handleMarkerClick = useCallback114((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -8590,7 +8682,7 @@ var init_MapView = __esm({
         return /* @__PURE__ */ jsx(
           Box,
           {
-            className: cn("relative isolate w-full overflow-hidden rounded-lg", className),
+            className: cn("relative isolate z-0 w-full overflow-hidden rounded-lg", className),
             style: { height },
             "data-testid": "map-view",
             children: /* @__PURE__ */ jsxs(
@@ -8772,7 +8864,7 @@ function InputPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React81__default.useState(value);
+  const [localValue, setLocalValue] = React79__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8810,7 +8902,7 @@ function TextareaPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React81__default.useState(value);
+  const [localValue, setLocalValue] = React79__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8842,7 +8934,7 @@ function SelectPattern({
   fieldName
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React81__default.useState(value);
+  const [localValue, setLocalValue] = React79__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8871,7 +8963,7 @@ function CheckboxPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React81__default.useState(checked);
+  const [localChecked, setLocalChecked] = React79__default.useState(checked);
   const handleChange = (e) => {
     setLocalChecked(e.target.checked);
     if (onChange) {
@@ -9185,9 +9277,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React81.useState(false);
+  const [isPressed, setIsPressed] = React79.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React81.useCallback(
+  const handlePointerDown = React79.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -9197,7 +9289,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React81.useCallback(
+  const handlePointerUp = React79.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -9207,7 +9299,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React81.useCallback(
+  const handlePointerLeave = React79.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -9284,8 +9376,8 @@ function ActionButtons({
   disabled
 }) {
   const eventBus = useEventBus();
-  const [activeButtons, setActiveButtons] = React81.useState(/* @__PURE__ */ new Set());
-  const handlePress = React81.useCallback(
+  const [activeButtons, setActiveButtons] = React79.useState(/* @__PURE__ */ new Set());
+  const handlePress = React79.useCallback(
     (id) => {
       setActiveButtons((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -9293,7 +9385,7 @@ function ActionButtons({
     },
     [actionEvent, eventBus, onAction]
   );
-  const handleRelease = React81.useCallback(
+  const handleRelease = React79.useCallback(
     (id) => {
       setActiveButtons((prev) => {
         const next = new Set(prev);
@@ -9583,7 +9675,7 @@ var init_AuthLayout = __esm({
     init_Stack();
     init_Typography();
     AuthLayout = ({
-      appName = "{{APP_TITLE}}",
+      appName = "My App",
       logo,
       backgroundImage,
       showBranding = true,
@@ -12185,6 +12277,263 @@ var init_katex_min = __esm({
   "node_modules/katex/dist/katex.min.css"() {
   }
 });
+var Tabs;
+var init_Tabs = __esm({
+  "components/core/molecules/Tabs.tsx"() {
+    "use client";
+    init_Icon();
+    init_Badge();
+    init_Typography();
+    init_Box();
+    init_cn();
+    init_useEventBus();
+    Tabs = ({
+      items,
+      tabs,
+      defaultActiveTab,
+      activeTab: controlledActiveTab,
+      onTabChange,
+      tabChangeEvent,
+      variant = "default",
+      orientation = "horizontal",
+      className
+    }) => {
+      const rawItems = items ?? tabs ?? [];
+      const safeItems = rawItems.map(({ id, value, ...rest }) => ({
+        ...rest,
+        id: id || value || ""
+      }));
+      const eventBus = useEventBus();
+      const { t } = useTranslate();
+      const initialActive = safeItems.find((item) => item.active)?.id;
+      const [internalActiveTab, setInternalActiveTab] = useState(
+        defaultActiveTab || initialActive || safeItems[0]?.id || ""
+      );
+      const activeTab = controlledActiveTab !== void 0 ? controlledActiveTab : internalActiveTab;
+      const tabRefs = useRef({});
+      const handleTabChange = (tabId, tabEvent) => {
+        if (controlledActiveTab === void 0) {
+          setInternalActiveTab(tabId);
+        }
+        onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
+        if (tabEvent) {
+          eventBus.emit(`UI:${tabEvent}`, { tabId });
+        }
+      };
+      const handleKeyDown = (e, index) => {
+        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+          e.preventDefault();
+          const direction = e.key === "ArrowLeft" ? -1 : 1;
+          const nextIndex = (index + direction + safeItems.length) % safeItems.length;
+          const nextTab = safeItems[nextIndex];
+          if (nextTab && !nextTab.disabled) {
+            handleTabChange(nextTab.id);
+            tabRefs.current[nextTab.id]?.focus();
+          }
+        } else if (e.key === "Home" || e.key === "End") {
+          e.preventDefault();
+          const targetIndex = e.key === "Home" ? 0 : safeItems.length - 1;
+          const targetTab = safeItems[targetIndex];
+          if (targetTab && !targetTab.disabled) {
+            handleTabChange(targetTab.id);
+            tabRefs.current[targetTab.id]?.focus();
+          }
+        }
+      };
+      const activeTabContent = safeItems.find((item) => item.id === activeTab)?.content;
+      if (safeItems.length === 0) {
+        return /* @__PURE__ */ jsx(Box, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "py-4", children: t("empty.noItems") }) });
+      }
+      const variantClasses2 = {
+        default: [
+          "border-b-[length:var(--border-width)] border-transparent",
+          "hover:border-muted-foreground",
+          "data-[active=true]:border-primary"
+        ].join(" "),
+        pills: [
+          "rounded-sm",
+          "data-[active=true]:bg-primary",
+          "data-[active=true]:text-primary-foreground"
+        ].join(" "),
+        underline: [
+          "border-b-[length:var(--border-width)] border-transparent",
+          "data-[active=true]:border-primary"
+        ].join(" ")
+      };
+      return /* @__PURE__ */ jsxs(Box, { className: cn("w-full", className), children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "tablist",
+            className: cn(
+              "flex",
+              // Horizontal tab strip becomes a horizontally-scrollable lane
+              // below its container width — phones with many tabs scroll
+              // instead of clipping. `snap-x` snaps to each tab; the
+              // scrollbar is hidden for a cleaner affordance (the swipe
+              // gesture is the discoverability cue).
+              orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-border overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden" : "flex-col border-r-[length:var(--border-width)] border-border",
+              variant === "pills" && "gap-1 p-1 bg-muted border-0 rounded-md",
+              variant === "underline" && orientation === "vertical" && "border-b-0"
+            ),
+            children: safeItems.map((item, index) => {
+              const isActive = item.id === activeTab;
+              const isDisabled = item.disabled;
+              return /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  as: "button",
+                  ref: (el) => {
+                    tabRefs.current[item.id] = el;
+                  },
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-controls": `tabpanel-${item.id}`,
+                  "aria-disabled": isDisabled,
+                  onClick: () => !isDisabled && handleTabChange(item.id, item.event),
+                  onKeyDown: (e) => handleKeyDown(e, index),
+                  "data-active": isActive,
+                  className: cn(
+                    "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all whitespace-nowrap",
+                    orientation === "horizontal" && "snap-start shrink-0",
+                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    isDisabled && "opacity-50 cursor-not-allowed",
+                    variantClasses2[variant],
+                    isActive ? variant === "pills" ? "text-primary-foreground font-bold" : "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
+                  ),
+                  children: [
+                    item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm" })),
+                    /* @__PURE__ */ jsx(Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
+                    item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge })
+                  ]
+                },
+                item.id
+              );
+            })
+          }
+        ),
+        activeTabContent !== void 0 && activeTabContent !== null && /* @__PURE__ */ jsx(
+          Box,
+          {
+            role: "tabpanel",
+            id: `tabpanel-${activeTab}`,
+            "aria-labelledby": `tab-${activeTab}`,
+            className: "mt-4",
+            children: activeTabContent
+          }
+        )
+      ] });
+    };
+    Tabs.displayName = "Tabs";
+  }
+});
+var ICON_NAME_ALIASES, lookStyles3, EmptyState;
+var init_EmptyState = __esm({
+  "components/core/molecules/EmptyState.tsx"() {
+    "use client";
+    init_cn();
+    init_atoms2();
+    init_Box();
+    init_Icon();
+    init_Stack();
+    init_Typography();
+    init_useEventBus();
+    ICON_NAME_ALIASES = {
+      check: "check-circle",
+      error: "x-circle",
+      warning: "alert-circle"
+    };
+    lookStyles3 = {
+      "icon-only": "",
+      illustrated: "[&_svg]:w-32 [&_svg]:h-32",
+      "text-only": "[&_svg]:hidden",
+      mascot: "[&_svg]:w-24 [&_svg]:h-24 [&_svg]:rounded-pill"
+    };
+    EmptyState = ({
+      icon,
+      title,
+      message,
+      description,
+      actionLabel,
+      onAction,
+      className,
+      destructive,
+      variant,
+      actionEvent,
+      look = "icon-only"
+    }) => {
+      const eventBus = useEventBus();
+      const { t } = useTranslate();
+      const handleAction = () => {
+        if (actionEvent) eventBus.emit(`UI:${actionEvent}`, {});
+        onAction?.();
+      };
+      const iconName = typeof icon === "string" ? ICON_NAME_ALIASES[icon] ?? icon : void 0;
+      const iconComponent = typeof icon === "function" ? icon : void 0;
+      const hasIcon = Boolean(iconName || iconComponent);
+      const isDestructive = destructive || variant === "error";
+      const isSuccess = variant === "success";
+      const displayText = title || message || t("empty.noItems");
+      return /* @__PURE__ */ jsxs(
+        VStack,
+        {
+          align: "center",
+          className: cn(
+            "justify-center py-12 text-center",
+            lookStyles3[look],
+            className
+          ),
+          children: [
+            hasIcon && /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: cn(
+                  "mb-4 rounded-full p-3",
+                  isDestructive ? "bg-error/10" : isSuccess ? "bg-success/10" : "bg-muted"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    ...iconName ? { name: iconName } : { icon: iconComponent },
+                    className: cn(
+                      "h-8 w-8",
+                      isDestructive ? "text-error" : isSuccess ? "text-success" : "text-muted-foreground"
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "h3",
+                className: cn(
+                  "text-lg font-medium",
+                  isDestructive ? "text-error" : isSuccess ? "text-success" : "text-foreground"
+                ),
+                children: displayText
+              }
+            ),
+            description && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-1 text-muted-foreground max-w-sm", children: description }),
+            actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "mt-4",
+                variant: isDestructive ? "danger" : "primary",
+                onClick: handleAction,
+                children: actionLabel
+              }
+            )
+          ]
+        }
+      );
+    };
+    EmptyState.displayName = "EmptyState";
+  }
+});
 function computeFoldRegions(code) {
   const lines = code.split("\n");
   const regions = [];
@@ -12222,9 +12571,32 @@ function computeFoldRegions(code) {
 function toCodeLanguage(value) {
   return value && CODE_LANGUAGE_SET.has(value) ? value : "text";
 }
-var orbStyleOverrides, orbStyle, loloStyleOverrides, loloStyle, log5, CODE_LANGUAGES, CODE_LANGUAGE_SET, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, CodeBlock;
+function generateDiff(oldVal, newVal) {
+  const oldLines = oldVal.split("\n");
+  const newLines = newVal.split("\n");
+  const diff = [];
+  const maxLen = Math.max(oldLines.length, newLines.length);
+  for (let i = 0; i < maxLen; i++) {
+    const oldLine = oldLines[i];
+    const newLine = newLines[i];
+    if (oldLine === newLine) {
+      diff.push({ type: "context", content: oldLine ?? "", lineNumber: i + 1 });
+    } else {
+      if (oldLine !== void 0) diff.push({ type: "remove", content: oldLine, lineNumber: i + 1 });
+      if (newLine !== void 0) diff.push({ type: "add", content: newLine, lineNumber: i + 1 });
+    }
+  }
+  return diff;
+}
+var orbStyleOverrides, orbStyle, loloStyleOverrides, loloStyle, log5, CODE_LANGUAGES, CODE_LANGUAGE_SET, DIFF_STYLES, LINE_PROPS_FN, HIDDEN_LINE_NUMBERS, CodeBlock;
 var init_CodeBlock = __esm({
   "components/core/molecules/markdown/CodeBlock.tsx"() {
+    init_cn();
+    init_atoms2();
+    init_Tabs();
+    init_LoadingState();
+    init_ErrorState();
+    init_EmptyState();
     init_Box();
     init_Button();
     init_Badge();
@@ -12331,9 +12703,14 @@ var init_CodeBlock = __esm({
       "lolo"
     ];
     CODE_LANGUAGE_SET = new Set(CODE_LANGUAGES);
+    DIFF_STYLES = {
+      add: { bg: "bg-success/10", prefix: "+", text: "text-success" },
+      remove: { bg: "bg-error/10", prefix: "-", text: "text-error" },
+      context: { bg: "", prefix: " ", text: "text-foreground" }
+    };
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React81__default.memo(
+    CodeBlock = React79__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -12344,7 +12721,20 @@ var init_CodeBlock = __esm({
         className,
         editable = false,
         onChange,
-        errorLines
+        errorLines,
+        // viewer props
+        title,
+        mode = "code",
+        diff: propDiff,
+        oldValue,
+        newValue,
+        showLineNumbers = false,
+        wordWrap = false,
+        files,
+        actions,
+        isLoading = false,
+        error,
+        showCopy
       }) => {
         const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
         const isOrb = language === "orb";
@@ -12356,6 +12746,20 @@ var init_CodeBlock = __esm({
         const codeRef = useRef(null);
         const savedScrollLeftRef = useRef(0);
         const [copied, setCopied] = useState(false);
+        const [wrap, setWrap] = useState(wordWrap);
+        const [activeFileIndex, setActiveFileIndex] = useState(0);
+        const activeFile = files?.[activeFileIndex];
+        const activeCode = activeFile?.code ?? code;
+        const activeLanguage = activeFile?.language ?? language;
+        const diffLines = useMemo(() => {
+          if (propDiff) return propDiff;
+          if (mode === "diff" && oldValue !== void 0 && newValue !== void 0) {
+            return generateDiff(oldValue, newValue);
+          }
+          return null;
+        }, [propDiff, mode, oldValue, newValue]);
+        const isViewerMode = !!(title || files || showLineNumbers || diffLines || mode === "diff" || actions);
+        const effectiveCopy = showCopy ?? showCopyButton;
         const [editableValue, setEditableValue] = useState(code);
         const [editableTextareaKey, setEditableTextareaKey] = useState(0);
         const lastPropCodeRef = useRef(code);
@@ -12526,13 +12930,13 @@ var init_CodeBlock = __esm({
         }, [language, code]);
         const handleCopy = async () => {
           try {
-            await navigator.clipboard.writeText(code);
+            await navigator.clipboard.writeText(activeCode);
             setCopied(true);
-            eventBus.emit("UI:COPY_CODE", { language, success: true });
+            eventBus.emit("UI:COPY_CODE", { language: activeLanguage, success: true });
             setTimeout(() => setCopied(false), 2e3);
           } catch (err) {
             log5.error("Failed to copy code", { error: err instanceof Error ? err : String(err) });
-            eventBus.emit("UI:COPY_CODE", { language, success: false });
+            eventBus.emit("UI:COPY_CODE", { language: activeLanguage, success: false });
           }
         };
         const handleSelectionCopy = useCallback((e) => {
@@ -12585,11 +12989,134 @@ var init_CodeBlock = __esm({
               }
             });
           }
-          const full = code.split("\n").slice(a, endLine + 1).join("\n");
+          const full = activeCode.split("\n").slice(a, endLine + 1).join("\n");
           e.clipboardData.setData("text/plain", full);
           e.preventDefault();
         }, [code]);
-        const hasHeader = showLanguageBadge || showCopyButton;
+        if (isLoading) {
+          return /* @__PURE__ */ jsx(LoadingState, { message: t("common.loading"), className });
+        }
+        if (error) {
+          return /* @__PURE__ */ jsx(ErrorState, { title: t("display.codeViewerError"), message: error.message, className });
+        }
+        if (isViewerMode && !activeCode && !diffLines) {
+          return /* @__PURE__ */ jsx(EmptyState, { icon: Code, title: t("display.noCode"), description: "No code to display.", className });
+        }
+        if (isViewerMode) {
+          const tabItems = files?.map((file, idx) => ({
+            id: `file-${idx}`,
+            label: file.label,
+            content: null
+          }));
+          const lines = activeCode.split("\n");
+          return /* @__PURE__ */ jsx(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            tabItems && tabItems.length > 1 && /* @__PURE__ */ jsx(Box, { className: "border-b border-border", children: /* @__PURE__ */ jsx(
+              Tabs,
+              {
+                tabs: tabItems,
+                activeTab: `file-${activeFileIndex}`,
+                onTabChange: (id) => {
+                  const idx = parseInt(id.replace("file-", ""), 10);
+                  setActiveFileIndex(idx);
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              HStack,
+              {
+                gap: "sm",
+                align: "center",
+                justify: "between",
+                className: "px-4 py-2 border-b border-border bg-muted/30",
+                children: [
+                  /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+                    /* @__PURE__ */ jsx(Icon, { icon: mode === "diff" ? FileText : Code, size: "sm", className: "text-muted-foreground" }),
+                    title && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "truncate", children: title }),
+                    activeLanguage && activeLanguage !== "text" && /* @__PURE__ */ jsx(Badge, { variant: "default", children: activeLanguage })
+                  ] }),
+                  /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        icon: WrapText,
+                        onClick: () => setWrap(!wrap),
+                        className: cn(wrap && "text-primary")
+                      }
+                    ),
+                    effectiveCopy && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        icon: copied ? Check : Copy,
+                        onClick: handleCopy,
+                        className: cn(copied && "text-success")
+                      }
+                    ),
+                    actions?.map((action, idx) => /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "default",
+                        className: "cursor-pointer hover:opacity-80 transition-opacity",
+                        onClick: () => {
+                          if (action.event) eventBus.emit(`UI:${action.event}`, {});
+                        },
+                        children: action.label
+                      },
+                      idx
+                    ))
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { className: "overflow-auto bg-muted/20", style: { maxHeight }, children: diffLines ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, className: "font-mono text-xs", children: diffLines.map((line, idx) => {
+              const style = DIFF_STYLES[line.type];
+              return /* @__PURE__ */ jsxs(HStack, { gap: "none", align: "start", className: cn(style.bg, "px-4 py-0.5"), children: [
+                showLineNumbers && /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "caption",
+                    color: "secondary",
+                    className: "w-8 text-right mr-3 select-none tabular-nums flex-shrink-0",
+                    children: line.lineNumber ?? ""
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Typography,
+                  {
+                    variant: "caption",
+                    className: cn("font-mono flex-1 min-w-0", style.text, wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"),
+                    children: [
+                      /* @__PURE__ */ jsx(Box, { as: "span", className: "select-none opacity-50 mr-2", children: style.prefix }),
+                      line.content
+                    ]
+                  }
+                )
+              ] }, idx);
+            }) }) : /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, className: "font-mono text-xs", children: lines.map((line, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "none", align: "start", className: "px-4 py-0.5 hover:bg-muted/50", children: [
+              showLineNumbers && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  color: "secondary",
+                  className: "w-8 text-right mr-4 select-none tabular-nums flex-shrink-0",
+                  children: idx + 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  className: cn("font-mono flex-1 min-w-0", wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"),
+                  children: line || " "
+                }
+              )
+            ] }, idx)) }) })
+          ] }) });
+        }
+        const hasHeader = showLanguageBadge || effectiveCopy;
         return /* @__PURE__ */ jsxs(Box, { className: `relative group ${className || ""}`, style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
           hasHeader && /* @__PURE__ */ jsxs(
             HStack,
@@ -12599,7 +13126,7 @@ var init_CodeBlock = __esm({
               className: "px-3 py-2 bg-[var(--color-card)] rounded-t-lg border-b border-gray-700",
               children: [
                 showLanguageBadge && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: language }),
-                showCopyButton && /* @__PURE__ */ jsx(
+                effectiveCopy && /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "ghost",
@@ -12758,7 +13285,7 @@ var init_CodeBlock = __esm({
           )
         ] });
       },
-      (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange && prev.errorLines === next.errorLines
+      (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.showCopy === next.showCopy && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange && prev.errorLines === next.errorLines && prev.mode === next.mode && prev.title === next.title && prev.diff === next.diff && prev.files === next.files && prev.actions === next.actions && prev.isLoading === next.isLoading && prev.error === next.error
     );
     CodeBlock.displayName = "CodeBlock";
   }
@@ -12770,8 +13297,8 @@ var init_MarkdownContent = __esm({
     init_Box();
     init_CodeBlock();
     init_cn();
-    MarkdownContent = React81__default.memo(
-      ({ content, direction, className }) => {
+    MarkdownContent = React79__default.memo(
+      ({ content, direction = "ltr", className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
         return /* @__PURE__ */ jsx(
@@ -13866,7 +14393,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React81__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React79__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode,
                     {
                       state,
@@ -15015,110 +15542,6 @@ var init_BookTableOfContents = __esm({
     BookTableOfContents.displayName = "BookTableOfContents";
   }
 });
-var ICON_NAME_ALIASES, lookStyles3, EmptyState;
-var init_EmptyState = __esm({
-  "components/core/molecules/EmptyState.tsx"() {
-    "use client";
-    init_cn();
-    init_atoms2();
-    init_Box();
-    init_Icon();
-    init_Stack();
-    init_Typography();
-    init_useEventBus();
-    ICON_NAME_ALIASES = {
-      check: "check-circle",
-      error: "x-circle",
-      warning: "alert-circle"
-    };
-    lookStyles3 = {
-      "icon-only": "",
-      illustrated: "[&_svg]:w-32 [&_svg]:h-32",
-      "text-only": "[&_svg]:hidden",
-      mascot: "[&_svg]:w-24 [&_svg]:h-24 [&_svg]:rounded-pill"
-    };
-    EmptyState = ({
-      icon,
-      title,
-      message,
-      description,
-      actionLabel,
-      onAction,
-      className,
-      destructive,
-      variant,
-      actionEvent,
-      look = "icon-only"
-    }) => {
-      const eventBus = useEventBus();
-      const { t } = useTranslate();
-      const handleAction = () => {
-        if (actionEvent) eventBus.emit(`UI:${actionEvent}`, {});
-        onAction?.();
-      };
-      const iconName = typeof icon === "string" ? ICON_NAME_ALIASES[icon] ?? icon : void 0;
-      const iconComponent = typeof icon === "function" ? icon : void 0;
-      const hasIcon = Boolean(iconName || iconComponent);
-      const isDestructive = destructive || variant === "error";
-      const isSuccess = variant === "success";
-      const displayText = title || message || t("empty.noItems");
-      return /* @__PURE__ */ jsxs(
-        VStack,
-        {
-          align: "center",
-          className: cn(
-            "justify-center py-12 text-center",
-            lookStyles3[look],
-            className
-          ),
-          children: [
-            hasIcon && /* @__PURE__ */ jsx(
-              Box,
-              {
-                className: cn(
-                  "mb-4 rounded-full p-3",
-                  isDestructive ? "bg-error/10" : isSuccess ? "bg-success/10" : "bg-muted"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    ...iconName ? { name: iconName } : { icon: iconComponent },
-                    className: cn(
-                      "h-8 w-8",
-                      isDestructive ? "text-error" : isSuccess ? "text-success" : "text-muted-foreground"
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "h3",
-                className: cn(
-                  "text-lg font-medium",
-                  isDestructive ? "text-error" : isSuccess ? "text-success" : "text-foreground"
-                ),
-                children: displayText
-              }
-            ),
-            description && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-1 text-muted-foreground max-w-sm", children: description }),
-            actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: "mt-4",
-                variant: isDestructive ? "danger" : "primary",
-                onClick: handleAction,
-                children: actionLabel
-              }
-            )
-          ]
-        }
-      );
-    };
-    EmptyState.displayName = "EmptyState";
-  }
-});
 
 // components/core/organisms/book/types.ts
 function resolveFieldMap(fieldMap) {
@@ -15471,7 +15894,7 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
-      return React81__default.createElement(
+      return React79__default.createElement(
         Component,
         {
           className: cn(
@@ -19960,449 +20383,6 @@ var init_ClassifierBoard = __esm({
     ClassifierBoard.displayName = "ClassifierBoard";
   }
 });
-function CodeView({
-  data,
-  label,
-  defaultExpanded = false,
-  className
-}) {
-  const { t } = useTranslate();
-  const [expanded, setExpanded] = useState(defaultExpanded);
-  const jsonString = JSON.stringify(data, null, 2);
-  return /* @__PURE__ */ jsxs(VStack, { className: cn("rounded-lg border border-border overflow-hidden", className), gap: "none", children: [
-    /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between p-2 bg-muted", gap: "sm", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground font-medium", children: label ?? t("stateArchitect.viewCode") }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setExpanded(!expanded), className: "text-xs", children: expanded ? t("stateArchitect.hideJson") : t("stateArchitect.showJson") })
-    ] }),
-    expanded && /* @__PURE__ */ jsx(Box, { className: "p-3 bg-background overflow-x-auto", children: /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "caption",
-        className: "text-foreground font-mono whitespace-pre text-xs leading-relaxed block",
-        children: jsonString
-      }
-    ) })
-  ] });
-}
-var init_CodeView = __esm({
-  "components/game/organisms/puzzles/state-architect/CodeView.tsx"() {
-    init_atoms2();
-    init_cn();
-    CodeView.displayName = "CodeView";
-  }
-});
-var Tabs;
-var init_Tabs = __esm({
-  "components/core/molecules/Tabs.tsx"() {
-    "use client";
-    init_Icon();
-    init_Badge();
-    init_Typography();
-    init_Box();
-    init_cn();
-    init_useEventBus();
-    Tabs = ({
-      items,
-      tabs,
-      defaultActiveTab,
-      activeTab: controlledActiveTab,
-      onTabChange,
-      tabChangeEvent,
-      variant = "default",
-      orientation = "horizontal",
-      className
-    }) => {
-      const rawItems = items ?? tabs ?? [];
-      const safeItems = rawItems.map(({ id, value, ...rest }) => ({
-        ...rest,
-        id: id || value || ""
-      }));
-      const eventBus = useEventBus();
-      const { t } = useTranslate();
-      const initialActive = safeItems.find((item) => item.active)?.id;
-      const [internalActiveTab, setInternalActiveTab] = useState(
-        defaultActiveTab || initialActive || safeItems[0]?.id || ""
-      );
-      const activeTab = controlledActiveTab !== void 0 ? controlledActiveTab : internalActiveTab;
-      const tabRefs = useRef({});
-      const handleTabChange = (tabId, tabEvent) => {
-        if (controlledActiveTab === void 0) {
-          setInternalActiveTab(tabId);
-        }
-        onTabChange?.(tabId);
-        if (tabChangeEvent) {
-          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
-        }
-        if (tabEvent) {
-          eventBus.emit(`UI:${tabEvent}`, { tabId });
-        }
-      };
-      const handleKeyDown = (e, index) => {
-        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-          e.preventDefault();
-          const direction = e.key === "ArrowLeft" ? -1 : 1;
-          const nextIndex = (index + direction + safeItems.length) % safeItems.length;
-          const nextTab = safeItems[nextIndex];
-          if (nextTab && !nextTab.disabled) {
-            handleTabChange(nextTab.id);
-            tabRefs.current[nextTab.id]?.focus();
-          }
-        } else if (e.key === "Home" || e.key === "End") {
-          e.preventDefault();
-          const targetIndex = e.key === "Home" ? 0 : safeItems.length - 1;
-          const targetTab = safeItems[targetIndex];
-          if (targetTab && !targetTab.disabled) {
-            handleTabChange(targetTab.id);
-            tabRefs.current[targetTab.id]?.focus();
-          }
-        }
-      };
-      const activeTabContent = safeItems.find((item) => item.id === activeTab)?.content;
-      if (safeItems.length === 0) {
-        return /* @__PURE__ */ jsx(Box, { className: cn("w-full", className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "py-4", children: t("empty.noItems") }) });
-      }
-      const variantClasses2 = {
-        default: [
-          "border-b-[length:var(--border-width)] border-transparent",
-          "hover:border-muted-foreground",
-          "data-[active=true]:border-primary"
-        ].join(" "),
-        pills: [
-          "rounded-sm",
-          "data-[active=true]:bg-primary",
-          "data-[active=true]:text-primary-foreground"
-        ].join(" "),
-        underline: [
-          "border-b-[length:var(--border-width)] border-transparent",
-          "data-[active=true]:border-primary"
-        ].join(" ")
-      };
-      return /* @__PURE__ */ jsxs(Box, { className: cn("w-full", className), children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            role: "tablist",
-            className: cn(
-              "flex",
-              // Horizontal tab strip becomes a horizontally-scrollable lane
-              // below its container width — phones with many tabs scroll
-              // instead of clipping. `snap-x` snaps to each tab; the
-              // scrollbar is hidden for a cleaner affordance (the swipe
-              // gesture is the discoverability cue).
-              orientation === "horizontal" ? "flex-row border-b-[length:var(--border-width)] border-border overflow-x-auto snap-x snap-mandatory [&::-webkit-scrollbar]:hidden" : "flex-col border-r-[length:var(--border-width)] border-border",
-              variant === "pills" && "gap-1 p-1 bg-muted border-0 rounded-md",
-              variant === "underline" && orientation === "vertical" && "border-b-0"
-            ),
-            children: safeItems.map((item, index) => {
-              const isActive = item.id === activeTab;
-              const isDisabled = item.disabled;
-              return /* @__PURE__ */ jsxs(
-                Box,
-                {
-                  as: "button",
-                  ref: (el) => {
-                    tabRefs.current[item.id] = el;
-                  },
-                  role: "tab",
-                  "aria-selected": isActive,
-                  "aria-controls": `tabpanel-${item.id}`,
-                  "aria-disabled": isDisabled,
-                  onClick: () => !isDisabled && handleTabChange(item.id, item.event),
-                  onKeyDown: (e) => handleKeyDown(e, index),
-                  "data-active": isActive,
-                  className: cn(
-                    "flex items-center gap-2 px-4 py-2 text-sm font-medium transition-all whitespace-nowrap",
-                    orientation === "horizontal" && "snap-start shrink-0",
-                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                    isDisabled && "opacity-50 cursor-not-allowed",
-                    variantClasses2[variant],
-                    isActive ? variant === "pills" ? "text-primary-foreground font-bold" : "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
-                  ),
-                  children: [
-                    item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm" })),
-                    /* @__PURE__ */ jsx(Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
-                    item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge })
-                  ]
-                },
-                item.id
-              );
-            })
-          }
-        ),
-        activeTabContent !== void 0 && activeTabContent !== null && /* @__PURE__ */ jsx(
-          Box,
-          {
-            role: "tabpanel",
-            id: `tabpanel-${activeTab}`,
-            "aria-labelledby": `tab-${activeTab}`,
-            className: "mt-4",
-            children: activeTabContent
-          }
-        )
-      ] });
-    };
-    Tabs.displayName = "Tabs";
-  }
-});
-function generateDiff(oldVal, newVal) {
-  const oldLines = oldVal.split("\n");
-  const newLines = newVal.split("\n");
-  const diff = [];
-  const maxLen = Math.max(oldLines.length, newLines.length);
-  for (let i = 0; i < maxLen; i++) {
-    const oldLine = oldLines[i];
-    const newLine = newLines[i];
-    if (oldLine === newLine) {
-      diff.push({ type: "context", content: oldLine ?? "", lineNumber: i + 1 });
-    } else {
-      if (oldLine !== void 0) {
-        diff.push({ type: "remove", content: oldLine, lineNumber: i + 1 });
-      }
-      if (newLine !== void 0) {
-        diff.push({ type: "add", content: newLine, lineNumber: i + 1 });
-      }
-    }
-  }
-  return diff;
-}
-var DIFF_STYLES, CodeViewer;
-var init_CodeViewer = __esm({
-  "components/core/molecules/CodeViewer.tsx"() {
-    "use client";
-    init_cn();
-    init_atoms2();
-    init_Stack();
-    init_LoadingState();
-    init_ErrorState();
-    init_EmptyState();
-    init_Tabs();
-    init_useEventBus();
-    DIFF_STYLES = {
-      add: {
-        bg: "bg-success/10",
-        prefix: "+",
-        text: "text-success"
-      },
-      remove: {
-        bg: "bg-error/10",
-        prefix: "-",
-        text: "text-error"
-      },
-      context: {
-        bg: "",
-        prefix: " ",
-        text: "text-foreground"
-      }
-    };
-    CodeViewer = ({
-      title,
-      code,
-      language,
-      diff: propDiff,
-      oldValue,
-      newValue,
-      mode = "code",
-      showLineNumbers = true,
-      showCopy = true,
-      wordWrap = false,
-      maxHeight = 500,
-      files,
-      actions,
-      entity,
-      isLoading = false,
-      error,
-      className
-    }) => {
-      const eventBus = useEventBus();
-      const { t } = useTranslate();
-      const [copied, setCopied] = useState(false);
-      const [wrap, setWrap] = useState(wordWrap);
-      const [activeFileIndex, setActiveFileIndex] = useState(0);
-      const handleAction = useCallback(
-        (action) => {
-          if (action.event) {
-            eventBus.emit(`UI:${action.event}`, {});
-          }
-        },
-        [eventBus]
-      );
-      const activeFile = files?.[activeFileIndex];
-      const activeCode = activeFile?.code ?? code ?? "";
-      const activeLanguage = activeFile?.language ?? language ?? "text";
-      const lines = useMemo(() => activeCode.split("\n"), [activeCode]);
-      const diffLines = useMemo(() => {
-        if (propDiff) return propDiff;
-        if (mode === "diff" && oldValue !== void 0 && newValue !== void 0) {
-          return generateDiff(oldValue, newValue);
-        }
-        return null;
-      }, [propDiff, mode, oldValue, newValue]);
-      const handleCopy = useCallback(async () => {
-        try {
-          await navigator.clipboard.writeText(activeCode);
-          setCopied(true);
-          eventBus.emit("UI:CODE_COPY", { language: activeLanguage });
-          setTimeout(() => setCopied(false), 2e3);
-        } catch {
-        }
-      }, [activeCode, eventBus, activeLanguage]);
-      const tabItems = files?.map((file, idx) => ({
-        id: `file-${idx}`,
-        label: file.label,
-        content: null
-      }));
-      if (isLoading) {
-        return /* @__PURE__ */ jsx(LoadingState, { message: t("common.loading"), className });
-      }
-      if (error) {
-        return /* @__PURE__ */ jsx(
-          ErrorState,
-          {
-            title: t("display.codeViewerError"),
-            message: error.message,
-            className
-          }
-        );
-      }
-      if (!activeCode && !diffLines) {
-        return /* @__PURE__ */ jsx(
-          EmptyState,
-          {
-            icon: Code,
-            title: t("display.noCode"),
-            description: "No code to display.",
-            className
-          }
-        );
-      }
-      return /* @__PURE__ */ jsx(Card, { className: cn("overflow-hidden", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "none", children: [
-        tabItems && tabItems.length > 1 && /* @__PURE__ */ jsx(Box, { className: "border-b border-border", children: /* @__PURE__ */ jsx(
-          Tabs,
-          {
-            tabs: tabItems,
-            activeTab: `file-${activeFileIndex}`,
-            onTabChange: (id) => {
-              const idx = parseInt(id.replace("file-", ""), 10);
-              setActiveFileIndex(idx);
-            }
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          HStack,
-          {
-            gap: "sm",
-            align: "center",
-            justify: "between",
-            className: "px-4 py-2 border-b border-border bg-muted/30",
-            children: [
-              /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
-                /* @__PURE__ */ jsx(Icon, { icon: mode === "diff" ? FileText : Code, size: "sm", className: "text-muted-foreground" }),
-                title && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "truncate", children: title }),
-                activeLanguage && activeLanguage !== "text" && /* @__PURE__ */ jsx(Badge, { variant: "default", children: activeLanguage })
-              ] }),
-              /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    icon: WrapText,
-                    onClick: () => setWrap(!wrap),
-                    className: cn(wrap && "text-primary")
-                  }
-                ),
-                showCopy && /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    icon: copied ? Check : Copy,
-                    onClick: handleCopy,
-                    className: cn(copied && "text-success")
-                  }
-                ),
-                actions?.map((action, idx) => /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    variant: "default",
-                    className: "cursor-pointer hover:opacity-80 transition-opacity",
-                    onClick: () => handleAction(action),
-                    children: action.label
-                  },
-                  idx
-                ))
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            className: "overflow-auto bg-muted/20",
-            style: { maxHeight },
-            children: diffLines ? (
-              /* Diff mode */
-              /* @__PURE__ */ jsx(VStack, { gap: "none", className: "font-mono text-xs", children: diffLines.map((line, idx) => {
-                const style = DIFF_STYLES[line.type];
-                return /* @__PURE__ */ jsxs(HStack, { gap: "none", align: "start", className: cn(style.bg, "px-4 py-0.5"), children: [
-                  showLineNumbers && /* @__PURE__ */ jsx(
-                    Typography,
-                    {
-                      variant: "caption",
-                      color: "secondary",
-                      className: "w-8 text-right mr-3 select-none tabular-nums flex-shrink-0",
-                      children: line.lineNumber ?? ""
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    Typography,
-                    {
-                      variant: "caption",
-                      className: cn(
-                        "font-mono flex-1 min-w-0",
-                        style.text,
-                        wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsx(Box, { as: "span", className: "select-none opacity-50 mr-2", children: style.prefix }),
-                        line.content
-                      ]
-                    }
-                  )
-                ] }, idx);
-              }) })
-            ) : (
-              /* Code mode */
-              /* @__PURE__ */ jsx(VStack, { gap: "none", className: "font-mono text-xs", children: lines.map((line, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "none", align: "start", className: "px-4 py-0.5 hover:bg-muted/50", children: [
-                showLineNumbers && /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "caption",
-                    color: "secondary",
-                    className: "w-8 text-right mr-4 select-none tabular-nums flex-shrink-0",
-                    children: idx + 1
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    variant: "caption",
-                    className: cn(
-                      "font-mono flex-1 min-w-0",
-                      wrap ? "whitespace-pre-wrap break-all" : "whitespace-pre"
-                    ),
-                    children: line || " "
-                  }
-                )
-              ] }, idx)) })
-            )
-          }
-        )
-      ] }) });
-    };
-    CodeViewer.displayName = "CodeViewer";
-  }
-});
 function CombatLog({
   events: events2,
   maxVisible = 50,
@@ -21009,7 +20989,7 @@ function CraftingRecipe({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCraft = React81.useCallback(() => {
+  const handleCraft = React79.useCallback(() => {
     onCraft?.();
     if (craftEvent) {
       eventBus.emit(craftEvent, { output: output.label });
@@ -21026,7 +21006,7 @@ function CraftingRecipe({
       children: [
         /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap items-center", children: inputs.map((ingredient, index) => {
           const hasSufficient = ingredient.available >= ingredient.required;
-          return /* @__PURE__ */ jsxs(React81.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React79.Fragment, { children: [
             /* @__PURE__ */ jsx(Box, { className: "relative", children: /* @__PURE__ */ jsx(
               ItemSlot,
               {
@@ -21089,8 +21069,8 @@ function DPad({
 }) {
   const eventBus = useEventBus();
   const sizes = sizeMap6[size];
-  const [activeDirections, setActiveDirections] = React81.useState(/* @__PURE__ */ new Set());
-  const handlePress = React81.useCallback(
+  const [activeDirections, setActiveDirections] = React79.useState(/* @__PURE__ */ new Set());
+  const handlePress = React79.useCallback(
     (direction) => {
       setActiveDirections((prev) => new Set(prev).add(direction));
       if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
@@ -21098,7 +21078,7 @@ function DPad({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const handleRelease = React81.useCallback(
+  const handleRelease = React79.useCallback(
     (direction) => {
       setActiveDirections((prev) => {
         const next = new Set(prev);
@@ -21833,14 +21813,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React81__default.useContext(RootCtx);
+  const parentRoot = React79__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React81__default.useId();
+  const zoneId = React79__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React81__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React81__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React79__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React79__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React81__default.useCallback((group) => {
+  const clearOptimisticOrder = React79__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -21865,7 +21845,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return String(raw ?? `__idx_${idx}`);
   }).join("|");
-  const itemIds = React81__default.useMemo(
+  const itemIds = React79__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw ?? `__idx_${idx}`;
@@ -21873,7 +21853,7 @@ function useDataDnd(args) {
     [itemIdsSignature]
   );
   const itemsContentSig = items.map((it, idx) => String(it[dndItemIdField] ?? `__${idx}`)).join("|");
-  React81__default.useEffect(() => {
+  React79__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -21881,20 +21861,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React81__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React81__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React79__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React79__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React81__default.useCallback((zoneId2) => {
+  const unregisterZone = React79__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React81__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React81__default.useState(null);
-  const meta = React81__default.useMemo(
+  const [activeDrag, setActiveDrag] = React79__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React79__default.useState(null);
+  const meta = React79__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React81__default.useEffect(() => {
+  React79__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -21913,7 +21893,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React81__default.useCallback(
+  const findZoneByItem = React79__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -21922,7 +21902,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React81__default.useCallback(
+  React79__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -21931,7 +21911,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React81__default.useCallback(
+  const handleDragEnd = React79__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -22022,8 +22002,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React81__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React81__default.useCallback(
+  const sortableData = React79__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React79__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -22063,7 +22043,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React81__default.useContext(RootCtx);
+    const ctx = React79__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -22078,7 +22058,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React81__default.useEffect(() => {
+    React79__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -22092,11 +22072,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React81__default.useMemo(
+  const rootContextValue = React79__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React81__default.useCallback((event) => {
+  const handleDragStart = React79__default.useCallback((event) => {
     const sourceZone = findZoneByItem(event.active.id);
     const rect = event.active.rect.current.initial;
     const height = rect?.height && rect.height > 0 ? rect.height : 64;
@@ -22115,7 +22095,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React81__default.useCallback((event) => {
+  const handleDragOver = React79__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -22185,7 +22165,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React81__default.useCallback((event) => {
+  const handleDragCancel = React79__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -22193,12 +22173,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React81__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React79__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React81__default.useCallback(
+  const wrapContainer = React79__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -22252,7 +22232,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React81__default.createContext(null);
+    RootCtx = React79__default.createContext(null);
   }
 });
 function fieldLabel2(key) {
@@ -22772,7 +22752,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React81__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React79__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -22791,7 +22771,7 @@ function DataList({
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React81__default.useEffect(() => {
+  React79__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -22896,7 +22876,7 @@ function DataList({
     const items2 = data.map((item) => item);
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fieldDefs[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
       group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: "my-2" }),
       group.items.map((itemData, index) => {
         const id = itemData.id || `${gi}-${index}`;
@@ -23044,7 +23024,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
             group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-4" : "mt-0" }),
             group.items.map(
               (itemData, index) => renderItem(itemData, index, gi === groups.length - 1 && index === group.items.length - 1)
@@ -23107,6 +23087,422 @@ var init_DataList = __esm({
     DataList.displayName = "DataList";
   }
 });
+function isTraitConfigObject(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+function LeafControl({
+  value,
+  onChange
+}) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Switch, { checked: value, onChange: (c) => onChange(c) });
+  }
+  if (typeof value === "number") {
+    const [draft2, setDraft2] = React79__default.useState(String(value));
+    React79__default.useEffect(() => setDraft2(String(value)), [value]);
+    const commit2 = () => {
+      const n = draft2.trim() === "" ? 0 : Number(draft2);
+      onChange(Number.isNaN(n) ? 0 : n);
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "number",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  if (isTraitConfigObject(value)) {
+    const [draft2, setDraft2] = React79__default.useState(JSON.stringify(value));
+    React79__default.useEffect(() => setDraft2(JSON.stringify(value)), [value]);
+    const commit2 = () => {
+      try {
+        const parsed = JSON.parse(draft2);
+        onChange(parsed);
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "text",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  if (Array.isArray(value)) {
+    const [draft2, setDraft2] = React79__default.useState(JSON.stringify(value));
+    React79__default.useEffect(() => setDraft2(JSON.stringify(value)), [value]);
+    const commit2 = () => {
+      try {
+        const parsed = JSON.parse(draft2);
+        onChange(parsed);
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "text",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  const strVal = value === null ? "" : String(value);
+  const [draft, setDraft] = React79__default.useState(strVal);
+  React79__default.useEffect(() => setDraft(value === null ? "" : String(value)), [value]);
+  const commit = () => {
+    onChange(draft);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputType: "text",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      }
+    }
+  );
+}
+function cloneElement(template) {
+  if (isTraitConfigObject(template)) {
+    const blank = {};
+    for (const k of Object.keys(template)) blank[k] = null;
+    return blank;
+  }
+  if (Array.isArray(template)) return [];
+  if (typeof template === "boolean") return false;
+  if (typeof template === "number") return 0;
+  return "";
+}
+var ArrayEditor;
+var init_ArrayEditor = __esm({
+  "components/core/molecules/ArrayEditor.tsx"() {
+    "use client";
+    init_Stack();
+    init_Button();
+    init_Switch();
+    init_Input();
+    init_cn();
+    ArrayEditor = ({ value, onChange, className }) => {
+      const arr = value;
+      const update = (idx, next) => {
+        const copy = [...arr];
+        copy[idx] = next;
+        onChange(copy);
+      };
+      const remove = (idx) => {
+        onChange(arr.filter((_, i) => i !== idx));
+      };
+      const add = () => {
+        const template = arr.length > 0 ? arr[0] : "";
+        onChange([...arr, cloneElement(template)]);
+      };
+      return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: cn("w-full", className), children: [
+        arr.map((elem, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(LeafControl, { value: elem, onChange: (next) => update(idx, next) }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: "trash-2",
+              onClick: () => remove(idx),
+              "aria-label": "Remove item"
+            }
+          )
+        ] }, idx)),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: "plus", label: "Add item", onClick: add })
+      ] });
+    };
+  }
+});
+function isTraitConfigObject2(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+function ScalarControl({
+  fieldKey,
+  value,
+  onFieldChange
+}) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Switch, { checked: value, onChange: (c) => onFieldChange(fieldKey, c) });
+  }
+  if (typeof value === "number") {
+    const [draft2, setDraft2] = React79__default.useState(String(value));
+    React79__default.useEffect(() => setDraft2(String(value)), [value]);
+    const commit2 = () => {
+      const n = draft2.trim() === "" ? 0 : Number(draft2);
+      onFieldChange(fieldKey, Number.isNaN(n) ? 0 : n);
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "number",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  if (isTraitConfigObject2(value)) {
+    const [draft2, setDraft2] = React79__default.useState(JSON.stringify(value));
+    React79__default.useEffect(() => setDraft2(JSON.stringify(value)), [value]);
+    const commit2 = () => {
+      try {
+        onFieldChange(fieldKey, JSON.parse(draft2));
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "text",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  if (Array.isArray(value)) {
+    const [draft2, setDraft2] = React79__default.useState(JSON.stringify(value));
+    React79__default.useEffect(() => setDraft2(JSON.stringify(value)), [value]);
+    const commit2 = () => {
+      try {
+        onFieldChange(fieldKey, JSON.parse(draft2));
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "text",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  const [draft, setDraft] = React79__default.useState(value === null ? "" : String(value));
+  React79__default.useEffect(() => setDraft(value === null ? "" : String(value)), [value]);
+  const commit = () => {
+    onFieldChange(fieldKey, draft);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputType: "text",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      }
+    }
+  );
+}
+var ObjectEditor;
+var init_ObjectEditor = __esm({
+  "components/core/molecules/ObjectEditor.tsx"() {
+    "use client";
+    init_Stack();
+    init_Typography();
+    init_Switch();
+    init_Input();
+    init_cn();
+    ObjectEditor = ({ value, onChange, className }) => {
+      const entries = Object.entries(value);
+      const handleFieldChange = (k, next) => {
+        onChange({ ...value, [k]: next });
+      };
+      if (entries.length === 0) {
+        return /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: "Empty object" });
+      }
+      return /* @__PURE__ */ jsx(VStack, { gap: "xs", className: cn("w-full", className), children: entries.map(([k, v]) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ jsx("span", { className: "w-24 shrink-0 truncate", title: k, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: k }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(ScalarControl, { fieldKey: k, value: v, onFieldChange: handleFieldChange }) })
+      ] }, k)) });
+    };
+  }
+});
+function isTraitConfigObject3(v) {
+  return v !== null && typeof v === "object" && !Array.isArray(v);
+}
+function ValueControl({
+  value,
+  onChange
+}) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx(Switch, { checked: value, onChange: (c) => onChange(c) });
+  }
+  if (typeof value === "number") {
+    const [draft2, setDraft2] = React79__default.useState(String(value));
+    React79__default.useEffect(() => setDraft2(String(value)), [value]);
+    const commit2 = () => {
+      const n = draft2.trim() === "" ? 0 : Number(draft2);
+      onChange(Number.isNaN(n) ? 0 : n);
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "number",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  if (isTraitConfigObject3(value) || Array.isArray(value)) {
+    const [draft2, setDraft2] = React79__default.useState(JSON.stringify(value));
+    React79__default.useEffect(() => setDraft2(JSON.stringify(value)), [value]);
+    const commit2 = () => {
+      try {
+        onChange(JSON.parse(draft2));
+      } catch {
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        inputType: "text",
+        value: draft2,
+        onChange: (e) => setDraft2(e.target.value),
+        onBlur: commit2,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") commit2();
+        }
+      }
+    );
+  }
+  const [draft, setDraft] = React79__default.useState(value === null ? "" : String(value));
+  React79__default.useEffect(() => setDraft(value === null ? "" : String(value)), [value]);
+  const commit = () => {
+    onChange(draft);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputType: "text",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      }
+    }
+  );
+}
+function KeyInput({
+  currentKey,
+  onRename
+}) {
+  const [draft, setDraft] = React79__default.useState(currentKey);
+  React79__default.useEffect(() => setDraft(currentKey), [currentKey]);
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (trimmed !== "" && trimmed !== currentKey) onRename(trimmed);
+    else setDraft(currentKey);
+  };
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputType: "text",
+      value: draft,
+      onChange: (e) => setDraft(e.target.value),
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      },
+      className: "w-24 shrink-0 font-mono text-xs",
+      placeholder: "key"
+    }
+  );
+}
+var MapEditor;
+var init_MapEditor = __esm({
+  "components/core/molecules/MapEditor.tsx"() {
+    "use client";
+    init_Stack();
+    init_Button();
+    init_Input();
+    init_Switch();
+    init_cn();
+    MapEditor = ({ value, onChange, className }) => {
+      const entries = Object.entries(value);
+      const updateKey = (oldKey, newKey) => {
+        const next = {};
+        for (const [k, v] of Object.entries(value)) {
+          next[k === oldKey ? newKey : k] = v;
+        }
+        onChange(next);
+      };
+      const updateValue = (k, next) => {
+        onChange({ ...value, [k]: next });
+      };
+      const remove = (k) => {
+        const next = { ...value };
+        delete next[k];
+        onChange(next);
+      };
+      const add = () => {
+        let key = "key";
+        let i = 1;
+        while (key in value) {
+          key = `key${i}`;
+          i++;
+        }
+        onChange({ ...value, [key]: "" });
+      };
+      return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: cn("w-full", className), children: [
+        entries.map(([k, v]) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+          /* @__PURE__ */ jsx(KeyInput, { currentKey: k, onRename: (newKey) => updateKey(k, newKey) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(ValueControl, { value: v, onChange: (next) => updateValue(k, next) }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: "trash-2",
+              onClick: () => remove(k),
+              "aria-label": "Remove entry"
+            }
+          )
+        ] }, k)),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: "plus", label: "Add entry", onClick: add })
+      ] });
+    };
+  }
+});
 function fileIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   switch (ext) {
@@ -24668,7 +25064,7 @@ var init_WizardProgress = __esm({
           children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: normalizedSteps.map((step, index) => {
             const isActive = index === currentStep;
             const isCompleted = index < currentStep;
-            return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -25185,8 +25581,9 @@ var init_FormSectionHeader = __esm({
         Box,
         {
           className: cn(
-            "px-4 py-3 bg-muted rounded-t-lg border-b-2 border-border border-l-4 border-l-primary",
-            isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
+            "px-5 py-4 bg-muted/60 rounded-lg",
+            "border border-border border-l-4 border-l-primary",
+            isClickable && "cursor-pointer hover:bg-muted transition-colors",
             className
           ),
           onClick: isClickable ? onToggle : void 0,
@@ -25197,7 +25594,7 @@ var init_FormSectionHeader = __esm({
                 {
                   name: icon,
                   size: "md",
-                  className: "text-primary"
+                  className: "text-primary shrink-0"
                 }
               ),
               statusIcon && /* @__PURE__ */ jsx(
@@ -25205,12 +25602,15 @@ var init_FormSectionHeader = __esm({
                 {
                   name: statusIcon,
                   size: "md",
-                  className: hasErrors ? "text-error" : "text-success"
+                  className: cn(
+                    "shrink-0",
+                    hasErrors ? "text-error" : "text-success"
+                  )
                 }
               ),
               /* @__PURE__ */ jsxs(Box, { className: "space-y-0.5", children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "subheading", weight: "semibold", children: title }),
-                subtitle && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: subtitle })
+                /* @__PURE__ */ jsx(Typography, { variant: "subheading", weight: "semibold", className: "text-foreground", children: title }),
+                subtitle && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "leading-snug", children: subtitle })
               ] })
             ] }),
             /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
@@ -25219,9 +25619,9 @@ var init_FormSectionHeader = __esm({
                 Icon,
                 {
                   name: "chevron-down",
-                  size: "md",
+                  size: "sm",
                   className: cn(
-                    "text-muted-foreground transition-transform",
+                    "text-muted-foreground transition-transform duration-200 shrink-0",
                     isCollapsed && "-rotate-90"
                   )
                 }
@@ -26012,9 +26412,9 @@ function ScoreDisplay({
   ...rest
 }) {
   const resolvedValue = typeof value === "number" && !Number.isNaN(value) ? value : typeof rest.score === "number" && !Number.isNaN(rest.score) ? rest.score : 0;
-  const [displayValue, setDisplayValue] = React81.useState(resolvedValue);
-  const [isAnimating, setIsAnimating] = React81.useState(false);
-  React81.useEffect(() => {
+  const [displayValue, setDisplayValue] = React79.useState(resolvedValue);
+  const [isAnimating, setIsAnimating] = React79.useState(false);
+  React79.useEffect(() => {
     if (!animated || displayValue === resolvedValue) {
       setDisplayValue(resolvedValue);
       return;
@@ -26161,7 +26561,7 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React81.useCallback(
+  const handleSelect = React79.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
@@ -26447,31 +26847,31 @@ function GameCanvas2D({
   assetBaseUrl = "",
   className
 }) {
-  const canvasRef = React81.useRef(null);
-  const rafRef = React81.useRef(0);
-  const frameRef = React81.useRef(0);
-  const lastTimeRef = React81.useRef(0);
-  const imageCache = React81.useRef(/* @__PURE__ */ new Map());
+  const canvasRef = React79.useRef(null);
+  const rafRef = React79.useRef(0);
+  const frameRef = React79.useRef(0);
+  const lastTimeRef = React79.useRef(0);
+  const imageCache = React79.useRef(/* @__PURE__ */ new Map());
   const emit = useEmitEvent();
-  const onDrawRef = React81.useRef(onDraw);
+  const onDrawRef = React79.useRef(onDraw);
   onDrawRef.current = onDraw;
-  const onTickRef = React81.useRef(onTick);
+  const onTickRef = React79.useRef(onTick);
   onTickRef.current = onTick;
-  const tickEventRef = React81.useRef(tickEvent);
+  const tickEventRef = React79.useRef(tickEvent);
   tickEventRef.current = tickEvent;
-  const drawEventRef = React81.useRef(drawEvent);
+  const drawEventRef = React79.useRef(drawEvent);
   drawEventRef.current = drawEvent;
-  const emitRef = React81.useRef(emit);
+  const emitRef = React79.useRef(emit);
   emitRef.current = emit;
-  const assetBaseUrlRef = React81.useRef(assetBaseUrl);
+  const assetBaseUrlRef = React79.useRef(assetBaseUrl);
   assetBaseUrlRef.current = assetBaseUrl;
-  const backgroundImageRef = React81.useRef(backgroundImage);
+  const backgroundImageRef = React79.useRef(backgroundImage);
   backgroundImageRef.current = backgroundImage;
-  const widthRef = React81.useRef(width);
+  const widthRef = React79.useRef(width);
   widthRef.current = width;
-  const heightRef = React81.useRef(height);
+  const heightRef = React79.useRef(height);
   heightRef.current = height;
-  const loadImage = React81.useCallback((url) => {
+  const loadImage = React79.useCallback((url) => {
     const fullUrl = url.startsWith("http") ? url : `${assetBaseUrlRef.current}${url}`;
     const cached = imageCache.current.get(fullUrl);
     if (cached?.complete && cached.naturalWidth > 0) return cached;
@@ -26483,7 +26883,7 @@ function GameCanvas2D({
     }
     return null;
   }, []);
-  React81.useEffect(() => {
+  React79.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -26838,7 +27238,7 @@ function TurnPanel({
   className
 }) {
   const eventBus = useEventBus();
-  const handleAction = React81.useCallback(
+  const handleAction = React79.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { turn: currentTurn, phase, activeTeam });
@@ -26984,7 +27384,7 @@ function UnitCommandBar({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCommand = React81.useCallback(
+  const handleCommand = React79.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { unitId: selectedUnitId });
@@ -27469,7 +27869,7 @@ function GameMenu({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React81.useCallback(
+  const handleOptionClick = React79.useCallback(
     (option) => {
       if (option.event && eventBus) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -27583,7 +27983,7 @@ function GameOverScreen({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleActionClick = React81.useCallback(
+  const handleActionClick = React79.useCallback(
     (action) => {
       if (action.event && eventBus) {
         eventBus.emit(`UI:${action.event}`, { action });
@@ -28599,7 +28999,7 @@ var init_StarRating = __esm({
                       name: "star",
                       className: cn(
                         styles.star,
-                        "text-muted-foreground",
+                        "text-foreground/30",
                         "transition-colors duration-100"
                       ),
                       strokeWidth: 1.5
@@ -29082,8 +29482,8 @@ function TableView({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React81__default.useState(pageSize > 0 ? pageSize : Infinity);
-  const [localSelected, setLocalSelected] = React81__default.useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React79__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React79__default.useState(/* @__PURE__ */ new Set());
   const colDefs = columns ?? fields ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -29278,12 +29678,12 @@ function TableView({
         ]
       }
     );
-    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React81__default.Fragment, { children: rowInner }, id);
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React79__default.Fragment, { children: rowInner }, id);
   };
   const items = data.map((row) => row);
   const groups = groupBy ? groupData2(items, groupBy) : [{ label: "", items }];
   let runningIndex = 0;
-  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
     group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-3" : "mt-0" }),
     group.items.map((row) => renderRow(row, runningIndex++))
   ] }, gi)) });
@@ -30635,7 +31035,7 @@ var init_StepFlow = __esm({
       className
     }) => {
       if (orientation === "vertical") {
-        return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React81__default.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+        return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React79__default.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
           /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
             /* @__PURE__ */ jsx(StepCircle, { step, index }),
             showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-border" })
@@ -30646,7 +31046,7 @@ var init_StepFlow = __esm({
           ] })
         ] }) }, index)) });
       }
-      return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+      return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
         /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
           /* @__PURE__ */ jsx(StepCircle, { step, index }),
           /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -31401,11 +31801,19 @@ function LatticeSVG({
 function f2(n) {
   return n.toFixed(2);
 }
-var VARIANT_MAP2, EdgeDecoration;
+var colorTokenVars, VARIANT_MAP2, EdgeDecoration;
 var init_EdgeDecoration = __esm({
   "components/core/molecules/EdgeDecoration.tsx"() {
     "use client";
     init_cn();
+    colorTokenVars = {
+      primary: "var(--color-primary)",
+      secondary: "var(--color-secondary)",
+      success: "var(--color-success)",
+      warning: "var(--color-warning)",
+      error: "var(--color-error)",
+      muted: "var(--color-muted)"
+    };
     VARIANT_MAP2 = {
       arch: ArchSVG,
       vine: VineSVG,
@@ -31415,13 +31823,14 @@ var init_EdgeDecoration = __esm({
       variant = "arch",
       side = "both",
       opacity = 0.15,
-      color = "var(--color-primary)",
+      color = "primary",
       strokeWidth = 0.5,
       width = 15,
       className
     }) => {
       const id = useId();
       const Variant = VARIANT_MAP2[variant];
+      const resolvedColor = color in colorTokenVars ? colorTokenVars[color] : color;
       const sides = side === "both" ? ["left", "right"] : [side];
       return /* @__PURE__ */ jsx(Fragment, { children: sides.map((s) => /* @__PURE__ */ jsx(
         "svg",
@@ -31444,7 +31853,7 @@ var init_EdgeDecoration = __esm({
               facing: s,
               w: 200,
               h: 600,
-              color,
+              color: resolvedColor,
               strokeWidth
             }
           )
@@ -31622,7 +32031,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React81__default.forwardRef(
+    LikertScale = React79__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -31634,7 +32043,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React81__default.useId();
+        const groupId = React79__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -32784,7 +33193,6 @@ function BlockRow({
   onUpdate,
   onDelete,
   onDuplicate,
-  onInsertAfter,
   onChangeType
 }) {
   const { t } = useTranslate();
@@ -33060,34 +33468,16 @@ function BlockRow({
       "data-block-id": block.id,
       "data-block-type": block.type,
       children: [
-        !readOnly && showAffordances && /* @__PURE__ */ jsxs(Box, { className: "flex w-12 shrink-0 items-center gap-0.5 pt-1", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "button",
-              variant: "ghost",
-              "aria-label": t("richBlockEditor.insertParagraphBelow"),
-              className: cn(
-                "inline-flex h-6 w-6 items-center justify-center rounded-sm p-0 gap-0",
-                "text-muted-foreground hover:bg-muted hover:text-foreground",
-                "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-                "transition-opacity"
-              ),
-              onClick: () => onInsertAfter("paragraph"),
-              children: /* @__PURE__ */ jsx(Icon, { name: "plus", className: "w-3.5 h-3.5" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            BlockMenu,
-            {
-              block,
-              readOnly,
-              onDelete,
-              onDuplicate,
-              onChangeType
-            }
-          )
-        ] }),
+        !readOnly && showAffordances && /* @__PURE__ */ jsx(Box, { className: "flex w-8 shrink-0 items-center pt-1", children: /* @__PURE__ */ jsx(
+          BlockMenu,
+          {
+            block,
+            readOnly,
+            onDelete,
+            onDuplicate,
+            onChangeType
+          }
+        ) }),
         /* @__PURE__ */ jsx(Box, { className: "min-w-0 flex-1", children: renderBody() })
       ]
     }
@@ -33210,12 +33600,6 @@ var init_RichBlockEditor = __esm({
         },
         [blocks, commit]
       );
-      const handleInsertAfter = useCallback(
-        (id, type) => {
-          commit(insertAfter(blocks, id, createBlock(type)));
-        },
-        [blocks, commit]
-      );
       const handleChangeType = useCallback(
         (id, type) => {
           commit(
@@ -33272,7 +33656,6 @@ var init_RichBlockEditor = __esm({
                 onUpdate: (updater) => handleUpdate(block.id, updater),
                 onDelete: () => handleDelete(block.id),
                 onDuplicate: () => handleDuplicate(block.id),
-                onInsertAfter: (type) => handleInsertAfter(block.id, type),
                 onChangeType: (type) => handleChangeType(block.id, type)
               },
               block.id
@@ -33942,7 +34325,7 @@ var init_DocBreadcrumb = __esm({
           "aria-label": t("aria.breadcrumb"),
           children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", wrap: true, children: items.map((item, idx) => {
             const isLast = idx === items.length - 1;
-            return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -33989,108 +34372,6 @@ var init_DocBreadcrumb = __esm({
     DocBreadcrumb.displayName = "DocBreadcrumb";
   }
 });
-function DocCodeBlock({
-  code,
-  language,
-  title,
-  showLineNumbers = false,
-  className
-}) {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = useCallback(() => {
-    void navigator.clipboard.writeText(code).then(() => {
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    });
-  }, [code]);
-  const lines = code.split("\n");
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      className: cn(
-        "rounded-container border border-border overflow-hidden",
-        className
-      ),
-      position: "relative",
-      children: [
-        title ? /* @__PURE__ */ jsxs(
-          HStack,
-          {
-            align: "center",
-            justify: "between",
-            className: "bg-muted px-4 py-2 border-b border-border",
-            children: [
-              /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "sm", children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: title }),
-                language ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: language }) : null
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: handleCopy,
-                  leftIcon: copied ? "check" : "copy",
-                  children: copied ? "Copied!" : "Copy"
-                }
-              )
-            ]
-          }
-        ) : null,
-        !title ? /* @__PURE__ */ jsx(Box, { position: "absolute", className: "top-2 right-2 z-10", children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "sm",
-            onClick: handleCopy,
-            leftIcon: copied ? "check" : "copy",
-            children: copied ? "Copied!" : "Copy"
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsxs(HStack, { gap: "none", className: "bg-foreground overflow-x-auto", children: [
-          showLineNumbers ? /* @__PURE__ */ jsx(
-            Box,
-            {
-              className: "py-4 pl-4 pr-3 select-none border-r border-border flex-shrink-0",
-              children: lines.map((_, i) => /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  variant: "caption",
-                  color: "muted",
-                  className: "block font-mono text-right leading-6",
-                  as: "span",
-                  children: i + 1
-                },
-                i
-              ))
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(
-            Box,
-            {
-              as: "pre",
-              className: cn(
-                "p-4 font-mono text-sm text-background leading-6 flex-1 min-w-0",
-                !title && "pr-24"
-              ),
-              children: /* @__PURE__ */ jsx(Box, { as: "code", className: "whitespace-pre", children: code })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-var init_DocCodeBlock = __esm({
-  "components/core/molecules/DocCodeBlock.tsx"() {
-    "use client";
-    init_cn();
-    init_Box();
-    init_Stack();
-    init_Typography();
-    init_Button();
-  }
-});
 function DocPagination({ prev, next, className }) {
   if (!prev && !next) return null;
   return /* @__PURE__ */ jsxs(
@@ -34527,17 +34808,25 @@ var init_DocTOC = __esm({
     DocTOC.displayName = "DocTOC";
   }
 });
-var GradientDivider;
+var colorTokenVars2, GradientDivider;
 var init_GradientDivider = __esm({
   "components/core/molecules/GradientDivider.tsx"() {
     "use client";
     init_cn();
     init_Box();
+    colorTokenVars2 = {
+      primary: "var(--color-primary)",
+      secondary: "var(--color-secondary)",
+      success: "var(--color-success)",
+      warning: "var(--color-warning)",
+      error: "var(--color-error)",
+      muted: "var(--color-muted)"
+    };
     GradientDivider = ({
       color,
       className
     }) => {
-      const centerColor = color ?? "var(--color-primary)";
+      const centerColor = color ? color in colorTokenVars2 ? colorTokenVars2[color] : color : "var(--color-primary)";
       return /* @__PURE__ */ jsx(
         Box,
         {
@@ -34906,7 +35195,7 @@ var init_MiniStateMachine = __esm({
           const x = 2 + i * (NODE_W + GAP2 + ARROW_W + GAP2);
           const tc = transitionCounts[s.name] ?? 0;
           const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -35110,7 +35399,7 @@ var init_PageHeader = __esm({
         info: "bg-info/10 text-info"
       };
       return /* @__PURE__ */ jsxs(Box, { className: cn("mb-6", className), children: [
-        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -35219,7 +35508,7 @@ var init_FormSection = __esm({
       columns = 1,
       className
     }) => {
-      const [collapsed, setCollapsed] = React81__default.useState(defaultCollapsed);
+      const [collapsed, setCollapsed] = React79__default.useState(defaultCollapsed);
       const { t } = useTranslate();
       const eventBus = useEventBus();
       const gridClass = {
@@ -35227,7 +35516,7 @@ var init_FormSection = __esm({
         2: "grid-cols-1 md:grid-cols-2",
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
       }[columns];
-      React81__default.useCallback(() => {
+      React79__default.useCallback(() => {
         if (collapsible) {
           setCollapsed((prev) => !prev);
           eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -35334,8 +35623,8 @@ function TextLikeControl({
   onCommit
 }) {
   const initial = value === void 0 || value === null ? "" : String(value);
-  const [draft, setDraft] = React81__default.useState(initial);
-  React81__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React79__default.useState(initial);
+  React79__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -35357,6 +35646,9 @@ function TextLikeControl({
     }
   );
 }
+function isTraitConfigObject4(v) {
+  return v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v);
+}
 function FieldControl({
   name,
   decl,
@@ -35366,6 +35658,7 @@ function FieldControl({
 }) {
   let control;
   const stringValue = typeof value === "string" ? value : void 0;
+  const effectiveValue = value ?? decl.default;
   if (decl.type === "icon") {
     control = /* @__PURE__ */ jsx(IconPicker, { value: stringValue, onChange: (icon) => onChange(name, icon) });
   } else if (decl.type === "asset") {
@@ -35392,6 +35685,32 @@ function FieldControl({
     control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: true, value, onCommit: onChange });
   } else if (decl.type === "string") {
     control = /* @__PURE__ */ jsx(TextLikeControl, { field: name, numeric: false, value, onCommit: onChange });
+  } else if (decl.type.startsWith("[") || Array.isArray(effectiveValue)) {
+    const arr = Array.isArray(effectiveValue) ? effectiveValue : [];
+    control = /* @__PURE__ */ jsx(
+      ArrayEditor,
+      {
+        value: arr,
+        onChange: (next) => onChange(name, next)
+      }
+    );
+  } else if (decl.type === "object" && isTraitConfigObject4(effectiveValue)) {
+    control = /* @__PURE__ */ jsx(
+      ObjectEditor,
+      {
+        value: effectiveValue,
+        onChange: (next) => onChange(name, next)
+      }
+    );
+  } else if (decl.type.startsWith("Map ") || !SCALAR_TYPES.has(decl.type) && isTraitConfigObject4(effectiveValue)) {
+    const obj = isTraitConfigObject4(effectiveValue) ? effectiveValue : {};
+    control = /* @__PURE__ */ jsx(
+      MapEditor,
+      {
+        value: obj,
+        onChange: (next) => onChange(name, next)
+      }
+    );
   } else {
     control = /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
       decl.type,
@@ -35404,7 +35723,7 @@ function FieldControl({
     decl.description !== void 0 && decl.description !== "" && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: decl.description })
   ] });
 }
-var TIER_ORDER, PropertyInspector;
+var TIER_ORDER, SCALAR_TYPES, PropertyInspector;
 var init_PropertyInspector = __esm({
   "components/core/molecules/PropertyInspector.tsx"() {
     "use client";
@@ -35418,7 +35737,11 @@ var init_PropertyInspector = __esm({
     init_FormSection();
     init_IconPicker();
     init_AssetPicker();
+    init_ArrayEditor();
+    init_ObjectEditor();
+    init_MapEditor();
     TIER_ORDER = ["presentation", "domain", "policy", "infra", "internal"];
+    SCALAR_TYPES = /* @__PURE__ */ new Set(["string", "number", "boolean", "icon", "asset"]);
     PropertyInspector = ({
       config,
       values,
@@ -36112,7 +36435,7 @@ var init_WizardContainer = __esm({
               const isCompleted = index < currentStep;
               const stepKey = step.id ?? step.tabId ?? `step-${index}`;
               const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-              return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -37320,6 +37643,9 @@ var init_GraphCanvas = __esm({
 var init_molecules2 = __esm({
   "components/core/molecules/index.ts"() {
     init_ErrorBoundary();
+    init_ArrayEditor();
+    init_ObjectEditor();
+    init_MapEditor();
     init_FileTree();
     init_FormField();
     init_EmptyState();
@@ -37418,7 +37744,6 @@ var init_molecules2 = __esm({
     init_BranchingLogicBuilder();
     init_VersionDiff();
     init_DocBreadcrumb();
-    init_DocCodeBlock();
     init_DocPagination();
     init_DocSearch();
     init_DocSidebar();
@@ -37445,7 +37770,6 @@ var init_molecules2 = __esm({
     init_SignaturePad();
     init_DocumentViewer();
     init_GraphCanvas();
-    init_CodeViewer();
   }
 });
 
@@ -38559,7 +38883,7 @@ var init_DialogueBubble = __esm({
   }
 });
 function extractTitle(children) {
-  if (!React81__default.isValidElement(children)) return void 0;
+  if (!React79__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -38671,7 +38995,7 @@ function LinearView({
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
       const isCurrent = i === currentIdx;
-      return /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -39629,12 +39953,12 @@ var init_Form = __esm({
       const isSchemaEntity = isOrbitalEntitySchema(entity);
       const resolvedEntity = isSchemaEntity ? entity : void 0;
       const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-      const normalizedInitialData = React81__default.useMemo(() => {
+      const normalizedInitialData = React79__default.useMemo(() => {
         const entityRowAsInitial = isPlainEntityRow(entity) ? entity : void 0;
         const callerInitial = initialData !== null && typeof initialData === "object" && !Array.isArray(initialData) ? initialData : {};
         return entityRowAsInitial !== void 0 ? { ...entityRowAsInitial, ...callerInitial } : callerInitial;
       }, [entity, initialData]);
-      const entityDerivedFields = React81__default.useMemo(() => {
+      const entityDerivedFields = React79__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -39654,16 +39978,16 @@ var init_Form = __esm({
       const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
       const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
       const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-      const [formData, setFormData] = React81__default.useState(
+      const [formData, setFormData] = React79__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React81__default.useState(
+      const [collapsedSections, setCollapsedSections] = React79__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React81__default.useState(null);
-      const formRef = React81__default.useRef(null);
+      const [submitError, setSubmitError] = React79__default.useState(null);
+      const formRef = React79__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React81__default.useRef(false);
+      const mountedRef = React79__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -39676,7 +40000,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React81__default.useMemo(
+      const evalContext = React79__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -39685,7 +40009,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React81__default.useEffect(() => {
+      React79__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -39696,7 +40020,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React81__default.useCallback(
+      const processCalculations = React79__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -39721,7 +40045,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React81__default.useCallback(
+      const checkViolations = React79__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -39759,7 +40083,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React81__default.useCallback(
+      const isFieldVisible = React79__default.useCallback(
         (fieldName) => {
           const condition = conditionalFields[fieldName];
           if (!condition) return true;
@@ -39767,7 +40091,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React81__default.useCallback(
+      const isSectionVisible = React79__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -39843,7 +40167,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React81__default.useCallback(
+      const renderField = React79__default.useCallback(
         (field) => {
           const fieldName = field.name || field.field;
           if (!fieldName) return null;
@@ -39864,7 +40188,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React81__default.useMemo(() => {
+      const normalizedFields = React79__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -39887,7 +40211,7 @@ var init_Form = __esm({
           return field;
         });
       }, [effectiveFields, resolvedEntity]);
-      const schemaFields = React81__default.useMemo(() => {
+      const schemaFields = React79__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -39897,7 +40221,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React81__default.useMemo(() => {
+      const sectionElements = React79__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -41179,7 +41503,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React81__default.useCallback(
+      const getItemActions = React79__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -41655,7 +41979,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React81__default.useMemo(() => {
+      const items = React79__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => ({
@@ -41825,9 +42149,9 @@ function MiniMap({
   viewportRect,
   className
 }) {
-  const canvasRef = React81.useRef(null);
-  const frameRef = React81.useRef(0);
-  React81.useEffect(() => {
+  const canvasRef = React79.useRef(null);
+  const frameRef = React79.useRef(0);
+  React79.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -41909,7 +42233,7 @@ var init_MiniMap = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React81__default.isValidElement(children)) return void 0;
+  if (!React79__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -42256,7 +42580,7 @@ function ResourceCounter({
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: icon }),
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsxs("span", { className: cn("font-bold tabular-nums", color), children: [
+        /* @__PURE__ */ jsxs("span", { className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
           value,
           max != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
             "/",
@@ -42267,10 +42591,18 @@ function ResourceCounter({
     }
   );
 }
-var sizeMap15;
+var colorTokenClasses2, sizeMap15;
 var init_ResourceCounter = __esm({
   "components/game/atoms/ResourceCounter.tsx"() {
     init_cn();
+    colorTokenClasses2 = {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error",
+      muted: "text-muted-foreground"
+    };
     sizeMap15 = {
       sm: { wrapper: "text-xs gap-1 px-1.5 py-0.5", icon: "text-sm" },
       md: { wrapper: "text-sm gap-1.5 px-2 py-1", icon: "text-base" },
@@ -42366,7 +42698,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React81.useState(() => ({
+  const [data, setData] = React79.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -42380,7 +42712,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React81.useEffect(() => {
+  React79.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -42489,12 +42821,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React81.useState(null);
-  const [traits2, setTraits] = React81.useState([]);
-  const [coveredEdges, setCoveredEdges] = React81.useState([]);
-  const [completedTraits, setCompletedTraits] = React81.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React81.useRef(null);
-  React81.useEffect(() => {
+  const [walkStep, setWalkStep] = React79.useState(null);
+  const [traits2, setTraits] = React79.useState([]);
+  const [coveredEdges, setCoveredEdges] = React79.useState([]);
+  const [completedTraits, setCompletedTraits] = React79.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React79.useRef(null);
+  React79.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -42930,15 +43262,15 @@ var init_EntitiesTab = __esm({
 });
 function EventFlowTab({ events: events2 }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React81.useState("all");
-  const containerRef = React81.useRef(null);
-  const [autoScroll, setAutoScroll] = React81.useState(true);
-  React81.useEffect(() => {
+  const [filter, setFilter] = React79.useState("all");
+  const containerRef = React79.useRef(null);
+  const [autoScroll, setAutoScroll] = React79.useState(true);
+  React79.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React81.useMemo(() => {
+  const filteredEvents = React79.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -43054,7 +43386,7 @@ var init_EventFlowTab = __esm({
 });
 function GuardsPanel({ guards }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React81.useState("all");
+  const [filter, setFilter] = React79.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -43067,7 +43399,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React81.useMemo(() => {
+  const filteredGuards = React79.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -43230,10 +43562,10 @@ function EffectBadge({ effect }) {
 }
 function TransitionTimeline({ transitions }) {
   const { t } = useTranslate();
-  const containerRef = React81.useRef(null);
-  const [autoScroll, setAutoScroll] = React81.useState(true);
-  const [expandedId, setExpandedId] = React81.useState(null);
-  React81.useEffect(() => {
+  const containerRef = React79.useRef(null);
+  const [autoScroll, setAutoScroll] = React79.useState(true);
+  const [expandedId, setExpandedId] = React79.useState(null);
+  React79.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -43513,9 +43845,9 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log8, setLog] = React81.useState([]);
-  const prevStatesRef = React81.useRef(/* @__PURE__ */ new Map());
-  React81.useEffect(() => {
+  const [log8, setLog] = React79.useState([]);
+  const prevStatesRef = React79.useRef(/* @__PURE__ */ new Map());
+  React79.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -43684,10 +44016,10 @@ function VerifyModePanel({
   localCount
 }) {
   const { t } = useTranslate();
-  const [expanded, setExpanded] = React81.useState(true);
-  const scrollRef = React81.useRef(null);
-  const prevCountRef = React81.useRef(0);
-  React81.useEffect(() => {
+  const [expanded, setExpanded] = React79.useState(true);
+  const scrollRef = React79.useRef(null);
+  const prevCountRef = React79.useRef(0);
+  React79.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -43744,10 +44076,10 @@ function RuntimeDebugger({
   schema
 }) {
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = React81.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React81.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React79.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React79.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React81.useEffect(() => {
+  React79.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -43756,7 +44088,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React81.useEffect(() => {
+  React79.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -44205,7 +44537,7 @@ function SequenceBar({
     onSlotRemove(index);
   }, [onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
-  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React81__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React79__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -45295,7 +45627,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React81__default.useCallback(() => {
+      const handleActionClick = React79__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -45306,7 +45638,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React81__default.useCallback(
+      const computeMetricValue = React79__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -45345,7 +45677,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React81__default.useMemo(() => {
+      const schemaStats = React79__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -45353,7 +45685,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React81__default.useMemo(() => {
+      const calculatedTrend = React79__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue2 === void 0)
           return void 0;
@@ -45634,6 +45966,37 @@ var init_VariablePanel = __esm({
     VariablePanel.displayName = "VariablePanel";
   }
 });
+function StateJsonView({
+  data,
+  label,
+  defaultExpanded = false,
+  className
+}) {
+  const { t } = useTranslate();
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const jsonString = JSON.stringify(data, null, 2);
+  return /* @__PURE__ */ jsxs(VStack, { className: cn("rounded-lg border border-border overflow-hidden", className), gap: "none", children: [
+    /* @__PURE__ */ jsxs(HStack, { className: "items-center justify-between p-2 bg-muted", gap: "sm", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground font-medium", children: label ?? t("stateArchitect.viewCode") }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setExpanded(!expanded), className: "text-xs", children: expanded ? t("stateArchitect.hideJson") : t("stateArchitect.showJson") })
+    ] }),
+    expanded && /* @__PURE__ */ jsx(Box, { className: "p-3 bg-background overflow-x-auto", children: /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "caption",
+        className: "text-foreground font-mono whitespace-pre text-xs leading-relaxed block",
+        children: jsonString
+      }
+    ) })
+  ] });
+}
+var init_StateJsonView = __esm({
+  "components/game/organisms/puzzles/state-architect/StateJsonView.tsx"() {
+    init_atoms2();
+    init_cn();
+    StateJsonView.displayName = "StateJsonView";
+  }
+});
 function layoutStates(states, width, height) {
   const cx = width / 2;
   const cy = height / 2;
@@ -45925,7 +46288,7 @@ function StateArchitectBoard({
                 !r.passed && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-error", children: t("stateArchitect.gotState", { state: r.actualState }) })
               ] }, i))
             ] }),
-            resolved.showCodeView !== false && /* @__PURE__ */ jsx(CodeView, { data: codeData, label: "View Code" })
+            resolved.showCodeView !== false && /* @__PURE__ */ jsx(StateJsonView, { data: codeData, label: "View Code" })
           ] })
         ] }),
         playState === "success" && /* @__PURE__ */ jsx(Box, { className: "p-4 rounded-container bg-success/20 border border-success text-center", children: /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "text-success", children: str(resolved.successMessage) || t("stateArchitect.allPassed") }) }),
@@ -45962,7 +46325,7 @@ var init_StateArchitectBoard = __esm({
     init_StateNode();
     init_TransitionArrow();
     init_VariablePanel();
-    init_CodeView();
+    init_StateJsonView();
     init_boardEntity();
     ENCOURAGEMENT_KEYS3 = [
       "puzzle.tryAgain1",
@@ -46042,7 +46405,7 @@ function StatusEffect({
         ),
         title: label,
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: icon }),
+          /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }) }),
           duration !== void 0 && /* @__PURE__ */ jsx(
             "span",
             {
@@ -46073,6 +46436,7 @@ var sizeMap16, variantStyles9;
 var init_StatusEffect = __esm({
   "components/game/atoms/StatusEffect.tsx"() {
     init_cn();
+    init_Icon();
     sizeMap16 = {
       sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-xs -top-1 -right-1 w-4 h-4", timer: "text-[9px]" },
       md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-xs" },
@@ -46358,7 +46722,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React81__default.useMemo(() => {
+      const items = React79__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -46515,7 +46879,7 @@ var init_TimerDisplay = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React81__default.isValidElement(children)) {
+  if (!React79__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -46553,7 +46917,7 @@ var init_ToastSlot = __esm({
         eventBus.emit("UI:CLOSE");
       };
       if (!isVisible) return null;
-      const isCustomContent = React81__default.isValidElement(children) && !message;
+      const isCustomContent = React79__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -47073,14 +47437,20 @@ function XPBar({
 }) {
   const sizes = sizeMap18[size];
   const percentage = max > 0 ? Math.max(0, Math.min(100, current / max * 100)) : 0;
-  const [fillWidth, setFillWidth] = React81.useState(animated ? 0 : percentage);
-  React81.useEffect(() => {
+  const [fillWidth, setFillWidth] = React79.useState(animated ? 0 : percentage);
+  React79.useEffect(() => {
     if (!animated) {
       setFillWidth(percentage);
       return;
     }
-    const frame = requestAnimationFrame(() => setFillWidth(percentage));
-    return () => cancelAnimationFrame(frame);
+    let frame2;
+    const frame1 = requestAnimationFrame(() => {
+      frame2 = requestAnimationFrame(() => setFillWidth(percentage));
+    });
+    return () => {
+      cancelAnimationFrame(frame1);
+      cancelAnimationFrame(frame2);
+    };
   }, [animated, percentage]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
     level != null && /* @__PURE__ */ jsxs(
@@ -47118,7 +47488,7 @@ function XPBar({
           )
         }
       ),
-      showLabel && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground tabular-nums", sizes.text), children: [
+      showLabel && /* @__PURE__ */ jsxs("span", { className: cn("text-foreground/70 tabular-nums", sizes.text), children: [
         current,
         " / ",
         max,
@@ -47141,12 +47511,12 @@ var init_XPBar = __esm({
   }
 });
 function lazyThree(name, loader) {
-  const Lazy = React81__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React79__default.lazy(() => loader().then((m) => ({ default: m[name] })));
   function ThreeWrapper(props) {
-    return React81__default.createElement(
-      React81__default.Suspense,
+    return React79__default.createElement(
+      React79__default.Suspense,
       { fallback: null },
-      React81__default.createElement(Lazy, props)
+      React79__default.createElement(Lazy, props)
     );
   }
   ThreeWrapper.displayName = `Lazy(${name})`;
@@ -47194,8 +47564,6 @@ var init_component_registry_generated = __esm({
     init_ChoiceButton();
     init_ClassifierBoard();
     init_CodeBlock();
-    init_CodeView();
-    init_CodeViewer();
     init_CombatLog();
     init_ComboCounter();
     init_CommunityLinks();
@@ -47223,7 +47591,6 @@ var init_component_registry_generated = __esm({
     init_DialogueBox();
     init_DialogueBubble();
     init_DocBreadcrumb();
-    init_DocCodeBlock();
     init_DocPagination();
     init_DocSearch();
     init_DocSidebar();
@@ -47361,6 +47728,7 @@ var init_component_registry_generated = __esm({
     init_StatDisplay();
     init_StateArchitectBoard();
     init_StateIndicator();
+    init_StateJsonView();
     init_StateMachineView();
     init_StateNode();
     init_StatsGrid();
@@ -47478,8 +47846,6 @@ var init_component_registry_generated = __esm({
       "ChoiceButton": ChoiceButton,
       "ClassifierBoard": ClassifierBoard,
       "CodeBlock": CodeBlock,
-      "CodeView": CodeView,
-      "CodeViewer": CodeViewer,
       "CombatLog": CombatLog,
       "ComboCounter": ComboCounter,
       "CommunityLinks": CommunityLinks,
@@ -47511,7 +47877,6 @@ var init_component_registry_generated = __esm({
       "Divider": DividerPattern,
       "DividerPattern": DividerPattern,
       "DocBreadcrumb": DocBreadcrumb,
-      "DocCodeBlock": DocCodeBlock,
       "DocPagination": DocPagination,
       "DocSearch": DocSearch,
       "DocSidebar": DocSidebar,
@@ -47678,6 +48043,7 @@ var init_component_registry_generated = __esm({
       "StatDisplay": StatDisplay,
       "StateArchitectBoard": StateArchitectBoard,
       "StateIndicator": StateIndicator,
+      "StateJsonView": StateJsonView,
       "StateMachineView": StateMachineView,
       "StateNode": StateNode2,
       "StatsGrid": StatsGrid,
@@ -47762,7 +48128,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React81__default.createElement(
+  return React79__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -48252,7 +48618,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React81__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React79__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -48292,14 +48658,14 @@ function isPatternConfig(value) {
   if (value === null || value === void 0) return false;
   if (typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
-  if (React81__default.isValidElement(value)) return false;
+  if (React79__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
   return "type" in record && typeof record.type === "string";
 }
 function isPlainConfigObject(value) {
-  if (React81__default.isValidElement(value)) return false;
+  if (React79__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -49459,7 +49825,7 @@ init_EventHandlerBoard();
 init_StateNode();
 init_TransitionArrow();
 init_VariablePanel();
-init_CodeView();
+init_StateJsonView();
 init_StateArchitectBoard();
 
 // components/game/organisms/puzzles/simulator/index.ts
@@ -49910,4 +50276,4 @@ init_AboutPageTemplate();
 // components/index.ts
 init_cn();
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocCodeBlock, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };
+export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArrayEditor, ArticleSection, Aside, AssetPicker, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BehaviorView, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, Coachmark, CodeBlock, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, Dialog, DialogueBox, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FeatureRenderer2 as FeatureRenderer, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HealthPanel, HeroOrganism, HeroSection, IDENTITY_BOOK_FIELDS, Icon, IconPicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapEditor, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MatrixQuestion, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, ModuleCard, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectEditor, ObjectRulePanel, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PositionedCanvas, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ReplyTree, ResourceBar, ResourceCounter, RichBlockEditor, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SvgBranch, SvgConnection, SvgFlow, SvgGrid, SvgLobe, SvgMesh, SvgMorph, SvgNode, SvgPulse, SvgRing, SvgShield, SvgStack, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, TableView, Tabs, TagCloud, TagInput, TeamCard, TeamOrganism, TerrainPalette, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, VersionDiff, ViolationAlert, VoteStack, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createUnitAnimationState, drawSprite, generateCombatMessage, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, mapBookData, pendulum, projectileMotion, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, springOscillator, tickAnimationState, toCodeLanguage, transitionAnimation, useAnchorRect, useBattleState, useCamera, useGameAudio, useGameAudioContext, useImageCache, usePhysics2D, useSpriteAnimations };