@tangle-network/sandbox-ui 0.113.4 → 0.113.6

package/dist/{chunk-EKYA6AFY.js → chunk-TADGS4Q7.js}

@@ -18,6 +18,7 @@ import {
 } from "@tangle-network/agent-interface";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Brain, ChevronDown, Sparkles } from "lucide-react";
+import { focusRing } from "@tangle-network/ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 var REASONING_LADDER = reasoningLadder;
 function ReasoningGlyph({ level }) {
@@ -87,7 +88,8 @@ function ReasoningLevelPicker({
         className: cn(
           "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
           "text-xs font-medium text-foreground shadow-sm transition-colors",
-          "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
+          focusRing,
           "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className,
@@ -224,6 +226,7 @@ var AnchoredPopover = React2.forwardRef(
 // src/chat/informative-lock.tsx
 import { Lock, Plus } from "lucide-react";
 import * as React3 from "react";
+import { focusRing as focusRing2 } from "@tangle-network/ui/utils";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function InformativeLock({
   children,
@@ -278,7 +281,8 @@ function InformativeLock({
             className: cn(
               "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5 opacity-60",
               "text-xs font-medium text-foreground shadow-sm transition-colors",
-              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
+              focusRing2,
               "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
               triggerClassName
             ),
@@ -319,7 +323,8 @@ function InformativeLock({
                   className: cn(
                     "mt-3 flex w-full items-center justify-center gap-1.5 rounded-md px-2.5 py-2 text-sm font-medium text-foreground",
                     "bg-primary/10 ring-1 ring-inset ring-primary/25 transition-colors",
-                    "hover:bg-primary/15 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    "hover:bg-primary/15",
+                    focusRing2
                   ),
                   children: [
                     /* @__PURE__ */ jsx3(Plus, { className: "h-4 w-4" }),
@@ -336,6 +341,7 @@ function InformativeLock({
 }
 
 // src/chat/agent-profile-picker.tsx
+import { focusField, focusRing as focusRing3 } from "@tangle-network/ui/utils";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function profileSubtitle(profile) {
   if (profile.description) return profile.description;
@@ -418,7 +424,8 @@ function AgentProfilePicker({
         className: cn(
           "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
           "text-xs font-medium text-foreground shadow-sm transition-colors",
-          "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high",
+          focusRing3,
           "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
           "disabled:cursor-not-allowed disabled:opacity-60",
           triggerClassName
@@ -576,7 +583,7 @@ function ProfileForm({
         value: name,
         onChange: (event) => setName(event.target.value),
         placeholder: "Agent name (e.g. Tax Reviewer)",
-        className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-sm outline-none focus:border-primary"
+        className: `w-full rounded-lg border bg-surface-container px-3 py-2 text-sm ${focusField}`
       }
     ),
     capabilities.length > 0 && /* @__PURE__ */ jsxs3("div", { children: [
@@ -611,7 +618,7 @@ function ProfileForm({
         onChange: (event) => setInstructions(event.target.value),
         rows: 2,
         placeholder: "Instructions (optional) \u2014 how this agent should behave",
-        className: "w-full resize-none rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-sm outline-none focus:border-primary"
+        className: `w-full resize-none rounded-lg border bg-surface-container px-3 py-2 text-sm ${focusField}`
       }
     ),
     /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2", children: [
@@ -650,6 +657,7 @@ import { modelProvider, snapHarnessToModel } from "@tangle-network/agent-interfa
 import * as React5 from "react";
 import { Sparkles as Sparkles2, Send, Square, X } from "lucide-react";
 import { ChatMessage } from "@tangle-network/ui/chat";
+import { focusField as focusField2 } from "@tangle-network/ui/utils";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function defaultScopeLabel(scope) {
   if (scope.label) return scope.label;
@@ -879,7 +887,7 @@ function ArtifactAgentDock({
                   placeholder: `Ask about ${heading}\u2026`,
                   rows: 2,
                   disabled: !threadId,
-                  className: "min-h-[44px] flex-1 resize-none rounded-[20px] border border-[var(--md3-outline-variant)] bg-surface-dim px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:outline-none focus:border-[var(--border-accent)] disabled:opacity-50"
+                  className: `min-h-[44px] flex-1 resize-none rounded-[20px] border bg-surface-dim px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground disabled:opacity-50 ${focusField2}`
                 }
               ),
               sending ? /* @__PURE__ */ jsx5(

package/dist/{chunk-XFEJ66AG.js → chunk-UCQNOUN3.js}

@@ -1,9 +1,9 @@
 import {
   RichFileTree
-} from "./chunk-PZVUIUUW.js";
+} from "./chunk-ULPLRBMF.js";
 import {
   PortsList
-} from "./chunk-LDAKIKTV.js";
+} from "./chunk-DYXXYGS4.js";
 import {
   TerminalView
 } from "./chunk-IACRDXER.js";
@@ -215,16 +215,20 @@ var require_extends = __commonJS({
 // src/workbench/sandbox-artifact-pane.tsx
 import * as React9 from "react";
 import { Code2, GitCompare, Globe, Network, SquareTerminal } from "lucide-react";
+import { focusRingInset } from "@tangle-network/ui/utils";
 
 // src/workbench/pill-tabs.tsx
 import * as React from "react";
+import { focusRing } from "@tangle-network/ui/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PillTabs({
   items,
   value,
   onChange,
   className,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  idPrefix,
+  panelId
 }) {
   const containerRef = React.useRef(null);
   const tabRefs = React.useRef(/* @__PURE__ */ new Map());
@@ -281,10 +285,38 @@ function PillTabs({
               },
               type: "button",
               role: "tab",
+              id: idPrefix ? `${idPrefix}-${item.value}` : void 0,
+              "aria-controls": panelId,
               "aria-selected": selected,
+              tabIndex: selected ? 0 : -1,
               onClick: () => onChange(item.value),
+              onKeyDown: (event) => {
+                const index = items.findIndex((candidate) => candidate.value === item.value);
+                let nextIndex;
+                switch (event.key) {
+                  case "ArrowRight":
+                    nextIndex = (index + 1) % items.length;
+                    break;
+                  case "ArrowLeft":
+                    nextIndex = (index - 1 + items.length) % items.length;
+                    break;
+                  case "Home":
+                    nextIndex = 0;
+                    break;
+                  case "End":
+                    nextIndex = items.length - 1;
+                    break;
+                  default:
+                    return;
+                }
+                event.preventDefault();
+                const next = items[nextIndex];
+                onChange(next.value);
+                tabRefs.current.get(next.value)?.focus();
+              },
               className: cn(
                 "relative z-10 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors",
+                focusRing,
                 selected ? "text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
               children: [
@@ -388,6 +420,7 @@ function PanelHeader({ filename, gitStatus, stats, copyText, children, className
 
 // src/workbench/code-view.tsx
 import * as React6 from "react";
+import { focusRing as focusRing2 } from "@tangle-network/ui/utils";
 
 // node_modules/.pnpm/react-syntax-highlighter@16.1.1_react@19.2.8/node_modules/react-syntax-highlighter/dist/esm/highlight.js
 var import_objectWithoutProperties = __toESM(require_objectWithoutProperties());
@@ -7217,27 +7250,35 @@ function CodeView({
   showTree = true,
   className
 }) {
+  const [narrowPane, setNarrowPane] = React6.useState("code");
   const treePaths = React6.useMemo(() => {
     const list = paths && paths.length > 0 ? paths : [path];
     return list.includes(path) ? list : [...list, path];
   }, [paths, path]);
-  return /* @__PURE__ */ jsxs4("div", { className: cn("flex h-full min-h-0 w-full", className), children: [
-    showTree && /* @__PURE__ */ jsx6("div", { className: "sandbox-tree-surface flex w-60 shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-lowest", children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx6("div", { className: cn("sandbox-code-view h-full min-h-0 w-full", className), children: /* @__PURE__ */ jsxs4("div", { className: "sandbox-code-view-layout flex h-full min-h-0 w-full", children: [
+    showTree && /* @__PURE__ */ jsxs4("div", { className: "sandbox-code-view-mobile-toolbar", role: "group", "aria-label": "Code view pane", children: [
+      /* @__PURE__ */ jsx6("button", { type: "button", "aria-pressed": narrowPane === "files", onClick: () => setNarrowPane("files"), className: focusRing2, children: "Files" }),
+      /* @__PURE__ */ jsx6("button", { type: "button", "aria-pressed": narrowPane === "code", onClick: () => setNarrowPane("code"), className: focusRing2, children: "Code" })
+    ] }),
+    showTree && /* @__PURE__ */ jsx6("div", { className: "sandbox-code-view-tree sandbox-tree-surface flex w-60 shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-lowest", "data-mobile-open": narrowPane === "files", children: /* @__PURE__ */ jsx6(
       RichFileTree,
       {
         paths: treePaths,
         selectedPath: path,
-        onSelect: (next) => onFileSelect?.(next),
+        onSelect: (next) => {
+          onFileSelect?.(next);
+          setNarrowPane("code");
+        },
         gitStatus,
         search: treePaths.length > 12,
         height: "100%"
       }
     ) }),
-    /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 flex-col bg-surface-container", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "sandbox-code-view-editor flex min-w-0 flex-1 flex-col bg-surface-container", "data-mobile-hidden": showTree && narrowPane === "files", children: [
       /* @__PURE__ */ jsx6(FileBreadcrumb, { path }),
       /* @__PURE__ */ jsx6("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx6(CodeSurface, { code: content, filename, language }) })
     ] })
-  ] });
+  ] }) });
 }
 
 // src/workbench/diff-view.tsx
@@ -7319,28 +7360,52 @@ function DiffView({ filename, baseline, current, showFileHeader = true, classNam
 // src/workbench/preview-view.tsx
 import * as React8 from "react";
 import { ExternalLink, RotateCw } from "lucide-react";
+import { focusField } from "@tangle-network/ui/utils";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function PreviewView({ url, className }) {
   const [address, setAddress] = React8.useState(url);
+  const [activeUrl, setActiveUrl] = React8.useState(url);
   const [iframeKey, setIframeKey] = React8.useState(0);
   const [loading, setLoading] = React8.useState(true);
+  const [slow, setSlow] = React8.useState(false);
+  const [addressError, setAddressError] = React8.useState(null);
+  const errorId = React8.useId();
   React8.useEffect(() => {
     setAddress(url);
+    setActiveUrl(url);
     setIframeKey((k) => k + 1);
     setLoading(true);
+    setSlow(false);
+    setAddressError(null);
   }, [url]);
   React8.useEffect(() => {
-    const t = setTimeout(() => setLoading(false), 1500);
+    if (!loading) return;
+    const t = setTimeout(() => setSlow(true), 8e3);
     return () => clearTimeout(t);
-  }, [iframeKey]);
+  }, [iframeKey, loading]);
   const reload = React8.useCallback(() => {
     setIframeKey((k) => k + 1);
     setLoading(true);
+    setSlow(false);
   }, []);
   const navigate = React8.useCallback(() => {
+    let nextUrl;
+    try {
+      nextUrl = new URL(address, activeUrl);
+    } catch {
+      setAddressError("Enter a valid preview URL.");
+      return;
+    }
+    if (nextUrl.protocol !== "http:" && nextUrl.protocol !== "https:") {
+      setAddressError("Use an HTTP or HTTPS preview URL.");
+      return;
+    }
+    setAddressError(null);
+    setActiveUrl(nextUrl.toString());
     setIframeKey((k) => k + 1);
     setLoading(true);
-  }, []);
+    setSlow(false);
+  }, [activeUrl, address]);
   return /* @__PURE__ */ jsxs5("div", { className: cn("flex h-full min-h-0 flex-col bg-surface-container", className), children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-2 py-1.5", children: [
       /* @__PURE__ */ jsx8(
@@ -7357,16 +7422,24 @@ function PreviewView({ url, className }) {
         "input",
         {
           value: address,
-          onChange: (e) => setAddress(e.target.value),
-          onKeyDown: (e) => e.key === "Enter" && navigate(),
+          onChange: (e) => {
+            setAddress(e.target.value);
+            setAddressError(null);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") navigate();
+          },
+          "aria-label": "Preview address",
+          "aria-invalid": addressError != null,
+          "aria-describedby": addressError ? errorId : void 0,
           spellCheck: false,
-          className: "h-7 flex-1 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-2.5 font-mono text-xs text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className: `h-7 flex-1 rounded-md border bg-surface-container px-2.5 font-mono text-xs text-foreground ${focusField}`
         }
       ),
       /* @__PURE__ */ jsx8(
         "a",
         {
-          href: address,
+          href: activeUrl,
           target: "_blank",
           rel: "noopener noreferrer",
           "aria-label": "Open preview in new tab",
@@ -7375,23 +7448,23 @@ function PreviewView({ url, className }) {
         }
       )
     ] }),
+    addressError && /* @__PURE__ */ jsx8("p", { id: errorId, role: "alert", className: "px-3 py-1 text-xs text-destructive", children: addressError }),
     /* @__PURE__ */ jsxs5("div", { className: "relative min-h-0 flex-1 bg-surface-container-lowest", children: [
       /* @__PURE__ */ jsx8(
         "iframe",
         {
-          src: address,
+          src: activeUrl,
           title: "Sandbox preview",
           className: "h-full w-full border-0 bg-white",
           sandbox: "allow-scripts allow-same-origin allow-forms allow-popups",
-          onLoad: () => setLoading(false)
+          onLoad: () => {
+            setLoading(false);
+            setSlow(false);
+          }
         },
-        `${iframeKey}-${address}`
+        iframeKey
       ),
-      loading && /* @__PURE__ */ jsx8("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-surface-container-lowest", children: /* @__PURE__ */ jsxs5("p", { className: "text-xs text-muted-foreground", children: [
-        "Loading ",
-        address,
-        "\u2026"
-      ] }) })
+      loading && /* @__PURE__ */ jsx8("div", { role: "status", className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-surface-container-lowest", children: /* @__PURE__ */ jsx8("p", { className: "px-4 text-center text-xs text-muted-foreground", children: slow ? "Preview is still loading. Check the address or open it in a new tab." : `Loading ${activeUrl}\u2026` }) })
     ] })
   ] });
 }
@@ -7441,6 +7514,8 @@ function SandboxArtifactPane({
   const [internalView, setInternalView] = React9.useState(
     () => defaultView && (defaultView !== "diff" || hasDiff) ? defaultView : "code"
   );
+  const tabIdPrefix = React9.useId();
+  const panelId = `${tabIdPrefix}-panel`;
   const controlled = activeView != null;
   const requestedView = controlled ? activeView : internalView;
   const view = available.includes(requestedView) ? requestedView : available[0];
@@ -7488,49 +7563,69 @@ function SandboxArtifactPane({
             copyText
           }
         ),
-        /* @__PURE__ */ jsx9("div", { className: "flex items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest px-3 py-1.5", children: /* @__PURE__ */ jsx9(PillTabs, { items: tabs, value: view, onChange: selectView, "aria-label": "Artifact view" }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "min-h-0 flex-1", children: [
-          view === "code" && /* @__PURE__ */ jsx9(
-            CodeView,
-            {
-              path: artifact.path,
-              filename: artifact.filename,
-              content: artifact.content,
-              language: artifact.language,
-              paths,
-              gitStatus,
-              showTree,
-              onFileSelect
-            }
-          ),
-          view === "diff" && hasDiff && /* @__PURE__ */ jsx9(
-            DiffView,
-            {
-              filename: artifact.filename,
-              baseline: artifact.baselineContent ?? "",
-              current: artifact.content
-            }
-          ),
-          view === "preview" && hasPreview && /* @__PURE__ */ jsx9(PreviewView, { url: previewUrl }),
-          view === "ports" && hasPorts && /* @__PURE__ */ jsx9("div", { className: "h-full overflow-auto bg-surface-container p-4", children: /* @__PURE__ */ jsx9(
-            PortsList,
-            {
-              ports,
-              onExposePort: onExposePort ?? noop,
-              onRemovePort
-            }
-          ) }),
-          view === "terminal" && hasTerminal && /* @__PURE__ */ jsx9("div", { className: "h-full bg-surface-container-lowest", children: /* @__PURE__ */ jsx9(
-            TerminalView,
-            {
-              apiUrl: terminal.apiUrl,
-              token: terminal.token,
-              connectionId: terminal.connectionId,
-              title: terminal.title,
-              subtitle: terminal.subtitle
-            }
-          ) })
-        ] })
+        /* @__PURE__ */ jsx9("div", { className: "flex items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest px-3 py-1.5", children: /* @__PURE__ */ jsx9(
+          PillTabs,
+          {
+            items: tabs,
+            value: view,
+            onChange: selectView,
+            "aria-label": "Artifact view",
+            idPrefix: tabIdPrefix,
+            panelId
+          }
+        ) }),
+        /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            id: panelId,
+            role: "tabpanel",
+            "aria-labelledby": `${tabIdPrefix}-${view}`,
+            tabIndex: 0,
+            className: `min-h-0 flex-1 ${focusRingInset}`,
+            children: [
+              view === "code" && /* @__PURE__ */ jsx9(
+                CodeView,
+                {
+                  path: artifact.path,
+                  filename: artifact.filename,
+                  content: artifact.content,
+                  language: artifact.language,
+                  paths,
+                  gitStatus,
+                  showTree,
+                  onFileSelect
+                }
+              ),
+              view === "diff" && hasDiff && /* @__PURE__ */ jsx9(
+                DiffView,
+                {
+                  filename: artifact.filename,
+                  baseline: artifact.baselineContent ?? "",
+                  current: artifact.content
+                }
+              ),
+              view === "preview" && hasPreview && /* @__PURE__ */ jsx9(PreviewView, { url: previewUrl }),
+              view === "ports" && hasPorts && /* @__PURE__ */ jsx9("div", { className: "h-full overflow-auto bg-surface-container p-4", children: /* @__PURE__ */ jsx9(
+                PortsList,
+                {
+                  ports,
+                  onExposePort: onExposePort ?? noop,
+                  onRemovePort
+                }
+              ) }),
+              view === "terminal" && hasTerminal && /* @__PURE__ */ jsx9("div", { className: "h-full bg-surface-container-lowest", children: /* @__PURE__ */ jsx9(
+                TerminalView,
+                {
+                  apiUrl: terminal.apiUrl,
+                  token: terminal.token,
+                  connectionId: terminal.connectionId,
+                  title: terminal.title,
+                  subtitle: terminal.subtitle
+                }
+              ) })
+            ]
+          }
+        )
       ]
     }
   );
@@ -7540,6 +7635,7 @@ function SandboxArtifactPane({
 import * as React10 from "react";
 import { GitBranch, RefreshCw } from "lucide-react";
 import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";
+import { focusRing as focusRing3, focusRingInset as focusRingInset2 } from "@tangle-network/ui/utils";
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var BORDER = "border-[var(--md3-outline-variant)]";
 function splitPath(path) {
@@ -7710,7 +7806,7 @@ function ChangesPane({
                 type: "button",
                 onClick: onRefresh,
                 "aria-label": "Refresh",
-                className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                className: `rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground ${focusRing3}`,
                 children: /* @__PURE__ */ jsx10(RefreshCw, { className: cn("h-3.5 w-3.5", loading && "animate-spin") })
               }
             )
@@ -7751,7 +7847,8 @@ function ChangesPane({
                 tabIndex: tabbable ? 0 : -1,
                 onClick: () => onSelectFile?.(file.path),
                 className: cn(
-                  "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/60",
+                  "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-xs transition-colors",
+                  focusRingInset2,
                   isSelected ? "bg-surface-container-high" : "hover:bg-surface-container"
                 ),
                 children: [

package/dist/{chunk-PZVUIUUW.js → chunk-ULPLRBMF.js}

@@ -1,5 +1,6 @@
 // src/files/index.ts
 import {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
@@ -10,10 +11,13 @@ import {
   filterFileTree,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
+  getSyntaxLanguage,
+  parseCsv,
+  resolveFilePreviewKind
 } from "@tangle-network/ui/files";
 
 export {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
@@ -24,5 +28,7 @@ export {
   filterFileTree,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
+  getSyntaxLanguage,
+  parseCsv,
+  resolveFilePreviewKind
 };

package/dist/{chunk-TK46XFLM.js → chunk-X3YXP7FG.js}

@@ -3,6 +3,11 @@ import {
   TOOL_CATEGORY_ICONS,
   cn,
   copyText,
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset,
   formatBytes,
   formatDuration,
   formatUptime,
@@ -17,6 +22,11 @@ export {
   TOOL_CATEGORY_ICONS,
   cn,
   copyText,
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset,
   formatBytes,
   formatDuration,
   formatUptime,

package/dist/connectors.js

@@ -428,6 +428,7 @@ function ConnectorActionList({
 import { Button as Button2, EmptyState, Input as Input2 } from "@tangle-network/ui/primitives";
 import { Blocks, ChevronRight as ChevronRight2, Search as Search2 } from "lucide-react";
 import { useEffect as useEffect2, useMemo as useMemo2, useState as useState3 } from "react";
+import { focusField } from "@tangle-network/ui/utils";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function optionsFor(entries, pick) {
   const map = /* @__PURE__ */ new Map();
@@ -469,7 +470,7 @@ function FilterSelect({
       value,
       onChange: (e) => onChange(e.target.value),
       "aria-label": ariaLabel,
-      className: "rounded-lg border border-border bg-card px-3 py-2 text-foreground text-sm focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      className: `rounded-lg border bg-card px-3 py-2 text-foreground text-sm ${focusField}`,
       children: [
         /* @__PURE__ */ jsx3("option", { value: "", children: allLabel }),
         options.map((option) => /* @__PURE__ */ jsx3("option", { value: option.value, children: option.label }, option.value))

package/dist/dashboard.d.ts

@@ -51,7 +51,14 @@ interface RailHeaderProps {
     brand?: React.ReactNode;
     /** Destination for the brand link. When set with `LinkComponent`, the brand is a link. */
     brandHref?: string;
-    /** Optional middle content (e.g. a project/workspace switcher). Hidden when collapsed. */
+    /**
+     * Optional middle content (e.g. a project/workspace switcher).
+     *
+     * When `brand` is set, this is expanded-only — the collapsed rail has room
+     * for the mark alone. When `brand` is NOT set this content owns the rail top
+     * in BOTH states, so it is also rendered collapsed; read `useSidebar()` to
+     * swap in a compact mark there.
+     */
     children?: React.ReactNode;
     /** Whether the rail is collapsed (icon-only). */
     collapsed: boolean;
@@ -66,13 +73,6 @@ interface RailHeaderProps {
     LinkComponent?: React.ComponentType<any>;
     className?: string;
 }
-/**
- * The redesigned rail header. Expanded: brand (left) · optional middle · panel
- * toggle (right). Collapsed: only the brand mark, which morphs into the
- * expand button on hover (brand fades out, panel glyph fades in over the same
- * box) so the collapse affordance is discoverable without spending rail width.
- * Renders its own `h-14` bordered bar — drop it in at the top of {@link SidebarRail}.
- */
 declare function RailHeader({ brand, brandHref, children, collapsed, onToggle, collapsible, LinkComponent, className }: RailHeaderProps): React.JSX.Element;
 interface SidebarProps {
     children: React.ReactNode;

package/dist/dashboard.js

@@ -60,7 +60,7 @@ import {
   chatCapableHarnesses,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-LDAKIKTV.js";
+} from "./chunk-DYXXYGS4.js";
 import {
   BillingDashboard,
   InfoPanel,
@@ -69,7 +69,7 @@ import {
   UsageChart,
   formatPrice
 } from "./chunk-OMUIPJQZ.js";
-import "./chunk-2XPJ2XF7.js";
+import "./chunk-ANSC5AFC.js";
 import {
   ModelBrandStack,
   canonicalModelId,

package/dist/files.d.ts

@@ -1,4 +1,4 @@
-export { FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage } from '@tangle-network/ui/files';
+export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewKind, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind } from '@tangle-network/ui/files';
 import '@tangle-network/ui/openui';
 import '@tangle-network/ui/run';
 import '@tangle-network/ui/utils';

package/dist/files.js

@@ -1,4 +1,5 @@
 import {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
@@ -9,10 +10,13 @@ import {
   filterFileTree,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
-} from "./chunk-PZVUIUUW.js";
+  getSyntaxLanguage,
+  parseCsv,
+  resolveFilePreviewKind
+} from "./chunk-ULPLRBMF.js";
 import "./chunk-CZ7CSFO4.js";
 export {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
@@ -23,5 +27,7 @@ export {
   filterFileTree,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
+  getSyntaxLanguage,
+  parseCsv,
+  resolveFilePreviewKind
 };