@uisatin/ui 0.2.0 → 0.4.0

package/{chunk-AN2RNJLR.js → chunk-STYOBAC7.js}

@@ -1,10 +1,11 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { Clock, DoubleCheck, ThumbsUp, ThumbsDown, Copy, Link } from 'iconoir-react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
-var divider = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-3 w-px shrink-0 rounded-full bg-border-default" });
+var divider = /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "sa:h-3 sa:w-px sa:shrink-0 sa:rounded-full sa:bg-border-default" });
 function MessageActions({
   timestamp,
   status = "delivered",
@@ -16,6 +17,7 @@ function MessageActions({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const [feedback, setFeedback] = React.useState(feedbackProp);
   React.useEffect(() => setFeedback(feedbackProp), [feedbackProp]);
   const toggle = (value) => {
@@ -23,26 +25,26 @@ function MessageActions({
     setFeedback(next);
     onFeedback?.(next);
   };
-  const thumb = "aria-pressed:bg-border-input aria-pressed:[&_svg]:text-text-subtle";
-  return /* @__PURE__ */ jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-2", className), ...props, children: [
+  const thumb = "sa:aria-pressed:bg-border-input sa:aria-pressed:[&_svg]:text-text-subtle";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "message-actions", className: cn("sa:flex sa:items-center sa:gap-2", className), ...props, children: [
     timestamp && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex size-6 items-center justify-center text-text-muted", children: [
-          status === "sending" ? /* @__PURE__ */ jsx(Clock, { "aria-hidden": true, className: "size-icon-size [stroke-width:1.875]" }) : /* @__PURE__ */ jsx(DoubleCheck, { "aria-hidden": true, className: "size-icon-size [stroke-width:1.875]" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: status === "sending" ? "Sending" : "Delivered" })
+      /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-center sa:gap-0.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:size-6 sa:items-center sa:justify-center sa:text-text-muted", children: [
+          status === "sending" ? /* @__PURE__ */ jsx(Clock, { "aria-hidden": true, className: "sa:size-icon-size sa:[stroke-width:1.875]" }) : /* @__PURE__ */ jsx(DoubleCheck, { "aria-hidden": true, className: "sa:size-icon-size sa:[stroke-width:1.875]" }),
+          /* @__PURE__ */ jsx("span", { className: "sa:sr-only", children: status === "sending" ? "Sending" : "Delivered" })
         ] }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium whitespace-nowrap text-text-muted", children: timestamp })
+        /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:font-medium sa:whitespace-nowrap sa:text-text-muted", children: timestamp })
       ] }),
       divider
     ] }),
-    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:items-center sa:gap-0.5", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
           variant: "tertiary",
           size: "xs",
           iconOnly: true,
-          "aria-label": "Good response",
+          "aria-label": labels.goodResponse,
           "aria-pressed": feedback === "like",
           onClick: () => toggle("like"),
           className: thumb,
@@ -55,14 +57,14 @@ function MessageActions({
           variant: "tertiary",
           size: "xs",
           iconOnly: true,
-          "aria-label": "Bad response",
+          "aria-label": labels.badResponse,
           "aria-pressed": feedback === "dislike",
           onClick: () => toggle("dislike"),
           className: thumb,
           children: /* @__PURE__ */ jsx(ThumbsDown, {})
         }
       ),
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": "Copy", onClick: onCopy, children: /* @__PURE__ */ jsx(Copy, {}) })
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", iconOnly: true, "aria-label": labels.copy, onClick: onCopy, children: /* @__PURE__ */ jsx(Copy, {}) })
     ] }),
     showShare && /* @__PURE__ */ jsxs(Fragment, { children: [
       divider,
@@ -75,5 +77,3 @@ function MessageActions({
 }
 
 export { MessageActions };
-//# sourceMappingURL=chunk-AN2RNJLR.js.map
-//# sourceMappingURL=chunk-AN2RNJLR.js.map

package/{chunk-X3PQANZO.js → chunk-SVUWR3HD.js}

@@ -1,5 +1,6 @@
-import { Checkbox } from './chunk-FDKIX4DC.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Checkbox } from './chunk-W2QQQWNE.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -12,7 +13,7 @@ function SortIcon({ direction }) {
       viewBox: "0 0 14 14",
       fill: "none",
       "aria-hidden": true,
-      className: cn("shrink-0 text-text-muted", direction === "desc" && "rotate-180"),
+      className: cn("sa:shrink-0 sa:text-text-muted", direction === "desc" && "sa:rotate-180"),
       children: /* @__PURE__ */ jsx(
         "path",
         {
@@ -28,23 +29,23 @@ function SortIcon({ direction }) {
 }
 var cellHover = {
   first: [
-    "group-hover/row:rounded-l-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
-    "group-data-[force=hover]/row:rounded-l-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+    "sa:group-hover/row:rounded-l-xl sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:rounded-l-xl sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
   ].join(" "),
   middle: [
-    "group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
-    "group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+    "sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
   ].join(" "),
   last: [
-    "group-hover/row:rounded-r-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
-    "group-data-[force=hover]/row:rounded-r-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+    "sa:group-hover/row:rounded-r-xl sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:rounded-r-xl sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
   ].join(" "),
   only: [
-    "group-hover/row:rounded-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]",
-    "group-data-[force=hover]/row:rounded-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
+    "sa:group-hover/row:rounded-xl sa:group-hover/row:bg-bg-hover sa:group-hover/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]",
+    "sa:group-data-[force=hover]/row:rounded-xl sa:group-data-[force=hover]/row:bg-bg-hover sa:group-data-[force=hover]/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
   ].join(" ")
 };
-var rowHover = "hover:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))] data-[force=hover]:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))]";
+var rowHover = "sa:hover:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))] sa:data-[force=hover]:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))]";
 function compare(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
   return String(a ?? "").localeCompare(String(b ?? ""), void 0, { numeric: true });
@@ -64,6 +65,7 @@ function Table({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   const [sort, setSort] = React.useState(defaultSort);
   const [selectedState, setSelectedState] = React.useState([]);
   const selected = selectedProp ?? selectedState;
@@ -78,7 +80,8 @@ function Table({
   };
   const sortedRows = React.useMemo(() => {
     if (!sort || manualSort) return rows;
-    const s = [...rows].sort((a, b) => compare(a[sort.key], b[sort.key]));
+    const field = (r) => r[sort.key];
+    const s = [...rows].sort((a, b) => compare(field(a), field(b)));
     return sort.direction === "desc" ? s.reverse() : s;
   }, [rows, sort, manualSort]);
   const scroll = overflow === "scroll";
@@ -106,50 +109,50 @@ function Table({
       ro.disconnect();
     };
   }, [scroll, columns, rows]);
-  const stickyFirst = (bg) => scroll ? cn("sticky z-[1]", bg) : "";
-  const firstDataLeft = selectable ? "left-6" : "left-0";
+  const stickyFirst = (bg) => scroll ? cn("sa:sticky sa:z-[1]", bg) : "";
+  const firstDataLeft = selectable ? "sa:left-6" : "sa:left-0";
   const cellPosition = (index, count) => count === 1 ? cellHover.only : index === 0 ? cellHover.first : index === count - 1 ? cellHover.last : cellHover.middle;
   const cellCount = columns.length + (selectable ? 1 : 0);
   const table = /* @__PURE__ */ jsxs(
     "table",
     {
       "aria-label": label,
-      className: "w-full table-fixed border-separate border-spacing-0 text-left",
+      className: "sa:w-full sa:table-fixed sa:border-separate sa:border-spacing-0 sa:text-left",
       style: tableWidth ? { width: tableWidth, minWidth: "100%" } : { minWidth: columns.length * 120 + (selectable ? 24 : 0) },
       children: [
         /* @__PURE__ */ jsxs("colgroup", { children: [
           selectable && /* @__PURE__ */ jsx("col", { style: { width: 24 } }),
           columns.map((c) => /* @__PURE__ */ jsx("col", { style: { width: colWidth(c) } }, c.key))
         ] }),
-        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-component-table-header", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "sa:bg-component-table-header", children: [
           selectable && /* @__PURE__ */ jsx(
             "th",
             {
               scope: "col",
-              className: cn("border-b border-border-subtle py-2 pl-2 align-middle", stickyFirst("left-0 bg-component-table-header")),
+              className: cn("sa:border-b sa:border-border-subtle sa:py-2 sa:pl-2 sa:align-middle", stickyFirst("sa:left-0 sa:bg-component-table-header")),
               children: /* @__PURE__ */ jsx(
                 Checkbox,
                 {
-                  "aria-label": "Select all rows",
+                  "aria-label": labels.selectAllRows,
                   checked: allSelected ? true : someSelected ? "indeterminate" : false,
                   onCheckedChange: (v) => setSelected(v === true ? rows.map((r) => r.id) : []),
-                  className: "align-middle"
+                  className: "sa:align-middle"
                 }
               )
             }
           ),
           columns.map((c, i) => {
             const active = sort?.key === c.key ? sort.direction : void 0;
-            const labelClass = "inline-flex max-w-full items-center gap-2.5 overflow-hidden rounded-md px-2 py-[3px] text-sm leading-[18px] font-medium whitespace-nowrap text-text-muted";
+            const labelClass = "sa:inline-flex sa:max-w-full sa:items-center sa:gap-2.5 sa:overflow-hidden sa:rounded-md sa:px-2 sa:py-[3px] sa:text-sm sa:leading-[18px] sa:font-medium sa:whitespace-nowrap sa:text-text-muted";
             return /* @__PURE__ */ jsx(
               "th",
               {
                 scope: "col",
                 "aria-sort": c.sortable ? active === "asc" ? "ascending" : active === "desc" ? "descending" : "none" : void 0,
                 className: cn(
-                  "h-8 overflow-hidden border-b border-border-subtle py-1 pr-2 pl-1 align-middle font-medium",
-                  c.align === "right" && "text-right",
-                  i === 0 && stickyFirst(cn(firstDataLeft, "bg-component-table-header"))
+                  "sa:h-8 sa:overflow-hidden sa:border-b sa:border-border-subtle sa:py-1 sa:pr-2 sa:pl-1 sa:align-middle sa:font-medium",
+                  c.align === "right" && "sa:text-right",
+                  i === 0 && stickyFirst(cn(firstDataLeft, "sa:bg-component-table-header"))
                 ),
                 children: c.sortable ? /* @__PURE__ */ jsxs(
                   "button",
@@ -158,11 +161,11 @@ function Table({
                     onClick: () => cycleSort(c.key),
                     className: cn(
                       labelClass,
-                      "transition-colors duration-(--duration-fast) ease-(--ease-out) focus-visible:outline-none",
-                      "satin-hover:bg-bg-hover satin-focus:bg-bg-hover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+                      "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:focus-visible:outline-none",
+                      "sa:satin-hover:bg-bg-hover sa:satin-focus:bg-bg-hover sa:satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx("span", { className: "truncate", children: c.header }),
+                      /* @__PURE__ */ jsx("span", { className: "sa:truncate", children: c.header }),
                       active && /* @__PURE__ */ jsx(SortIcon, { direction: active })
                     ]
                   }
@@ -174,15 +177,15 @@ function Table({
         ] }) }),
         /* @__PURE__ */ jsx("tbody", { children: sortedRows.map((row, r) => {
           const isSelected = selected.includes(row.id);
-          const rowBg = zebra && r % 2 === 1 ? "bg-component-table-zebra" : "bg-bg-card";
-          return /* @__PURE__ */ jsxs("tr", { "data-state": isSelected ? "selected" : void 0, className: cn("group/row", rowBg, rowHover), children: [
-            selectable && /* @__PURE__ */ jsx("td", { className: cn("py-2 pl-2 align-middle", cellPosition(0, cellCount), stickyFirst(cn("left-0", rowBg))), children: /* @__PURE__ */ jsx(
+          const rowBg = zebra && r % 2 === 1 ? "sa:bg-component-table-zebra" : "sa:bg-bg-card";
+          return /* @__PURE__ */ jsxs("tr", { "data-state": isSelected ? "selected" : void 0, className: cn("sa:group/row", rowBg, rowHover), children: [
+            selectable && /* @__PURE__ */ jsx("td", { className: cn("sa:py-2 sa:pl-2 sa:align-middle", cellPosition(0, cellCount), stickyFirst(cn("sa:left-0", rowBg))), children: /* @__PURE__ */ jsx(
               Checkbox,
               {
-                "aria-label": `Select row ${r + 1}`,
+                "aria-label": `${labels.selectRow} ${r + 1}`,
                 checked: isSelected,
                 onCheckedChange: (v) => setSelected(v === true ? [...selected, row.id] : selected.filter((id) => id !== row.id)),
-                className: "align-middle"
+                className: "sa:align-middle"
               }
             ) }),
             columns.map((c, i) => {
@@ -192,12 +195,12 @@ function Table({
                 "td",
                 {
                   className: cn(
-                    "h-10 overflow-hidden py-2 pr-2.5 pl-3 align-middle text-body leading-(--text-body--line-height) text-text-default",
-                    c.align === "right" && "text-right",
+                    "sa:h-10 sa:overflow-hidden sa:py-2 sa:pr-2.5 sa:pl-3 sa:align-middle sa:text-body sa:leading-(--sa-text-body--line-height) sa:text-text-default",
+                    c.align === "right" && "sa:text-right",
                     cellPosition(i + (selectable ? 1 : 0), cellCount),
                     i === 0 && stickyFirst(cn(firstDataLeft, rowBg))
                   ),
-                  children: plain ? /* @__PURE__ */ jsx("span", { className: "block truncate", children: content }) : /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-1 overflow-hidden", c.align === "right" && "justify-end"), children: content })
+                  children: plain ? /* @__PURE__ */ jsx("span", { className: "sa:block sa:truncate", children: content }) : /* @__PURE__ */ jsx("div", { className: cn("sa:flex sa:min-w-0 sa:items-center sa:gap-1 sa:overflow-hidden", c.align === "right" && "sa:justify-end"), children: content })
                 },
                 c.key
               );
@@ -211,10 +214,10 @@ function Table({
     "div",
     {
       "data-slot": "table",
-      className: cn("relative overflow-hidden rounded-xl border border-border-subtle bg-bg-card", className),
+      className: cn("sa:relative sa:overflow-hidden sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-card", className),
       ...props,
       children: scroll ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:relative", children: [
           /* @__PURE__ */ jsx(
             "div",
             {
@@ -222,7 +225,7 @@ function Table({
               tabIndex: 0,
               role: "region",
               "aria-label": label ? `${label}, scrolls sideways` : "Table, scrolls sideways",
-              className: "overflow-x-auto [scrollbar-width:none] focus-visible:outline-none [&::-webkit-scrollbar]:hidden",
+              className: "sa:overflow-x-auto sa:[scrollbar-width:none] sa:focus-visible:outline-none sa:[&::-webkit-scrollbar]:hidden",
               children: table
             }
           ),
@@ -231,25 +234,23 @@ function Table({
             {
               "aria-hidden": true,
               className: cn(
-                "pointer-events-none absolute inset-y-0 right-0 w-16 bg-linear-to-r from-bg-card-fade to-bg-card",
-                "transition-opacity duration-(--duration-fast) ease-(--ease-out)",
-                bar.atEnd && "opacity-0"
+                "sa:pointer-events-none sa:absolute sa:inset-y-0 sa:right-0 sa:w-16 sa:bg-linear-to-r sa:from-bg-card-fade sa:to-bg-card",
+                "sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+                bar.atEnd && "sa:opacity-0"
               )
             }
           )
         ] }),
-        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "px-3 pt-1.5 pb-1", children: /* @__PURE__ */ jsx("div", { className: "relative h-1.5 overflow-hidden rounded-full bg-bg-muted", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "sa:px-3 sa:pt-1.5 sa:pb-1", children: /* @__PURE__ */ jsx("div", { className: "sa:relative sa:h-1.5 sa:overflow-hidden sa:rounded-full sa:bg-bg-muted", children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: "absolute inset-y-0 left-0 rounded-full bg-border-strong",
+            className: "sa:absolute sa:inset-y-0 sa:left-0 sa:rounded-full sa:bg-border-strong",
             style: { width: `${bar.size * 100}%`, transform: `translateX(${bar.offset / bar.size * 100}%)` }
           }
         ) }) })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto overscroll-x-contain", children: table })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "sa:overflow-x-auto sa:overscroll-x-contain", children: table })
     }
   );
 }
 
 export { Table };
-//# sourceMappingURL=chunk-X3PQANZO.js.map
-//# sourceMappingURL=chunk-X3PQANZO.js.map

package/chunk-T7P3OEBP.js

@@ -0,0 +1,128 @@
+import { Progress } from './chunk-LKSFTNPF.js';
+import { Badge } from './chunk-7NV53EL5.js';
+import { useSatinLabels } from './chunk-NTSU44FY.js';
+import { cn } from './chunk-EHEXE2UV.js';
+import * as React from 'react';
+import { ArrowRight } from 'iconoir-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function AgentSuggestion({
+  kind,
+  icon,
+  meta,
+  title,
+  description,
+  actions,
+  children,
+  className,
+  ...props
+}) {
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "agent-suggestion",
+      "aria-labelledby": title ? titleId : void 0,
+      className: cn(
+        "sa:flex sa:w-full sa:max-w-[400px] sa:flex-col sa:gap-3 sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-card sa:p-3 sa:text-text-default sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-6 sa:items-center sa:gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "sa:flex sa:min-w-0 sa:flex-1", children: /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              size: "lg",
+              tone: "neutral",
+              variant: "outline",
+              className: "sa:max-w-full sa:[&_img]:size-3.5 sa:[&_img]:shrink-0",
+              children: [
+                icon,
+                /* @__PURE__ */ jsx("span", { className: "sa:truncate", children: kind })
+              ]
+            }
+          ) }),
+          meta && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:shrink-0 sa:items-center", children: meta })
+        ] }),
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-col sa:gap-2", children: [
+          title && /* @__PURE__ */ jsx("div", { id: titleId, className: "sa:text-base sa:leading-[14px] sa:font-medium sa:tracking-normal sa:text-text-default", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "sa:text-base sa:text-text-muted", children: description })
+        ] }),
+        children,
+        actions && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-wrap sa:items-center sa:justify-end sa:gap-2 sa:pt-1", children: actions })
+      ]
+    }
+  );
+}
+function AgentSuggestionQuote({
+  from,
+  avatar,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("blockquote", { "data-slot": "agent-suggestion-quote", className: cn("sa:m-0 sa:flex sa:flex-col sa:gap-1 sa:rounded-lg sa:bg-bg-muted sa:px-3 sa:py-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1.5", children: [
+      avatar,
+      /* @__PURE__ */ jsx("span", { className: "sa:text-xs sa:leading-3 sa:font-medium sa:tracking-normal sa:text-text-default", children: from })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "sa:m-0 sa:text-base sa:text-text-muted", children })
+  ] });
+}
+function AgentSuggestionMetric({
+  value,
+  unit,
+  used,
+  max,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-suggestion-metric", className: cn("sa:flex sa:flex-col sa:gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-baseline sa:gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:text-2xl sa:leading-[1.5] sa:font-medium sa:tabular-nums", children: value }),
+      unit && /* @__PURE__ */ jsx("span", { className: "sa:text-base sa:text-text-muted", children: unit })
+    ] }),
+    used != null && max != null && /* @__PURE__ */ jsx(
+      Progress,
+      {
+        value: used,
+        max,
+        showValue: false,
+        "aria-label": typeof unit === "string" ? unit : void 0,
+        className: "sa:[&_[role=progressbar]]:h-1.5"
+      }
+    )
+  ] });
+}
+function AgentSuggestionDiff({ before, after, className }) {
+  const labels = useSatinLabels();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-suggestion-diff", className: cn("sa:flex sa:flex-col sa:gap-1 sa:text-base", className), children: [
+    /* @__PURE__ */ jsxs("del", { className: "sa:rounded-lg sa:bg-bg-muted sa:px-2 sa:py-1.5 sa:text-text-muted", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+        labels.remove,
+        ": "
+      ] }),
+      before
+    ] }),
+    /* @__PURE__ */ jsxs("ins", { className: "sa:rounded-lg sa:bg-status-green-bg sa:px-2 sa:py-1.5 sa:text-status-green-fg sa:no-underline", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+        labels.add,
+        ": "
+      ] }),
+      after
+    ] })
+  ] });
+}
+function AgentSuggestionChanges({ changes, className }) {
+  return /* @__PURE__ */ jsx("dl", { "data-slot": "agent-suggestion-changes", className: cn("sa:m-0 sa:flex sa:flex-col sa:gap-2 sa:text-base", className), children: changes.map((c, i) => /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-[21px] sa:items-center sa:gap-2", children: [
+    /* @__PURE__ */ jsx("dt", { className: "sa:w-[88px] sa:shrink-0 sa:text-text-muted", children: c.field }),
+    /* @__PURE__ */ jsxs("dd", { className: "sa:m-0 sa:flex sa:min-w-0 sa:items-center sa:gap-2", children: [
+      c.from != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("del", { className: "sa:text-text-subtle", children: c.from }),
+        /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:text-text-subtle sa:[stroke-width:1.875]" })
+      ] }),
+      typeof c.to === "string" ? /* @__PURE__ */ jsx("span", { className: "sa:font-medium sa:text-text-default", children: c.to }) : c.to
+    ] })
+  ] }, i)) });
+}
+
+export { AgentSuggestion, AgentSuggestionChanges, AgentSuggestionDiff, AgentSuggestionMetric, AgentSuggestionQuote };

package/{chunk-QS4N4MNP.js → chunk-TB3ZRV3Y.js}

@@ -1,6 +1,6 @@
-import { useSlidingIndicator, SLIDE_MS } from './chunk-J3NSDRVH.js';
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { useSlidingIndicator, SLIDE_MS } from './chunk-XETMIETJ.js';
+import { Button } from './chunk-6DWLTGRQ.js';
+import { cn } from './chunk-EHEXE2UV.js';
 import * as React from 'react';
 import { NavArrowLeft, NavArrowRight } from 'iconoir-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -18,10 +18,10 @@ function paginationRange(page, pageCount, siblings = 1) {
   return [1, "gap", ...span(left, right), "gap", pageCount];
 }
 var pageClass = cn(
-  "relative z-10 grid h-control-height min-w-control-height place-items-center overflow-hidden rounded-lg px-1.5 text-sm text-text-muted tabular-nums",
-  "transition-colors duration-(--duration-fast) ease-(--ease-out) outline-none focus-visible:shadow-border-focus",
-  "hover:bg-bg-hover hover:text-text-default",
-  "aria-[current=page]:font-medium aria-[current=page]:text-text-default aria-[current=page]:hover:bg-transparent"
+  "sa:relative sa:z-10 sa:grid sa:h-control-height sa:min-w-control-height sa:place-items-center sa:overflow-hidden sa:rounded-lg sa:px-1.5 sa:text-sm sa:text-text-muted sa:tabular-nums",
+  "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:outline-none sa:focus-visible:shadow-border-focus",
+  "sa:hover:bg-bg-hover sa:hover:text-text-default",
+  "sa:aria-[current=page]:font-medium sa:aria-[current=page]:text-text-default sa:aria-[current=page]:hover:bg-transparent"
 );
 var STRIP_MS = SLIDE_MS;
 var STEP_PX = 32;
@@ -32,7 +32,7 @@ function PageText({ text, dir, motion }) {
   return (
     // Clipped to the wider number, so in the compact "Page 5 of 12" a moving number never runs
     // into the words around it.
-    /* @__PURE__ */ jsxs("span", { className: "inline-grid overflow-hidden align-bottom", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:inline-grid sa:overflow-hidden sa:align-bottom", children: [
       state.old != null && /* @__PURE__ */ jsx(
         "span",
         {
@@ -40,7 +40,7 @@ function PageText({ text, dir, motion }) {
           "data-motion": motion,
           "data-phase": "out",
           "data-dir": state.dir,
-          className: "satin-page-text col-start-1 row-start-1 text-center",
+          className: "satin-page-text sa:col-start-1 sa:row-start-1 sa:text-center",
           onAnimationEnd: () => setState((s) => ({ ...s, old: null })),
           children: state.old
         },
@@ -52,7 +52,7 @@ function PageText({ text, dir, motion }) {
           "data-motion": animate ? motion : void 0,
           "data-phase": animate ? "in" : void 0,
           "data-dir": state.dir,
-          className: "satin-page-text col-start-1 row-start-1 text-center",
+          className: "satin-page-text sa:col-start-1 sa:row-start-1 sa:text-center",
           children: state.text
         },
         `n${state.n}`
@@ -143,7 +143,7 @@ function Pagination({
       );
     }
   }, [page, motion, layout, dir]);
-  const target = (p, className2, children, extra) => getHref ? /* @__PURE__ */ jsx("a", { href: getHref(p), className: className2, onClick: () => go(p), ...extra, children }) : /* @__PURE__ */ jsx("button", { type: "button", className: cn("cursor-pointer", className2), onClick: () => go(p), ...extra, children });
+  const target = (p, className2, children, extra) => getHref ? /* @__PURE__ */ jsx("a", { href: getHref(p), className: className2, onClick: () => go(p), ...extra, children }) : /* @__PURE__ */ jsx("button", { type: "button", className: cn("sa:cursor-pointer", className2), onClick: () => go(p), ...extra, children });
   const step = (dir2) => {
     const to = page + dir2;
     const disabled = to < 1 || to > pageCount;
@@ -159,32 +159,32 @@ function Pagination({
     ] });
     return getHref && !disabled ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "tertiary", iconOnly: compact, "aria-label": compact ? label : void 0, children: /* @__PURE__ */ jsx("a", { href: getHref(to), rel: dir2 < 0 ? "prev" : "next", onClick: () => go(to), children: content }) }) : /* @__PURE__ */ jsx(Button, { variant: "tertiary", iconOnly: compact, "aria-label": compact ? label : void 0, disabled, onClick: () => go(to), children: content });
   };
-  return /* @__PURE__ */ jsx("nav", { "data-slot": "pagination", "data-layout": layout, "aria-label": ariaLabel, className: cn("flex items-center", className), ...props, children: layout === "compact" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsx("nav", { "data-slot": "pagination", "data-layout": layout, "aria-label": ariaLabel, className: cn("sa:flex sa:items-center", className), ...props, children: layout === "compact" ? /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-2", children: [
     step(-1),
-    /* @__PURE__ */ jsxs("span", { className: "text-sm text-text-muted tabular-nums", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs("span", { className: "sa:text-sm sa:text-text-muted sa:tabular-nums", "aria-live": "polite", children: [
       "Page ",
       /* @__PURE__ */ jsx(PageText, { text: String(page), dir, motion: motion === "scroll" ? "scroll" : textMotion }),
       " of ",
       pageCount
     ] }),
     step(1)
-  ] }) : /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "relative flex items-center gap-1", children: [
+  ] }) : /* @__PURE__ */ jsxs("ul", { ref: listRef, className: "sa:relative sa:flex sa:items-center sa:gap-1", children: [
     /* @__PURE__ */ jsx(
       "li",
       {
         ref: pill.ref,
         "aria-hidden": true,
         role: "presentation",
-        className: "pointer-events-none absolute top-0 left-0 h-control-height rounded-lg bg-bg-selected opacity-0"
+        className: "sa:pointer-events-none sa:absolute sa:top-0 sa:left-0 sa:h-control-height sa:rounded-lg sa:bg-bg-selected sa:opacity-0"
       }
     ),
-    /* @__PURE__ */ jsx("li", { ref: ghostRef, "aria-hidden": true, role: "presentation", className: "pointer-events-none absolute inset-0 overflow-visible" }),
+    /* @__PURE__ */ jsx("li", { ref: ghostRef, "aria-hidden": true, role: "presentation", className: "sa:pointer-events-none sa:absolute sa:inset-0 sa:overflow-visible" }),
     /* @__PURE__ */ jsx("li", { children: step(-1) }),
     motion === "scroll" ? (
       // The strip: pages keyed by their number, the two ellipses by their side.
       paginationRange(page, pageCount, siblings).map((p, i, all) => {
         const key = p === "gap" ? i < all.length / 2 ? "gap-start" : "gap-end" : `p${p}`;
-        return /* @__PURE__ */ jsx("li", { "data-cell": key, className: "relative", children: p === "gap" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(pageClass, "pointer-events-none"), children: "\u2026" }) : target(p, pageClass, p, {
+        return /* @__PURE__ */ jsx("li", { "data-cell": key, className: "sa:relative", children: p === "gap" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(pageClass, "sa:pointer-events-none"), children: "\u2026" }) : target(p, pageClass, p, {
           "aria-current": p === page ? "page" : void 0,
           "aria-label": `Page ${p}`
         }) }, key);
@@ -195,7 +195,7 @@ function Pagination({
         const gap = p === "gap";
         const text = /* @__PURE__ */ jsx(PageText, { text: gap ? "\u2026" : String(p), dir, motion: textMotion });
         return /* @__PURE__ */ jsx("li", { children: gap ? React.createElement(getHref ? "a" : "button", {
-          className: cn(pageClass, "pointer-events-none"),
+          className: cn(pageClass, "sa:pointer-events-none"),
           "aria-hidden": true,
           tabIndex: -1,
           ...getHref ? {} : { type: "button", disabled: true },
@@ -211,5 +211,3 @@ function Pagination({
 }
 
 export { Pagination, paginationRange };
-//# sourceMappingURL=chunk-QS4N4MNP.js.map
-//# sourceMappingURL=chunk-QS4N4MNP.js.map