@tangle-network/sandbox-ui 0.113.4 → 0.113.6

package/README.md

@@ -10,13 +10,15 @@
 
 React component library for [Tangle Sandbox](https://sandbox.tangle.tools) — a shadcn-style primitive layer plus higher-order sandbox surfaces for agent chat, files, runtime state, artifacts, and dashboard views.
 
+[Browse the live Storybook](https://sandbox-ui-storybook.pages.dev/) to inspect component states in dark and light themes at desktop and mobile widths.
+
 ## Install
 
 ```bash
 npm install @tangle-network/sandbox-ui
 ```
 
-**Required peers:** `react` and `react-dom` 18 or 19, `@tangle-network/agent-interface ^1.0.0 || ^2.0.0`, `@tangle-network/brand ^1.5.0`, and `@tangle-network/ui ^11.6.0`.
+**Required peers:** `react` and `react-dom` 18 or 19, `@tangle-network/agent-interface ^1.0.0 || ^2.0.0`, `@tangle-network/brand ^1.6.0`, and `@tangle-network/ui ^11.10.0`.
 Optional peers are required only by the subpaths that use them; see [package.json](./package.json). `/editor` needs its tiptap, `yjs` and `@hocuspocus/provider` peers only when it renders an editor, and the `@tangle-network/ui` README holds the table of which surface needs which.
 
 ## Usage

package/dist/chat.js

@@ -13,7 +13,7 @@ import {
   createFetchTransport,
   modelProvider,
   snapHarnessToModel
-} from "./chunk-EKYA6AFY.js";
+} from "./chunk-TADGS4Q7.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {

package/dist/{chunk-JZCRK2BJ.js → chunk-3KBNPQQF.js}

@@ -36,6 +36,7 @@ function WorkspacePaneHeader({
 }
 
 // src/workspace/workspace-layout.tsx
+import { focusRing } from "@tangle-network/ui/utils";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var DESKTOP_BREAKPOINT = "(min-width: 1024px)";
 function clamp(value, min, max) {
@@ -104,7 +105,7 @@ function ResizeHandle({ label, onDragStart, onStep, className }) {
       className: cn(
         "relative hidden w-3 shrink-0 cursor-col-resize lg:flex",
         "items-stretch justify-center bg-transparent touch-none",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+        focusRing,
         className
       ),
       children: [
@@ -141,7 +142,7 @@ function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
       className: cn(
         "relative hidden h-3 shrink-0 cursor-row-resize lg:flex",
         "items-center justify-center bg-transparent touch-none w-full",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+        focusRing,
         className
       ),
       children: [
@@ -178,7 +179,7 @@ function MobileDrawer({ side, title, header, onClose, children }) {
                 type: "button",
                 "aria-label": `Close ${title}`,
                 onClick: onClose,
-                className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
                 children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" })
               }
             )
@@ -410,7 +411,7 @@ function WorkspaceLayout({
                         type: "button",
                         "aria-label": "Collapse left panel",
                         onClick: () => setLeftOpen(false),
-                        className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                        className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
                         children: /* @__PURE__ */ jsx2(PanelLeftClose, { className: "h-4 w-4" })
                       }
                     )
@@ -436,7 +437,7 @@ function WorkspaceLayout({
                   type: "button",
                   "aria-label": "Open left panel",
                   onClick: () => setLeftOpen(true),
-                  className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                  className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
                   children: /* @__PURE__ */ jsx2(PanelLeftOpen, { className: "h-4 w-4" })
                 }
               )),
@@ -447,7 +448,7 @@ function WorkspaceLayout({
                   type: "button",
                   "aria-label": "Open bottom panel",
                   onClick: () => setBottomOpen(true),
-                  className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                  className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
                   children: /* @__PURE__ */ jsx2(PanelBottomOpen, { className: "h-4 w-4" })
                 }
               ),
@@ -457,7 +458,7 @@ function WorkspaceLayout({
                   type: "button",
                   "aria-label": "Open right panel",
                   onClick: () => setRightOpen(true),
-                  className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                  className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
                   children: /* @__PURE__ */ jsx2(PanelRightOpen, { className: "h-4 w-4" })
                 }
               )
@@ -487,7 +488,7 @@ function WorkspaceLayout({
                           type: "button",
                           "aria-label": "Collapse bottom panel",
                           onClick: () => setBottomOpen(false),
-                          className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                          className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
                           children: /* @__PURE__ */ jsx2(PanelBottomClose, { className: "h-4 w-4" })
                         }
                       )
@@ -523,7 +524,7 @@ function WorkspaceLayout({
                         type: "button",
                         "aria-label": "Collapse right panel",
                         onClick: () => setRightOpen(false),
-                        className: "rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                        className: `rounded-[2px] p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
                         children: /* @__PURE__ */ jsx2(PanelRightClose, { className: "h-4 w-4" })
                       }
                     )
@@ -572,6 +573,7 @@ import {
 } from "@tangle-network/ui/files";
 import { EmptyState } from "@tangle-network/ui/primitives";
 import { Input } from "@tangle-network/ui/primitives";
+import { focusRing as focusRing2 } from "@tangle-network/ui/utils";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function countNodes(node) {
   if (node.type === "file") {
@@ -647,7 +649,7 @@ function DirectoryPane({
             type: "button",
             "aria-label": "Refresh directory",
             onClick: onRefresh,
-            className: "rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+            className: `rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing2}`,
             children: /* @__PURE__ */ jsx3(RefreshCw, { className: "h-4 w-4" })
           }
         ),
@@ -657,7 +659,7 @@ function DirectoryPane({
             type: "button",
             "aria-label": "Upload files",
             onClick: onUpload,
-            className: "rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+            className: `rounded-[2px] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing2}`,
             children: /* @__PURE__ */ jsx3(Upload, { className: "h-4 w-4" })
           }
         )
@@ -819,8 +821,9 @@ function StatusBar({
 }
 
 // src/workspace/terminal-panel.tsx
-import { useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useRef as useRef2, useEffect as useEffect2, useId } from "react";
 import { Terminal as TerminalIcon, ChevronDown, ChevronUp, X as X3 } from "lucide-react";
+import { focusRing as focusRing3 } from "@tangle-network/ui/utils";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var LINE_COLORS = {
   command: "text-[var(--code-function)]",
@@ -844,33 +847,48 @@ function TerminalPanel({
   className
 }) {
   const scrollRef = useRef2(null);
+  const contentId = useId();
   useEffect2(() => {
     if (!isCollapsed && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [lines, isCollapsed]);
   return /* @__PURE__ */ jsxs5("div", { className: cn("border-t border-[var(--md3-outline-variant)] bg-surface-container", className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center px-1", children: [
+      /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          type: "button",
+          onClick: onToggle,
+          disabled: !onToggle,
+          "aria-expanded": !isCollapsed,
+          "aria-controls": contentId,
+          className: `flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:text-foreground disabled:cursor-default ${focusRing3}`,
+          children: [
+            /* @__PURE__ */ jsx6(TerminalIcon, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx6("span", { className: "font-medium", children: title }),
+            lines.length > 0 && /* @__PURE__ */ jsx6("span", { className: "rounded-full bg-surface-container-high px-1.5 py-0.5 text-[10px] tabular-nums", children: lines.length }),
+            /* @__PURE__ */ jsx6("span", { className: "flex-1" }),
+            isCollapsed ? /* @__PURE__ */ jsx6(ChevronUp, { className: "h-3 w-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3 w-3", "aria-hidden": "true" })
+          ]
+        }
+      ),
+      onClose && /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Close ${title}`,
+          onClick: onClose,
+          className: `rounded p-1.5 text-muted-foreground transition-colors hover:text-foreground ${focusRing3}`,
+          children: /* @__PURE__ */ jsx6(X3, { className: "h-3 w-3", "aria-hidden": "true" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs5(
-      "button",
-      {
-        onClick: onToggle,
-        className: "flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors",
-        children: [
-          /* @__PURE__ */ jsx6(TerminalIcon, { className: "h-3.5 w-3.5" }),
-          /* @__PURE__ */ jsx6("span", { className: "font-medium", children: title }),
-          lines.length > 0 && /* @__PURE__ */ jsx6("span", { className: "px-1.5 py-0.5 rounded-full bg-surface-container-high text-[10px] tabular-nums", children: lines.length }),
-          /* @__PURE__ */ jsx6("div", { className: "flex-1" }),
-          onClose && /* @__PURE__ */ jsx6(X3, { className: "h-3 w-3 hover:text-foreground", onClick: (e) => {
-            e.stopPropagation();
-            onClose();
-          } }),
-          isCollapsed ? /* @__PURE__ */ jsx6(ChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3 w-3" })
-        ]
-      }
-    ),
-    !isCollapsed && /* @__PURE__ */ jsxs5(
       "div",
       {
+        id: contentId,
+        hidden: isCollapsed,
         ref: scrollRef,
         className: "overflow-auto px-3 pb-2 font-mono text-xs leading-[1.6] bg-surface-container-lowest",
         style: { maxHeight },
@@ -1019,6 +1037,7 @@ function useOptimisticSessionItems(items, options = {}) {
 }
 
 // src/workspace/session-sidebar.tsx
+import { focusField, focusRing as focusRing4 } from "@tangle-network/ui/utils";
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var NO_CONTROLLER = {
   add: () => {
@@ -1405,7 +1424,7 @@ function SessionSidebar({
                     placeholder: searchPlaceholder,
                     "aria-label": searchPlaceholder,
                     className: cn(
-                      quiet ? "h-8 w-full rounded-md border-0 bg-transparent pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:bg-surface-container focus-visible:outline-none" : "h-8 w-full rounded-[var(--radius-sm)] border border-[var(--md3-outline-variant)] bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:border-[var(--border-accent)] focus-visible:bg-transparent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-accent)]",
+                      quiet ? `h-8 w-full rounded-md border-0 bg-transparent pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus-visible:bg-surface-container ${focusRing4}` : `h-8 w-full rounded-[var(--radius-sm)] border bg-surface-container-lowest pl-7 pr-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField}`,
                       MOTION_CONTROL
                     )
                   }
@@ -1604,7 +1623,7 @@ function SessionActivityMonitor({
 }
 
 // src/workspace/sandbox-workbench.tsx
-import { useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useId as useId2, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
 import {
   Bot,
   Boxes,
@@ -1621,6 +1640,7 @@ import { ChatContainer } from "@tangle-network/ui/chat";
 import { FileArtifactPane } from "@tangle-network/ui/files";
 import { OpenUIArtifactRenderer } from "@tangle-network/ui/openui";
 import { ArtifactPane as ArtifactPane2 } from "@tangle-network/ui/primitives";
+import { focusRing as focusRing5, focusRingInset } from "@tangle-network/ui/utils";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function getArtifactTabIcon(kind) {
   switch (kind) {
@@ -1650,10 +1670,13 @@ function ArtifactTabs({
   artifacts,
   activeArtifactId,
   onSelect,
-  onClose
+  onClose,
+  tabIdPrefix,
+  panelId
 }) {
+  const tabRefs = useRef5(/* @__PURE__ */ new Map());
   if (artifacts.length === 0) return null;
-  return /* @__PURE__ */ jsx10("div", { className: "flex items-center overflow-x-auto border-b border-[var(--md3-outline-variant)] bg-surface-container-high", children: artifacts.map((artifact) => {
+  return /* @__PURE__ */ jsx10("div", { role: "tablist", "aria-label": "Artifacts", className: "flex items-center overflow-x-auto border-b border-[var(--md3-outline-variant)] bg-surface-container-high", children: artifacts.map((artifact) => {
     const Icon = artifact.icon ?? getArtifactTabIcon(artifact.kind);
     const isActive = artifact.id === activeArtifactId;
     return /* @__PURE__ */ jsxs9(
@@ -1668,8 +1691,41 @@ function ArtifactTabs({
             "button",
             {
               type: "button",
+              ref: (element) => {
+                if (element) tabRefs.current.set(artifact.id, element);
+                else tabRefs.current.delete(artifact.id);
+              },
+              id: `${tabIdPrefix}-${artifact.id}`,
+              role: "tab",
+              "aria-controls": panelId,
+              "aria-selected": isActive,
+              tabIndex: isActive ? 0 : -1,
               onClick: () => onSelect(artifact.id),
-              className: "flex min-w-0 items-center gap-2 px-3 py-2 text-[12px] uppercase tracking-wider font-medium transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/60",
+              onKeyDown: (event) => {
+                const index = artifacts.findIndex((entry) => entry.id === artifact.id);
+                let nextIndex;
+                switch (event.key) {
+                  case "ArrowRight":
+                    nextIndex = (index + 1) % artifacts.length;
+                    break;
+                  case "ArrowLeft":
+                    nextIndex = (index - 1 + artifacts.length) % artifacts.length;
+                    break;
+                  case "Home":
+                    nextIndex = 0;
+                    break;
+                  case "End":
+                    nextIndex = artifacts.length - 1;
+                    break;
+                  default:
+                    return;
+                }
+                event.preventDefault();
+                const next = artifacts[nextIndex];
+                onSelect(next.id);
+                tabRefs.current.get(next.id)?.focus();
+              },
+              className: `flex min-w-0 items-center gap-2 px-3 py-2 text-[12px] uppercase tracking-wider font-medium transition-colors hover:text-foreground ${focusRingInset}`,
               children: [
                 /* @__PURE__ */ jsx10(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
                 /* @__PURE__ */ jsx10("span", { className: "max-w-[14rem] truncate", children: artifactTabLabel(artifact) })
@@ -1681,8 +1737,9 @@ function ArtifactTabs({
             {
               type: "button",
               "aria-label": `Close ${artifactTabLabel(artifact)}`,
+              tabIndex: isActive ? 0 : -1,
               onClick: () => onClose(artifact.id),
-              className: "mr-1 rounded-[2px] p-1 opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60 group-hover:opacity-100",
+              className: `mr-1 rounded-[2px] p-1 opacity-0 transition-opacity hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 ${focusRing5}`,
               children: /* @__PURE__ */ jsx10(X4, { className: "h-3 w-3" })
             }
           )
@@ -1818,6 +1875,8 @@ function SandboxWorkbench({
   className
 }) {
   const artifacts = useMemo4(() => sortPinnedFirst(artifactsProp), [artifactsProp]);
+  const artifactTabsId = useId2();
+  const artifactPanelId = `${artifactTabsId}-panel`;
   const [uncontrolledArtifactId, setUncontrolledArtifactId] = useState5(
     activeArtifactId ?? artifacts[0]?.id
   );
@@ -1889,17 +1948,30 @@ function SandboxWorkbench({
         artifacts,
         activeArtifactId: resolvedArtifactId,
         onSelect: handleArtifactChange,
-        onClose: onArtifactClose
+        onClose: onArtifactClose,
+        tabIdPrefix: artifactTabsId,
+        panelId: artifactPanelId
       }
     ),
-    /* @__PURE__ */ jsx10("div", { className: "min-h-0 flex-1 overflow-auto bg-surface-container", children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx10("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx10(
-      EmptyState2,
+    /* @__PURE__ */ jsx10(
+      "div",
       {
-        icon: /* @__PURE__ */ jsx10(Boxes, { className: "h-8 w-8" }),
-        title: "No artifact selected",
-        description: "Select a generated artifact, file preview, or OpenUI panel to inspect it here."
+        id: artifactPanelId,
+        role: "tabpanel",
+        "aria-labelledby": activeArtifact ? `${artifactTabsId}-${activeArtifact.id}` : void 0,
+        "aria-label": activeArtifact ? void 0 : "Artifact content",
+        tabIndex: 0,
+        className: `min-h-0 flex-1 overflow-auto bg-surface-container ${focusRingInset}`,
+        children: activeArtifact ? renderArtifact(activeArtifact) : /* @__PURE__ */ jsx10("div", { className: "flex h-full items-center justify-center p-6", children: emptyArtifactState ?? /* @__PURE__ */ jsx10(
+          EmptyState2,
+          {
+            icon: /* @__PURE__ */ jsx10(Boxes, { className: "h-8 w-8" }),
+            title: "No artifact selected",
+            description: "Select a generated artifact, file preview, or OpenUI panel to inspect it here."
+          }
+        ) })
       }
-    ) }) })
+    )
   ] }) : null;
   const directoryPlacement = layout?.directoryPlacement ?? (directory ? "left" : "hidden");
   const artifactPlacement = layout?.artifactPlacement ?? (artifactPanel ? "right" : "hidden");
@@ -2380,6 +2452,7 @@ function CalendarView({
 
 // src/workspace/approval-queue.tsx
 import { useState as useState8, useMemo as useMemo7 } from "react";
+import { focusField as focusField2 } from "@tangle-network/ui/utils";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function ApprovalQueue({
   items,
@@ -2498,7 +2571,7 @@ function ApprovalQueue({
                   placeholder: "Why are you rejecting this?",
                   value: rejectReason,
                   onChange: (e) => setRejectReason(e.target.value),
-                  className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 mb-2",
+                  className: `w-full rounded-md border bg-surface-container-low px-3 py-2 text-sm placeholder:text-muted-foreground mb-2 ${focusField2}`,
                   rows: 2
                 }
               ),