@tangle-network/sandbox-ui 0.113.3 → 0.113.5

package/dist/{chunk-RDUYWQQ7.js → chunk-NNARED4T.js}

@@ -1,9 +1,9 @@
 import {
   RichFileTree
-} from "./chunk-PZVUIUUW.js";
+} from "./chunk-ULPLRBMF.js";
 import {
   PortsList
-} from "./chunk-K4Q4E7D7.js";
+} from "./chunk-SX344CDB.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: [