@actioneer/ads 0.2.4 → 0.3.1

package/components/infinite-canvas.d.ts

@@ -0,0 +1,50 @@
+import { Edge, Node, NodeTypes, EdgeTypes, OnEdgesChange, OnNodesChange, ReactFlowInstance } from '@xyflow/react';
+import * as React from "react";
+export interface InfiniteCanvasProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Graph nodes. */
+    nodes: NodeType[];
+    /** Graph edges. */
+    edges: EdgeType[];
+    /** Custom node renderers, keyed by `node.type`. */
+    nodeTypes?: NodeTypes;
+    /** Custom edge renderers, keyed by `edge.type`. */
+    edgeTypes?: EdgeTypes;
+    onNodesChange?: OnNodesChange<NodeType>;
+    onEdgesChange?: OnEdgesChange<EdgeType>;
+    onNodeClick?: (event: React.MouseEvent, node: NodeType) => void;
+    onPaneClick?: (event: React.MouseEvent) => void;
+    onInit?: (instance: ReactFlowInstance<NodeType, EdgeType>) => void;
+    /** Read-only canvases still pan/zoom; nodes stop moving and connecting. */
+    readOnly?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    /** `fitView` padding, as a fraction of the viewport. */
+    fitViewPadding?: number;
+    /** Controlled snap-to-grid state; omit to let the toggle own it. */
+    snapToGrid?: boolean;
+    onSnapToGridChange?: (snap: boolean) => void;
+    snapGrid?: [number, number];
+    /** Show the zoom / fit-to-view cluster. */
+    showControls?: boolean;
+    /** Show the snap-to-grid toggle inside the cluster. */
+    showSnapToGrid?: boolean;
+    /** Toolbar slot pinned to the canvas's top-left corner. */
+    toolbarStart?: React.ReactNode;
+    /** Toolbar slot pinned to the canvas's top-right corner. */
+    toolbarEnd?: React.ReactNode;
+}
+/**
+ * InfiniteCanvas — a tokenized pan/zoom canvas for node-graph and workflow UIs,
+ * built on React Flow (`@xyflow/react`). It owns the reusable canvas chrome:
+ * the dotted grid, ADS-inked edges and arrow markers, the zoom / fit-to-view
+ * cluster, the optional snap-to-grid toggle, and the two toolbar slots. Node
+ * and edge renderers stay with the consumer via `nodeTypes` / `edgeTypes`,
+ * composed from the React Flow primitives re-exported below.
+ */
+export declare const InfiniteCanvas: (<NodeType extends Node = Node, EdgeType extends Edge = Edge>(props: InfiniteCanvasProps<NodeType, EdgeType> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement) & {
+    displayName?: string;
+};
+export { BaseEdge, EdgeLabelRenderer, Handle, MarkerType, Position, ReactFlowProvider, addEdge, getBezierPath, getSmoothStepPath, getStraightPath, useEdgesState, useNodesState, useReactFlow, } from '@xyflow/react';
+export type { Connection, Edge, EdgeProps, EdgeTypes, Node, NodeProps, NodeTypes, OnEdgesChange, OnNodesChange, ReactFlowInstance, Viewport, } from '@xyflow/react';

package/components/infinite-canvas.js

@@ -0,0 +1,215 @@
+"use client";
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import * as n from "react";
+import { MarkerType as U, ReactFlow as Z, Background as j, BackgroundVariant as H, Panel as h, useReactFlow as K, useStore as V } from "@xyflow/react";
+import { BaseEdge as ko, EdgeLabelRenderer as xo, Handle as Eo, MarkerType as yo, Position as Do, ReactFlowProvider as _o, addEdge as wo, getBezierPath as Io, getSmoothStepPath as Ro, getStraightPath as So, useEdgesState as Ao, useNodesState as Co, useReactFlow as No } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { cn as W } from "../lib/cn.js";
+import { Minus as q, Plus as J, Maximize as Q, Magnet as X } from "../lib/icons.js";
+import { Button as a } from "./button.js";
+const k = 16, Y = 1.2, $ = [k, k], oo = 1.4, w = 18, eo = 6, to = [8, 4], ro = 11, I = 150, ao = 200, no = 0.28, R = "var(--color-ink-300)";
+function v(e) {
+  return typeof window > "u" || !window.matchMedia ? e : window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : e;
+}
+const lo = {
+  markerEnd: {
+    type: U.ArrowClosed,
+    width: w,
+    height: w,
+    color: R
+  },
+  style: { stroke: R, strokeWidth: oo },
+  labelStyle: { fill: "var(--color-foreground)", fontSize: ro },
+  labelBgStyle: { fill: "var(--color-background)" },
+  labelBgPadding: to,
+  labelBgBorderRadius: eo
+}, io = [
+  "relative size-full overflow-hidden bg-background",
+  "[--xy-background-color-default:var(--color-background)]",
+  "[--xy-edge-stroke-default:var(--color-ink-300)]",
+  "[--xy-edge-stroke-selected-default:var(--color-foreground)]",
+  "[--xy-edge-label-background-color-default:var(--color-background)]",
+  "[--xy-edge-label-color-default:var(--color-foreground)]",
+  "[--xy-connectionline-stroke-default:var(--color-ink-300)]",
+  "[--xy-handle-background-color-default:var(--color-background)]",
+  "[--xy-handle-border-color-default:var(--color-border-strong)]",
+  "[--xy-selection-background-color-default:var(--color-muted)]",
+  "[--xy-node-color-default:var(--color-foreground)]",
+  "[--xy-node-background-color-default:var(--color-card)]",
+  "[--xy-node-border-default:var(--color-border)]"
+].join(" ");
+function S({
+  fitViewPadding: e,
+  showSnapToGrid: l,
+  snapToGrid: t,
+  onSnapToGridChange: i
+}) {
+  const { zoomIn: s, zoomOut: c, fitView: d } = K(), u = V((f) => f.transform[2]);
+  return /* @__PURE__ */ b(
+    h,
+    {
+      position: "bottom-right",
+      className: "m-3 flex items-center gap-0.5 rounded-lg bg-elevated p-1 shadow-elevation",
+      children: [
+        /* @__PURE__ */ o(
+          a,
+          {
+            type: "button",
+            size: "icon-xs",
+            variant: "ghost",
+            "aria-label": "Zoom out",
+            onClick: () => void c({ duration: v(I) }),
+            children: /* @__PURE__ */ o(q, {})
+          }
+        ),
+        /* @__PURE__ */ b(
+          "span",
+          {
+            className: "min-w-12 text-center text-xs tabular-nums text-muted-foreground",
+            "aria-live": "polite",
+            children: [
+              Math.round(u * 100),
+              "%"
+            ]
+          }
+        ),
+        /* @__PURE__ */ o(
+          a,
+          {
+            type: "button",
+            size: "icon-xs",
+            variant: "ghost",
+            "aria-label": "Zoom in",
+            onClick: () => void s({ duration: v(I) }),
+            children: /* @__PURE__ */ o(J, {})
+          }
+        ),
+        /* @__PURE__ */ o(
+          a,
+          {
+            type: "button",
+            size: "icon-xs",
+            variant: "ghost",
+            "aria-label": "Fit to view",
+            onClick: () => void d({
+              padding: e,
+              duration: v(ao)
+            }),
+            children: /* @__PURE__ */ o(Q, {})
+          }
+        ),
+        l && /* @__PURE__ */ o(
+          a,
+          {
+            type: "button",
+            size: "icon-xs",
+            variant: t ? "secondary" : "ghost",
+            "aria-label": "Snap to grid",
+            "aria-pressed": t,
+            onClick: () => i(!t),
+            children: /* @__PURE__ */ o(X, {})
+          }
+        )
+      ]
+    }
+  );
+}
+S.displayName = "CanvasControls";
+function so({
+  className: e,
+  nodes: l,
+  edges: t,
+  nodeTypes: i,
+  edgeTypes: s,
+  onNodesChange: c,
+  onEdgesChange: d,
+  onNodeClick: u,
+  onPaneClick: f,
+  onInit: A,
+  readOnly: g = !1,
+  minZoom: C = 0.25,
+  maxZoom: N = 1.6,
+  fitViewPadding: m = no,
+  snapToGrid: x,
+  onSnapToGridChange: r,
+  snapGrid: z = $,
+  showControls: B = !0,
+  showSnapToGrid: M = !1,
+  toolbarStart: E,
+  toolbarEnd: y,
+  ...L
+}, O) {
+  const [P, F] = n.useState(!1), p = x !== void 0, D = p ? x : P, G = n.useCallback(
+    (_) => {
+      p || F(_), r == null || r(_);
+    },
+    [p, r]
+  ), T = n.useMemo(
+    () => ({ padding: m }),
+    [m]
+  );
+  return /* @__PURE__ */ o("div", { ref: O, className: W(io, e), ...L, children: /* @__PURE__ */ b(
+    Z,
+    {
+      nodes: l,
+      edges: t,
+      nodeTypes: i,
+      edgeTypes: s,
+      onNodesChange: c,
+      onEdgesChange: d,
+      onNodeClick: u,
+      onPaneClick: f,
+      onInit: A,
+      fitView: !0,
+      fitViewOptions: T,
+      nodesDraggable: !g,
+      nodesConnectable: !g,
+      snapToGrid: D,
+      snapGrid: z,
+      minZoom: C,
+      maxZoom: N,
+      proOptions: { hideAttribution: !0 },
+      defaultEdgeOptions: lo,
+      children: [
+        /* @__PURE__ */ o(
+          j,
+          {
+            variant: H.Dots,
+            gap: k,
+            size: Y,
+            color: "var(--color-border-strong)"
+          }
+        ),
+        E && /* @__PURE__ */ o(h, { position: "top-left", className: "m-3 flex items-center gap-2", children: E }),
+        y && /* @__PURE__ */ o(h, { position: "top-right", className: "m-3 flex items-center gap-2", children: y }),
+        B && /* @__PURE__ */ o(
+          S,
+          {
+            fitViewPadding: m,
+            showSnapToGrid: M && !g,
+            snapToGrid: D,
+            onSnapToGridChange: G
+          }
+        )
+      ]
+    }
+  ) });
+}
+const co = n.forwardRef(so);
+co.displayName = "InfiniteCanvas";
+export {
+  ko as BaseEdge,
+  xo as EdgeLabelRenderer,
+  Eo as Handle,
+  co as InfiniteCanvas,
+  yo as MarkerType,
+  Do as Position,
+  _o as ReactFlowProvider,
+  wo as addEdge,
+  Io as getBezierPath,
+  Ro as getSmoothStepPath,
+  So as getStraightPath,
+  Ao as useEdgesState,
+  Co as useNodesState,
+  No as useReactFlow
+};

package/components/page-header.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** One page-level title. */
+    title: React.ReactNode;
+    /** Optional single supporting line beneath the title. */
+    description?: React.ReactNode;
+    /**
+     * Enables the canonical leading back affordance. Back navigation is always
+     * rendered immediately before the title; it never belongs in trailing actions.
+     */
+    onBack?: () => void;
+    /** Accessible label for the icon-only back control. @default "Back" */
+    backLabel?: string;
+    /** Forward/page actions rendered at the trailing edge. Never pass Back here. */
+    actions?: React.ReactNode;
+}
+/**
+ * Canonical page title row. When a page has parent navigation, supply onBack:
+ * the component anchors an icon-only arrow immediately before the title and
+ * keeps trailing space exclusively for forward/page actions.
+ */
+export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;

package/components/page-header.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import { ArrowLeft as d } from "../lib/icons.js";
+import { cn as f } from "../lib/cn.js";
+import { Button as h } from "./button.js";
+const x = c.forwardRef(
+  ({
+    className: s,
+    title: m,
+    description: r,
+    onBack: a,
+    backLabel: l = "Back",
+    actions: i,
+    ...n
+  }, o) => /* @__PURE__ */ t(
+    "header",
+    {
+      ref: o,
+      className: f(
+        "flex min-w-0 items-start justify-between gap-4",
+        s
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex min-w-0 items-start gap-2", children: [
+          a && /* @__PURE__ */ e(
+            h,
+            {
+              type: "button",
+              size: "icon-sm",
+              variant: "ghost",
+              "aria-label": l,
+              className: "shrink-0",
+              onClick: a,
+              children: /* @__PURE__ */ e(d, { "aria-hidden": !0 })
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ e("h1", { className: "flex min-h-8 items-center text-xl font-bold tracking-tight text-foreground", children: m }),
+            r && /* @__PURE__ */ e("p", { className: "mt-1 max-w-2xl text-xs text-muted-foreground", children: r })
+          ] })
+        ] }),
+        i && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-2", children: i })
+      ]
+    }
+  )
+);
+x.displayName = "PageHeader";
+export {
+  x as PageHeader
+};

package/components/resizable-panel.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+/**
+ * ResizablePanel — a panel the reader can widen or narrow by dragging its
+ * edge. Both the chat side-panel and the sidebar edge-toggle wanted this and
+ * hand-rolled it; ADS had no splitter primitive of any kind.
+ *
+ * The handle is a hit area, not a visual: it stays invisible until hover or
+ * focus, then paints a hairline. Dragging is pointer-captured so the drag
+ * survives the pointer leaving the handle, and the size is clamped to
+ * `min`/`max` rather than letting the panel collapse to nothing.
+ *
+ * Keyboard: arrow keys nudge, Home/End jump to the bounds — a splitter that
+ * only responds to a mouse is unusable for a keyboard reader.
+ */
+export interface ResizablePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> {
+    /** Which edge carries the handle. */
+    side?: "start" | "end";
+    /** Uncontrolled starting size in px. */
+    defaultSize?: number;
+    /** Controlled size in px. */
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    /** Px moved per arrow press. */
+    step?: number;
+    onResize?: (size: number) => void;
+    label?: string;
+}
+export declare const ResizablePanel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;

package/components/resizable-panel.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsxs as z, jsx as y } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as f } from "../lib/cn.js";
+const H = t.forwardRef(
+  ({
+    className: k,
+    children: v,
+    side: a = "end",
+    defaultSize: P = 320,
+    size: p,
+    minSize: o = 200,
+    maxSize: s = 640,
+    step: h = 16,
+    onResize: i,
+    label: C = "Resize panel",
+    style: D,
+    ...x
+  }, I) => {
+    const [R, A] = t.useState(P), g = p !== void 0, l = g ? p : R, [c, b] = t.useState(!1), u = t.useRef(null);
+    t.useImperativeHandle(I, () => u.current);
+    const m = t.useCallback(
+      (e) => Math.min(s, Math.max(o, e)),
+      [s, o]
+    ), n = t.useCallback(
+      (e) => {
+        const r = m(Math.round(e));
+        g || A(r), i == null || i(r);
+      },
+      [m, g, i]
+    ), M = (e) => {
+      e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), b(!0);
+    }, N = (e) => {
+      if (!c || !u.current) return;
+      const r = u.current.getBoundingClientRect();
+      n(a === "end" ? e.clientX - r.left : r.right - e.clientX);
+    }, w = (e) => {
+      var r, d;
+      c && ((d = (r = e.currentTarget).releasePointerCapture) == null || d.call(r, e.pointerId), b(!1));
+    }, j = (e) => {
+      const r = a === "end" ? "ArrowRight" : "ArrowLeft", d = a === "end" ? "ArrowLeft" : "ArrowRight";
+      if (e.key === r) n(l + h);
+      else if (e.key === d) n(l - h);
+      else if (e.key === "Home") n(o);
+      else if (e.key === "End") n(s);
+      else return;
+      e.preventDefault();
+    };
+    return /* @__PURE__ */ z(
+      "div",
+      {
+        ref: u,
+        "data-slot": "resizable-panel",
+        "data-dragging": c || void 0,
+        className: f("relative shrink-0", k),
+        style: { width: l, ...D },
+        ...x,
+        children: [
+          v,
+          /* @__PURE__ */ y(
+            "div",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": C,
+              "aria-valuenow": l,
+              "aria-valuemin": o,
+              "aria-valuemax": s,
+              tabIndex: 0,
+              onPointerDown: M,
+              onPointerMove: N,
+              onPointerUp: w,
+              onPointerCancel: w,
+              onKeyDown: j,
+              "data-slot": "resizable-handle",
+              className: f(
+                "group/resize absolute inset-y-0 z-10 flex w-2 cursor-col-resize touch-none items-stretch justify-center outline-none",
+                a === "end" ? "-right-1" : "-left-1"
+              ),
+              children: /* @__PURE__ */ y(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: f(
+                    "w-px bg-transparent",
+                    "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                    "group-hover/resize:bg-border-strong group-focus-visible/resize:bg-ring",
+                    c && "bg-ring"
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+H.displayName = "ResizablePanel";
+export {
+  H as ResizablePanel
+};

package/components/reveal.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps } from 'react';
+/**
+ * Reveal — the "data draws itself" entrance. Instead of a skeleton that pulses
+ * and then pops into content, the real layout lands instantly and the content
+ * arrives in hierarchy: shells rise, labels and values ink in, visualizations
+ * draw left to right — each slot offset by a shared stagger step.
+ *
+ * Pure CSS animations (off the main thread), tokens for easing, and a
+ * reduced-motion fallback that keeps only the fade. Durations are deliberate:
+ * data drawing is explanatory motion, so the wipe may breathe past the <300ms
+ * UI-chrome rule; interactive chrome must never use these classes.
+ */
+export type RevealVariant = "ink" | "rise" | "wipe";
+export type RevealGroupProps = ComponentProps<"div"> & {
+    /** Stagger unit between order slots, in ms. Defaults to 70. */
+    step?: number;
+    /** Change this value to replay the whole choreography. */
+    replayKey?: string | number;
+};
+/**
+ * Orchestrates a reveal choreography: sets the stagger step for every child
+ * {@link Reveal} and remounts them when `replayKey` changes so the entrance
+ * plays again (e.g. when fresh data arrives).
+ */
+export declare const RevealGroup: import('react').MemoExoticComponent<({ step, replayKey, style, children, ...props }: RevealGroupProps) => import("react").JSX.Element>;
+export type RevealProps = ComponentProps<"div"> & {
+    /**
+     * `rise` for shells/cards (fade + 8px lift), `ink` for text and values
+     * (fade + blur settle), `wipe` for data that should draw left to right
+     * (charts, segmented bars).
+     */
+    variant?: RevealVariant;
+    /** 0-based slot in the choreography; delay = order × step. */
+    order?: number;
+};
+export declare const Reveal: import('react').MemoExoticComponent<({ variant, order, className, style, ...props }: RevealProps) => import("react").JSX.Element>;

package/components/reveal.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { memo as t, Fragment as v } from "react";
+import { cn as d } from "../lib/cn.js";
+const i = t(
+  ({ step: e, replayKey: a, style: l, children: r, ...o }) => /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "reveal-group",
+      style: {
+        ...e != null ? { "--reveal-step": `${e}ms` } : void 0,
+        ...l
+      },
+      ...o,
+      children: /* @__PURE__ */ s(v, { children: r }, a != null ? String(a) : void 0)
+    }
+  )
+), m = t(
+  ({ variant: e = "rise", order: a = 0, className: l, style: r, ...o }) => /* @__PURE__ */ s(
+    "div",
+    {
+      "data-slot": "reveal",
+      "data-variant": e,
+      className: d("ads-reveal", `ads-reveal-${e}`, l),
+      style: { "--reveal-order": a, ...r },
+      ...o
+    }
+  )
+);
+i.displayName = "RevealGroup";
+m.displayName = "Reveal";
+export {
+  m as Reveal,
+  i as RevealGroup
+};

package/components/scroll-area.d.ts

@@ -0,0 +1,19 @@
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+import * as React from "react";
+/**
+ * ScrollArea — a scroll container with a styled, always-consistent scrollbar,
+ * instead of the platform's own (which differs per OS and steals layout width
+ * on Windows).
+ *
+ * The thumb is a quiet `fill` bar that only gains contrast on hover, so a long
+ * list never reads as chrome-first. Cap the height from the outside
+ * (`className="h-72"`); the component provides no height of its own.
+ */
+export interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /** Which axis scrolls. `both` renders a horizontal bar as well. */
+    orientation?: "vertical" | "horizontal" | "both";
+    viewportClassName?: string;
+}
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+export type ScrollBarProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>;
+export declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/scroll-area.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import * as i from "react";
+import { ScrollArea as e } from "radix-ui";
+import { cn as s } from "../lib/cn.js";
+const m = i.forwardRef(
+  ({ className: a, children: l, orientation: r = "vertical", viewportClassName: t, ...n }, d) => /* @__PURE__ */ f(
+    e.Root,
+    {
+      ref: d,
+      "data-slot": "scroll-area",
+      className: s("relative overflow-hidden border border-border", a),
+      ...n,
+      children: [
+        /* @__PURE__ */ o(
+          e.Viewport,
+          {
+            className: s("size-full rounded-[inherit]", t),
+            children: l
+          }
+        ),
+        (r === "vertical" || r === "both") && /* @__PURE__ */ o(c, { orientation: "vertical" }),
+        (r === "horizontal" || r === "both") && /* @__PURE__ */ o(c, { orientation: "horizontal" }),
+        /* @__PURE__ */ o(e.Corner, {})
+      ]
+    }
+  )
+);
+m.displayName = "ScrollArea";
+const c = i.forwardRef(({ className: a, orientation: l = "vertical", ...r }, t) => /* @__PURE__ */ o(
+  e.ScrollAreaScrollbar,
+  {
+    ref: t,
+    orientation: l,
+    "data-slot": "scroll-bar",
+    className: s(
+      "flex touch-none select-none p-0.5",
+      "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
+      l === "vertical" && "h-full w-2.5",
+      l === "horizontal" && "h-2.5 flex-col",
+      a
+    ),
+    ...r,
+    children: /* @__PURE__ */ o(
+      e.ScrollAreaThumb,
+      {
+        "data-slot": "scroll-bar-thumb",
+        className: "relative flex-1 rounded-full bg-fill transition-colors duration-(--duration-fast) ease-out hover:bg-border-strong motion-reduce:transition-none"
+      }
+    )
+  }
+));
+c.displayName = "ScrollBar";
+export {
+  m as ScrollArea,
+  c as ScrollBar
+};

package/components/setting-row.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * SettingList / SettingRow — the grouped settings stack: one row per setting,
+ * each reading leading glyph → what it is → the control that changes it.
+ *
+ * The rows are separate `bg-card` blocks on a recessed `bg-surface` track, so
+ * the group reads by fill and spacing rather than by hairlines (principle 1).
+ * A row is a static surface — it stays flat unless `onSelect` makes the whole
+ * row actionable, at which point it earns hover and press feedback.
+ *
+ * The trailing slot takes whatever changes the setting: a `Button`, a
+ * `Switch`, a `Badge`, or nothing. The leading slot takes the label — pass a
+ * `Select` there when the setting's current value is itself the picker.
+ */
+declare const settingRowVariants: (props?: ({
+    isPressable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SettingRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onSelect">, Omit<VariantProps<typeof settingRowVariants>, "isPressable"> {
+    /** Leading glyph naming the setting's domain. */
+    icon?: React.ReactNode;
+    /** What the setting is — or the control showing its current value. */
+    label: React.ReactNode;
+    /** Optional second line qualifying the setting. */
+    description?: React.ReactNode;
+    /** The control that changes it: Button, Switch, Badge. */
+    action?: React.ReactNode;
+    /** Makes the whole row actionable; the trailing action still stops the click. */
+    onSelect?: () => void;
+}
+export declare const SettingRow: React.ForwardRefExoticComponent<SettingRowProps & React.RefAttributes<HTMLDivElement>>;
+export type SettingListProps = React.HTMLAttributes<HTMLDivElement>;
+/** The recessed track the rows sit on; the gap between them is the divider. */
+export declare const SettingList: React.ForwardRefExoticComponent<SettingListProps & React.RefAttributes<HTMLDivElement>>;
+export { settingRowVariants };