@tangle-network/ui 11.9.0 → 11.10.0

package/dist/{chunk-YJ6RE5WV.js → chunk-YZ6AK25N.js}

@@ -10,17 +10,21 @@ import {
 } from "./chunk-XU3HB5QL.js";
 import {
   Button
-} from "./chunk-MKTSMWVD.js";
+} from "./chunk-42PAH5D2.js";
 import {
   ArtifactPane
 } from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
+import {
+  focusRing,
+  focusRingInset
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -456,7 +460,8 @@ function ImagePreview({ src, filename }) {
           "aria-pressed": naturalSize,
           "aria-label": naturalSize ? "Fit image to pane" : "Show image at natural size",
           className: cn(
-            "flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/60",
+            "flex items-center justify-center",
+            focusRingInset,
             naturalSize ? "m-auto cursor-zoom-out" : "h-full w-full cursor-zoom-in p-4"
           ),
           children: /* @__PURE__ */ jsx3(
@@ -689,7 +694,10 @@ function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
             {
               type: "button",
               onClick: () => onSelect(tab.id),
-              className: "flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/60",
+              className: cn(
+                "flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground",
+                focusRingInset
+              ),
               children: [
                 /* @__PURE__ */ jsx4(Icon, { className: "h-3 w-3 shrink-0" }),
                 /* @__PURE__ */ jsx4("span", { className: "max-w-[120px] truncate", children: tab.name }),
@@ -703,7 +711,10 @@ function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
               type: "button",
               "aria-label": `Close ${tab.name}`,
               onClick: () => onClose(tab.id),
-              className: "mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 group-hover:opacity-100",
+              className: cn(
+                "mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 group-hover:opacity-100",
+                focusRing
+              ),
               children: /* @__PURE__ */ jsx4(X2, { className: "h-2.5 w-2.5" })
             }
           )
@@ -719,7 +730,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-EX25CEYW.js");
+  const module = await import("./document-editor-pane-QHDOBA43.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({
@@ -763,7 +774,7 @@ function FileArtifactPane({
         type: "button",
         "aria-label": `Download ${filename}`,
         onClick: onDownload,
-        className: "rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+        className: `rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
         children: /* @__PURE__ */ jsx5(Download2, { className: "h-4 w-4" })
       }
     ),
@@ -773,7 +784,7 @@ function FileArtifactPane({
         type: "button",
         "aria-label": `Close ${filename}`,
         onClick: onClose,
-        className: "rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60",
+        className: `rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
         children: /* @__PURE__ */ jsx5(X3, { className: "h-4 w-4" })
       }
     )

package/dist/document-editor-pane-QHDOBA43.js

@@ -0,0 +1,13 @@
+"use client";
+import {
+  DocumentEditorPane
+} from "./chunk-K5XFRUS4.js";
+import "./chunk-R7SUY4E3.js";
+import "./chunk-LTEKI7YJ.js";
+import "./chunk-OL5GYLHV.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  DocumentEditorPane
+};

package/dist/editor.js

@@ -11,11 +11,12 @@ import {
   useEditorConnection,
   useEditorContext,
   useYjsState
-} from "./chunk-ZKCEAIIZ.js";
-import "./chunk-Q56BYXQF.js";
+} from "./chunk-K5XFRUS4.js";
+import "./chunk-R7SUY4E3.js";
 import "./chunk-LTEKI7YJ.js";
-import "./chunk-EOAX2ENE.js";
-import "./chunk-WUQDUBJG.js";
+import "./chunk-OL5GYLHV.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   CollaboratorsList,

package/dist/files.js

@@ -7,7 +7,7 @@ import {
   RichFileTree,
   filterFileTree,
   parseCsv
-} from "./chunk-YJ6RE5WV.js";
+} from "./chunk-YZ6AK25N.js";
 import "./chunk-4CLN43XT.js";
 import {
   detectFileFormat,
@@ -17,10 +17,11 @@ import {
   getSyntaxLanguage,
   resolveFilePreviewKind
 } from "./chunk-XU3HB5QL.js";
-import "./chunk-MKTSMWVD.js";
+import "./chunk-42PAH5D2.js";
 import "./chunk-LTEKI7YJ.js";
-import "./chunk-EOAX2ENE.js";
-import "./chunk-WUQDUBJG.js";
+import "./chunk-OL5GYLHV.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   CSV_PREVIEW_ROW_LIMIT,

package/dist/hooks.js

@@ -11,22 +11,23 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-VPWY4I5O.js";
+} from "./chunk-X7CU776B.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-565EATZZ.js";
-import "./chunk-XYAIX4SU.js";
-import "./chunk-KNYSKNZX.js";
+import "./chunk-QGFYBNSO.js";
+import "./chunk-R7B3UWPF.js";
 import "./chunk-ND3ZFXQK.js";
-import "./chunk-NWECTSOH.js";
+import "./chunk-HMAPIH7L.js";
 import "./chunk-L57WRIND.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-XU3HB5QL.js";
-import "./chunk-EOAX2ENE.js";
-import "./chunk-WUQDUBJG.js";
+import "./chunk-OL5GYLHV.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   RealtimeSessionRegistry,

package/dist/index.d.ts

@@ -19,7 +19,7 @@ export { S as SessionMessage } from './message-BHWbxBtT.js';
 export { R as ReasoningPart, S as SessionPart, T as TextPart, a as ToolPart, b as ToolState, c as ToolStatus, d as ToolTime } from './parts-dj7AcUg0.js';
 export { F as FinalTextPart, G as GroupedMessage, M as MessageRun, a as MessageUser, R as Run, b as RunStats, T as ToolCategory } from './run-PfLmDAox.js';
 export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-z4JcDmMQ.js';
-export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
 export { CommandPreview, CommandPreviewProps, DiffPreview, DiffPreviewProps, GlobResultsPreview, GlobResultsPreviewProps, GrepResultsPreview, GrepResultsPreviewProps, QuestionPreview, QuestionPreviewProps, WebSearchPreview, WebSearchPreviewProps, WriteFilePreview, WriteFilePreviewProps } from './tool-previews.js';
 export { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from './redaction.js';
 import 'class-variance-authority/types';

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-NKDZ7GZE.js";
+} from "./chunk-KFQGHD73.js";
 import {
   createAuthFetcher,
   useApiKey,
@@ -20,7 +20,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-VPWY4I5O.js";
+} from "./chunk-X7CU776B.js";
 import {
   addMessage,
   addParts,
@@ -64,7 +64,7 @@ import "./chunk-6BGQA4BQ.js";
 import {
   copyText,
   timeAgo
-} from "./chunk-XGKULLYE.js";
+} from "./chunk-SNLR2AEA.js";
 import "./chunk-3OI2QKFD.js";
 import {
   Dialog,
@@ -118,7 +118,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-LDLOJKPC.js";
+} from "./chunk-55WHV7SS.js";
 import {
   Avatar,
   AvatarFallback,
@@ -146,7 +146,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-7YOCS6IF.js";
+} from "./chunk-C5WF4WMV.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -158,17 +158,17 @@ import {
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-XYAIX4SU.js";
+} from "./chunk-QGFYBNSO.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-TN4FUEWY.js";
+} from "./chunk-YU4E5J2N.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-KNYSKNZX.js";
+} from "./chunk-R7B3UWPF.js";
 import {
   TOOL_CATEGORY_ICONS,
   getToolCategory,
@@ -183,14 +183,14 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-NWECTSOH.js";
+} from "./chunk-HMAPIH7L.js";
 import {
   TextShimmer
 } from "./chunk-L57WRIND.js";
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3TI5DEHV.js";
+} from "./chunk-BEBXZPHW.js";
 import {
   Badge,
   Card,
@@ -209,7 +209,7 @@ import {
   TableHeader,
   TableRow,
   badgeVariants
-} from "./chunk-GYPQXTJU.js";
+} from "./chunk-M3QZK62R.js";
 import {
   CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
@@ -219,7 +219,7 @@ import {
   RichFileTree,
   filterFileTree,
   parseCsv
-} from "./chunk-YJ6RE5WV.js";
+} from "./chunk-YZ6AK25N.js";
 import {
   formatBytes,
   formatDuration,
@@ -237,24 +237,31 @@ import {
 import {
   Button,
   buttonVariants
-} from "./chunk-MKTSMWVD.js";
+} from "./chunk-42PAH5D2.js";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger
-} from "./chunk-Q56BYXQF.js";
+} from "./chunk-R7SUY4E3.js";
 import {
   ArtifactPane
 } from "./chunk-LTEKI7YJ.js";
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
+import {
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -400,6 +407,11 @@ export {
   detectFileFormat,
   fileExtension,
   filterFileTree,
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset,
   formatBytes,
   formatDuration,
   formatUptime,

package/dist/markdown.js

@@ -1,11 +1,12 @@
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-EOAX2ENE.js";
+} from "./chunk-OL5GYLHV.js";
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   CodeBlock,

package/dist/openui.js

@@ -1,11 +1,12 @@
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3TI5DEHV.js";
-import "./chunk-GYPQXTJU.js";
-import "./chunk-MKTSMWVD.js";
-import "./chunk-EOAX2ENE.js";
-import "./chunk-WUQDUBJG.js";
+} from "./chunk-BEBXZPHW.js";
+import "./chunk-M3QZK62R.js";
+import "./chunk-42PAH5D2.js";
+import "./chunk-OL5GYLHV.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   OpenUIArtifactRenderer

package/dist/primitives.d.ts

@@ -56,6 +56,7 @@ interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>,
 }
 declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
 interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Both values render the same field. */
     variant?: "default" | "sandbox";
     label?: string;
     error?: string;
@@ -273,6 +274,7 @@ declare const TerminalLine: React$1.ForwardRefExoticComponent<TerminalLineProps
 declare const TerminalCursor: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLSpanElement> & React$1.RefAttributes<HTMLSpanElement>>;
 interface TerminalInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onSubmit"> {
     onSubmit?: (value: string) => void;
+    /** Both values render the same field. */
     variant?: "default" | "sandbox";
 }
 declare const TerminalInput: React$1.ForwardRefExoticComponent<TerminalInputProps & React$1.RefAttributes<HTMLInputElement>>;

package/dist/primitives.js

@@ -50,7 +50,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-LDLOJKPC.js";
+} from "./chunk-55WHV7SS.js";
 import {
   Avatar,
   AvatarFallback,
@@ -92,24 +92,25 @@ import {
   TableHeader,
   TableRow,
   badgeVariants
-} from "./chunk-GYPQXTJU.js";
+} from "./chunk-M3QZK62R.js";
 import {
   Button,
   buttonVariants
-} from "./chunk-MKTSMWVD.js";
+} from "./chunk-42PAH5D2.js";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger
-} from "./chunk-Q56BYXQF.js";
+} from "./chunk-R7SUY4E3.js";
 import {
   ArtifactPane
 } from "./chunk-LTEKI7YJ.js";
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-WUQDUBJG.js";
+} from "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   ArtifactPane,

package/dist/run.js

@@ -4,27 +4,28 @@ import {
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-XYAIX4SU.js";
+} from "./chunk-QGFYBNSO.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-TN4FUEWY.js";
+} from "./chunk-YU4E5J2N.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-KNYSKNZX.js";
+} from "./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 {
   ExpandedToolDetail,

package/dist/sdk-hooks.js

@@ -5,22 +5,23 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-VPWY4I5O.js";
+} from "./chunk-X7CU776B.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-565EATZZ.js";
-import "./chunk-XYAIX4SU.js";
-import "./chunk-KNYSKNZX.js";
+import "./chunk-QGFYBNSO.js";
+import "./chunk-R7B3UWPF.js";
 import "./chunk-ND3ZFXQK.js";
-import "./chunk-NWECTSOH.js";
+import "./chunk-HMAPIH7L.js";
 import "./chunk-L57WRIND.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-XU3HB5QL.js";
-import "./chunk-EOAX2ENE.js";
-import "./chunk-WUQDUBJG.js";
+import "./chunk-OL5GYLHV.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   RealtimeSessionRegistry,

package/dist/tool-previews.js

@@ -7,9 +7,10 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-NWECTSOH.js";
+} from "./chunk-HMAPIH7L.js";
 import "./chunk-XU3HB5QL.js";
-import "./chunk-WUQDUBJG.js";
+import "./chunk-3XXBZL53.js";
+import "./chunk-WKWBTL2V.js";
 import "./chunk-RQHJBTEU.js";
 export {
   CommandPreview,

package/dist/utils.d.ts

@@ -48,4 +48,57 @@ declare function getToolErrorText(part: ToolPart, fallback?: string): string | u
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+/**
+ * The focus treatment every control shares, in two shapes over one palette
+ * (`--focus-border`, `--focus-halo` and `--border-strong` from
+ * `@tangle-network/brand`'s tokens.css).
+ *
+ * A FIELD — input, textarea, select trigger, composer — shows focus on its own
+ * border: the hairline shifts to `--focus-border` and a 3px `--focus-halo` ring
+ * spreads outside it. It keys off `:focus`, because a caret in a field needs the
+ * cue whether the field was clicked or tabbed into.
+ *
+ * A CONTROL — button, tab, switch, link, card — has no border to shift, so it
+ * draws a 1px `--focus-border` outline with the same 3px halo beyond it. It keys
+ * off `:focus-visible`, so a mouse click leaves no ring.
+ *
+ * The halo is a Tailwind ring, which renders as box-shadow: it follows
+ * border-radius and never moves layout, and a consumer removes it with
+ * `focus:ring-0` / `focus-visible:ring-0`, which tailwind-merge resolves against
+ * these classes. The control's line is an outline so that forced-colors mode,
+ * which drops box-shadows, still paints it. A field has its border for that, so
+ * it hides the outline with `outline-hidden`, which stays transparent-but-present
+ * in forced-colors mode.
+ */
+/**
+ * Resting hairline, neutral hover, and `:focus` border plus halo for a text
+ * field. The hover is a plain `hover:` class so a consumer's `hover:border-*`
+ * replaces it through tailwind-merge; the focus border outranks it because
+ * Tailwind emits `focus:` after `hover:`.
+ */
+declare const 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)]";
+/**
+ * The field treatment for a container that wraps a borderless field, such as a
+ * composer around a textarea and its buttons. It lights while a FIELD inside
+ * has focus: a text input, textarea, native select or contenteditable editor. A
+ * focused button, checkbox or button-type input inside the container shows only
+ * its own ring, so a click on the send button does not read as field focus and
+ * a tab to it does not stack two indicators. `:focus-within` cannot tell the
+ * two apart, so the rule keys off `:has()`; a consumer's `focus-within:*` class
+ * therefore does not replace it. To style that container's focus differently,
+ * compose your own classes instead of this helper. The field selector is
+ * written out in full because Tailwind reads class names statically.
+ */
+declare const 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)]";
+/** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
+declare const focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
+/** Keyboard-only focus for a control: a 1px focus line with the halo beyond it. */
+declare const focusRing = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0";
+/**
+ * `focusRing` drawn inside the box, for a control flush against a scroll
+ * container or its neighbours (a tab strip, a list row), where an outer ring
+ * would be clipped or would overlap them.
+ */
+declare const focusRingInset = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:-outline-offset-1 focus-visible:ring-inset";
+
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/dist/utils.js

@@ -1,7 +1,7 @@
 import {
   copyText,
   timeAgo
-} from "./chunk-XGKULLYE.js";
+} from "./chunk-SNLR2AEA.js";
 import {
   TOOL_CATEGORY_ICONS,
   getToolCategory,
@@ -14,6 +14,13 @@ import {
   formatUptime,
   truncateText
 } from "./chunk-4CLN43XT.js";
+import {
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset
+} from "./chunk-WKWBTL2V.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -21,6 +28,11 @@ export {
   TOOL_CATEGORY_ICONS,
   cn,
   copyText,
+  focusField,
+  focusFieldInvalid,
+  focusFieldWithin,
+  focusRing,
+  focusRingInset,
   formatBytes,
   formatDuration,
   formatUptime,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.9.0",
+  "version": "11.10.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -134,7 +134,7 @@
     "turndown": "^7.2.2"
   },
   "peerDependencies": {
-    "@tangle-network/brand": "^1.5.0",
+    "@tangle-network/brand": "^1.6.0",
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",

package/src/auth/auth.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type * as React from "react";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "../primitives/avatar";
 import { Button, type ButtonProps } from "../primitives/button";
@@ -120,7 +121,10 @@ export function UserMenu({
       <DropdownMenuTrigger asChild>
         <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,
+          )}
         >
           <Avatar className="h-8 w-8">
             <AvatarImage src={undefined} alt={user.name ?? user.email} />

package/src/chat/agent-timeline.tsx

@@ -6,6 +6,7 @@ import {
   FileText,
   Info,
 } from "lucide-react";
+import { focusRing } from "../lib/focus";
 import { cn } from "../lib/utils";
 import { type MessageRole } from "./chat-message";
 import { UserMessage } from "./user-message";
@@ -235,7 +236,11 @@ function ArtifactCard({ item }: { item: AgentTimelineArtifactItem }) {
           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"
+      // Rounded like the card inside it, so the focus ring follows its corners.
+      className={cn(
+        "block w-full rounded-[var(--radius-lg)] text-left transition-transform hover:-translate-y-0.5",
+        focusRing,
+      )}
     >
       {content}
     </div>