@elaraai/e3-ui-components 1.0.39 → 1.0.41

package/dist/index.js

@@ -27,11 +27,12 @@ import { workspaceStatus, datasetListAt, datasetList, dataflowExecuteLaunch, dat
 import { jsx as jsx$1, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useId, useMemo, useContext, createContext, useRef, useEffect, useState, useCallback, useSyncExternalStore, memo, forwardRef, useLayoutEffect, Fragment as Fragment$1, Component } from "react";
-import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useToken, Drawer, Portal, Field, NativeSelect, Textarea, chakra, Tooltip, SegmentGroup, Menu, HoverCard, useChakraContext, Spinner, Code, Clipboard, IconButton, Badge, Button, Tabs, useTabs } from "@chakra-ui/react";
-import { implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, usePersistedState, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, NavImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
+import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useToken, Drawer, Portal, Field, NativeSelect, Textarea, chakra, Tooltip, SegmentGroup, Menu, HoverCard, useChakraContext, Spinner, Code, Clipboard, IconButton, Button, Tabs, Badge, useTabs } from "@chakra-ui/react";
+import { implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, useContainerBelow, usePersistedState, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, NavImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl, LoadingIcon, EastChakraValueTree, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
 import { createPortal } from "react-dom";
 import { sliceMatches } from "@elaraai/east-ui/internal";
-import { QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
+import { QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery, useQueryClient, keepPreviousData } from "@tanstack/react-query";
+import { ValueTree } from "@elaraai/east-ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 var Subscribable = class {
   constructor() {
@@ -8921,7 +8922,7 @@ const ConflictRow = memo(function ConflictRow2({ row, depth, bindingPathStr, ser
           Box,
           {
             display: "grid",
-            gridTemplateColumns: supportsManual ? "1fr 1fr 1fr" : "1fr 1fr",
+            gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
             gap: "8px",
             mt: "10px",
             p: "12px",
@@ -20509,8 +20510,8 @@ const NODE_ICONS = {
 const HANDLE_BASE = {
   width: 8,
   height: 8,
-  background: "#ffffff",
-  border: "1.4px solid #6b8080",
+  background: "var(--chakra-colors-bg-surface)",
+  border: "1.4px solid var(--chakra-colors-gray-500)",
   boxSizing: "border-box",
   zIndex: 5
 };
@@ -57002,6 +57003,18 @@ function useBindingOntology(binding) {
   }, [handle]);
   return { ontology, pending, mutate, commit, discard };
 }
+function useIsDarkMode() {
+  const [dark, setDark] = useState(() => typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
+  useEffect(() => {
+    const el = document.documentElement;
+    const update2 = () => setDark(el.classList.contains("dark"));
+    update2();
+    const observer = new MutationObserver(update2);
+    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return dark;
+}
 let nodeIdSeq = 0;
 function freshNodeId() {
   nodeIdSeq += 1;
@@ -57031,6 +57044,7 @@ function OntologyEditorBody({
   handlers
 }) {
   const [searchQuery, setSearchQuery] = useState("");
+  const isDark = useIsDarkMode();
   const [focusedNodeId, setFocusedNodeId] = useState(null);
   const [selectedNodeId, setSelectedNodeId] = useState(null);
   const [paneMenu, setPaneMenu] = useState(null);
@@ -57221,9 +57235,10 @@ function OntologyEditorBody({
         nodesConnectable: !readonly,
         elementsSelectable: true,
         fitView: true,
+        colorMode: isDark ? "dark" : "light",
         children: [
-          /* @__PURE__ */ jsx$1(Background, { id: "ont-minor", variant: BackgroundVariant.Lines, gap: 24, lineWidth: 1, color: "rgba(226, 232, 232, 0.35)" }),
-          /* @__PURE__ */ jsx$1(Background, { id: "ont-major", variant: BackgroundVariant.Lines, gap: 120, lineWidth: 1, color: "rgba(226, 232, 232, 0.8)" }),
+          /* @__PURE__ */ jsx$1(Background, { id: "ont-minor", variant: BackgroundVariant.Lines, gap: 24, lineWidth: 1, color: "color-mix(in srgb, var(--chakra-colors-border-subtle) 35%, transparent)" }),
+          /* @__PURE__ */ jsx$1(Background, { id: "ont-major", variant: BackgroundVariant.Lines, gap: 120, lineWidth: 1, color: "color-mix(in srgb, var(--chakra-colors-border-subtle) 80%, transparent)" }),
           /* @__PURE__ */ jsx$1(Controls, {}),
           !hideMiniMap && /* @__PURE__ */ jsx$1(MiniMap, { nodeColor: miniMapNodeColor, maskColor: "rgba(17, 27, 34, 0.10)" })
         ]
@@ -61110,7 +61125,7 @@ function LoadingSkeleton() {
       /* @__PURE__ */ jsx$1(Box, { flex: "1" }),
       line2("72px", "16px")
     ] }),
-    /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: "304px minmax(0,1fr)", alignItems: "start", children: [
+    /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: "304px minmax(0,1fr)", css: { "@media (max-width: 640px)": { gridTemplateColumns: "1fr" } }, alignItems: "start", children: [
       /* @__PURE__ */ jsx$1(Box, { borderRightWidth: "1px", borderColor: "border.subtle", p: "4.5", display: "flex", flexDirection: "column", gap: "5", children: [0, 1, 2, 3].map((n2) => /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: "2", children: [
         line2("150px", "12px"),
         block("40px")
@@ -61374,7 +61389,7 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
       canRun && /* @__PURE__ */ jsx$1(ActionButton, { button, variant: "solid", label: "Run", onClick: onRun, disabled: runDisabled, pulse: stale }),
       canCommit && /* @__PURE__ */ jsx$1(ActionButton, { button, variant: "ghost", label: "Commit", onClick: onCommit, disabled: commitDisabled })
     ] }),
-    /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: "304px minmax(0,1fr)", alignItems: "start", children: [
+    /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: "304px minmax(0,1fr)", css: { "@media (max-width: 640px)": { gridTemplateColumns: "1fr" } }, alignItems: "start", children: [
       /* @__PURE__ */ jsxs(Box, { borderRightWidth: "1px", borderColor: "border.subtle", children: [
         /* @__PURE__ */ jsxs(Step, { n: 1, title: "What did you change?", help: "step_treatment", children: [
           /* @__PURE__ */ jsx$1(ColumnPick, { column: vs.treatment, kind: vs.treatmentKind, badge, button, readonly, choices: columns.filter((c2) => c2.kind === "boolean" || c2.kind === "integer").map((c2) => c2.name), onPick: (c2) => editConfig({ ...config2, treatment: c2 }) }),
@@ -62559,7 +62574,7 @@ function LeverEditor({ leverCase, payload, onInject }) {
         )
       ] }, `${k2}.${field}`));
     }
-    return /* @__PURE__ */ jsx$1(Box, { width: "180px", flexShrink: 0, children: primitiveInput(active, `${k2}.value`, () => valRef.current, (v3) => {
+    return /* @__PURE__ */ jsx$1(Box, { width: "min(180px, 100%)", flexShrink: 0, children: primitiveInput(active, `${k2}.value`, () => valRef.current, (v3) => {
       valRef.current = v3;
     }) }, `${k2}.wrap`);
   }, [active, opTag, leverCase]);
@@ -62790,7 +62805,7 @@ const JudgementFacet = memo(function JudgementFacet2({ decision, handle, leverPa
       var _a3;
       const current = (_a3 = judgement.answers.get(prompt.id)) == null ? void 0 : _a3.type;
       return /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap", children: [
-        /* @__PURE__ */ jsx$1(Text, { fontSize: "13px", fontWeight: "medium", flex: "1", minW: "180px", children: prompt.text }),
+        /* @__PURE__ */ jsx$1(Text, { fontSize: "13px", fontWeight: "medium", flex: "1", minW: "min(180px, 100%)", children: prompt.text }),
         /* @__PURE__ */ jsx$1(Box, { display: "flex", gap: "6px", flexShrink: 0, children: ANSWERS.map((a2) => /* @__PURE__ */ jsx$1(
           chakra.button,
           {
@@ -62848,7 +62863,7 @@ const JudgementFacet = memo(function JudgementFacet2({ decision, handle, leverPa
             }
           }
         ) }) : /* @__PURE__ */ jsx$1(Text, { ...caption, color: "fg", flexShrink: 0, children: activeLever.label }),
-        /* @__PURE__ */ jsx$1(Box, { flex: "1", minW: "260px", children: /* @__PURE__ */ jsx$1(
+        /* @__PURE__ */ jsx$1(Box, { flex: "1", minW: "min(260px, 100%)", children: /* @__PURE__ */ jsx$1(
           LeverEditor,
           {
             leverCase: activeLever.case,
@@ -63157,18 +63172,7 @@ const EastChakraDecisionQueue = memo(function EastChakraDecisionQueue2({ value,
   useSliceReactivity(sliceHandle == null ? void 0 : sliceHandle.key);
   const sliceState = sliceHandle !== null ? sliceHandle.read() : null;
   const rootRef = useRef(null);
-  const [narrow, setNarrow] = useState(false);
-  useLayoutEffect(() => {
-    const el = rootRef.current;
-    if (!el || typeof ResizeObserver === "undefined") return;
-    const ro = new ResizeObserver((entries) => {
-      var _a3;
-      const width2 = ((_a3 = entries[0]) == null ? void 0 : _a3.contentRect.width) ?? 0;
-      setNarrow(width2 > 0 && width2 < NARROW_PX);
-    });
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
+  const narrow = useContainerBelow(rootRef, NARROW_PX);
   const [exiting, setExiting] = useState(/* @__PURE__ */ new Map());
   const prevRef = useRef(null);
   const reasonsRef = useRef(/* @__PURE__ */ new Map());
@@ -63853,33 +63857,35 @@ function getTaskMetadata(details) {
   return ((_a2 = details.metadata) == null ? void 0 : _a2.type) === "some" ? details.metadata.value : null;
 }
 const variantStyles = {
+  // Mode-aware semantic tokens (the raw `red.50` / `gray.50` washes rendered
+  // as bright light boxes in dark mode — #362).
   error: {
-    bg: "red.50",
-    titleColor: "red.600",
-    messageColor: "red.500",
-    detailsBg: "red.100",
-    detailsColor: "red.800"
+    bg: "bg.danger.subtle",
+    titleColor: "fg.danger",
+    messageColor: "fg.muted",
+    detailsBg: "bg.muted",
+    detailsColor: "fg.default"
   },
   warning: {
-    bg: "yellow.50",
-    titleColor: "yellow.700",
-    messageColor: "yellow.600",
-    detailsBg: "yellow.100",
-    detailsColor: "yellow.800"
+    bg: "bg.warning.subtle",
+    titleColor: "fg.warning",
+    messageColor: "fg.muted",
+    detailsBg: "bg.muted",
+    detailsColor: "fg.default"
   },
   info: {
-    bg: "gray.50",
-    titleColor: "gray.500",
-    messageColor: "gray.400",
-    detailsBg: "gray.100",
-    detailsColor: "gray.700"
+    bg: "transparent",
+    titleColor: "fg.muted",
+    messageColor: "fg.subtle",
+    detailsBg: "bg.muted",
+    detailsColor: "fg.default"
   },
   loading: {
-    bg: "gray.50",
-    titleColor: "gray.500",
-    messageColor: "gray.400",
-    detailsBg: "gray.100",
-    detailsColor: "gray.700"
+    bg: "transparent",
+    titleColor: "fg.muted",
+    messageColor: "fg.subtle",
+    detailsBg: "bg.muted",
+    detailsColor: "fg.default"
   }
 };
 function StatusDisplay({ variant: variant2, title, message, details }) {
@@ -63896,7 +63902,7 @@ function StatusDisplay({ variant: variant2, title, message, details }) {
         justifyContent: "center",
         bg: styles2.bg,
         children: /* @__PURE__ */ jsxs(VStack, { gap: 2, children: [
-          variant2 === "loading" && /* @__PURE__ */ jsx$1(Spinner, { size: "md" }),
+          variant2 === "loading" && /* @__PURE__ */ jsx$1(LoadingIcon, { animate: true, size: "52px" }),
           /* @__PURE__ */ jsx$1(Text, { color: styles2.titleColor, fontSize: variant2 === "loading" ? "sm" : "lg", children: title }),
           message && /* @__PURE__ */ jsx$1(Text, { color: styles2.messageColor, fontSize: "sm", children: message }),
           details && /* @__PURE__ */ jsxs(Box, { position: "relative", mt: 2, width: "100%", children: [
@@ -63976,335 +63982,6 @@ class ErrorBoundary extends Component {
     return this.props.children;
   }
 }
-function formatPrimitive(type, value) {
-  switch (type.type) {
-    case "Null":
-      return "null";
-    case "Boolean":
-      return value ? "true" : "false";
-    case "Integer":
-      return String(value);
-    case "Float": {
-      const num2 = value;
-      if (Number.isNaN(num2)) return "NaN";
-      if (!Number.isFinite(num2)) return num2 > 0 ? "Infinity" : "-Infinity";
-      return String(num2);
-    }
-    case "String":
-      return `"${value}"`;
-    case "DateTime":
-      return value.toISOString();
-    case "Blob":
-      return `Blob[${value.length} bytes]`;
-    default:
-      return String(value);
-  }
-}
-function isPrimitive(type) {
-  return ["Null", "Boolean", "Integer", "Float", "String", "DateTime", "Blob", "Never"].includes(type.type);
-}
-function getTypeLabel(type, value) {
-  switch (type.type) {
-    case "Array":
-      return `Array[${value.length}]`;
-    case "Set":
-      return `Set[${value.size}]`;
-    case "Dict":
-      return `Dict[${value.size}]`;
-    case "Struct":
-      return "Struct";
-    case "Variant":
-      return `Variant.${value.type}`;
-    case "Ref":
-      return "Ref";
-    default:
-      return type.type;
-  }
-}
-function ValueNode({
-  type,
-  value,
-  label,
-  depth
-}) {
-  if (depth > 20) {
-    return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-        label,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "[max depth reached]" })
-    ] });
-  }
-  if (isPrimitive(type)) {
-    return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-        label,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx$1(Text, { as: "span", color: type.type === "String" ? "green.400" : type.type === "Integer" || type.type === "Float" ? "blue.400" : "gray.300", children: formatPrimitive(type, value) }),
-      /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
-    ] });
-  }
-  const typeLabel = getTypeLabel(type, value);
-  if (type.type === "Array") {
-    const items = value;
-    const elementType = type.value;
-    if (items.length === 0) {
-      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "[]" }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: "Array[0]" })
-      ] });
-    }
-    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: typeLabel })
-      ] }),
-      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: items.map((item, index2) => /* @__PURE__ */ jsx$1(
-        Box,
-        {
-          py: 1,
-          borderBottom: index2 < items.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
-          children: /* @__PURE__ */ jsx$1(
-            ValueNode,
-            {
-              type: elementType,
-              value: item,
-              label: `[${index2}]`,
-              depth: depth + 1
-            }
-          )
-        },
-        index2
-      )) })
-    ] }) });
-  }
-  if (type.type === "Struct") {
-    const fields = type.value;
-    const obj = value;
-    if (fields.length === 0) {
-      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "{}" }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: "Struct" })
-      ] });
-    }
-    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: typeLabel })
-      ] }),
-      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: fields.map((field) => /* @__PURE__ */ jsx$1(
-        ValueNode,
-        {
-          type: field.type,
-          value: obj[field.name],
-          label: field.name,
-          depth: depth + 1
-        },
-        field.name
-      )) })
-    ] }) });
-  }
-  if (type.type === "Variant") {
-    const cases = type.value;
-    const variant2 = value;
-    const activeCase = cases.find((c2) => c2.name === variant2.type);
-    if (!activeCase) {
-      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxs(Text, { as: "span", color: "red.400", children: [
-          "Unknown variant: ",
-          variant2.type
-        ] })
-      ] });
-    }
-    if (activeCase.type.type === "Null") {
-      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxs(Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
-          ".",
-          variant2.type
-        ] })
-      ] });
-    }
-    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsxs(Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
-          ".",
-          variant2.type
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: /* @__PURE__ */ jsx$1(
-        ValueNode,
-        {
-          type: activeCase.type,
-          value: variant2.value,
-          depth: depth + 1
-        }
-      ) })
-    ] }) });
-  }
-  if (type.type === "Dict") {
-    const map3 = value;
-    const keyType = type.value.key;
-    const valueType = type.value.value;
-    if (map3.size === 0) {
-      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "Map{}" }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: "Dict[0]" })
-      ] });
-    }
-    const entries = Array.from(map3.entries());
-    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: typeLabel })
-      ] }),
-      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: entries.map(([k2, v3], i) => /* @__PURE__ */ jsxs(
-        Box,
-        {
-          py: 2,
-          borderBottom: i < entries.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
-          children: [
-            /* @__PURE__ */ jsx$1(ValueNode, { type: keyType, value: k2, depth: depth + 1 }),
-            /* @__PURE__ */ jsx$1(ValueNode, { type: valueType, value: v3, depth: depth + 1 })
-          ]
-        },
-        i
-      )) })
-    ] }) });
-  }
-  if (type.type === "Set") {
-    const set3 = value;
-    const elementType = type.value;
-    if (set3.size === 0) {
-      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "Set{}" }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: "Set[0]" })
-      ] });
-    }
-    const items = Array.from(set3);
-    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: typeLabel })
-      ] }),
-      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: items.map((item, i) => /* @__PURE__ */ jsx$1(
-        Box,
-        {
-          py: 1,
-          borderBottom: i < items.length - 1 ? "1px solid" : void 0,
-          borderColor: "gray.700",
-          children: /* @__PURE__ */ jsx$1(
-            ValueNode,
-            {
-              type: elementType,
-              value: item,
-              depth: depth + 1
-            }
-          )
-        },
-        i
-      )) })
-    ] }) });
-  }
-  if (type.type === "Ref") {
-    const ref = value;
-    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
-      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
-        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-          label,
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "red", variant: "subtle", children: "Ref" })
-      ] }),
-      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: /* @__PURE__ */ jsx$1(
-        ValueNode,
-        {
-          type: type.value,
-          value: ref.value,
-          depth: depth + 1
-        }
-      ) })
-    ] }) });
-  }
-  if (type.type === "Function" || type.type === "AsyncFunction") {
-    return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-      label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-        label,
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "[function]" }),
-      /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
-    label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
-      label,
-      ":"
-    ] }),
-    /* @__PURE__ */ jsxs(Text, { as: "span", color: "gray.500", children: [
-      "[",
-      type.type,
-      "]"
-    ] })
-  ] });
-}
-function EastValueViewer({ type, value }) {
-  return /* @__PURE__ */ jsx$1(
-    Box,
-    {
-      layerStyle: "surface.code.dark",
-      fontFamily: "mono",
-      fontSize: "sm",
-      p: 4,
-      overflow: "auto",
-      maxHeight: "100%",
-      children: /* @__PURE__ */ jsx$1(ValueNode, { type, value, depth: 0 })
-    }
-  );
-}
 const DEFAULT_SIZE_LIMIT = 200 * 1024;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -64333,8 +64010,10 @@ const DatasetPreview = memo(function DatasetPreview2({
   path: path2,
   requestOptions,
   sizeLimit = DEFAULT_SIZE_LIMIT,
-  pollInterval
+  pollInterval,
+  editable = false
 }) {
+  var _a2;
   const statusQuery = useDatasetStatus(apiUrl, repo, workspace, path2, {
     ...requestOptions != null && { requestOptions },
     ...pollInterval !== void 0 && { pollInterval }
@@ -64348,9 +64027,35 @@ const DatasetPreview = memo(function DatasetPreview2({
     ...requestOptions != null && { requestOptions },
     type: status == null ? void 0 : status.type,
     hash: (status == null ? void 0 : status.hash) ?? null,
-    enabled: shouldFetch
+    enabled: shouldFetch,
+    // An edit changes the value's content hash → a new query key. Keep the
+    // current value on screen while the new one loads so an edit doesn't
+    // flash the loading state (only the FIRST load has no previous value).
+    queryOverrides: { placeholderData: keepPreviousData }
   });
   const download = useDatasetDownload(apiUrl, repo, workspace, path2, requestOptions);
+  const setMutation = useDatasetSet(apiUrl, repo, workspace, requestOptions);
+  const queryClient = useQueryClient();
+  const type = status == null ? void 0 : status.type;
+  const decoded = (_a2 = valueQuery.data) == null ? void 0 : _a2.decoded;
+  const write = useCallback(async (next2) => {
+    if (workspace == null || path2 == null || type === void 0) return;
+    const treePath = path2.split(".").filter(Boolean).map((p2) => variant("field", p2));
+    const data4 = encodeBeast2For(type)(next2);
+    await setMutation.mutateAsync({ path: treePath, data: data4 });
+    await queryClient.invalidateQueries({ queryKey: ["datasetStatus", apiUrl, repo, workspace, path2] });
+  }, [apiUrl, repo, workspace, path2, type, setMutation, queryClient]);
+  const treeValue = useMemo(() => {
+    if (type === void 0 || decoded === void 0) return null;
+    const root2 = ValueTree.materialize(type, decoded);
+    const wire = editable ? {
+      onEdit: some((p2, leaf) => write(ValueTree.applyEdit(type, decoded, p2, { kind: "edit", leaf }))),
+      onInsert: some((p2) => write(ValueTree.applyEdit(type, decoded, p2, { kind: "insert" }))),
+      onRemove: some((p2) => write(ValueTree.applyEdit(type, decoded, p2, { kind: "remove" }))),
+      onTag: some((p2, tag) => write(ValueTree.applyEdit(type, decoded, p2, { kind: "tag", tag })))
+    } : { onEdit: none$1, onInsert: none$1, onRemove: none$1, onTag: none$1 };
+    return { root: root2, ...wire, style: some({ height: some("100%"), maxHeight: none$1 }) };
+  }, [type, decoded, editable, write]);
   if (statusQuery.isLoading) return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "loading", title: "Loading..." });
   if (statusQuery.error) {
     const { message, details } = formatApiError(statusQuery.error);
@@ -64378,7 +64083,7 @@ const DatasetPreview = memo(function DatasetPreview2({
       /* @__PURE__ */ jsx$1(Text, { fontSize: "xs", color: "fg.muted", mr: 2, alignSelf: "center", children: formatSize(sizeBytes) }),
       /* @__PURE__ */ jsx$1(DownloadButton, { onClick: download })
     ] }),
-    /* @__PURE__ */ jsx$1(Box, { flex: 1, overflow: "auto", p: "4", minHeight: 0, children: /* @__PURE__ */ jsx$1(EastValueViewer, { type: status.type, value: valueQuery.data.decoded }) })
+    /* @__PURE__ */ jsx$1(Box, { flex: 1, minHeight: 0, overflow: "hidden", children: treeValue !== null && /* @__PURE__ */ jsx$1(EastChakraValueTree, { value: treeValue, storageKey: path2 ?? "value" }) })
   ] });
 });
 const InputPreview = memo(function InputPreview2({
@@ -64398,6 +64103,7 @@ const InputPreview = memo(function InputPreview2({
         repo,
         workspace,
         path: path2,
+        editable: true,
         ...requestOptions != null && { requestOptions }
       }
     ) })
@@ -64697,7 +64403,7 @@ function VirtualizedLogViewer({ content, tabs }) {
                     border: "none",
                     color: "white",
                     _placeholder: { color: "gray.400" },
-                    width: "150px"
+                    width: "min(150px, 40vw)"
                   }
                 ),
                 searchQuery && /* @__PURE__ */ jsx$1(Text, { fontSize: "xs", color: "gray.400", minWidth: "50px", textAlign: "center", children: matches33.length > 0 ? `${currentMatchIndex + 1}/${matches33.length}` : "0/0" }),
@@ -65028,6 +64734,335 @@ const TaskPreview = memo(function TaskPreview2({
     ) })
   ] });
 }, (prev2, next2) => prev2.task === next2.task && prev2.repo === next2.repo && prev2.workspace === next2.workspace);
+function formatPrimitive(type, value) {
+  switch (type.type) {
+    case "Null":
+      return "null";
+    case "Boolean":
+      return value ? "true" : "false";
+    case "Integer":
+      return String(value);
+    case "Float": {
+      const num2 = value;
+      if (Number.isNaN(num2)) return "NaN";
+      if (!Number.isFinite(num2)) return num2 > 0 ? "Infinity" : "-Infinity";
+      return String(num2);
+    }
+    case "String":
+      return `"${value}"`;
+    case "DateTime":
+      return value.toISOString();
+    case "Blob":
+      return `Blob[${value.length} bytes]`;
+    default:
+      return String(value);
+  }
+}
+function isPrimitive(type) {
+  return ["Null", "Boolean", "Integer", "Float", "String", "DateTime", "Blob", "Never"].includes(type.type);
+}
+function getTypeLabel(type, value) {
+  switch (type.type) {
+    case "Array":
+      return `Array[${value.length}]`;
+    case "Set":
+      return `Set[${value.size}]`;
+    case "Dict":
+      return `Dict[${value.size}]`;
+    case "Struct":
+      return "Struct";
+    case "Variant":
+      return `Variant.${value.type}`;
+    case "Ref":
+      return "Ref";
+    default:
+      return type.type;
+  }
+}
+function ValueNode({
+  type,
+  value,
+  label,
+  depth
+}) {
+  if (depth > 20) {
+    return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+      label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "[max depth reached]" })
+    ] });
+  }
+  if (isPrimitive(type)) {
+    return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+      label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx$1(Text, { as: "span", color: type.type === "String" ? "green.400" : type.type === "Integer" || type.type === "Float" ? "blue.400" : "gray.300", children: formatPrimitive(type, value) }),
+      /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
+    ] });
+  }
+  const typeLabel = getTypeLabel(type, value);
+  if (type.type === "Array") {
+    const items = value;
+    const elementType = type.value;
+    if (items.length === 0) {
+      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "[]" }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: "Array[0]" })
+      ] });
+    }
+    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "blue", variant: "subtle", children: typeLabel })
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: items.map((item, index2) => /* @__PURE__ */ jsx$1(
+        Box,
+        {
+          py: 1,
+          borderBottom: index2 < items.length - 1 ? "1px solid" : void 0,
+          borderColor: "gray.700",
+          children: /* @__PURE__ */ jsx$1(
+            ValueNode,
+            {
+              type: elementType,
+              value: item,
+              label: `[${index2}]`,
+              depth: depth + 1
+            }
+          )
+        },
+        index2
+      )) })
+    ] }) });
+  }
+  if (type.type === "Struct") {
+    const fields = type.value;
+    const obj = value;
+    if (fields.length === 0) {
+      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "{}" }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: "Struct" })
+      ] });
+    }
+    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "orange", variant: "subtle", children: typeLabel })
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: fields.map((field) => /* @__PURE__ */ jsx$1(
+        ValueNode,
+        {
+          type: field.type,
+          value: obj[field.name],
+          label: field.name,
+          depth: depth + 1
+        },
+        field.name
+      )) })
+    ] }) });
+  }
+  if (type.type === "Variant") {
+    const cases = type.value;
+    const variant2 = value;
+    const activeCase = cases.find((c2) => c2.name === variant2.type);
+    if (!activeCase) {
+      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { as: "span", color: "red.400", children: [
+          "Unknown variant: ",
+          variant2.type
+        ] })
+      ] });
+    }
+    if (activeCase.type.type === "Null") {
+      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
+          ".",
+          variant2.type
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsxs(Badge, { size: "xs", colorPalette: "purple", variant: "subtle", children: [
+          ".",
+          variant2.type
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: /* @__PURE__ */ jsx$1(
+        ValueNode,
+        {
+          type: activeCase.type,
+          value: variant2.value,
+          depth: depth + 1
+        }
+      ) })
+    ] }) });
+  }
+  if (type.type === "Dict") {
+    const map3 = value;
+    const keyType = type.value.key;
+    const valueType = type.value.value;
+    if (map3.size === 0) {
+      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "Map{}" }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: "Dict[0]" })
+      ] });
+    }
+    const entries = Array.from(map3.entries());
+    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "teal", variant: "subtle", children: typeLabel })
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: entries.map(([k2, v3], i) => /* @__PURE__ */ jsxs(
+        Box,
+        {
+          py: 2,
+          borderBottom: i < entries.length - 1 ? "1px solid" : void 0,
+          borderColor: "gray.700",
+          children: [
+            /* @__PURE__ */ jsx$1(ValueNode, { type: keyType, value: k2, depth: depth + 1 }),
+            /* @__PURE__ */ jsx$1(ValueNode, { type: valueType, value: v3, depth: depth + 1 })
+          ]
+        },
+        i
+      )) })
+    ] }) });
+  }
+  if (type.type === "Set") {
+    const set3 = value;
+    const elementType = type.value;
+    if (set3.size === 0) {
+      return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "Set{}" }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: "Set[0]" })
+      ] });
+    }
+    const items = Array.from(set3);
+    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "pink", variant: "subtle", children: typeLabel })
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: items.map((item, i) => /* @__PURE__ */ jsx$1(
+        Box,
+        {
+          py: 1,
+          borderBottom: i < items.length - 1 ? "1px solid" : void 0,
+          borderColor: "gray.700",
+          children: /* @__PURE__ */ jsx$1(
+            ValueNode,
+            {
+              type: elementType,
+              value: item,
+              depth: depth + 1
+            }
+          )
+        },
+        i
+      )) })
+    ] }) });
+  }
+  if (type.type === "Ref") {
+    const ref = value;
+    return /* @__PURE__ */ jsx$1(Box, { children: /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsxs("summary", { style: { cursor: "pointer", padding: "2px 0", display: "flex", alignItems: "center", gap: "8px" }, children: [
+        label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+          label,
+          ":"
+        ] }),
+        /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "red", variant: "subtle", children: "Ref" })
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { pl: 4, children: /* @__PURE__ */ jsx$1(
+        ValueNode,
+        {
+          type: type.value,
+          value: ref.value,
+          depth: depth + 1
+        }
+      ) })
+    ] }) });
+  }
+  if (type.type === "Function" || type.type === "AsyncFunction") {
+    return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+      label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx$1(Text, { as: "span", color: "gray.500", children: "[function]" }),
+      /* @__PURE__ */ jsx$1(Badge, { size: "xs", colorPalette: "gray", variant: "subtle", children: type.type })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { py: 0.5, display: "flex", alignItems: "center", gap: 2, children: [
+    label && /* @__PURE__ */ jsxs(Text, { as: "span", color: "purple.400", fontWeight: "medium", children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxs(Text, { as: "span", color: "gray.500", children: [
+      "[",
+      type.type,
+      "]"
+    ] })
+  ] });
+}
+function EastValueViewer({ type, value }) {
+  return /* @__PURE__ */ jsx$1(
+    Box,
+    {
+      layerStyle: "surface.code.dark",
+      fontFamily: "mono",
+      fontSize: "sm",
+      p: 4,
+      overflow: "auto",
+      maxHeight: "100%",
+      children: /* @__PURE__ */ jsx$1(ValueNode, { type, value, depth: 0 })
+    }
+  );
+}
 export {
   BindPlatform,
   BindRuntime,