@tangle-network/sandbox-ui 0.113.3 → 0.113.5

package/dist/pages.js

@@ -23,7 +23,7 @@ import {
   SelectValue,
   Switch,
   Textarea
-} from "./chunk-2XPJ2XF7.js";
+} from "./chunk-ANSC5AFC.js";
 import "./chunk-RQZRXKMR.js";
 import {
   cn
@@ -493,6 +493,7 @@ import {
 // src/pages/add-ssh-key-dialog.tsx
 import * as React2 from "react";
 import { Loader2 } from "lucide-react";
+import { focusField } from "@tangle-network/ui/utils";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var NAME_INPUT_ID = "add-ssh-key-name";
 var KEY_INPUT_ID = "add-ssh-key-public-key";
@@ -585,7 +586,7 @@ function AddSshKeyDialog({
             placeholder: "My laptop",
             autoComplete: "off",
             "aria-invalid": errors.name ? true : void 0,
-            className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: `w-full rounded-md border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField}`
           }
         ),
         errors.name && /* @__PURE__ */ jsx3("p", { className: "text-xs text-destructive", children: errors.name })
@@ -610,7 +611,7 @@ function AddSshKeyDialog({
             autoComplete: "off",
             spellCheck: false,
             "aria-invalid": errors.publicKey ? true : void 0,
-            className: "min-h-24 w-full resize-y rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className: `min-h-24 w-full resize-y rounded-md border bg-surface-container-low px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground ${focusField}`
           }
         ),
         errors.publicKey && /* @__PURE__ */ jsx3("p", { className: "text-xs text-destructive", children: errors.publicKey })
@@ -647,6 +648,7 @@ function AddSshKeyDialog({
 }
 
 // src/pages/provisioning-wizard.tsx
+import { focusRing } from "@tangle-network/ui/utils";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var VALID_DRIVERS = /* @__PURE__ */ new Set([
   "docker",
@@ -913,6 +915,7 @@ function EnvVarValueInput({
       Input,
       {
         type: revealed ? "text" : "password",
+        "aria-label": "Environment variable value",
         value,
         onChange: (e) => onChange(e.target.value),
         autoComplete: "off",
@@ -927,7 +930,7 @@ function EnvVarValueInput({
         onClick: () => setRevealed((s) => !s),
         "aria-label": revealed ? "Hide value" : "Show value",
         "aria-pressed": revealed,
-        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className: `absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground ${focusRing}`,
         children: revealed ? /* @__PURE__ */ jsx4(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx4(Eye, { className: "h-4 w-4" })
       }
     )
@@ -947,6 +950,7 @@ function ProvisioningWizard({
   pricingRates,
   planTiers
 }) {
+  const fieldIdPrefix = React3.useId();
   const cpuMax = Math.max(CPU_MIN, resourceLimits?.cpuMax ?? CPU_MAX);
   const ramMax = Math.max(RAM_MIN, resourceLimits?.ramMaxGB ?? RAM_MAX);
   const storageMax = Math.max(
@@ -1284,6 +1288,7 @@ function ProvisioningWizard({
             ] }),
             /* @__PURE__ */ jsx4("div", { className: "space-y-4", children: [
               {
+                id: "cpu",
                 label: "Compute Cores (CPU)",
                 value: cpuCores,
                 setter: setCpuCores,
@@ -1293,6 +1298,7 @@ function ProvisioningWizard({
                 unit: "vCPU"
               },
               {
+                id: "ram",
                 label: "Memory (RAM)",
                 value: ramGB,
                 setter: setRamGB,
@@ -1302,6 +1308,7 @@ function ProvisioningWizard({
                 unit: "GB"
               },
               {
+                id: "storage",
                 label: "Ephemeral Storage",
                 value: storageGB,
                 setter: setStorageGB,
@@ -1311,16 +1318,17 @@ function ProvisioningWizard({
                 unit: "GB"
               }
             ].map(
-              ({ label, value, setter, min, max, step: s, unit }) => {
+              ({ id, label, value, setter, min, max, step: s, unit }) => {
                 const displayUnit = unit === "vCPU" ? `${value} vCPU${value === 1 ? "" : "s"}` : `${value}${unit}`;
                 return /* @__PURE__ */ jsxs4("div", { children: [
                   /* @__PURE__ */ jsxs4("div", { className: "flex justify-between items-end pb-1 mb-1.5", children: [
-                    /* @__PURE__ */ jsx4("label", { className: FIELD_LABEL_CLASS, children: label }),
+                    /* @__PURE__ */ jsx4("label", { htmlFor: `${fieldIdPrefix}-${id}`, className: FIELD_LABEL_CLASS, children: label }),
                     /* @__PURE__ */ jsx4("span", { className: "text-sm font-semibold text-foreground tabular-nums", children: displayUnit })
                   ] }),
                   /* @__PURE__ */ jsx4(
                     "input",
                     {
+                      id: `${fieldIdPrefix}-${id}`,
                       type: "range",
                       min,
                       max,
@@ -1353,20 +1361,23 @@ function ProvisioningWizard({
               {
                 type: "button",
                 onClick: () => setShowAdvanced(!showAdvanced),
-                className: "flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors text-sm font-medium focus:outline-none",
+                "aria-expanded": showAdvanced,
+                "aria-controls": `${fieldIdPrefix}-advanced`,
+                className: `flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors text-sm font-medium ${focusRing}`,
                 children: [
                   /* @__PURE__ */ jsx4(Settings, { className: "w-4 h-4" }),
                   showAdvanced ? "Hide Advanced Options" : "Show Advanced Options"
                 ]
               }
             ),
-            showAdvanced && /* @__PURE__ */ jsxs4("div", { className: "mt-4 space-y-4", children: [
+            /* @__PURE__ */ jsxs4("div", { id: `${fieldIdPrefix}-advanced`, hidden: !showAdvanced, className: "mt-4 space-y-4", children: [
               /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
                 /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx4("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Workspace Name" }),
+                  /* @__PURE__ */ jsx4("label", { htmlFor: `${fieldIdPrefix}-name`, className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Workspace Name" }),
                   /* @__PURE__ */ jsx4(
                     Input,
                     {
+                      id: `${fieldIdPrefix}-name`,
                       type: "text",
                       value: name,
                       onChange: (e) => setName(e.target.value),
@@ -1377,7 +1388,7 @@ function ProvisioningWizard({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs4("div", { children: [
-                  /* @__PURE__ */ jsx4("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Virtualization Driver" }),
+                  /* @__PURE__ */ jsx4("label", { htmlFor: `${fieldIdPrefix}-driver`, className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Virtualization Driver" }),
                   /* @__PURE__ */ jsxs4(
                     Select,
                     {
@@ -1389,7 +1400,7 @@ function ProvisioningWizard({
                           );
                       },
                       children: [
-                        /* @__PURE__ */ jsx4(SelectTrigger, { className: "h-9", children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
+                        /* @__PURE__ */ jsx4(SelectTrigger, { id: `${fieldIdPrefix}-driver`, className: "h-9", children: /* @__PURE__ */ jsx4(SelectValue, {}) }),
                         /* @__PURE__ */ jsxs4(SelectContent, { children: [
                           /* @__PURE__ */ jsx4(SelectItem, { value: "docker", children: "Docker container (Default)" }),
                           /* @__PURE__ */ jsx4(SelectItem, { value: "firecracker", children: "Firecracker microVM (Secure)" }),
@@ -1401,10 +1412,11 @@ function ProvisioningWizard({
                 ] })
               ] }),
               /* @__PURE__ */ jsxs4("div", { children: [
-                /* @__PURE__ */ jsx4("label", { className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Git Repository URL" }),
+                /* @__PURE__ */ jsx4("label", { htmlFor: `${fieldIdPrefix}-git-url`, className: cn(FIELD_LABEL_CLASS, "mb-1.5"), children: "Git Repository URL" }),
                 /* @__PURE__ */ jsx4(
                   Input,
                   {
+                    id: `${fieldIdPrefix}-git-url`,
                     type: "text",
                     value: gitUrl,
                     onChange: (e) => setGitUrl(e.target.value),
@@ -1435,6 +1447,7 @@ function ProvisioningWizard({
                       Input,
                       {
                         type: "text",
+                        "aria-label": "Environment variable name",
                         value: env.key,
                         onChange: (e) => setEnvVars(
                           envVars.map(
@@ -1496,7 +1509,7 @@ function ProvisioningWizard({
                                 (id) => id !== script.id
                               ) : [...prev, script.id]
                             ),
-                            className: "mt-0.5 h-4 w-4 rounded border-[var(--md3-outline-variant)] text-primary focus:ring-primary/30"
+                            className: `mt-0.5 h-4 w-4 rounded border-[var(--md3-outline-variant)] text-primary ${focusRing}`
                           }
                         ),
                         /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0", children: [
@@ -2549,6 +2562,7 @@ function parseEnvText(text) {
 }
 
 // src/pages/secrets-page.tsx
+import { focusField as focusField2 } from "@tangle-network/ui/utils";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var MAX_IMPORT_FILE_BYTES = 256 * 1024;
 function SecretsPage({ apiClient, className, teamSecretsHint }) {
@@ -2738,7 +2752,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
             {
               type: "button",
               onClick: () => setIsImportOpen(true),
-              className: "inline-flex items-center gap-2 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-4 py-2.5 text-sm font-semibold text-foreground hover:bg-surface-container-high transition-colors active:scale-[0.97]",
+              className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-surface-container-high active:scale-[0.97] sm:gap-2 sm:px-4",
               children: [
                 /* @__PURE__ */ jsx7(Upload, { className: "h-4 w-4" }),
                 "Import .env"
@@ -2750,7 +2764,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
             {
               type: "button",
               onClick: () => setIsCreateOpen(true),
-              className: "inline-flex items-center gap-2 rounded-lg bg-[var(--btn-primary-bg)] border border-[var(--border-accent,transparent)] px-5 py-2.5 text-sm font-semibold text-[var(--btn-primary-text)] hover:bg-[var(--btn-primary-hover)] transition-colors active:scale-[0.97]",
+              className: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg border border-[var(--border-accent,transparent)] bg-[var(--btn-primary-bg)] px-3 py-2.5 text-sm font-semibold text-[var(--btn-primary-text)] transition-colors hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] sm:gap-2 sm:px-5",
               children: [
                 /* @__PURE__ */ jsx7(Plus3, { className: "h-4 w-4" }),
                 "New Secret"
@@ -2760,14 +2774,16 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
         ] })
       }
     ),
-    teamSecretsHint && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3 rounded-lg border border-[var(--md3-outline-variant)] bg-[var(--accent-surface-soft)]/40 px-4 py-3", children: [
-      /* @__PURE__ */ jsx7(Users, { className: "h-5 w-5 shrink-0 text-[var(--accent-text)]", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex-1 text-sm", children: [
-        /* @__PURE__ */ jsx7("p", { className: "font-semibold text-foreground", children: "Setting up secrets for a team?" }),
-        /* @__PURE__ */ jsxs7("p", { className: "mt-0.5 text-muted-foreground text-xs", children: [
-          "Secrets here are ",
-          /* @__PURE__ */ jsx7("strong", { children: "personal" }),
-          " \u2014 only available in sandboxes you create. To share credentials with teammates, configure them on the team page instead."
+    teamSecretsHint && /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-3 rounded-lg border border-[var(--md3-outline-variant)] bg-[var(--accent-surface-soft)]/40 px-4 py-3", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex min-w-[min(100%,18rem)] flex-1 items-start gap-3", children: [
+        /* @__PURE__ */ jsx7(Users, { className: "mt-0.5 h-5 w-5 shrink-0 text-[var(--accent-text)]", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs7("div", { className: "min-w-0 text-sm", children: [
+          /* @__PURE__ */ jsx7("p", { className: "font-semibold text-foreground", children: "Setting up secrets for a team?" }),
+          /* @__PURE__ */ jsxs7("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [
+            "Secrets here are ",
+            /* @__PURE__ */ jsx7("strong", { children: "personal" }),
+            " and only available in sandboxes you create. Add shared credentials on the team page."
+          ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs7(
@@ -2775,7 +2791,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
         {
           type: "button",
           onClick: teamSecretsHint.onNavigate,
-          className: "inline-flex shrink-0 items-center gap-1 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-1.5 text-xs font-semibold text-foreground hover:bg-surface-container-high transition-colors",
+          className: "inline-flex w-full shrink-0 items-center justify-center gap-1 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:bg-surface-container-high sm:w-auto",
           children: [
             teamSecretsHint.label ?? "Manage team secrets",
             /* @__PURE__ */ jsx7(ArrowRight, { className: "h-3 w-3", "aria-hidden": "true" })
@@ -2843,7 +2859,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                   onChange: (e) => setNewName(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "_")),
                   placeholder: "MY_SECRET_KEY",
                   autoComplete: "off",
-                  className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className: `w-full rounded-md border bg-surface-container-low px-3 py-2.5 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField2}`
                 }
               )
             ] }),
@@ -2860,7 +2876,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                     onChange: (e) => setNewValue(e.target.value),
                     placeholder: "Enter secret value...",
                     autoComplete: "new-password",
-                    className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    className: `w-full rounded-md border bg-surface-container-low px-3 py-2.5 pr-10 text-sm font-mono text-foreground placeholder:text-muted-foreground ${focusField2}`
                   }
                 ),
                 /* @__PURE__ */ jsx7(
@@ -2968,7 +2984,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
               onChange: (e) => setImportText(e.target.value),
               rows: 6,
               spellCheck: false,
-              className: "w-full rounded-md border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+              className: `w-full rounded-md border bg-surface-container-low px-3 py-2 font-mono text-xs text-foreground placeholder:text-muted-foreground ${focusField2}`
             }
           ),
           /* @__PURE__ */ jsxs7("p", { className: "text-[11px] text-muted-foreground", children: [
@@ -3027,7 +3043,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                   value: row.key,
                   onChange: (e) => updateRowKey(index, e.target.value),
                   disabled: isImportSaving,
-                  className: "w-2/5 rounded border border-[var(--md3-outline-variant)] bg-surface-container-low px-2 py-1.5 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-60"
+                  className: `w-2/5 rounded border bg-surface-container-low px-2 py-1.5 font-mono text-xs text-foreground disabled:opacity-60 ${focusField2}`
                 }
               ),
               /* @__PURE__ */ jsx7(
@@ -3038,7 +3054,7 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
                   value: row.value,
                   onChange: (e) => updateRowValue(index, e.target.value),
                   disabled: isImportSaving,
-                  className: "w-2/5 rounded border border-[var(--md3-outline-variant)] bg-surface-container-low px-2 py-1.5 font-mono text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-60"
+                  className: `w-2/5 rounded border bg-surface-container-low px-2 py-1.5 font-mono text-xs text-foreground disabled:opacity-60 ${focusField2}`
                 }
               ),
               /* @__PURE__ */ jsxs7("div", { className: "flex w-1/5 flex-col items-end gap-1", children: [
@@ -3154,19 +3170,25 @@ function SecretsPage({ apiClient, className, teamSecretsHint }) {
         )
       ] }) : /* @__PURE__ */ jsxs7("table", { className: "w-full text-left border-collapse", children: [
         /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]", children: [
-          /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Secret Name" }),
-          /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: "Encrypted Value" }),
-          /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-right", children: "Created" }),
-          /* @__PURE__ */ jsx7("th", { className: "px-6 py-4 w-12" })
+          /* @__PURE__ */ jsx7("th", { scope: "col", className: "px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground sm:px-6 sm:py-4", children: "Secret Name" }),
+          /* @__PURE__ */ jsx7("th", { scope: "col", className: "hidden px-6 py-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground sm:table-cell", children: "Encrypted Value" }),
+          /* @__PURE__ */ jsx7("th", { scope: "col", className: "hidden px-6 py-4 text-right text-[10px] font-bold uppercase tracking-widest text-muted-foreground sm:table-cell", children: "Created" }),
+          /* @__PURE__ */ jsx7("th", { scope: "col", "aria-label": "Actions", className: "w-12 px-3 py-3 sm:px-6 sm:py-4" })
         ] }) }),
         /* @__PURE__ */ jsx7("tbody", { className: "divide-y divide-border", children: secrets.map((secret) => /* @__PURE__ */ jsxs7("tr", { className: "hover:bg-surface-container-high transition-colors", children: [
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx7(Key, { className: "h-4 w-4 text-muted-foreground" }),
-            /* @__PURE__ */ jsx7("span", { className: "text-sm font-bold font-mono text-foreground", children: secret.name })
+          /* @__PURE__ */ jsx7("td", { className: "px-4 py-3 sm:px-6 sm:py-4", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx7(Key, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs7("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx7("span", { className: "break-all font-mono text-sm font-bold text-foreground sm:break-normal", children: secret.name }),
+              /* @__PURE__ */ jsxs7("span", { className: "mt-1 block text-xs text-muted-foreground sm:hidden", children: [
+                "Created ",
+                formatDate(secret.createdAt)
+              ] })
+            ] })
           ] }) }),
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx7("code", { className: "text-xs font-mono text-muted-foreground bg-surface-container-high px-2 py-1 rounded", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }) }),
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-4 text-right", children: /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground", children: formatDate(secret.createdAt) }) }),
-          /* @__PURE__ */ jsx7("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx7("td", { className: "hidden px-6 py-4 sm:table-cell", children: /* @__PURE__ */ jsx7("code", { className: "text-xs font-mono text-muted-foreground bg-surface-container-high px-2 py-1 rounded", children: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }) }),
+          /* @__PURE__ */ jsx7("td", { className: "hidden px-6 py-4 text-right sm:table-cell", children: /* @__PURE__ */ jsx7("span", { className: "text-xs text-muted-foreground", children: formatDate(secret.createdAt) }) }),
+          /* @__PURE__ */ jsx7("td", { className: "px-3 py-3 sm:px-6 sm:py-4", children: /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -3252,6 +3274,7 @@ import {
   DialogHeader as DialogHeader4,
   DialogTitle as DialogTitle4
 } from "@tangle-network/ui/primitives";
+import { focusField as focusField3 } from "@tangle-network/ui/utils";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var SCRIPT_TYPE_META = {
   bash: {
@@ -3703,7 +3726,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, name: e.target.value })),
                     placeholder: "Install Claude Code",
                     maxLength: 64,
-                    className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    className: `mt-1.5 w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField3}`
                   }
                 )
               ] }),
@@ -3717,7 +3740,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, description: e.target.value })),
                     placeholder: "Sets up Claude Code with authentication",
                     maxLength: 256,
-                    className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                    className: `mt-1.5 w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField3}`
                   }
                 )
               ] }),
@@ -3754,7 +3777,7 @@ function StartupScriptsPage({ apiClient, className }) {
                     onChange: (e) => setFormData((p) => ({ ...p, content: e.target.value })),
                     rows: 12,
                     spellCheck: false,
-                    className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-4 py-3 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-y"
+                    className: `mt-1.5 w-full rounded-lg border bg-surface-container-low px-4 py-3 font-mono text-sm text-foreground placeholder:text-muted-foreground resize-y ${focusField3}`
                   }
                 ),
                 /* @__PURE__ */ jsxs9("p", { className: "mt-1 text-xs text-muted-foreground", children: [
@@ -3842,7 +3865,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           placeholder: "Any",
                           min: 0.5,
                           step: 0.5,
-                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: `mt-1.5 w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField3}`
                         }
                       )
                     ] }),
@@ -3863,7 +3886,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           placeholder: "Any",
                           min: 1,
                           step: 1,
-                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: `mt-1.5 w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField3}`
                         }
                       )
                     ] })
@@ -3882,7 +3905,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           onChange: (e) => setFormData((p) => ({ ...p, runOrder: e.target.value ? Math.max(0, Number(e.target.value)) : 0 })),
                           min: 0,
                           max: 9999,
-                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: `mt-1.5 w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField3}`
                         }
                       ),
                       /* @__PURE__ */ jsx9("p", { className: "mt-1 text-xs text-muted-foreground", children: "Lower runs first" })
@@ -3900,7 +3923,7 @@ function StartupScriptsPage({ apiClient, className }) {
                           onChange: (e) => setFormData((p) => ({ ...p, timeoutSeconds: e.target.value ? Math.max(5, Number(e.target.value)) : 300 })),
                           min: 5,
                           max: 3600,
-                          className: "mt-1.5 w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                          className: `mt-1.5 w-full rounded-lg border bg-surface-container-low px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground ${focusField3}`
                         }
                       )
                     ] })

package/dist/primitives.d.ts

@@ -1,7 +1,8 @@
-export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
-export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CaIvk3J1.js';
+export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Button, ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CodeBlock, CodeBlockProps, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, FilterField, FilterFieldProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Metric, MetricProps, MetricStrip, MetricStripProps, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, StatusPill, StatusPillProps, StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, TextShimmerProps, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, Toolbar, ToolbarProps, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, buttonVariants, useTheme, useToast } from '@tangle-network/ui/primitives';
+export { L as Logo, a as LogoProps } from './logo-DiAjq759.js';
 import * as React from 'react';
 import { HTMLAttributes, ElementType, ReactNode } from 'react';
+export { TangleKnot } from '@tangle-network/brand';
 
 /**
  * Canonical type roles for the Tangle design system. Every title in every

package/dist/primitives.js

@@ -87,6 +87,7 @@ import {
   TerminalDisplay,
   TerminalInput,
   TerminalLine,
+  TextShimmer,
   Textarea,
   ThemeToggle,
   ToastContainer,
@@ -97,7 +98,7 @@ import {
   buttonVariants,
   useTheme,
   useToast
-} from "./chunk-2XPJ2XF7.js";
+} from "./chunk-ANSC5AFC.js";
 import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {
@@ -189,6 +190,7 @@ export {
   TerminalDisplay,
   TerminalInput,
   TerminalLine,
+  TextShimmer,
   Textarea,
   ThemeToggle,
   ToastContainer,