@uisatin/ui 0.2.0 → 0.3.0

package/{chunk-2HKBZFIK.js → chunk-CGOH5IYX.js}

@@ -1,5 +1,6 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.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 { Toast as Toast$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -47,12 +48,12 @@ var toast = Object.assign((title, options) => show(title, options), {
   }
 });
 var tile = {
-  neutral: "bg-status-neutral-bg text-text-default",
-  info: "bg-status-sky-bg text-status-sky-fg",
-  success: "bg-status-green-bg text-status-green-fg",
-  warning: "bg-status-amber-bg text-status-amber-fg",
+  neutral: "sa:bg-status-neutral-bg sa:text-text-default",
+  info: "sa:bg-status-sky-bg sa:text-status-sky-fg",
+  success: "sa:bg-status-green-bg sa:text-status-green-fg",
+  warning: "sa:bg-status-amber-bg sa:text-status-amber-fg",
   // Figma draws the error glyph in action/destructive (#DC2626), not status-red-fg.
-  error: "bg-status-red-bg text-action-destructive-bg"
+  error: "sa:bg-status-red-bg sa:text-action-destructive-bg"
 };
 function IntentIcon({ intent }) {
   if (intent === "neutral") {
@@ -73,10 +74,10 @@ function IntentIcon({ intent }) {
   ] }) }) });
 }
 var card = (intent) => cn(
-  "relative flex w-full items-center gap-2.5 overflow-clip pr-2 pl-2.5",
-  intent === "neutral" ? "py-2.5" : "pt-2.5 pb-3",
-  "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-full sa:items-center sa:gap-2.5 sa:overflow-clip sa:pr-2 sa:pl-2.5",
+  intent === "neutral" ? "sa:py-2.5" : "sa:pt-2.5 sa:pb-3",
+  "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)]"
 );
 function ToastContent({
   title,
@@ -87,13 +88,14 @@ function ToastContent({
   icon,
   onAction
 }) {
+  const labels = useSatinLabels();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("div", { className: cn("grid size-9 shrink-0 place-items-center rounded-md", tile[intent]), children: /* @__PURE__ */ jsx(IntentIcon, { intent }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col text-sm", children: [
-      /* @__PURE__ */ jsx(Toast$1.Title, { className: "leading-5 font-medium text-text-default", children: title }),
-      description ? /* @__PURE__ */ jsx(Toast$1.Description, { className: "leading-4 text-text-muted", children: description }) : null
+    icon && /* @__PURE__ */ jsx("div", { className: cn("sa:grid sa:size-9 sa:shrink-0 sa:place-items-center sa:rounded-md", tile[intent]), children: /* @__PURE__ */ jsx(IntentIcon, { intent }) }),
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:text-sm", children: [
+      /* @__PURE__ */ jsx(Toast$1.Title, { className: "sa:leading-5 sa:font-medium sa:text-text-default", children: title }),
+      description ? /* @__PURE__ */ jsx(Toast$1.Description, { className: "sa:leading-4 sa:text-text-muted", children: description }) : null
     ] }),
-    (action || closeButton) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+    (action || closeButton) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-1", children: [
       action && /* @__PURE__ */ jsx(Toast$1.Action, { asChild: true, altText: action.label, children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -105,7 +107,7 @@ function ToastContent({
           children: action.label
         }
       ) }),
-      closeButton && /* @__PURE__ */ jsx(Toast$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": "Close", className: "rounded-md text-text-muted", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+      closeButton && /* @__PURE__ */ jsx(Toast$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.close, className: "sa:rounded-md sa:text-text-muted", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx(
         "path",
         {
           d: "M3.94232 10.0582L7.00053 7M7.00053 7L10.0587 3.94179M7.00053 7L3.94232 3.94179M7.00053 7L10.0587 10.0582",
@@ -138,10 +140,10 @@ function Toast({
       duration,
       type: radixType(intent),
       className: cn(
-        "pointer-events-auto",
+        "sa:pointer-events-auto",
         card(intent),
-        "focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] focus-visible:outline-none",
-        "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+        "sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)] sa:focus-visible:outline-none",
+        "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
         className
       ),
       ...props,
@@ -154,7 +156,7 @@ var SCALE_STEP = 0.05;
 var GAP = 8;
 var FALLBACK_HEIGHT = 58;
 var OFFSCREEN = "150%";
-var ease = "var(--ease-out)";
+var ease = "var(--sa-ease-out)";
 var cardMotion = `transform ${MOTION_MS}ms ${ease}, height 150ms ${ease}`;
 var contentMotion = `opacity 250ms ${ease}`;
 function StackedToast({ record, index, y, scale, height, beyond, contentVisible, onMeasure, onForget }) {
@@ -196,10 +198,10 @@ function StackedToast({ record, index, y, scale, height, beyond, contentVisible,
       duration: duration ?? 5e3,
       type: radixType(intent),
       className: cn(
-        "absolute inset-x-0 bottom-0 origin-bottom outline-none",
-        "focus-visible:[&>div]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-        "data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
-        "data-[swipe=cancel]:transition-[translate] data-[swipe=cancel]:duration-(--duration-base) data-[swipe=cancel]:ease-(--ease-out)"
+        "sa:absolute sa:inset-x-0 sa:bottom-0 sa:origin-bottom sa:outline-none",
+        "sa:focus-visible:[&>div]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        "sa:data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) sa:data-[swipe=cancel]:translate-x-0 sa:data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x)",
+        "sa:data-[swipe=cancel]:transition-[translate] sa:data-[swipe=cancel]:duration-(--sa-duration-base) sa:data-[swipe=cancel]:ease-(--sa-ease-out)"
       ),
       style: {
         transform: `translate3d(0, ${y}px, 0) scale(${scale})`,
@@ -212,7 +214,7 @@ function StackedToast({ record, index, y, scale, height, beyond, contentVisible,
         "div",
         {
           ref: cardRef,
-          className: cn("pointer-events-auto", card(intent), "items-start"),
+          className: cn("sa:pointer-events-auto", card(intent), "sa:items-start"),
           style: {
             transform: inPlace ? "translate3d(0, 0, 0)" : `translate3d(0, ${OFFSCREEN}, 0)`,
             height,
@@ -223,7 +225,7 @@ function StackedToast({ record, index, y, scale, height, beyond, contentVisible,
             "div",
             {
               ref: measured,
-              className: "flex w-full min-w-0 items-center gap-2.5",
+              className: "sa:flex sa:w-full sa:min-w-0 sa:items-center sa:gap-2.5",
               style: { opacity: contentVisible ? 1 : 0, transition: contentMotion },
               "aria-hidden": !contentVisible || void 0,
               inert: !contentVisible || void 0,
@@ -324,9 +326,9 @@ function Toaster({ className, limit = 3, children }) {
       Toast$1.Viewport,
       {
         ref: viewportRef,
-        style: { height, transition: `height ${MOTION_MS}ms var(--ease-out)` },
+        style: { height, transition: `height ${MOTION_MS}ms var(--sa-ease-out)` },
         className: cn(
-          "fixed right-4 bottom-4 z-[100] m-0 w-[397px] max-w-[calc(100%-32px)] list-none p-0 outline-none",
+          "sa:fixed sa:right-4 sa:bottom-4 sa:z-[100] sa:m-0 sa:w-[397px] sa:max-w-[calc(100%-32px)] sa:list-none sa:p-0 sa:outline-none",
           className
         )
       }
@@ -335,5 +337,3 @@ function Toaster({ className, limit = 3, children }) {
 }
 
 export { Toast, Toaster, toast };
-//# sourceMappingURL=chunk-2HKBZFIK.js.map
-//# sourceMappingURL=chunk-2HKBZFIK.js.map

package/chunk-CVNRZ2YV.js

@@ -0,0 +1,112 @@
+import { useSlidingIndicator } from './chunk-XETMIETJ.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import * as React from 'react';
+import { ToggleGroup } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var track = cva("sa:relative sa:isolate sa:inline-flex sa:items-center sa:gap-0.5 sa:bg-bg-muted sa:p-1", {
+  variants: {
+    shape: { default: "sa:rounded-lg", rounded: "sa:rounded-pill" },
+    border: { true: "sa:border sa:border-border-subtle", false: "" },
+    fullWidth: { true: "sa:flex sa:w-full", false: "" }
+  }
+});
+var segment = cva(
+  [
+    "sa:relative sa:z-10 sa:inline-flex sa:items-center sa:justify-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:satin-hover:text-text-default sa:data-[state=on]:text-text-default",
+    "sa:satin-pressed:bg-component-segmented-pressed sa:satin-pressed:text-text-default",
+    "sa:focus-visible:outline-none sa:satin-focus:text-text-default sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+    "sa:disabled:pointer-events-none sa:disabled:text-text-subtle",
+    "sa:[&_svg]:pointer-events-none sa:[&_svg]:shrink-0 sa:[&_svg]:[stroke-width:1.875]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "sa:h-control-height-xs sa:gap-1 sa:px-2.5 sa:text-sm sa:[&_svg]:size-icon-size-sm",
+        md: "sa:h-control-height sa:gap-1.5 sa:px-3 sa:text-sm sa:[&_svg]:size-icon-size",
+        lg: "sa:h-control-height-lg sa:gap-1.5 sa:px-4 sa:text-base sa:[&_svg]:size-icon-size"
+      },
+      shape: { default: "sa:rounded-sm", rounded: "sa:rounded-pill" },
+      fullWidth: { true: "sa:flex-1", false: "" }
+    }
+  }
+);
+function SegmentedControl({
+  items,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  shape = "default",
+  border = false,
+  fullWidth = false,
+  className,
+  ref,
+  ...props
+}) {
+  const [inner, setInner] = React.useState(defaultValue ?? items[0]?.value ?? "");
+  const value = valueProp ?? inner;
+  const trackRef = React.useRef(null);
+  const setTrack = React.useCallback(
+    (node) => {
+      trackRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const pill = useSlidingIndicator(trackRef, '[data-state="on"]', `${value}|${size}|${fullWidth}|${items.length}`);
+  return /* @__PURE__ */ jsxs(
+    ToggleGroup.Root,
+    {
+      ...props,
+      ref: setTrack,
+      type: "single",
+      value,
+      onValueChange: (next) => {
+        if (!next) return;
+        setInner(next);
+        onValueChange?.(next);
+      },
+      "data-slot": "segmented-control",
+      className: cn(track({ shape, border, fullWidth }), className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: pill.ref,
+            "aria-hidden": true,
+            className: cn(
+              "sa:pointer-events-none sa:absolute sa:top-1 sa:bottom-1 sa:left-0 sa:z-0 sa:bg-component-segmented-selected sa:opacity-0 sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+              shape === "sa:rounded" ? "sa:rounded-pill" : "sa:rounded-sm"
+            )
+          }
+        ),
+        items.map((item) => /* @__PURE__ */ jsxs(
+          ToggleGroup.Item,
+          {
+            value: item.value,
+            disabled: item.disabled,
+            className: cn(
+              segment({ size, shape, fullWidth }),
+              // Unselected focus: bg/muted under the ring. Selected focus keeps the pill's fill.
+              "sa:data-[state=off]:satin-focus:bg-bg-muted",
+              // Before the pill is measured (server render), the selected segment paints its own fill.
+              !pill.ready && "sa:data-[state=on]:bg-component-segmented-selected sa:data-[state=on]:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]"
+            ),
+            children: [
+              item.icon,
+              item.label
+            ]
+          },
+          item.value
+        ))
+      ]
+    }
+  );
+}
+
+export { SegmentedControl };

package/{chunk-QUF2IPOZ.js → chunk-DPYIBFQD.js}

@@ -1,5 +1,5 @@
-import { useFormField } from './chunk-UBNHSZSE.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useFormField } from './chunk-VUOAPWTF.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -38,13 +38,13 @@ function Textarea({
     {
       "data-slot": "textarea-wrapper",
       "data-disabled": isDisabled || void 0,
-      className: cn("satin-textarea-root grid w-full gap-2", wrapperClassName),
+      className: cn("satin-textarea-root sa:grid sa:w-full sa:gap-2", wrapperClassName),
       children: [
-        label && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }),
-          optional && /* @__PURE__ */ jsx("span", { className: "text-sm text-text-muted", children: "(Optional)" })
+        label && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: label }),
+          optional && /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:text-text-muted", children: "(Optional)" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:relative sa:flex", children: [
           /* @__PURE__ */ jsx(
             "textarea",
             {
@@ -74,13 +74,13 @@ function Textarea({
           "div",
           {
             className: cn(
-              "flex items-start gap-2 text-sm",
-              hasMessage ? "text-action-destructive-bg" : "text-text-muted"
+              "sa:flex sa:items-start sa:gap-2 sa:text-sm",
+              hasMessage ? "sa:text-action-destructive-bg" : "sa:text-text-muted"
             ),
             children: [
-              /* @__PURE__ */ jsx("p", { id: messageId, className: "min-w-0 flex-1", children: message }),
-              maxLength != null && /* @__PURE__ */ jsxs("p", { id: counterId, className: cn("shrink-0 whitespace-nowrap", !hasMessage && "text-text-muted"), children: [
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Characters used: " }),
+              /* @__PURE__ */ jsx("p", { id: messageId, className: "sa:min-w-0 sa:flex-1", children: message }),
+              maxLength != null && /* @__PURE__ */ jsxs("p", { id: counterId, className: cn("sa:shrink-0 sa:whitespace-nowrap", !hasMessage && "sa:text-text-muted"), children: [
+                /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: "Characters used: " }),
                 text.length,
                 "/",
                 maxLength
@@ -94,5 +94,3 @@ function Textarea({
 }
 
 export { Textarea };
-//# sourceMappingURL=chunk-QUF2IPOZ.js.map
-//# sourceMappingURL=chunk-QUF2IPOZ.js.map

package/chunk-EF5GT4OG.js

@@ -0,0 +1,87 @@
+import { HoverCard } from './chunk-PD6YPFYN.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SourceIcon({ source }) {
+  if (source.icon) return /* @__PURE__ */ jsx("span", { className: "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:overflow-clip sa:rounded-xs sa:[&>*]:size-4", children: source.icon });
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:rounded-xs sa:bg-bg-muted sa:text-[10px] sa:leading-none sa:font-semibold sa:text-text-muted", children: source.title.charAt(0).toUpperCase() });
+}
+function Citation({ index, source, className, "aria-label": ariaLabel, ...props }) {
+  const labels = useSatinLabels();
+  const chip = /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      "data-slot": "citation",
+      href: source.href,
+      target: source.href ? "_blank" : void 0,
+      rel: source.href ? "noreferrer" : void 0,
+      "aria-label": ariaLabel ?? `${labels.source} ${index}: ${source.title}`,
+      className: cn(
+        "sa:mx-0.5 sa:inline-grid sa:h-4 sa:min-w-4 sa:translate-y-[-1px] sa:place-items-center sa:rounded-sm sa:bg-bg-muted sa:px-1 sa:align-middle sa:text-xs sa:leading-none sa:font-medium sa:text-text-default sa:no-underline sa:tabular-nums sa:outline-none",
+        "sa:transition-[background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+        "sa:hover:bg-bg-hover sa:hover:[box-shadow:inset_0_0_0_1px_var(--border-strong)] sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        className
+      ),
+      children: index
+    }
+  );
+  return /* @__PURE__ */ jsxs(HoverCard, { trigger: chip, side: "top", align: "center", className: "sa:w-[300px] sa:gap-2 sa:p-3", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-center sa:gap-2 sa:text-xs sa:text-text-muted", children: [
+      /* @__PURE__ */ jsx(SourceIcon, { source }),
+      /* @__PURE__ */ jsx("span", { className: "sa:truncate", children: source.origin })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:font-medium sa:text-text-default", children: source.title }),
+    source.quote && /* @__PURE__ */ jsxs("span", { className: "sa:text-body sa:text-text-muted", children: [
+      "\u201C",
+      source.quote,
+      "\u201D"
+    ] })
+  ] });
+}
+function Sources({ sources, defaultOpen = false, className, ...props }) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  const listId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { ...props, "data-slot": "sources", className: cn("sa:flex sa:flex-col sa:gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => setOpen(!open),
+        className: cn(
+          "sa:inline-flex sa:h-8 sa:w-fit sa:items-center sa:gap-2 sa:rounded-pill sa:border sa:border-border-default sa:py-1 sa:pr-3 sa:pl-1.5 sa:text-sm sa:font-medium sa:text-text-default sa:outline-none",
+          "sa:transition-[border-color,background-color] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:hover:border-border-strong sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          open && "sa:bg-bg-hover"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:flex sa:items-center sa:gap-0.5", children: sources.slice(0, 3).map((s, i) => /* @__PURE__ */ jsx(SourceIcon, { source: s }, i)) }),
+          sources.length,
+          " ",
+          sources.length === 1 ? "source" : "sources"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { id: listId, "data-state": open ? "open" : "closed", className: "satin-expand", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ol", { className: "sa:flex sa:flex-col sa:gap-0.5", children: sources.map((s, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: s.href,
+        target: s.href ? "_blank" : void 0,
+        rel: s.href ? "noreferrer" : void 0,
+        className: "sa:flex sa:items-center sa:gap-3 sa:rounded-lg sa:p-2 sa:text-sm sa:no-underline sa:outline-none sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:hover:bg-bg-hover sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sa:grid sa:h-4 sa:min-w-4 sa:place-items-center sa:rounded-sm sa:bg-bg-muted sa:px-1 sa:text-xs sa:leading-none sa:font-medium sa:text-text-default sa:tabular-nums", children: i + 1 }),
+          /* @__PURE__ */ jsx(SourceIcon, { source: s }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-text-default", children: s.title }),
+          s.origin && /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-text-muted", children: s.origin })
+        ]
+      }
+    ) }, i)) }) }) })
+  ] });
+}
+
+export { Citation, Sources };

package/chunk-FAJ3OVL4.js

@@ -0,0 +1,37 @@
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var emptyStateVariants = cva(
+  "sa:flex sa:w-[350px] sa:max-w-[560px] sa:min-w-[min(320px,100%)] sa:flex-col sa:items-center sa:gap-4 sa:rounded-2xl sa:px-4 sa:pt-4 sa:pb-5 sa:text-center",
+  {
+    variants: {
+      border: {
+        ghost: "",
+        dashed: "sa:border sa:border-dashed sa:border-border-default",
+        outline: "sa:border sa:border-border-default"
+      }
+    },
+    defaultVariants: { border: "ghost" }
+  }
+);
+function EmptyState({ className, border, title, description, icon, actions, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", className: cn(emptyStateVariants({ border }), className), ...props, children: [
+    icon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "sa:flex sa:shrink-0 sa:items-center sa:justify-center sa:rounded-lg sa:bg-bg-muted sa:p-2.5 sa:text-text-default sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:w-full sa:flex-col sa:items-center sa:gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "sa:w-full sa:text-lg sa:font-medium sa:text-text-default", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "sa:w-full sa:text-body-lg sa:text-text-muted", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-wrap sa:items-start sa:justify-center sa:gap-2", children: actions })
+  ] });
+}
+
+export { EmptyState, emptyStateVariants };

package/{chunk-L6NCCSIP.js → chunk-FB5HTCO2.js}

@@ -1,6 +1,7 @@
-import { Input } from './chunk-YPNKBE5X.js';
-import { TooltipBubble } from './chunk-B6V4VSGH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Input } from './chunk-OURZQM27.js';
+import { TooltipBubble } from './chunk-GMETYACH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import * as React from 'react';
 import { Slider as Slider$1 } from 'radix-ui';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -25,8 +26,12 @@ function Slider({
   name,
   id,
   "aria-label": ariaLabel,
-  className
+  "aria-labelledby": labelledBy,
+  className,
+  onPointerDown,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const autoId = React.useId();
   const sliderId = id ?? autoId;
   const labelId = `${sliderId}-label`;
@@ -56,8 +61,8 @@ function Slider({
   }, [dragging]);
   React.useEffect(() => () => clearTimeout(keyTimer.current), []);
   const readout = range ? `${formatValue(values[0])} \u2013 ${formatValue(values[1])}` : formatValue(values[0]);
-  const thumbLabel = (i) => range ? i === 0 ? "From" : "To" : void 0;
-  const fieldLabel = (i) => range ? i === 0 ? "From" : "To" : "Value";
+  const thumbLabel = (i) => range ? i === 0 ? labels.from : labels.to : void 0;
+  const fieldLabel = (i) => range ? i === 0 ? labels.from : labels.to : labels.value;
   const commitTyped = (i, typed) => {
     const places = decimals(step);
     let v = Math.round((typed - min) / step) * step + min;
@@ -81,6 +86,7 @@ function Slider({
   const slider = /* @__PURE__ */ jsxs(
     Slider$1.Root,
     {
+      ...props,
       id: sliderId,
       "data-slot": "slider",
       value: values,
@@ -93,18 +99,21 @@ function Slider({
       orientation,
       disabled,
       name,
-      "aria-labelledby": label ? labelId : void 0,
-      onPointerDown: () => !disabled && setDragging(true),
+      "aria-labelledby": label ? labelId : labelledBy,
+      onPointerDown: (e) => {
+        onPointerDown?.(e);
+        if (!disabled) setDragging(true);
+      },
       className: cn(
-        "relative flex shrink-0 touch-none items-center select-none data-[disabled]:cursor-not-allowed",
-        vertical ? "h-40 w-5 flex-col" : "h-5 w-full min-w-0 flex-1"
+        "sa:relative sa:flex sa:shrink-0 sa:touch-none sa:items-center sa:select-none sa:data-[disabled]:cursor-not-allowed",
+        vertical ? "sa:h-40 sa:w-5 sa:flex-col" : "sa:h-5 sa:w-full sa:min-w-0 sa:flex-1"
       ),
       children: [
         /* @__PURE__ */ jsx(
           Slider$1.Track,
           {
-            className: cn("relative grow cursor-pointer overflow-hidden rounded-full bg-bg-muted", vertical ? "w-1" : "h-1"),
-            children: /* @__PURE__ */ jsx(Slider$1.Range, { className: cn("absolute rounded-full bg-action-primary-bg", vertical ? "w-full" : "h-full") })
+            className: cn("sa:relative sa:grow sa:cursor-pointer sa:overflow-hidden sa:rounded-full sa:bg-bg-muted", vertical ? "sa:w-1" : "sa:h-1"),
+            children: /* @__PURE__ */ jsx(Slider$1.Range, { className: cn("sa:absolute sa:rounded-full sa:bg-action-primary-bg", vertical ? "sa:w-full" : "sa:h-full") })
           }
         ),
         values.map((v, i) => /* @__PURE__ */ jsx(
@@ -125,11 +134,11 @@ function Slider({
               keyTimer.current = setTimeout(() => setKeying(false), 1e3);
             },
             className: cn(
-              "relative block size-4 cursor-grab rounded-full border border-border-strong bg-bg-popover outline-none active:cursor-grabbing",
-              "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm)]",
-              "transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
-              "hover:border-text-subtle focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
-              "data-[disabled]:cursor-not-allowed data-[disabled]:hover:border-border-strong"
+              "sa:relative sa:block sa:size-4 sa:cursor-grab sa:rounded-full sa:border sa:border-border-strong sa:bg-bg-popover sa:outline-none sa:active:cursor-grabbing",
+              "sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm)]",
+              "sa:transition-[border-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+              "sa:hover:border-text-subtle sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+              "sa:data-[disabled]:cursor-not-allowed sa:data-[disabled]:hover:border-border-strong"
             ),
             children: tooltip && /* @__PURE__ */ jsx(
               TooltipBubble,
@@ -138,8 +147,8 @@ function Slider({
                 label: formatValue(v),
                 "data-visible": (dragging || keying) && focused === i ? "" : void 0,
                 className: cn(
-                  "pointer-events-none absolute tabular-nums opacity-0 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-out) data-[visible]:opacity-100",
-                  vertical ? "top-1/2 left-full ml-2 -translate-x-0.5 -translate-y-1/2 data-[visible]:translate-x-0" : "bottom-full left-1/2 mb-2 -translate-x-1/2 translate-y-0.5 data-[visible]:translate-y-0"
+                  "sa:pointer-events-none sa:absolute sa:tabular-nums sa:opacity-0 sa:transition-[opacity,translate] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:data-[visible]:opacity-100",
+                  vertical ? "sa:top-1/2 sa:left-full sa:ml-2 sa:-translate-x-0.5 sa:-translate-y-1/2 sa:data-[visible]:translate-x-0" : "sa:bottom-full sa:left-1/2 sa:mb-2 sa:-translate-x-1/2 sa:translate-y-0.5 sa:data-[visible]:translate-y-0"
                 )
               }
             )
@@ -149,9 +158,9 @@ function Slider({
       ]
     }
   );
-  const head = (label || showValue && !inputs) && /* @__PURE__ */ jsxs("div", { className: cn("flex h-[18px] items-center justify-between gap-3 whitespace-nowrap", vertical && "min-w-full"), children: [
-    label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
-    showValue && !inputs && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-sm leading-[18px] text-text-muted tabular-nums", children: readout })
+  const head = (label || showValue && !inputs) && /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:h-[18px] sa:items-center sa:justify-between sa:gap-3 sa:whitespace-nowrap", vertical && "sa:min-w-full"), children: [
+    label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "sa:text-sm sa:leading-[18px] sa:font-medium sa:text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
+    showValue && !inputs && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:text-sm sa:leading-[18px] sa:text-text-muted sa:tabular-nums", children: readout })
   ] });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -159,14 +168,14 @@ function Slider({
       "data-slot": "slider-field",
       "data-orientation": orientation,
       "data-disabled": disabled || void 0,
-      className: cn("flex flex-col gap-2", vertical ? "w-max items-center" : "w-full", className),
+      className: cn("sa:flex sa:flex-col sa:gap-2", vertical ? "sa:w-max sa:items-center" : "sa:w-full", className),
       children: [
         head,
-        vertical ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-2", disabled && "opacity-50"), children: [
+        vertical ? /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:flex-col sa:items-center sa:gap-2", disabled && "sa:opacity-50"), children: [
           inputs && range && field(1),
           slider,
           inputs && field(0)
-        ] }) : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", disabled && "opacity-50"), children: [
+        ] }) : /* @__PURE__ */ jsxs("div", { className: cn("sa:flex sa:items-center sa:gap-3", disabled && "sa:opacity-50"), children: [
           inputs && range && field(0),
           slider,
           inputs && field(range ? 1 : 0)
@@ -202,12 +211,10 @@ function SliderInput({
         if (e.key === "Enter") commit();
         if (e.key === "Escape") setDraft(null);
       },
-      wrapperClassName: "w-16 shrink-0",
-      className: "[&_input]:text-center [&_input]:tabular-nums"
+      wrapperClassName: "sa:w-16 sa:shrink-0",
+      className: "sa:[&_input]:text-center sa:[&_input]:tabular-nums"
     }
   );
 }
 
 export { Slider };
-//# sourceMappingURL=chunk-L6NCCSIP.js.map
-//# sourceMappingURL=chunk-L6NCCSIP.js.map

package/chunk-GI2SMFZL.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-O46O6LFQ.js';
+import 'react';
+import { Accordion as Accordion$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Accordion$1.Root, { "data-slot": "accordion", className: cn("sa:flex sa:w-full sa:flex-col", className), ...props });
+}
+function AccordionItem({ title, icon, children, className, "data-force": force, ...props }) {
+  return /* @__PURE__ */ jsxs(Accordion$1.Item, { "data-slot": "accordion-item", className: cn("sa:border-b sa:border-border-subtle sa:py-1", className), ...props, children: [
+    /* @__PURE__ */ jsx(Accordion$1.Header, { className: "sa:flex", children: /* @__PURE__ */ jsxs(
+      Accordion$1.Trigger,
+      {
+        "data-force": force,
+        className: cn(
+          "sa:group sa:flex sa:h-10 sa:w-full sa:cursor-pointer sa:items-center sa:gap-3 sa:rounded-lg sa:px-2 sa:text-left sa:outline-none",
+          "sa:transition-[background-color,box-shadow] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+          "sa:hover:bg-bg-hover sa:data-[force=hover]:bg-bg-hover",
+          "sa:focus-visible:bg-bg-hover sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:data-[force=focus]:bg-bg-hover sa:data-[force=focus]:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+          "sa:disabled:cursor-not-allowed sa:disabled:opacity-50"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:grid sa:size-4 sa:shrink-0 sa:place-items-center sa:text-text-muted sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:text-base sa:leading-[21px] sa:font-medium sa:text-text-default", children: title }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              fill: "none",
+              "aria-hidden": true,
+              className: "sa:shrink-0 sa:text-text-muted sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:group-data-[state=open]:rotate-180",
+              children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Accordion$1.Content, { "data-slot": "accordion-content", className: "satin-accordion-content", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "sa:pt-1 sa:pr-2 sa:pb-3 sa:text-base sa:leading-[21px] sa:text-text-muted",
+          // Lined up with the title: past the icon and its gap when there is one.
+          icon ? "sa:pl-9" : "sa:pl-2"
+        ),
+        children
+      }
+    ) })
+  ] });
+}
+
+export { Accordion, AccordionItem };