@almadar/ui 5.2.0 → 5.3.0

package/dist/avl/index.js

@@ -4836,16 +4836,16 @@ var init_ModuleCard = __esm({
           children: [
             /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
             /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
-            /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx("span", { className: "text-[15px] font-bold text-[var(--color-foreground)]", children: orbitalName }) }),
+            /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsx("span", { className: "text-base font-bold text-[var(--color-foreground)]", children: orbitalName }) }),
             /* @__PURE__ */ jsxs("div", { className: `px-3 py-2 border-b border-[var(--color-border)] ${PERSISTENCE_BORDER[persistence] ?? ""}`, children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
                 /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(AvlEntity, { x: 10, y: 10, r: 8, persistence }) }),
-                /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-[var(--color-foreground)]", children: entityName }),
-                /* @__PURE__ */ jsx("span", { className: "ml-auto text-[10px] opacity-50", title: persistence, children: PERSISTENCE_ICON[persistence] ?? "" })
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--color-foreground)]", children: entityName }),
+                /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs opacity-50", title: persistence, children: PERSISTENCE_ICON[persistence] ?? "" })
               ] }),
               fields.length > 0 && /* @__PURE__ */ jsx("div", { className: `grid gap-x-3 gap-y-0.5`, style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: fields.map((f3) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                 /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(AvlFieldType, { x: 8, y: 8, kind: toFieldKind2(f3.type), size: 6 }) }),
-                /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--color-muted-foreground)] truncate", children: f3.name })
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-muted-foreground)] truncate", children: f3.name })
               ] }, f3.name)) })
             ] }),
             traits2.map((trait) => {
@@ -4853,7 +4853,7 @@ var init_ModuleCard = __esm({
               const traitEmits = externalLinks.filter((l) => l.direction === "out" && l.traitName === trait.name);
               const traitListens = externalLinks.filter((l) => l.direction === "in" && l.traitName === trait.name);
               return /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: [
-                /* @__PURE__ */ jsx("div", { className: "text-[12px] font-semibold text-[var(--color-foreground)] mb-1", children: trait.name }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-[var(--color-foreground)] mb-1", children: trait.name }),
                 detail && /* @__PURE__ */ jsx(MiniStateMachine, { data: detail, className: "mb-1" }),
                 (traitEmits.length > 0 || traitListens.length > 0) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[9px] mt-1", children: [
                   traitListens.map((l) => /* @__PURE__ */ jsxs("span", { style: { color: CONNECTION_COLORS.emitListen.color }, children: [
@@ -4872,7 +4872,7 @@ var init_ModuleCard = __esm({
             }),
             pages.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 flex items-center gap-2 flex-wrap", children: pages.map((p2) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
               /* @__PURE__ */ jsx("svg", { width: 10, height: 10, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsx(AvlPage, { x: 6, y: 6, size: 5 }) }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-[var(--color-muted-foreground)]", children: p2.route })
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--color-muted-foreground)]", children: p2.route })
             ] }, p2.name)) })
           ]
         }
@@ -6425,7 +6425,7 @@ var init_Icon = __esm({
     sizeClasses = {
       xs: "w-3 h-3",
       sm: "w-4 h-4",
-      md: "w-5 h-5",
+      md: "h-icon-default w-icon-default",
       lg: "w-6 h-6",
       xl: "w-8 h-8"
     };
@@ -6570,14 +6570,14 @@ var init_Button = __esm({
     };
     variantStyles2.destructive = variantStyles2.danger;
     sizeStyles2 = {
-      sm: "px-3 py-1.5 text-sm",
-      md: "px-4 py-2 text-sm",
-      lg: "px-6 py-3 text-base"
+      sm: "h-button-sm px-3 text-sm",
+      md: "h-button-md px-4 text-sm",
+      lg: "h-button-lg px-6 text-base"
     };
     iconSizeStyles = {
-      sm: "h-3.5 w-3.5",
+      sm: "h-icon-default w-icon-default",
       md: "h-icon-default w-icon-default",
-      lg: "h-5 w-5"
+      lg: "h-icon-default w-icon-default"
     };
     Button = React98__default.forwardRef(
       ({
@@ -6615,7 +6615,7 @@ var init_Button = __esm({
             disabled: disabled || isLoading,
             className: cn(
               "inline-flex items-center justify-center gap-2",
-              "font-[var(--font-weight-medium)]",
+              "font-medium",
               "rounded-sm",
               "cursor-pointer",
               "transition-all duration-[var(--transition-normal)]",
@@ -7131,7 +7131,11 @@ var init_Badge = __esm({
     };
     Badge = React98__default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
-        const iconSizes3 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
+        const iconSizes3 = {
+          sm: "h-icon-default w-icon-default",
+          md: "h-icon-default w-icon-default",
+          lg: "h-icon-default w-icon-default"
+        };
         const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon;
         return /* @__PURE__ */ jsxs(
           "span",
@@ -8165,10 +8169,11 @@ var init_Input = __esm({
         const type = inputType || htmlType || "text";
         const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-icon-default w-icon-default" });
         const showClearButton = clearable && value && String(value).length > 0;
+        const isMultiline = type === "textarea";
         const baseClassName = cn(
           "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
           "border-[length:var(--border-width-thin)] border-border",
-          "px-3 py-2 text-sm",
+          isMultiline ? "px-3 py-2 text-sm" : "h-input-md px-3 text-sm",
           "bg-card hover:bg-muted focus:bg-card",
           "text-foreground placeholder:text-muted-foreground",
           "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring",
@@ -8220,7 +8225,7 @@ var init_Input = __esm({
               checked: props.checked,
               onChange,
               className: cn(
-                "h-4 w-4 rounded-sm",
+                "h-icon-default w-icon-default rounded-sm",
                 "border-border",
                 "text-primary focus:ring-ring",
                 "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -8302,7 +8307,7 @@ var init_Textarea = __esm({
               "placeholder:text-[var(--color-placeholder)]",
               "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
               "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
-              "resize-y min-h-[80px]",
+              "resize-y min-h-20",
               error ? "border-error focus:border-error" : "border-border focus:border-primary",
               className
             ),
@@ -8405,21 +8410,21 @@ var init_Card = __esm({
         "border-[length:var(--border-width)] border-border",
         "shadow-elevation-card",
         "transition-all duration-[var(--transition-normal)]",
-        "hover:shadow-elevation-dialog hover:-translate-y-0.5"
+        "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       bordered: [
         "bg-card",
         "border-[length:var(--border-width)] border-border",
         "shadow-elevation-card",
         "transition-all duration-[var(--transition-normal)]",
-        "hover:shadow-elevation-dialog hover:-translate-y-0.5"
+        "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       elevated: [
         "bg-card",
         "border-[length:var(--border-width)] border-border",
         "shadow",
         "transition-all duration-[var(--transition-normal)]",
-        "hover:shadow-elevation-dialog hover:-translate-y-0.5"
+        "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       // Interactive variant with theme-specific hover effects
       interactive: [
@@ -8469,7 +8474,7 @@ var init_Card = __esm({
             ...props,
             children: [
               (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+                title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-card-foreground font-bold", children: title }),
                 subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
               ] }),
               children
@@ -8487,7 +8492,7 @@ var init_Card = __esm({
         ref,
         className: cn(
           "text-lg text-card-foreground",
-          "font-[var(--font-weight-bold)]",
+          "font-bold",
           className
         ),
         ...props
@@ -8625,7 +8630,7 @@ var init_Spinner = __esm({
     init_Icon();
     sizeStyles5 = {
       xs: "h-3 w-3",
-      sm: "h-4 w-4",
+      sm: "h-icon-default w-icon-default",
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
@@ -9645,10 +9650,9 @@ var init_LawReferenceTooltip = __esm({
               {
                 padding: "sm",
                 rounded: "lg",
-                shadow: "lg",
                 position: "absolute",
                 className: cn(
-                  "z-50 w-64 bg-foreground text-background",
+                  "z-50 w-64 bg-foreground text-background shadow-elevation-popover",
                   positionStyles2[position]
                 ),
                 role: "tooltip",
@@ -9659,7 +9663,7 @@ var init_LawReferenceTooltip = __esm({
                       {
                         variant: "label",
                         weight: "semibold",
-                        className: "text-amber-400",
+                        className: "text-warning",
                         children: [
                           reference.law,
                           " ",
@@ -9691,7 +9695,7 @@ var init_LawReferenceTooltip = __esm({
                       {
                         as: "a",
                         variant: "caption",
-                        className: "text-blue-400 hover:text-blue-300 underline cursor-pointer",
+                        className: "text-info hover:text-info/80 underline cursor-pointer",
                         href: reference.link,
                         target: "_blank",
                         rel: "noopener noreferrer",
@@ -10097,12 +10101,12 @@ var init_RangeSlider = __esm({
                       "shadow-sm",
                       "pointer-events-none",
                       "transition-transform duration-100",
-                      isDragging && "scale-110",
+                      isDragging && "scale-[var(--hover-scale)]",
                       thumbSizes[size]
                     ),
                     style: {
                       top: "50%",
-                      transform: `translateY(-50%) translateX(-50%)${isDragging ? " scale(1.1)" : ""}`,
+                      transform: `translateY(-50%) translateX(-50%)${isDragging ? " scale(var(--hover-scale))" : ""}`,
                       left: `${percentage}%`
                     }
                   }
@@ -11892,7 +11896,7 @@ function ItemSlot({
             className: cn(
               "absolute -bottom-1 -right-1 flex items-center justify-center",
               "min-w-[18px] h-[18px] rounded-full px-1",
-              "bg-[var(--color-surface,#374151)] border border-gray-500 text-[10px] font-bold text-[var(--color-foreground)]"
+              "bg-[var(--color-surface,#374151)] border border-gray-500 text-xs font-bold text-[var(--color-foreground)]"
             ),
             children: quantity
           }
@@ -12030,7 +12034,7 @@ var init_ComboCounter = __esm({
   "components/atoms/game/ComboCounter.tsx"() {
     init_cn();
     sizeMap8 = {
-      sm: { combo: "text-lg", label: "text-[10px]", multiplier: "text-xs" },
+      sm: { combo: "text-lg", label: "text-xs", multiplier: "text-xs" },
       md: { combo: "text-2xl", label: "text-xs", multiplier: "text-sm" },
       lg: { combo: "text-4xl", label: "text-sm", multiplier: "text-base" }
     };
@@ -12098,7 +12102,7 @@ var init_XPBar = __esm({
   "components/atoms/game/XPBar.tsx"() {
     init_cn();
     sizeMap9 = {
-      sm: { bar: "h-2", text: "text-[10px]", badge: "text-[10px] px-1.5 py-0.5" },
+      sm: { bar: "h-2", text: "text-xs", badge: "text-xs px-1.5 py-0.5" },
       md: { bar: "h-3", text: "text-xs", badge: "text-xs px-2 py-0.5" },
       lg: { bar: "h-4", text: "text-sm", badge: "text-sm px-2.5 py-1" }
     };
@@ -12225,7 +12229,7 @@ function StatusEffect({
         children: stacks
       }
     ),
-    label && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-400 mt-0.5 text-center whitespace-nowrap", children: label })
+    label && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
 var sizeMap11, variantStyles7;
@@ -12233,8 +12237,8 @@ var init_StatusEffect = __esm({
   "components/atoms/game/StatusEffect.tsx"() {
     init_cn();
     sizeMap11 = {
-      sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-[10px] -top-1 -right-1 w-4 h-4", timer: "text-[9px]" },
-      md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-[10px]" },
+      sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-xs -top-1 -right-1 w-4 h-4", timer: "text-[9px]" },
+      md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-xs" },
       lg: { container: "w-12 h-12", icon: "text-lg", badge: "text-sm -top-1.5 -right-1.5 w-6 h-6", timer: "text-xs" }
     };
     variantStyles7 = {
@@ -12444,7 +12448,7 @@ var init_ActionButton = __esm({
     init_Icon();
     sizeMap13 = {
       sm: { button: "px-3 py-1.5 text-xs", hotkey: "text-[9px] px-1", icon: "text-xs" },
-      md: { button: "px-4 py-2 text-sm", hotkey: "text-[10px] px-1.5", icon: "text-sm" },
+      md: { button: "px-4 py-2 text-sm", hotkey: "text-xs px-1.5", icon: "text-sm" },
       lg: { button: "px-5 py-2.5 text-base", hotkey: "text-xs px-2", icon: "text-base" }
     };
     variantStyles8 = {
@@ -26091,7 +26095,7 @@ var init_DashboardLayout = __esm({
                                   {
                                     as: "span",
                                     className: cn(
-                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
+                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-xs font-semibold text-white flex items-center justify-center",
                                       action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
                                     ),
                                     children: action.badge
@@ -26114,7 +26118,7 @@ var init_DashboardLayout = __esm({
                                   Box,
                                   {
                                     as: "span",
-                                    className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
+                                    className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-xs font-semibold text-white flex items-center justify-center",
                                     children: unreadCount > 99 ? "99+" : unreadCount
                                   }
                                 )
@@ -26316,14 +26320,14 @@ var init_DashboardLayout = __esm({
               {
                 variant: "caption",
                 className: cn(
-                  "text-[10px] leading-tight truncate max-w-full",
+                  "text-xs leading-tight truncate max-w-full",
                   isActive ? "text-primary font-medium" : "text-muted-foreground"
                 ),
                 as: "span",
                 children: item.label
               }
             ),
-            item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-[8px] px-1 py-0 min-w-0", children: item.badge })
+            item.badge && /* @__PURE__ */ jsx(Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-xs px-1 py-0 min-w-0", children: item.badge })
           ]
         }
       );
@@ -27905,7 +27909,7 @@ var init_FilterGroup = __esm({
         return /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", className: cn("flex-wrap", className), children: [
           showIcon && /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
           filters.map((filter) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-sm font-[var(--font-weight-medium)] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [
               filter.label,
               ":"
             ] }),
@@ -27921,7 +27925,7 @@ var init_FilterGroup = __esm({
                       type: "button",
                       onClick: () => handleFilterSelect(filter.field, null),
                       className: cn(
-                        "px-3 py-1.5 text-sm font-[var(--font-weight-medium)] transition-all duration-[var(--transition-fast)]",
+                        "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
                         !selectedValues[filter.field] ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                       ),
                       children: "All"
@@ -27933,7 +27937,7 @@ var init_FilterGroup = __esm({
                       type: "button",
                       onClick: () => handleFilterSelect(filter.field, option),
                       className: cn(
-                        "px-3 py-1.5 text-sm font-[var(--font-weight-medium)] transition-all duration-[var(--transition-fast)]",
+                        "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
                         "border-l-[length:var(--border-width)] border-border",
                         selectedValues[filter.field] === option ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                       ),
@@ -27961,10 +27965,10 @@ var init_FilterGroup = __esm({
         return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
           showIcon && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-[var(--font-weight-bold)] uppercase tracking-wide", children: "Filters" })
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
           ] }),
           filters.map((filter) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-muted-foreground uppercase tracking-wide", children: filter.label }),
+            /* @__PURE__ */ jsx("label", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wide", children: filter.label }),
             resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsx(
               Input,
               {
@@ -28146,12 +28150,12 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsx(Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsx("span", { className: "text-sm font-[var(--font-weight-bold)] uppercase tracking-wide", children: "Filters" })
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
                 ]
               }
             ),
             filters.map((filter) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-muted-foreground uppercase tracking-wide", children: filter.label }),
+              /* @__PURE__ */ jsx("label", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wide", children: filter.label }),
               resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -30552,7 +30556,7 @@ function EnemyPlate({
             Typography,
             {
               variant: "caption",
-              className: "font-mono tabular-nums text-gray-400 text-[10px] shrink-0",
+              className: "font-mono tabular-nums text-muted-foreground text-xs shrink-0",
               children: [
                 health,
                 "/",
@@ -30629,7 +30633,7 @@ function UnitCommandBar({
           Typography,
           {
             variant: "caption",
-            className: "text-gray-500 text-[10px] font-mono",
+            className: "text-muted-foreground text-xs font-mono",
             children: command.hotkey
           }
         )
@@ -42149,7 +42153,7 @@ var init_List = __esm({
                       {
                         as: "h3",
                         className: cn(
-                          "text-[15px] font-semibold text-foreground truncate flex-1",
+                          "text-base font-semibold text-foreground truncate flex-1",
                           "tracking-tight leading-snug",
                           item.completed && "line-through text-muted-foreground"
                         ),
@@ -42173,7 +42177,7 @@ var init_List = __esm({
                       )
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxs(HStack, { className: "flex items-center gap-6 text-[13px] font-medium text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxs(HStack, { className: "flex items-center gap-6 text-sm font-medium text-muted-foreground", children: [
                     dateFields.slice(0, 1).map((field) => {
                       const value = item._fields?.[field];
                       if (!value) return null;
@@ -42569,7 +42573,7 @@ var init_MediaGallery = __esm({
                         }
                       ),
                       item.caption && /* @__PURE__ */ jsx(Box, { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-white truncate", children: item.caption }) }),
-                      selectable && isSelected && /* @__PURE__ */ jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-white text-[10px]", children: "\u2713" }) })
+                      selectable && isSelected && /* @__PURE__ */ jsx(Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-white text-xs", children: "\u2713" }) })
                     ]
                   },
                   item.id
@@ -43965,13 +43969,13 @@ function WalkMinimap() {
       })
     ] }) }),
     /* @__PURE__ */ jsx(Box, { className: "px-2 py-1 border-t border-border", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center justify-between", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-[10px] font-mono text-green-500", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-green-500", children: [
         "Engine: ",
         engineCount,
         "/",
         totalTransitions
       ] }),
-      domCount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-[10px] font-mono text-cyan-500", children: [
+      domCount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-cyan-500", children: [
         "DOM: ",
         domCount
       ] }),
@@ -44485,7 +44489,7 @@ function VerificationTab({ checks, summary }) {
               /* @__PURE__ */ jsx(Typography, { variant: "small", className: "break-words", children: check.label }),
               check.details && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 break-words", children: check.details })
             ] }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono text-[10px] shrink-0", children: new Date(check.updatedAt).toLocaleTimeString("en-US", {
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono text-xs shrink-0", children: new Date(check.updatedAt).toLocaleTimeString("en-US", {
               hour12: false,
               hour: "2-digit",
               minute: "2-digit",
@@ -44518,7 +44522,7 @@ var init_VerificationTab = __esm({
 function EffectBadge({ effect }) {
   const variant = EFFECT_STATUS_VARIANT[effect.status] || "default";
   const icon = effect.status === "executed" ? "\u2713" : effect.status === "failed" ? "\u2717" : "-";
-  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] font-mono bg-gray-100 dark:bg-gray-700 rounded px-1.5 py-0.5", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-mono bg-gray-100 dark:bg-gray-700 rounded px-1.5 py-0.5", children: [
     /* @__PURE__ */ jsx(Badge, { variant, size: "sm", className: "!text-[9px] !px-1 !py-0", children: icon }),
     /* @__PURE__ */ jsx("span", { className: "text-gray-600 dark:text-gray-400", children: effect.type }),
     effect.error && /* @__PURE__ */ jsx("span", { className: "text-red-500 truncate max-w-[120px]", title: effect.error, children: effect.error })
@@ -44622,8 +44626,8 @@ function TransitionTimeline({ transitions }) {
                 ] }),
                 isExpanded && trace.effects.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-2 mt-1 mb-2 pl-2 border-l border-gray-200 dark:border-gray-700 space-y-1", children: trace.effects.map((effect, eIdx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsx(EffectBadge, { effect }),
-                  effect.args.length > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono text-[10px] truncate max-w-[200px]", children: JSON.stringify(effect.args) }),
-                  effect.durationMs !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400 text-[10px]", children: [
+                  effect.args.length > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono text-xs truncate max-w-[200px]", children: JSON.stringify(effect.args) }),
+                  effect.durationMs !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
                     effect.durationMs,
                     "ms"
                   ] })
@@ -44910,7 +44914,7 @@ var init_RuntimeDebugger = __esm({
 });
 function ServerResponseRow({ sr }) {
   const entityEntries = Object.entries(sr.dataEntities);
-  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-[10px] font-mono", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-xs font-mono", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxs("span", { className: sr.success ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400", children: [
         sr.success ? "\u2713" : "\u2717",
@@ -44967,7 +44971,7 @@ function TransitionRow({ trace }) {
       ] })
     ] }),
     trace.effects.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 ml-6 mt-0.5", children: trace.effects.map((eff, i) => /* @__PURE__ */ jsxs("span", { className: cn(
-      "px-1 rounded text-[10px]",
+      "px-1 rounded text-xs",
       eff.status === "executed" ? "bg-green-500/15 text-green-600 dark:text-green-400" : eff.status === "failed" ? "bg-red-500/15 text-red-600 dark:text-red-400" : "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400"
     ), children: [
       eff.status === "executed" ? "\u2713" : eff.status === "failed" ? "\u2717" : "-",
@@ -57973,7 +57977,7 @@ var SystemNode = ({ data }) => {
         /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2 !h-2 !bg-orange-400" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [
           /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(AvlEntity, { x: 10, y: 10, r: 8, persistence }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-[var(--color-foreground)] truncate flex-1", children: orbitalName })
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[var(--color-foreground)] truncate flex-1", children: orbitalName })
         ] }),
         fieldDots.length > 0 && /* @__PURE__ */ jsx("svg", { width: fieldDots.length * 10 + 2, height: 10, viewBox: `0 0 ${fieldDots.length * 10 + 2} 10`, className: "mb-1", children: fieldDots.map((f3, i) => /* @__PURE__ */ jsx(AvlFieldType, { x: i * 10 + 5, y: 5, kind: toFieldKind(f3.type), size: 4 }, f3.name)) }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -58027,28 +58031,28 @@ var DetailView = ({ data }) => {
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "Trigger" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "Trigger" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx(AvlEvent, { x: 8, y: 8, size: 7 }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-[14px] font-semibold text-[var(--color-foreground)]", children: transition.event })
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--color-foreground)]", children: transition.event })
         ] })
       ] }),
       hasGuard && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "Guard" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "Guard" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", children: /* @__PURE__ */ jsx(AvlGuard, { x: 7, y: 7, size: 6 }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-mono text-[var(--color-muted-foreground)] opacity-60", children: typeof transition.guard === "string" ? transition.guard : JSON.stringify(transition.guard) })
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--color-muted-foreground)] opacity-60", children: typeof transition.guard === "string" ? transition.guard : JSON.stringify(transition.guard) })
         ] })
       ] }),
       transition.effects.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "Effects" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs uppercase tracking-wider text-[var(--color-muted-foreground)] mb-1", children: "Effects" }),
         /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: transition.effects.map((effect, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-[var(--color-muted-foreground)] w-3 text-right mt-0.5", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-[var(--color-muted-foreground)] w-3 text-right mt-0.5", children: [
             i + 1,
             "."
           ] }),
           /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(AvlEffect, { x: 10, y: 10, effectType: effect.type, size: 8, showBackground: true }) }),
-          /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[var(--color-foreground)]", children: effect.type })
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-foreground)]", children: effect.type })
         ] }, i)) })
       ] })
     ] })
@@ -58121,7 +58125,7 @@ var AvlTransitionEdge = ({
         style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
         children: [
           data?.hasGuard && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rotate-45 border border-amber-500 bg-amber-500/10 shrink-0", title: "Guard" }),
-          /* @__PURE__ */ jsx("div", { className: "px-2 py-0.5 text-[10px] font-medium rounded-full bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-foreground)] truncate max-w-[160px]", children: data?.event ?? "" }),
+          /* @__PURE__ */ jsx("div", { className: "px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-foreground)] truncate max-w-[160px]", children: data?.event ?? "" }),
           data?.hasEffects && /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-violet-500/80 shrink-0", title: "Effects" })
         ]
       }
@@ -58177,7 +58181,7 @@ var AvlEventWireEdge = ({
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "px-2 py-0.5 text-[10px] font-medium rounded-full border truncate max-w-[180px]",
+            className: "px-2 py-0.5 text-xs font-medium rounded-full border truncate max-w-[180px]",
             style: {
               color: wireColor,
               borderColor: wireColor,
@@ -61925,7 +61929,7 @@ var OrbPreviewNodeInner = (props) => {
           /* @__PURE__ */ jsx(
             Box,
             {
-              className: "absolute top-1.5 right-1.5 rounded px-1 py-[1px] text-[8px] font-mono uppercase tracking-wider pointer-events-none",
+              className: "absolute top-1.5 right-1.5 rounded px-1 py-[1px] text-xs font-mono uppercase tracking-wider pointer-events-none",
               style: {
                 backgroundColor: "var(--color-muted)",
                 color: "var(--color-muted-foreground)",
@@ -61945,7 +61949,7 @@ var OrbPreviewNodeInner = (props) => {
               children: /* @__PURE__ */ jsxs(
                 Box,
                 {
-                  className: "rounded-md px-2 py-1 text-[11px] font-medium flex items-center gap-1",
+                  className: "rounded-md px-2 py-1 text-xs font-medium flex items-center gap-1",
                   style: {
                     backgroundColor: "var(--color-card)",
                     color: "var(--color-foreground)",
@@ -61970,7 +61974,7 @@ var OrbPreviewNodeInner = (props) => {
               children: /* @__PURE__ */ jsx(
                 Box,
                 {
-                  className: "rounded-md px-2 py-1 text-[11px] font-semibold",
+                  className: "rounded-md px-2 py-1 text-xs font-semibold",
                   style: {
                     backgroundColor: "var(--color-primary)",
                     color: "var(--color-primary-foreground)",
@@ -62031,12 +62035,12 @@ var OrbPreviewNodeInner = (props) => {
           ),
           /* @__PURE__ */ jsxs(Box, { className: "flex flex-col min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold truncate leading-tight", children: label }),
-            sublabel && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground truncate text-[11px] leading-tight", children: sublabel })
+            sublabel && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground truncate text-xs leading-tight", children: sublabel })
           ] }),
           eventSources.length > 0 && /* @__PURE__ */ jsx(Box, { className: "flex gap-0.5 shrink-0", children: eventSources.slice(0, 3).map((src) => /* @__PURE__ */ jsx(
             Box,
             {
-              className: "rounded-full px-1 py-0 text-[8px] font-medium leading-tight",
+              className: "rounded-full px-1 py-0 text-xs font-medium leading-tight",
               style: {
                 backgroundColor: "#F9731615",
                 color: "#F97316",
@@ -62261,8 +62265,8 @@ var BehaviorComposeNodeInner = (props) => {
         ),
         /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border/40 drag-handle cursor-grab", children: [
           /* @__PURE__ */ jsxs(Box, { className: "flex flex-col min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold truncate leading-tight text-[12px]", children: data.behaviorName }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground truncate text-[10px] leading-tight", children: data.entityName })
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold truncate leading-tight text-xs", children: data.behaviorName }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground truncate text-xs leading-tight", children: data.entityName })
           ] }),
           /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "shrink-0", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[9px] text-inherit", children: data.level }) })
         ] }),
@@ -62286,7 +62290,7 @@ var BehaviorComposeNodeInner = (props) => {
           connectableEvents.slice(0, 4).map((ev) => /* @__PURE__ */ jsx(
             Box,
             {
-              className: "rounded-full px-1.5 py-0 text-[8px] font-medium leading-tight",
+              className: "rounded-full px-1.5 py-0 text-xs font-medium leading-tight",
               style: {
                 backgroundColor: "#F9731615",
                 color: "#F97316",
@@ -62300,7 +62304,7 @@ var BehaviorComposeNodeInner = (props) => {
           connectableEvents.length > 4 && /* @__PURE__ */ jsxs(
             Box,
             {
-              className: "rounded-full px-1.5 py-0 text-[8px] font-medium leading-tight",
+              className: "rounded-full px-1.5 py-0 text-xs font-medium leading-tight",
               style: { color: "var(--color-muted-foreground)" },
               children: [
                 "+",
@@ -62314,7 +62318,7 @@ var BehaviorComposeNodeInner = (props) => {
             data.stateCount,
             " states"
           ] }),
-          data.layer && /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "text-[8px]", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[8px] text-inherit", children: data.layer }) })
+          data.layer && /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "text-xs", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-xs text-inherit", children: data.layer }) })
         ] }),
         /* @__PURE__ */ jsx(
           Handle,
@@ -62664,7 +62668,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
         /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-2", children: selectedPattern ? /* @__PURE__ */ jsx(
           Box,
           {
-            className: "rounded px-2 py-0.5 text-[11px] font-mono font-semibold",
+            className: "rounded px-2 py-0.5 text-xs font-mono font-semibold",
             style: { backgroundColor: "var(--color-primary)", color: "var(--color-primary-foreground)" },
             children: headerTitle
           }
@@ -62683,7 +62687,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
         "button",
         {
           onClick: () => setActiveTab(tab),
-          className: `pb-2 text-[12px] font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 capitalize ${activeTab === tab ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
+          className: `pb-2 text-xs font-medium border-b-2 cursor-pointer bg-transparent border-x-0 border-t-0 px-0 capitalize ${activeTab === tab ? "border-[var(--color-primary)] text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
           children: tab
         },
         tab
@@ -62730,7 +62734,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
       /* ── Inspector Tab ── */
       /* @__PURE__ */ jsxs(Fragment, { children: [
         selectedPattern && patternDef?.propsSchema && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Props") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: t("Props") }),
           /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1.5", children: Object.entries(patternDef.propsSchema).slice(0, 12).map(([propName, propSchema]) => {
             const ps = propSchema;
             const explicitValue = patternConfig ? patternConfig[propName] : void 0;
@@ -62747,16 +62751,16 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
               isImplicit: String(isImplicit)
             }));
             return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-20 shrink-0 font-mono", children: propName }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs w-20 shrink-0 font-mono", children: propName }),
               editable ? /* @__PURE__ */ jsx(
                 Input,
                 {
                   defaultValue: displayValue,
                   placeholder: ps.types?.join(" | ") ?? "string",
-                  className: "flex-1 text-[11px] h-6",
+                  className: "flex-1 text-xs h-6",
                   onBlur: (e) => handlePropChange(propName, e.target.value)
                 }
-              ) : /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
+              ) : /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-xs text-muted-foreground", children: [
                 displayValue || "\u2014",
                 ps.required ? " *" : ""
               ] })
@@ -62764,11 +62768,11 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
           }) })
         ] }),
         userType === "architect" && (selectedPattern && isEntityPattern || !selectedPattern && !isExpanded) && entity && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Entity") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: t("Entity") }),
           /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx("circle", { cx: 7, cy: 7, r: 5, fill: "var(--color-primary)" }) }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: entity.name }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: entity.persistence })
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-xs", children: entity.name }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: entity.persistence })
           ] }),
           /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: entity.fields.map((f3) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
             /* @__PURE__ */ jsx("svg", { width: 12, height: 12, children: /* @__PURE__ */ jsx(AvlFieldType, { x: 6, y: 6, kind: FIELD_TYPE_MAP[f3.type] ?? "string", size: 4 }) }),
@@ -62777,7 +62781,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
                 Input,
                 {
                   defaultValue: f3.name,
-                  className: "flex-1 text-[11px] font-mono h-6",
+                  className: "flex-1 text-xs font-mono h-6",
                   onBlur: (e) => {
                     if (e.target.value !== f3.name) {
                       handleUpdateField(f3.name, { name: e.target.value });
@@ -62791,7 +62795,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
                   value: f3.type,
                   options: FIELD_TYPE_OPTIONS,
                   onChange: (e) => handleUpdateField(f3.name, { type: e.target.value }),
-                  className: "w-20 text-[10px] h-6"
+                  className: "w-20 text-xs h-6"
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -62805,8 +62809,8 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
                 }
               )
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-mono flex-1", children: f3.name }),
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: f3.type }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-xs font-mono flex-1", children: f3.name }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: f3.type }),
               f3.required && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary text-[9px]", children: t("req") })
             ] })
           ] }, f3.name)) }),
@@ -62816,7 +62820,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
               variant: "ghost",
               size: "sm",
               onClick: handleAddField,
-              className: "mt-2 text-[11px] w-full",
+              className: "mt-2 text-xs w-full",
               children: [
                 /* @__PURE__ */ jsx(Icon, { name: "plus", size: "xs", className: "mr-1" }),
                 t("Add Field")
@@ -62825,14 +62829,14 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
           )
         ] }),
         editable && !selectedPattern && !isExpanded && node.layer === "Services" && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Service Mode") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: t("Service Mode") }),
           /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
             /* @__PURE__ */ jsxs(
               Button,
               {
                 variant: hasRenderUi ? "primary" : "ghost",
                 size: "sm",
-                className: "flex-1 text-[11px]",
+                className: "flex-1 text-xs",
                 onClick: () => {
                   if (!hasRenderUi) eventBus.emit("UI:SERVICE_MODE_TOGGLE", { orbitalName: node.orbitalName, standalone: true });
                 },
@@ -62847,7 +62851,7 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
               {
                 variant: hasRenderUi ? "ghost" : "primary",
                 size: "sm",
-                className: "flex-1 text-[11px]",
+                className: "flex-1 text-xs",
                 onClick: () => {
                   if (hasRenderUi) eventBus.emit("UI:SERVICE_MODE_TOGGLE", { orbitalName: node.orbitalName, standalone: false });
                 },
@@ -62858,34 +62862,34 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] mt-1", children: hasRenderUi ? t("Renders its own UI") : t("Headless, wired to other behaviors") })
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs mt-1", children: hasRenderUi ? t("Renders its own UI") : t("Headless, wired to other behaviors") })
         ] }),
         !selectedPattern && !isExpanded && traits2.length > 0 && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Traits" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: "Traits" }),
           /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t2) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-semibold", children: t2.name }),
-            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-xs font-semibold", children: t2.name }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
               t2.stateCount,
               " states"
             ] })
           ] }, t2.name)) })
         ] }),
         isExpanded && fromState && toState && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Transition" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: "Transition" }),
           /* @__PURE__ */ jsxs("svg", { width: "100%", height: 44, viewBox: "0 0 280 44", children: [
             /* @__PURE__ */ jsx(AvlState, { x: 8, y: 8, name: fromState, role: getStateRole(fromState), width: 90, height: 26 }),
             /* @__PURE__ */ jsx("line", { x1: 104, y1: 21, x2: 158, y2: 21, stroke: "#1E293B", strokeWidth: 2, markerEnd: "url(#orb-arrow)" }),
             /* @__PURE__ */ jsx(AvlState, { x: 164, y: 8, name: toState, role: getStateRole(toState), width: 90, height: 26 }),
             /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "orb-arrow", markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: "#1E293B" }) }) })
           ] }),
-          traitName && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: [
+          traitName && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
             traitName,
             entityName ? ` on ${entityName}` : ""
           ] })
         ] }),
         isExpanded && transitionEvent && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEvent, { x: 8, y: 8, size: 12 }) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: transitionEvent })
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-xs", children: transitionEvent })
         ] }) }),
         userType === "architect" && (transition?.guard ?? guard ?? editable) && isExpanded && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlGuard, { x: 8, y: 8, size: 12 }) }),
@@ -62894,13 +62898,13 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
             {
               defaultValue: formatExpression(transition?.guard ?? guard),
               placeholder: t("Guard expression"),
-              className: "flex-1 text-[11px] font-mono h-6",
+              className: "flex-1 text-xs font-mono h-6",
               onBlur: (e) => handleGuardChange(e.target.value)
             }
-          ) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
+          ) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-xs text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
         ] }) }),
         userType === "architect" && (effectTypes.length > 0 || editable) && isExpanded && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
-          /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: [
             t("Effects"),
             " (",
             effectTypes.length,
@@ -62911,12 +62915,12 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
             const category = EFFECT_TYPE_TO_CATEGORY[type];
             const catColor = category ? EFFECT_CATEGORY_COLORS[category] : void 0;
             return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
-              /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-4 text-right shrink-0", children: [
+              /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs w-4 text-right shrink-0", children: [
                 i + 1,
                 "."
               ] }),
               isKnown && /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEffect, { x: 8, y: 8, effectType: type, size: 6, showBackground: true }) }),
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] flex-1", style: { color: catColor?.color }, children: effectSummary(type) }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-xs flex-1", style: { color: catColor?.color }, children: effectSummary(type) }),
               editable && /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -62932,9 +62936,9 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
           editable && /* @__PURE__ */ jsx(AddEffectButton, { onAdd: handleAddEffect })
         ] }),
         userType === "architect" && patterns.length > 0 && !selectedPattern && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "render-ui" }),
-          /* @__PURE__ */ jsx(Box, { className: "bg-muted/20 rounded-md p-3 font-mono text-[11px] leading-relaxed overflow-x-auto", children: patterns.map((entry, i) => /* @__PURE__ */ jsxs(Box, { children: [
-            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: "render-ui" }),
+          /* @__PURE__ */ jsx(Box, { className: "bg-muted/20 rounded-md p-3 font-mono text-xs leading-relaxed overflow-x-auto", children: patterns.map((entry, i) => /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
               "slot: ",
               entry.slot
             ] }),
@@ -62955,7 +62959,7 @@ function AddEffectButton({ onAdd }) {
         variant: "ghost",
         size: "sm",
         onClick: () => setOpen((prev) => !prev),
-        className: "text-[11px] w-full",
+        className: "text-xs w-full",
         children: [
           /* @__PURE__ */ jsx(Icon, { name: "plus", size: "xs", className: "mr-1" }),
           t("Add Effect")
@@ -62965,14 +62969,14 @@ function AddEffectButton({ onAdd }) {
     open && /* @__PURE__ */ jsx(Box, { className: "absolute z-20 top-full left-0 right-0 mt-1 bg-card border border-border rounded-md shadow-lg overflow-hidden", children: EFFECT_TYPE_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
       Box,
       {
-        className: "px-3 py-1.5 text-[11px] cursor-pointer hover:bg-muted/50 flex items-center gap-2",
+        className: "px-3 py-1.5 text-xs cursor-pointer hover:bg-muted/50 flex items-center gap-2",
         onClick: () => {
           onAdd(opt.value);
           setOpen(false);
         },
         children: [
           KNOWN_EFFECTS.has(opt.value) && /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx(AvlEffect, { x: 7, y: 7, effectType: opt.value, size: 5, showBackground: true }) }),
-          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px]", children: opt.label })
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-xs", children: opt.label })
         ]
       },
       opt.value
@@ -62985,14 +62989,14 @@ function OrbPatternTree({ config, depth }) {
   if (typeof type !== "string") return null;
   const propEntries = Object.entries(props).filter(([k]) => k !== "type");
   return /* @__PURE__ */ jsxs(Box, { style: { paddingLeft: depth * 12 }, children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary font-semibold text-[11px]", children: type }),
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary font-semibold text-xs", children: type }),
     propEntries.slice(0, 5).map(([key, val]) => {
       const display = typeof val === "string" ? val.startsWith("@") ? /* @__PURE__ */ jsx("span", { className: "text-purple-500", children: val }) : `"${val}"` : Array.isArray(val) && typeof val[0] === "string" && val[0].includes("/") ? /* @__PURE__ */ jsxs("span", { className: "text-amber-600", children: [
         "(",
         val.join(" "),
         ")"
       ] }) : String(val);
-      return /* @__PURE__ */ jsxs(Box, { className: "flex gap-1 text-[10px]", children: [
+      return /* @__PURE__ */ jsxs(Box, { className: "flex gap-1 text-xs", children: [
         /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
           key,
           ":"
@@ -63019,7 +63023,7 @@ var PHASE_2_TOKEN_FALLBACK = {
 function StylesTab({ patternType, patternDef, patternConfig, editable, onPropChange, themeManifest, isDesignSystem }) {
   const { t } = useTranslate();
   if (!patternType) {
-    return /* @__PURE__ */ jsx(Box, { className: "p-4", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px]", children: t("Select a pattern to view its style tokens.") }) });
+    return /* @__PURE__ */ jsx(Box, { className: "p-4", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: t("Select a pattern to view its style tokens.") }) });
   }
   const tier = patternDef?.category ?? "Pattern";
   const tokens = PHASE_2_TOKEN_FALLBACK[patternType] ?? [];
@@ -63029,7 +63033,7 @@ function StylesTab({ patternType, patternDef, patternConfig, editable, onPropCha
   const currentSize = patternConfig && typeof patternConfig.size === "string" ? patternConfig.size : void 0;
   return /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 flex flex-col gap-4", children: [
     /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: patternType }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-xs", children: patternType }),
       /* @__PURE__ */ jsx(
         Box,
         {
@@ -63040,11 +63044,11 @@ function StylesTab({ patternType, patternDef, patternConfig, editable, onPropCha
       )
     ] }),
     /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Tokens") }),
-      tokens.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] italic", children: t("No token contract declared for this pattern.") }) : /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: tokens.map((token) => /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px]", children: token }) }, token)) })
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: t("Tokens") }),
+      tokens.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs italic", children: t("No token contract declared for this pattern.") }) : /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: tokens.map((token) => /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-xs", children: token }) }, token)) })
     ] }),
     variantEnum && variantEnum.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Variant") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: t("Variant") }),
       /* @__PURE__ */ jsx(Box, { className: "flex flex-wrap gap-1", children: variantEnum.map((variant) => {
         const isActive = variant === currentVariant || !currentVariant && variant === "default";
         return /* @__PURE__ */ jsx(
@@ -63052,7 +63056,7 @@ function StylesTab({ patternType, patternDef, patternConfig, editable, onPropCha
           {
             as: editable ? "button" : "div",
             onClick: editable ? () => onPropChange("variant", variant) : void 0,
-            className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
+            className: `rounded px-2 py-0.5 text-xs font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
             style: {
               backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
               color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -63064,7 +63068,7 @@ function StylesTab({ patternType, patternDef, patternConfig, editable, onPropCha
       }) })
     ] }),
     sizeEnum && sizeEnum.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Size") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: t("Size") }),
       /* @__PURE__ */ jsx(Box, { className: "flex flex-wrap gap-1", children: sizeEnum.map((size) => {
         const isActive = size === currentSize || !currentSize && size === "md";
         return /* @__PURE__ */ jsx(
@@ -63072,7 +63076,7 @@ function StylesTab({ patternType, patternDef, patternConfig, editable, onPropCha
           {
             as: editable ? "button" : "div",
             onClick: editable ? () => onPropChange("size", size) : void 0,
-            className: `rounded px-2 py-0.5 text-[11px] font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
+            className: `rounded px-2 py-0.5 text-xs font-mono ${editable ? "cursor-pointer hover:opacity-80 transition-opacity" : ""}`,
             style: {
               backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted)",
               color: isActive ? "var(--color-primary-foreground)" : "var(--color-muted-foreground)"
@@ -63095,12 +63099,12 @@ var TOKEN_GROUPS = [
 function TokenEditorSection({ themeManifest, onPropChange }) {
   const tokens = themeManifest.tokens ?? {};
   return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-3 pt-2 border-t border-border/40", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Project theme tokens" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-xs uppercase tracking-wider text-muted-foreground", children: "Project theme tokens" }),
     TOKEN_GROUPS.map(({ group, label }) => {
       const entries = Object.entries(tokens[group] ?? {});
       if (entries.length === 0) return null;
       return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[10px] font-mono text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-xs font-mono text-muted-foreground", children: label }),
         entries.map(([key, value]) => /* @__PURE__ */ jsx(
           TokenRow,
           {
@@ -63125,13 +63129,13 @@ function TokenRow({ group, tokenKey, value, isColor, onPropChange }) {
         style: { backgroundColor: value }
       }
     ),
-    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground w-24 shrink-0 truncate", children: tokenKey }),
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-xs text-muted-foreground w-24 shrink-0 truncate", children: tokenKey }),
     /* @__PURE__ */ jsx(
       Input,
       {
         value,
         onChange: (e) => onPropChange(`__token__.${group}.${tokenKey}`, e.target.value),
-        className: "flex-1 text-[11px] font-mono"
+        className: "flex-1 text-xs font-mono"
       }
     )
   ] });
@@ -63736,7 +63740,7 @@ function FlowCanvasInner({
                           reactFlow.fitView({ duration: 300, padding: 0.25 });
                         });
                       },
-                      className: `px-2 py-1 text-[11px] font-medium rounded cursor-pointer border-none transition-colors ${active ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
+                      className: `px-2 py-1 text-xs font-medium rounded cursor-pointer border-none transition-colors ${active ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50"}`,
                       title: `${p2.label} (${p2.width}px)`,
                       "aria-label": `Switch to ${p2.label} view`,
                       children: p2.label
@@ -63814,7 +63818,7 @@ var ZoomBreadcrumb = ({
   if (eventName && band === "detail") {
     segments.push({ icon: "\u26A1", label: eventName });
   }
-  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1 px-2 py-1 rounded-md bg-card/90 border border-border text-[11px] text-muted-foreground backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React98__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1 px-2 py-1 rounded-md bg-card/90 border border-border text-xs text-muted-foreground backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React98__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-40", children: ">" }),
     /* @__PURE__ */ jsx("span", { className: "opacity-60", children: seg.icon }),
     /* @__PURE__ */ jsx("span", { children: seg.label })
@@ -63866,11 +63870,11 @@ var ZoomLegend = ({ band }) => {
       "button",
       {
         onClick: () => setCollapsed(!collapsed),
-        className: "px-2 py-1 text-[10px] rounded-md bg-card/90 border border-border text-muted-foreground backdrop-blur-sm cursor-pointer hover:bg-card",
+        className: "px-2 py-1 text-xs rounded-md bg-card/90 border border-border text-muted-foreground backdrop-blur-sm cursor-pointer hover:bg-card",
         children: collapsed ? "Legend" : "Hide"
       }
     ),
-    !collapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 px-2 py-1.5 rounded-md bg-card/95 border border-border backdrop-blur-sm space-y-0.5", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [
+    !collapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 px-2 py-1.5 rounded-md bg-card/95 border border-border backdrop-blur-sm space-y-0.5", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { className: "opacity-70 w-6 text-center", children: item.icon }),
       /* @__PURE__ */ jsx("span", { children: item.label })
     ] }, i)) })