@actioneer/ads 0.5.7 → 0.5.9

package/components/checkbox.js

@@ -1,84 +1,120 @@
 "use client";
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import * as s from "react";
-import { Minus as u, Check as f } from "../lib/icons.js";
-import { cn as l } from "../lib/cn.js";
-import { Field as m } from "./field.js";
-const b = {
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import * as t from "react";
+import { motion as x, MotionConfig as w, AnimatePresence as C } from "motion/react";
+import { Check as M, Minus as N } from "../lib/icons.js";
+import { cn as p } from "../lib/cn.js";
+import { Field as z } from "./field.js";
+import { checkDrawTransition as b } from "../lib/motion.js";
+const R = x.create(M), j = x.create(N), G = {
   sm: "size-4 [&_svg]:size-3",
   md: "size-4.5 [&_svg]:size-3.5"
-}, x = s.forwardRef(
-  ({ className: i, children: t, indeterminate: o = !1, size: a = "md", disabled: n, ...c }, d) => {
-    const r = s.useRef(null);
-    return s.useImperativeHandle(d, () => r.current), s.useEffect(() => {
-      r.current && (r.current.indeterminate = o);
-    }, [o]), /* @__PURE__ */ p(
+}, I = t.forwardRef(
+  ({
+    className: a,
+    children: o,
+    indeterminate: r = !1,
+    size: l = "md",
+    disabled: c,
+    checked: n,
+    defaultChecked: d = !1,
+    onChange: i,
+    ...h
+  }, k) => {
+    const s = t.useRef(null), f = n !== void 0, [g, y] = t.useState(d), m = f ? n : g;
+    return t.useImperativeHandle(k, () => s.current), t.useEffect(() => {
+      s.current && (s.current.indeterminate = r);
+    }, [r]), /* @__PURE__ */ v(
       "label",
       {
-        className: l(
+        className: p(
           "group inline-flex items-center gap-2 text-xs text-foreground select-none",
-          n ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-          i
+          c ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          a
         ),
         children: [
           /* @__PURE__ */ e(
             "input",
             {
-              ref: r,
+              ref: s,
               type: "checkbox",
-              disabled: n,
+              disabled: c,
+              checked: m,
+              onChange: (u) => {
+                f || y(u.target.checked), i == null || i(u);
+              },
               className: "peer sr-only",
-              ...c
+              ...h
             }
           ),
           /* @__PURE__ */ e(
             "span",
             {
               "aria-hidden": !0,
-              className: l(
+              className: p(
                 "flex shrink-0 items-center justify-center rounded-sm border border-input bg-elevated text-brand-foreground",
-                "transition-[background,border,box-shadow] duration-(--duration-fast)",
+                "transition-[background,border,box-shadow] duration-150",
                 "peer-checked:border-brand peer-checked:bg-brand",
                 "peer-indeterminate:border-brand peer-indeterminate:bg-brand",
                 "peer-focus-visible:ring-3 peer-focus-visible:ring-ring",
-                b[a]
+                G[l]
               ),
-              children: o ? /* @__PURE__ */ e(u, { strokeWidth: 3 }) : /* @__PURE__ */ e(f, { className: "opacity-0 group-has-[:checked]:opacity-100", strokeWidth: 3 })
+              children: /* @__PURE__ */ e(w, { reducedMotion: "user", children: /* @__PURE__ */ e(C, { initial: !1, mode: "wait", children: (m || r) && (r ? /* @__PURE__ */ e(
+                j,
+                {
+                  initial: { opacity: 0, scale: 0.9 },
+                  animate: { opacity: 1, scale: 1 },
+                  exit: { opacity: 0, scale: 0.9 },
+                  transition: b,
+                  strokeWidth: 3
+                },
+                "indeterminate"
+              ) : /* @__PURE__ */ e(
+                R,
+                {
+                  initial: { opacity: 0, scale: 0.9 },
+                  animate: { opacity: 1, scale: 1 },
+                  exit: { opacity: 0, scale: 0.9 },
+                  transition: b,
+                  strokeWidth: 3
+                },
+                "checked"
+              )) }) })
             }
           ),
-          t && /* @__PURE__ */ e("span", { children: t })
+          o && /* @__PURE__ */ e("span", { children: o })
         ]
       }
     );
   }
 );
-x.displayName = "Checkbox";
-const h = s.forwardRef(
-  ({ className: i, label: t, description: o, error: a, orientation: n = "vertical", children: c, ...d }, r) => /* @__PURE__ */ e(
-    m,
+I.displayName = "Checkbox";
+const S = t.forwardRef(
+  ({ className: a, label: o, description: r, error: l, orientation: c = "vertical", children: n, ...d }, i) => /* @__PURE__ */ e(
+    z,
     {
-      ref: r,
-      label: t,
-      description: o,
-      error: a,
+      ref: i,
+      label: o,
+      description: r,
+      error: l,
       role: "group",
-      className: i,
+      className: a,
       ...d,
       children: /* @__PURE__ */ e(
         "div",
         {
-          className: l(
+          className: p(
             "flex gap-3",
-            n === "vertical" ? "flex-col" : "flex-row flex-wrap"
+            c === "vertical" ? "flex-col" : "flex-row flex-wrap"
           ),
-          children: c
+          children: n
         }
       )
     }
   )
 );
-h.displayName = "CheckboxGroup";
+S.displayName = "CheckboxGroup";
 export {
-  x as Checkbox,
-  h as CheckboxGroup
+  I as Checkbox,
+  S as CheckboxGroup
 };

package/components/chip.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const chipVariants: (props?: ({
-    variant?: "soft" | "solid" | "outline" | "dot" | null | undefined;
+    variant?: "soft" | "outline" | "solid" | "dot" | null | undefined;
     color?: "success" | "warning" | "danger" | "info" | "default" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof chipVariants> {

package/components/code-block.js

@@ -81,7 +81,7 @@ const G = _(
   comment: "text-tertiary",
   string: "text-foreground",
   number: "text-foreground",
-  keyword: "font-semibold text-foreground",
+  keyword: "font-medium text-foreground",
   function: "font-medium text-foreground",
   tag: "font-medium text-foreground",
   punct: "text-tertiary"
@@ -208,7 +208,7 @@ const J = s.forwardRef(
             "span",
             {
               className: u(
-                "absolute top-2 right-2 z-10 opacity-0 transition-opacity duration-(--duration-fast) ease-out",
+                "absolute top-2 right-2 z-10 opacity-0 transition-opacity duration-150 ease-out",
                 "group-hover/code-block:opacity-100 focus-within:opacity-100",
                 "motion-reduce:transition-none"
               ),
@@ -256,7 +256,7 @@ const J = s.forwardRef(
                               className: u(
                                 "select-none text-right text-tertiary",
                                 d === "highlighted" && "text-info-700",
-                                d === "added" && "font-semibold text-foreground",
+                                d === "added" && "font-medium text-foreground",
                                 d === "removed" && "text-danger-700"
                               ),
                               children: c

package/components/collapsible.js

@@ -1,31 +1,75 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import * as s from "react";
-import { Collapsible as t } from "radix-ui";
-const i = s.forwardRef(({ children: l, ...o }, a) => /* @__PURE__ */ e(t.Root, { ref: a, "data-slot": "collapsible", ...o, children: l }));
-i.displayName = "Collapsible";
-const r = s.forwardRef(({ children: l, ...o }, a) => /* @__PURE__ */ e(
-  t.CollapsibleTrigger,
+import { jsx as l } from "react/jsx-runtime";
+import * as t from "react";
+import { Collapsible as r } from "radix-ui";
+import { MotionConfig as u, AnimatePresence as g, motion as h } from "motion/react";
+import { springDisclosure as y } from "../lib/motion.js";
+const C = t.createContext(!1), v = t.forwardRef(({ children: o, open: i, defaultOpen: a = !1, onOpenChange: e, ...s }, n) => {
+  const c = i !== void 0, [f, b] = t.useState(a), p = c ? i : f, m = t.useCallback(
+    (d) => {
+      c || b(d), e == null || e(d);
+    },
+    [c, e]
+  );
+  return /* @__PURE__ */ l(C.Provider, { value: p, children: /* @__PURE__ */ l(
+    r.Root,
+    {
+      ref: n,
+      "data-slot": "collapsible",
+      open: p,
+      onOpenChange: m,
+      ...s,
+      children: o
+    }
+  ) });
+});
+v.displayName = "Collapsible";
+const x = t.forwardRef(({ children: o, ...i }, a) => /* @__PURE__ */ l(
+  r.CollapsibleTrigger,
   {
     ref: a,
     "data-slot": "collapsible-trigger",
-    ...o,
-    children: l
+    ...i,
+    children: o
   }
 ));
-r.displayName = "CollapsibleTrigger";
-const p = s.forwardRef(({ children: l, ...o }, a) => /* @__PURE__ */ e(
-  t.CollapsibleContent,
-  {
-    ref: a,
-    "data-slot": "collapsible-content",
-    ...o,
-    children: l
-  }
-));
-p.displayName = "CollapsibleContent";
+x.displayName = "CollapsibleTrigger";
+const R = t.forwardRef(({ children: o, asChild: i, forceMount: a, ...e }, s) => {
+  const n = t.useContext(C);
+  return i ? /* @__PURE__ */ l(
+    r.CollapsibleContent,
+    {
+      ref: s,
+      "data-slot": "collapsible-content",
+      asChild: !0,
+      forceMount: a,
+      ...e,
+      children: o
+    }
+  ) : /* @__PURE__ */ l(
+    r.CollapsibleContent,
+    {
+      ref: s,
+      "data-slot": "collapsible-content",
+      ...e,
+      forceMount: !0,
+      children: /* @__PURE__ */ l(u, { reducedMotion: "user", children: /* @__PURE__ */ l(g, { initial: !1, children: n && /* @__PURE__ */ l(
+        h.div,
+        {
+          initial: { height: 0, opacity: 0, y: -4 },
+          animate: { height: "auto", opacity: 1, y: 0 },
+          exit: { height: 0, opacity: 0, y: -4 },
+          transition: y,
+          className: "overflow-hidden",
+          children: o
+        }
+      ) }) })
+    }
+  );
+});
+R.displayName = "CollapsibleContent";
 export {
-  i as Collapsible,
-  p as CollapsibleContent,
-  r as CollapsibleTrigger
+  v as Collapsible,
+  R as CollapsibleContent,
+  x as CollapsibleTrigger
 };

package/components/connector-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as r, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { jsxs as r, Fragment as f, jsx as t } from "react/jsx-runtime";
 import * as h from "react";
 import { Database as x, ChevronRight as b } from "../lib/icons.js";
 import { cn as o } from "../lib/cn.js";
@@ -68,7 +68,7 @@ function N({ strip: s }) {
 const v = h.forwardRef(
   ({ className: s, card: e, onOpen: n, ...a }, i) => {
     var m;
-    const c = !!n, f = ((m = e.action) == null ? void 0 : m.tone) === "reconnect", l = /* @__PURE__ */ r(g, { children: [
+    const c = !!n, g = ((m = e.action) == null ? void 0 : m.tone) === "reconnect", l = /* @__PURE__ */ r(f, { children: [
       /* @__PURE__ */ r("div", { className: "rounded-t-xl p-[var(--card-padding)]", children: [
         /* @__PURE__ */ r("div", { className: "mb-5 flex items-center gap-3.5", children: [
           e.logo ? /* @__PURE__ */ t(
@@ -81,7 +81,7 @@ const v = h.forwardRef(
           ) : /* @__PURE__ */ t("span", { className: "grid size-10 shrink-0 place-items-center rounded-md bg-muted text-secondary", children: /* @__PURE__ */ t(x, { className: "size-5", "aria-hidden": !0 }) }),
           /* @__PURE__ */ r("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ r("div", { className: "flex items-baseline justify-between gap-3", children: [
-              /* @__PURE__ */ t("div", { className: "min-w-0 truncate text-base font-semibold leading-tight text-foreground", children: e.name }),
+              /* @__PURE__ */ t("div", { className: "min-w-0 truncate text-base font-medium leading-tight text-foreground", children: e.name }),
               /* @__PURE__ */ t(
                 y,
                 {
@@ -101,7 +101,7 @@ const v = h.forwardRef(
           {
             className: o(
               "min-w-0 truncate text-xs",
-              e.footer.faint ? "text-tertiary/70" : "text-secondary"
+              "text-secondary"
             ),
             children: e.footer.text
           }
@@ -111,7 +111,7 @@ const v = h.forwardRef(
           {
             className: o(
               "inline-flex shrink-0 items-center gap-0.5 text-xs font-normal",
-              f ? "text-danger" : "text-foreground"
+              g ? "text-danger" : "text-foreground"
             ),
             children: [
               e.action.label,
@@ -127,7 +127,7 @@ const v = h.forwardRef(
       // aliasing under transform is a real browser gotcha; forcing a
       // compositor layer fixes it deterministically).
       "rounded-xl bg-card text-card-foreground transform-gpu [will-change:transform] [backface-visibility:hidden]",
-      c && "shadow-elevation transition-[transform,box-shadow] duration-(--duration-fast) ease-out motion-reduce:transition-none",
+      c && "shadow-elevation transition-[transform,box-shadow] duration-150 ease-out motion-reduce:transition-none",
       s
     );
     return c ? /* @__PURE__ */ t(

package/components/drawer.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const panelVariants: (props?: ({
-    side?: "left" | "right" | "bottom" | null | undefined;
+    side?: "bottom" | "left" | "right" | null | undefined;
     size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface DrawerProps extends VariantProps<typeof panelVariants> {
@@ -22,10 +22,12 @@ export interface DrawerProps extends VariantProps<typeof panelVariants> {
 export interface ModalDrawerProps extends VariantProps<typeof panelVariants> {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /** Accessible name for the modal drawer dialog. */
+    "aria-label": string;
     className?: string;
     children: React.ReactNode;
 }
-export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size, className, children, }: ModalDrawerProps): React.ReactPortal;
+export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: ModalDrawerProps): React.ReactPortal;
 /**
  * Drawer — an in-flow side panel that slides in beside content instead of
  * portaling over the whole page. No backdrop, no scroll lock; the surrounding
@@ -33,20 +35,25 @@ export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size,
  * Drawer in ADS. Use `ModalDrawer` when a page-blocking overlay is genuinely
  * required.
  *
- * REQUIRES A TINTED GROUND. The panel is flat white (`bg-card`) with no shadow
- * and no border — it separates from its neighbour purely by fill contrast, so
- * it is INVISIBLE on a white (`bg-background`) parent. Place it and its sibling
- * content inside a `bg-surface` flex row; the tint is the parent's job, not the
- * panel's (the inline Drawer renders no ground of its own):
+ * REQUIRES THE CANVAS GROUND. The panel is flat white (`bg-card`) with no
+ * shadow and no border — it separates from its neighbour purely by fill
+ * contrast, so it is INVISIBLE on a pure-white (`bg-card`) parent. Place it
+ * and its sibling content inside a `bg-background` flex row — the SHELL
+ * CANVAS tint (ink-100), the same color as the frame around the screen. Do
+ * NOT use `bg-surface` (ink-200) for this row: it is one Radix step darker
+ * than the shell frame, so the gutter between the panels renders as a dark
+ * seam stripe instead of reading as canvas (field report 2026-08-06,
+ * Artifacts v2). The ground is the parent's job, not the panel's (the inline
+ * Drawer renders no ground of its own):
  *
- *   <div className="flex gap-3 bg-surface p-3">
+ *   <div className="flex gap-3 bg-background p-3">
  *     <main className="flex-1 rounded-xl bg-card">…content…</main>
  *     <Drawer open={open} onOpenChange={setOpen} aria-label="…">…</Drawer>
  *   </div>
  *
- * This mirrors the shell's main + chat layout — white panels on a tinted
- * ground. If the panel doesn't read, fix the ground; never add a border or
- * shadow to force it (that fights principle 1).
+ * This mirrors the shell's main + chat layout — white panels on the canvas.
+ * If the panel doesn't read, fix the ground; never add a border or shadow to
+ * force it (that fights principle 1).
  */
 export declare function Drawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
 /** @deprecated Alias for `Drawer` — the canonical drawer is now the inline