@uisatin/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @uisatin/ui
 
+## 0.3.0
+
+### Minor Changes
+
+- 0d40736: Satin now sits next to an app's own Tailwind or shadcn/ui theme without touching it. The stylesheet's classes carry Satin's prefix (`sa:flex`), its theme variables are `--sa-*` (`--sa-text-sm`, `--sa-color-blue-600`, `--sa-radius`, `--sa-chart-1`…), and Tailwind's reset and Satin's base rules apply only to Satin's elements, so the app's `text-sm`, `--spacing`, `--radius`, list styles and headings stay the app's in either import order. Tailwind classes passed in `className` still replace the Satin classes they conflict with.
+
+  Breaking for custom CSS that read Satin's primitive variables: use `--sa-color-*` and `--sa-radius-*` instead of `--color-*` and `--radius-*` (semantic tokens like `--bg-card` and `--action-primary-bg` are unchanged). `themeCss()` writes the new names. The shadcn registry ships the same prefixed source. The empty source maps are gone from the package.
+
+- 9a4b332: Every component now takes ordinary HTML attributes and a `ref` (`id`, `data-*`, `aria-*`, `style`, handlers): fields pass them to the control a label points at (Select's trigger, NumberInput's input), overlays to their panel (Dialog, Sheet, Popover, menus, Tooltip's bubble). Each component's docs comment says where they go. Tabs' extra props are now typed.
+
+  New `SatinLabels` (`@uisatin/ui/labels`): the words components say on their own (Close, Increase, Select all rows, Pick a date…) are English by default and can be translated or reworded for an app or part of it. A component's own prop still wins.
+
+  Table: a column's `key` must be a field of the row unless the column renders its own `cell`, so a typo is a type error; rows no longer need an index signature. Internal helpers still exported from the root (`CloseIcon`, `menuItemClass`, `FieldChrome`…) are marked `@internal`.
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -10,7 +10,7 @@ Satin's React components: shadcn-based, built on Radix, themed with Satin tokens
 
 **Satin Free.** This package is the free, open-source edition of Satin, under the MIT license. Satin Pro, with more components, patterns and templates, will ship separately as its own licensed package; nothing here changes when it does.
 
-You don't need Tailwind. Satin ships one precompiled stylesheet with the tokens and every class the components use.
+You don't need Tailwind. Satin ships one precompiled stylesheet with the tokens and every class the components use. If your app has its own Tailwind (v3 or v4) or a shadcn/ui theme, the two don't touch: Satin's classes are prefixed (`sa:flex`), its variables are `--sa-*`, and its reset only applies to Satin's elements, so your `text-sm`, `--spacing` or `--radius` stay yours in either import order.
 
 ## Install
 
@@ -43,6 +43,15 @@ export function Save() {
 
 **Dark mode:** add the `dark` class to `<html>` or any parent element.
 
+**Customizing:**
+
+- Props first: `variant`, `size`, `tone`, `shape` cover what the design system allows.
+- `className` takes your own classes and lands on the component's root. With Tailwind in your app, a utility there replaces the Satin class it conflicts with (`<Button className="px-6">` drops Satin's padding for yours). Without Tailwind, use your own CSS classes; a Tailwind class name alone does nothing, because Satin's stylesheet only contains its own prefixed classes.
+- Theme: brand colour and corners with `themeCss({ brand, radius })` or the customizer at https://uisatin.dev/theming. Semantic tokens (`--bg-card`, `--text-muted`, `--action-primary-bg`…) can be set in your CSS too.
+- Words: the labels components say on their own (Close, Increase, Select all rows…) are English by default. Wrap the app in `<SatinLabels labels={{ close: 'Zamknij' }}>` (from `@uisatin/ui/labels`) to translate or reword any of them.
+- HTML attributes and `ref`: every component passes `id`, `data-*`, `aria-*`, handlers and `ref` to its main element (the control for fields, the panel for overlays); each component's docs comment says which.
+- Satin's CSS sits in cascade layers (`theme`, `base`, `components`, `utilities`). Your unlayered rules win over it, so a global `p { margin: … }` also reaches a paragraph inside a Satin Card; scope those rules or put them in `@layer base`.
+
 **Font:** the tokens ask for Geist and Geist Mono; load them (for example with `@fontsource-variable/geist`) or the system font is used.
 
 ## Copy the source instead (shadcn registry)

package/chunk-3DHJXU45.js

@@ -0,0 +1,147 @@
+import { useSlidingIndicator } from './chunk-XETMIETJ.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import * as React from 'react';
+import { Tabs as Tabs$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var list = cva("sa:relative sa:flex", {
+  variants: {
+    variant: {
+      // The rule is an inset shadow, so the 2px indicator can sit on top of it (as in Figma).
+      underline: "sa:items-end sa:gap-8 sa:[box-shadow:inset_0_-1px_0_var(--border-default)]",
+      pill: "sa:items-center sa:gap-1"
+    }
+  }
+});
+var trigger = cva(
+  [
+    "sa:group/tab sa:relative sa:flex sa:shrink-0 sa:items-center sa:font-medium sa:whitespace-nowrap sa:text-text-muted sa:select-none",
+    "sa:transition-[color,background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+    "sa:focus-visible:outline-none sa:disabled:pointer-events-none sa:disabled:opacity-50",
+    "sa:satin-hover:text-text-default sa:satin-focus:text-text-default sa:data-[state=active]:text-text-default",
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:size-4 sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      variant: {
+        underline: "",
+        pill: [
+          "sa:rounded-pill",
+          "sa:data-[state=inactive]:satin-hover:bg-bg-muted",
+          "sa:satin-focus:[box-shadow:0_0_0_1px_var(--border-focus)]"
+        ]
+      },
+      size: {
+        md: "sa:text-base",
+        sm: "sa:text-sm"
+      }
+    },
+    compoundVariants: [
+      { variant: "sa:underline", size: "md", className: "sa:h-control-height-xl" },
+      { variant: "sa:underline", size: "sm", className: "sa:h-control-height-lg" },
+      { variant: "pill", size: "md", className: "sa:h-control-height-lg sa:px-3" },
+      { variant: "pill", size: "sm", className: "sa:h-control-height sa:px-2.5" }
+    ]
+  }
+);
+function normalize(item) {
+  return typeof item === "string" ? { value: item, label: item } : item;
+}
+function Tabs({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  variant = "underline",
+  size = "md",
+  disabled = false,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const tabs = items.map(normalize);
+  const listRef = React.useRef(null);
+  const [current, setCurrent] = React.useState(value ?? defaultValue ?? tabs[0]?.value);
+  const selected = value ?? current;
+  const indicator = useSlidingIndicator(listRef, '[role="tab"][data-state="active"]', `${selected}|${variant}|${size}|${tabs.length}`);
+  return /* @__PURE__ */ jsxs(
+    Tabs$1.Root,
+    {
+      ...props,
+      "data-slot": "tabs",
+      value,
+      defaultValue: defaultValue ?? (value === void 0 ? tabs[0]?.value : void 0),
+      onValueChange: (v) => {
+        setCurrent(v);
+        onValueChange?.(v);
+      },
+      className: cn("sa:flex sa:flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs(Tabs$1.List, { ref: listRef, "aria-label": ariaLabel, className: list({ variant }), children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: indicator.ref,
+              "aria-hidden": true,
+              className: cn(
+                "sa:pointer-events-none sa:absolute sa:left-0 sa:opacity-0",
+                variant === "sa:underline" ? "sa:bottom-0 sa:z-10 sa:h-0.5 sa:rounded-full sa:bg-action-primary-bg" : "sa:top-1/2 sa:z-0 sa:-translate-y-1/2 sa:rounded-pill sa:bg-bg-selected",
+                variant === "pill" && (size === "md" ? "sa:h-control-height-lg" : "sa:h-control-height")
+              )
+            }
+          ),
+          tabs.map((tab) => /* @__PURE__ */ jsxs(
+            Tabs$1.Trigger,
+            {
+              value: tab.value,
+              disabled: disabled || tab.disabled,
+              ...children == null && { "aria-controls": void 0 },
+              className: cn(
+                trigger({ variant, size }),
+                variant === "pill" && "sa:z-10",
+                // Before the indicator is placed (server render), the selected tab paints its own.
+                !indicator.ready && variant === "pill" && "sa:data-[state=active]:bg-bg-selected"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: cn(
+                      "sa:flex sa:items-center sa:gap-1.5 sa:rounded-sm",
+                      variant === "sa:underline" && "sa:group-focus-visible/tab:[box-shadow:inset_0_0_0_1.5px_var(--border-focus)] sa:group-data-[force=focus]/tab:[box-shadow:inset_0_0_0_1.5px_var(--border-focus)]"
+                    ),
+                    children: [
+                      tab.icon,
+                      tab.label
+                    ]
+                  }
+                ),
+                variant === "underline" && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: cn(
+                      "sa:absolute sa:inset-x-0 sa:bottom-0 sa:h-0.5 sa:rounded-full sa:bg-transparent",
+                      "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+                      "sa:group-data-[state=inactive]/tab:group-hover/tab:bg-border-strong sa:group-data-[state=inactive]/tab:group-data-[force=hover]/tab:bg-border-strong",
+                      !indicator.ready && "sa:group-data-[state=active]/tab:bg-action-primary-bg"
+                    )
+                  }
+                )
+              ]
+            },
+            tab.value
+          ))
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Tabs$1.Content, { "data-slot": "tabs-content", className: cn("sa:rounded-md sa:focus-visible:shadow-border-focus sa:focus-visible:outline-none", className), ...props });
+}
+
+export { Tabs, TabsContent };

package/{chunk-6YXUBP27.js → chunk-5725MFGQ.js}

@@ -1,9 +1,10 @@
-import { KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-BKZBWPUH.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { KbdHint, KbdArrowUp, KbdArrowDown, KbdReturn } from './chunk-57QEOCDZ.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Popover, DropdownMenu } from 'radix-ui';
-import { Attachment, Globe, Plus, ArrowUp, Search, Check, Microphone, Xmark, Page, NavArrowDown } from 'iconoir-react';
+import { Attachment, Globe, Plus, ArrowUp, Search, NavArrowDown, Check, Microphone, Xmark, Page } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var defaultActions = [
@@ -11,10 +12,10 @@ var defaultActions = [
   { id: "web", label: "Web search", description: "Research and find on the internet", icon: /* @__PURE__ */ jsx(Globe, {}) }
 ];
 var menuCard = [
-  "overflow-clip rounded-xl border border-border-subtle bg-bg-popover",
-  "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
-  "origin-(--radix-popper-transform-origin) data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
-  "focus-visible:outline-none"
+  "sa:overflow-clip sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-popover",
+  "sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+  "sa:origin-(--radix-popper-transform-origin) sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
+  "sa:focus-visible:outline-none"
 ];
 function PromptBar({
   shape = "pill",
@@ -36,6 +37,7 @@ function PromptBar({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const [innerValue, setInnerValue] = React.useState(defaultValue);
   const value = valueProp ?? innerValue;
   const [files, setFiles] = React.useState(attachmentsProp ?? []);
@@ -94,11 +96,11 @@ function PromptBar({
           submit();
         },
         className: cn(
-          "flex w-full flex-col gap-2 border border-border-default bg-bg-field p-2 [box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
-          "transition-[border-color,border-radius] duration-(--duration-fast) ease-(--ease-out)",
-          "has-[textarea:focus]:border-border-strong data-filled:border-border-strong",
-          pill ? files.length > 0 || expanded ? "rounded-3xl" : "rounded-pill" : "rounded-xl",
-          disabled && "opacity-50",
+          "sa:flex sa:w-full sa:flex-col sa:gap-2 sa:border sa:border-border-default sa:bg-bg-field sa:p-2 sa:[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+          "sa:transition-[border-color,border-radius] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:has-[textarea:focus]:border-border-strong sa:data-filled:border-border-strong",
+          pill ? files.length > 0 || expanded ? "sa:rounded-3xl" : "sa:rounded-pill" : "sa:rounded-xl",
+          disabled && "sa:opacity-50",
           className
         ),
         ...props,
@@ -117,7 +119,7 @@ function PromptBar({
               }
             }
           ),
-          files.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": "Attachments", className: "flex flex-wrap gap-1 pb-1", children: files.map((file, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          files.length > 0 && /* @__PURE__ */ jsx("ul", { "aria-label": labels.attachments, className: "sa:flex sa:flex-wrap sa:gap-1 sa:pb-1", children: files.map((file, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             AttachmentChip,
             {
               file,
@@ -126,7 +128,7 @@ function PromptBar({
               onRemove: () => setAttachments(files.filter((_, j) => j !== i))
             }
           ) }, `${file.name}-${i}`)) }),
-          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-end gap-x-2 gap-y-2", expanded && "items-center"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:flex-wrap sa:items-end sa:gap-x-2 sa:gap-y-2", expanded && "sa:items-center"), children: [
             /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
               {
@@ -135,8 +137,8 @@ function PromptBar({
                 shape: btnShape,
                 iconOnly: true,
                 disabled,
-                "aria-label": "Add to conversation",
-                className: "data-[state=open]:bg-border-input",
+                "aria-label": labels.addToConversation,
+                className: "sa:data-[state=open]:bg-border-input",
                 children: /* @__PURE__ */ jsx(Plus, {})
               }
             ) }),
@@ -148,7 +150,7 @@ function PromptBar({
                 value,
                 disabled,
                 placeholder,
-                "aria-label": "Message",
+                "aria-label": labels.message,
                 onChange: (e) => setValue(e.target.value),
                 onKeyDown: (e) => {
                   if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
@@ -157,13 +159,13 @@ function PromptBar({
                   }
                 },
                 className: cn(
-                  "block h-7 min-w-0 flex-1 resize-none bg-transparent py-[3.5px] text-base leading-[21px] text-text-default",
-                  expanded && "order-first basis-full px-1",
-                  "outline-none placeholder:text-text-muted focus-visible:ring-0 disabled:cursor-not-allowed"
+                  "sa:block sa:h-7 sa:min-w-0 sa:flex-1 sa:resize-none sa:bg-transparent sa:py-[3.5px] sa:text-base sa:leading-[21px] sa:text-text-default",
+                  expanded && "sa:order-first sa:basis-full sa:px-1",
+                  "sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0 sa:disabled:cursor-not-allowed"
                 )
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-1", expanded && "contents"), children: [
+            /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:shrink-0 sa:items-center sa:gap-1", expanded && "sa:contents"), children: [
               /* @__PURE__ */ jsx(
                 ModelSelect,
                 {
@@ -179,7 +181,7 @@ function PromptBar({
                   }
                 }
               ),
-              expanded && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex-1" }),
+              expanded && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:flex-1" }),
               /* @__PURE__ */ jsx(
                 DictationButton,
                 {
@@ -192,7 +194,7 @@ function PromptBar({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "md", shape: btnShape, iconOnly: true, "aria-label": "Send", disabled: !canSend, children: /* @__PURE__ */ jsx(ArrowUp, {}) })
+              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "md", shape: btnShape, iconOnly: true, "aria-label": labels.send, disabled: !canSend, children: /* @__PURE__ */ jsx(ArrowUp, {}) })
             ] })
           ] })
         ]
@@ -205,8 +207,8 @@ function PromptBar({
         align: "start",
         sideOffset: 8,
         avoidCollisions: false,
-        "aria-label": "Add to conversation",
-        className: cn(menuCard, "z-50 flex w-(--radix-popper-anchor-width) flex-col"),
+        "aria-label": labels.addToConversation,
+        className: cn(menuCard, "sa:z-50 sa:flex sa:w-(--radix-popper-anchor-width) sa:flex-col"),
         children: /* @__PURE__ */ jsx(AddMenu, { actions, onAction: runAction, onAddAgent })
       }
     ) })
@@ -217,6 +219,7 @@ function AddMenu({
   onAction,
   onAddAgent
 }) {
+  const labels = useSatinLabels();
   const [query, setQuery] = React.useState("");
   const [active, setActive] = React.useState(0);
   const id = React.useId();
@@ -224,9 +227,9 @@ function AddMenu({
   const shown = q ? actions.filter((a) => `${a.label} ${a.description ?? ""}`.toLowerCase().includes(q)) : actions;
   const index = Math.min(active, Math.max(shown.length - 1, 0));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pr-1.5", children: [
-      /* @__PURE__ */ jsxs("label", { className: "flex flex-1 items-center gap-2 px-3 py-1.5", children: [
-        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-icon-size shrink-0 text-text-muted [stroke-width:1.875]" }),
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1 sa:pr-1.5", children: [
+      /* @__PURE__ */ jsxs("label", { className: "sa:flex sa:flex-1 sa:items-center sa:gap-2 sa:px-3 sa:py-1.5", children: [
+        /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "sa:size-icon-size sa:shrink-0 sa:text-text-muted sa:[stroke-width:1.875]" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -234,7 +237,7 @@ function AddMenu({
             "aria-expanded": true,
             "aria-controls": `${id}-list`,
             "aria-activedescendant": shown.length ? `${id}-${index}` : void 0,
-            "aria-label": "Search agents and tools",
+            "aria-label": labels.searchAgentsAndTools,
             placeholder: "Search agents and tools",
             value: query,
             onChange: (e) => {
@@ -253,14 +256,14 @@ function AddMenu({
                 onAction(shown[index]);
               }
             },
-            className: "min-w-0 flex-1 bg-transparent text-sm text-text-default outline-none placeholder:text-text-muted focus-visible:ring-0"
+            className: "sa:min-w-0 sa:flex-1 sa:bg-transparent sa:text-sm sa:text-text-default sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0"
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": "Add an agent", onClick: onAddAgent, children: /* @__PURE__ */ jsx(Plus, {}) })
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.addAgent, onClick: onAddAgent, children: /* @__PURE__ */ jsx(Plus, {}) })
     ] }),
-    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-px bg-border-subtle" }),
-    /* @__PURE__ */ jsxs("div", { id: `${id}-list`, role: "listbox", "aria-label": "Agents and tools", className: "flex flex-col p-1", children: [
+    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:h-px sa:bg-border-subtle" }),
+    /* @__PURE__ */ jsxs("div", { id: `${id}-list`, role: "listbox", "aria-label": labels.agentsAndTools, className: "sa:flex sa:flex-col sa:p-1", children: [
       shown.map((a, i) => /* @__PURE__ */ jsxs(
         "div",
         {
@@ -271,21 +274,21 @@ function AddMenu({
           onMouseDown: (e) => e.preventDefault(),
           onClick: () => onAction(a),
           className: cn(
-            "flex min-h-8 items-center gap-2 rounded-lg px-2 py-1.5",
-            "[&>svg]:size-icon-size [&>svg]:shrink-0 [&>svg]:text-text-muted [&>svg]:[stroke-width:1.875]",
-            i === index && "bg-bg-hover"
+            "sa:flex sa:min-h-8 sa:items-center sa:gap-2 sa:rounded-lg sa:px-2 sa:py-1.5",
+            "sa:[&>svg]:size-icon-size sa:[&>svg]:shrink-0 sa:[&>svg]:text-text-muted sa:[&>svg]:[stroke-width:1.875]",
+            i === index && "sa:bg-bg-hover"
           ),
           children: [
             a.icon,
-            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-3", children: [
-              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm leading-[13px] font-medium whitespace-nowrap text-text-default", children: a.label }),
-              a.description && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-text-muted", children: a.description })
+            /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-baseline sa:gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-sm sa:leading-[13px] sa:font-medium sa:whitespace-nowrap sa:text-text-default", children: a.label }),
+              a.description && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:text-text-muted", children: a.description })
             ] })
           ]
         },
         a.id
       )),
-      shown.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-2 py-1.5 text-sm text-text-muted", children: "No matches" })
+      shown.length === 0 && /* @__PURE__ */ jsx("p", { className: "sa:px-2 sa:py-1.5 sa:text-sm sa:text-text-muted", children: "No matches" })
     ] }),
     /* @__PURE__ */ jsx(ShortcutHints, {})
   ] });
@@ -299,6 +302,7 @@ function ModelSelect({
   disabled,
   onChange
 }) {
+  const labels = useSatinLabels();
   if (!label) return null;
   const trigger = /* @__PURE__ */ jsxs(
     Button,
@@ -307,10 +311,13 @@ function ModelSelect({
       size: "md",
       shape,
       disabled,
-      className: "data-[state=open]:bg-border-input",
+      className: "sa:data-[state=open]:bg-border-input",
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center [&>*]:size-4", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Model: " }),
+        icon && /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center sa:[&>*]:size-4", children: icon }),
+        /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+          labels.model,
+          ": "
+        ] }),
         label,
         /* @__PURE__ */ jsx(NavArrowDown, { "aria-hidden": true, "data-chevron": true })
       ]
@@ -326,20 +333,20 @@ function ModelSelect({
         align: "end",
         sideOffset: 8,
         avoidCollisions: false,
-        className: cn(menuCard, "z-50 w-[241px]"),
+        className: cn(menuCard, "sa:z-50 sa:w-[241px]"),
         children: [
-          /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: model, onValueChange: onChange, className: "flex flex-col p-1", children: models.map((m) => /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(DropdownMenu.RadioGroup, { value: model, onValueChange: onChange, className: "sa:flex sa:flex-col sa:p-1", children: models.map((m) => /* @__PURE__ */ jsxs(
             DropdownMenu.RadioItem,
             {
               value: m.value,
               className: cn(
-                "flex min-h-8 cursor-pointer items-center gap-2 rounded-lg px-2 py-1.5 outline-none select-none",
-                "data-highlighted:bg-bg-hover data-[state=checked]:bg-bg-selected"
+                "sa:flex sa:min-h-8 sa:cursor-pointer sa:items-center sa:gap-2 sa:rounded-lg sa:px-2 sa:py-1.5 sa:outline-none sa:select-none",
+                "sa:data-highlighted:bg-bg-hover sa:data-[state=checked]:bg-bg-selected"
               ),
               children: [
-                /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center [&>*]:size-5", children: m.icon }),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-[13px] font-medium text-text-default", children: m.label }),
-                /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "size-icon-size text-status-green-fg [stroke-width:1.875]" }) })
+                /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-5 sa:shrink-0 sa:items-center sa:justify-center sa:[&>*]:size-5", children: m.icon }),
+                /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:leading-[13px] sa:font-medium sa:text-text-default", children: m.label }),
+                /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "sa:size-icon-size sa:text-status-green-fg sa:[stroke-width:1.875]" }) })
               ]
             },
             m.value
@@ -351,7 +358,7 @@ function ModelSelect({
   ] });
 }
 function ShortcutHints() {
-  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 border-t border-border-default bg-bg-popover px-3 py-1.5", children: [
+  return /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "sa:flex sa:items-center sa:gap-3 sa:border-t sa:border-border-default sa:bg-bg-popover sa:px-3 sa:py-1.5", children: [
     /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdArrowUp, {}, "up"), /* @__PURE__ */ jsx(KbdArrowDown, {}, "down")], label: "Navigate" }),
     /* @__PURE__ */ jsx(KbdHint, { keys: [/* @__PURE__ */ jsx(KbdReturn, {}, "return")], label: "Select" })
   ] });
@@ -406,15 +413,15 @@ function AttachmentChip({
     {
       "data-slot": "attachment",
       className: cn(
-        "flex h-control-height items-center gap-1.5 border border-border-default bg-bg-popover pr-0.5 pl-2",
-        "[filter:drop-shadow(0_1px_1px_var(--effect-shadow-xs))]",
-        "transition-[background-color,border-color] duration-(--duration-fast) ease-(--ease-out)",
-        "hover:border-border-strong hover:bg-bg-canvas active:border-border-strong active:bg-bg-muted",
-        rounded ? "rounded-pill" : "rounded-md"
+        "sa:flex sa:h-control-height sa:items-center sa:gap-1.5 sa:border sa:border-border-default sa:bg-bg-popover sa:pr-0.5 sa:pl-2",
+        "sa:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-xs))]",
+        "sa:transition-[background-color,border-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:hover:border-border-strong sa:hover:bg-bg-canvas sa:active:border-border-strong sa:active:bg-bg-muted",
+        rounded ? "sa:rounded-pill" : "sa:rounded-md"
       ),
       children: [
         /* @__PURE__ */ jsx(FileIcon, { name: file.name }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-[200px] truncate text-sm font-medium text-text-default", children: file.name }),
+        /* @__PURE__ */ jsx("span", { className: "sa:max-w-[200px] sa:truncate sa:text-sm sa:font-medium sa:text-text-default", children: file.name }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -425,7 +432,7 @@ function AttachmentChip({
             disabled,
             "aria-label": `Remove ${file.name}`,
             onClick: onRemove,
-            children: /* @__PURE__ */ jsx(Xmark, { className: "![stroke-width:1.64]" })
+            children: /* @__PURE__ */ jsx(Xmark, { className: "sa:![stroke-width:1.64]" })
           }
         )
       ]
@@ -453,22 +460,20 @@ var LABELS = {
   ]
 };
 var FILE_COLORS = {
-  pdf: ["var(--color-red-500)", "var(--color-red-300)"],
-  doc: ["var(--color-sky-600)", "var(--color-sky-300)"],
-  xls: ["var(--color-green-700)", "var(--color-green-300)"]
+  pdf: ["var(--sa-color-red-500)", "var(--sa-color-red-300)"],
+  doc: ["var(--sa-color-sky-600)", "var(--sa-color-sky-300)"],
+  xls: ["var(--sa-color-green-700)", "var(--sa-color-green-300)"]
 };
 function FileIcon({ name }) {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   const kind = ext === "pdf" ? "pdf" : ext === "doc" || ext === "docx" ? "doc" : ext === "xls" || ext === "xlsx" || ext === "csv" ? "xls" : null;
-  if (!kind) return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "size-4 shrink-0 text-text-muted [stroke-width:1.875]" });
+  if (!kind) return /* @__PURE__ */ jsx(Page, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:text-text-muted sa:[stroke-width:1.875]" });
   const [page, fold] = FILE_COLORS[kind];
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", className: "size-4 shrink-0", children: [
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, viewBox: "0 0 16 16", fill: "none", className: "sa:size-4 sa:shrink-0", children: [
     /* @__PURE__ */ jsx("path", { d: PAGE, fill: page }),
     /* @__PURE__ */ jsx("path", { d: FOLD, fill: fold }),
-    LABELS[kind].map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: "var(--color-white)" }, i))
+    LABELS[kind].map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: "var(--sa-color-white)" }, i))
   ] });
 }
 
 export { PromptBar, defaultActions };
-//# sourceMappingURL=chunk-6YXUBP27.js.map
-//# sourceMappingURL=chunk-6YXUBP27.js.map

package/{chunk-BKZBWPUH.js → chunk-57QEOCDZ.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -11,13 +11,13 @@ function Kbd({ size = "sm", tone = "default", className, children, ...props }) {
       "data-slot": "kbd",
       "data-square": square || void 0,
       className: cn(
-        "inline-flex shrink-0 items-center justify-center rounded-sm border-[0.75px] font-sans text-2xs leading-none font-medium tracking-normal whitespace-nowrap",
-        size === "sm" ? "h-[18px] min-w-[18px]" : "h-5 min-w-5",
+        "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:rounded-sm sa:border-[0.75px] sa:font-sans sa:text-2xs sa:leading-none sa:font-medium sa:tracking-normal sa:whitespace-nowrap",
+        size === "sm" ? "sa:h-[18px] sa:min-w-[18px]" : "sa:h-5 sa:min-w-5",
         // A single key is exactly square with nothing on the sides, so the glyph sits in the middle.
-        square ? size === "sm" ? "w-[18px] px-0" : "w-5 px-0" : size === "sm" ? "px-1" : "px-1.5",
-        tone === "default" ? "border-border-default bg-component-kbd-bg text-text-muted" : "border-action-inverse-border bg-action-inverse-bg-hover text-bg-canvas/72 dark:border-action-inverse-bg-pressed dark:bg-text-default",
+        square ? size === "sm" ? "sa:w-[18px] sa:px-0" : "sa:w-5 sa:px-0" : size === "sm" ? "sa:px-1" : "sa:px-1.5",
+        tone === "default" ? "sa:border-border-default sa:bg-component-kbd-bg sa:text-text-muted" : "sa:border-action-inverse-border sa:bg-action-inverse-bg-hover sa:text-bg-canvas/72 sa:dark:border-action-inverse-bg-pressed sa:dark:bg-text-default",
         // Glyph icons (arrows, return) take the key's colour at 10px.
-        "[&>svg]:size-2.5 [&>svg]:shrink-0",
+        "sa:[&>svg]:size-2.5 sa:[&>svg]:shrink-0",
         className
       ),
       ...props,
@@ -38,7 +38,7 @@ function keysOf(shortcut) {
 }
 function KbdGroup({ keys, size, tone, className, ...props }) {
   const list = typeof keys === "string" ? keysOf(keys) : keys;
-  return /* @__PURE__ */ jsx("span", { "data-slot": "kbd-group", className: cn("inline-flex shrink-0 items-center gap-0.5", className), ...props, children: list.map((k, i) => /* @__PURE__ */ jsx(Kbd, { size, tone, children: k }, i)) });
+  return /* @__PURE__ */ jsx("span", { "data-slot": "kbd-group", className: cn("sa:inline-flex sa:shrink-0 sa:items-center sa:gap-0.5", className), ...props, children: list.map((k, i) => /* @__PURE__ */ jsx(Kbd, { size, tone, children: k }, i)) });
 }
 var glyph = { viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 0.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
 var KbdArrowUp = () => /* @__PURE__ */ jsx("svg", { ...glyph, children: /* @__PURE__ */ jsx("path", { d: "M5.00018 8.17963L5.00018 1.82037M8.00316 4.82335L5.00018 1.82037L1.9972 4.82335" }) });
@@ -48,12 +48,10 @@ var KbdReturn = () => /* @__PURE__ */ jsxs("svg", { ...glyph, children: [
   /* @__PURE__ */ jsx("path", { d: "M2.8125 6.5625H5.3125C6.23296 6.5625 6.97917 5.81629 6.97917 4.89583V1.97917" })
 ] });
 function KbdHint({ keys, label, className, ...props }) {
-  return /* @__PURE__ */ jsxs("span", { "data-slot": "kbd-hint", className: cn("flex items-center gap-1.5", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "kbd-hint", className: cn("sa:flex sa:items-center sa:gap-1.5", className), ...props, children: [
     /* @__PURE__ */ jsx(KbdGroup, { keys }),
-    /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 tracking-normal whitespace-nowrap text-text-muted", children: label })
+    /* @__PURE__ */ jsx("span", { className: "sa:text-xs sa:leading-4 sa:tracking-normal sa:whitespace-nowrap sa:text-text-muted", children: label })
   ] });
 }
 
 export { Kbd, KbdArrowDown, KbdArrowUp, KbdGroup, KbdHint, KbdReturn, keysOf };
-//# sourceMappingURL=chunk-BKZBWPUH.js.map
-//# sourceMappingURL=chunk-BKZBWPUH.js.map

package/{chunk-RTJ76X5U.js → chunk-5KTBSMQU.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -114,7 +114,7 @@ function StreamingText({
       "data-slot": "streaming-text",
       "data-reveal": reveal,
       "aria-busy": streaming || void 0,
-      className: cn("satin-stream text-body whitespace-pre-wrap text-text-default", className),
+      className: cn("satin-stream sa:text-body sa:whitespace-pre-wrap sa:text-text-default", className),
       ...props,
       children: units.map((u, i) => /* @__PURE__ */ jsx("span", { className: "satin-stream-unit", children: u }, i))
     }
@@ -122,5 +122,3 @@ function StreamingText({
 }
 
 export { StreamingText };
-//# sourceMappingURL=chunk-RTJ76X5U.js.map
-//# sourceMappingURL=chunk-RTJ76X5U.js.map

package/{chunk-B2K45IUR.js → chunk-5XTUFBZI.js}

@@ -1,15 +1,15 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import 'react';
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
 var dotVariants = cva(
-  "block size-2 rounded-full",
+  "sa:block sa:size-2 sa:rounded-full",
   {
     variants: {
       variant: {
-        solid: "bg-tone-fg",
-        outline: "border border-tone-fg"
+        solid: "sa:bg-tone-fg",
+        outline: "sa:border sa:border-tone-fg"
       }
     },
     defaultVariants: { variant: "solid" }
@@ -24,7 +24,7 @@ function Dot({ className, tone = "fuchsia", variant, label, ...props }) {
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
-      className: cn("inline-flex size-4 shrink-0 items-center justify-center", className),
+      className: cn("sa:inline-flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center", className),
       ...props,
       children: /* @__PURE__ */ jsx("span", { className: dotVariants({ variant }) })
     }
@@ -32,5 +32,3 @@ function Dot({ className, tone = "fuchsia", variant, label, ...props }) {
 }
 
 export { Dot, dotVariants };
-//# sourceMappingURL=chunk-B2K45IUR.js.map
-//# sourceMappingURL=chunk-B2K45IUR.js.map