@almadar/ui 5.123.0 → 5.125.0

package/dist/providers/index.js

@@ -4623,15 +4623,15 @@ var init_TextHighlight = __esm({
       const typeStyles = {
         question: cn(
           // Blue border for questions
-          "bg-card border-b-2 border-primary-600",
+          "bg-card border-b-2 border-primary",
           "hover:bg-muted",
-          isActive && "bg-primary-100 ring-2 ring-primary-600"
+          isActive && "bg-primary/10 ring-2 ring-primary"
         ),
         note: cn(
           // Yellow border for notes
-          "bg-card border-b-2 border-amber-500",
+          "bg-card border-b-2 border-warning",
           "hover:bg-muted",
-          isActive && "bg-amber-100 ring-2 ring-amber-500"
+          isActive && "bg-warning/10 ring-2 ring-warning"
         )
       };
       return /* @__PURE__ */ jsx(
@@ -4977,7 +4977,7 @@ function DayCell({
     {
       className: cn(
         "p-2 text-center cursor-pointer hover:bg-muted transition-colors",
-        isToday && "bg-blue-500/10",
+        isToday && "bg-primary/10",
         className
       ),
       onClick: handleClick,
@@ -4988,7 +4988,7 @@ function DayCell({
             variant: "small",
             className: cn(
               "font-medium",
-              isToday ? "text-blue-600" : "text-muted-foreground"
+              isToday ? "text-primary" : "text-muted-foreground"
             ),
             children: dayAbbr
           }
@@ -5000,7 +5000,7 @@ function DayCell({
             rounded: "full",
             className: cn(
               "h-8 w-8 mx-auto items-center justify-center",
-              isToday && "bg-blue-600 text-white"
+              isToday && "bg-primary text-primary-foreground"
             ),
             children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "font-semibold", children: safeDate.getDate() })
           }
@@ -12505,19 +12505,19 @@ var init_ActivationBlock = __esm({
         "div",
         {
           className: cn(
-            "bg-indigo-50 dark:bg-indigo-900/20 border-2 border-indigo-200 dark:border-indigo-800 rounded-lg p-5 mb-6",
+            "bg-primary/10 border-2 border-primary rounded-lg p-5 mb-6",
             className
           ),
           children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(Lightbulb, { className: "text-indigo-600 dark:text-indigo-400 flex-shrink-0 mt-1", size: 24 }),
+            /* @__PURE__ */ jsx(Lightbulb, { className: "text-primary flex-shrink-0 mt-1", size: 24 }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-indigo-900 dark:text-indigo-100 mb-2", children: "Before You Begin..." }),
-              /* @__PURE__ */ jsx("p", { className: "text-gray-700 dark:text-gray-300 mb-3 text-sm md:text-base", children: question }),
+              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-primary mb-2", children: "Before You Begin..." }),
+              /* @__PURE__ */ jsx("p", { className: "text-foreground mb-3 text-sm md:text-base", children: question }),
               isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "textarea",
                   {
-                    className: "w-full p-3 border border-indigo-300 dark:border-indigo-700 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent text-sm",
+                    className: "w-full p-3 border border-input rounded-md bg-card text-foreground focus:ring-2 focus:ring-ring focus:border-transparent text-sm",
                     placeholder: "Jot down your thoughts...",
                     value: response,
                     onChange: (e) => setResponse(e.target.value),
@@ -12529,7 +12529,7 @@ var init_ActivationBlock = __esm({
                     "button",
                     {
                       onClick: handleSubmit,
-                      className: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 text-sm font-medium transition-colors",
+                      className: "px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary-hover text-sm font-medium transition-colors",
                       children: "Continue to Lesson \u2192"
                     }
                   ),
@@ -12540,7 +12540,7 @@ var init_ActivationBlock = __esm({
                         emit(`UI:${saveEvent}`, { response: "" });
                         setIsExpanded(false);
                       },
-                      className: "px-4 py-2 text-indigo-600 dark:text-indigo-400 hover:underline text-sm",
+                      className: "px-4 py-2 text-primary hover:underline text-sm",
                       children: "Skip for now"
                     }
                   )
@@ -12549,7 +12549,7 @@ var init_ActivationBlock = __esm({
                 "button",
                 {
                   onClick: () => setIsExpanded(true),
-                  className: "text-sm text-indigo-600 dark:text-indigo-400 hover:underline font-medium",
+                  className: "text-sm text-primary hover:underline font-medium",
                   children: "\u2713 Answered \xB7 Edit response"
                 }
               )
@@ -13053,7 +13053,7 @@ var init_AuthLayout = __esm({
           VStack,
           {
             className: cn(
-              "hidden lg:flex lg:w-1/2 bg-primary-600 relative overflow-hidden",
+              "hidden lg:flex lg:w-1/2 bg-primary relative overflow-hidden",
               "justify-between p-12"
             ),
             style: backgroundImage ? {
@@ -13062,7 +13062,7 @@ var init_AuthLayout = __esm({
             } : void 0,
             gap: "none",
             children: [
-              /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary-600/90 to-primary-800/90" }),
+              /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary/90 to-primary-hover/90" }),
               /* @__PURE__ */ jsx(Box, { className: "relative z-10", children: /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-3", children: [
                 logo || /* @__PURE__ */ jsx(Box, { className: "w-10 h-10 bg-[var(--color-card)]/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsx(
                   Typography,
@@ -13147,7 +13147,7 @@ var init_AuthLayout = __esm({
             ),
             children: /* @__PURE__ */ jsxs(Box, { className: "w-full max-w-md", children: [
               /* @__PURE__ */ jsx(Box, { className: "lg:hidden mb-8 text-center", children: /* @__PURE__ */ jsxs(Link, { to: "/", className: "inline-flex items-center gap-3", children: [
-                logo || /* @__PURE__ */ jsx(Box, { className: "w-12 h-12 bg-primary-600 rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                logo || /* @__PURE__ */ jsx(Box, { className: "w-12 h-12 bg-primary rounded-xl flex items-center justify-center", children: /* @__PURE__ */ jsx(
                   Typography,
                   {
                     variant: "body1",
@@ -15138,7 +15138,7 @@ var init_CodeBlock = __esm({
             {
               justify: "between",
               align: "center",
-              className: "px-3 py-2 bg-[var(--color-card)] rounded-t-lg border-b border-gray-700",
+              className: "px-3 py-2 bg-[var(--color-card)] rounded-t-lg border-b border-border",
               children: [
                 showLanguageBadge && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: language }),
                 effectiveCopy && /* @__PURE__ */ jsx(
@@ -15147,9 +15147,9 @@ var init_CodeBlock = __esm({
                     variant: "ghost",
                     size: "sm",
                     onClick: handleCopy,
-                    className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-white",
+                    className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-foreground",
                     "aria-label": t("common.copy"),
-                    children: copied ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "w-4 h-4 text-green-400" }) : /* @__PURE__ */ jsx(Icon, { name: "copy", className: "w-4 h-4" })
+                    children: copied ? /* @__PURE__ */ jsx(Icon, { name: "check", className: "w-4 h-4 text-success" }) : /* @__PURE__ */ jsx(Icon, { name: "copy", className: "w-4 h-4" })
                   }
                 )
               ]
@@ -15517,12 +15517,12 @@ var init_BloomQuizBlock = __esm({
     init_useEventBus();
     init_cn();
     BLOOM_CONFIG = {
-      remember: { color: "bg-gray-500", bgColor: "bg-gray-50 dark:bg-gray-900/30", label: "Remember" },
-      understand: { color: "bg-blue-500", bgColor: "bg-blue-50 dark:bg-blue-900/30", label: "Understand" },
-      apply: { color: "bg-green-500", bgColor: "bg-green-50 dark:bg-green-900/30", label: "Apply" },
-      analyze: { color: "bg-yellow-500", bgColor: "bg-yellow-50 dark:bg-yellow-900/30", label: "Analyze" },
-      evaluate: { color: "bg-orange-500", bgColor: "bg-orange-50 dark:bg-orange-900/30", label: "Evaluate" },
-      create: { color: "bg-purple-500", bgColor: "bg-purple-50 dark:bg-purple-900/30", label: "Create" }
+      remember: { color: "bg-secondary text-secondary-foreground", bgColor: "bg-muted", label: "Remember" },
+      understand: { color: "bg-info text-info-foreground", bgColor: "bg-info/10", label: "Understand" },
+      apply: { color: "bg-success text-success-foreground", bgColor: "bg-success/10", label: "Apply" },
+      analyze: { color: "bg-warning text-warning-foreground", bgColor: "bg-warning/10", label: "Analyze" },
+      evaluate: { color: "bg-accent text-accent-foreground", bgColor: "bg-accent/10", label: "Evaluate" },
+      create: { color: "bg-primary text-primary-foreground", bgColor: "bg-primary/10", label: "Create" }
     };
     BloomQuizBlock = ({
       level,
@@ -15548,22 +15548,22 @@ var init_BloomQuizBlock = __esm({
         "div",
         {
           className: cn(
-            "rounded-lg border border-indigo-100 dark:border-indigo-800 p-4 my-4 transition-all",
+            "rounded-lg border border-primary p-4 my-4 transition-all",
             config.bgColor,
             className
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                index !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-gray-500 dark:text-gray-400 font-medium text-sm", children: [
+                index !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground font-medium text-sm", children: [
                   "Question ",
                   index + 1
                 ] }),
-                /* @__PURE__ */ jsx("span", { className: cn(config.color, "text-white text-xs px-2 py-1 rounded-full font-medium"), children: config.label })
+                /* @__PURE__ */ jsx("span", { className: cn(config.color, "text-xs px-2 py-1 rounded-full font-medium"), children: config.label })
               ] }),
-              isAnswered && /* @__PURE__ */ jsx(CheckCircle, { className: "text-green-600 dark:text-green-400 flex-shrink-0", size: 20 })
+              isAnswered && /* @__PURE__ */ jsx(CheckCircle, { className: "text-success flex-shrink-0", size: 20 })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "font-semibold text-indigo-900 dark:text-indigo-200 mb-3 space-y-2", children: questionSegments.map(
+            /* @__PURE__ */ jsx("div", { className: "font-semibold text-primary mb-3 space-y-2", children: questionSegments.map(
               (segment, idx) => segment.type === "markdown" ? /* @__PURE__ */ jsx(MarkdownContent, { content: segment.content }, `q-md-${idx}`) : /* @__PURE__ */ jsx(
                 CodeBlock,
                 {
@@ -15577,13 +15577,13 @@ var init_BloomQuizBlock = __esm({
               "button",
               {
                 type: "button",
-                className: "inline-flex items-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors",
+                className: "inline-flex items-center rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary-hover transition-colors",
                 onClick: handleReveal,
                 children: revealed ? "Hide Answer" : "Reveal Answer"
               }
             ),
-            revealed && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-white/80 dark:bg-gray-800/80 p-3 text-sm text-slate-800 dark:text-gray-200 shadow-sm border border-indigo-100 dark:border-indigo-800 mt-3 space-y-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-600 dark:text-gray-400 mb-1 font-medium uppercase tracking-wide", children: "Answer:" }),
+            revealed && /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-card/80 p-3 text-sm text-foreground shadow-sm border border-primary mt-3 space-y-2", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground mb-1 font-medium uppercase tracking-wide", children: "Answer:" }),
               answerSegments.map(
                 (segment, idx) => segment.type === "markdown" ? /* @__PURE__ */ jsx(MarkdownContent, { content: segment.content }, `a-md-${idx}`) : /* @__PURE__ */ jsx(
                   CodeBlock,
@@ -15857,12 +15857,12 @@ var init_QuizBlock = __esm({
     }) => {
       const { t } = useTranslate();
       const [revealed, setRevealed] = useState(false);
-      return /* @__PURE__ */ jsx(Card2, { className: cn("my-4 border-blue-200 dark:border-blue-800", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-4", children: [
+      return /* @__PURE__ */ jsx(Card2, { className: cn("my-4 border-primary", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-4", children: [
         /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", children: [
-          /* @__PURE__ */ jsx(Icon, { icon: HelpCircle, size: "sm", className: "text-blue-500 mt-0.5 shrink-0" }),
+          /* @__PURE__ */ jsx(Icon, { icon: HelpCircle, size: "sm", className: "text-primary mt-0.5 shrink-0" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", className: "font-medium", children: question })
         ] }),
-        revealed ? /* @__PURE__ */ jsx(Box, { className: "pl-7 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-foreground", children: answer }) }) : null,
+        revealed ? /* @__PURE__ */ jsx(Box, { className: "pl-7 pt-2 border-t border-border", children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-foreground", children: answer }) }) : null,
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -17774,7 +17774,7 @@ var init_BookTableOfContents = __esm({
                       className: cn(
                         "justify-start text-left w-full",
                         direction === "rtl" && "text-right",
-                        isCurrent && "bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400"
+                        isCurrent && "bg-primary/10 text-primary"
                       ),
                       children: /* @__PURE__ */ jsx(Box, { className: "truncate", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: String(chapter.title ?? "") }) })
                     },
@@ -19022,7 +19022,7 @@ function CalendarGrid({
         border: true,
         className: cn(
           "cursor-pointer hover:shadow-sm transition-shadow text-xs truncate",
-          color ? color : "bg-blue-500/15 border-blue-500/30 text-blue-600"
+          color ? color : "bg-primary/10 border-primary/30 text-primary"
         ),
         onClick: (e) => handleEventClick(event, e),
         children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "truncate font-medium", children: event.title })
@@ -19120,7 +19120,7 @@ function CalendarGrid({
                       onClick: () => handleSlotClick(day, time),
                       className: cn(
                         "border-l border-border",
-                        isToday && "bg-blue-50/30"
+                        isToday && "bg-primary/10"
                       ),
                       ...longPressEvent ? {
                         onPointerDown: () => startLongPress(day, time),
@@ -21136,31 +21136,31 @@ var init_CodeRunnerPanel = __esm({
             }
           )
         ] }),
-        hasOutput && /* @__PURE__ */ jsxs(Box, { className: "rounded-lg border border-gray-700 bg-[#0d0d0d] overflow-hidden", children: [
+        hasOutput && /* @__PURE__ */ jsxs(Box, { className: "rounded-lg border border-border bg-foreground overflow-hidden", children: [
           /* @__PURE__ */ jsxs(
             HStack,
             {
               gap: "sm",
               align: "center",
-              className: "px-3 py-2 bg-gray-800 border-b border-gray-700",
+              className: "px-3 py-2 bg-card border-b border-border",
               children: [
-                /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-gray-400" }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-300 font-medium", children: "Output" })
+                /* @__PURE__ */ jsx(Terminal, { size: 16, className: "text-muted-foreground" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground font-medium", children: "Output" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx(VStack, { gap: "none", className: "p-3 font-mono text-sm", children: error ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            output?.stdout ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-200 whitespace-pre-wrap", children: output.stdout }) : null,
-            output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-400 whitespace-pre-wrap", children: output.stderr }) : null,
-            !output?.stdout && !output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 italic", children: "No output" }) : null,
-            output && output.testResults.length > 0 && /* @__PURE__ */ jsx(Box, { className: "mt-3 pt-3 border-t border-gray-700 space-y-2", children: output.testResults.map((test, index) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", className: "text-xs", children: [
-              test.passed ? /* @__PURE__ */ jsx(CheckCircle, { size: 14, className: "text-green-400 mt-0.5" }) : /* @__PURE__ */ jsx(XCircle, { size: 14, className: "text-red-400 mt-0.5" }),
+          /* @__PURE__ */ jsx(VStack, { gap: "none", className: "p-3 font-mono text-sm", children: error ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-error whitespace-pre-wrap", children: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            output?.stdout ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-background whitespace-pre-wrap", children: output.stdout }) : null,
+            output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-error whitespace-pre-wrap", children: output.stderr }) : null,
+            !output?.stdout && !output?.stderr ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-background italic", children: "No output" }) : null,
+            output && output.testResults.length > 0 && /* @__PURE__ */ jsx(Box, { className: "mt-3 pt-3 border-t border-border space-y-2", children: output.testResults.map((test, index) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", className: "text-xs", children: [
+              test.passed ? /* @__PURE__ */ jsx(CheckCircle, { size: 14, className: "text-success mt-0.5" }) : /* @__PURE__ */ jsx(XCircle, { size: 14, className: "text-error mt-0.5" }),
               /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1", children: [
                 /* @__PURE__ */ jsxs(
                   Typography,
                   {
                     variant: "small",
-                    className: test.passed ? "text-green-400" : "text-red-400",
+                    className: test.passed ? "text-success" : "text-error",
                     children: [
                       "Test ",
                       index + 1,
@@ -21169,15 +21169,15 @@ var init_CodeRunnerPanel = __esm({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Input: ",
                   test.input
                 ] }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Expected: ",
                   test.expectedOutput
                 ] }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-400", children: [
+                /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-background", children: [
                   "Actual: ",
                   test.actualOutput
                 ] })
@@ -21362,14 +21362,14 @@ var init_ConnectionBlock = __esm({
       "div",
       {
         className: cn(
-          "bg-emerald-50 dark:bg-emerald-900/20 border-l-4 border-emerald-500 rounded-r-lg p-5 mb-6",
+          "bg-success/10 border-l-4 border-success rounded-r-lg p-5 mb-6",
           className
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx(Link2, { className: "text-emerald-600 dark:text-emerald-400 flex-shrink-0 mt-1", size: 20 }),
+          /* @__PURE__ */ jsx(Link2, { className: "text-success flex-shrink-0 mt-1", size: 20 }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-emerald-900 dark:text-emerald-100 mb-2", children: "Building On What You Know" }),
-            /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert prose-sm max-w-none text-gray-700 dark:text-gray-300", children: /* @__PURE__ */ jsx(MarkdownContent, { content }) })
+            /* @__PURE__ */ jsx("h4", { className: "font-semibold text-success mb-2", children: "Building On What You Know" }),
+            /* @__PURE__ */ jsx("div", { className: "prose dark:prose-invert prose-sm max-w-none text-foreground", children: /* @__PURE__ */ jsx(MarkdownContent, { content }) })
           ] })
         ] })
       }
@@ -21456,7 +21456,7 @@ function CounterStandard({
         variant: "h1",
         className: cn(
           sizeStyles8[size].display,
-          "font-bold tabular-nums text-primary-600"
+          "font-bold tabular-nums text-primary"
         ),
         children: resolved.count
       }
@@ -21529,7 +21529,7 @@ function CounterFull({
           variant: "h1",
           className: cn(
             sizeStyles8[size].display,
-            "font-bold tabular-nums text-primary-600"
+            "font-bold tabular-nums text-primary"
           ),
           children: resolved.count
         }
@@ -21790,11 +21790,11 @@ var init_DashboardLayout = __esm({
                       className: "h-16 px-4 border-b border-border dark:border-border",
                       children: [
                         /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2", children: [
-                          logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                          logo || /* @__PURE__ */ jsx(Box, { className: "w-8 h-8 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
                             Typography,
                             {
                               variant: "small",
-                              className: "text-white font-bold text-sm",
+                              className: "text-primary-foreground font-bold text-sm",
                               as: "span",
                               children: appName.charAt(0).toUpperCase()
                             }
@@ -21873,11 +21873,11 @@ var init_DashboardLayout = __esm({
                             className: "hidden @md/dashboard:flex items-center gap-1 overflow-x-auto",
                             children: [
                               /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-2 mr-3 shrink-0", children: [
-                                logo || /* @__PURE__ */ jsx(Box, { className: "w-7 h-7 bg-primary-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                                logo || /* @__PURE__ */ jsx(Box, { className: "w-7 h-7 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx(
                                   Typography,
                                   {
                                     variant: "small",
-                                    className: "text-white font-bold text-xs",
+                                    className: "text-primary-foreground font-bold text-xs",
                                     as: "span",
                                     children: appName.charAt(0).toUpperCase()
                                   }
@@ -21937,8 +21937,8 @@ 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-xs font-semibold text-white flex items-center justify-center",
-                                      action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
+                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-xs font-semibold flex items-center justify-center",
+                                      action.variant === "danger" ? "bg-error text-error-foreground" : action.variant === "primary" ? "bg-primary text-primary-foreground" : "bg-foreground text-background"
                                     ),
                                     children: action.badge
                                   }
@@ -21960,7 +21960,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-xs 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-error-foreground flex items-center justify-center",
                                     children: unreadCount > 99 ? "99+" : unreadCount
                                   }
                                 )
@@ -22243,7 +22243,7 @@ function SubMenu({
             ),
             children: [
               item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-red-600"), children: item.label }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: cn("flex-1", isDanger && "text-error"), children: item.label }),
               item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs font-medium", children: item.badge })
             ]
           },
@@ -22300,7 +22300,7 @@ function MenuItemRow({
             Typography,
             {
               variant: "small",
-              className: cn("flex-1", isDanger && "text-red-600"),
+              className: cn("flex-1", isDanger && "text-error"),
               children: item.label
             }
           ),
@@ -23068,20 +23068,24 @@ function DataGrid({
   const bodyFields = fieldDefs.filter((f3) => f3 !== titleField && !badgeFields.includes(f3));
   const primaryActions = actionDefs.filter((a) => a.variant !== "danger");
   const dangerActions = actionDefs.filter((a) => a.variant === "danger");
-  const handleActionClick = (action, itemData) => (e) => {
-    e.stopPropagation();
-    const payload = {
-      id: itemData.id,
-      row: itemData
-    };
-    eventBus.emit(`UI:${action.event}`, payload);
+  const fireAction = (action, itemData) => {
     if (action.navigatesTo) {
       const url = action.navigatesTo.replace(
         /\{\{row\.(\w+(?:\.\w+)*)\}\}/g,
         (_, field) => String(itemData[field] ?? "")
       );
-      eventBus.emit("UI:NAVIGATE", { url });
+      eventBus.emit("UI:NAVIGATE", { url, row: itemData });
+      return;
     }
+    const payload = {
+      id: itemData.id,
+      row: itemData
+    };
+    eventBus.emit(`UI:${action.event}`, payload);
+  };
+  const handleActionClick = (action, itemData) => (e) => {
+    e.stopPropagation();
+    fireAction(action, itemData);
   };
   const hasRenderProp = typeof children === "function";
   useEffect(() => {
@@ -23183,10 +23187,7 @@ function DataGrid({
                               label: action.label,
                               icon: action.icon,
                               event: action.event,
-                              onClick: () => eventBus.emit(`UI:${action.event}`, {
-                                id: itemData.id,
-                                row: itemData
-                              })
+                              onClick: () => fireAction(action, itemData)
                             }))
                           }
                         )
@@ -23239,13 +23240,13 @@ function DataGrid({
                         }
                       ),
                       /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
-                        titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                        titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center min-w-0", children: [
                           titleField?.icon && renderIconInput(titleField.icon, { size: "sm", className: "text-primary flex-shrink-0" }),
                           /* @__PURE__ */ jsx(
                             Typography,
                             {
                               variant: titleField?.variant === "h3" ? "h3" : "h4",
-                              className: "font-semibold truncate",
+                              className: "font-semibold truncate min-w-0",
                               children: String(titleValue)
                             }
                           )
@@ -23303,7 +23304,7 @@ function DataGrid({
                         )
                       ] }, field.name);
                     }) }) }),
-                    primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-end", children: [
+                    primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-end flex-wrap", children: [
                       (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxs(
                         Button,
                         {
@@ -23328,10 +23329,7 @@ function DataGrid({
                             label: action.label,
                             icon: action.icon,
                             event: action.event,
-                            onClick: () => eventBus.emit(`UI:${action.event}`, {
-                              id: itemData.id,
-                              row: itemData
-                            })
+                            onClick: () => fireAction(action, itemData)
                           }))
                         }
                       )
@@ -25258,8 +25256,8 @@ var init_RelationSelect = __esm({
             disabled,
             className: cn(
               "w-full justify-between font-normal",
-              error && "border-red-300 focus:border-red-500 focus:ring-red-500",
-              isOpen && "ring-2 ring-primary-500 border-primary-500"
+              error && "border-error/50 focus:border-error focus:ring-error",
+              isOpen && "ring-2 ring-primary border-primary"
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -25339,7 +25337,7 @@ var init_RelationSelect = __esm({
                   paddingY: "sm",
                   className: cn(
                     "text-left text-sm hover:bg-muted focus:outline-none focus:bg-muted",
-                    option.value === value && "bg-primary-50 text-primary-700",
+                    option.value === value && "bg-primary/10 text-primary",
                     option.disabled && "opacity-50 cursor-not-allowed"
                   ),
                   onClick: () => handleSelect(option),
@@ -25496,7 +25494,7 @@ var init_SidePanel = __esm({
         showOverlay && /* @__PURE__ */ jsx(Presence, { show: isOpen, animation: "overlay", children: /* @__PURE__ */ jsx(
           Box,
           {
-            className: "fixed inset-0 bg-white/80 backdrop-blur-sm z-40 lg:hidden",
+            className: "fixed inset-0 bg-background/80 backdrop-blur-sm z-40 lg:hidden",
             onClick: handleClose
           }
         ) }),
@@ -25863,7 +25861,7 @@ var init_WizardNavigation = __esm({
               /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: "sm" }),
               resolvedBackLabel
             ] }) : /* @__PURE__ */ jsx(Box, {}),
-            /* @__PURE__ */ jsx(HStack, { align: "center", gap: "sm", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-neutral-500", children: t("wizard.stepOf", { current: String(currentStep + 1), total: String(totalSteps) }) }) }),
+            /* @__PURE__ */ jsx(HStack, { align: "center", gap: "sm", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: t("wizard.stepOf", { current: String(currentStep + 1), total: String(totalSteps) }) }) }),
             isLastStep && showComplete ? /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: handleComplete, disabled: !isValid, children: resolvedCompleteLabel }) : showNext ? /* @__PURE__ */ jsxs(Button, { variant: "primary", onClick: handleNext, disabled: !isValid, children: [
               resolvedNextLabel,
               /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "sm" })
@@ -28020,6 +28018,7 @@ var init_Lightbox = __esm({
         {
           className: cn(
             "fixed inset-0 z-50 flex items-center justify-center",
+            // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: lightbox scrim behind images
             "bg-black bg-opacity-90",
             className
           ),
@@ -28042,7 +28041,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-white"
+                  "focus:outline-none focus:ring-2 focus:ring-ring"
                 ),
                 "aria-label": t("aria.closeModal"),
                 children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "w-6 h-6" })
@@ -28061,7 +28060,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-white"
+                  "focus:outline-none focus:ring-2 focus:ring-ring"
                 ),
                 "aria-label": t("aria.previousImage"),
                 children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", className: "w-8 h-8" })
@@ -28098,7 +28097,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-white"
+                  "focus:outline-none focus:ring-2 focus:ring-ring"
                 ),
                 "aria-label": t("aria.nextImage"),
                 children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", className: "w-8 h-8" })
@@ -28318,7 +28317,7 @@ function TableView({
             col.key
           );
         }),
-        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true })
+        hasActions && /* @__PURE__ */ jsx(Box, { "aria-hidden": true, className: "sticky right-0 bg-[var(--color-surface-subtle)]" })
       ]
     }
   );
@@ -28362,41 +28361,54 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
-            (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
-              Button,
-              {
-                variant: action.variant ?? "ghost",
-                size: "sm",
-                onClick: handleActionClick(action, row),
-                "data-testid": `action-${action.event}`,
-                "data-row-id": String(row.id),
-                className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
-                children: [
-                  action.icon && renderIconInput3(action.icon, { size: "xs", className: "mr-1" }),
-                  action.label
-                ]
-              },
-              i
-            )),
-            maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsx(
-              Menu,
-              {
-                position: "bottom-end",
-                trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                items: itemActions.slice(maxInlineActions).map((action) => ({
-                  label: action.label,
-                  icon: action.icon,
-                  event: action.event,
-                  variant: action.variant === "danger" ? "danger" : "default",
-                  onClick: () => eventBus.emit(`UI:${action.event}`, {
-                    id: row.id,
-                    row
-                  })
-                }))
-              }
-            )
-          ] })
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              gap: "xs",
+              className: cn(
+                // Pinned: the fixed column tracks routinely overflow the caller's
+                // scroll container, which used to leave the actions off-screen.
+                // Opaque so scrolled cells pass underneath it.
+                "justify-end flex-shrink-0 sticky right-0 z-[1] transition-colors",
+                lk.striped && index % 2 === 1 ? "bg-[var(--color-surface-subtle)]" : "bg-[var(--color-card)] group-hover:bg-[var(--color-surface-subtle)]"
+              ),
+              children: [
+                (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: action.variant ?? "ghost",
+                    size: "sm",
+                    onClick: handleActionClick(action, row),
+                    "data-testid": `action-${action.event}`,
+                    "data-row-id": String(row.id),
+                    className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+                    children: [
+                      action.icon && renderIconInput3(action.icon, { size: "xs", className: "mr-1" }),
+                      action.label
+                    ]
+                  },
+                  i
+                )),
+                maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsx(
+                  Menu,
+                  {
+                    position: "bottom-end",
+                    trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                    items: itemActions.slice(maxInlineActions).map((action) => ({
+                      label: action.label,
+                      icon: action.icon,
+                      event: action.event,
+                      variant: action.variant === "danger" ? "danger" : "default",
+                      onClick: () => eventBus.emit(`UI:${action.event}`, {
+                        id: row.id,
+                        row
+                      })
+                    }))
+                  }
+                )
+              ]
+            }
+          )
         ]
       }
     );
@@ -31171,6 +31183,7 @@ var init_QrScanner = __esm({
           overflow: "hidden",
           rounded: "sm",
           className: cn(
+            // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
             "bg-black",
             "aspect-square w-full max-w-md",
             className
@@ -31235,7 +31248,9 @@ var init_QrScanner = __esm({
                       type: "button",
                       onClick: togglePause,
                       className: cn(
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
                       ),
                       "aria-label": isPaused ? t("qrScanner.resumeScanning") : t("qrScanner.pauseScanning"),
@@ -31248,7 +31263,9 @@ var init_QrScanner = __esm({
                       type: "button",
                       onClick: toggleFacing,
                       className: cn(
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
                       ),
                       "aria-label": currentFacing === "environment" ? t("qrScanner.switchToFrontCamera") : t("qrScanner.switchToRearCamera"),
@@ -31261,7 +31278,9 @@ var init_QrScanner = __esm({
                       type: "button",
                       onClick: handleMockScan,
                       className: cn(
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 px-3 py-2 text-xs text-white",
+                        // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
                       ),
                       "aria-label": t("aria.mockScanDev"),
@@ -33997,10 +34016,10 @@ var init_ModuleCard = __esm({
     init_avl_atom_types();
     init_MiniStateMachine();
     PERSISTENCE_BORDER = {
-      persistent: "border-l-[3px] border-l-blue-500 border-solid",
-      runtime: "border-l-[3px] border-l-blue-500 border-dashed",
-      singleton: "border-l-[3px] border-l-blue-500 border-double",
-      instance: "border-l-[3px] border-l-blue-500 border-dotted"
+      persistent: "border-l-[3px] border-l-primary border-solid",
+      runtime: "border-l-[3px] border-l-primary border-dashed",
+      singleton: "border-l-[3px] border-l-primary border-double",
+      instance: "border-l-[3px] border-l-primary border-dotted"
     };
     PERSISTENCE_ICON = {
       persistent: "\u26C1",
@@ -34030,8 +34049,8 @@ var init_ModuleCard = __esm({
           className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] shadow-sm overflow-hidden",
           style: { minWidth: 280, maxWidth: 400 },
           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(Handle, { type: "target", position: Position.Left, className: "!w-2.5 !h-2.5 !bg-warning" }),
+            /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2.5 !h-2.5 !bg-warning" }),
             /* @__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: [
@@ -36487,19 +36506,19 @@ var init_ReflectionBlock = __esm({
         "div",
         {
           className: cn(
-            "my-6 border-l-4 border-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-r-lg p-4",
+            "my-6 border-l-4 border-warning bg-warning/10 rounded-r-lg p-4",
             className
           ),
           children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(PauseCircle, { className: "text-amber-600 dark:text-amber-400 flex-shrink-0 mt-1", size: 20 }),
+            /* @__PURE__ */ jsx(PauseCircle, { className: "text-warning flex-shrink-0 mt-1", size: 20 }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "font-medium text-amber-900 dark:text-amber-100 mb-2", children: "Pause & Reflect" }),
-              /* @__PURE__ */ jsx("p", { className: "text-gray-700 dark:text-gray-300 text-sm mb-3", children: prompt }),
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-warning mb-2", children: "Pause & Reflect" }),
+              /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm mb-3", children: prompt }),
               isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "textarea",
                   {
-                    className: "w-full p-2 border border-amber-300 dark:border-amber-700 rounded text-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-amber-500 focus:border-transparent",
+                    className: "w-full p-2 border border-input rounded text-sm bg-card text-foreground focus:ring-2 focus:ring-ring focus:border-transparent",
                     placeholder: "Your thoughts...",
                     value: note,
                     onChange: (e) => setNote(e.target.value),
@@ -36510,7 +36529,7 @@ var init_ReflectionBlock = __esm({
                   "button",
                   {
                     onClick: handleSave,
-                    className: "mt-2 text-sm px-3 py-1 bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors",
+                    className: "mt-2 text-sm px-3 py-1 bg-warning text-warning-foreground rounded hover:opacity-90 transition-colors",
                     children: "Save & Continue"
                   }
                 )
@@ -36518,7 +36537,7 @@ var init_ReflectionBlock = __esm({
                 "button",
                 {
                   onClick: () => setIsExpanded(true),
-                  className: "text-sm text-amber-600 dark:text-amber-400 hover:underline",
+                  className: "text-sm text-warning hover:underline",
                   children: savedNote ? "\u2713 Answered \xB7 Edit" : "Answer this question"
                 }
               )
@@ -36804,7 +36823,7 @@ function DataTable({
             )),
             rowActions && /* @__PURE__ */ jsx("th", { className: "w-12 px-4 py-3" })
           ] }) }),
-          /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-gray-200 dark:divide-gray-700", children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: isLoading ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
             "td",
             {
               colSpan: normalizedColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0),
@@ -37124,6 +37143,16 @@ function normalizeFieldDefs(fields) {
     return String(f3);
   });
 }
+function buildFieldLabelMap(fields) {
+  const map = {};
+  if (!fields) return map;
+  for (const f3 of fields) {
+    if (typeof f3 === "object" && "key" in f3 && f3.header !== void 0 && f3.header !== "") {
+      map[f3.key] = f3.header;
+    }
+  }
+  return map;
+}
 function buildFieldTypeMap(fields) {
   const map = {};
   if (!fields) return map;
@@ -37175,7 +37204,9 @@ var init_DetailPanel = __esm({
       };
       const effectiveFieldNames = isFieldDefArray(propFields) ? normalizeFieldDefs(propFields) : fieldNames;
       const fieldTypeMap = isFieldDefArray(propFields) ? buildFieldTypeMap(propFields) : {};
-      useCallback(
+      const fieldLabelMap = isFieldDefArray(propFields) ? buildFieldLabelMap(propFields) : {};
+      const labelFor = (field) => fieldLabelMap[field] ?? formatFieldLabel(field);
+      const handleActionClick = useCallback(
         (action, data2) => {
           if (action.navigatesTo) {
             const url = action.navigatesTo.replace(
@@ -37210,7 +37241,7 @@ var init_DetailPanel = __esm({
             if (typeof field === "string") {
               const value = getNestedValue(normalizedData, field);
               return {
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: formatFieldValue(value, field),
                 icon: getFieldIcon(field)
               };
@@ -37221,7 +37252,10 @@ var init_DetailPanel = __esm({
       }
       if (normalizedData && effectiveFieldNames) {
         const primaryField = effectiveFieldNames[0];
-        if (!title && primaryField && normalizedData[primaryField]) {
+        const titleDerivedFromPrimary = Boolean(
+          !title && primaryField && normalizedData[primaryField]
+        );
+        if (titleDerivedFromPrimary) {
           title = String(normalizedData[primaryField]);
         }
         const statusFields = effectiveFieldNames.filter(
@@ -37240,16 +37274,16 @@ var init_DetailPanel = __esm({
           (f3) => f3.toLowerCase().includes("description") || f3.toLowerCase().includes("note")
         );
         const otherFields = effectiveFieldNames.filter(
-          (f3) => f3 !== primaryField && !statusFields.includes(f3) && !progressFields.includes(f3) && !metricFields.includes(f3) && !dateFields.includes(f3) && !descriptionFields.includes(f3)
+          (f3) => (!titleDerivedFromPrimary || f3 !== primaryField) && !statusFields.includes(f3) && !progressFields.includes(f3) && !metricFields.includes(f3) && !dateFields.includes(f3) && !descriptionFields.includes(f3)
         );
         sections = [];
         if (statusFields.length > 0 || otherFields.length > 0) {
           const overviewFields = [];
-          [...statusFields, ...otherFields.slice(0, 3)].forEach((field) => {
+          [...statusFields, ...otherFields].forEach((field) => {
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               overviewFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -37265,7 +37299,7 @@ var init_DetailPanel = __esm({
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               metricsFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -37281,7 +37315,7 @@ var init_DetailPanel = __esm({
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               timelineFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -37297,7 +37331,7 @@ var init_DetailPanel = __esm({
             const value = getNestedValue(normalizedData, field);
             if (value !== void 0 && value !== null) {
               descFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -37345,7 +37379,7 @@ var init_DetailPanel = __esm({
             if (typeof field === "string") {
               const value = normalizedData ? getNestedValue(normalizedData, field) : void 0;
               allFields.push({
-                label: formatFieldLabel(field),
+                label: labelFor(field),
                 value: renderRichFieldValue(value, field, fieldTypeMap[field]),
                 icon: getFieldIcon(field)
               });
@@ -37367,8 +37401,9 @@ var init_DetailPanel = __esm({
             {
               variant: action.variant || "secondary",
               size: "sm",
-              action: action.event,
+              action: action.navigatesTo ? void 0 : action.event,
               actionPayload: { row: normalizedData },
+              onClick: action.navigatesTo ? () => handleActionClick(action, normalizedData) : void 0,
               icon: action.icon,
               "data-testid": action.event ? `action-${action.event}` : void 0,
               "data-row-id": normalizedData?.id !== void 0 ? String(normalizedData.id) : void 0,
@@ -39411,8 +39446,9 @@ 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-xs", children: "\u2713" }) })
+                      item.caption && // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: caption scrim over image
+                      /* @__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-primary-foreground text-xs", children: "\u2713" }) })
                     ]
                   },
                   item.id
@@ -39441,7 +39477,7 @@ var init_MediaGallery = __esm({
                       size: "sm",
                       icon: X,
                       action: "LIGHTBOX_CLOSE",
-                      className: "text-white hover:bg-white/20"
+                      className: "text-foreground hover:bg-muted/50"
                     }
                   ) }),
                   /* @__PURE__ */ jsx(
@@ -39452,7 +39488,7 @@ var init_MediaGallery = __esm({
                       className: "max-w-full max-h-[80vh] object-contain rounded-md"
                     }
                   ),
-                  lightboxItem.caption && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-white mt-3 text-center", children: lightboxItem.caption })
+                  lightboxItem.caption && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-foreground mt-3 text-center", children: lightboxItem.caption })
                 ]
               }
             )
@@ -39894,7 +39930,7 @@ function WalkMinimap() {
         {
           variant,
           size: "sm",
-          className: `flex-shrink-0 text-[9px] ${isActive ? "ring-1 ring-cyan-400" : ""}`,
+          className: `flex-shrink-0 text-[9px] ${isActive ? "ring-1 ring-info" : ""}`,
           children: [
             isDone ? "\u2713" : isActive ? "\u25CF" : "\u25CB",
             " ",
@@ -40035,13 +40071,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-xs font-mono text-green-500", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-success", children: [
         "Engine: ",
         engineCount,
         "/",
         totalTransitions
       ] }),
-      domCount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-cyan-500", children: [
+      domCount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-xs font-mono text-info", children: [
         "DOM: ",
         domCount
       ] }),
@@ -40074,13 +40110,13 @@ function TraitsTab({ traits: traits2 }) {
   const accordionItems = traits2.map((trait) => ({
     id: trait.id,
     header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-purple-600 dark:text-purple-400", children: trait.name }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-primary", children: trait.name }),
       /* @__PURE__ */ jsx(Badge, { variant: "success", size: "sm", children: trait.currentState }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: t("debug.transitionsCount", { count: trait.transitionCount }) })
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: t("debug.transitionsCount", { count: trait.transitionCount }) })
     ] }),
     content: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.states") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.states") }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: trait.states.map((state) => /* @__PURE__ */ jsx(
           Badge,
           {
@@ -40092,18 +40128,18 @@ function TraitsTab({ traits: traits2 }) {
         )) })
       ] }),
       trait.transitions.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.transitions") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.transitions") }),
         /* @__PURE__ */ jsx(Stack, { gap: "xs", children: trait.transitions.map((t2, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono", children: [
           t2.from,
           " \u2192 ",
           t2.to,
           " ",
-          /* @__PURE__ */ jsxs("span", { className: "text-gray-500", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
             "(",
             t2.event,
             ")"
           ] }),
-          t2.guard && /* @__PURE__ */ jsxs("span", { className: "text-amber-500", children: [
+          t2.guard && /* @__PURE__ */ jsxs("span", { className: "text-warning", children: [
             " [",
             t2.guard,
             "]"
@@ -40111,7 +40147,7 @@ function TraitsTab({ traits: traits2 }) {
         ] }, i)) })
       ] }),
       trait.guards.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.guards") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.guards") }),
         /* @__PURE__ */ jsx(Stack, { gap: "xs", children: trait.guards.map((g, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", children: g.name }),
           /* @__PURE__ */ jsx(Badge, { variant: g.lastResult === true ? "success" : g.lastResult === false ? "danger" : "default", size: "sm", children: g.lastResult === void 0 ? "?" : g.lastResult ? "\u2713" : "\u2717" })
@@ -40154,11 +40190,11 @@ function TicksTab({ ticks: ticks2 }) {
   };
   const TickCard = ({ tick, active }) => /* @__PURE__ */ jsxs(Card, { className: `p-3 ${!active ? "opacity-50" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
-      /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-full ${active ? "bg-green-500" : "bg-gray-400"}` }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: tick.name }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: tick.traitName })
+      /* @__PURE__ */ jsx("span", { className: `w-2 h-2 rounded-full ${active ? "bg-success" : "bg-muted-foreground"}` }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-warning", children: tick.name }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: tick.traitName })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-xs text-gray-500", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         tick.interval,
         "ms"
@@ -40181,7 +40217,7 @@ function TicksTab({ ticks: ticks2 }) {
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--ticks", children: [
     activeTicks.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: [
         "Active (",
         activeTicks.length,
         ")"
@@ -40189,7 +40225,7 @@ function TicksTab({ ticks: ticks2 }) {
       /* @__PURE__ */ jsx(Stack, { gap: "sm", children: activeTicks.map((tick) => /* @__PURE__ */ jsx(TickCard, { tick, active: true }, tick.id)) })
     ] }),
     inactiveTicks.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-gray-400 mb-2", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: [
         "Inactive (",
         inactiveTicks.length,
         ")"
@@ -40237,33 +40273,33 @@ function EntitiesTab({ snapshot }) {
     id: `singleton-${name}`,
     header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: t("debug.singleton") }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: name })
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-info", children: name })
     ] }),
-    content: /* @__PURE__ */ jsx("pre", { className: "text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40", children: JSON.stringify(data, null, 2) })
+    content: /* @__PURE__ */ jsx("pre", { className: "text-xs text-muted-foreground bg-muted p-2 rounded overflow-auto max-h-40", children: JSON.stringify(data, null, 2) })
   }));
   const runtimeItems = runtimeEntities.slice(0, 20).map((entity) => ({
     id: entity.id,
     header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-sky-600 dark:text-sky-400", children: entity.type }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-info", children: entity.type }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground", children: [
         "#",
         entity.id.slice(0, 8)
       ] })
     ] }),
-    content: /* @__PURE__ */ jsx("pre", { className: "text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40", children: JSON.stringify(entity.data, null, 2) })
+    content: /* @__PURE__ */ jsx("pre", { className: "text-xs text-muted-foreground bg-muted p-2 rounded overflow-auto max-h-40", children: JSON.stringify(entity.data, null, 2) })
   }));
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--entities", children: [
     singletonItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.singletonsCount", { count: singletonItems.length }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.singletonsCount", { count: singletonItems.length }) }),
       /* @__PURE__ */ jsx(Accordion, { items: singletonItems, multiple: true })
     ] }),
     runtimeItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.runtimeCount", { count: runtimeEntities.length }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.runtimeCount", { count: runtimeEntities.length }) }),
       /* @__PURE__ */ jsx(Accordion, { items: runtimeItems, multiple: true }),
-      runtimeEntities.length > 20 && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 text-center mt-2", children: t("debug.moreEntities", { count: runtimeEntities.length - 20 }) })
+      runtimeEntities.length > 20 && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-center mt-2", children: t("debug.moreEntities", { count: runtimeEntities.length - 20 }) })
     ] }),
     persistentEntries.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-2", children: t("debug.persistent") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-2", children: t("debug.persistent") }),
       /* @__PURE__ */ jsx(Stack, { gap: "xs", children: persistentEntries.map(([type, info]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1", children: [
         /* @__PURE__ */ jsx(Typography, { variant: "small", children: type }),
         /* @__PURE__ */ jsx(Badge, { variant: info.loaded ? "success" : "default", size: "sm", children: info.loaded ? t("debug.loadedCount", { count: info.count }) : t("debug.notLoaded") })
@@ -40348,7 +40384,7 @@ function EventFlowTab({ events: events2 }) {
           );
         })
       ] }),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 ml-auto cursor-pointer", children: [
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground ml-auto cursor-pointer", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -40363,18 +40399,18 @@ function EventFlowTab({ events: events2 }) {
       "div",
       {
         ref: containerRef,
-        className: "max-h-64 overflow-y-auto space-y-1 bg-gray-50 dark:bg-gray-800 rounded p-2",
+        className: "max-h-64 overflow-y-auto space-y-1 bg-muted rounded p-2",
         children: filteredEvents.slice(-100).map((event) => {
           const { variant, icon } = TYPE_BADGES[event.type] || { variant: "default", icon: "\u2022" };
           return /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "flex items-start gap-2 text-xs py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded px-1",
+              className: "flex items-start gap-2 text-xs py-1 hover:bg-muted/50 rounded px-1",
               children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime2(event.timestamp) }),
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono min-w-[65px]", children: formatTime2(event.timestamp) }),
                 /* @__PURE__ */ jsx("span", { children: icon }),
                 /* @__PURE__ */ jsx(Badge, { variant, size: "sm", className: "min-w-[60px] justify-center", children: event.source }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-600 dark:text-gray-400", children: event.message })
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: event.message })
               ]
             },
             event.id
@@ -40438,21 +40474,21 @@ function GuardsPanel({ guards }) {
     id: guard.id,
     header: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
       /* @__PURE__ */ jsx(Badge, { variant: guard.result ? "success" : "danger", size: "sm", children: guard.result ? "\u2713" : "\u2717" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-amber-600 dark:text-amber-400", children: guard.guardName }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: guard.context.type === "transition" ? `${guard.context.transitionFrom} \u2192 ${guard.context.transitionTo}` : guard.context.tickName }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: formatTime2(guard.timestamp) })
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", className: "text-warning", children: guard.guardName }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: guard.context.type === "transition" ? `${guard.context.transitionFrom} \u2192 ${guard.context.transitionTo}` : guard.context.tickName }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: formatTime2(guard.timestamp) })
     ] }),
     content: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.expression") }),
-        /* @__PURE__ */ jsx("code", { className: "block mt-1 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-2 py-1 rounded", children: guard.expression })
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.expression") }),
+        /* @__PURE__ */ jsx("code", { className: "block mt-1 text-xs text-warning bg-warning/10 px-2 py-1 rounded", children: guard.expression })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.inputs") }),
-        /* @__PURE__ */ jsx("pre", { className: "mt-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 p-2 rounded overflow-auto max-h-24", children: JSON.stringify(guard.inputs, null, 2) })
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.inputs") }),
+        /* @__PURE__ */ jsx("pre", { className: "mt-1 text-xs text-muted-foreground bg-muted p-2 rounded overflow-auto max-h-24", children: JSON.stringify(guard.inputs, null, 2) })
       ] }),
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500", children: t("debug.trait") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground", children: t("debug.trait") }),
         /* @__PURE__ */ jsx(Typography, { variant: "small", children: guard.context.traitName })
       ] })
     ] })
@@ -40508,7 +40544,7 @@ function VerificationTab({ checks, summary }) {
     (a, b) => (sortOrder[a.status] ?? 4) - (sortOrder[b.status] ?? 4)
   );
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--verification", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3 p-2 bg-gray-50 dark:bg-gray-800 rounded", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3 p-2 bg-muted rounded", children: [
       /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
         summary.passed,
         " passed"
@@ -40525,7 +40561,7 @@ function VerificationTab({ checks, summary }) {
         summary.pending,
         " pending"
       ] }),
-      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-gray-500 ml-auto", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: [
         summary.totalChecks,
         " total checks"
       ] })
@@ -40535,12 +40571,12 @@ function VerificationTab({ checks, summary }) {
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex items-start gap-2 p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-800",
+          className: "flex items-start gap-2 p-2 rounded hover:bg-muted/50",
           children: [
             /* @__PURE__ */ jsx(Badge, { variant: config.variant, size: "sm", className: "min-w-[20px] justify-center mt-0.5", children: config.icon }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
               /* @__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 })
+              check.details && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground break-words", children: check.details })
             ] }),
             /* @__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,
@@ -40575,10 +40611,10 @@ 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-xs 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-muted 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 })
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: effect.type }),
+    effect.error && /* @__PURE__ */ jsx("span", { className: "text-error truncate max-w-[120px]", title: effect.error, children: effect.error })
   ] });
 }
 function TransitionTimeline({ transitions }) {
@@ -40613,8 +40649,8 @@ function TransitionTimeline({ transitions }) {
   const sorted = [...transitions].reverse();
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--timeline", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: t("debug.transitionsRecorded", { count: transitions.length }) }),
-      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-500 cursor-pointer", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: t("debug.transitionsRecorded", { count: transitions.length }) }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground cursor-pointer", children: [
         /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -40639,22 +40675,22 @@ function TransitionTimeline({ transitions }) {
             {
               className: `
                                 relative pl-6 pb-3 border-l-2 cursor-pointer
-                                hover:bg-gray-50 dark:hover:bg-gray-800 rounded-r
-                                ${hasFailedEffects ? "border-red-300 dark:border-red-700" : "border-gray-200 dark:border-gray-700"}
+                                hover:bg-muted/50 rounded-r
+                                ${hasFailedEffects ? "border-error" : "border-border"}
                             `,
               onClick: () => setExpandedId(isExpanded ? null : trace.id),
               children: [
                 /* @__PURE__ */ jsx("div", { className: `
                                 absolute left-[-5px] top-1 w-2 h-2 rounded-full
-                                ${hasFailedEffects ? "bg-red-500" : allPassed ? "bg-green-500" : "bg-gray-400"}
+                                ${hasFailedEffects ? "bg-error" : allPassed ? "bg-success" : "bg-muted-foreground"}
                             ` }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs py-1 px-2", children: [
-                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 font-mono min-w-[65px]", children: formatTime2(trace.timestamp) }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground font-mono min-w-[65px]", children: formatTime2(trace.timestamp) }),
                   /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", className: "min-w-[60px] justify-center", children: trace.traitName }),
-                  /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-gray-600 dark:text-gray-400", children: [
+                  /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-muted-foreground", children: [
                     trace.from,
                     " ",
-                    /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "\u2192" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50", children: "\u2192" }),
                     " ",
                     trace.to
                   ] }),
@@ -40671,9 +40707,9 @@ function TransitionTimeline({ transitions }) {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 ml-auto", children: t("debug.effectsCount", { count: trace.effects.length }) })
+                  /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground ml-auto", children: t("debug.effectsCount", { count: trace.effects.length }) })
                 ] }),
-                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: [
+                isExpanded && trace.effects.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-2 mt-1 mb-2 pl-2 border-l border-border 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-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: [
@@ -40707,8 +40743,8 @@ var init_TransitionTimeline = __esm({
   }
 });
 function StatRow({ label, value, variant }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1.5 border-b border-gray-100 dark:border-gray-800 last:border-b-0", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: label }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-1.5 border-b border-border last:border-b-0", children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: label }),
     variant ? /* @__PURE__ */ jsx(Badge, { variant, size: "sm", children: String(value) }) : /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "font-mono", children: String(value) })
   ] });
 }
@@ -40737,7 +40773,7 @@ function ServerBridgeTab({ bridge }) {
   return /* @__PURE__ */ jsx("div", { className: "debug-tab debug-tab--bridge", children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
     /* @__PURE__ */ jsxs(Card, { className: "p-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
-        /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full ${bridge.connected ? "bg-green-500 animate-pulse" : "bg-red-500"}` }),
+        /* @__PURE__ */ jsx("div", { className: `w-3 h-3 rounded-full ${bridge.connected ? "bg-success animate-pulse" : "bg-error"}` }),
         /* @__PURE__ */ jsx(Typography, { variant: "h6", children: bridge.connected ? t("debug.connected") : t("debug.disconnected") })
       ] }),
       /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
@@ -40772,11 +40808,11 @@ function ServerBridgeTab({ bridge }) {
         )
       ] })
     ] }),
-    bridge.lastError && /* @__PURE__ */ jsxs(Card, { className: "p-3 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "text-red-600 dark:text-red-400 mb-1", children: t("debug.lastError") }),
-      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-red-500 font-mono break-all", children: bridge.lastError })
+    bridge.lastError && /* @__PURE__ */ jsxs(Card, { className: "p-3 border-error/30 bg-error/10", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "semibold", className: "text-error mb-1", children: t("debug.lastError") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-error font-mono break-all", children: bridge.lastError })
     ] }),
-    bridge.connected && /* @__PURE__ */ jsx("div", { className: "text-center py-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400", children: t("debug.totalEventsProcessed", { count: bridge.eventsForwarded + bridge.eventsReceived }) }) })
+    bridge.connected && /* @__PURE__ */ jsx("div", { className: "text-center py-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: t("debug.totalEventsProcessed", { count: bridge.eventsForwarded + bridge.eventsReceived }) }) })
   ] }) });
 }
 var init_ServerBridgeTab = __esm({
@@ -40902,7 +40938,7 @@ function EventDispatcherTab({ traits: traits2, schema }) {
   };
   return /* @__PURE__ */ jsxs("div", { className: "debug-tab debug-tab--dispatch", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.activeStates") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.activeStates") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: traits2.map((trait) => /* @__PURE__ */ jsxs(Badge, { variant: "success", size: "sm", children: [
         trait.name,
         ": ",
@@ -40910,8 +40946,8 @@ function EventDispatcherTab({ traits: traits2, schema }) {
       ] }, trait.id)) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.availableEvents") }),
-      availableEvents.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-400 italic", children: t("debug.noTransitionsFromState") }) : /* @__PURE__ */ jsx(Stack, { gap: "xs", children: availableEvents.map(({ event, transitions }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.availableEvents") }),
+      availableEvents.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground italic", children: t("debug.noTransitionsFromState") }) : /* @__PURE__ */ jsx(Stack, { gap: "xs", children: availableEvents.map(({ event, transitions }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -40922,22 +40958,22 @@ function EventDispatcherTab({ traits: traits2, schema }) {
             children: event
           }
         ),
-        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: transitions.map((t2) => `${t2.from} -> ${t2.to}`).join(", ") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground", children: transitions.map((t2) => `${t2.from} -> ${t2.to}`).join(", ") }),
         transitions.some((tr) => tr.guard) && /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", children: t("debug.guarded") })
       ] }, event)) })
     ] }),
     unavailableEvents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.otherEvents") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.otherEvents") }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: unavailableEvents.map((event) => /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", className: "opacity-50", children: event }, event)) })
     ] }),
     log13.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-gray-500 mb-1", children: t("debug.recentTransitions") }),
+      /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "medium", className: "text-muted-foreground mb-1", children: t("debug.recentTransitions") }),
       /* @__PURE__ */ jsx(Stack, { gap: "xs", children: log13.map((entry, i) => /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "font-mono text-xs", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-purple-400", children: entry.traitName }),
+        /* @__PURE__ */ jsx("span", { className: "text-primary", children: entry.traitName }),
         " ",
-        /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: entry.from }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: entry.from }),
         " -> ",
-        /* @__PURE__ */ jsx("span", { className: "text-green-400", children: entry.to })
+        /* @__PURE__ */ jsx("span", { className: "text-success", children: entry.to })
       ] }, i)) })
     ] })
   ] });
@@ -40963,21 +40999,21 @@ var init_RuntimeDebugger = __esm({
 function ServerResponseRow({ sr }) {
   const { t } = useTranslate();
   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-xs font-mono", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-primary 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: [
+      /* @__PURE__ */ jsxs("span", { className: sr.success ? "text-success" : "text-error", children: [
         sr.success ? "\u2713" : "\u2717",
         " ",
         t("debug.server")
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-300", children: sr.orbitalName }),
-      sr.clientEffects > 0 && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-purple-500/15 text-purple-600 dark:text-purple-300", children: t("debug.clientEffectsCount", { count: sr.clientEffects }) }),
-      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-blue-500/15 text-blue-300", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-primary", children: sr.orbitalName }),
+      sr.clientEffects > 0 && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-primary/10 text-primary", children: t("debug.clientEffectsCount", { count: sr.clientEffects }) }),
+      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-primary/10 text-primary", children: [
         t("debug.emitLabel"),
         " ",
         sr.emittedEvents.join(", ")
       ] }),
-      sr.error && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-red-500/15 text-red-600 dark:text-red-400 truncate max-w-[300px]", children: sr.error })
+      sr.error && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-error/10 text-error truncate max-w-[300px]", children: sr.error })
     ] }),
     entityEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-[var(--color-card)] text-foreground", children: [
       name,
@@ -40993,9 +41029,9 @@ function TransitionRow({ trace }) {
   if (isServerEntry && trace.serverResponse) {
     return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-border last:border-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
-        /* @__PURE__ */ jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-purple-500" }),
+        /* @__PURE__ */ jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-primary" }),
         /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", className: "flex-shrink-0", children: trace.event }),
-        /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400 flex-shrink-0", children: t("debug.serverResponse") })
+        /* @__PURE__ */ jsx("span", { className: "text-primary flex-shrink-0", children: t("debug.serverResponse") })
       ] }),
       /* @__PURE__ */ jsx(ServerResponseRow, { sr: trace.serverResponse })
     ] });
@@ -41004,7 +41040,7 @@ function TransitionRow({ trace }) {
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
       /* @__PURE__ */ jsx("span", { className: cn(
         "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0",
-        hasFailedEffects ? "bg-red-500" : "bg-green-500"
+        hasFailedEffects ? "bg-error" : "bg-success"
       ) }),
       /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", className: "flex-shrink-0", children: trace.event }),
       /* @__PURE__ */ jsx("span", { className: "text-foreground flex-shrink-0", children: trace.traitName }),
@@ -41018,7 +41054,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-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"
+      eff.status === "executed" ? "bg-success/10 text-success" : eff.status === "failed" ? "bg-error/10 text-error" : "bg-warning/10 text-warning"
     ), children: [
       eff.status === "executed" ? "\u2713" : eff.status === "failed" ? "\u2717" : "-",
       " ",
@@ -41052,7 +41088,7 @@ function VerifyModePanel({
     {
       className: cn(
         "runtime-debugger runtime-debugger--verify",
-        "flex flex-col bg-[var(--color-card)] text-[var(--color-foreground)] border-t-2 border-cyan-500",
+        "flex flex-col bg-[var(--color-card)] text-[var(--color-foreground)] border-t-2 border-accent",
         hudBottom ? "" : "fixed bottom-0 left-0 right-0",
         className
       ),
@@ -41073,8 +41109,8 @@ function VerifyModePanel({
               /* @__PURE__ */ jsx("span", { className: "text-foreground/50 w-3", "aria-hidden": true, children: expanded ? "\u25BE" : "\u25B8" }),
               /* @__PURE__ */ jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? t("debug.failCount", { count: failedChecks }) : t("debug.ok") }),
               /* @__PURE__ */ jsx("span", { className: "text-foreground/70", children: t("debug.localCount", { count: localCount }) }),
-              /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400", children: t("debug.serverCount", { count: serverCount }) }),
-              traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-600 dark:text-cyan-400 truncate max-w-[400px]", children: traitStates }),
+              /* @__PURE__ */ jsx("span", { className: "text-primary", children: t("debug.serverCount", { count: serverCount }) }),
+              traitStates && /* @__PURE__ */ jsx("span", { className: "text-accent truncate max-w-[400px]", children: traitStates }),
               !expanded && transitions.length > 0 && /* @__PURE__ */ jsx("span", { className: "ml-auto text-foreground/50", children: t("debug.transitionsCount", { count: transitions.length }) })
             ]
           }
@@ -41269,7 +41305,7 @@ function RuntimeDebugger({
           title: t("debug.openDebugger"),
           children: failedChecks > 0 ? /* @__PURE__ */ jsxs("span", { className: "relative", children: [
             /* @__PURE__ */ jsx("span", { children: "V" }),
-            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 w-2 h-2 bg-red-500 rounded-full" })
+            /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-2 w-2 h-2 bg-error rounded-full" })
           ] }) : /* @__PURE__ */ jsx("span", { children: "V" })
         }
       ) : /* @__PURE__ */ jsxs(Card, { className: "runtime-debugger__panel", children: [
@@ -41357,7 +41393,7 @@ var init_SegmentRenderer = __esm({
         "div",
         {
           className: cn(
-            "border border-gray-200 dark:border-gray-700 rounded-lg p-2 md:p-4 overflow-x-auto space-y-6",
+            "border border-border rounded-lg p-2 md:p-4 overflow-x-auto space-y-6",
             containerClassName,
             className
           ),
@@ -45453,6 +45489,28 @@ function extractRouteParams2(pattern, path) {
 function pathMatches2(pattern, path) {
   return matchPath2(pattern, path) !== null;
 }
+function comparePathSpecificity2(a, b) {
+  const aParts = a.split("/").filter(Boolean);
+  const bParts = b.split("/").filter(Boolean);
+  const shared = Math.min(aParts.length, bParts.length);
+  for (let i = 0; i < shared; i++) {
+    const aParam = aParts[i].startsWith(":");
+    const bParam = bParts[i].startsWith(":");
+    if (aParam !== bParam) return aParam ? 1 : -1;
+  }
+  return 0;
+}
+function matchPathAmong2(candidates, path, pathOf) {
+  const routed = candidates.filter((candidate) => Boolean(pathOf(candidate)));
+  const ranked = [...routed].sort(
+    (a, b) => comparePathSpecificity2(pathOf(a), pathOf(b))
+  );
+  for (const candidate of ranked) {
+    const params = matchPath2(pathOf(candidate), path);
+    if (params !== null) return { candidate, params };
+  }
+  return null;
+}
 function isInlineOrbital(orbital) {
   return "name" in orbital && typeof orbital.name === "string";
 }
@@ -45461,21 +45519,22 @@ function isInlinePage(page) {
 }
 function findPageByPath2(schema, path) {
   if (!schema.orbitals) return null;
+  const candidates = [];
   for (const orbital of schema.orbitals) {
     if (!isInlineOrbital(orbital)) continue;
     if (!orbital.pages) continue;
     for (const pageRef of orbital.pages) {
       if (!isInlinePage(pageRef)) continue;
-      const page = pageRef;
-      const pagePath = page.path;
-      if (!pagePath) continue;
-      const params = matchPath2(pagePath, path);
-      if (params !== null) {
-        return { page, params, orbitalName: orbital.name };
-      }
+      candidates.push({ page: pageRef, orbitalName: orbital.name });
     }
   }
-  return null;
+  const hit = matchPathAmong2(candidates, path, (entry) => entry.page.path);
+  if (!hit) return null;
+  return {
+    page: hit.candidate.page,
+    params: hit.params,
+    orbitalName: hit.candidate.orbitalName
+  };
 }
 function findPageByName2(schema, pageName) {
   if (!schema.orbitals) return null;
@@ -45654,6 +45713,66 @@ function useNavigationId2() {
 init_useEventBus();
 var xOrbitalLog = createLogger("almadar:runtime:cross-orbital");
 var serverBridgeLog = createLogger("almadar:ui:server-bridge");
+function reEmitServerEvent(eventBus, emitted, origin) {
+  const evTrait = emitted.source?.trait;
+  if (!evTrait) {
+    xOrbitalLog.warn("emit:dropped-no-source", { event: emitted.event, origin });
+    return;
+  }
+  const key = emitted.source?.orbital ? `UI:${emitted.source.orbital}.${evTrait}.${emitted.event}` : `UI:${evTrait}.${emitted.event}`;
+  xOrbitalLog.info("emit:rebroadcast", {
+    busKey: key,
+    sourceOrbital: emitted.source?.orbital,
+    sourceTrait: evTrait,
+    origin
+  });
+  eventBus.emit(key, emitted.payload);
+}
+function isBusPushEnvelope(value) {
+  return value.type === "bus" && typeof value.event === "string";
+}
+var tabClientId;
+function getTabClientId() {
+  if (tabClientId === void 0) tabClientId = crypto.randomUUID();
+  return tabClientId;
+}
+var pushChannels = /* @__PURE__ */ new Map();
+function acquirePushChannel(url, subscriber) {
+  let channel = pushChannels.get(url);
+  if (channel === void 0) {
+    const source = new EventSource(url);
+    const created = { source, subscribers: /* @__PURE__ */ new Set() };
+    source.onmessage = (ev) => {
+      let parsed;
+      try {
+        parsed = JSON.parse(ev.data);
+      } catch (err) {
+        serverBridgeLog.warn("push:parse-failed", { error: err instanceof Error ? err.message : String(err) });
+        return;
+      }
+      if (!isBusPushEnvelope(parsed)) return;
+      for (const sub of created.subscribers) sub(parsed);
+    };
+    source.onerror = () => {
+      serverBridgeLog.warn("push:connection-error", { url });
+    };
+    pushChannels.set(url, created);
+    channel = created;
+  }
+  channel.subscribers.add(subscriber);
+  return () => {
+    channel.subscribers.delete(subscriber);
+    if (channel.subscribers.size === 0) {
+      channel.source.close();
+      pushChannels.delete(url);
+    }
+  };
+}
+function deriveEventsUrl(serverUrl) {
+  const trimmed = serverUrl.replace(/\/+$/, "");
+  const apiRoot = trimmed.replace(/\/[^/]*$/, "");
+  return `${apiRoot}/events`;
+}
 function createHttpTransport(serverUrl) {
   return {
     register: async (schema) => {
@@ -45680,11 +45799,12 @@ function createHttpTransport(serverUrl) {
       } catch {
       }
     },
-    sendEvent: async (orbitalName, event, payload) => {
+    sendEvent: async (orbitalName, event, payload, clientId) => {
+      const body = { event, payload, clientId };
       const res = await fetch(`${serverUrl}/${orbitalName}/events`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ event, payload })
+        body: JSON.stringify(body)
       });
       return res.json();
     }
@@ -45729,7 +45849,7 @@ function ServerBridgeProvider({
     const emptyMeta = { success: false, clientEffects: 0, dataEntities: {}, emittedEvents: [] };
     if (!connected) return { effects: [], meta: emptyMeta };
     try {
-      const result = await transport.sendEvent(orbitalName, event, payload);
+      const result = await transport.sendEvent(orbitalName, event, payload, getTabClientId());
       const effects = [];
       const responseData = result.data || {};
       const dataEntities = {};
@@ -45774,22 +45894,7 @@ function ServerBridgeProvider({
         }
         if (result.emittedEvents) {
           for (const emitted of result.emittedEvents) {
-            const evTrait = emitted.source?.trait;
-            if (!evTrait) {
-              xOrbitalLog.warn("emit:dropped-no-source", {
-                event: emitted.event,
-                dispatchOrbital: orbitalName
-              });
-              continue;
-            }
-            const key = emitted.source?.orbital ? `UI:${emitted.source.orbital}.${evTrait}.${emitted.event}` : `UI:${evTrait}.${emitted.event}`;
-            xOrbitalLog.info("emit:rebroadcast", {
-              busKey: key,
-              sourceOrbital: emitted.source?.orbital,
-              sourceTrait: evTrait,
-              dispatchOrbital: orbitalName
-            });
-            eventBus.emit(key, emitted.payload);
+            reEmitServerEvent(eventBus, emitted, orbitalName);
           }
         }
       } else if (result.error) {
@@ -45831,6 +45936,19 @@ function ServerBridgeProvider({
       unregisterSchema();
     };
   }, [schema, registerSchema, unregisterSchema]);
+  useEffect(() => {
+    if (!serverUrl) return;
+    if (typeof EventSource === "undefined") return;
+    const url = `${deriveEventsUrl(serverUrl)}?clientId=${encodeURIComponent(getTabClientId())}`;
+    return acquirePushChannel(url, (parsed) => {
+      serverBridgeLog.debug("push:received", {
+        event: parsed.event,
+        sourceOrbital: parsed.source?.orbital,
+        sourceTrait: parsed.source?.trait
+      });
+      reEmitServerEvent(eventBus, parsed, "push");
+    });
+  }, [serverUrl, eventBus]);
   return /* @__PURE__ */ jsx(ServerBridgeContext.Provider, { value: { connected, sendEvent }, children });
 }
 var log12 = createLogger("almadar:ui:trait-provider");
@@ -46010,4 +46128,4 @@ function GameAudioProvider2({
 }
 GameAudioProvider2.displayName = "GameAudioProvider";
 
-export { ANONYMOUS_USER, CurrentPagePathContext, CurrentPagePathProvider, EntitySchemaProvider, EventBusContext2 as EventBusContext, EventBusProvider, GameAudioContext2 as GameAudioContext, GameAudioProvider2 as GameAudioProvider, NavigationProvider2 as NavigationProvider, OfflineModeProvider, OrbitalProvider, OrbitalThemeProvider, SelectionContext, SelectionProvider, ServerBridgeProvider, TraitContext, TraitProvider, TraitScopeProvider3 as TraitScopeProvider, UserContext, UserProvider, VerificationProvider, extractRouteParams2 as extractRouteParams, findPageByName2 as findPageByName, findPageByPath2 as findPageByPath, getAllPages2 as getAllPages, getDefaultPage2 as getDefaultPage, matchPath2 as matchPath, pathMatches2 as pathMatches, useActivePage2 as useActivePage, useCurrentPagePath2 as useCurrentPagePath, useEntitySchema, useEntitySchemaOptional6 as useEntitySchemaOptional, useGameAudioContext2 as useGameAudioContext, useGameAudioContextOptional2 as useGameAudioContextOptional, useHasPermission, useHasRole, useInitPayload2 as useInitPayload, useNavigateTo2 as useNavigateTo, useNavigation2 as useNavigation, useNavigationId2 as useNavigationId, useNavigationState2 as useNavigationState, useOfflineMode, useOptionalOfflineMode, useSelection, useSelectionOptional, useServerBridge, useTrait, useTraitContext, useTraitScope, useTraitScopeChain2 as useTraitScopeChain, useUser, useUserForEvaluation };
+export { ANONYMOUS_USER, CurrentPagePathContext, CurrentPagePathProvider, EntitySchemaProvider, EventBusContext2 as EventBusContext, EventBusProvider, GameAudioContext2 as GameAudioContext, GameAudioProvider2 as GameAudioProvider, NavigationProvider2 as NavigationProvider, OfflineModeProvider, OrbitalProvider, OrbitalThemeProvider, SelectionContext, SelectionProvider, ServerBridgeProvider, TraitContext, TraitProvider, TraitScopeProvider3 as TraitScopeProvider, UserContext, UserProvider, VerificationProvider, comparePathSpecificity2 as comparePathSpecificity, extractRouteParams2 as extractRouteParams, findPageByName2 as findPageByName, findPageByPath2 as findPageByPath, getAllPages2 as getAllPages, getDefaultPage2 as getDefaultPage, matchPath2 as matchPath, matchPathAmong2 as matchPathAmong, pathMatches2 as pathMatches, useActivePage2 as useActivePage, useCurrentPagePath2 as useCurrentPagePath, useEntitySchema, useEntitySchemaOptional6 as useEntitySchemaOptional, useGameAudioContext2 as useGameAudioContext, useGameAudioContextOptional2 as useGameAudioContextOptional, useHasPermission, useHasRole, useInitPayload2 as useInitPayload, useNavigateTo2 as useNavigateTo, useNavigation2 as useNavigation, useNavigationId2 as useNavigationId, useNavigationState2 as useNavigationState, useOfflineMode, useOptionalOfflineMode, useSelection, useSelectionOptional, useServerBridge, useTrait, useTraitContext, useTraitScope, useTraitScopeChain2 as useTraitScopeChain, useUser, useUserForEvaluation };