@uisatin/ui 0.2.0 → 0.3.0

package/{chunk-NSRTTYQ4.js → chunk-LB7Z6BSK.js}

@@ -1,8 +1,9 @@
-import { Chip } from './chunk-3ERGAHKA.js';
-import { useFieldChrome, FieldChrome, SelectChevron } from './chunk-72OCFAPT.js';
-import { MenuItemContent, menuItemClass, menuSurfaceClass } from './chunk-3DINAQLL.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Chip } from './chunk-Z7S2KQZS.js';
+import { useFieldChrome, FieldChrome, SelectChevron } from './chunk-UCCNXGLG.js';
+import { MenuItemContent, menuItemClass, menuSurfaceClass } from './chunk-BR2B4OIT.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 } from 'radix-ui';
 import { Search } from 'iconoir-react';
@@ -20,12 +21,12 @@ function Combobox({
   onValueChange,
   multiple = false,
   footer = false,
-  placeholder = "Select\u2026",
-  searchPlaceholder = "Search\u2026",
-  emptyText = "No results",
-  applyLabel = "Apply",
-  cancelLabel = "Cancel",
-  clearLabel = "Clear",
+  placeholder: placeholderProp,
+  searchPlaceholder: searchPlaceholderProp,
+  emptyText: emptyTextProp,
+  applyLabel: applyLabelProp,
+  cancelLabel: cancelLabelProp,
+  clearLabel: clearLabelProp,
   label,
   hint,
   error,
@@ -41,9 +42,17 @@ function Combobox({
   onInteractOutside,
   wrapperClassName,
   className,
+  "aria-describedby": describedBy,
   ...props
 }) {
   const chrome = useFieldChrome({ id, disabled, error, hint });
+  const labels = useSatinLabels();
+  const placeholder = placeholderProp ?? labels.select;
+  const searchPlaceholder = searchPlaceholderProp ?? labels.search;
+  const emptyText = emptyTextProp ?? labels.noResults;
+  const applyLabel = applyLabelProp ?? labels.apply;
+  const cancelLabel = cancelLabelProp ?? labels.cancel;
+  const clearLabel = clearLabelProp ?? labels.clear;
   const listId = `${chrome.controlId}-list`;
   const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
   const applied = value ?? uncontrolledValue;
@@ -100,51 +109,51 @@ function Combobox({
             "data-invalid": chrome.invalid || void 0,
             "data-disabled": chrome.disabled || void 0,
             "data-state": open ? "open" : "closed",
-            className: cn("satin-field satin-select satin-combobox relative", className),
+            className: cn("satin-field satin-select satin-combobox sa:relative", className),
             children: [
               /* @__PURE__ */ jsx(
                 Popover.Trigger,
                 {
+                  ...props,
                   id: chrome.controlId,
                   "data-slot": "combobox-trigger",
                   disabled: chrome.disabled,
                   "aria-invalid": chrome.invalid || void 0,
-                  "aria-describedby": chrome.describedBy,
-                  "aria-label": props["aria-label"],
+                  "aria-describedby": [describedBy, chrome.describedBy].filter(Boolean).join(" ") || void 0,
                   "aria-haspopup": "listbox",
-                  className: "absolute inset-0 cursor-pointer rounded-[inherit] outline-none focus-visible:ring-0 disabled:cursor-not-allowed",
-                  children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: chosen.length ? chosen.map((o) => o.label).join(", ") : placeholder })
+                  className: "sa:absolute sa:inset-0 sa:cursor-pointer sa:rounded-[inherit] sa:outline-none sa:focus-visible:ring-0 sa:disabled:cursor-not-allowed",
+                  children: /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: chosen.length ? chosen.map((o) => o.label).join(", ") : placeholder })
                 }
               ),
-              lead && /* @__PURE__ */ jsx("span", { className: "satin-field-icon satin-combobox-icon pointer-events-none", "aria-hidden": true, children: lead }),
-              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none flex min-w-0 flex-1 flex-wrap items-center gap-1 *:pointer-events-auto", children: [
+              lead && /* @__PURE__ */ jsx("span", { className: "satin-field-icon satin-combobox-icon sa:pointer-events-none", "aria-hidden": true, children: lead }),
+              /* @__PURE__ */ jsxs("div", { className: "sa:pointer-events-none sa:flex sa:min-w-0 sa:flex-1 sa:flex-wrap sa:items-center sa:gap-1 sa:*:pointer-events-auto", children: [
                 chips && chosen.map((o) => /* @__PURE__ */ jsx(
                   Chip,
                   {
                     size: "sm",
                     variant: "outline",
                     disabled: chrome.disabled,
-                    removeLabel: `Remove ${o.label}`,
+                    removeLabel: `${labels.remove} ${o.label}`,
                     onRemove: () => commit(applied.filter((v) => v !== o.value)),
-                    className: "relative",
+                    className: "sa:relative",
                     children: o.label
                   },
                   o.value
                 )),
-                triggerText && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("pointer-events-none! min-w-0 flex-1 truncate", chosen.length ? "text-text-default" : "text-text-muted"), children: triggerText }),
+                triggerText && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("sa:pointer-events-none! sa:min-w-0 sa:flex-1 sa:truncate", chosen.length ? "sa:text-text-default" : "sa:text-text-muted"), children: triggerText }),
                 !label && chips && chosen.length > 1 && /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "tertiary",
                     size: "xs",
                     disabled: chrome.disabled,
-                    className: "relative ml-auto",
+                    className: "sa:relative sa:ml-auto",
                     onClick: () => commit([]),
                     children: clearLabel
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx(SelectChevron, { className: "satin-combobox-icon pointer-events-none" })
+              /* @__PURE__ */ jsx(SelectChevron, { className: "satin-combobox-icon sa:pointer-events-none" })
             ]
           }
         ) }),
@@ -159,14 +168,14 @@ function Combobox({
             onOpenAutoFocus,
             onInteractOutside,
             className: cn(
-              "pointer-events-auto z-50 flex w-(--radix-popover-trigger-width) min-w-60 max-w-[520px] flex-col overflow-hidden",
+              "sa:pointer-events-auto sa:z-50 sa:flex sa:w-(--radix-popover-trigger-width) sa:min-w-60 sa:max-w-[520px] sa:flex-col sa:overflow-hidden",
               menuSurfaceClass,
-              "origin-(--radix-popover-content-transform-origin) outline-none",
-              "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+              "sa:origin-(--radix-popover-content-transform-origin) sa:outline-none",
+              "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]"
             ),
             children: [
-              /* @__PURE__ */ jsxs("label", { className: "flex h-9 shrink-0 items-center gap-2 border-b border-border-subtle px-3 text-text-muted", children: [
-                /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-4 shrink-0 [stroke-width:1.875]" }),
+              /* @__PURE__ */ jsxs("label", { className: "sa:flex sa:h-9 sa:shrink-0 sa:items-center sa:gap-2 sa:border-b sa:border-border-subtle sa:px-3 sa:text-text-muted", children: [
+                /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:[stroke-width:1.875]" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -192,7 +201,7 @@ function Combobox({
                         if (!shown[active].disabled) pick(shown[active].value);
                       }
                     },
-                    className: "min-w-0 flex-1 bg-transparent text-base leading-[21px] 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-base sa:leading-[21px] sa:text-text-default sa:outline-none sa:placeholder:text-text-muted sa:focus-visible:ring-0"
                   }
                 )
               ] }),
@@ -202,8 +211,8 @@ function Combobox({
                   id: listId,
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
-                  className: "flex max-h-60 flex-col gap-0.5 overflow-y-auto p-1",
-                  children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-3 py-6 text-center text-sm text-text-muted", children: emptyText }) : shown.map((o, i) => {
+                  className: "sa:flex sa:max-h-60 sa:flex-col sa:gap-0.5 sa:overflow-y-auto sa:p-1",
+                  children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "sa:px-3 sa:py-6 sa:text-center sa:text-sm sa:text-text-muted", children: emptyText }) : shown.map((o, i) => {
                     const picked = picks.includes(o.value);
                     return /* @__PURE__ */ jsx(
                       "div",
@@ -217,7 +226,7 @@ function Combobox({
                         onPointerMove: () => setActive(i),
                         onMouseDown: (e) => e.preventDefault(),
                         onClick: () => !o.disabled && pick(o.value),
-                        className: cn(menuItemClass, picked && "bg-bg-selected"),
+                        className: cn(menuItemClass, picked && "sa:bg-bg-selected"),
                         children: /* @__PURE__ */ jsx(
                           MenuItemContent,
                           {
@@ -235,7 +244,7 @@ function Combobox({
                   })
                 }
               ),
-              footer && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-end gap-2 border-t border-border-subtle p-2", children: [
+              footer && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:justify-end sa:gap-2 sa:border-t sa:border-border-subtle sa:p-2", children: [
                 /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setOpen(false), children: cancelLabel }),
                 /* @__PURE__ */ jsx(Button, { disabled: pending.length === 0, onClick: apply, children: applyLabel })
               ] })
@@ -248,5 +257,3 @@ function Combobox({
 }
 
 export { Combobox };
-//# sourceMappingURL=chunk-NSRTTYQ4.js.map
-//# sourceMappingURL=chunk-NSRTTYQ4.js.map

package/{chunk-BNZVTLHV.js → chunk-LFGUJHFF.js}

@@ -1,17 +1,18 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Popover as Popover$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var panelClass = cn(
-  "relative flex w-[320px] max-w-[calc(100vw-16px)] flex-col overflow-clip pb-2.5",
-  "rounded-xl border border-border-default bg-bg-popover",
-  "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]"
+  "sa:relative sa:flex sa:w-[320px] sa:max-w-[calc(100vw-16px)] sa:flex-col sa:overflow-clip sa:pb-2.5",
+  "sa:rounded-xl sa:border sa:border-border-default sa:bg-bg-popover",
+  "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]"
 );
 var closeClass = cn(
-  "absolute top-2.5 right-2.5 grid size-4 place-items-center rounded-sm text-text-subtle",
-  "transition-colors duration-(--duration-fast) ease-(--ease-out)",
-  "satin-hover:text-text-default focus-visible:outline-none satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+  "sa:absolute sa:top-2.5 sa:right-2.5 sa:grid sa:size-4 sa:place-items-center sa:rounded-sm sa:text-text-subtle",
+  "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+  "sa:satin-hover:text-text-default sa:focus-visible:outline-none sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
 );
 var closeIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
   "path",
@@ -25,11 +26,11 @@ var closeIcon = /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox:
 ) });
 function PanelBody({ titleId, title, description, body, closeButton }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 px-2.5 pt-2.5 text-sm", children: [
-      /* @__PURE__ */ jsx("p", { id: titleId, className: cn("leading-[18px] font-medium text-text-default", closeButton && "pr-6"), children: title }),
-      description ? /* @__PURE__ */ jsx("p", { className: "text-text-muted", children: description }) : null
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-col sa:gap-0.5 sa:px-2.5 sa:pt-2.5 sa:text-sm", children: [
+      /* @__PURE__ */ jsx("p", { id: titleId, className: cn("sa:leading-[18px] sa:font-medium sa:text-text-default", closeButton && "sa:pr-6"), children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "sa:text-text-muted", children: description }) : null
     ] }),
-    body ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2.5 pt-4", children: body }) : null
+    body ? /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-col sa:gap-4 sa:px-2.5 sa:pt-4", children: body }) : null
   ] });
 }
 function Popover({
@@ -47,31 +48,34 @@ function Popover({
   container,
   onOpenAutoFocus,
   onInteractOutside,
-  className
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const titleId = React.useId();
   return /* @__PURE__ */ jsxs(Popover$1.Root, { open, defaultOpen, onOpenChange, children: [
     children && /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children }),
     /* @__PURE__ */ jsx(Popover$1.Portal, { container, children: /* @__PURE__ */ jsxs(
       Popover$1.Content,
       {
+        collisionPadding: 8,
+        ...props,
         "data-slot": "popover",
         "aria-labelledby": titleId,
         side,
         align,
         sideOffset,
-        collisionPadding: 8,
         onOpenAutoFocus,
         onInteractOutside,
         className: cn(
           panelClass,
-          "pointer-events-auto z-50 origin-(--radix-popover-content-transform-origin) focus-visible:outline-none",
-          "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          "sa:pointer-events-auto sa:z-50 sa:origin-(--radix-popover-content-transform-origin) sa:focus-visible:outline-none",
+          "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
           className
         ),
         children: [
           /* @__PURE__ */ jsx(PanelBody, { titleId, title, description, body, closeButton }),
-          closeButton && /* @__PURE__ */ jsx(Popover$1.Close, { "aria-label": "Close", className: closeClass, children: closeIcon })
+          closeButton && /* @__PURE__ */ jsx(Popover$1.Close, { "aria-label": labels.close, className: closeClass, children: closeIcon })
         ]
       }
     ) })
@@ -83,16 +87,16 @@ function PopoverPanel({
   body,
   closeButton = true,
   onClose,
-  className
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const titleId = React.useId();
-  return /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-labelledby": titleId, "data-slot": "popover", className: cn(panelClass, className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...props, role: "dialog", "aria-labelledby": titleId, "data-slot": "popover", className: cn(panelClass, className), children: [
     /* @__PURE__ */ jsx(PanelBody, { titleId, title, description, body, closeButton }),
-    closeButton && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", onClick: onClose, className: closeClass, children: closeIcon })
+    closeButton && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.close, onClick: onClose, className: closeClass, children: closeIcon })
   ] });
 }
 var PopoverClose = Popover$1.Close;
 
 export { Popover, PopoverClose, PopoverPanel };
-//# sourceMappingURL=chunk-BNZVTLHV.js.map
-//# sourceMappingURL=chunk-BNZVTLHV.js.map

package/{chunk-7TXHCRAG.js → chunk-M2HEVFQ3.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -18,10 +18,10 @@ function Progress({
   const known = value != null;
   const v = known ? Math.min(max, Math.max(0, value)) : 0;
   const text = known ? formatValue(v, max) : void 0;
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "progress", "data-size": size, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
-    (label || showValue && known) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm leading-5", children: [
-      label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 truncate font-medium text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
-      showValue && known && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-text-muted tabular-nums", children: text })
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "progress", "data-size": size, className: cn("sa:flex sa:w-full sa:flex-col sa:gap-2", className), ...props, children: [
+    (label || showValue && known) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:justify-between sa:gap-3 sa:text-sm sa:leading-5", children: [
+      label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:min-w-0 sa:truncate sa:font-medium sa:text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
+      showValue && known && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:shrink-0 sa:text-text-muted sa:tabular-nums", children: text })
     ] }),
     /* @__PURE__ */ jsx(
       "div",
@@ -33,19 +33,17 @@ function Progress({
         "aria-valuemax": max,
         "aria-valuenow": known ? v : void 0,
         "aria-valuetext": text,
-        className: cn("relative w-full overflow-hidden rounded-full bg-bg-muted", size === "md" ? "h-2" : "h-1"),
+        className: cn("sa:relative sa:w-full sa:overflow-hidden sa:rounded-full sa:bg-bg-muted", size === "md" ? "sa:h-2" : "sa:h-1"),
         children: known ? /* @__PURE__ */ jsx(
           "div",
           {
-            className: "h-full rounded-full bg-action-primary-bg transition-[width] duration-300 ease-(--ease-out)",
+            className: "sa:h-full sa:rounded-full sa:bg-action-primary-bg sa:transition-[width] sa:duration-300 sa:ease-(--sa-ease-out)",
             style: { width: `${v / max * 100}%` }
           }
-        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 w-1/3 rounded-full bg-action-primary-bg animate-[satin-progress-indeterminate_1.4s_var(--ease-in-out)_infinite]" })
+        ) : /* @__PURE__ */ jsx("div", { className: "sa:absolute sa:inset-y-0 sa:left-0 sa:w-1/3 sa:rounded-full sa:bg-action-primary-bg sa:animate-[satin-progress-indeterminate_1.4s_var(--sa-ease-in-out)_infinite]" })
       }
     )
   ] });
 }
 
 export { Progress };
-//# sourceMappingURL=chunk-7TXHCRAG.js.map
-//# sourceMappingURL=chunk-7TXHCRAG.js.map

package/{chunk-SH6NG6VN.js → chunk-NH3EHMIL.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-H63FYCMY.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Switch as Switch$1 } from 'radix-ui';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -13,7 +13,7 @@ function Switch({ className, label, description, placement = "left", id, ...prop
       id: switchId,
       "data-slot": "switch",
       "aria-describedby": descriptionId,
-      className: cn("peer satin-switch", className),
+      className: cn("sa:peer satin-switch", className),
       ...props,
       children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "satin-switch-thumb" })
     }
@@ -23,12 +23,12 @@ function Switch({ className, label, description, placement = "left", id, ...prop
     "div",
     {
       "data-slot": "switch-field",
-      className: cn("flex items-start gap-2.5", placement === "right" && "flex-row-reverse justify-between"),
+      className: cn("sa:flex sa:items-start sa:gap-2.5", placement === "right" && "sa:flex-row-reverse sa:justify-between"),
       children: [
         control,
-        /* @__PURE__ */ jsxs("div", { className: "grid gap-0.5 text-sm leading-[19.5px] peer-disabled:opacity-50", children: [
-          label && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: "font-medium text-text-default", children: label }),
-          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-text-muted", children: description })
+        /* @__PURE__ */ jsxs("div", { className: "sa:grid sa:gap-0.5 sa:text-sm sa:leading-[19.5px] sa:peer-disabled:opacity-50", children: [
+          label && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: "sa:font-medium sa:text-text-default", children: label }),
+          description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "sa:text-text-muted", children: description })
         ] })
       ]
     }
@@ -36,5 +36,3 @@ function Switch({ className, label, description, placement = "left", id, ...prop
 }
 
 export { Switch };
-//# sourceMappingURL=chunk-SH6NG6VN.js.map
-//# sourceMappingURL=chunk-SH6NG6VN.js.map

package/chunk-NL574STL.js

@@ -0,0 +1,88 @@
+import { FlappySprite, TetrisStill } from './chunk-UGIVCXGN.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import * as React from 'react';
+import { NavArrowDown, Check, EditPencil } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Thinking({
+  state = "collapsed",
+  label = "Thought",
+  steps = [],
+  indicator = "tetris",
+  onToggle,
+  className,
+  ...props
+}) {
+  const [open, setOpen] = React.useState(state === "expanded");
+  React.useEffect(() => setOpen(state === "expanded"), [state]);
+  const bodyId = `${React.useId()}-steps`;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "thinking", "data-state": open ? "expanded" : "collapsed", className: cn("sa:w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": bodyId,
+        onClick: () => {
+          setOpen(!open);
+          onToggle?.(!open);
+        },
+        className: "sa:group sa:flex sa:w-fit sa:cursor-pointer sa:items-center sa:gap-3 sa:rounded-md sa:p-1 sa:outline-none sa:select-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        children: [
+          /* @__PURE__ */ jsx(ThinkingMark, { indicator }),
+          /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:whitespace-nowrap sa:text-text-muted", children: label }),
+          /* @__PURE__ */ jsx(
+            NavArrowDown,
+            {
+              "aria-hidden": true,
+              className: cn(
+                "sa:size-icon-size-sm sa:shrink-0 sa:text-text-muted sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:[stroke-width:1.875]",
+                open && "sa:rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: bodyId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:gap-3 sa:pt-2 sa:pl-1", children: [
+      /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:relative sa:w-4 sa:shrink-0 sa:self-stretch", children: /* @__PURE__ */ jsx("div", { className: "sa:absolute sa:inset-y-0 sa:left-1/2 sa:w-px sa:-translate-x-1/2 sa:bg-linear-to-b sa:from-component-rail-edge sa:via-component-rail-center sa:to-component-rail-edge" }) }),
+      /* @__PURE__ */ jsx("ol", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:gap-2", children: steps.map((step, i) => /* @__PURE__ */ jsx("li", { className: "sa:min-w-0", children: /* @__PURE__ */ jsx(Step, { step }) }, i)) })
+    ] }) }) })
+  ] });
+}
+function Step({ step }) {
+  switch (step.type) {
+    case "text":
+      return /* @__PURE__ */ jsx("p", { className: "sa:text-body sa:text-text-muted", children: step.text });
+    case "more":
+      return /* @__PURE__ */ jsx("p", { className: "sa:text-sm sa:whitespace-nowrap sa:text-text-muted", children: step.label });
+    case "source":
+      return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:items-center sa:gap-3 sa:p-1 sa:text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "sa:flex sa:size-4 sa:shrink-0 sa:items-center sa:justify-center sa:overflow-clip sa:rounded-xs sa:[&>*]:size-4", children: step.icon }),
+        /* @__PURE__ */ jsx("span", { className: "sa:max-w-full sa:shrink-0 sa:truncate sa:text-text-default", children: step.label }),
+        step.meta != null && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-muted", children: step.meta })
+      ] });
+    case "tool":
+      return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:items-center sa:gap-2 sa:p-1 sa:text-sm sa:[&>svg]:size-icon-size sa:[&>svg]:shrink-0 sa:[&>svg]:text-text-muted sa:[&>svg]:[stroke-width:1.875]", children: [
+        step.icon ?? /* @__PURE__ */ jsx(EditPencil, {}),
+        /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:whitespace-nowrap sa:text-text-default", children: step.label }),
+        /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:font-mono sa:tracking-normal sa:text-text-muted", children: step.target }),
+        (step.added != null || step.removed != null) && /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:shrink-0 sa:gap-1.5 sa:font-mono sa:tracking-normal sa:whitespace-nowrap", children: [
+          step.added != null && /* @__PURE__ */ jsx("span", { className: "sa:text-status-green-fg", children: step.added }),
+          step.removed != null && /* @__PURE__ */ jsx("span", { className: "sa:text-status-red-fg", children: step.removed })
+        ] }),
+        step.meta != null && /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:whitespace-nowrap sa:text-text-muted", children: step.meta })
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:items-center sa:gap-3 sa:p-1 sa:text-sm", children: [
+        /* @__PURE__ */ jsx(Check, { "aria-hidden": true, className: "sa:size-icon-size-sm sa:shrink-0 sa:text-status-green-fg sa:[stroke-width:1.875]" }),
+        /* @__PURE__ */ jsx("span", { className: "sa:max-w-full sa:shrink-0 sa:truncate sa:text-text-default", children: step.label }),
+        step.meta != null && /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-muted", children: step.meta })
+      ] });
+  }
+}
+function ThinkingMark({ indicator }) {
+  return indicator === "flappy" ? /* @__PURE__ */ jsx(FlappySprite, { size: 16, run: false }) : /* @__PURE__ */ jsx(TetrisStill, {});
+}
+
+export { Thinking };

package/chunk-NQL6SIIB.js

@@ -0,0 +1,168 @@
+// src/theme/create-theme.ts
+var defaultTheme = { brand: "#4633D7", radius: 1 };
+var toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+var toGamma = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? [...h].map((c) => c + c).join("") : h.slice(0, 6);
+  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16) / 255);
+}
+function rgbToOklch([r, g, b]) {
+  const [lr, lg, lb] = [r, g, b].map(toLinear);
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return [L, Math.hypot(A, B), (Math.atan2(B, A) * 180 / Math.PI + 360) % 360];
+}
+function oklchToRgb([L, C, H]) {
+  const a = C * Math.cos(H * Math.PI / 180);
+  const b = C * Math.sin(H * Math.PI / 180);
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+}
+var inGamut = (rgb) => rgb.every((c) => c >= -5e-4 && c <= 1.0005);
+function oklchToHex([L, C, H]) {
+  let c = C;
+  let rgb = oklchToRgb([L, c, H]);
+  while (!inGamut(rgb) && c > 0) {
+    c = Math.max(0, c - 5e-3);
+    rgb = oklchToRgb([L, c, H]);
+  }
+  return "#" + rgb.map((v) => Math.round(Math.min(1, Math.max(0, toGamma(v))) * 255).toString(16).padStart(2, "0")).join("").toUpperCase();
+}
+var luminance = (hex) => {
+  const [r, g, b] = hexToRgb(hex).map(toLinear);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var contrast = (a, b) => {
+  const [x, y] = [luminance(a), luminance(b)].sort((p, q) => q - p);
+  return (x + 0.05) / (y + 0.05);
+};
+var RAMP = {
+  "blue-50": "#F2F4FF",
+  "blue-200": "#CFD6FF",
+  "blue-300": "#B1BBFE",
+  "blue-500": "#5146E9",
+  "blue-600": "#4633D7",
+  "blue-700": "#3923B9",
+  "blue-900": "#1D1168",
+  "blue-950": "#110A47",
+  "blue-soft-50": "#F3F5FF",
+  "blue-soft-200": "#D9DEFB",
+  "blue-soft-300": "#BEC7FC",
+  "blue-soft-700": "#5158A0",
+  "blue-soft-900": "#30344F",
+  "blue-soft-950": "#1F2132",
+  "primary-dark": "#493DD6",
+  "primary-hover-dark": "#554FE7",
+  "primary-pressed-dark": "#3E2AC5",
+  "primary-border-light": "#9085E7",
+  "primary-border-dark": "#928BE6"
+};
+var SOLID = /* @__PURE__ */ new Set(["blue-500", "blue-600", "blue-700", "primary-dark", "primary-hover-dark", "primary-pressed-dark"]);
+function solidLightness(c, h, base, hoverStep) {
+  const passes = (L) => contrast(oklchToHex([L, c, h]), "#FFFFFF") >= 4.7 && contrast(oklchToHex([L + hoverStep, c, h]), "#FFFFFF") >= 4.7;
+  if (passes(base)) return base;
+  let lo = 0.2;
+  let hi = base;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (passes(mid)) lo = mid;
+    else hi = mid;
+  }
+  return lo;
+}
+function brandVars(brand) {
+  const [bl, bc, bh] = rgbToOklch(hexToRgb(brand));
+  const lch = (step) => rgbToOklch(hexToRgb(RAMP[step]));
+  const [rl, rc, rh] = lch("blue-600");
+  const chroma = bc / rc;
+  const light = solidLightness(bc, bh, bl, lch("blue-500")[0] - rl);
+  const darkRest = lch("primary-dark")[0];
+  const dark = solidLightness(bc, bh, light + (darkRest - rl), lch("primary-hover-dark")[0] - darkRest);
+  const root = {};
+  for (const [step, hex] of Object.entries(RAMP)) {
+    const [l, c, h] = rgbToOklch(hexToRgb(hex));
+    const isDark = step.endsWith("-dark") && step !== "primary-border-dark";
+    const L = SOLID.has(step) ? isDark ? dark + (l - darkRest) : light + (l - rl) : l;
+    root[`--color-${step}`] = step === "blue-600" && light === bl ? brand.toUpperCase() : oklchToHex([Math.min(0.97, Math.max(0.15, L)), c * chroma, bh + (h - rh)]);
+  }
+  root["--sa-color-blue-600-a20"] = `${root["--sa-color-blue-600"]}33`;
+  root["--sa-color-blue-500-a20"] = `${root["--sa-color-blue-500"]}33`;
+  root["--sa-color-primary-focus-dark"] = `${root["--sa-color-primary-dark"]}33`;
+  return root;
+}
+var RADII = { xs: 4, sm: 6, md: 8, xl: 12, "2xl": 16, "3xl": 20 };
+function radiusVars(scale) {
+  const v = {};
+  for (const [k, px] of Object.entries(RADII)) v[`--radius-${k}`] = `${Math.round(px * scale * 2) / 2}px`;
+  v["--sa-radius"] = `${Math.round(10 * scale * 2) / 2}px`;
+  v["--sa-radius-pill"] = scale >= 1 ? "9999px" : `${Math.round(16 * scale)}px`;
+  return v;
+}
+var VAR_PREFIX = "sa-";
+var prefixed = (text, prefix) => prefix ? text.replace(/--(?=color-|radius)/g, `--${prefix}`) : text;
+var prefixVars = (vars, prefix) => Object.fromEntries(Object.entries(vars).map(([k, v]) => [prefixed(k, prefix), prefixed(v, prefix)]));
+function themeVars(theme, options = {}) {
+  const prefix = options.prefix ?? VAR_PREFIX;
+  return { root: prefixVars({ ...brandVars(theme.brand), ...radiusVars(theme.radius) }, prefix), dark: {} };
+}
+var SCOPED_LIGHT = {
+  "--border-focus": "var(--sa-color-blue-600)",
+  "--action-primary-bg": "var(--sa-color-blue-600)",
+  "--action-primary-bg-hover": "var(--sa-color-blue-500)",
+  "--action-primary-bg-pressed": "var(--sa-color-blue-700)",
+  "--action-primary-border": "var(--sa-color-primary-border-light)",
+  "--action-focus-ring": "var(--sa-color-blue-600-a20)",
+  "--status-brand-bg": "var(--sa-color-blue-soft-50)",
+  "--status-brand-border": "var(--sa-color-blue-soft-200)",
+  "--status-brand-fg": "var(--sa-color-blue-soft-700)",
+  "--sa-radius-lg": "var(--sa-radius)"
+};
+var SCOPED_DARK = {
+  "--border-focus": "var(--sa-color-primary-hover-dark)",
+  "--action-primary-bg": "var(--sa-color-primary-dark)",
+  "--action-primary-bg-hover": "var(--sa-color-primary-hover-dark)",
+  "--action-primary-bg-pressed": "var(--sa-color-primary-pressed-dark)",
+  "--action-primary-border": "var(--sa-color-primary-border-dark)",
+  "--action-focus-ring": "var(--sa-color-primary-focus-dark)",
+  "--status-brand-bg": "var(--sa-color-blue-soft-950)",
+  "--status-brand-border": "var(--sa-color-blue-soft-900)",
+  "--status-brand-fg": "var(--sa-color-blue-soft-300)"
+};
+function themeCss(theme, scope, options = {}) {
+  const prefix = options.prefix ?? VAR_PREFIX;
+  const vars = themeVars(theme, { prefix });
+  const root = scope ? { ...vars.root, ...prefixVars(SCOPED_LIGHT, prefix) } : vars.root;
+  const dark = scope ? { ...vars.dark, ...prefixVars(SCOPED_DARK, prefix) } : vars.dark;
+  const block = (sel, vars2) => `${sel} {
+${Object.entries(vars2).map(([k, v]) => `  ${k}: ${v};`).join("\n")}
+}`;
+  return [
+    `/* Satin theme: brand ${theme.brand.toUpperCase()}, radius ${theme.radius}. */`,
+    // :root:root outranks Satin's own :root, so the theme wins wherever the file is loaded.
+    block(scope ?? ":root:root", root),
+    ...Object.keys(dark).length ? [block(scope ? `.dark ${scope}` : ":root.dark", dark)] : [],
+    ""
+  ].join("\n\n");
+}
+function randomTheme(current) {
+  const [, , currentHue] = current ? rgbToOklch(hexToRgb(current.brand)) : [0, 0, -360];
+  const hue = (currentHue + 60 + Math.random() * 240) % 360;
+  const l = 0.5 + Math.random() * 0.25;
+  const brand = oklchToHex([l, 0.12 + Math.random() * 0.08, hue]);
+  const radii = [0, 0.5, 1, 1.5].filter((r) => r !== current?.radius);
+  const radius = radii[Math.floor(Math.random() * radii.length)];
+  return { brand, radius };
+}
+
+export { contrast, defaultTheme, randomTheme, themeCss, themeVars };