@actioneer/ads 1.0.8 → 1.0.10

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?: "outline" | "solid" | null | undefined;
+    variant?: "outline" | "solid" | "plain" | null | undefined;
     color?: "success" | "warning" | "danger" | "info" | "default" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ChipInteraction = "actionable" | "non-actionable";
@@ -19,6 +19,7 @@ export interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
     onClose?: () => void;
     startContent?: React.ReactNode;
     avatar?: React.ReactNode;
+    /** Leading square tone dot. Always on for `variant="plain"`. */
     showDot?: boolean;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLSpanElement>>;

package/components/chip.js

@@ -1,16 +1,19 @@
 "use client";
-import { jsxs as x, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { jsxs as v, Fragment as h, jsx as e } from "react/jsx-runtime";
 import * as N from "react";
 import { cva as w } from "class-variance-authority";
 import { Close as y } from "../lib/icons.js";
-import { cn as t } from "../lib/cn.js";
+import { cn as i } from "../lib/cn.js";
 const k = w(
-  "inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-[4px] border px-2 py-0 text-s font-medium leading-[var(--text-s--line-height)]",
+  "inline-flex h-6 items-center gap-1 whitespace-nowrap rounded-[4px] border px-2 py-0 text-s font-normal leading-[var(--text-s--line-height)]",
   {
     variants: {
       variant: {
         solid: "",
-        outline: ""
+        outline: "",
+        // Status text for table cells and detail panels: no container, an 8px
+        // tone dot, and a 14px Regular primary label. The dot carries the tone.
+        plain: "h-auto gap-2 rounded-none border-0 bg-transparent px-0 text-m font-normal leading-[var(--text-m--line-height)] text-on-white-primary"
       },
       color: {
         default: "",
@@ -23,19 +26,19 @@ const k = w(
     },
     compoundVariants: [
       // solid — the default tinted surface
-      { variant: "solid", color: "default", className: "border-wg4 bg-wg2 text-muted-foreground" },
-      { variant: "solid", color: "primary", className: "border-t6 bg-action-primary-soft text-brand-text" },
-      { variant: "solid", color: "success", className: "border-success-300 bg-success-50 text-success-700" },
-      { variant: "solid", color: "warning", className: "border-warning-300 bg-warning-50 text-warning-700" },
-      { variant: "solid", color: "danger", className: "border-danger-300 bg-danger-50 text-danger-700" },
-      { variant: "solid", color: "info", className: "border-info-300 bg-info-50 text-info-700" },
+      { variant: "solid", color: "default", className: "border-wg3 bg-wg2 text-muted-foreground" },
+      { variant: "solid", color: "primary", className: "border-t4 bg-action-primary-soft text-brand-text" },
+      { variant: "solid", color: "success", className: "border-success-100 bg-success-50 text-success-700" },
+      { variant: "solid", color: "warning", className: "border-warning-100 bg-warning-50 text-warning-700" },
+      { variant: "solid", color: "danger", className: "border-danger-100 bg-danger-50 text-danger-700" },
+      { variant: "solid", color: "info", className: "border-info-100 bg-info-50 text-info-700" },
       // outline
       { variant: "outline", color: "default", className: "border-border bg-card text-foreground" },
-      { variant: "outline", color: "primary", className: "border-t7 bg-card text-brand-text" },
-      { variant: "outline", color: "success", className: "border-success-400 bg-success-50 text-success-700" },
-      { variant: "outline", color: "warning", className: "border-warning-400 bg-warning-50 text-warning-700" },
-      { variant: "outline", color: "danger", className: "border-danger-400 bg-danger-50 text-danger-700" },
-      { variant: "outline", color: "info", className: "border-info-400 bg-info-50 text-info-700" }
+      { variant: "outline", color: "primary", className: "border-t5 bg-card text-brand-text" },
+      { variant: "outline", color: "success", className: "border-success-300 bg-success-50 text-success-700" },
+      { variant: "outline", color: "warning", className: "border-warning-300 bg-warning-50 text-warning-700" },
+      { variant: "outline", color: "danger", className: "border-danger-300 bg-danger-50 text-danger-700" },
+      { variant: "outline", color: "info", className: "border-info-300 bg-info-50 text-info-700" }
     ],
     defaultVariants: { variant: "solid", color: "default" }
   }
@@ -48,46 +51,46 @@ const k = w(
   info: "bg-info"
 }, j = N.forwardRef(
   ({
-    className: g,
-    variant: u = "solid",
-    color: i = "default",
+    className: u,
+    variant: a = "solid",
+    color: o = "default",
     interaction: m,
     isPressable: f = !1,
     onClose: r,
-    startContent: o,
-    avatar: a,
+    startContent: s,
+    avatar: n,
     showDot: p = !1,
-    children: v,
-    ...s
-  }, c) => {
-    const n = r ? "actionable" : m ?? (f ? "actionable" : "non-actionable"), l = n === "actionable" && !r, d = t(
-      k({ variant: u, color: i }),
-      a && "pl-1",
+    children: x,
+    ...c
+  }, l) => {
+    const t = r ? "actionable" : m ?? (f ? "actionable" : "non-actionable"), d = t === "actionable" && !r, g = i(
+      k({ variant: a, color: o }),
+      n && "pl-1",
       r && "pr-1",
-      l && "cursor-pointer select-none outline-none transition-[background,border,color,box-shadow,transform] duration-150 ease-out data-[interaction=actionable]:border-action-primary data-[interaction=actionable]:bg-card data-[interaction=actionable]:text-action-primary-text hover:-translate-y-px hover:bg-action-primary-soft active:translate-y-0 active:scale-[0.97] active:bg-action-primary-soft aria-pressed:border-brand! aria-pressed:bg-action-primary-soft! aria-pressed:text-brand-text! focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
-      g
-    ), b = /* @__PURE__ */ x(h, { children: [
-      a && /* @__PURE__ */ e("span", { className: "-ml-0.5 inline-flex shrink-0", children: a }),
-      p && /* @__PURE__ */ e(
+      d && "cursor-pointer select-none outline-none transition-[background,border,color,box-shadow,transform] duration-150 ease-out data-[interaction=actionable]:border-action-primary data-[interaction=actionable]:bg-card data-[interaction=actionable]:text-action-primary-text hover:-translate-y-px hover:bg-action-primary-soft active:translate-y-0 active:scale-[0.97] active:bg-action-primary-soft aria-pressed:border-brand! aria-pressed:bg-action-primary-soft! aria-pressed:text-brand-text! focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
+      u
+    ), b = /* @__PURE__ */ v(h, { children: [
+      n && /* @__PURE__ */ e("span", { className: "-ml-0.5 inline-flex shrink-0", children: n }),
+      (p || a === "plain") && /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": !0,
-          className: t(
-            "size-1.5",
+          className: i(
+            a === "plain" ? "size-2 shrink-0" : "size-1.5",
             "rounded-dot",
-            z[i ?? "default"]
+            z[o ?? "default"]
           )
         }
       ),
-      o && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: o }),
-      v,
+      s && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0 [&_svg]:size-3.5", children: s }),
+      x,
       r && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           "aria-label": "Remove",
           onClick: r,
-          className: t(
+          className: i(
             // A 16px container tinted from the chip's own ink so the remove
             // control reads as a button: 10% at rest, 20% on hover/press.
             "inline-flex size-4 shrink-0 items-center justify-center rounded-xs",
@@ -99,23 +102,23 @@ const k = w(
         }
       )
     ] });
-    return l ? /* @__PURE__ */ e(
+    return d ? /* @__PURE__ */ e(
       "button",
       {
-        ref: c,
+        ref: l,
         type: "button",
-        "data-interaction": n,
-        className: d,
-        ...s,
+        "data-interaction": t,
+        className: g,
+        ...c,
         children: b
       }
     ) : /* @__PURE__ */ e(
       "span",
       {
-        ref: c,
-        "data-interaction": n,
-        className: d,
-        ...s,
+        ref: l,
+        "data-interaction": t,
+        className: g,
+        ...c,
         children: b
       }
     );

package/components/collection-header.js

@@ -2,7 +2,7 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import * as c from "react";
 import { cn as d } from "../lib/cn.js";
-const f = c.forwardRef(
+const m = c.forwardRef(
   ({ className: n, icon: s, title: i, meta: r, actions: t, ...l }, o) => /* @__PURE__ */ a(
     "header",
     {
@@ -17,7 +17,7 @@ const f = c.forwardRef(
       children: [
         /* @__PURE__ */ a("div", { className: "flex min-w-0 items-center gap-2.5", children: [
           /* @__PURE__ */ e("span", { className: "shrink-0 text-foreground [&_svg]:size-4", "aria-hidden": "true", children: s }),
-          /* @__PURE__ */ e("h1", { className: "truncate text-base font-semibold text-foreground", children: i }),
+          /* @__PURE__ */ e("h1", { className: "truncate text-base font-medium text-foreground", children: i }),
           r ? /* @__PURE__ */ e("span", { className: "shrink-0 text-xs tabular-nums text-secondary", children: r }) : null
         ] }),
         t ? /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-2", children: t }) : null
@@ -25,7 +25,7 @@ const f = c.forwardRef(
     }
   )
 );
-f.displayName = "CollectionHeader";
+m.displayName = "CollectionHeader";
 export {
-  f as CollectionHeader
+  m as CollectionHeader
 };

package/components/connector-card.js

@@ -8,32 +8,32 @@ const u = {
   issue: { band: "bg-linear-to-r from-danger-50 to-danger-50/0" },
   healthy: { band: "bg-linear-to-r from-success-50 to-success-50/0" }
 };
-function y(s) {
+function y(r) {
   const e = /* @__PURE__ */ new Date();
-  if (s.toDateString() === e.toDateString())
-    return `Last sync at ${s.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`;
-  const n = Math.max(1, Math.floor((e.getTime() - s.getTime()) / 864e5));
+  if (r.toDateString() === e.toDateString())
+    return `Last sync at ${r.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })}`;
+  const n = Math.max(1, Math.floor((e.getTime() - r.getTime()) / 864e5));
   if (n === 1) return "Last sync yesterday";
-  let a;
-  if (n < 7) a = `${n} days ago`;
+  let s;
+  if (n < 7) s = `${n} days ago`;
   else if (n < 30) {
-    const r = Math.round(n / 7);
-    a = `${r} week${r > 1 ? "s" : ""} ago`;
+    const a = Math.round(n / 7);
+    s = `${a} week${a > 1 ? "s" : ""} ago`;
   } else {
-    const r = Math.round(n / 30);
-    a = `${r} month${r > 1 ? "s" : ""} ago`;
+    const a = Math.round(n / 30);
+    s = `${a} month${a > 1 ? "s" : ""} ago`;
   }
-  return `Last sync from ${a}`;
+  return `Last sync from ${s}`;
 }
 function N({
-  connected: s,
+  connected: r,
   lastSync: e,
   label: n
 }) {
-  const a = n ?? (s ? e ? y(e) : "Connected" : "Disconnected");
-  return s ? /* @__PURE__ */ i("span", { className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs text-tertiary", children: [
+  const s = n ?? (r ? e ? y(e) : "Connected" : "Disconnected");
+  return r ? /* @__PURE__ */ i("span", { className: "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap text-xs text-tertiary", children: [
     /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "size-2 rounded-dot bg-success" }),
-    a
+    s
   ] }) : /* @__PURE__ */ t(
     x,
     {
@@ -41,12 +41,12 @@ function N({
       color: "danger",
       showDot: !0,
       className: "shrink-0",
-      children: a
+      children: s
     }
   );
 }
-function v({ strip: s }) {
-  const e = u[s.tint] ?? u.issue;
+function v({ strip: r }) {
+  const e = u[r.tint] ?? u.issue;
   return /* @__PURE__ */ t(
     "div",
     {
@@ -60,17 +60,17 @@ function v({ strip: s }) {
           className: o(
             "min-w-0 flex-1 truncate text-xs text-foreground"
           ),
-          children: s.message
+          children: r.message
         }
       )
     }
   );
 }
 const w = g.forwardRef(
-  ({ className: s, card: e, onOpen: n, ...a }, r) => {
+  ({ className: r, card: e, onOpen: n, ...s }, a) => {
     var m;
     const c = !!n, h = ((m = e.action) == null ? void 0 : m.tone) === "reconnect", l = /* @__PURE__ */ i(f, { children: [
-      /* @__PURE__ */ i("div", { className: "rounded-t-xl p-[var(--card-padding)]", children: [
+      /* @__PURE__ */ i("div", { className: "rounded-t-card p-[var(--card-padding)]", children: [
         /* @__PURE__ */ i("div", { className: "mb-5 flex items-center gap-3.5", children: [
           e.logo ? /* @__PURE__ */ t(
             "img",
@@ -79,7 +79,7 @@ const w = g.forwardRef(
               alt: "",
               className: "size-10 shrink-0 rounded-md object-contain"
             }
-          ) : /* @__PURE__ */ t("span", { className: "grid size-10 shrink-0 place-items-center rounded-md bg-muted text-secondary", children: /* @__PURE__ */ t(b, { className: "size-5", "aria-hidden": !0 }) }),
+          ) : /* @__PURE__ */ t("span", { className: "grid size-10 shrink-0 place-items-center text-secondary", children: /* @__PURE__ */ t(b, { className: "size-5", "aria-hidden": !0 }) }),
           /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ i("div", { className: "flex items-baseline justify-between gap-3", children: [
               /* @__PURE__ */ t("div", { className: "min-w-0 truncate text-base font-medium leading-tight text-foreground", children: e.name }),
@@ -96,7 +96,7 @@ const w = g.forwardRef(
         ] }),
         /* @__PURE__ */ t(v, { strip: e.strip })
       ] }),
-      /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3 rounded-b-xl bg-ink-100 px-[var(--card-padding)] py-3", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3 rounded-b-card bg-ink-100 px-[var(--card-padding)] py-3", children: [
         /* @__PURE__ */ t(
           "span",
           {
@@ -120,19 +120,19 @@ const w = g.forwardRef(
         )
       ] })
     ] }), d = o(
-      // Each region shapes its own corners: top body carries rounded-t-xl,
-      // footer carries rounded-b-xl. Layer promoted with translateZ(0) so
+      // Each region shapes its own corners: top body carries rounded-t-card,
+      // footer carries rounded-b-card. Layer promoted with translateZ(0) so
       // the rounded edges rasterize on their own GPU layer (subpixel corner
       // 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]",
+      "rounded-card border border-border bg-card text-card-foreground shadow-card transform-gpu [will-change:transform] [backface-visibility:hidden]",
       c && "transition-[transform,box-shadow] duration-150 ease-out motion-reduce:transition-none",
-      s
+      r
     );
     return c ? /* @__PURE__ */ t(
       "button",
       {
-        ref: r,
+        ref: a,
         type: "button",
         onClick: () => n == null ? void 0 : n(e),
         className: o(
@@ -140,10 +140,10 @@ const w = g.forwardRef(
           "w-full cursor-pointer text-left hover:-translate-y-0.5",
           "outline-none focus-visible:ring-3 focus-visible:ring-ring active:translate-y-0"
         ),
-        ...a,
+        ...s,
         children: l
       }
-    ) : /* @__PURE__ */ t("div", { ref: r, className: d, ...a, children: l });
+    ) : /* @__PURE__ */ t("div", { ref: a, className: d, ...s, children: l });
   }
 );
 w.displayName = "ConnectorCard";

package/components/date-range-picker.js

@@ -173,7 +173,7 @@ function se({
                     children: /* @__PURE__ */ t(U, { className: "size-4" })
                   }
                 ),
-                /* @__PURE__ */ t(Y, { className: "text-sm font-semibold" }),
+                /* @__PURE__ */ t(Y, { className: "text-sm font-medium" }),
                 /* @__PURE__ */ t(
                   m,
                   {

package/components/detail-list.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+/**
+ * DetailList / DetailItem — label–value rows for a record's attributes
+ * (principle `record-detail-panels`).
+ *
+ * Each row reads label (14px, secondary) on the left and value (14px,
+ * primary) on the right. Long values wrap and stay right-aligned; rows
+ * separate with inset WG3 hairlines that stop at the content edge, never at
+ * the container edge. Labels are sentence case ("Type of loan"), never the
+ * raw field key. A value that was never captured renders `emptyLabel`
+ * ("Not stated" by default) in secondary grey (it must still clear AA) instead of an em dash or blank.
+ *
+ * Use it for Details / CRM write-back / Captured fields sections in a detail
+ * panel. It is not a table: when several records share the same fields, use
+ * `Table`.
+ */
+export interface DetailListProps extends React.HTMLAttributes<HTMLDListElement> {
+}
+export declare const DetailList: React.ForwardRefExoticComponent<DetailListProps & React.RefAttributes<HTMLDListElement>>;
+export interface DetailItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** What the value is, in sentence case. */
+    label: React.ReactNode;
+    /** The value. `null`, `undefined` or `""` renders `emptyLabel`. */
+    children?: React.ReactNode;
+    /** Shown in secondary grey when there is no value. */
+    emptyLabel?: React.ReactNode;
+}
+export declare const DetailItem: React.ForwardRefExoticComponent<DetailItemProps & React.RefAttributes<HTMLDivElement>>;

package/components/detail-list.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as i } from "../lib/cn.js";
+const f = l.forwardRef(
+  ({ className: e, ...a }, t) => /* @__PURE__ */ r(
+    "dl",
+    {
+      ref: t,
+      "data-slot": "detail-list",
+      className: i("m-0 flex w-full flex-col", e),
+      ...a
+    }
+  )
+);
+f.displayName = "DetailList";
+const c = l.forwardRef(
+  ({ className: e, label: a, children: t, emptyLabel: m = "Not stated", ...o }, d) => {
+    const s = t == null || t === "" || t === !1;
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        ref: d,
+        "data-slot": "detail-item",
+        "data-empty": s || void 0,
+        className: i(
+          "flex items-start justify-between gap-4 border-b border-tertiary py-2.5 last:border-0",
+          e
+        ),
+        ...o,
+        children: [
+          /* @__PURE__ */ r("dt", { className: "shrink-0 text-m text-on-white-secondary", children: a }),
+          /* @__PURE__ */ r(
+            "dd",
+            {
+              className: i(
+                "m-0 flex min-w-0 max-w-[65%] items-center justify-end gap-2 text-right text-m wrap-break-word",
+                s ? "text-on-white-secondary" : "text-on-white-primary"
+              ),
+              children: s ? m : t
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+c.displayName = "DetailItem";
+export {
+  c as DetailItem,
+  f as DetailList
+};

package/components/drawer.d.ts

@@ -39,33 +39,56 @@ export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size,
  * Drawer in ADS. Use `ModalDrawer` when a page-blocking overlay is genuinely
  * required.
  *
- * 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):
+ * ATTACHED TO THE PAGE (the window panel style, user-mandated 2026-11-12).
+ * The panel is part of the same white page as the content it details: it
+ * sits flush beside it, with no gap, no radius of its own and no shadow,
+ * split off by one full-height WG4 hairline on its leading edge. Its header
+ * and footer close with full-width hairlines too. Mount it as a flex sibling
+ * of the content inside the white page:
  *
- *   <div className="flex gap-3 bg-background p-3">
- *     <main className="flex-1 rounded-xl bg-card">…content…</main>
+ *   <div className="flex min-h-0 flex-1">
+ *     <main className="min-w-0 flex-1">…content…</main>
  *     <Drawer open={open} onOpenChange={setOpen} aria-label="…">…</Drawer>
  *   </div>
  *
- * 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).
+ * Never float it as a separate card with a strip of canvas between, and
+ * never nest it inside the content it details.
  */
 export declare function Drawer({ open, onOpenChange, dismissible, side: sideProp, size, containerClassName, className, children, "aria-label": ariaLabel, }: DrawerProps): React.JSX.Element;
 /** @deprecated Alias for `Drawer` — the canonical drawer is now the inline
  *  variant. Kept for any code still importing `InlineDrawer`. */
 export declare const InlineDrawer: typeof Drawer;
 export type InlineDrawerProps = DrawerProps;
+/**
+ * Record-panel anatomy (principle `record-detail-panels`):
+ *
+ *   DrawerHeader   kicker → title → DrawerMeta (status Chip + context),
+ *                  closed by a full-width WG4 hairline; it never scrolls.
+ *   DrawerBody     the only scrolling region; DrawerSections 32px apart.
+ *   DrawerFooter   OPTIONAL — only when an action leads somewhere real
+ *                  (a dedicated page that exists, a state change). No
+ *                  placeholder "Open full view" when there is no full view.
+ *
+ * A fact lives in one place: what the header says (status, time, length)
+ * is never repeated in the body.
+ */
 export declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Uppercase kind of the selected thing ("CALL", "CAMPAIGN") above the title. */
+export declare const DrawerKicker: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 export declare const DrawerTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * The status line under the title: a status Chip followed by 14px context
+ * ("12 Sep, 3:41 PM · 4s"), 8px below the title. Status never floats alone.
+ */
+export declare const DrawerMeta: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    /** 14px Medium section title ("Transcript"). */
+    title: React.ReactNode;
+    /** Optional scope after the title in Regular secondary ("1 turn", "0 of 10"). */
+    count?: React.ReactNode;
+}
+/** A titled group inside DrawerBody; stack sections with `gap-8` (32px). */
+export declare const DrawerSection: React.ForwardRefExoticComponent<DrawerSectionProps & React.RefAttributes<HTMLElement>>;
 export declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};