@tangle-network/ui 11.9.0 → 11.10.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @tangle-network/ui
 
+## 11.10.0
+
+### Minor Changes
+
+- 4649d22: Replace the hard 2px indigo focus ring with one soft focus treatment for every control.
+  
+  brand adds `--focus-border`, `--focus-halo`, `--focus-border-danger`, `--focus-halo-danger` and `--border-strong`. Each derives from the ring, danger-ink, border and foreground tokens, so every theme, named theme and light island resolves its own values. The focus border clears 3:1 against the field in every theme, which `focus.test.ts` enforces.
+  
+  brand's `globals.css` also gives any control that styles no focus of its own (a hand-rolled button, link, radio card or tab) the same keyboard focus line and halo in the base layer, in place of the browser's blue outline. Component utilities still override it.
+  
+  ui exports `focusField`, `focusFieldWithin`, `focusFieldInvalid`, `focusRing` and `focusRingInset` from `utils`, and the primitives use them:
+  
+  - `Input`, `Textarea`, `SelectTrigger` and `TerminalInput` rest on the neutral `border-border` hairline instead of the muted-text `border-input`, darken slightly on hover, and on focus shift the border to `--focus-border` with a 3px `--focus-halo` ring. The `default` and `sandbox` variants now render the same field.
+  - `Button`, `Tabs`, `Switch`, `Badge`, `SegmentedControl`, the dialog and toast close buttons, the auth menu trigger, and the chat and file controls show a 1px focus line with the same halo on `:focus-visible` only. A mouse click no longer draws a ring.
+  - Interactive `Card`, tool-preview and code-block hovers darken the border instead of tinting it indigo.
+  
+  A consumer that removed the old ring with `focus-visible:ring-0` on a field should pass `focus:ring-0` instead, because the field ring now keys off `:focus`.
+
+### Patch Changes
+
+- 53add99: `focusFieldWithin` lights the container only while a field inside it has focus: a text input, textarea, select or contenteditable editor. It used `:focus-within`, so clicking a composer's send button drew the field ring around the whole composer, and tabbing to that button showed two indicators. A focused button, checkbox or button-type input inside the container now shows only its own ring. Because the rule keys off `:has()`, a consumer's `focus-within:*` class does not override it; compose your own classes for a different container focus.
+
 ## 11.9.0
 
 ### Minor Changes

package/README.md

@@ -69,6 +69,20 @@ One consequence worth knowing. This is a scan, not a manifest, so a consumer emi
 
 See [`@tangle-network/brand`'s README](../brand/README.md) for the token-level breakdown, the finer-grained imports, and the fonts, which brand deliberately does not bundle.
 
+### Focus treatment
+
+Every control shares one focus treatment, exported from `utils` as class strings.
+Compose them with `cn` so tailwind-merge resolves any override.
+
+- `focusField` — a text field: neutral hairline, a slightly darker border on hover, and on `:focus` a `--focus-border` border with a 3px `--focus-halo` ring.
+- `focusFieldWithin` — the same, for a container that wraps a borderless field, such as a composer around a textarea. It lights while a text input, textarea, native `<select>` or contenteditable editor inside it has focus, not while a button inside it does. It keys off `:has()`, so a `focus-within:*` class does not override it.
+- `focusFieldInvalid` — the error state of a field. Compose it after `focusField`.
+- `focusRing` — keyboard focus on a button, tab, switch or link: a 1px `--focus-border` outline with the halo beyond it, on `:focus-visible` only.
+- `focusRingInset` — `focusRing` drawn inside the box, for a control in a scrolling strip.
+
+The colors come from the `--focus-*` tokens in `@tangle-network/brand`, so they need brand 1.6 or later.
+To remove the ring from a field nested in a focusable container, pass `focus:ring-0 border-0` and put `focusFieldWithin` on the container.
+
 ## Subpaths
 
 Sixteen named exports: `primitives`, `chat`, `run`, `openui`, `files`, `editor`, `markdown`, `auth`, `hooks`, `sdk-hooks`, `stores`, `types`, `utils`, `tool-previews`, `nav`, `redaction`.

package/dist/auth.js

@@ -3,9 +3,10 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-NKDZ7GZE.js";
+} from "./chunk-KFQGHD73.js";
 import "./chunk-34A66VBG.js";
-import "./chunk-MKTSMWVD.js";
+import "./chunk-42PAH5D2.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AuthHeader,

package/dist/chat.js

@@ -5,20 +5,21 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-7YOCS6IF.js";
+} from "./chunk-C5WF4WMV.js";
 import "./chunk-565EATZZ.js";
-import "./chunk-TN4FUEWY.js";
-import "./chunk-KNYSKNZX.js";
+import "./chunk-YU4E5J2N.js";
+import "./chunk-R7B3UWPF.js";
 import "./chunk-ND3ZFXQK.js";
-import "./chunk-NWECTSOH.js";
+import "./chunk-HMAPIH7L.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-3TI5DEHV.js";
-import "./chunk-GYPQXTJU.js";
+import "./chunk-BEBXZPHW.js";
+import "./chunk-M3QZK62R.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-XU3HB5QL.js";
-import "./chunk-MKTSMWVD.js";
-import "./chunk-EOAX2ENE.js";
-import "./chunk-WUQDUBJG.js";
+import "./chunk-42PAH5D2.js";
+import "./chunk-OL5GYLHV.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   AgentTimeline,

package/dist/{chunk-WUQDUBJG.js → chunk-3XXBZL53.js}

@@ -1,3 +1,6 @@
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -154,7 +157,10 @@ var CopyButton = memo(({ text }) => {
     "button",
     {
       onClick: handleCopy,
-      className: "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-primary/20 transition-colors",
+      className: cn(
+        "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-[var(--border-strong)] transition-colors",
+        focusRing
+      ),
       title: "Copy to clipboard",
       children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-muted-foreground" })
     }

package/dist/{chunk-MKTSMWVD.js → chunk-42PAH5D2.js}

@@ -1,3 +1,6 @@
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -8,7 +11,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`,
   {
     variants: {
       variant: {

package/dist/{chunk-LDLOJKPC.js → chunk-55WHV7SS.js}

@@ -1,6 +1,13 @@
 import {
   Card
-} from "./chunk-GYPQXTJU.js";
+} from "./chunk-M3QZK62R.js";
+import {
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -53,10 +60,19 @@ var DialogContent = React.forwardRef(({ className, children, variant = "default"
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-          ] })
+          /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              className: cn(
+                "absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+                focusRing
+              ),
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
         ]
       }
     )
@@ -118,13 +134,17 @@ import * as React2 from "react";
 import { cva } from "class-variance-authority";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var inputVariants = cva(
-  "flex w-full rounded-lg border bg-card px-4 py-2 text-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+  cn(
+    "flex w-full rounded-lg border bg-card px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    focusField
+  ),
   {
     variants: {
+      // `default` and `sandbox` render the same field; both names stay valid.
       variant: {
-        default: "border-input focus:ring-ring",
-        sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]",
-        error: "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]"
+        default: "",
+        sandbox: "",
+        error: focusFieldInvalid
       },
       size: {
         default: "h-11",
@@ -169,22 +189,18 @@ var Input = React2.forwardRef(
 );
 Input.displayName = "Input";
 var Textarea = React2.forwardRef(
-  ({ className, variant = "default", label, error, hint, id, ...props }, ref) => {
+  ({ className, variant: _variant, label, error, hint, id, ...props }, ref) => {
     const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
-    const variants = {
-      default: "border-input focus:ring-ring",
-      sandbox: "border-border focus:border-[var(--border-accent-hover)] focus:ring-[var(--border-accent)]"
-    };
     const textarea = /* @__PURE__ */ jsx2(
       "textarea",
       {
         id: textareaId,
         className: cn(
-          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm transition-all duration-200",
+          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm",
           "placeholder:text-muted-foreground",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          error ? "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]" : variants[variant],
+          focusField,
+          error && focusFieldInvalid,
           className
         ),
         ref,
@@ -222,7 +238,8 @@ var SelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) =
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      focusField,
       className
     ),
     ...props,
@@ -389,9 +406,10 @@ function SegmentedControl({
               if (!active) onValueChange(option.value);
             },
             className: cn(
-              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-colors",
-              variant === "row" && "rounded-md px-3 py-1.5",
-              variant === "tabs" && "rounded-none border-b-2 -mb-px px-4 py-2",
+              "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-[color,background-color,border-color,box-shadow]",
+              variant === "row" && ["rounded-md px-3 py-1.5", focusRing],
+              // The strip scrolls horizontally, which would clip an outer ring.
+              variant === "tabs" && ["rounded-none border-b-2 -mb-px px-4 py-2", focusRingInset],
               // Active styling is the ONLY styled state — unselected
               // segments stay transparent on purpose so they don't
               // compete visually with the selection.
@@ -467,7 +485,8 @@ var Switch = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   SwitchPrimitives.Root,
   {
     className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      focusRing,
       className
     ),
     ...props,
@@ -597,7 +616,10 @@ function ToastComponent({
           {
             type: "button",
             onClick: () => onDismiss(id),
-            className: "shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
+            className: cn(
+              "shrink-0 rounded-md p-1 opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100",
+              focusRing
+            ),
             "aria-label": "Dismiss notification",
             children: /* @__PURE__ */ jsx8(X2, { className: "h-4 w-4" })
           }
@@ -897,7 +919,8 @@ var TerminalCursor = React11.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 TerminalCursor.displayName = "TerminalCursor";
 var TerminalInput = React11.forwardRef(
-  ({ className, onSubmit, variant = "default", ...props }, ref) => {
+  // `variant` is taken out so it never reaches the DOM element.
+  ({ className, onSubmit, variant: _variant, ...props }, ref) => {
     const [value, setValue] = React11.useState("");
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && value.trim() && onSubmit) {
@@ -905,16 +928,12 @@ var TerminalInput = React11.forwardRef(
         setValue("");
       }
     };
-    const variants = {
-      default: "border-border focus-within:border-border",
-      sandbox: "border-border focus-within:border-[var(--border-accent-hover)]"
-    };
     return /* @__PURE__ */ jsxs10(
       "div",
       {
         className: cn(
-          "flex items-center rounded-lg border bg-background px-4 py-2.5 font-mono text-sm transition-colors",
-          variants[variant],
+          "flex items-center rounded-lg border bg-background px-4 py-2.5 font-mono text-sm",
+          focusFieldWithin,
           className
         ),
         children: [

package/dist/{chunk-3TI5DEHV.js → chunk-BEBXZPHW.js}

@@ -11,16 +11,16 @@ import {
   TableHead,
   TableHeader,
   TableRow
-} from "./chunk-GYPQXTJU.js";
+} from "./chunk-M3QZK62R.js";
 import {
   Button
-} from "./chunk-MKTSMWVD.js";
+} from "./chunk-42PAH5D2.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
 import {
   CodeBlock
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-7YOCS6IF.js → chunk-C5WF4WMV.js}

@@ -6,20 +6,23 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-TN4FUEWY.js";
+} from "./chunk-YU4E5J2N.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-KNYSKNZX.js";
+} from "./chunk-R7B3UWPF.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ND3ZFXQK.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3TI5DEHV.js";
+} from "./chunk-BEBXZPHW.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -241,7 +244,10 @@ function ArtifactCard({ item }) {
           item.onClick?.();
         }
       },
-      className: "block w-full text-left transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+      className: cn(
+        "block w-full rounded-[var(--radius-lg)] text-left transition-transform hover:-translate-y-0.5",
+        focusRing
+      ),
       children: content
     }
   );
@@ -650,7 +656,7 @@ var ChatContainer = memo3(
             "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
             "border border-border bg-card shadow-[0_6px_16px_rgba(15,23,42,0.08)]",
             "text-xs text-foreground transition-colors hover:bg-accent",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
+            focusRing
           ),
           children: [
             /* @__PURE__ */ jsx5(ArrowDown, { className: "w-3 h-3" }),

package/dist/{chunk-NWECTSOH.js → chunk-HMAPIH7L.js}

@@ -4,7 +4,10 @@ import {
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -121,7 +124,10 @@ var CommandPreview = memo(({ part }) => {
           "button",
           {
             onClick: () => setExpanded((value) => !value),
-            className: "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-2 text-left transition-colors hover:border-[var(--border-accent-hover)] hover:bg-accent/45",
+            className: cn(
+              "flex w-full items-center gap-2 rounded-[var(--radius-md)] border border-border bg-muted px-3 py-2 text-left transition-colors hover:border-[var(--border-strong)] hover:bg-accent/45",
+              focusRing
+            ),
             children: [
               /* @__PURE__ */ jsx2("code", { className: "min-w-0 flex-1 truncate text-xs font-mono text-foreground", children: command }),
               lineCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
@@ -425,7 +431,7 @@ var WebSearchPreview = memo5(({ part }) => {
             href: result.url,
             target: "_blank",
             rel: "noreferrer",
-            className: "block rounded-[var(--radius-md)] border border-border bg-muted/55 px-3 py-3 transition-colors hover:border-[var(--border-accent-hover)] hover:bg-accent/50",
+            className: `block rounded-[var(--radius-md)] border border-border bg-muted/55 px-3 py-3 transition-colors hover:border-[var(--border-strong)] hover:bg-accent/50 ${focusRing}`,
             children: [
               /* @__PURE__ */ jsx6("div", { className: "text-sm font-medium text-foreground", children: result.title }),
               /* @__PURE__ */ jsx6("div", { className: "mt-1 truncate text-xs text-primary", children: result.url }),

package/dist/{chunk-ZKCEAIIZ.js → chunk-K5XFRUS4.js}

@@ -3,13 +3,16 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger
-} from "./chunk-Q56BYXQF.js";
+} from "./chunk-R7SUY4E3.js";
 import {
   ArtifactPane
 } from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -1302,7 +1305,10 @@ function DocumentEditorPane({
           type: "button",
           onClick: () => void onSave(draft),
           disabled: saving || !isDirty,
-          className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-primary/40 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className: cn(
+            "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-[var(--border-strong)] hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            focusRing
+          ),
           children: [
             /* @__PURE__ */ jsx6(Save, { className: "h-3.5 w-3.5" }),
             saving ? "Saving..." : saveLabel

package/dist/{chunk-NKDZ7GZE.js → chunk-KFQGHD73.js}

@@ -11,7 +11,10 @@ import {
 } from "./chunk-34A66VBG.js";
 import {
   Button
-} from "./chunk-MKTSMWVD.js";
+} from "./chunk-42PAH5D2.js";
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -82,7 +85,10 @@ function UserMenu({
       "button",
       {
         type: "button",
-        className: "flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring",
+        className: cn(
+          "flex items-center gap-2 rounded-lg p-1.5 transition-colors hover:bg-accent",
+          focusRing
+        ),
         children: [
           /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8", children: [
             /* @__PURE__ */ jsx(AvatarImage, { src: void 0, alt: user.name ?? user.email }),

package/dist/{chunk-GYPQXTJU.js → chunk-M3QZK62R.js}

@@ -1,3 +1,6 @@
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -20,7 +23,7 @@ var Card = React.forwardRef(({ className, variant = "default", hover = false, ..
         "rounded-[var(--radius-lg)] border text-card-foreground transition-[border-color,box-shadow]",
         "duration-[var(--transition-default)]",
         variants[variant],
-        hover && "cursor-pointer hover:border-primary/30",
+        hover && "cursor-pointer hover:border-[var(--border-strong)]",
         className
       ),
       ...props
@@ -71,7 +74,7 @@ CardFooter.displayName = "CardFooter";
 import { cva } from "class-variance-authority";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var badgeVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  `inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium text-xs transition-colors ${focusRing}`,
   {
     variants: {
       variant: {

package/dist/{chunk-EOAX2ENE.js → chunk-OL5GYLHV.js}

@@ -1,7 +1,7 @@
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-XYAIX4SU.js → chunk-QGFYBNSO.js}

@@ -1,10 +1,10 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-KNYSKNZX.js";
+} from "./chunk-R7B3UWPF.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-KNYSKNZX.js → chunk-R7B3UWPF.js}

@@ -11,7 +11,7 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-NWECTSOH.js";
+} from "./chunk-HMAPIH7L.js";
 import {
   TextShimmer
 } from "./chunk-L57WRIND.js";
@@ -20,7 +20,7 @@ import {
 } from "./chunk-4CLN43XT.js";
 import {
   CodeBlock
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-Q56BYXQF.js → chunk-R7SUY4E3.js}

@@ -1,3 +1,6 @@
+import {
+  focusRing
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -25,9 +28,9 @@ var TabsList = React.forwardRef(({ className, variant = "default", ...props }, r
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React.forwardRef(({ className, variant = "default", ...props }, ref) => {
   const variants = {
-    default: "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-    pills: "inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted",
-    underline: "inline-flex items-center justify-center whitespace-nowrap pb-3 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground"
+    default: `inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm`,
+    pills: `inline-flex items-center justify-center whitespace-nowrap rounded-full px-4 py-2 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:bg-muted`,
+    underline: `inline-flex items-center justify-center whitespace-nowrap rounded-t-md pb-3 text-sm font-medium transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground`
   };
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Trigger,
@@ -44,7 +47,8 @@ var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-4",
+      focusRing,
       "data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-2 data-[state=active]:animate-in",
       className
     ),

package/dist/chunk-WKWBTL2V.js

@@ -0,0 +1,15 @@
+// src/lib/focus.ts
+var focusField = "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]";
+var focusFieldWithin = "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
+var focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
+var focusRingBase = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)]";
+var focusRing = `${focusRingBase} focus-visible:outline-offset-0`;
+var focusRingInset = `${focusRingBase} focus-visible:-outline-offset-1 focus-visible:ring-inset`;
+
+export {
+  focusField,
+  focusFieldWithin,
+  focusFieldInvalid,
+  focusRing,
+  focusRingInset
+};

package/dist/{chunk-VPWY4I5O.js → chunk-X7CU776B.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-XYAIX4SU.js";
+} from "./chunk-QGFYBNSO.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-TN4FUEWY.js → chunk-YU4E5J2N.js}

@@ -2,20 +2,20 @@ import {
   ExpandableContent,
   InlineToolItem,
   RunRowShell
-} from "./chunk-KNYSKNZX.js";
+} from "./chunk-R7B3UWPF.js";
 import {
   TextShimmer
 } from "./chunk-L57WRIND.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3TI5DEHV.js";
+} from "./chunk-BEBXZPHW.js";
 import {
   formatDuration,
   truncateText
 } from "./chunk-4CLN43XT.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";