@actioneer/ads 0.5.1 → 0.5.2

package/components/resizable-panel.js

@@ -82,7 +82,7 @@ const H = t.forwardRef(
                 {
                   "aria-hidden": !0,
                   className: f(
-                    "w-px bg-transparent",
+                    "my-3 w-px rounded-full 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"

package/components/table.d.ts

@@ -23,6 +23,16 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
     onSelectionChange?: (keys: Set<string>) => void;
     /** All row keys on the current page — powers the header "select all". */
     rowKeys?: string[];
+    /**
+     * Turns the final `sticky="right"` column into a persistent action surface.
+     * Its cells stay on `bg-elevated` while one Table-level `shadow-elevation`
+     * spans the body below the muted header instead of repeating on every cell.
+     * The matching header cell stays transparent and scrolls normally, so it
+     * never becomes a blank sticky surface over the header labels.
+     */
+    elevatedActionColumn?: boolean;
+    /** Width shared by the sticky action cells and their elevation surface. */
+    actionColumnWidth?: string;
     sortDescriptor?: SortDescriptor;
     onSortChange?: (descriptor: SortDescriptor) => void;
 }

package/components/table.js

@@ -1,255 +1,318 @@
 "use client";
-import { jsx as r, jsxs as y } from "react/jsx-runtime";
-import * as s from "react";
-import { cn as o } from "../lib/cn.js";
-import { Checkbox as _ } from "./checkbox.js";
-import { ChevronUp as F, ChevronDown as I, SortIcon as M } from "../lib/icons.js";
-const S = (e) => e === "center" ? "text-center" : e === "right" ? "text-right" : "text-left", P = (e) => e === "left" ? "sticky left-0 z-10 shadow-[8px_0_20px_-8px_rgba(0,0,0,0.08)]" : e === "right" ? "sticky right-0 z-10 shadow-[-8px_0_20px_-8px_rgba(0,0,0,0.08)]" : void 0, q = o(
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as t } from "../lib/cn.js";
+import { Checkbox as A } from "./checkbox.js";
+import { ChevronUp as I, ChevronDown as M, SortIcon as U } from "../lib/icons.js";
+const P = (l) => l === "center" ? "text-center" : l === "right" ? "text-right" : "text-left", q = (l, r = !1) => l === "left" ? "sticky left-0 z-10 shadow-[8px_0_20px_-8px_rgba(0,0,0,0.08)]" : l === "right" ? t(
+  "sticky right-0 z-10",
+  // Backward-compatible fallback. Action columns should opt into the
+  // Table-level elevation so one shadow spans the complete column.
+  !r && "shadow-[-8px_0_20px_-8px_rgba(0,0,0,0.08)]"
+) : void 0, B = t(
   "bg-card align-middle transition-colors",
   // Row separators — functional hairline, none under the last row.
   "border-b border-border group-last/row:border-b-0",
-  // Hover/selected: translucent white over the gray shell (HeroUI's trick —
-  // the row "sinks" toward the shell instead of picking up a new tint).
-  "group-hover/row:bg-card/40",
-  "group-data-[selected]/row:bg-card/10"
-), U = o(
+  // Restore the original quiet neutral hover: the row softly sinks toward the
+  // shell instead of picking up a brand tint or a new rounded silhouette. The
+  // wash is pre-composited so scrolled text cannot show through sticky cells.
+  "group-hover/row:bg-(--table-row-hover) group-focus-within/row:bg-(--table-row-hover)",
+  "group-data-[selected]/row:bg-(--table-row-selected)"
+), $ = t(
   "group-first/row:rounded-tl-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-last/row:rounded-bl-[calc(var(--radius-2xl)-var(--spacing))]"
-), $ = o(
+), G = t(
   "group-first/row:first:rounded-tl-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-first/row:last:rounded-tr-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-last/row:first:rounded-bl-[calc(var(--radius-2xl)-var(--spacing))]",
   "group-last/row:last:rounded-br-[calc(var(--radius-2xl)-var(--spacing))]"
-), A = o(
+), j = t(
   "after:pointer-events-none after:absolute after:right-0 after:top-1/2",
   "after:h-4 after:w-px after:-translate-y-1/2 after:rounded-sm",
   "after:bg-border-strong last:after:hidden"
-), B = s.createContext(null), j = () => s.useContext(B), C = s.createContext("body"), E = s.forwardRef(
+), H = n.createContext(null), T = () => n.useContext(H), z = n.createContext("body"), J = n.forwardRef(
   ({
-    className: e,
-    wrapperClassName: a,
-    footer: l,
-    children: b,
-    selectionMode: p = "none",
-    selectedKeys: d,
+    className: l,
+    wrapperClassName: r,
+    footer: s,
+    children: d,
+    selectionMode: m = "none",
+    selectedKeys: e,
     onSelectionChange: i,
-    rowKeys: t,
-    sortDescriptor: n,
-    onSortChange: m,
-    ...w
-  }, h) => {
-    const f = s.useMemo(() => t ?? [], [t]), g = d === "all", u = g ? null : d ?? /* @__PURE__ */ new Set(), N = s.useCallback(
-      (c) => g || !!(u != null && u.has(c)),
-      [g, u]
-    ), v = f.length > 0 && (g || f.every((c) => u == null ? void 0 : u.has(c))), T = !v && (g || f.some((c) => u == null ? void 0 : u.has(c))), k = s.useCallback(
+    rowKeys: a,
+    elevatedActionColumn: p = !1,
+    actionColumnWidth: g = "4rem",
+    sortDescriptor: v,
+    onSortChange: b,
+    ...N
+  }, E) => {
+    const w = n.useMemo(() => a ?? [], [a]), f = e === "all", u = f ? null : e ?? /* @__PURE__ */ new Set(), C = n.useCallback(
+      (c) => f || !!(u != null && u.has(c)),
+      [f, u]
+    ), x = w.length > 0 && (f || w.every((c) => u == null ? void 0 : u.has(c))), R = !x && (f || w.some((c) => u == null ? void 0 : u.has(c))), _ = n.useCallback(
       (c) => {
         if (!i) return;
-        if (p === "single") {
-          i(N(c) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([c]));
+        if (m === "single") {
+          i(C(c) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([c]));
           return;
         }
-        const x = new Set(g ? f : u ?? /* @__PURE__ */ new Set());
-        x.has(c) ? x.delete(c) : x.add(c), i(x);
+        const h = new Set(f ? w : u ?? /* @__PURE__ */ new Set());
+        h.has(c) ? h.delete(c) : h.add(c), i(h);
       },
-      [i, p, N, g, f, u]
-    ), z = s.useCallback(() => {
-      i && i(v ? /* @__PURE__ */ new Set() : new Set(f));
-    }, [i, v, f]), R = s.useCallback(
+      [i, m, C, f, w, u]
+    ), k = n.useCallback(() => {
+      i && i(x ? /* @__PURE__ */ new Set() : new Set(w));
+    }, [i, x, w]), S = n.useCallback(
       (c) => {
-        if (!m) return;
-        const x = (n == null ? void 0 : n.column) === c && n.direction === "ascending" ? "descending" : "ascending";
-        m({ column: c, direction: x });
+        if (!b) return;
+        const h = (v == null ? void 0 : v.column) === c && v.direction === "ascending" ? "descending" : "ascending";
+        b({ column: c, direction: h });
       },
-      [m, n]
-    ), H = s.useMemo(
+      [b, v]
+    ), F = n.useMemo(
       () => ({
-        selectionMode: p,
-        isSelected: N,
-        toggleKey: k,
-        toggleAll: z,
-        allSelected: v,
-        someSelected: T,
-        sortDescriptor: n,
-        requestSort: m ? R : void 0
+        selectionMode: m,
+        isSelected: C,
+        toggleKey: _,
+        toggleAll: k,
+        allSelected: x,
+        someSelected: R,
+        sortDescriptor: v,
+        requestSort: b ? S : void 0,
+        elevatedActionColumn: p
       }),
       [
-        p,
-        N,
+        m,
+        C,
+        _,
         k,
-        z,
+        x,
+        R,
         v,
-        T,
-        n,
-        m,
-        R
+        b,
+        S,
+        p
       ]
     );
-    return /* @__PURE__ */ r(B.Provider, { value: H, children: /* @__PURE__ */ y(
+    return /* @__PURE__ */ o(H.Provider, { value: F, children: /* @__PURE__ */ y(
       "div",
       {
-        className: o(
+        className: t(
           "overflow-clip rounded-2xl bg-muted px-1 pb-1",
-          a
+          r
         ),
         children: [
-          /* @__PURE__ */ r("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r(
-            "table",
+          /* @__PURE__ */ y(
+            "div",
             {
-              ref: h,
-              "data-slot": "table",
-              className: o(
-                "w-full border-separate border-spacing-0 text-xs",
-                e
-              ),
-              ...w,
-              children: b
+              className: "relative",
+              style: p ? {
+                "--table-action-column-width": g
+              } : void 0,
+              children: [
+                /* @__PURE__ */ o("div", { className: "overflow-x-auto rounded-[calc(var(--radius-2xl)-var(--spacing))]", children: /* @__PURE__ */ o(
+                  "table",
+                  {
+                    ref: E,
+                    "data-slot": "table",
+                    className: t(
+                      "w-full border-separate border-spacing-0 text-xs",
+                      l
+                    ),
+                    ...N,
+                    children: d
+                  }
+                ) }),
+                p && /* @__PURE__ */ o(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    "data-slot": "table-action-column-elevation",
+                    className: t(
+                      "pointer-events-none absolute inset-y-0 right-0 z-20",
+                      "w-[var(--table-action-column-width)]",
+                      "rounded-br-[calc(var(--radius-2xl)-var(--spacing))]",
+                      "shadow-elevation"
+                    )
+                  }
+                )
+              ]
             }
-          ) }),
-          l && /* @__PURE__ */ r("div", { className: "flex items-center px-4 py-2.5", children: l })
+          ),
+          s && /* @__PURE__ */ o("div", { className: "flex items-center px-4 py-2.5", children: s })
         ]
       }
     ) });
   }
 );
-E.displayName = "Table";
-const G = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ r(C.Provider, { value: "header", children: /* @__PURE__ */ r(
-  "thead",
-  {
-    ref: l,
-    className: o("text-xs text-muted-foreground", e),
-    ...a
-  }
-) }));
-G.displayName = "TableHeader";
-const J = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ r(C.Provider, { value: "body", children: /* @__PURE__ */ r("tbody", { ref: l, className: o(e), ...a }) }));
-J.displayName = "TableBody";
-const L = s.forwardRef(
-  ({ className: e, rowKey: a, children: l, ...b }, p) => {
-    const d = j(), i = s.useContext(C), t = !!d && d.selectionMode !== "none", n = t && i === "body" && a !== void 0 ? d.isSelected(a) : !1;
+J.displayName = "Table";
+const L = n.forwardRef(({ className: l, ...r }, s) => {
+  const d = T();
+  return /* @__PURE__ */ o(z.Provider, { value: "header", children: /* @__PURE__ */ o(
+    "thead",
+    {
+      ref: s,
+      className: t(
+        "text-xs text-muted-foreground",
+        (d == null ? void 0 : d.elevatedActionColumn) && "relative z-30 bg-muted",
+        l
+      ),
+      ...r
+    }
+  ) });
+});
+L.displayName = "TableHeader";
+const O = n.forwardRef(({ className: l, ...r }, s) => /* @__PURE__ */ o(z.Provider, { value: "body", children: /* @__PURE__ */ o("tbody", { ref: s, className: t(l), ...r }) }));
+O.displayName = "TableBody";
+const Q = n.forwardRef(
+  ({ className: l, rowKey: r, children: s, ...d }, m) => {
+    const e = T(), i = n.useContext(z), a = !!e && e.selectionMode !== "none", p = a && i === "body" && r !== void 0 ? e.isSelected(r) : !1;
     return /* @__PURE__ */ y(
       "tr",
       {
-        ref: p,
-        "data-selected": n || void 0,
-        className: o("group/row", e),
-        ...b,
+        ref: m,
+        "data-selected": p || void 0,
+        className: t("group/row", l),
+        ...d,
         children: [
-          t && (i === "header" ? /* @__PURE__ */ r(
+          a && (i === "header" ? /* @__PURE__ */ o(
             "th",
             {
               scope: "col",
-              className: o(
+              className: t(
                 "w-10 px-4 py-2.5",
-                A,
+                j,
                 // Sticky without the baked shadow — an always-on smudge
                 // muddies the shell's corners (elevation = actionability).
                 // (sticky is positioned, so the ::after tick anchors to it —
                 // no `relative` needed, and it would conflict with sticky.)
                 "sticky left-0 z-10 bg-muted"
               ),
-              children: d.selectionMode === "multiple" && /* @__PURE__ */ r(
-                _,
+              children: e.selectionMode === "multiple" && /* @__PURE__ */ o(
+                A,
                 {
                   size: "sm",
                   "aria-label": "Select all rows",
-                  checked: d.allSelected,
-                  indeterminate: d.someSelected,
-                  onChange: d.toggleAll
+                  checked: e.allSelected,
+                  indeterminate: e.someSelected,
+                  onChange: e.toggleAll
                 }
               )
             }
-          ) : /* @__PURE__ */ r(
+          ) : /* @__PURE__ */ o(
             "td",
             {
-              className: o(
+              className: t(
                 "w-10 px-4 py-3",
-                q,
-                U,
+                B,
+                $,
                 "sticky left-0 z-10"
               ),
-              onClick: (m) => m.stopPropagation(),
-              children: a !== void 0 && /* @__PURE__ */ r(
-                _,
+              onClick: (g) => g.stopPropagation(),
+              children: r !== void 0 && /* @__PURE__ */ o(
+                A,
                 {
                   size: "sm",
-                  "aria-label": `Select ${a}`,
-                  checked: n,
-                  onChange: () => d.toggleKey(a)
+                  "aria-label": `Select ${r}`,
+                  checked: p,
+                  onChange: () => e.toggleKey(r)
                 }
               )
             }
           )),
-          l
+          s
         ]
       }
     );
   }
 );
-L.displayName = "TableRow";
-const O = s.forwardRef(({ className: e, align: a, sticky: l, sortKey: b, children: p, ...d }, i) => {
-  var h, f;
-  const t = j(), n = !!b && !!(t != null && t.requestSort), m = n && ((h = t == null ? void 0 : t.sortDescriptor) == null ? void 0 : h.column) === b, w = (f = t == null ? void 0 : t.sortDescriptor) == null ? void 0 : f.direction;
-  return /* @__PURE__ */ r(
+Q.displayName = "TableRow";
+const V = n.forwardRef(({ className: l, align: r, sticky: s, sortKey: d, children: m, ...e }, i) => {
+  var b, N;
+  const a = T(), p = !!d && !!(a != null && a.requestSort), g = p && ((b = a == null ? void 0 : a.sortDescriptor) == null ? void 0 : b.column) === d, v = (N = a == null ? void 0 : a.sortDescriptor) == null ? void 0 : N.direction;
+  return /* @__PURE__ */ o(
     "th",
     {
       ref: i,
       scope: "col",
-      "aria-sort": m ? w === "ascending" ? "ascending" : "descending" : n ? "none" : void 0,
-      className: o(
+      "aria-sort": g ? v === "ascending" ? "ascending" : "descending" : p ? "none" : void 0,
+      className: t(
         // whitespace-nowrap: header labels hug their content — the table
         // scrolls horizontally, so wrapping "Null %" to two lines only
         // wastes header height without saving any width.
         "relative whitespace-nowrap px-4 py-2.5 font-medium",
-        A,
-        S(a),
-        l && o(P(l), "bg-muted"),
-        e
+        j,
+        P(r),
+        s && (s === "right" && (a != null && a.elevatedActionColumn) ? t(
+          // Preserve the semantic column width, but do not pin or paint
+          // a blank header cell over the labels behind it. Only body
+          // action cells participate in the sticky elevated surface.
+          "w-[var(--table-action-column-width)]",
+          "min-w-[var(--table-action-column-width)]",
+          "max-w-[var(--table-action-column-width)]",
+          "bg-transparent"
+        ) : t(q(s), "bg-muted")),
+        l
       ),
-      ...d,
-      children: n ? /* @__PURE__ */ y(
+      ...e,
+      children: p ? /* @__PURE__ */ y(
         "button",
         {
           type: "button",
-          onClick: () => t.requestSort(b),
-          className: o(
+          onClick: () => a.requestSort(d),
+          className: t(
             "group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors",
             "hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
-            a === "right" && "flex-row-reverse",
-            m && "text-foreground"
+            r === "right" && "flex-row-reverse",
+            g && "text-foreground"
           ),
           children: [
-            p,
-            m ? w === "ascending" ? /* @__PURE__ */ r(F, { className: "size-3.5" }) : /* @__PURE__ */ r(I, { className: "size-3.5" }) : /* @__PURE__ */ r(M, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
+            m,
+            g ? v === "ascending" ? /* @__PURE__ */ o(I, { className: "size-3.5" }) : /* @__PURE__ */ o(M, { className: "size-3.5" }) : /* @__PURE__ */ o(U, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
           ]
         }
-      ) : p
+      ) : m
     }
   );
 });
-O.displayName = "TableColumn";
-const Q = s.forwardRef(
-  ({ className: e, align: a, sticky: l, ...b }, p) => /* @__PURE__ */ r(
-    "td",
-    {
-      ref: p,
-      className: o(
-        "px-4 py-3",
-        q,
-        $,
-        S(a),
-        l && P(l),
-        e
-      ),
-      ...b
-    }
-  )
+V.displayName = "TableColumn";
+const W = n.forwardRef(
+  ({ className: l, align: r, sticky: s, ...d }, m) => {
+    const e = T(), i = s === "right" && (e == null ? void 0 : e.elevatedActionColumn);
+    return /* @__PURE__ */ o(
+      "td",
+      {
+        ref: m,
+        className: t(
+          // whitespace-nowrap: cell content never wraps — the table's
+          // overflow-x-auto viewport scrolls horizontally instead, matching the
+          // header cells. Opt back into wrapping with `whitespace-normal` for
+          // deliberate multi-line content (e.g. an EmptyState in a colSpan cell).
+          "whitespace-nowrap px-4 py-3",
+          B,
+          G,
+          P(r),
+          s && q(s, e == null ? void 0 : e.elevatedActionColumn),
+          i && t(
+            "w-[var(--table-action-column-width)]",
+            "min-w-[var(--table-action-column-width)]",
+            "max-w-[var(--table-action-column-width)]",
+            "bg-elevated",
+            "group-hover/row:bg-elevated group-focus-within/row:bg-elevated"
+          ),
+          l
+        ),
+        ...d
+      }
+    );
+  }
 );
-Q.displayName = "TableCell";
+W.displayName = "TableCell";
 export {
-  E as Table,
-  J as TableBody,
-  Q as TableCell,
-  O as TableColumn,
-  G as TableHeader,
-  L as TableRow
+  J as Table,
+  O as TableBody,
+  W as TableCell,
+  V as TableColumn,
+  L as TableHeader,
+  Q as TableRow
 };

package/lib/icons.d.ts

@@ -388,6 +388,14 @@ export declare const Users: {
     (props: IconProps): React.JSX.Element;
     displayName: string;
 };
+export declare const Play: {
+    (props: IconProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const Pause: {
+    (props: IconProps): React.JSX.Element;
+    displayName: string;
+};
 export declare const Paperclip: {
     (props: IconProps): React.JSX.Element;
     displayName: string;