@almadar/ui 6.2.0 → 6.4.0

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React77 from 'react';
-import React77__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, useId, Suspense, lazy, useSyncExternalStore } from 'react';
+import * as React78 from 'react';
+import React78__default, { createContext, useContext, useMemo, useRef, useEffect, useCallback, useState, useLayoutEffect, useId, Suspense, lazy, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { EventBusContext, useTraitScopeChain, useCurrentPagePath, useGameAudioContextOptional, useRenderSlot, useNavStack, useEntitySchemaOptional, RenderSlotProvider, useEntityBindingSnapshot, useTraitScope, TraitScopeProvider } from '@almadar/ui/providers';
@@ -262,7 +262,7 @@ var init_SvgFlow = __esm({
       width = 100,
       height = 100
     }) => {
-      const markerId = React77__default.useMemo(() => {
+      const markerId = React78__default.useMemo(() => {
         flowIdCounter += 1;
         return `almadar-flow-arrow-${flowIdCounter}`;
       }, []);
@@ -855,7 +855,7 @@ var init_SvgRing = __esm({
       width = 100,
       height = 100
     }) => {
-      const gradientId = React77__default.useMemo(() => {
+      const gradientId = React78__default.useMemo(() => {
         ringIdCounter += 1;
         return `almadar-ring-glow-${ringIdCounter}`;
       }, []);
@@ -1397,7 +1397,7 @@ var init_Icon = __esm({
       const effectiveName = typeof icon === "string" && icon !== "" ? icon : name;
       const effectiveStrokeWidth = strokeWidth != null && strokeWidth > 0 ? strokeWidth : void 0;
       const family = useIconFamily();
-      const RenderedComponent = React77__default.useMemo(() => {
+      const RenderedComponent = React78__default.useMemo(() => {
         if (directIcon) return null;
         return effectiveName ? resolveIconForFamily(effectiveName) : null;
       }, [directIcon, effectiveName, family]);
@@ -1526,7 +1526,7 @@ var init_atlasSlice = __esm({
   }
 });
 function useAtlasSliceDataUrl(asset) {
-  const [, bump] = React77.useReducer((x) => x + 1, 0);
+  const [, bump] = React78.useReducer((x) => x + 1, 0);
   if (!isAtlasAsset(asset)) return void 0;
   const key = `${asset.atlas}#${asset.sprite}`;
   const cached = sliceDataUrlCache.get(key);
@@ -1589,13 +1589,13 @@ function AtlasImage({
   style,
   "aria-hidden": ariaHidden
 }) {
-  const [, bump] = React77.useReducer((x) => x + 1, 0);
-  const canvasRef = React77.useRef(null);
+  const [, bump] = React78.useReducer((x) => x + 1, 0);
+  const canvasRef = React78.useRef(null);
   const sliced = isAtlasAsset(asset);
   const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
   const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
   const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
-  React77.useEffect(() => {
+  React78.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !img || !rect) return;
     canvas.width = rect.sw;
@@ -1671,7 +1671,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React77__default.isValidElement(value)) {
+  if (React78__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -1748,7 +1748,7 @@ var init_Button = __esm({
       md: "h-icon-default w-icon-default",
       lg: "h-icon-default w-icon-default"
     };
-    Button = React77__default.forwardRef(
+    Button = React78__default.forwardRef(
       ({
         className,
         variant = "primary",
@@ -1820,7 +1820,7 @@ var init_Input = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Input = React77__default.forwardRef(
+    Input = React78__default.forwardRef(
       ({
         className,
         inputType,
@@ -1844,9 +1844,9 @@ var init_Input = __esm({
         const eventBus = useEventBus();
         const type = inputType || htmlType || "text";
         const isDeclarative = typeof onChange === "string";
-        const [localValue, setLocalValue] = React77__default.useState(value);
-        const pendingEchoRef = React77__default.useRef(/* @__PURE__ */ new Set());
-        React77__default.useEffect(() => {
+        const [localValue, setLocalValue] = React78__default.useState(value);
+        const pendingEchoRef = React78__default.useRef(/* @__PURE__ */ new Set());
+        React78__default.useEffect(() => {
           if (!isDeclarative) return;
           const incoming = value == null ? "" : String(value);
           if (pendingEchoRef.current.has(incoming)) {
@@ -2013,7 +2013,7 @@ var Label;
 var init_Label = __esm({
   "components/core/atoms/Label.tsx"() {
     init_cn();
-    Label = React77__default.forwardRef(
+    Label = React78__default.forwardRef(
       ({ className, required, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxs(
           "label",
@@ -2040,7 +2040,7 @@ var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
     init_useEventBus();
-    Textarea = React77__default.forwardRef(
+    Textarea = React78__default.forwardRef(
       ({ className, error, onChange, ...props }, ref) => {
         const eventBus = useEventBus();
         const handleChange = (e) => {
@@ -2094,6 +2094,7 @@ function NativeSelect({
   error,
   onChange,
   onValueChange,
+  action,
   value,
   ...props
 }) {
@@ -2105,6 +2106,9 @@ function NativeSelect({
       onChange?.(e);
     }
     dispatchValueChange(onValueChange, eventBus, e.target.value);
+    if (action) {
+      eventBus.emit(`UI:${action}`, { value: e.target.value });
+    }
   };
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxs(
@@ -2140,6 +2144,7 @@ function RichSelect({
   error,
   onChange,
   onValueChange,
+  action,
   value,
   multiple,
   searchable,
@@ -2165,6 +2170,9 @@ function RichSelect({
       eventBus.emit(`UI:${onChange}`, { value: next });
     }
     dispatchValueChange(onValueChange, eventBus, next);
+    if (action) {
+      eventBus.emit(`UI:${action}`, { value: next });
+    }
   };
   const clear = (e) => {
     e.stopPropagation();
@@ -2173,6 +2181,9 @@ function RichSelect({
       eventBus.emit(`UI:${onChange}`, { value: next });
     }
     dispatchValueChange(onValueChange, eventBus, next);
+    if (action) {
+      eventBus.emit(`UI:${action}`, { value: next });
+    }
   };
   useEffect(() => {
     const handler = (e) => {
@@ -2279,7 +2290,7 @@ var init_Select = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
-    Select = React77__default.forwardRef(
+    Select = React78__default.forwardRef(
       (props, _ref) => {
         const { multiple, searchable, clearable } = props;
         if (multiple || searchable || clearable) {
@@ -2296,7 +2307,7 @@ var init_Checkbox = __esm({
   "components/core/atoms/Checkbox.tsx"() {
     init_cn();
     init_useEventBus();
-    Checkbox = React77__default.forwardRef(
+    Checkbox = React78__default.forwardRef(
       ({ className, label, id, onChange, ...props }, ref) => {
         const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
         const eventBus = useEventBus();
@@ -2350,7 +2361,7 @@ var init_Spinner = __esm({
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
-    Spinner = React77__default.forwardRef(
+    Spinner = React78__default.forwardRef(
       ({ className, size = "md", overlay, ...props }, ref) => {
         if (overlay) {
           return /* @__PURE__ */ jsx(
@@ -2440,7 +2451,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 = React77__default.forwardRef(
+    Card = React78__default.forwardRef(
       ({
         className,
         variant = "bordered",
@@ -2489,9 +2500,9 @@ var init_Card = __esm({
       }
     );
     Card.displayName = "Card";
-    CardHeader = React77__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+    CardHeader = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React77__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -2504,11 +2515,11 @@ var init_Card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardContent = React77__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+    CardContent = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
     CardContent.displayName = "CardContent";
     CardBody = CardContent;
     CardBody.displayName = "CardBody";
-    CardFooter = React77__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React78__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -2562,7 +2573,7 @@ var init_Badge = __esm({
       md: "px-2.5 py-1 text-sm",
       lg: "px-3 py-1.5 text-base"
     };
-    Badge = React77__default.forwardRef(
+    Badge = React78__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
@@ -2690,7 +2701,7 @@ var init_FilterPill = __esm({
       md: "w-3.5 h-3.5",
       lg: "w-4 h-4"
     };
-    FilterPill = React77__default.forwardRef(
+    FilterPill = React78__default.forwardRef(
       ({
         className,
         variant = "default",
@@ -2819,8 +2830,8 @@ var init_Avatar = __esm({
       actionPayload
     }) => {
       const eventBus = useEventBus();
-      const [imgFailed, setImgFailed] = React77__default.useState(false);
-      React77__default.useEffect(() => {
+      const [imgFailed, setImgFailed] = React78__default.useState(false);
+      React78__default.useEffect(() => {
         setImgFailed(false);
       }, [src]);
       const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -3072,7 +3083,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React77__default.forwardRef(
+    Box = React78__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -3137,7 +3148,7 @@ var init_Box = __esm({
           onPointerDown?.(e);
         }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
         const isClickable = action || onClick;
-        return React77__default.createElement(
+        return React78__default.createElement(
           Component,
           {
             ref,
@@ -3191,7 +3202,7 @@ var init_Center = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = minHeight ? { minHeight, ...style } : style;
-      return React77__default.createElement(Component, {
+      return React78__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           horizontal && "justify-center",
@@ -3459,7 +3470,7 @@ var init_Radio = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    Radio = React77__default.forwardRef(
+    Radio = React78__default.forwardRef(
       ({
         label,
         helperText,
@@ -3476,12 +3487,12 @@ var init_Radio = __esm({
         onChange,
         ...props
       }, ref) => {
-        const reactId = React77__default.useId();
+        const reactId = React78__default.useId();
         const baseId = id || `radio-${reactId}`;
         const hasError = !!error;
         const eventBus = useEventBus();
-        const [selected, setSelected] = React77__default.useState(value);
-        React77__default.useEffect(() => {
+        const [selected, setSelected] = React78__default.useState(value);
+        React78__default.useEffect(() => {
           if (value !== void 0) setSelected(value);
         }, [value]);
         const pick = (next, e) => {
@@ -3663,7 +3674,7 @@ var init_Switch = __esm({
   "components/core/atoms/Switch.tsx"() {
     "use client";
     init_cn();
-    Switch = React77.forwardRef(
+    Switch = React78.forwardRef(
       ({
         checked,
         defaultChecked = false,
@@ -3674,10 +3685,10 @@ var init_Switch = __esm({
         name,
         className
       }, ref) => {
-        const [isChecked, setIsChecked] = React77.useState(
+        const [isChecked, setIsChecked] = React78.useState(
           checked !== void 0 ? checked : defaultChecked
         );
-        React77.useEffect(() => {
+        React78.useEffect(() => {
           if (checked !== void 0) {
             setIsChecked(checked);
           }
@@ -3840,7 +3851,7 @@ var init_Stack = __esm({
       };
       const isHorizontal = direction === "horizontal";
       const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-      return React77__default.createElement(
+      return React78__default.createElement(
         Component,
         {
           className: cn(
@@ -4129,7 +4140,7 @@ var init_Typography = __esm({
       if (format !== void 0 && format !== "none" && (typeof body === "string" || typeof body === "number" || body instanceof Date)) {
         body = formatValue(body, format);
       }
-      return React77__default.createElement(
+      return React78__default.createElement(
         Component,
         {
           id,
@@ -4363,7 +4374,7 @@ var Dialog;
 var init_Dialog = __esm({
   "components/core/atoms/Dialog.tsx"() {
     init_cn();
-    Dialog = React77__default.forwardRef(
+    Dialog = React78__default.forwardRef(
       ({
         role = "dialog",
         "aria-modal": ariaModal = true,
@@ -4389,7 +4400,7 @@ var Aside;
 var init_Aside = __esm({
   "components/core/atoms/Aside.tsx"() {
     init_cn();
-    Aside = React77__default.forwardRef(
+    Aside = React78__default.forwardRef(
       ({ className, children, ...rest }, ref) => /* @__PURE__ */ jsx("aside", { ref, className: cn(className), ...rest, children })
     );
     Aside.displayName = "Aside";
@@ -4468,9 +4479,9 @@ var init_LawReferenceTooltip = __esm({
       className
     }) => {
       const { t } = useTranslate();
-      const [isVisible, setIsVisible] = React77__default.useState(false);
-      const timeoutRef = React77__default.useRef(null);
-      const triggerRef = React77__default.useRef(null);
+      const [isVisible, setIsVisible] = React78__default.useState(false);
+      const timeoutRef = React78__default.useRef(null);
+      const triggerRef = React78__default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -4481,7 +4492,7 @@ var init_LawReferenceTooltip = __esm({
       };
       const { revealed, triggerProps } = useTapReveal({ refs: [triggerRef] });
       const open = isVisible || revealed;
-      React77__default.useEffect(() => {
+      React78__default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
         };
@@ -4691,7 +4702,7 @@ var init_StatusDot = __esm({
       md: "w-2.5 h-2.5",
       lg: "w-3 h-3"
     };
-    StatusDot = React77__default.forwardRef(
+    StatusDot = React78__default.forwardRef(
       ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
         return /* @__PURE__ */ jsx(
           "span",
@@ -4745,7 +4756,7 @@ var init_TrendIndicator = __esm({
       down: "trending-down",
       flat: "arrow-right"
     };
-    TrendIndicator = React77__default.forwardRef(
+    TrendIndicator = React78__default.forwardRef(
       ({
         className,
         value,
@@ -4814,7 +4825,7 @@ var init_RangeSlider = __esm({
       md: "w-4 h-4",
       lg: "w-5 h-5"
     };
-    RangeSlider = React77__default.forwardRef(
+    RangeSlider = React78__default.forwardRef(
       ({
         className,
         min = 0,
@@ -5471,7 +5482,7 @@ var init_ContentSection = __esm({
       md: "py-16",
       lg: "py-24"
     };
-    ContentSection = React77__default.forwardRef(
+    ContentSection = React78__default.forwardRef(
       ({ children, background = "default", padding = "lg", id, className }, ref) => {
         return /* @__PURE__ */ jsx(
           Box,
@@ -6005,7 +6016,7 @@ var init_AnimatedReveal = __esm({
       "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
       "none": {}
     };
-    AnimatedReveal = React77__default.forwardRef(
+    AnimatedReveal = React78__default.forwardRef(
       ({
         trigger = "scroll",
         animation = "fade-up",
@@ -6165,7 +6176,7 @@ var init_AnimatedGraphic = __esm({
   "components/marketing/atoms/AnimatedGraphic.tsx"() {
     "use client";
     init_cn();
-    AnimatedGraphic = React77__default.forwardRef(
+    AnimatedGraphic = React78__default.forwardRef(
       ({
         src,
         svgContent,
@@ -6188,7 +6199,7 @@ var init_AnimatedGraphic = __esm({
         const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
         const resolvedSvg = svgContent ?? fetchedSvg;
         const prevAnimateRef = useRef(animate);
-        const setRef = React77__default.useCallback(
+        const setRef = React78__default.useCallback(
           (node) => {
             containerRef.current = node;
             if (typeof ref === "function") ref(node);
@@ -6289,7 +6300,7 @@ function resolveMarkerExpression(expression, entity, config, state) {
 function isPlainObject(value) {
   if (value === null || value === void 0 || typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
-  if (React77__default.isValidElement(value)) return false;
+  if (React78__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   return true;
@@ -6298,7 +6309,7 @@ function isEvaluatorResolvedData(value) {
   return evaluatorResolvedData.has(value);
 }
 function brandResolved(value) {
-  if (value !== null && typeof value === "object" && !React77__default.isValidElement(value) && !(value instanceof Date)) {
+  if (value !== null && typeof value === "object" && !React78__default.isValidElement(value) && !(value instanceof Date)) {
     resolvedMarkerFree.add(value);
   }
 }
@@ -6331,7 +6342,7 @@ function walkValue(value, scopeTrait, entity, config, state) {
     }
     const resolved = resolveMarkerExpression(value.expression, entity, config, state);
     markerResolutionCache.set(value, { entity, config, state, resolved });
-    if (resolved !== null && typeof resolved === "object" && !React77__default.isValidElement(resolved) && !(resolved instanceof Date)) {
+    if (resolved !== null && typeof resolved === "object" && !React78__default.isValidElement(resolved) && !(resolved instanceof Date)) {
       resolvedMarkerFree.add(resolved);
       evaluatorResolvedData.add(resolved);
     }
@@ -6519,7 +6530,6 @@ var init_Modal = __esm({
             ),
             style: { backgroundColor: "rgba(0, 0, 0, 0.6)" },
             onClick: handleOverlayClick,
-            "aria-hidden": "true",
             children: /* @__PURE__ */ jsxs(
               Dialog,
               {
@@ -6713,7 +6723,7 @@ var init_Drawer = __esm({
       };
       const widthClass = width in sizeWidths ? sizeWidths[width] : "";
       const widthStyle = width in sizeWidths ? void 0 : { width };
-      const positionClasses = position === "right" ? "right-0 border-l" : "left-0 border-r";
+      const positionClasses2 = position === "right" ? "right-0 border-l" : "left-0 border-r";
       const drawerSign = position === "right" ? 1 : -1;
       const slideTransform = position === "right" ? "translateX(100%)" : "translateX(-100%)";
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6735,7 +6745,7 @@ var init_Drawer = __esm({
             className: cn(
               "fixed top-0 bottom-0 z-50",
               "flex flex-col max-h-screen",
-              positionClasses,
+              positionClasses2,
               widthClass,
               drawerAnim,
               className
@@ -6989,7 +6999,7 @@ var init_ErrorBoundary = __esm({
         }
       );
     };
-    ErrorBoundary = class extends React77__default.Component {
+    ErrorBoundary = class extends React78__default.Component {
       constructor(props) {
         super(props);
         __publicField(this, "reset", () => {
@@ -7272,7 +7282,7 @@ var init_Container = __esm({
       as: Component = "div"
     }) => {
       const resolvedSize = maxWidth ?? size ?? "lg";
-      return React77__default.createElement(
+      return React78__default.createElement(
         Component,
         {
           className: cn(
@@ -8296,7 +8306,7 @@ var init_FloatingActionButton = __esm({
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [isExpanded, actions]);
-      const positionClasses = {
+      const positionClasses2 = {
         "bottom-right": "bottom-6 right-6",
         "bottom-left": "bottom-6 left-6",
         "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
@@ -8305,7 +8315,7 @@ var init_FloatingActionButton = __esm({
         "top-center": "top-6 left-1/2 -translate-x-1/2"
       };
       if (resolvedAction && (!actions || actions.length === 0)) {
-        return /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", positionClasses[position], className), children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", positionClasses2[position], className), children: /* @__PURE__ */ jsx(
           Button,
           {
             variant: resolvedAction.variant || "primary",
@@ -8333,7 +8343,7 @@ var init_FloatingActionButton = __esm({
             ref: fabRef,
             className: cn(
               "fixed z-50 flex flex-col items-end gap-3",
-              positionClasses[position],
+              positionClasses2[position],
               position.includes("left") && "items-start",
               className
             ),
@@ -9610,7 +9620,7 @@ function proceduralShapes(view, pos, fade, progress) {
     }
   }
 }
-function expandFxItem(view, node, epochNowMs, dim) {
+function expandFxItem(view, node, epochNowMs, dim, projector, fontFamily) {
   if (view.space === "screen") return [];
   const tickMs = node.tickMs ?? DEFAULT_TICK_MS;
   const { ageMs, progress, fade } = fxLifecycle(view, epochNowMs, tickMs);
@@ -9646,24 +9656,27 @@ function expandFxItem(view, node, epochNowMs, dim) {
     out.push(...proceduralShapes(view, pos, fade, progress));
   }
   if (view.message) {
+    const pxSize = projector && view.size !== void 0 ? Math.max(10, Math.round(view.size * projector.tileWidth)) : void 0;
+    const family = fontFamily ?? "system-ui, sans-serif";
     const text = {
       type: "draw-text",
       text: view.message,
       position: pos,
       offsetY: -(0.15 + 0.55 * progress),
       color: view.color ?? node.textColor ?? DEFAULT_TEXT_COLOR,
-      opacity: fade
+      opacity: fade,
+      font: `bold ${pxSize ?? 14}px ${family}`
     };
     out.push(text);
   }
   return out;
 }
-function expandFxLayer(node, epochNowMs, dim) {
+function expandFxLayer(node, epochNowMs, dim, projector, fontFamily) {
   if (!Array.isArray(node.items)) return [];
   const out = [];
   for (const item of node.items) {
     if (!item || typeof item.id !== "string") continue;
-    out.push(...expandFxItem(resolveFxView(item, node.presets), node, epochNowMs, dim));
+    out.push(...expandFxItem(resolveFxView(item, node.presets), node, epochNowMs, dim, projector, fontFamily));
   }
   return out;
 }
@@ -9730,7 +9743,7 @@ function paintDrawable(painter, node, dctx) {
       break;
     case "draw-fx-layer": {
       const epochNow = dctx.time > 0 && typeof performance !== "undefined" ? performance.timeOrigin + dctx.time : 0;
-      for (const child of expandFxLayer(node, epochNow, "2d")) paintDrawable(painter, child, dctx);
+      for (const child of expandFxLayer(node, epochNow, "2d", dctx.projector, dctx.fontFamily)) paintDrawable(painter, child, dctx);
       break;
     }
   }
@@ -10191,7 +10204,7 @@ var init_LearningCanvas = __esm({
         if (drawables?.length && projector) {
           const painter = createWebPainter(ctx, invalidateRef.current);
           const timeMs = needsAnim && typeof performance !== "undefined" ? performance.now() : 0;
-          const dctx = { projector, time: timeMs, invalidate: invalidateRef.current };
+          const dctx = { projector, time: timeMs, invalidate: invalidateRef.current, fontFamily: themeBodyFont(canvas) };
           for (const node of drawables) {
             paintDrawable(painter, node, dctx);
           }
@@ -13050,9 +13063,11 @@ var init_Tabs = __esm({
         }
       };
       const handleKeyDown = (e, index) => {
-        if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+        const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+        const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+        if (e.key === prevKey || e.key === nextKey) {
           e.preventDefault();
-          const direction = e.key === "ArrowLeft" ? -1 : 1;
+          const direction = e.key === prevKey ? -1 : 1;
           const nextIndex = (index + direction + safeItems.length) % safeItems.length;
           const nextTab = safeItems[nextIndex];
           if (nextTab && !nextTab.disabled) {
@@ -13627,7 +13642,7 @@ var init_CodeBlock = __esm({
     DIFF_STYLE_FALLBACK = { bg: "", prefix: " ", text: "text-foreground" };
     LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
     HIDDEN_LINE_NUMBERS = { display: "none" };
-    CodeBlock = React77__default.memo(
+    CodeBlock = React78__default.memo(
       ({
         code: rawCode,
         language = "text",
@@ -14210,14 +14225,77 @@ var init_CodeBlock = __esm({
     CodeBlock.displayName = "CodeBlock";
   }
 });
+function loadMermaid() {
+  mermaidModule ?? (mermaidModule = import('mermaid').then((m) => m.default));
+  return mermaidModule;
+}
+var mermaidModule, MermaidDiagram;
+var init_MermaidDiagram = __esm({
+  "components/core/molecules/markdown/MermaidDiagram.tsx"() {
+    init_Box();
+    init_Typography();
+    init_CodeBlock();
+    init_cn();
+    mermaidModule = null;
+    MermaidDiagram = React78__default.memo(
+      ({ code, className }) => {
+        const { resolvedMode } = useTheme();
+        const containerRef = useRef(null);
+        const [error, setError] = useState(null);
+        const reactId = useId();
+        useEffect(() => {
+          let active = true;
+          void (async () => {
+            try {
+              const mermaid = await loadMermaid();
+              mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: "strict",
+                theme: resolvedMode === "dark" ? "dark" : "default"
+              });
+              const domId = `mermaid-${reactId.replace(/[^a-zA-Z0-9]/g, "")}`;
+              const { svg } = await mermaid.render(domId, code);
+              if (!active || !containerRef.current) return;
+              containerRef.current.innerHTML = svg;
+              setError(null);
+            } catch (err) {
+              if (active) setError(err instanceof Error ? err.message : String(err));
+            }
+          })();
+          return () => {
+            active = false;
+          };
+        }, [code, resolvedMode, reactId]);
+        return /* @__PURE__ */ jsxs(Box, { className: cn("not-prose my-4", className), children: [
+          error !== null && /* @__PURE__ */ jsxs(Box, { className: "space-y-2 mb-2", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-error whitespace-pre-wrap", children: error }),
+            /* @__PURE__ */ jsx(CodeBlock, { code, language: "mermaid" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ref: containerRef,
+              "data-testid": "mermaid-diagram",
+              className: "overflow-x-auto",
+              style: error !== null ? { display: "none" } : void 0
+            }
+          )
+        ] });
+      },
+      (prev, next) => prev.code === next.code && prev.className === next.className
+    );
+    MermaidDiagram.displayName = "MermaidDiagram";
+  }
+});
 var MarkdownContent;
 var init_MarkdownContent = __esm({
   "components/core/molecules/markdown/MarkdownContent.tsx"() {
     init_katex_min();
     init_Box();
     init_CodeBlock();
+    init_MermaidDiagram();
     init_cn();
-    MarkdownContent = React77__default.memo(
+    MarkdownContent = React78__default.memo(
       ({ content, direction = "ltr", className }) => {
         const { t: _t } = useTranslate();
         const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -14262,6 +14340,9 @@ var init_MarkdownContent = __esm({
                     if (!inline) {
                       const match = /language-(\w+)/.exec(codeClassName ?? "");
                       const code = String(children).replace(/\n$/, "");
+                      if (match?.[1] === "mermaid") {
+                        return /* @__PURE__ */ jsx(MermaidDiagram, { code });
+                      }
                       if (match) {
                         return /* @__PURE__ */ jsx(
                           CodeBlock,
@@ -15544,7 +15625,7 @@ var init_StateMachineView = __esm({
                 style: { top: title ? 30 : 0 },
                 children: [
                   entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React77__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+                  states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React78__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                     StateNode,
                     {
                       state,
@@ -18185,8 +18266,8 @@ function MiniMap({
   tileAssets,
   unitAssets
 }) {
-  const canvasRef = React77.useRef(null);
-  const imgCacheRef = React77.useRef(/* @__PURE__ */ new Map());
+  const canvasRef = React78.useRef(null);
+  const imgCacheRef = React78.useRef(/* @__PURE__ */ new Map());
   function loadImg(url) {
     const cached = imgCacheRef.current.get(url);
     if (cached) return cached.complete ? cached : null;
@@ -18202,7 +18283,7 @@ function MiniMap({
     imgCacheRef.current.set(url, img);
     return null;
   }
-  React77.useEffect(() => {
+  React78.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -18783,7 +18864,7 @@ function Canvas2D({
   const registerChildDrawable = useCallback((node) => {
     childDrawablesRef.current.push(node);
   }, []);
-  const hasJsxChildren = React77.Children.count(children) > 0;
+  const hasJsxChildren = React78.Children.count(children) > 0;
   function isDrawableLayer(node) {
     return node.type === "draw-sprite-layer" || node.type === "draw-shape-layer" || node.type === "draw-text-layer";
   }
@@ -19341,7 +19422,7 @@ function Canvas({
     if (mode !== "3d") return;
     const next = childDrawablesRef.current;
     canvasLog.debug("children:adopt", { registered: next.length, adopted: childDrawables.length });
-    if (next.length === 0 && React77.Children.count(children) > 0) return;
+    if (next.length === 0 && React78.Children.count(children) > 0) return;
     setChildDrawables(
       (prev) => prev.length === next.length && JSON.stringify(prev) === JSON.stringify(next) ? prev : [...next]
     );
@@ -19379,7 +19460,7 @@ function Canvas({
     };
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(Canvas3DHost2, { ...props3d }) }),
-      React77.Children.count(children) > 0 && /* @__PURE__ */ jsx(DrawableRegistryContext.Provider, { value: registerChildDrawable, children: /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children }) })
+      React78.Children.count(children) > 0 && /* @__PURE__ */ jsx(DrawableRegistryContext.Provider, { value: registerChildDrawable, children: /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", width: 0, height: 0, overflow: "hidden" }, children }) })
     ] });
   }
   return /* @__PURE__ */ jsx(
@@ -21974,9 +22055,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React77.useState(false);
+  const [isPressed, setIsPressed] = React78.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React77.useCallback(
+  const handlePointerDown = React78.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -21986,7 +22067,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React77.useCallback(
+  const handlePointerUp = React78.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -21996,7 +22077,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React77.useCallback(
+  const handlePointerLeave = React78.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -22085,18 +22166,18 @@ function ControlGrid({
   className
 }) {
   const eventBus = useEventBus();
-  const [active, setActive] = React77.useState(/* @__PURE__ */ new Set());
-  const [coarse, setCoarse] = React77.useState(
+  const [active, setActive] = React78.useState(/* @__PURE__ */ new Set());
+  const [coarse, setCoarse] = React78.useState(
     () => typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches
   );
-  React77.useEffect(() => {
+  React78.useEffect(() => {
     if (visibility !== "auto" || typeof window === "undefined") return;
     const mq = window.matchMedia("(pointer: coarse)");
     const onChange = (e) => setCoarse(e.matches);
     mq.addEventListener("change", onChange);
     return () => mq.removeEventListener("change", onChange);
   }, [visibility]);
-  const handlePress = React77.useCallback(
+  const handlePress = React78.useCallback(
     (id) => {
       setActive((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -22110,7 +22191,7 @@ function ControlGrid({
     },
     [kind, actionEvent, directionEvent, directionEvents, eventBus, onAction, onDirection]
   );
-  const handleRelease = React77.useCallback(
+  const handleRelease = React78.useCallback(
     (id) => {
       setActive((prev) => {
         const next = new Set(prev);
@@ -23366,7 +23447,7 @@ var init_Menu = __esm({
         "bottom-end": "bottom-start"
       };
       const effectivePosition = direction === "rtl" ? rtlMirror[position] ?? position : position;
-      const triggerElement = React77__default.isValidElement(trigger) ? React77__default.cloneElement(trigger, {
+      const triggerElement = React78__default.isValidElement(trigger) ? React78__default.cloneElement(trigger, {
         ref: triggerRef,
         onClick: handleToggle
       }) : /* @__PURE__ */ jsx(
@@ -23469,14 +23550,14 @@ function useDataDnd(args) {
   const isZone = Boolean(dragGroup || accepts || sortable);
   const enabled = isZone || Boolean(dndRoot);
   const eventBus = useEventBus();
-  const parentRoot = React77__default.useContext(RootCtx);
+  const parentRoot = React78__default.useContext(RootCtx);
   const isRoot = enabled && parentRoot === null;
-  const zoneId = React77__default.useId();
+  const zoneId = React78__default.useId();
   const ownGroup = dragGroup ?? accepts ?? zoneId;
-  const [optimisticOrders, setOptimisticOrders] = React77__default.useState(() => /* @__PURE__ */ new Map());
-  const optimisticOrdersRef = React77__default.useRef(optimisticOrders);
+  const [optimisticOrders, setOptimisticOrders] = React78__default.useState(() => /* @__PURE__ */ new Map());
+  const optimisticOrdersRef = React78__default.useRef(optimisticOrders);
   optimisticOrdersRef.current = optimisticOrders;
-  const clearOptimisticOrder = React77__default.useCallback((group) => {
+  const clearOptimisticOrder = React78__default.useCallback((group) => {
     setOptimisticOrders((prev) => {
       if (!prev.has(group)) return prev;
       const next = new Map(prev);
@@ -23501,7 +23582,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__idx_${idx}`;
   }).join("|");
-  const itemIds = React77__default.useMemo(
+  const itemIds = React78__default.useMemo(
     () => orderedItems.map((it, idx) => {
       const raw = it[dndItemIdField];
       return raw != null ? String(raw) : `__idx_${idx}`;
@@ -23512,7 +23593,7 @@ function useDataDnd(args) {
     const raw = it[dndItemIdField];
     return raw != null ? String(raw) : `__${idx}`;
   }).join("|");
-  React77__default.useEffect(() => {
+  React78__default.useEffect(() => {
     const root = isRoot ? null : parentRoot;
     if (root) {
       root.clearOptimisticOrder(ownGroup);
@@ -23520,20 +23601,20 @@ function useDataDnd(args) {
       clearOptimisticOrder(ownGroup);
     }
   }, [itemsContentSig, ownGroup]);
-  const zonesRef = React77__default.useRef(/* @__PURE__ */ new Map());
-  const registerZone = React77__default.useCallback((zoneId2, meta2) => {
+  const zonesRef = React78__default.useRef(/* @__PURE__ */ new Map());
+  const registerZone = React78__default.useCallback((zoneId2, meta2) => {
     zonesRef.current.set(zoneId2, meta2);
   }, []);
-  const unregisterZone = React77__default.useCallback((zoneId2) => {
+  const unregisterZone = React78__default.useCallback((zoneId2) => {
     zonesRef.current.delete(zoneId2);
   }, []);
-  const [activeDrag, setActiveDrag] = React77__default.useState(null);
-  const [overZoneGroup, setOverZoneGroup] = React77__default.useState(null);
-  const meta = React77__default.useMemo(
+  const [activeDrag, setActiveDrag] = React78__default.useState(null);
+  const [overZoneGroup, setOverZoneGroup] = React78__default.useState(null);
+  const meta = React78__default.useMemo(
     () => ({ group: ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, rawItems: items, idField: dndItemIdField }),
     [ownGroup, dropEvent, reorderEvent, positionEvent, itemIds, items, dndItemIdField]
   );
-  React77__default.useEffect(() => {
+  React78__default.useEffect(() => {
     const target = isRoot ? null : parentRoot;
     if (!target) {
       zonesRef.current.set(zoneId, meta);
@@ -23552,7 +23633,7 @@ function useDataDnd(args) {
   }, [parentRoot, isRoot, zoneId, meta]);
   const sensors = useAlmadarDndSensors(true);
   const collisionDetection = almadarDndCollisionDetection;
-  const findZoneByItem = React77__default.useCallback(
+  const findZoneByItem = React78__default.useCallback(
     (id) => {
       for (const z of zonesRef.current.values()) {
         if (z.itemIds.includes(id)) return z;
@@ -23561,7 +23642,7 @@ function useDataDnd(args) {
     },
     []
   );
-  React77__default.useCallback(
+  React78__default.useCallback(
     (group) => {
       for (const z of zonesRef.current.values()) {
         if (z.group === group) return z;
@@ -23570,7 +23651,7 @@ function useDataDnd(args) {
     },
     []
   );
-  const handleDragEnd = React77__default.useCallback(
+  const handleDragEnd = React78__default.useCallback(
     (event) => {
       const { active, over } = event;
       const activeIdStr = String(active.id);
@@ -23661,8 +23742,8 @@ function useDataDnd(args) {
     },
     [eventBus]
   );
-  const sortableData = React77__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
-  const SortableItem = React77__default.useCallback(
+  const sortableData = React78__default.useMemo(() => ({ dndGroup: ownGroup }), [ownGroup]);
+  const SortableItem = React78__default.useCallback(
     ({ id, children }) => {
       const {
         attributes,
@@ -23702,7 +23783,7 @@ function useDataDnd(args) {
       id: droppableId,
       data: sortableData
     });
-    const ctx = React77__default.useContext(RootCtx);
+    const ctx = React78__default.useContext(RootCtx);
     const activeDrag2 = ctx?.activeDrag ?? null;
     const overZoneGroup2 = ctx?.overZoneGroup ?? null;
     const isThisZoneOver = overZoneGroup2 === ownGroup;
@@ -23717,7 +23798,7 @@ function useDataDnd(args) {
       showForeignPlaceholder,
       ctxAvailable: ctx != null
     });
-    React77__default.useEffect(() => {
+    React78__default.useEffect(() => {
       dndLog.info("dropzone:isOver:change", { droppableId, group: ownGroup, isOver, isThisZoneOver, showForeignPlaceholder, activeDragSourceGroup: activeDrag2?.sourceGroup ?? null });
     }, [droppableId, isOver, isThisZoneOver, showForeignPlaceholder]);
     return /* @__PURE__ */ jsx(
@@ -23731,11 +23812,11 @@ function useDataDnd(args) {
       }
     );
   };
-  const rootContextValue = React77__default.useMemo(
+  const rootContextValue = React78__default.useMemo(
     () => ({ registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder }),
     [registerZone, unregisterZone, activeDrag, overZoneGroup, optimisticOrders, clearOptimisticOrder]
   );
-  const handleDragStart = React77__default.useCallback((event) => {
+  const handleDragStart = React78__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;
@@ -23754,7 +23835,7 @@ function useDataDnd(args) {
       isRoot
     });
   }, [findZoneByItem, isRoot, zoneId]);
-  const handleDragOver = React77__default.useCallback((event) => {
+  const handleDragOver = React78__default.useCallback((event) => {
     const { active, over } = event;
     const overData = over?.data?.current;
     const overGroup = overData?.dndGroup ?? null;
@@ -23824,7 +23905,7 @@ function useDataDnd(args) {
       return next;
     });
   }, []);
-  const handleDragCancel = React77__default.useCallback((event) => {
+  const handleDragCancel = React78__default.useCallback((event) => {
     setActiveDrag(null);
     setOverZoneGroup(null);
     dndLog.warn("dragCancel", {
@@ -23832,12 +23913,12 @@ function useDataDnd(args) {
       reason: "dnd-kit cancelled the drag (escape key, pointer interrupted, or external)"
     });
   }, []);
-  const handleDragEndWithCleanup = React77__default.useCallback((event) => {
+  const handleDragEndWithCleanup = React78__default.useCallback((event) => {
     handleDragEnd(event);
     setActiveDrag(null);
     setOverZoneGroup(null);
   }, [handleDragEnd]);
-  const wrapContainer = React77__default.useCallback(
+  const wrapContainer = React78__default.useCallback(
     (children) => {
       if (!enabled) return children;
       const strategy = layout === "grid" ? rectSortingStrategy : verticalListSortingStrategy;
@@ -23891,7 +23972,7 @@ var init_useDataDnd = __esm({
     init_useAlmadarDndCollision();
     init_Box();
     dndLog = createLogger("almadar:ui:dnd");
-    RootCtx = React77__default.createContext(null);
+    RootCtx = React78__default.createContext(null);
   }
 });
 function renderIconInput(icon, props) {
@@ -24406,7 +24487,7 @@ function DataList({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React77__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React78__default.useState(pageSize || Infinity);
   const fieldDefs = fields ?? columns ?? [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const dnd = useDataDnd({
@@ -24422,14 +24503,14 @@ function DataList({
     dndRoot
   });
   const orderedData = dnd.orderedItems;
-  const allData = React77__default.useMemo(
+  const allData = React78__default.useMemo(
     () => sortRows(orderedData, sortBy, sortDirection),
     [orderedData, sortBy, sortDirection]
   );
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
   const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
   const hasRenderProp = typeof children === "function";
-  React77__default.useEffect(() => {
+  React78__default.useEffect(() => {
     const renderItemTypeOf = typeof schemaRenderItem;
     const childrenTypeOf = typeof children;
     if (data.length > 0 && !hasRenderProp) {
@@ -24549,7 +24630,7 @@ function DataList({
       return v === void 0 || v === null || v === "" ? raw : String(v);
     };
     return /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: cn("py-2", className), children: [
-      groups2.map((group, gi) => /* @__PURE__ */ jsxs(React77__default.Fragment, { children: [
+      groups2.map((group, gi) => /* @__PURE__ */ jsxs(React78__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}`;
@@ -24765,7 +24846,7 @@ function DataList({
           className
         ),
         children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs(React77__default.Fragment, { children: [
+          groups.map((group, gi) => /* @__PURE__ */ jsxs(React78__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)
@@ -24874,8 +24955,8 @@ function ScalarControl({
   }
   const numeric = typeof value === "number";
   const initial = value === null ? "" : String(value);
-  const [draft, setDraft] = React77__default.useState(initial);
-  React77__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React78__default.useState(initial);
+  React78__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -24943,8 +25024,8 @@ function Row({
   onRemove,
   readonly
 }) {
-  const [keyDraft, setKeyDraft] = React77__default.useState(rowKey);
-  React77__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
+  const [keyDraft, setKeyDraft] = React78__default.useState(rowKey);
+  React78__default.useEffect(() => setKeyDraft(rowKey), [rowKey]);
   const container = isObj(value) || isArr(value);
   return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "group w-max min-w-full", children: [
     /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", className: "py-0.5 w-max", children: [
@@ -24987,7 +25068,7 @@ function ContainerNode({
   depth,
   readonly
 }) {
-  const [open, setOpen] = React77__default.useState(depth < 2);
+  const [open, setOpen] = React78__default.useState(depth < 2);
   const array = isArr(value);
   const entries = array ? value.map((v, i) => [String(i), v]) : Object.entries(value);
   const setObjValue = (key, next) => {
@@ -25129,7 +25210,7 @@ var init_FormSection = __esm({
       columns = 1,
       className
     }) => {
-      const [collapsed, setCollapsed] = React77__default.useState(defaultCollapsed);
+      const [collapsed, setCollapsed] = React78__default.useState(defaultCollapsed);
       const { t } = useTranslate();
       const eventBus = useEventBus();
       const gridClass = {
@@ -25137,7 +25218,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];
-      React77__default.useCallback(() => {
+      React78__default.useCallback(() => {
         if (collapsible) {
           setCollapsed((prev) => !prev);
           eventBus.emit("UI:TOGGLE_COLLAPSE", { collapsed: !collapsed });
@@ -25546,8 +25627,8 @@ function TextLikeControl({
   onCommit
 }) {
   const initial = value === void 0 || value === null ? "" : String(value);
-  const [draft, setDraft] = React77__default.useState(initial);
-  React77__default.useEffect(() => setDraft(initial), [initial]);
+  const [draft, setDraft] = React78__default.useState(initial);
+  React78__default.useEffect(() => setDraft(initial), [initial]);
   const commit = () => {
     if (numeric) {
       const n = draft.trim() === "" ? 0 : Number(draft);
@@ -25736,14 +25817,14 @@ var init_NodeSlotEditor = __esm({
     isObj2 = (v) => v !== null && v !== void 0 && typeof v === "object" && !Array.isArray(v);
     NodeSlotEditor = ({ value, onChange, className }) => {
       const { type, props, wasArray } = normalize(value);
-      const patterns = React77__default.useMemo(() => {
+      const patterns = React78__default.useMemo(() => {
         try {
           return [...getKnownPatterns()].sort();
         } catch {
           return [];
         }
       }, []);
-      const options = React77__default.useMemo(
+      const options = React78__default.useMemo(
         () => [{ value: "", label: "\u2014 none \u2014" }, ...patterns.map((p) => ({ value: p, label: p }))],
         [patterns]
       );
@@ -25755,7 +25836,7 @@ var init_NodeSlotEditor = __esm({
         const pattern = { type: nextType, ...nextProps };
         onChange(wasArray || value === void 0 ? [pattern] : pattern);
       };
-      const schemaEntries = React77__default.useMemo(() => {
+      const schemaEntries = React78__default.useMemo(() => {
         if (!type) return [];
         const def = getPatternDefinition(type);
         if (!def?.propsSchema) return [];
@@ -25796,6 +25877,112 @@ var init_NodeSlotEditor = __esm({
     };
   }
 });
+function useDraggable({ payload, disabled = false }) {
+  const [isDragging, setIsDragging] = useState(false);
+  const eventBus = useEventBus();
+  const handleDragStart = useCallback(
+    (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      e.dataTransfer.setData(ALMADAR_DND_MIME, JSON.stringify(payload));
+      e.dataTransfer.effectAllowed = "copy";
+      setIsDragging(true);
+      eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
+    },
+    [disabled, payload, eventBus]
+  );
+  const handleDragEnd = useCallback(
+    (e) => {
+      setIsDragging(false);
+      eventBus.emit("UI:DRAG_END", { kind: payload.kind, data: payload.data });
+    },
+    [payload, eventBus]
+  );
+  const dragProps = useMemo(
+    () => ({
+      draggable: !disabled,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      "aria-grabbed": isDragging
+    }),
+    [disabled, handleDragStart, handleDragEnd, isDragging]
+  );
+  return { dragProps, isDragging };
+}
+var ALMADAR_DND_MIME;
+var init_useDraggable = __esm({
+  "hooks/useDraggable.ts"() {
+    "use client";
+    init_useEventBus();
+    ALMADAR_DND_MIME = "application/x-almadar-dnd";
+  }
+});
+function parsePayload(e) {
+  try {
+    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.kind !== "string" || !parsed.data) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function hasAlmadarPayload(e) {
+  return e.dataTransfer.types.includes(ALMADAR_DND_MIME);
+}
+function useDropZone({ accepts, onDrop, disabled = false }) {
+  const [isOver, setIsOver] = useState(false);
+  const eventBus = useEventBus();
+  const handleDragOver = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (!hasAlmadarPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      setIsOver(false);
+    },
+    []
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsOver(false);
+      if (disabled) return;
+      const payload = parsePayload(e);
+      if (!payload) return;
+      if (!accepts.includes(payload.kind)) return;
+      const position = { x: e.clientX, y: e.clientY };
+      onDrop(payload, position);
+      eventBus.emit("UI:DROP", { kind: payload.kind, data: payload.data, ...position });
+    },
+    [disabled, accepts, onDrop, eventBus]
+  );
+  const dropProps = useMemo(
+    () => ({
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }),
+    [handleDragOver, handleDragLeave, handleDrop]
+  );
+  return { dropProps, isOver };
+}
+var init_useDropZone = __esm({
+  "hooks/useDropZone.ts"() {
+    "use client";
+    init_useEventBus();
+    init_useDraggable();
+  }
+});
 function fileIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   switch (ext) {
@@ -25821,6 +26008,13 @@ function fileIcon(name) {
       return "file";
   }
 }
+function siblingsOf(target, roots, childrenByParent) {
+  if (target.parentId) {
+    const parentSiblings = childrenByParent.get(target.parentId);
+    if (parentSiblings?.some((sibling) => sibling.id === target.id)) return parentSiblings;
+  }
+  return roots;
+}
 function ancestorsOf(id, byId) {
   const out = /* @__PURE__ */ new Set();
   if (!id) return out;
@@ -25838,6 +26032,8 @@ var init_FileTree = __esm({
     init_Box();
     init_Typography();
     init_Icon();
+    init_useDraggable();
+    init_useDropZone();
     TreeNodeItem = ({
       node,
       depth,
@@ -25921,10 +26117,12 @@ var init_FileTree = __esm({
       depth,
       indent,
       childrenByParent,
+      roots,
       onNodeSelect,
       onNodeAction,
       nodeActionIcon,
       nodeActionLabel,
+      onNodeReorder,
       selectedId,
       look,
       isExpanded,
@@ -25935,6 +26133,7 @@ var init_FileTree = __esm({
       const expanded = hasChildren && isExpanded(item.id, depth);
       const isSelected = selectedId !== void 0 && selectedId !== "" && item.id === selectedId;
       const nav = look === "nav";
+      const rowRef = useRef(null);
       const handleClick = useCallback(() => {
         if (hasChildren && !onNodeSelect) onToggle(item.id, expanded);
         onNodeSelect?.(item.id);
@@ -25947,16 +26146,50 @@ var init_FileTree = __esm({
         e.stopPropagation();
         onNodeAction?.(item.id);
       }, [item.id, onNodeAction]);
+      const { dragProps } = useDraggable({
+        payload: { kind: "tree-node", data: { id: item.id } },
+        disabled: !onNodeReorder
+      });
+      const handleRowDrop = useCallback(
+        (payload, position) => {
+          if (!onNodeReorder) return;
+          const draggedId = typeof payload.data.id === "string" ? payload.data.id : void 0;
+          if (!draggedId || draggedId === item.id) return;
+          const rect = rowRef.current?.getBoundingClientRect();
+          if (!rect || rect.height === 0) return;
+          const relY = position.y - rect.top;
+          const third = rect.height / 3;
+          if (relY >= third && relY <= third * 2) {
+            const existingChildren = childrenByParent.get(item.id);
+            onNodeReorder(draggedId, item.id, existingChildren ? existingChildren.length : 0);
+            return;
+          }
+          const siblings = siblingsOf(item, roots, childrenByParent);
+          const newParentId = siblings === roots ? null : item.parentId ?? null;
+          const targetIndex = siblings.findIndex((sibling) => sibling.id === item.id);
+          const index = relY < third ? targetIndex < 0 ? 0 : targetIndex : targetIndex < 0 ? siblings.length : targetIndex + 1;
+          onNodeReorder(draggedId, newParentId, index);
+        },
+        [onNodeReorder, item, roots, childrenByParent]
+      );
+      const { dropProps } = useDropZone({
+        accepts: ["tree-node"],
+        onDrop: handleRowDrop,
+        disabled: !onNodeReorder
+      });
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(
           Box,
           {
+            ref: rowRef,
             className: `group/treerow flex items-center gap-1.5 px-2 cursor-pointer rounded-sm transition-colors ${nav ? "py-1" : "py-0.5"} ${isSelected ? "bg-primary text-primary-foreground" : nav ? "text-foreground hover:bg-muted" : "hover:bg-muted"}`,
             style: { paddingLeft: depth * indent + 8 },
             onClick: handleClick,
             role: "treeitem",
             "aria-selected": isSelected,
             "aria-expanded": hasChildren ? expanded : void 0,
+            ...dragProps,
+            ...dropProps,
             children: [
               hasChildren ? /* @__PURE__ */ jsx(Box, { onClick: handleChevron, className: "flex items-center flex-shrink-0", role: "button", "aria-label": expanded ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
                 Icon,
@@ -26003,10 +26236,12 @@ var init_FileTree = __esm({
             depth: depth + 1,
             indent,
             childrenByParent,
+            roots,
             onNodeSelect,
             onNodeAction,
             nodeActionIcon,
             nodeActionLabel,
+            onNodeReorder,
             selectedId,
             look,
             isExpanded,
@@ -26024,14 +26259,15 @@ var init_FileTree = __esm({
       onNodeAction,
       nodeActionIcon,
       nodeActionLabel,
+      onNodeReorder,
       className,
       indent = 16
     }) => {
       const [overrides, setOverrides] = useState(() => /* @__PURE__ */ new Map());
-      const byId = React77__default.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
-      const selectedAncestors = React77__default.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
-      const lastSelectedRef = React77__default.useRef(selectedId);
-      React77__default.useEffect(() => {
+      const byId = React78__default.useMemo(() => new Map(items.map((node) => [node.id, node])), [items]);
+      const selectedAncestors = React78__default.useMemo(() => ancestorsOf(selectedId, byId), [selectedId, byId]);
+      const lastSelectedRef = React78__default.useRef(selectedId);
+      React78__default.useEffect(() => {
         if (selectedId === lastSelectedRef.current) return;
         lastSelectedRef.current = selectedId;
         setOverrides((prev) => {
@@ -26072,10 +26308,12 @@ var init_FileTree = __esm({
           depth: 0,
           indent,
           childrenByParent,
+          roots,
           onNodeSelect,
           onNodeAction,
           nodeActionIcon,
           nodeActionLabel,
+          onNodeReorder,
           selectedId,
           look,
           isExpanded,
@@ -26095,6 +26333,7 @@ var init_FileTree = __esm({
       onNodeAction,
       nodeActionIcon,
       nodeActionLabel,
+      onNodeReorder,
       className,
       indent = 16
     }) => {
@@ -26109,6 +26348,7 @@ var init_FileTree = __esm({
             onNodeAction,
             nodeActionIcon,
             nodeActionLabel,
+            onNodeReorder,
             className,
             indent
           }
@@ -26155,6 +26395,183 @@ var init_FormField = __esm({
     FormField.displayName = "FormField";
   }
 });
+function matchesQuery(query, text) {
+  if (!query) return true;
+  let qi = 0;
+  const q = query.toLowerCase();
+  const t = text.toLowerCase();
+  for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+    if (t[ti] === q[qi]) qi++;
+  }
+  return qi === q.length;
+}
+function commandMatches(command, query) {
+  if (!query) return true;
+  if (matchesQuery(query, command.label)) return true;
+  return (command.keywords ?? []).some((keyword) => matchesQuery(query, keyword));
+}
+var UNGROUPED, CommandPalette;
+var init_CommandPalette = __esm({
+  "components/core/molecules/CommandPalette.tsx"() {
+    "use client";
+    init_Box();
+    init_Stack();
+    init_Typography();
+    init_Icon();
+    init_Input();
+    init_Badge();
+    init_cn();
+    init_useEventBus();
+    init_Modal();
+    UNGROUPED = /* @__PURE__ */ Symbol("command-palette-ungrouped");
+    CommandPalette = ({
+      open,
+      onOpenChange,
+      commands,
+      onSelect,
+      placeholder = "Type a command...",
+      emptyLabel = "No matching commands",
+      className
+    }) => {
+      const eventBus = useEventBus();
+      const [query, setQuery] = useState("");
+      const [highlightIndex, setHighlightIndex] = useState(0);
+      const filtered = useMemo(
+        () => commands.filter((command) => commandMatches(command, query)),
+        [commands, query]
+      );
+      const groups = useMemo(() => {
+        const order = [];
+        const byGroup = /* @__PURE__ */ new Map();
+        for (const command of filtered) {
+          const key = command.group ?? UNGROUPED;
+          if (!byGroup.has(key)) {
+            byGroup.set(key, []);
+            order.push(key);
+          }
+          byGroup.get(key).push(command);
+        }
+        return order.map((key) => ({ group: key === UNGROUPED ? void 0 : key, items: byGroup.get(key) }));
+      }, [filtered]);
+      const resetQuery = useCallback(() => {
+        setQuery("");
+        setHighlightIndex(0);
+      }, []);
+      const handleClose = useCallback(() => {
+        resetQuery();
+        onOpenChange(false);
+      }, [onOpenChange, resetQuery]);
+      const handleSelect = useCallback(
+        (command) => {
+          if (command.disabled) return;
+          if (command.event) eventBus.emit(`UI:${command.event}`, { commandId: command.id });
+          if (command.action) eventBus.emit(`UI:${command.action}`, command.actionPayload ?? {});
+          onSelect?.(command);
+          handleClose();
+        },
+        [eventBus, onSelect, handleClose]
+      );
+      const handleQueryChange = useCallback((e) => {
+        setQuery(e.target.value);
+        setHighlightIndex(0);
+      }, []);
+      const handleKeyDown = useCallback(
+        (e) => {
+          if (filtered.length === 0) return;
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setHighlightIndex((prev) => prev < filtered.length - 1 ? prev + 1 : 0);
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setHighlightIndex((prev) => prev > 0 ? prev - 1 : filtered.length - 1);
+          } else if (e.key === "Enter") {
+            e.preventDefault();
+            const command = filtered[highlightIndex];
+            if (command) handleSelect(command);
+          }
+        },
+        [filtered, highlightIndex, handleSelect]
+      );
+      return /* @__PURE__ */ jsx(
+        Modal,
+        {
+          isOpen: open,
+          onClose: handleClose,
+          onExited: resetQuery,
+          showCloseButton: false,
+          size: "md",
+          className,
+          children: /* @__PURE__ */ jsx(Box, { "data-testid": "command-palette", children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                inputType: "search",
+                placeholder,
+                value: query,
+                onChange: handleQueryChange,
+                onKeyDown: handleKeyDown,
+                leftIcon: "search",
+                clearable: query.length > 0,
+                onClear: resetQuery,
+                autoFocus: true,
+                "data-testid": "command-palette-input"
+              }
+            ),
+            filtered.length === 0 ? /* @__PURE__ */ jsx(Box, { className: "px-2 py-6 text-center", "data-testid": "command-palette-empty", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "muted", children: emptyLabel }) }) : /* @__PURE__ */ jsx(
+              Box,
+              {
+                className: "max-h-80 overflow-y-auto",
+                role: "listbox",
+                "aria-label": placeholder,
+                children: /* @__PURE__ */ jsx(VStack, { gap: "none", children: groups.map(({ group, items }) => /* @__PURE__ */ jsxs(Box, { children: [
+                  group ? /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "caption",
+                      color: "muted",
+                      className: "px-3 pt-2 pb-1 block",
+                      children: group
+                    }
+                  ) : null,
+                  items.map((command) => {
+                    const index = filtered.indexOf(command);
+                    const isHighlighted = index === highlightIndex;
+                    return /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        as: "button",
+                        role: "option",
+                        "aria-selected": isHighlighted,
+                        "aria-disabled": command.disabled || void 0,
+                        "data-testid": `command-palette-item-${command.id}`,
+                        onMouseEnter: () => !command.disabled && setHighlightIndex(index),
+                        onClick: () => handleSelect(command),
+                        className: cn(
+                          "w-full flex items-center gap-3 px-3 py-2 text-start rounded-sm",
+                          "text-sm transition-colors",
+                          "focus:outline-none",
+                          isHighlighted && "bg-muted",
+                          command.disabled && "opacity-50 cursor-not-allowed"
+                        ),
+                        children: [
+                          command.icon ? /* @__PURE__ */ jsx(Icon, { icon: command.icon, size: "sm", className: "flex-shrink-0" }) : null,
+                          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1 truncate", children: command.label }),
+                          command.shortcut ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "sm", children: command.shortcut }) : null
+                        ]
+                      },
+                      command.id
+                    );
+                  })
+                ] }, String(group ?? "__ungrouped__"))) })
+              }
+            )
+          ] }) })
+        }
+      );
+    };
+    CommandPalette.displayName = "CommandPalette";
+  }
+});
 function getOrCreateStore(query) {
   if (!queryStores.has(query)) {
     queryStores.set(query, {
@@ -26869,7 +27286,7 @@ var init_Flex = __esm({
           flexStyle.flexBasis = typeof basis === "number" ? `${basis}px` : basis;
         }
       }
-      return React77__default.createElement(Component, {
+      return React78__default.createElement(Component, {
         className: cn(
           inline ? "inline-flex" : "flex",
           directionStyles[direction],
@@ -26988,7 +27405,7 @@ var init_Grid = __esm({
       as: Component = "div"
     }) => {
       const mergedStyle = rows2 ? { gridTemplateRows: `repeat(${rows2}, minmax(0, 1fr))`, ...style } : style;
-      return React77__default.createElement(
+      return React78__default.createElement(
         Component,
         {
           className: cn(
@@ -27410,9 +27827,9 @@ var init_Popover = __esm({
         onMouseLeave: handleClose,
         onPointerDown: tapTriggerProps.onPointerDown
       };
-      const childElement = React77__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const childElement = React78__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = childElement.props.onPointerDown;
-      const triggerElement = React77__default.cloneElement(
+      const triggerElement = React78__default.cloneElement(
         childElement,
         {
           ref: triggerRef,
@@ -28276,9 +28693,9 @@ var init_Tooltip = __esm({
           if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
         };
       }, []);
-      const triggerElement = React77__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+      const triggerElement = React78__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
       const childPointerDown = triggerElement.props.onPointerDown;
-      const trigger = React77__default.cloneElement(triggerElement, {
+      const trigger = React78__default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
@@ -28368,7 +28785,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(React77__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -30052,7 +30469,7 @@ function GameMenu({
 }) {
   const resolvedOptions = (options?.length ? options : void 0) ?? (menuItems?.length ? menuItems : void 0) ?? DEFAULT_MENU_OPTIONS;
   const eventBus = useEventBus();
-  const handleOptionClick = React77.useCallback(
+  const handleOptionClick = React78.useCallback(
     (option) => {
       if (option.event) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -30288,7 +30705,7 @@ function StateGraph({
 }) {
   const eventBus = useEventBus();
   const nodes = states ?? [];
-  const positions = React77.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
+  const positions = React78.useMemo(() => layoutStates(nodes, width, height), [nodes, width, height]);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -30825,7 +31242,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(React77__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -31458,7 +31875,7 @@ function SequenceBar({
     else onSlotRemove?.(index);
   }, [emit, slotRemoveEvent, 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(React77__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -31866,6 +32283,8 @@ var init_MathCanvas = __esm({
       gridColor = "var(--color-border, #9ca3af)",
       axisColor = "var(--color-muted-foreground, #374151)",
       showTickLabels = false,
+      tickLabelFontSize = 10,
+      labelFontSize = 12,
       showCurveLabels = false,
       curves = [],
       points = [],
@@ -31937,18 +32356,18 @@ var init_MathCanvas = __esm({
           let kx = 0;
           for (let x = Math.ceil(xMin / gridStep) * gridStep; x <= xMax; x += gridStep, kx++) {
             if (kx % labelEveryX === 0 && x !== 0) {
-              out.push({ type: "text", x: mapX(x), y: xAxisY + 12, text: formatTick(x), color: "#6b7280", fontSize: 10, align: "center" });
+              out.push({ type: "text", x: mapX(x), y: xAxisY + 12, text: formatTick(x), color: "#6b7280", fontSize: tickLabelFontSize, align: "center" });
             }
           }
           const labelEveryY = Math.max(1, Math.ceil((yMax - yMin) / gridStep / Math.floor(plotH / 28)));
           let ky = 0;
           for (let y = Math.ceil(yMin / gridStep) * gridStep; y <= yMax; y += gridStep, ky++) {
             if (ky % labelEveryY === 0 && y !== 0) {
-              out.push({ type: "text", x: yAxisX - 6, y: mapY(y), text: formatTick(y), color: "#6b7280", fontSize: 10, align: "right" });
+              out.push({ type: "text", x: yAxisX - 6, y: mapY(y), text: formatTick(y), color: "#6b7280", fontSize: tickLabelFontSize, align: "right" });
             }
           }
           if (xMin <= 0 && xMax >= 0 && yMin <= 0 && yMax >= 0) {
-            out.push({ type: "text", x: yAxisX - 6, y: xAxisY + 12, text: "0", color: "#6b7280", fontSize: 10, align: "right" });
+            out.push({ type: "text", x: yAxisX - 6, y: xAxisY + 12, text: "0", color: "#6b7280", fontSize: tickLabelFontSize, align: "right" });
           }
         }
         for (const region of regions) {
@@ -31979,7 +32398,7 @@ var init_MathCanvas = __esm({
               y: (mapY(region.samples[mid].y) + mapY(baseline)) / 2,
               text: region.label,
               color,
-              fontSize: 11
+              fontSize: labelFontSize
             });
           }
         }
@@ -32018,7 +32437,7 @@ var init_MathCanvas = __esm({
             const py = mapY(guide.at);
             out.push({ type: "line", x1: margin, y1: py, x2: width - margin, y2: py, color, dash });
             if (guide.label) {
-              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color, fontSize: 11, align: "right" });
+              out.push({ type: "text", x: width - margin - 4, y: py - 8, text: guide.label, color, fontSize: labelFontSize, align: "right" });
             }
           }
         }
@@ -32061,7 +32480,7 @@ var init_MathCanvas = __esm({
               y: mapY(lastInRange.y) - 6,
               text: curve.label,
               color: curve.color ?? "#2563eb",
-              fontSize: 11
+              fontSize: labelFontSize
             });
           }
         }
@@ -32098,7 +32517,7 @@ var init_MathCanvas = __esm({
               y: xAxisY - peak - 8,
               text: hop.label,
               color,
-              fontSize: 10,
+              fontSize: labelFontSize,
               align: "center"
             });
           }
@@ -32125,7 +32544,7 @@ var init_MathCanvas = __esm({
               y: mapY(angle.y + 1.35 * radius * Math.sin(rad)),
               text: angle.label,
               color,
-              fontSize: 11,
+              fontSize: labelFontSize,
               align: "center"
             });
           }
@@ -32142,7 +32561,7 @@ var init_MathCanvas = __esm({
             fill: isOpen ? "#ffffff" : p.color ?? "#dc2626"
           });
           if (p.label) {
-            out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: p.color ?? "#111827", fontSize: 12 });
+            out.push({ type: "text", x: mapX(p.x) + 8, y: mapY(p.y) - 8, text: p.label, color: p.color ?? "#111827", fontSize: labelFontSize });
           }
         }
         for (const v of vectors) {
@@ -32153,7 +32572,7 @@ var init_MathCanvas = __esm({
           const y2 = mapY(v.y + v.vy);
           out.push({ type: "arrow", x1, y1, x2, y2, color: v.color ?? "#7c3aed", lineWidth: 2 });
           if (v.label) {
-            out.push({ type: "text", x: x2 + 6, y: y2 - 6, text: v.label, color: v.color ?? "#7c3aed", fontSize: 12 });
+            out.push({ type: "text", x: x2 + 6, y: y2 - 6, text: v.label, color: v.color ?? "#7c3aed", fontSize: labelFontSize });
           }
         }
         out.push(...shapes);
@@ -32172,6 +32591,8 @@ var init_MathCanvas = __esm({
         gridColor,
         axisColor,
         showTickLabels,
+        tickLabelFontSize,
+        labelFontSize,
         showCurveLabels,
         curves,
         points,
@@ -33459,13 +33880,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect69, useRef: useRef65, useCallback: useCallback108, useState: useState107 } = React77__default;
+      const { useEffect: useEffect70, useRef: useRef67, useCallback: useCallback109, useState: useState109 } = React78__default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef65({ centerLat, centerLng, zoom });
-        useEffect69(() => {
+        const prevRef = useRef67({ centerLat, centerLng, zoom });
+        useEffect70(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -33476,7 +33897,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect69(() => {
+        useEffect70(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -33504,8 +33925,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState107(null);
-        const handleMapClick = useCallback108((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState109(null);
+        const handleMapClick = useCallback109((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -33514,7 +33935,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback108((marker) => {
+        const handleMarkerClick = useCallback109((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -34404,8 +34825,8 @@ function TableView({
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React77__default.useState(pageSize > 0 ? pageSize : Infinity);
-  const [localSelected, setLocalSelected] = React77__default.useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React78__default.useState(pageSize > 0 ? pageSize : Infinity);
+  const [localSelected, setLocalSelected] = React78__default.useState(/* @__PURE__ */ new Set());
   const colDefs = (Array.isArray(columns) ? columns : void 0) ?? (Array.isArray(fields) ? fields : void 0) ?? [];
   const actionDefs = Array.isArray(itemActions) ? itemActions : [];
   const allDataRaw = Array.isArray(entity) ? entity : entity ? [entity] : [];
@@ -34426,7 +34847,7 @@ function TableView({
   const hasMore = pageSize > 0 && visibleCount < ordered2.length;
   const hasRenderProp = typeof children === "function";
   const idField = dndItemIdField ?? "id";
-  React77__default.useEffect(() => {
+  React78__default.useEffect(() => {
     tableViewLog.debug("render", {
       rowCount: data.length,
       colCount: colDefs.length,
@@ -34476,7 +34897,7 @@ function TableView({
     };
     eventBus.emit(`UI:${rowClickEvent}`, payload);
   };
-  const colFloors = React77__default.useMemo(
+  const colFloors = React78__default.useMemo(
     () => colDefs.map((col) => {
       const longest = data.reduce((widest, row) => {
         const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
@@ -34619,12 +35040,12 @@ function TableView({
         ]
       }
     );
-    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React77__default.Fragment, { children: rowInner }, id);
+    return dnd.isZone ? /* @__PURE__ */ jsx(dnd.SortableItem, { id: row[idField] ?? id, children: rowInner }, id) : /* @__PURE__ */ jsx(React78__default.Fragment, { children: rowInner }, id);
   };
   const items = Array.from(data);
   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(React77__default.Fragment, { children: [
+  const body = /* @__PURE__ */ jsx(Box, { role: "rowgroup", children: groups.map((group, gi) => /* @__PURE__ */ jsxs(React78__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)) });
@@ -35993,7 +36414,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(React77__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(React78__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" })
@@ -36004,7 +36425,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(React77__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(React78__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 }),
@@ -36994,7 +37415,7 @@ var init_LikertScale = __esm({
       md: "text-base",
       lg: "text-lg"
     };
-    LikertScale = React77__default.forwardRef(
+    LikertScale = React78__default.forwardRef(
       ({
         question,
         options = DEFAULT_LIKERT_OPTIONS,
@@ -37006,7 +37427,7 @@ var init_LikertScale = __esm({
         variant = "radios",
         className
       }, ref) => {
-        const groupId = React77__default.useId();
+        const groupId = React78__default.useId();
         const eventBus = useEventBus();
         const handleSelect = useCallback(
           (next) => {
@@ -39429,7 +39850,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(React77__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
               idx > 0 && /* @__PURE__ */ jsx(
                 Icon,
                 {
@@ -40298,7 +40719,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 ?? void 0, s.isTerminal ?? void 0, tc, maxTC);
-          return /* @__PURE__ */ jsxs(React77__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               AvlState,
               {
@@ -40503,7 +40924,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(React77__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(React78__default.Fragment, { children: [
           idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
           crumb.href ? /* @__PURE__ */ jsx(
             "a",
@@ -40861,7 +41282,7 @@ var init_Section = __esm({
       as: Component = "section"
     }) => {
       const hasHeader = title || description || action;
-      return React77__default.createElement(
+      return React78__default.createElement(
         Component,
         {
           className: cn(
@@ -41235,7 +41656,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(React77__default.Fragment, { children: [
+              return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -43022,7 +43443,7 @@ var init_ImportPreviewTree = __esm({
       const renderUnit = (unit, childrenByParent, depth) => {
         const summary = fieldSummary(unit);
         const children = childrenByParent.get(unit.ref) ?? [];
-        return /* @__PURE__ */ jsxs(React77__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
           /* @__PURE__ */ jsxs(
             Box,
             {
@@ -43119,7 +43540,7 @@ var init_ImportProgress = __esm({
           PIPELINE.map((key, index) => {
             const isComplete = index < currentIndex;
             const isActive = index === currentIndex;
-            return /* @__PURE__ */ jsxs(React77__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React78__default.Fragment, { children: [
               index > 0 ? /* @__PURE__ */ jsx(Box, { className: "h-px w-4 bg-border" }) : null,
               /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-1", "data-testid": `import-progress-step-${key}`, children: [
                 /* @__PURE__ */ jsx(
@@ -43332,6 +43753,69 @@ var init_parseLessonSegments = __esm({
     init_lessonSegmentUtils();
   }
 });
+var positionClasses, FloatingToolbar;
+var init_FloatingToolbar = __esm({
+  "components/core/molecules/FloatingToolbar.tsx"() {
+    "use client";
+    init_Button();
+    init_Box();
+    init_Divider();
+    init_Typography();
+    init_ButtonGroup();
+    init_cn();
+    init_useEventBus();
+    positionClasses = {
+      "bottom-center": "bottom-6 left-1/2 -translate-x-1/2",
+      "bottom-left": "bottom-6 left-6",
+      "bottom-right": "bottom-6 right-6"
+    };
+    FloatingToolbar = ({
+      items,
+      position = "bottom-center",
+      children,
+      className
+    }) => {
+      const eventBus = useEventBus();
+      return /* @__PURE__ */ jsx(Box, { className: cn("fixed z-50", positionClasses[position]), children: /* @__PURE__ */ jsxs(
+        ButtonGroup,
+        {
+          variant: "default",
+          orientation: "horizontal",
+          className: cn(
+            "items-center gap-1 rounded-full border border-border",
+            "bg-card/95 backdrop-blur-sm shadow-elevation-popover p-1",
+            className
+          ),
+          children: [
+            items.map((item) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: item.active ? "primary" : "ghost",
+                size: "sm",
+                icon: item.icon,
+                action: item.action,
+                actionPayload: item.actionPayload,
+                disabled: item.disabled,
+                "aria-pressed": item.active,
+                "aria-label": item.label,
+                className: "rounded-full",
+                "data-testid": item.testId ?? `floating-toolbar-item-${item.id}`,
+                onClick: () => {
+                  if (item.event) eventBus.emit(`UI:${item.event}`, { actionId: item.id });
+                },
+                children: /* @__PURE__ */ jsx(Typography, { as: "span", className: "sr-only", children: item.label })
+              },
+              item.id
+            )),
+            children && items.length > 0 && /* @__PURE__ */ jsx(Divider, { orientation: "vertical", className: "h-6 mx-1" }),
+            children
+          ]
+        }
+      ) });
+    };
+    FloatingToolbar.displayName = "FloatingToolbar";
+  }
+});
 
 // components/core/molecules/index.ts
 var init_molecules2 = __esm({
@@ -43349,6 +43833,7 @@ var init_molecules2 = __esm({
     init_Alert();
     init_Breadcrumb();
     init_ButtonGroup();
+    init_CommandPalette();
     init_FilterGroup();
     init_Card2();
     init_Container();
@@ -43482,6 +43967,7 @@ var init_molecules2 = __esm({
     init_BloomQuizBlock();
     init_parseLessonSegments();
     init_lessonSegmentUtils();
+    init_FloatingToolbar();
   }
 });
 
@@ -44224,7 +44710,7 @@ var init_DetailPanel = __esm({
     }) => {
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const [titleDraft, setTitleDraft] = React77__default.useState(null);
+      const [titleDraft, setTitleDraft] = React78__default.useState(null);
       const isFieldDefArray = (arr) => {
         if (!arr || arr.length === 0) return false;
         const first = arr[0];
@@ -44617,8 +45103,224 @@ var init_DetailPanel = __esm({
     DetailPanel.displayName = "DetailPanel";
   }
 });
+var SplitPane;
+var init_SplitPane = __esm({
+  "components/core/organisms/layout/SplitPane.tsx"() {
+    "use client";
+    init_cn();
+    SplitPane = ({
+      direction = "horizontal",
+      ratio: ratioProp = 50,
+      minSize = 100,
+      resizable = true,
+      left,
+      right,
+      className,
+      leftClassName,
+      rightClassName,
+      onRatioChange
+    }) => {
+      const [uncontrolledRatio, setUncontrolledRatio] = useState(ratioProp);
+      const ratio = onRatioChange ? ratioProp : uncontrolledRatio;
+      const containerRef = useRef(null);
+      const isDragging = useRef(false);
+      const handlePointerDown = useCallback(
+        (e) => {
+          if (!resizable) return;
+          e.preventDefault();
+          isDragging.current = true;
+          e.currentTarget.setPointerCapture(e.pointerId);
+          const handlePointerMove = (ev) => {
+            if (!isDragging.current || !containerRef.current) return;
+            const rect = containerRef.current.getBoundingClientRect();
+            let newRatio;
+            if (direction === "horizontal") {
+              const x = ev.clientX - rect.left;
+              newRatio = x / rect.width * 100;
+            } else {
+              const y = ev.clientY - rect.top;
+              newRatio = y / rect.height * 100;
+            }
+            const minRatio = minSize / (direction === "horizontal" ? rect.width : rect.height) * 100;
+            const maxRatio = 100 - minRatio;
+            newRatio = Math.max(minRatio, Math.min(maxRatio, newRatio));
+            if (onRatioChange) {
+              onRatioChange(newRatio);
+            } else {
+              setUncontrolledRatio(newRatio);
+            }
+          };
+          const handlePointerUp = () => {
+            isDragging.current = false;
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerUp);
+            document.removeEventListener("pointercancel", handlePointerUp);
+          };
+          document.addEventListener("pointermove", handlePointerMove);
+          document.addEventListener("pointerup", handlePointerUp);
+          document.addEventListener("pointercancel", handlePointerUp);
+        },
+        [direction, minSize, resizable, onRatioChange]
+      );
+      const isHorizontal = direction === "horizontal";
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(
+            "flex w-full h-full",
+            isHorizontal ? "flex-row" : "flex-col",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("overflow-auto", leftClassName),
+                style: {
+                  [isHorizontal ? "width" : "height"]: `${ratio}%`,
+                  flexShrink: 0
+                },
+                children: left
+              }
+            ),
+            resizable && /* @__PURE__ */ jsx(
+              "div",
+              {
+                onPointerDown: handlePointerDown,
+                className: cn(
+                  "flex-shrink-0 bg-border transition-colors touch-none",
+                  isHorizontal ? "w-1 cursor-col-resize hover:w-1.5 hover:bg-muted-foreground" : "h-1 cursor-row-resize hover:h-1.5 hover:bg-muted-foreground"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto", rightClassName), children: right })
+          ]
+        }
+      );
+    };
+    SplitPane.displayName = "SplitPane";
+  }
+});
+var DockLayout;
+var init_DockLayout = __esm({
+  "components/core/organisms/layout/DockLayout.tsx"() {
+    "use client";
+    init_Box();
+    init_Stack();
+    init_cn();
+    init_SplitPane();
+    DockLayout = ({
+      rail,
+      sidebar,
+      main,
+      bottomPanel,
+      statusBar,
+      secondarySidebar,
+      railWidth = 56,
+      secondarySidebarWidth = 280,
+      sidebarCollapsed = false,
+      sidebarWidth = 20,
+      onSidebarWidthChange,
+      sidebarMinSize = 160,
+      bottomPanelCollapsed = false,
+      bottomPanelHeight = 30,
+      onBottomPanelHeightChange,
+      bottomPanelMinSize = 120,
+      secondarySidebarCollapsed = false,
+      className,
+      railClassName,
+      sidebarClassName,
+      mainClassName,
+      bottomPanelClassName,
+      statusBarClassName,
+      secondarySidebarClassName
+    }) => {
+      const showSidebar = Boolean(sidebar) && !sidebarCollapsed;
+      const showBottomPanel = Boolean(bottomPanel) && !bottomPanelCollapsed;
+      const showSecondarySidebar = Boolean(secondarySidebar) && !secondarySidebarCollapsed;
+      const centerRow = /* @__PURE__ */ jsxs(HStack, { gap: "none", className: "flex-1 min-h-0 min-w-0", children: [
+        /* @__PURE__ */ jsx(Box, { className: cn("flex-1 min-w-0 h-full overflow-auto", mainClassName), children: main }),
+        showSecondarySidebar && /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cn(
+              "flex-shrink-0 h-full overflow-auto border-l border-border",
+              secondarySidebarClassName
+            ),
+            style: { width: secondarySidebarWidth },
+            children: secondarySidebar
+          }
+        )
+      ] });
+      const sidebarAndCenter = showSidebar ? /* @__PURE__ */ jsx(
+        SplitPane,
+        {
+          direction: "horizontal",
+          ratio: sidebarWidth,
+          onRatioChange: onSidebarWidthChange,
+          minSize: sidebarMinSize,
+          resizable: true,
+          left: /* @__PURE__ */ jsx(Box, { className: cn("h-full overflow-auto", sidebarClassName), children: sidebar }),
+          right: centerRow,
+          className: "flex-1 min-h-0 min-w-0"
+        }
+      ) : centerRow;
+      const body = /* @__PURE__ */ jsxs(HStack, { gap: "none", className: "flex-1 min-h-0 min-w-0", children: [
+        rail && /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cn(
+              "flex-shrink-0 h-full overflow-auto border-r border-border",
+              railClassName
+            ),
+            style: { width: railWidth },
+            children: rail
+          }
+        ),
+        sidebarAndCenter
+      ] });
+      const bodyPlusBottom = showBottomPanel ? /* @__PURE__ */ jsx(
+        SplitPane,
+        {
+          direction: "vertical",
+          ratio: 100 - bottomPanelHeight,
+          onRatioChange: (topRatio) => onBottomPanelHeightChange?.(100 - topRatio),
+          minSize: bottomPanelMinSize,
+          resizable: true,
+          left: body,
+          right: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "h-full overflow-auto border-t border-border",
+                bottomPanelClassName
+              ),
+              children: bottomPanel
+            }
+          ),
+          className: "flex-1 min-h-0"
+        }
+      ) : body;
+      return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: cn("w-full h-full overflow-hidden", className), children: [
+        bodyPlusBottom,
+        statusBar && /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cn(
+              "flex-shrink-0 border-t border-border bg-background",
+              statusBarClassName
+            ),
+            children: statusBar
+          }
+        )
+      ] });
+    };
+    DockLayout.displayName = "DockLayout";
+  }
+});
 function extractTitle(children) {
-  if (!React77__default.isValidElement(children)) return void 0;
+  if (!React78__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -44980,7 +45682,7 @@ var init_Form = __esm({
       const isSchemaEntity = isOrbitalEntitySchema(entity);
       const resolvedEntity = isSchemaEntity ? entity : void 0;
       const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-      const normalizedInitialData = React77__default.useMemo(() => {
+      const normalizedInitialData = React78__default.useMemo(() => {
         const entityRowAsInitial = isPlainEntityRow(entity) ? entity : void 0;
         const callerInitial = initialData !== null && typeof initialData === "object" && !Array.isArray(initialData) ? initialData : {};
         const merged = entityRowAsInitial !== void 0 ? { ...entityRowAsInitial, ...callerInitial } : callerInitial;
@@ -44999,7 +45701,7 @@ var init_Form = __esm({
         }
         return normalized;
       }, [entity, initialData]);
-      const entityDerivedFields = React77__default.useMemo(() => {
+      const entityDerivedFields = React78__default.useMemo(() => {
         if (fields && fields.length > 0) return void 0;
         if (!resolvedEntity) return void 0;
         return resolvedEntity.fields.map(
@@ -45020,16 +45722,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] = React77__default.useState(
+      const [formData, setFormData] = React78__default.useState(
         normalizedInitialData
       );
-      const [collapsedSections, setCollapsedSections] = React77__default.useState(
+      const [collapsedSections, setCollapsedSections] = React78__default.useState(
         /* @__PURE__ */ new Set()
       );
-      const [submitError, setSubmitError] = React77__default.useState(null);
-      const formRef = React77__default.useRef(null);
+      const [submitError, setSubmitError] = React78__default.useState(null);
+      const formRef = React78__default.useRef(null);
       const formMode = props.mode;
-      const mountedRef = React77__default.useRef(false);
+      const mountedRef = React78__default.useRef(false);
       if (!mountedRef.current) {
         mountedRef.current = true;
         debug("forms", "mount", {
@@ -45042,7 +45744,7 @@ var init_Form = __esm({
         });
       }
       const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-      const evalContext = React77__default.useMemo(
+      const evalContext = React78__default.useMemo(
         () => ({
           formValues: formData,
           globalVariables: externalContext?.globalVariables ?? {},
@@ -45051,7 +45753,7 @@ var init_Form = __esm({
         }),
         [formData, externalContext]
       );
-      React77__default.useEffect(() => {
+      React78__default.useEffect(() => {
         debug("forms", "initialData-sync", {
           mode: formMode,
           normalizedInitialData,
@@ -45062,7 +45764,7 @@ var init_Form = __esm({
           setFormData(normalizedInitialData);
         }
       }, [normalizedInitialData]);
-      const processCalculations = React77__default.useCallback(
+      const processCalculations = React78__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!hiddenCalculations.length) return;
           const context = {
@@ -45087,7 +45789,7 @@ var init_Form = __esm({
         },
         [hiddenCalculations, externalContext, eventBus]
       );
-      const checkViolations = React77__default.useCallback(
+      const checkViolations = React78__default.useCallback(
         (changedFieldId, newFormData) => {
           if (!violationTriggers.length) return;
           const context = {
@@ -45125,7 +45827,7 @@ var init_Form = __esm({
         processCalculations(name, newFormData);
         checkViolations(name, newFormData);
       };
-      const isFieldVisible = React77__default.useCallback(
+      const isFieldVisible = React78__default.useCallback(
         (fieldName2) => {
           const condition = conditionalFields[fieldName2];
           if (!condition) return true;
@@ -45133,7 +45835,7 @@ var init_Form = __esm({
         },
         [conditionalFields, evalContext]
       );
-      const isSectionVisible = React77__default.useCallback(
+      const isSectionVisible = React78__default.useCallback(
         (section) => {
           if (!section.condition) return true;
           return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -45209,7 +45911,7 @@ var init_Form = __esm({
           eventBus.emit(`UI:${onCancel}`);
         }
       };
-      const renderField = React77__default.useCallback(
+      const renderField = React78__default.useCallback(
         (field) => {
           const fieldName2 = field.name || field.field;
           if (!fieldName2) return null;
@@ -45231,7 +45933,7 @@ var init_Form = __esm({
         [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
       );
       const effectiveFields = entityDerivedFields ?? fields;
-      const normalizedFields = React77__default.useMemo(() => {
+      const normalizedFields = React78__default.useMemo(() => {
         if (!effectiveFields || effectiveFields.length === 0) return [];
         return effectiveFields.map((field) => {
           if (typeof field === "string") {
@@ -45266,7 +45968,7 @@ var init_Form = __esm({
           };
         });
       }, [effectiveFields, resolvedEntity, fieldOverrides]);
-      const schemaFields = React77__default.useMemo(() => {
+      const schemaFields = React78__default.useMemo(() => {
         if (normalizedFields.length === 0) return null;
         if (isDebugEnabled()) {
           debugGroup(`Form: ${entityName || "unknown"}`);
@@ -45276,7 +45978,7 @@ var init_Form = __esm({
         }
         return normalizedFields.map(renderField).filter(Boolean);
       }, [normalizedFields, renderField, entityName, conditionalFields]);
-      const sectionElements = React77__default.useMemo(() => {
+      const sectionElements = React78__default.useMemo(() => {
         if (!sections || sections.length === 0) return null;
         return sections.map((section) => {
           if (!isSectionVisible(section)) {
@@ -46112,7 +46814,7 @@ var init_List = __esm({
         if (entity && typeof entity === "object" && "id" in entity) return [entity];
         return [];
       }, [entity]);
-      const getItemActions = React77__default.useCallback(
+      const getItemActions = React78__default.useCallback(
         (item) => {
           if (!itemActions) return [];
           if (typeof itemActions === "function") {
@@ -46594,7 +47296,7 @@ var init_MediaGallery = __esm({
         [selectable, selectedItems, selectionEvent, eventBus]
       );
       const entityData = Array.isArray(entity) ? entity : [];
-      const items = React77__default.useMemo(() => {
+      const items = React78__default.useMemo(() => {
         if (propItems && propItems.length > 0) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -46759,7 +47461,7 @@ var init_MediaGallery = __esm({
   }
 });
 function extractTitle2(children) {
-  if (!React77__default.isValidElement(children)) return void 0;
+  if (!React78__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -47014,7 +47716,7 @@ var init_debugRegistry = __esm({
   }
 });
 function useDebugData() {
-  const [data, setData] = React77.useState(() => ({
+  const [data, setData] = React78.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -47028,7 +47730,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React77.useEffect(() => {
+  React78.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -47137,12 +47839,12 @@ function layoutGraph(states, transitions, initialState, width, height) {
   return positions;
 }
 function WalkMinimap() {
-  const [walkStep, setWalkStep] = React77.useState(null);
-  const [traits2, setTraits] = React77.useState([]);
-  const [coveredEdges, setCoveredEdges] = React77.useState([]);
-  const [completedTraits, setCompletedTraits] = React77.useState(/* @__PURE__ */ new Set());
-  const prevTraitRef = React77.useRef(null);
-  React77.useEffect(() => {
+  const [walkStep, setWalkStep] = React78.useState(null);
+  const [traits2, setTraits] = React78.useState([]);
+  const [coveredEdges, setCoveredEdges] = React78.useState([]);
+  const [completedTraits, setCompletedTraits] = React78.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React78.useRef(null);
+  React78.useEffect(() => {
     const interval = setInterval(() => {
       const w = window;
       const step = w.__orbitalWalkStep;
@@ -47578,15 +48280,15 @@ var init_EntitiesTab = __esm({
 });
 function EventFlowTab({ events: events2 }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React77.useState("all");
-  const containerRef = React77.useRef(null);
-  const [autoScroll, setAutoScroll] = React77.useState(true);
-  React77.useEffect(() => {
+  const [filter, setFilter] = React78.useState("all");
+  const containerRef = React78.useRef(null);
+  const [autoScroll, setAutoScroll] = React78.useState(true);
+  React78.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React77.useMemo(() => {
+  const filteredEvents = React78.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -47702,7 +48404,7 @@ var init_EventFlowTab = __esm({
 });
 function GuardsPanel({ guards }) {
   const { t } = useTranslate();
-  const [filter, setFilter] = React77.useState("all");
+  const [filter, setFilter] = React78.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -47715,7 +48417,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React77.useMemo(() => {
+  const filteredGuards = React78.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -47878,10 +48580,10 @@ function EffectBadge({ effect }) {
 }
 function TransitionTimeline({ transitions }) {
   const { t } = useTranslate();
-  const containerRef = React77.useRef(null);
-  const [autoScroll, setAutoScroll] = React77.useState(true);
-  const [expandedId, setExpandedId] = React77.useState(null);
-  React77.useEffect(() => {
+  const containerRef = React78.useRef(null);
+  const [autoScroll, setAutoScroll] = React78.useState(true);
+  const [expandedId, setExpandedId] = React78.useState(null);
+  React78.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -48161,9 +48863,9 @@ function getAllEvents(traits2) {
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [log19, setLog] = React77.useState([]);
-  const prevStatesRef = React77.useRef(/* @__PURE__ */ new Map());
-  React77.useEffect(() => {
+  const [log19, setLog] = React78.useState([]);
+  const prevStatesRef = React78.useRef(/* @__PURE__ */ new Map());
+  React78.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -48332,10 +49034,10 @@ function VerifyModePanel({
   localCount
 }) {
   const { t } = useTranslate();
-  const [expanded, setExpanded] = React77.useState(true);
-  const scrollRef = React77.useRef(null);
-  const prevCountRef = React77.useRef(0);
-  React77.useEffect(() => {
+  const [expanded, setExpanded] = React78.useState(true);
+  const scrollRef = React78.useRef(null);
+  const prevCountRef = React78.useRef(0);
+  React78.useEffect(() => {
     if (expanded && transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -48392,10 +49094,10 @@ function RuntimeDebugger({
   schema
 }) {
   const { t } = useTranslate();
-  const [isCollapsed, setIsCollapsed] = React77.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React77.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React78.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React78.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React77.useEffect(() => {
+  React78.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -48404,7 +49106,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React77.useEffect(() => {
+  React78.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -48419,7 +49121,7 @@ function RuntimeDebugger({
   if (!isVisible) {
     return null;
   }
-  const positionClasses = {
+  const positionClasses2 = {
     "bottom-right": "bottom-4 right-4",
     "bottom-left": "bottom-4 left-4",
     "top-right": "top-4 right-4",
@@ -48548,7 +49250,7 @@ function RuntimeDebugger({
       className: cn(
         "runtime-debugger",
         "fixed",
-        positionClasses[position],
+        positionClasses2[position],
         isCollapsed ? "runtime-debugger--collapsed" : "runtime-debugger--expanded",
         className
       ),
@@ -48630,6 +49332,7 @@ var init_SegmentRenderer = __esm({
     "use client";
     init_MarkdownContent();
     init_CodeBlock();
+    init_MermaidDiagram();
     init_QuizBlock();
     init_ActivationBlock();
     init_ConnectionBlock();
@@ -48661,6 +49364,9 @@ var init_SegmentRenderer = __esm({
               return /* @__PURE__ */ jsx(MarkdownContent, { content: segment.content }, `md-${index}`);
             }
             if (segment.type === "code") {
+              if (segment.language === "mermaid") {
+                return /* @__PURE__ */ jsx(MermaidDiagram, { code: segment.content }, `code-${index}`);
+              }
               if (segment.runnable && onRunCodeSimulation) {
                 return /* @__PURE__ */ jsx(
                   CodeRunnerPanel,
@@ -48793,99 +49499,6 @@ var init_ShowcaseOrganism = __esm({
     ShowcaseOrganism.displayName = "ShowcaseOrganism";
   }
 });
-var SplitPane;
-var init_SplitPane = __esm({
-  "components/core/organisms/layout/SplitPane.tsx"() {
-    "use client";
-    init_cn();
-    SplitPane = ({
-      direction = "horizontal",
-      ratio: initialRatio = 50,
-      minSize = 100,
-      resizable = true,
-      left,
-      right,
-      className,
-      leftClassName,
-      rightClassName
-    }) => {
-      const [ratio, setRatio] = useState(initialRatio);
-      const containerRef = useRef(null);
-      const isDragging = useRef(false);
-      const handlePointerDown = useCallback(
-        (e) => {
-          if (!resizable) return;
-          e.preventDefault();
-          isDragging.current = true;
-          e.currentTarget.setPointerCapture(e.pointerId);
-          const handlePointerMove = (ev) => {
-            if (!isDragging.current || !containerRef.current) return;
-            const rect = containerRef.current.getBoundingClientRect();
-            let newRatio;
-            if (direction === "horizontal") {
-              const x = ev.clientX - rect.left;
-              newRatio = x / rect.width * 100;
-            } else {
-              const y = ev.clientY - rect.top;
-              newRatio = y / rect.height * 100;
-            }
-            const minRatio = minSize / (direction === "horizontal" ? rect.width : rect.height) * 100;
-            const maxRatio = 100 - minRatio;
-            newRatio = Math.max(minRatio, Math.min(maxRatio, newRatio));
-            setRatio(newRatio);
-          };
-          const handlePointerUp = () => {
-            isDragging.current = false;
-            document.removeEventListener("pointermove", handlePointerMove);
-            document.removeEventListener("pointerup", handlePointerUp);
-            document.removeEventListener("pointercancel", handlePointerUp);
-          };
-          document.addEventListener("pointermove", handlePointerMove);
-          document.addEventListener("pointerup", handlePointerUp);
-          document.addEventListener("pointercancel", handlePointerUp);
-        },
-        [direction, minSize, resizable]
-      );
-      const isHorizontal = direction === "horizontal";
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: containerRef,
-          className: cn(
-            "flex w-full h-full",
-            isHorizontal ? "flex-row" : "flex-col",
-            className
-          ),
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn("overflow-auto", leftClassName),
-                style: {
-                  [isHorizontal ? "width" : "height"]: `${ratio}%`,
-                  flexShrink: 0
-                },
-                children: left
-              }
-            ),
-            resizable && /* @__PURE__ */ jsx(
-              "div",
-              {
-                onPointerDown: handlePointerDown,
-                className: cn(
-                  "flex-shrink-0 bg-border transition-colors touch-none",
-                  isHorizontal ? "w-1 cursor-col-resize hover:w-1.5 hover:bg-muted-foreground" : "h-1 cursor-row-resize hover:h-1.5 hover:bg-muted-foreground"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { className: cn("flex-1 overflow-auto", rightClassName), children: right })
-          ]
-        }
-      );
-    };
-    SplitPane.displayName = "SplitPane";
-  }
-});
 var StatCard;
 var init_StatCard = __esm({
   "components/core/organisms/StatCard.tsx"() {
@@ -48924,7 +49537,7 @@ var init_StatCard = __esm({
       const labelToUse = propLabel ?? propTitle;
       const eventBus = useEventBus();
       const { t } = useTranslate();
-      const handleActionClick = React77__default.useCallback(() => {
+      const handleActionClick = React78__default.useCallback(() => {
         if (action?.event) {
           eventBus.emit(`UI:${action.event}`, {});
         }
@@ -48935,7 +49548,7 @@ var init_StatCard = __esm({
       const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
       const isLoading = externalLoading ?? false;
       const error = externalError;
-      const computeMetricValue = React77__default.useCallback(
+      const computeMetricValue = React78__default.useCallback(
         (metric, items) => {
           if (metric.value !== void 0) {
             return metric.value;
@@ -48974,7 +49587,7 @@ var init_StatCard = __esm({
         },
         []
       );
-      const schemaStats = React77__default.useMemo(() => {
+      const schemaStats = React78__default.useMemo(() => {
         if (!metrics || metrics.length === 0) return null;
         return metrics.map((metric) => ({
           label: metric.label,
@@ -48982,7 +49595,7 @@ var init_StatCard = __esm({
           format: metric.format
         }));
       }, [metrics, data, computeMetricValue]);
-      const calculatedTrend = React77__default.useMemo(() => {
+      const calculatedTrend = React78__default.useMemo(() => {
         if (manualTrend !== void 0) return manualTrend;
         if (previousValue === void 0 || currentValue2 === void 0)
           return void 0;
@@ -49622,8 +50235,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     InlineActivityStream = ({ activities, autoScroll = true, className }) => {
-      const endRef = React77__default.useRef(null);
-      React77__default.useEffect(() => {
+      const endRef = React78__default.useRef(null);
+      React78__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [activities.length, autoScroll]);
@@ -49717,7 +50330,7 @@ var init_SubagentTracePanel = __esm({
     };
     SubagentRichCard = ({ subagent }) => {
       const { t } = useTranslate();
-      const activities = React77__default.useMemo(
+      const activities = React78__default.useMemo(
         () => subagentMessagesToActivities(subagent.messages),
         [subagent.messages]
       );
@@ -49794,8 +50407,8 @@ var init_SubagentTracePanel = __esm({
       ] });
     };
     CoordinatorConversation = ({ messages, autoScroll = true, className }) => {
-      const endRef = React77__default.useRef(null);
-      React77__default.useEffect(() => {
+      const endRef = React78__default.useRef(null);
+      React78__default.useEffect(() => {
         if (!autoScroll) return;
         endRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
       }, [messages.length, autoScroll]);
@@ -50230,7 +50843,7 @@ var init_Timeline = __esm({
     }) => {
       const { t } = useTranslate();
       const entityData = entity ?? [];
-      const items = React77__default.useMemo(() => {
+      const items = React78__default.useMemo(() => {
         if (propItems) return propItems;
         if (entityData.length === 0) return [];
         return entityData.map((record, idx) => {
@@ -50332,7 +50945,7 @@ var init_Timeline = __esm({
   }
 });
 function extractToastProps(children) {
-  if (!React77__default.isValidElement(children)) {
+  if (!React78__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -50374,7 +50987,7 @@ var init_ToastSlot = __esm({
         eventBus.emit(`${prefix}CLOSE`);
       };
       if (!isVisible) return null;
-      const isCustomContent = React77__default.isValidElement(children) && !message;
+      const isCustomContent = React78__default.isValidElement(children) && !message;
       return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
         Toast,
         {
@@ -50469,6 +51082,7 @@ var init_component_registry_generated = __esm({
     init_DocSearch();
     init_DocSidebar();
     init_DocTOC();
+    init_DockLayout();
     init_DocumentDetails();
     init_DocumentPanel();
     init_DocumentViewer();
@@ -50499,6 +51113,7 @@ var init_component_registry_generated = __esm({
     init_FlipCard();
     init_FlipContainer();
     init_FloatingActionButton();
+    init_FloatingToolbar();
     init_Form();
     init_FormField();
     init_FormSection();
@@ -50743,6 +51358,7 @@ var init_component_registry_generated = __esm({
       "DocSearch": DocSearch,
       "DocSidebar": DocSidebar,
       "DocTOC": DocTOC,
+      "DockLayout": DockLayout,
       "DocumentDetails": DocumentDetails,
       "DocumentPanel": DocumentPanel,
       "DocumentViewer": DocumentViewer,
@@ -50773,6 +51389,7 @@ var init_component_registry_generated = __esm({
       "FlipCard": FlipCard,
       "FlipContainer": FlipContainer,
       "FloatingActionButton": FloatingActionButton,
+      "FloatingToolbar": FloatingToolbar,
       "Form": Form,
       "FormField": FormField,
       "FormLayout": FormLayout,
@@ -50960,7 +51577,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React77__default.createElement(
+  return React78__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -51008,7 +51625,7 @@ function enrichFormFields(fields, entityDef) {
       }
       return { name: field, label: humanizeFieldName(field) };
     }
-    if (field && typeof field === "object" && !Array.isArray(field) && !React77__default.isValidElement(field) && !(field instanceof Date)) {
+    if (field && typeof field === "object" && !Array.isArray(field) && !React78__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
       const fieldName2 = typeof obj.name === "string" ? obj.name : typeof obj.field === "string" ? obj.field : void 0;
       if (!fieldName2) return field;
@@ -51061,7 +51678,7 @@ function enrichDetailFields(fields, entityDef) {
       const meta = metaFor(field);
       return meta ? { key: field, ...meta } : field;
     }
-    if (field && typeof field === "object" && !Array.isArray(field) && !React77__default.isValidElement(field) && !(field instanceof Date)) {
+    if (field && typeof field === "object" && !Array.isArray(field) && !React78__default.isValidElement(field) && !(field instanceof Date)) {
       const obj = field;
       const fieldName2 = typeof obj.key === "string" ? obj.key : typeof obj.name === "string" ? obj.name : void 0;
       if (!fieldName2 || obj.type) return field;
@@ -51520,7 +52137,7 @@ function renderPatternChildren(children, onDismiss, parentId = "root", parentPat
         const key = `${parentId}-${index}-trait:${traitName}`;
         return /* @__PURE__ */ jsx(TraitFrame, { traitName }, key);
       }
-      return /* @__PURE__ */ jsx(React77__default.Fragment, { children: child }, `${parentId}-${index}`);
+      return /* @__PURE__ */ jsx(React78__default.Fragment, { children: child }, `${parentId}-${index}`);
     }
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
@@ -51577,7 +52194,7 @@ function isPatternConfig(value) {
   if (value === null || value === void 0) return false;
   if (typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
-  if (React77__default.isValidElement(value)) return false;
+  if (React78__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (typeof value === "function") return false;
   const record = value;
@@ -51590,9 +52207,9 @@ function renderPatternValue(value) {
   if (typeof value === "string") return renderPatternChildren(value, () => {
   });
   if (value instanceof Date) return value.toLocaleString();
-  if (React77__default.isValidElement(value)) return value;
+  if (React78__default.isValidElement(value)) return value;
   if (Array.isArray(value)) {
-    return value.map((item, index) => /* @__PURE__ */ jsx(React77__default.Fragment, { children: renderPatternValue(item) }, index));
+    return value.map((item, index) => /* @__PURE__ */ jsx(React78__default.Fragment, { children: renderPatternValue(item) }, index));
   }
   if (isPatternConfig(value)) {
     const { type, ...props } = value;
@@ -51602,7 +52219,7 @@ function renderPatternValue(value) {
   return null;
 }
 function isPlainConfigObject(value) {
-  if (React77__default.isValidElement(value)) return false;
+  if (React78__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   const proto = Object.getPrototypeOf(value);
   return proto === Object.prototype || proto === null;
@@ -51776,7 +52393,7 @@ function SlotContentRenderer({
     for (const slotKey of CONTENT_NODE_SLOTS) {
       const slotVal = restProps[slotKey];
       if (slotVal === void 0 || slotVal === null) continue;
-      if (React77__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
+      if (React78__default.isValidElement(slotVal) || typeof slotVal === "string" || typeof slotVal === "number" || typeof slotVal === "boolean") continue;
       const typelessChildren = !Array.isArray(slotVal) && typeof slotVal === "object" && !("type" in slotVal) && Array.isArray(slotVal.children) ? slotVal.children : void 0;
       if (typelessChildren !== void 0 || Array.isArray(slotVal) || typeof slotVal === "object" && "type" in slotVal) {
         nodeSlotOverrides[slotKey] = renderPatternChildren(
@@ -51830,7 +52447,7 @@ function SlotContentRenderer({
     const resolvedItems = Array.isArray(entityVal) && entityVal[0] !== "fn" ? entityVal : null;
     if (resolvedItems && resolvedItems.length > 0 && !finalProps.fields && !finalProps.columns) {
       const sample = resolvedItems[0];
-      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React77__default.isValidElement(sample) && !(sample instanceof Date)) {
+      if (sample && typeof sample === "object" && !Array.isArray(sample) && !React78__default.isValidElement(sample) && !(sample instanceof Date)) {
         const keys = Object.keys(sample).filter((k) => k !== "id" && k !== "_id");
         finalProps.fields = keys.map((k, i) => ({ name: k, variant: i === 0 ? "h4" : "body" }));
       }
@@ -52163,6 +52780,7 @@ init_SplitPane();
 init_MasterDetailLayout();
 init_DashboardGrid();
 init_TabbedContainer();
+init_DockLayout();
 
 // components/core/organisms/index.ts
 init_molecules();
@@ -53163,7 +53781,7 @@ function expressionEqual(a, b) {
 function isPlainSlotObject(value) {
   if (value === null || value === void 0 || typeof value !== "object") return false;
   if (Array.isArray(value)) return false;
-  if (React77__default.isValidElement(value)) return false;
+  if (React78__default.isValidElement(value)) return false;
   if (value instanceof Date) return false;
   if (isRenderBindingMarker(value)) return false;
   return true;
@@ -53182,7 +53800,7 @@ function shareValue(prev, next) {
     return prev instanceof Date && next instanceof Date && prev.getTime() === next.getTime() ? { value: prev, equal: true } : { value: next, equal: false };
   }
   if (typeof prev === "function" || typeof next === "function") return { value: next, equal: false };
-  if (React77__default.isValidElement(prev) || React77__default.isValidElement(next)) return { value: next, equal: false };
+  if (React78__default.isValidElement(prev) || React78__default.isValidElement(next)) return { value: next, equal: false };
   if (Array.isArray(prev) && Array.isArray(next)) {
     let equal = prev.length === next.length;
     const out = new Array(next.length);
@@ -54091,6 +54709,8 @@ var en_default = {
   "orbInspector.tokenGroup.shadows": "Shadows",
   "orbInspector.tab.inspector": "Inspector",
   "orbInspector.tab.styles": "Styles",
+  "orbInspector.tab.design": "Design",
+  "orbInspector.tab.prototype": "Prototype",
   "orbInspector.tab.code": "Code",
   "canvas.goBackToOverview": "Go back to overview",
   "canvas.overview": "Overview",
@@ -54330,104 +54950,8 @@ init_useInfiniteScroll();
 init_usePullToRefresh();
 init_useCanvasGestures();
 init_useTapReveal();
-
-// hooks/useDraggable.ts
-init_useEventBus();
-var ALMADAR_DND_MIME = "application/x-almadar-dnd";
-function useDraggable({ payload, disabled = false }) {
-  const [isDragging, setIsDragging] = useState(false);
-  const eventBus = useEventBus();
-  const handleDragStart = useCallback(
-    (e) => {
-      if (disabled) {
-        e.preventDefault();
-        return;
-      }
-      e.dataTransfer.setData(ALMADAR_DND_MIME, JSON.stringify(payload));
-      e.dataTransfer.effectAllowed = "copy";
-      setIsDragging(true);
-      eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
-    },
-    [disabled, payload, eventBus]
-  );
-  const handleDragEnd = useCallback(
-    (e) => {
-      setIsDragging(false);
-      eventBus.emit("UI:DRAG_END", { kind: payload.kind, data: payload.data });
-    },
-    [payload, eventBus]
-  );
-  const dragProps = useMemo(
-    () => ({
-      draggable: !disabled,
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd,
-      "aria-grabbed": isDragging
-    }),
-    [disabled, handleDragStart, handleDragEnd, isDragging]
-  );
-  return { dragProps, isDragging };
-}
-
-// hooks/useDropZone.ts
-init_useEventBus();
-function parsePayload(e) {
-  try {
-    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
-    if (!raw) return null;
-    const parsed = JSON.parse(raw);
-    if (typeof parsed.kind !== "string" || !parsed.data) return null;
-    return parsed;
-  } catch {
-    return null;
-  }
-}
-function hasAlmadarPayload(e) {
-  return e.dataTransfer.types.includes(ALMADAR_DND_MIME);
-}
-function useDropZone({ accepts, onDrop, disabled = false }) {
-  const [isOver, setIsOver] = useState(false);
-  const eventBus = useEventBus();
-  const handleDragOver = useCallback(
-    (e) => {
-      if (disabled) return;
-      if (!hasAlmadarPayload(e)) return;
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "copy";
-      setIsOver(true);
-    },
-    [disabled]
-  );
-  const handleDragLeave = useCallback(
-    (e) => {
-      setIsOver(false);
-    },
-    []
-  );
-  const handleDrop = useCallback(
-    (e) => {
-      e.preventDefault();
-      setIsOver(false);
-      if (disabled) return;
-      const payload = parsePayload(e);
-      if (!payload) return;
-      if (!accepts.includes(payload.kind)) return;
-      const position = { x: e.clientX, y: e.clientY };
-      onDrop(payload, position);
-      eventBus.emit("UI:DROP", { kind: payload.kind, data: payload.data, ...position });
-    },
-    [disabled, accepts, onDrop, eventBus]
-  );
-  const dropProps = useMemo(
-    () => ({
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop
-    }),
-    [handleDragOver, handleDragLeave, handleDrop]
-  );
-  return { dropProps, isOver };
-}
+init_useDraggable();
+init_useDropZone();
 function useRenderInterpolation(options = {}) {
   const tickIntervalMs = options.tickIntervalMs ?? 1e3 / 30;
   const prevRef = useRef(null);
@@ -54571,4 +55095,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgoGraphCanvas, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DocumentDetails, DocumentPanel, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmojiPicker, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, FxOverlay, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, ImportPreviewTree, ImportProgress, ImportSourcePicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, LearningScene3D, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, PageTransition, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, Presence, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichTextEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, 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, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, arrowBetween, billboardLabel, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, cylinderBetween, get3DClickPayload, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, meshSphere, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, registerCodeLanguageLoader, renderPatternValue, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, sanitizeRichHtml, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useMediaQuery, useOrbitalHistory, usePresence, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate116 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, Card2 as ActionCard, ActionPalette, ActionTile, ActivationBlock, Alert, AlgoGraphCanvas, AlgorithmCanvas, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, Aside, AssetPicker, AtlasImage, AtlasPanel, AuthLayout, Avatar, Badge, BehaviorView, BiologyCanvas, BloomQuizBlock, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, BranchingLogicBuilder, Breadcrumb, Button, ButtonGroup, CTABanner, CalendarGrid, Canvas, Canvas2D, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, Center, Chart, ChartLegend, ChatBar, Checkbox, ChemistryCanvas, ChoiceButton, Coachmark, CodeBlock, CodeRunnerPanel, CollapsibleSection, CommandPalette, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, ConnectionBlock, Container, ContentRenderer, ContentSection, ControlButton, ControlGrid, CounterTemplate, DEFAULT_LIKERT_OPTIONS, DEFAULT_MATRIX_COLUMNS, DEFAULT_SLOTS, DIAMOND_TOP_Y, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangePicker, DateRangeSelector, DayCell, DetailPanel, Dialog, DialogueBubble, Divider, DocBreadcrumb, DocPagination, DocSearch, DocSidebar, DocTOC, DockLayout, DocumentDetails, DocumentPanel, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ELEMENT_SELECTED_EVENT, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmojiPicker, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FileTree, FilterGroup, FilterPill, Flex, FlipCard, FlipContainer, FloatingActionButton, FloatingToolbar, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, FxOverlay, GameAudioToggle, GameHud, GameIcon, GameMenu, GameShell, GenericAppTemplate, GeometricPattern, GradientDivider, GraphCanvas, GraphView, Grid, GridPicker, HStack, Header, HealthBar, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, IconPicker, ImportPreviewTree, ImportProgress, ImportSourcePicker, InfiniteScrollSentinel, Input, InputGroup, InstallBox, JazariStateMachine, JsonTreeEditor, Label, LandingPageTemplate, LawReferenceTooltip, LearningCanvas, LearningScene3D, Lightbox, LikertScale, LineChart2 as LineChart, List3 as List, LoadingState, MapView, MarkdownContent, MarketingFooter, MarketingStatCard, MasterDetail, MasterDetailLayout, MathCanvas, MatrixQuestion, MediaGallery, Menu, Meter, Modal, ModalSlot, ModuleCard, Navigation, NodeSlotEditor, NotifyListener, NumberStepper, OnboardingSpotlight, OptionConstraintGroup, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, PageTransition, Pagination, PatternTile, PhysicsCanvas, Popover, PositionedCanvas, Presence, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PropertyInspector, PullQuote, PullToRefresh, QrScanner, QuizBlock, Radio, RangeSlider, ReflectionBlock, RelationSelect, RepeatableFormSection, ReplyTree, RichTextEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreDisplay, SearchInput, Section, SectionHeader, SegmentRenderer, Select, SequenceBar, ServiceCatalog, SharedEntityStoreContext, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Sparkline, Spinner, Split, SplitPane, SplitSection, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateGraph, StateJsonView, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StepFlow, StepFlowOrganism, SubagentTracePanel, 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, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitFrame, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, VersionDiff, ViolationAlert, VoteStack, WizardContainer, WizardNavigation, WizardProgress, arrowBetween, billboardLabel, boardEntity, bool, calculateAttackTargets, calculateValidMoves, cn, createInitialGameState, createSharedEntityStore, createTranslate, createUnitAnimationState, cylinderBetween, get3DClickPayload, getCurrentFrame, getTileDimensions, inferDirection, isoToScreen, makeAsset, makeAssetMap, mapBookData, meshSphere, num, objAvailableActions, objAvailableEvents, objCurrentState, objIcon, objId, objMaxRules, objName, objRules, objStates, parseEditFocus, parseLessonSegments, parseMarkdownWithCodeBlocks, parseQueryBinding, pendulum, projectileMotion, registerCodeLanguageLoader, renderPatternValue, resolveFieldMap, resolveFrame, resolveSheetDirection, rows, runTickFrame, sanitizeRichHtml, screenToIso, springOscillator, str, tickAnimationState, toCodeLanguage, transitionAnimation, unitHealth, unitPosition, unitTeam, useAgentChat, useAnchorRect, useAtlasSliceDataUrl, useAuthContext, useCamera, useCanvasGestures, useCompile, useConnectGitHub, useDeepAgentGeneration, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useLongPress, useMediaQuery, useOrbitalHistory, usePresence, usePreview, usePullToRefresh, useQuerySingleton, useRenderInterpolation, useSharedEntitySnapshot, useSharedEntityStore, useSharedEntityStoreContext, useSwipeGesture, useTapReveal, useTraitListens, useTranslate116 as useTranslate, useUIEvents, useUISlotManager, useUnitSpriteAtlas, useValidation, vec2 };