@almadar/ui 5.123.0 → 5.124.0

package/dist/avl/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React91 from 'react';
 import React91__default, { createContext, useState, useMemo, useRef, useEffect, useContext, useCallback, Suspense, useLayoutEffect, Profiler, useReducer, useSyncExternalStore, lazy, useId } from 'react';
-import { getAllPages, OrbitalProvider, EventBusContext, useTraitScopeChain, ServerBridgeProvider, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge, useEntitySchema, useEntitySchemaOptional, TraitScopeProvider, useCurrentPagePath, useGameAudioContextOptional } from '@almadar/ui/providers';
+import { getAllPages, matchPath, OrbitalProvider, EventBusContext, useTraitScopeChain, ServerBridgeProvider, VerificationProvider, EntitySchemaProvider, OrbitalThemeProvider, useServerBridge, useEntitySchema, useEntitySchemaOptional, TraitScopeProvider, useCurrentPagePath, useGameAudioContextOptional } from '@almadar/ui/providers';
 import { createLogger, setNamespaceLevel, isLogLevelEnabled } from '@almadar/logger';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { MarkerType, useReactFlow, Handle, Position, getBezierPath, EdgeLabelRenderer, useNodeId, ReactFlowProvider, BaseEdge, useNodesState, useEdgesState, ReactFlow, Controls, Background, BackgroundVariant } from '@xyflow/react';
@@ -66,7 +66,7 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
-import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, walkSExpr, isSExpr, isEventPayloadValue } from '@almadar/core';
+import { FieldTypeSchema, isInlineTrait, isPageReference, buildResolvedTraitConfigs, schemaToIR, getPage, mergeEntityFrame, isCircuitEvent, applyListenPayloadMapping, walkSExpr, isSExpr, isEventPayloadValue } from '@almadar/core';
 import { useDroppable, useDraggable, DndContext, DragOverlay, useSensors, useSensor, PointerSensor, KeyboardSensor, pointerWithin, rectIntersection, closestCorners } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, useSortable, arrayMove, SortableContext, rectSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -4283,10 +4283,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",
@@ -4316,8 +4316,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: [
@@ -8366,15 +8366,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(
@@ -8720,7 +8720,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,
@@ -8731,7 +8731,7 @@ function DayCell({
             variant: "small",
             className: cn(
               "font-medium",
-              isToday ? "text-blue-600" : "text-muted-foreground"
+              isToday ? "text-primary" : "text-muted-foreground"
             ),
             children: dayAbbr
           }
@@ -8743,7 +8743,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() })
           }
@@ -15597,19 +15597,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),
@@ -15621,7 +15621,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"
                     }
                   ),
@@ -15632,7 +15632,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"
                     }
                   )
@@ -15641,7 +15641,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"
                 }
               )
@@ -16145,7 +16145,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 ? {
@@ -16154,7 +16154,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,
@@ -16239,7 +16239,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",
@@ -17403,7 +17403,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(
@@ -17412,9 +17412,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" })
                   }
                 )
               ]
@@ -17782,12 +17782,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,
@@ -17813,22 +17813,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,
                 {
@@ -17842,13 +17842,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,
@@ -18122,12 +18122,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,
           {
@@ -20039,7 +20039,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 ?? "") }) })
                     },
@@ -21287,7 +21287,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 })
@@ -21385,7 +21385,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),
@@ -23401,31 +23401,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,
@@ -23434,15 +23434,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
                 ] })
@@ -23627,14 +23627,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 }) })
           ] })
         ] })
       }
@@ -23721,7 +23721,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
       }
@@ -23794,7 +23794,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
         }
@@ -24055,11 +24055,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()
                             }
@@ -24138,11 +24138,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()
                                   }
@@ -24202,8 +24202,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
                                   }
@@ -24225,7 +24225,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
                                   }
                                 )
@@ -24508,7 +24508,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 })
             ]
           },
@@ -24565,7 +24565,7 @@ function MenuItemRow({
             Typography,
             {
               variant: "small",
-              className: cn("flex-1", isDanger && "text-red-600"),
+              className: cn("flex-1", isDanger && "text-error"),
               children: item.label
             }
           ),
@@ -25333,20 +25333,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(() => {
@@ -25448,10 +25452,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)
                             }))
                           }
                         )
@@ -25593,10 +25594,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)
                           }))
                         }
                       )
@@ -27523,8 +27521,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(
@@ -27604,7 +27602,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),
@@ -27761,7 +27759,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
           }
         ) }),
@@ -28128,7 +28126,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" })
@@ -30285,6 +30283,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
           ),
@@ -30307,7 +30306,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" })
@@ -30326,7 +30325,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" })
@@ -30363,7 +30362,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" })
@@ -33436,6 +33435,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
@@ -33500,7 +33500,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"),
@@ -33513,7 +33515,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"),
@@ -33526,7 +33530,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"),
@@ -38343,19 +38349,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),
@@ -38366,7 +38372,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"
                   }
                 )
@@ -38374,7 +38380,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"
                 }
               )
@@ -38660,7 +38666,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),
@@ -39031,7 +39037,7 @@ var init_DetailPanel = __esm({
       };
       const effectiveFieldNames = isFieldDefArray(propFields) ? normalizeFieldDefs(propFields) : fieldNames;
       const fieldTypeMap = isFieldDefArray(propFields) ? buildFieldTypeMap(propFields) : {};
-      useCallback(
+      const handleActionClick = useCallback(
         (action, data2) => {
           if (action.navigatesTo) {
             const url = action.navigatesTo.replace(
@@ -39223,8 +39229,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,
@@ -41267,8 +41274,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
@@ -41297,7 +41305,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(
@@ -41308,7 +41316,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 })
                 ]
               }
             )
@@ -41769,7 +41777,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",
             " ",
@@ -41910,13 +41918,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
       ] }),
@@ -41949,13 +41957,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,
           {
@@ -41967,18 +41975,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,
             "]"
@@ -41986,7 +41994,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" })
@@ -42029,11 +42037,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"
@@ -42056,7 +42064,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,
         ")"
@@ -42064,7 +42072,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,
         ")"
@@ -42112,33 +42120,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") })
@@ -42223,7 +42231,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,
           {
@@ -42238,18 +42246,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
@@ -42313,21 +42321,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 })
       ] })
     ] })
@@ -42383,7 +42391,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"
@@ -42400,7 +42408,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"
       ] })
@@ -42410,12 +42418,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,
@@ -42450,10 +42458,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 }) {
@@ -42488,8 +42496,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,
           {
@@ -42514,22 +42522,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
                   ] }),
@@ -42546,9 +42554,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: [
@@ -42582,8 +42590,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) })
   ] });
 }
@@ -42612,7 +42620,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: [
@@ -42647,11 +42655,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({
@@ -42777,7 +42785,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,
         ": ",
@@ -42785,8 +42793,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,
           {
@@ -42797,22 +42805,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)) })
     ] }),
     log11.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: log11.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)) })
     ] })
   ] });
@@ -42838,21 +42846,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,
@@ -42868,9 +42876,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 })
     ] });
@@ -42879,7 +42887,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 }),
@@ -42893,7 +42901,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" : "-",
       " ",
@@ -42927,7 +42935,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
       ),
@@ -42948,8 +42956,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 }) })
             ]
           }
@@ -43144,7 +43152,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: [
@@ -43232,7 +43240,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
           ),
@@ -48784,8 +48792,8 @@ var SystemNode = ({ data }) => {
       className: "rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] px-3 py-2 shadow-sm",
       style: { minWidth: 160, maxWidth: 220 },
       children: [
-        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "!w-2 !h-2 !bg-orange-400" }),
-        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2 !h-2 !bg-orange-400" }),
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "!w-2 !h-2 !bg-warning" }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "!w-2 !h-2 !bg-warning" }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mb-1", children: [
           /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(AvlEntity, { x: 10, y: 10, r: 8, persistence }) }),
           /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-[var(--color-foreground)] truncate flex-1", children: orbitalName })
@@ -48937,9 +48945,9 @@ var AvlTransitionEdge = ({
         className: "absolute pointer-events-all nodrag nopan flex items-center gap-1",
         style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
         children: [
-          data?.hasGuard && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rotate-45 border border-amber-500 bg-amber-500/10 shrink-0", title: t("avl.guard") }),
+          data?.hasGuard && /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rotate-45 border border-warning bg-warning/10 shrink-0", title: t("avl.guard") }),
           /* @__PURE__ */ jsx("div", { className: "px-2 py-0.5 text-xs font-medium rounded-full bg-[var(--color-card)] border border-[var(--color-border)] text-[var(--color-foreground)] truncate max-w-[160px]", children: data?.event ?? "" }),
-          data?.hasEffects && /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-violet-500/80 shrink-0", title: t("avl.effects") })
+          data?.hasEffects && /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full bg-primary shrink-0", title: t("avl.effects") })
         ]
       }
     ) })
@@ -49762,7 +49770,9 @@ function useResolvedSchema(schema, pageName) {
         trait.listens = callSiteListens.map((l) => ({
           event: l.event,
           triggers: l.triggers,
-          source: l.source
+          source: l.source,
+          guard: l.guard,
+          payloadMapping: l.payloadMapping
         }));
         resolvedSchemaLog.info("listens:restored", {
           trait: traitName,
@@ -51151,7 +51161,11 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
         crossTraitLog.debug("listen:subscribed", { busKey, targetTrait: binding.trait.name, sourceOrbital, sourceTrait, listenEvent: listen.event, triggers: listen.triggers });
         const unsub = eventBus.on(busKey, (event) => {
           crossTraitLog.debug("listen:fired", { busKey, targetTrait: binding.trait.name, triggers: listen.triggers });
-          enqueueAndDrain(listen.triggers, event.payload, binding.trait.name);
+          enqueueAndDrain(
+            listen.triggers,
+            applyListenPayloadMapping(listen.payloadMapping, event.payload),
+            binding.trait.name
+          );
         });
         unsubscribes.push(() => {
           crossTraitLog.debug("listen:unsubscribe", { busKey, targetTrait: binding.trait.name, triggers: listen.triggers });
@@ -51181,7 +51195,7 @@ function useTraitStateMachine(traitBindings, uiSlots, options) {
     }
     for (const event of eventsToFire) {
       stateLog.debug("mount:fire-lifecycle", { event, traitCount: traitBindings.length });
-      enqueueAndDrain(event, {});
+      enqueueAndDrain(event, { ...optionsRef.current?.initPayload ?? {} });
     }
     return () => {
       initedTraitsRef.current = /* @__PURE__ */ new Set();
@@ -51280,7 +51294,7 @@ function collectServerActiveTraits(ir, allTraits, mountedTraitNames) {
   }
   return active;
 }
-function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, serverActiveTraits }) {
+function TraitInitializer({ traits: traits2, routeParams, orbitalNames, onNavigate, onLocalFallback, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, serverActiveTraits }) {
   const bridge = useServerBridge();
   const activeTraitNames = useMemo(
     () => new Set(traits2.map((b) => b.trait.name).filter((n) => !!n)),
@@ -51309,43 +51323,48 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
       applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames);
     }
   }, [bridge.connected, bridge.sendEvent, orbitalNames, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits]);
-  const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits };
+  const opts = orbitalNames ? { onEventProcessed, navigate: onNavigate, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams } : { navigate: onNavigate, persistence, traitConfigsByName, orbitalsByTrait, embeddedTraits, initPayload: routeParams };
   const { sendEvent } = useTraitStateMachine(traits2, uiSlots, opts);
   const initSentRef = useRef(false);
   const prevTraitsRef = useRef(void 0);
+  const paramsKey = JSON.stringify(routeParams ?? {});
+  const prevParamsKeyRef = useRef(void 0);
   useEffect(() => {
     const refChanged = prevTraitsRef.current !== void 0 && prevTraitsRef.current !== traits2;
+    const paramsChanged = prevParamsKeyRef.current !== void 0 && prevParamsKeyRef.current !== paramsKey;
     navLog.debug("page:traits-effect", () => ({
       refChanged,
+      paramsChanged,
       traitsCount: Array.isArray(traits2) ? traits2.length : -1,
       hadPrev: prevTraitsRef.current !== void 0
     }));
-    if (refChanged) {
-      navLog.info("page:traits-reset", { traitsCount: Array.isArray(traits2) ? traits2.length : -1 });
+    if (refChanged || paramsChanged) {
+      navLog.info("page:traits-reset", { traitsCount: Array.isArray(traits2) ? traits2.length : -1, paramsChanged });
       uiSlots.clearAll();
       initSentRef.current = false;
     }
     prevTraitsRef.current = traits2;
-  }, [traits2, uiSlots]);
+    prevParamsKeyRef.current = paramsKey;
+  }, [traits2, uiSlots, paramsKey]);
   useEffect(() => {
     if (!orbitalNames?.length) {
-      const t = setTimeout(() => sendEvent("INIT"), 50);
+      const t = setTimeout(() => sendEvent("INIT", routeParams), 50);
       return () => clearTimeout(t);
     }
     const fallback = setTimeout(() => {
       if (!initSentRef.current) {
-        sendEvent("INIT");
+        sendEvent("INIT", routeParams);
         onLocalFallback?.();
       }
     }, 5e3);
     return () => clearTimeout(fallback);
-  }, [traits2, orbitalNames, sendEvent, onLocalFallback]);
+  }, [traits2, orbitalNames, sendEvent, onLocalFallback, routeParams]);
   useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
     (async () => {
       for (const name of orbitalNames) {
-        const { effects, meta } = await bridge.sendEvent(name, "INIT", withActiveTraits({}));
+        const { effects, meta } = await bridge.sendEvent(name, "INIT", withActiveTraits({ ...routeParams ?? {} }));
         recordServerResponse(name, "INIT", meta);
         const effectTraces = [
           { type: "fetch", args: [], status: "executed" },
@@ -51366,10 +51385,10 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFa
         applyServerEffects(effects, uiSlots, onNavigate, embeddedTraits, activeTraitNames);
       }
     })();
-  }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits]);
+  }, [bridge.connected, orbitalNames, bridge.sendEvent, uiSlots, onNavigate, embeddedTraits, activeTraitNames, withActiveTraits, routeParams]);
   return null;
 }
-function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavigate, onLocalFallback, persistence }) {
+function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, routeParams, onNavigate, onLocalFallback, persistence }) {
   const { traits: traits2, allEntities, allTraits, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = useMemo(() => {
     let base;
@@ -51511,6 +51530,7 @@ function SchemaRunner({ schema, serverUrl, transport, mockData, pageName, onNavi
           TraitInitializer,
           {
             traits: allPageTraits,
+            routeParams,
             orbitalNames: serverUrl || transport ? pageOrbitalNames : void 0,
             traitConfigsByName,
             orbitalsByTrait,
@@ -51588,27 +51608,44 @@ function OrbPreview({
       return [];
     }
   }, [parsedSchema]);
-  const initialPageName = useMemo(() => {
+  const initialPageMatch = useMemo(() => {
     if (!initialPagePath) return void 0;
-    const match = pages.find(({ page }) => page.path === initialPagePath);
-    return match?.page.name;
+    for (const { page } of pages) {
+      const params = page.path ? matchPath(page.path, initialPagePath) : null;
+      if (params !== null) return { name: page.name, params };
+    }
+    return void 0;
   }, [pages, initialPagePath]);
+  const initialPageName = initialPageMatch?.name;
   const [currentPage, setCurrentPage] = useState(initialPageName);
+  const [routeParams, setRouteParams] = useState(initialPageMatch?.params ?? {});
   const prevInitialPagePathRef = useRef(initialPagePath);
   useEffect(() => {
     if (prevInitialPagePathRef.current !== initialPagePath) {
       prevInitialPagePathRef.current = initialPagePath;
       setCurrentPage(initialPageName);
+      setRouteParams(initialPageMatch?.params ?? {});
     }
-  }, [initialPagePath, initialPageName]);
+  }, [initialPagePath, initialPageName, initialPageMatch]);
   const handleNavigate = useCallback((path) => {
-    const match = pages.find(({ page }) => page.path === path);
+    let match;
+    let params = {};
+    for (const entry of pages) {
+      const m = entry.page.path ? matchPath(entry.page.path, path) : null;
+      if (m !== null) {
+        match = entry;
+        params = m;
+        break;
+      }
+    }
     navLog.debug("handleNavigate", () => ({
       path,
       matched: match?.page.name ?? null,
+      params,
       availablePaths: pages.map((p) => p.page.path)
     }));
-    if (match) {
+    if (match?.page.name) {
+      setRouteParams(params);
       setCurrentPage(match.page.name);
       if (typeof window !== "undefined") {
         const url = new URL(window.location.href);
@@ -51678,6 +51715,7 @@ function OrbPreview({
             transport,
             mockData: effectiveMockData,
             pageName: currentPage,
+            routeParams,
             onNavigate: handleNavigate,
             onLocalFallback: handleLocalFallback,
             persistence
@@ -53426,9 +53464,9 @@ function OrbInspector({ node, schema, editable = false, userType = "builder", th
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-xs uppercase tracking-wider mb-2", children: t("avl.transition") }),
           /* @__PURE__ */ jsxs("svg", { width: "100%", height: 44, viewBox: "0 0 280 44", children: [
             /* @__PURE__ */ jsx(AvlState, { x: 8, y: 8, name: fromState, role: getStateRole(fromState), width: 90, height: 26 }),
-            /* @__PURE__ */ jsx("line", { x1: 104, y1: 21, x2: 158, y2: 21, stroke: "#1E293B", strokeWidth: 2, markerEnd: "url(#orb-arrow)" }),
+            /* @__PURE__ */ jsx("line", { x1: 104, y1: 21, x2: 158, y2: 21, stroke: "var(--color-foreground)", strokeWidth: 2, markerEnd: "url(#orb-arrow)" }),
             /* @__PURE__ */ jsx(AvlState, { x: 164, y: 8, name: toState, role: getStateRole(toState), width: 90, height: 26 }),
-            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "orb-arrow", markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: "#1E293B" }) }) })
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", { id: "orb-arrow", markerWidth: 8, markerHeight: 6, refX: 8, refY: 3, orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: "var(--color-foreground)" }) }) })
           ] }),
           traitName && /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
             traitName,
@@ -53539,7 +53577,7 @@ function OrbPatternTree({ config, depth }) {
   return /* @__PURE__ */ jsxs(Box, { style: { paddingLeft: depth * 12 }, children: [
     /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary font-semibold text-xs", children: type }),
     propEntries.slice(0, 5).map(([key, val]) => {
-      const display = typeof val === "string" ? val.startsWith("@") ? /* @__PURE__ */ jsx("span", { className: "text-purple-500", children: val }) : `"${val}"` : Array.isArray(val) && val.length > 0 && typeof val[0] === "string" && val[0].includes("/") ? /* @__PURE__ */ jsxs("span", { className: "text-amber-600", children: [
+      const display = typeof val === "string" ? val.startsWith("@") ? /* @__PURE__ */ jsx("span", { className: "text-primary", children: val }) : `"${val}"` : Array.isArray(val) && val.length > 0 && typeof val[0] === "string" && val[0].includes("/") ? /* @__PURE__ */ jsxs("span", { className: "text-warning", children: [
         "(",
         val.map(String).join(" "),
         ")"