@elaraai/e3-ui-components 1.0.60 → 1.0.61

package/dist/index.cjs

@@ -8944,7 +8944,7 @@ const ConflictRow = React.memo(function ConflictRow2({ row, depth, bindingPathSt
             gap: "8px",
             mt: "10px",
             p: "12px",
-            bg: "white",
+            bg: "bg.surface",
             border: "1px solid",
             borderColor: "fg.warning",
             borderRadius: "md",
@@ -20466,28 +20466,18 @@ function FiAlertTriangle(props) {
   return GenIcon({ "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "9", "x2": "12", "y2": "13" }, "child": [] }, { "tag": "line", "attr": { "x1": "12", "y1": "17", "x2": "12.01", "y2": "17" }, "child": [] }] })(props);
 }
 const NODE_KIND_ACCENT = {
-  process: "#3a7780",
-  // brand.600
-  computation: "#42757d",
-  // color-mix(brand.600 60%, gray.500)
-  decision: "#2b4b55",
-  // brand.700
-  objective: "#253333",
-  // gray.800
-  kpi: "#2f7a5b",
-  // status.pos
-  agent: "#6d5a7a",
-  // color-mix(brand.700 45%, status.warn 15%, gray.500) — plum, people/role tone
-  data: "#b8862d",
-  // status.warn
-  resource: "#56727a",
-  // color-mix(brand.600 30%, gray.500)
-  policy: "#8d7a5f",
-  // color-mix(status.warn 50%, gray.600)
-  document: "#bcd1d3",
-  // color-mix(brand.600 30%, gray.100)
-  group: "#4a5f5f"
-  // gray.600
+  process: "brand.600",
+  computation: "color-mix(in srgb, var(--chakra-colors-brand-600) 60%, var(--chakra-colors-gray-500))",
+  decision: "brand.700",
+  objective: "gray.800",
+  kpi: "status.pos",
+  agent: "color-mix(in srgb, var(--chakra-colors-brand-700) 45%, color-mix(in srgb, var(--chakra-colors-status-warn) 15%, var(--chakra-colors-gray-500)))",
+  // plum — people/role tone
+  data: "status.warn",
+  resource: "color-mix(in srgb, var(--chakra-colors-brand-600) 30%, var(--chakra-colors-gray-500))",
+  policy: "color-mix(in srgb, var(--chakra-colors-status-warn) 50%, var(--chakra-colors-gray-600))",
+  document: "color-mix(in srgb, var(--chakra-colors-brand-600) 30%, var(--chakra-colors-gray-100))",
+  group: "gray.600"
 };
 const EDGE_DASH = {
   // flow — solid
@@ -57172,20 +57162,7 @@ function OntologyEditorBody({
   const proOptions = React.useMemo(() => ({ hideAttribution: true }), []);
   const miniMapNodeColor = React.useCallback((node2) => {
     const data4 = node2.data;
-    const accent = {
-      process: "#3a7780",
-      computation: "#42757d",
-      decision: "#2b4b55",
-      objective: "#253333",
-      kpi: "#2f7a5b",
-      agent: "#6d5a7a",
-      data: "#b8862d",
-      resource: "#56727a",
-      policy: "#8d7a5f",
-      document: "#bcd1d3",
-      group: "#4a5f5f"
-    };
-    return accent[data4.type] ?? "#6b8080";
+    return NODE_KIND_ACCENT[data4.type] ?? "fg.muted";
   }, []);
   const getNode = React.useCallback(
     (id3) => ontology.nodes.find((n2) => n2.id === id3),
@@ -64457,10 +64434,10 @@ function HighlightedLine({
         "span",
         {
           style: {
-            backgroundColor: isCurrent ? "#f59e0b" : "#fbbf24",
-            color: "#000",
+            backgroundColor: isCurrent ? "var(--chakra-colors-status-warn)" : "var(--chakra-colors-status-warn-subtle-strong)",
+            color: "var(--chakra-colors-fg-default)",
             borderRadius: "2px",
-            outline: isCurrent ? "2px solid #f59e0b" : void 0
+            outline: isCurrent ? "2px solid var(--chakra-colors-status-warn)" : void 0
           },
           children: text.slice(match2.start, match2.end)
         },
@@ -64613,7 +64590,7 @@ function VirtualizedLogViewer({ content, tabs }) {
           {
             px: 3,
             py: 2,
-            bg: "gray.800",
+            bg: "bg.inverse",
             borderTopRadius: "md",
             align: "center",
             justify: "space-between",
@@ -64621,8 +64598,8 @@ function VirtualizedLogViewer({ content, tabs }) {
             gap: 2,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.RootProvider, { value: tabs, size: "sm", variant: "line", children: /* @__PURE__ */ jsxRuntime.jsxs(react.Tabs.List, { borderBottom: "none", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stdout", color: "gray.300", _selected: { color: "white" }, children: "stdout" }),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stderr", color: "gray.300", _selected: { color: "white" }, children: "stderr" })
+                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stdout", color: "fg.subtle", _selected: { color: "fg.inverse" }, children: "stdout" }),
+                /* @__PURE__ */ jsxRuntime.jsx(react.Tabs.Trigger, { value: "stderr", color: "fg.subtle", _selected: { color: "fg.inverse" }, children: "stderr" })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { align: "center", gap: 1, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -64633,22 +64610,22 @@ function VirtualizedLogViewer({ content, tabs }) {
                     value: searchQuery,
                     onChange: (e3) => setSearchQuery(e3.target.value),
                     onKeyDown: handleSearchKeyDown,
-                    bg: "gray.700",
+                    bg: "bg.inverse",
                     border: "none",
-                    color: "white",
-                    _placeholder: { color: "gray.400" },
+                    color: "fg.inverse",
+                    _placeholder: { color: "fg.subtle" },
                     width: "min(150px, 40vw)"
                   }
                 ),
-                searchQuery && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "gray.400", minWidth: "50px", textAlign: "center", children: matches33.length > 0 ? `${currentMatchIndex + 1}/${matches33.length}` : "0/0" }),
+                searchQuery && /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "xs", color: "fg.subtle", minWidth: "50px", textAlign: "center", children: matches33.length > 0 ? `${currentMatchIndex + 1}/${matches33.length}` : "0/0" }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   react.IconButton,
                   {
                     variant: "ghost",
                     size: "xs",
                     onClick: handlePrevMatch,
-                    color: "gray.400",
-                    _hover: { color: "white" },
+                    color: "fg.subtle",
+                    _hover: { color: "fg.inverse" },
                     "aria-label": "Previous match",
                     disabled: matches33.length === 0,
                     children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faChevronUp })
@@ -64660,8 +64637,8 @@ function VirtualizedLogViewer({ content, tabs }) {
                     variant: "ghost",
                     size: "xs",
                     onClick: handleNextMatch,
-                    color: "gray.400",
-                    _hover: { color: "white" },
+                    color: "fg.subtle",
+                    _hover: { color: "fg.inverse" },
                     "aria-label": "Next match",
                     disabled: matches33.length === 0,
                     children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faChevronDown })
@@ -64673,8 +64650,8 @@ function VirtualizedLogViewer({ content, tabs }) {
                     variant: "ghost",
                     size: "xs",
                     onClick: handleCopy,
-                    color: "gray.400",
-                    _hover: { color: "white" },
+                    color: "fg.subtle",
+                    _hover: { color: "fg.inverse" },
                     "aria-label": "Copy logs",
                     children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: copied ? faCheck : faCopy })
                   }
@@ -64695,7 +64672,7 @@ function VirtualizedLogViewer({ content, tabs }) {
               borderTopWidth: "0",
               fontFamily: "mono",
               fontSize: "sm",
-              color: "gray.100",
+              color: "fg.inverse",
               onScroll: handleScroll,
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -64720,12 +64697,12 @@ function VirtualizedLogViewer({ content, tabs }) {
                           height: `${virtualItem.size}px`,
                           transform: `translateY(${virtualItem.start}px)`
                         },
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 3, py: 0.5, _hover: { bg: "gray.800" }, children: [
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { px: 3, py: 0.5, _hover: { bg: "bg.inverse" }, children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             react.Text,
                             {
                               as: "span",
-                              color: "gray.500",
+                              color: "fg.muted",
                               minWidth: "50px",
                               textAlign: "right",
                               mr: 3,
@@ -65023,20 +65000,20 @@ function ValueNode({
 }) {
   if (depth > 20) {
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
         label,
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "[max depth reached]" })
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "[max depth reached]" })
     ] });
   }
   if (isPrimitive(type)) {
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
         label,
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: type.type === "String" ? "green.400" : type.type === "Integer" || type.type === "Float" ? "blue.400" : "gray.300", children: formatPrimitive(type, value) }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: type.type === "String" ? "fg.success" : type.type === "Integer" || type.type === "Float" ? "link" : "fg.muted", children: formatPrimitive(type, value) }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
     ] });
   }
@@ -65046,28 +65023,28 @@ function ValueNode({
     const elementType = type.value;
     if (items.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "[]" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: "Array[0]" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "[]" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: "Array[0]" })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
         {
           py: 1,
           borderBottom: index2 < items.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
+          borderColor: "border.strong",
           children: /* @__PURE__ */ jsxRuntime.jsx(
             ValueNode,
             {
@@ -65087,21 +65064,21 @@ function ValueNode({
     const obj = value;
     if (fields.length === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "{}" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: "Struct" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "{}" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "warning", variant: "subtle", children: "Struct" })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "warning", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
         ValueNode,
@@ -65121,11 +65098,11 @@ function ValueNode({
     const activeCase = cases.find((c2) => c2.name === variant.type);
     if (!activeCase) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "red.400", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "fg.danger", children: [
           "Unknown variant: ",
           variant.type
         ] })
@@ -65133,11 +65110,11 @@ function ValueNode({
     }
     if (activeCase.type.type === "Null") {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: [
           ".",
           variant.type
         ] })
@@ -65145,11 +65122,11 @@ function ValueNode({
     }
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: [
           ".",
           variant.type
         ] })
@@ -65170,29 +65147,29 @@ function ValueNode({
     const valueType = type.value.value;
     if (map3.size === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "Map{}" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: "Dict[0]" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "Map{}" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "info", variant: "subtle", children: "Dict[0]" })
       ] });
     }
     const entries = Array.from(map3.entries());
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "info", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: entries.map(([k2, v3], i) => /* @__PURE__ */ jsxRuntime.jsxs(
         react.Box,
         {
           py: 2,
           borderBottom: i < entries.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
+          borderColor: "border.strong",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { type: keyType, value: k2, depth: depth + 1 }),
             /* @__PURE__ */ jsxRuntime.jsx(ValueNode, { type: valueType, value: v3, depth: depth + 1 })
@@ -65207,29 +65184,29 @@ function ValueNode({
     const elementType = type.value;
     if (set3.size === 0) {
       return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "Set{}" }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: "Set[0]" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "Set{}" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: "Set[0]" })
       ] });
     }
     const items = Array.from(set3);
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: typeLabel })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "brand", variant: "subtle", children: typeLabel })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
         react.Box,
         {
           py: 1,
           borderBottom: i < items.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
+          borderColor: "border.strong",
           children: /* @__PURE__ */ jsxRuntime.jsx(
             ValueNode,
             {
@@ -65247,11 +65224,11 @@ function ValueNode({
     const ref = value;
     return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
           label,
           ":"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "red", variant: "subtle", children: "Ref" })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "danger", variant: "subtle", children: "Ref" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pl: 4, children: /* @__PURE__ */ jsxRuntime.jsx(
         ValueNode,
@@ -65265,20 +65242,20 @@ function ValueNode({
   }
   if (type.type === "Function" || type.type === "AsyncFunction") {
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
         label,
         ":"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "gray.500", children: "[function]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "span", color: "fg.muted", children: "[function]" }),
       /* @__PURE__ */ jsxRuntime.jsx(react.Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "accent.purple", fontWeight: "medium", children: [
       label,
       ":"
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "gray.500", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Text, { as: "span", color: "fg.muted", children: [
       "[",
       type.type,
       "]"