@actioneer/ads 0.2.3 → 0.3.0

package/components/code-block.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * CodeBlock — block-level source display: a query, a config, a tool payload.
+ * The inline sibling is `Code`; reach for this whenever the snippet owns its
+ * own line(s).
+ *
+ * A recessed, static surface — filled, never elevated (elevation means
+ * actionable) and never bordered. Long snippets scroll inside the block, so
+ * cap the height from the outside (`className="max-h-96"`) rather than letting
+ * the page grow.
+ *
+ * There is no syntax highlighting: it would cost a highlighter dependency and
+ * a second color language competing with the brand's monochrome. `language` is
+ * a label, not a lexer. The mono face and tabular figures carry the "this is
+ * code" signal.
+ */
+declare const codeBlockVariants: (props?: ({
+    variant?: "soft" | "plain" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CodeBlockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof codeBlockVariants> {
+    /** The source to display, verbatim. */
+    code: string;
+    /** Language label for the header, e.g. `sql`. A label only — not a lexer. */
+    language?: string;
+    /** Leading header label, e.g. `schema.yaml`. Takes the header's start slot. */
+    filename?: string;
+    /** Show the copy control. */
+    isCopyable?: boolean;
+    /** Number the lines in a non-selectable gutter. */
+    showLineNumbers?: boolean;
+    /** Accessible label for the copy control. */
+    copyLabel?: string;
+}
+export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
+export { codeBlockVariants };

package/components/code-block.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import * as r from "react";
+import { cva as k } from "class-variance-authority";
+import { Button as C } from "./button.js";
+import { Check as w, Copy as N } from "../lib/icons.js";
+import { cn as u } from "../lib/cn.js";
+const B = k(
+  "group/code-block relative w-full overflow-hidden rounded-lg text-xs",
+  {
+    variants: {
+      variant: {
+        /** Recessed fill — the default, for code sitting on a card or panel. */
+        soft: "bg-muted",
+        /** No fill, for code already inside a filled or tinted surface. */
+        plain: "bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "soft" }
+  }
+);
+function T(n = 2e3) {
+  const [o, a] = r.useState(!1), t = r.useRef(null);
+  r.useEffect(
+    () => () => {
+      t.current !== null && window.clearTimeout(t.current);
+    },
+    []
+  );
+  const c = r.useCallback(
+    (i) => {
+      !i || typeof navigator > "u" || !navigator.clipboard || navigator.clipboard.writeText(i).then(
+        () => {
+          a(!0), t.current !== null && window.clearTimeout(t.current), t.current = window.setTimeout(
+            () => a(!1),
+            n
+          );
+        },
+        () => {
+        }
+      );
+    },
+    [n]
+  );
+  return { isCopied: o, copy: c };
+}
+const R = r.forwardRef(
+  ({
+    className: n,
+    code: o,
+    language: a,
+    filename: t,
+    variant: c,
+    isCopyable: i = !0,
+    showLineNumbers: l = !1,
+    copyLabel: h = "Copy code",
+    ...x
+  }, y) => {
+    const { isCopied: m, copy: v } = T(), d = !!(t || a), b = r.useMemo(
+      () => l ? o.replace(/\n$/, "").split(`
+`) : [],
+      [o, l]
+    ), s = i ? /* @__PURE__ */ e(
+      C,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-xs",
+        "aria-label": h,
+        onClick: () => v(o),
+        children: m ? /* @__PURE__ */ e(w, { "aria-hidden": !0, className: "text-success" }) : /* @__PURE__ */ e(N, { "aria-hidden": !0 })
+      }
+    ) : null;
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: y,
+        "data-slot": "code-block",
+        className: u(B({ variant: c }), n),
+        ...x,
+        children: [
+          /* @__PURE__ */ e("span", { "aria-live": "polite", className: "sr-only", children: m ? "Copied to clipboard" : "" }),
+          d && /* @__PURE__ */ p(
+            "div",
+            {
+              "data-slot": "code-block-header",
+              className: "flex items-center gap-2 px-3 py-1.5 text-tertiary",
+              children: [
+                t && /* @__PURE__ */ e("span", { className: "min-w-0 truncate font-medium text-secondary", children: t }),
+                a && /* @__PURE__ */ e("span", { className: "shrink-0 font-mono text-[11px] uppercase", children: a }),
+                s && /* @__PURE__ */ e("span", { className: "ml-auto shrink-0", children: s })
+              ]
+            }
+          ),
+          !d && s && /* @__PURE__ */ e(
+            "span",
+            {
+              className: u(
+                "absolute top-1.5 right-1.5 z-10 opacity-0 transition-opacity duration-(--duration-fast) ease-out",
+                "group-hover/code-block:opacity-100 focus-within:opacity-100",
+                "motion-reduce:transition-none"
+              ),
+              children: s
+            }
+          ),
+          /* @__PURE__ */ e(
+            "pre",
+            {
+              "data-slot": "code-block-content",
+              className: u(
+                "overflow-x-auto px-3 leading-relaxed text-foreground tabular-nums",
+                d ? "pb-3" : "py-3"
+              ),
+              children: /* @__PURE__ */ e("code", { className: "font-mono", children: l ? b.map((g, f) => /* @__PURE__ */ p("span", { className: "grid grid-cols-[2ch_1fr] gap-3", children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: "select-none text-right text-tertiary",
+                    children: f + 1
+                  }
+                ),
+                /* @__PURE__ */ e("span", { children: g })
+              ] }, f)) : o })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+R.displayName = "CodeBlock";
+export {
+  R as CodeBlock,
+  B as codeBlockVariants
+};

package/components/command-palette.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+/**
+ * CommandPalette — the global-search / command surface (⌘K pattern).
+ *
+ * A portaled, top-anchored dialog with a search input and a grouped,
+ * keyboard-navigable result list. Deliberately NOT animated: the motion
+ * principles class a command palette as a frequent, keyboard-initiated
+ * action ("frequent = fast or none"), so it appears and dismisses
+ * instantly.
+ *
+ * Fully props-driven: the consumer supplies flat `items` (each optionally
+ * tagged with a `group`) and receives `onSelect`; filtering is a simple
+ * case-insensitive substring match over label + keywords, overridable via
+ * `filter`.
+ */
+export interface CommandPaletteItem {
+    id: string;
+    /** Primary label — also the default match text. */
+    label: string;
+    /** Section heading the item is listed under. Ungrouped items come first. */
+    group?: string;
+    /** Leading icon slot (sized to the row's text). */
+    icon?: React.ReactNode;
+    /** Muted right-aligned hint (a path, type, or shortcut). */
+    hint?: string;
+    /** Extra text the filter matches against (synonyms, paths). */
+    keywords?: string;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: readonly CommandPaletteItem[];
+    /** Called with the chosen item; the palette closes itself afterwards. */
+    onSelect: (item: CommandPaletteItem) => void;
+    placeholder?: string;
+    emptyLabel?: string;
+    /** Accessible name for the dialog. */
+    "aria-label"?: string;
+    /** Override the match predicate (query is already lowercased). */
+    filter?: (item: CommandPaletteItem, query: string) => boolean;
+    className?: string;
+}
+export declare function CommandPalette({ open, onOpenChange, items, onSelect, placeholder, emptyLabel, "aria-label": ariaLabel, filter, className, }: CommandPaletteProps): React.ReactPortal | null;

package/components/command-palette.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { createPortal as S } from "react-dom";
+import { Search as q } from "../lib/icons.js";
+import { cn as k } from "../lib/cn.js";
+const C = (a, i) => `${a.label} ${a.keywords ?? ""}`.toLowerCase().includes(i);
+function _({
+  open: a,
+  onOpenChange: i,
+  items: p,
+  onSelect: R,
+  placeholder: $ = "Search…",
+  emptyLabel: A = "No results",
+  "aria-label": D = "Global search",
+  filter: h = C,
+  className: E
+}) {
+  const f = o.useId(), v = o.useRef(null), y = o.useRef(null), g = o.useRef(null), [m, b] = o.useState(""), [c, x] = o.useState(0), n = o.useMemo(() => {
+    const e = m.trim().toLowerCase();
+    return e ? p.filter((r) => h(r, e)) : [...p];
+  }, [p, m, h]), M = o.useMemo(() => {
+    const e = [], r = /* @__PURE__ */ new Map();
+    for (const t of n)
+      r.has(t.group) || (r.set(t.group, []), e.push(t.group)), r.get(t.group).push(t);
+    return e.map((t) => ({ group: t, items: r.get(t) }));
+  }, [n]), u = n[c];
+  o.useEffect(() => {
+    x(0);
+  }, [m, a]), o.useEffect(() => {
+    if (!a) return;
+    g.current = document.activeElement, b("");
+    const e = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const r = requestAnimationFrame(() => {
+      var t;
+      return (t = v.current) == null ? void 0 : t.focus();
+    });
+    return () => {
+      var t, l;
+      document.body.style.overflow = e, cancelAnimationFrame(r), (l = (t = g.current) == null ? void 0 : t.focus) == null || l.call(t);
+    };
+  }, [a]), o.useEffect(() => {
+    var e, r;
+    !a || !u || (r = (e = y.current) == null ? void 0 : e.querySelector(`[data-index="${c}"]`)) == null || r.scrollIntoView({ block: "nearest" });
+  }, [a, u, c]);
+  const w = (e) => {
+    i(!1), R(e);
+  }, I = (e) => {
+    e.key === "Escape" ? (e.preventDefault(), i(!1)) : e.key === "ArrowDown" ? (e.preventDefault(), x((r) => Math.min(r + 1, n.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), x((r) => Math.max(r - 1, 0))) : e.key === "Enter" && u && (e.preventDefault(), w(u));
+  };
+  return a ? S(
+    /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]", children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          "aria-hidden": !0,
+          className: "absolute inset-0 bg-overlay",
+          onClick: () => i(!1)
+        }
+      ),
+      /* @__PURE__ */ d(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": D,
+          className: k(
+            "relative flex w-full max-w-lg flex-col overflow-hidden",
+            "rounded-xl bg-elevated text-foreground shadow-elevation",
+            E
+          ),
+          onKeyDown: I,
+          children: [
+            /* @__PURE__ */ d("div", { className: "flex items-center gap-2.5 px-4 py-3", children: [
+              /* @__PURE__ */ s(q, { "aria-hidden": !0, className: "size-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ s(
+                "input",
+                {
+                  ref: v,
+                  role: "combobox",
+                  "aria-expanded": "true",
+                  "aria-controls": f,
+                  "aria-activedescendant": u ? `${f}-${c}` : void 0,
+                  "aria-autocomplete": "list",
+                  value: m,
+                  onChange: (e) => b(e.target.value),
+                  placeholder: $,
+                  className: "w-full bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(
+              "div",
+              {
+                ref: y,
+                id: f,
+                role: "listbox",
+                "aria-label": "Results",
+                className: "max-h-80 overflow-y-auto p-1.5 pt-0",
+                children: n.length === 0 ? /* @__PURE__ */ s("p", { className: "px-2.5 py-6 text-center text-xs text-muted-foreground", children: A }) : M.map(({ group: e, items: r }) => /* @__PURE__ */ d("div", { role: "group", "aria-label": e, children: [
+                  e && /* @__PURE__ */ s("div", { className: "px-2.5 pb-1 pt-2.5 text-xs font-medium text-muted-foreground select-none", children: e }),
+                  r.map((t) => {
+                    const l = n.indexOf(t), N = l === c;
+                    return /* @__PURE__ */ d(
+                      "div",
+                      {
+                        id: `${f}-${l}`,
+                        "data-index": l,
+                        role: "option",
+                        "aria-selected": N,
+                        onPointerMove: () => x(l),
+                        onClick: () => w(t),
+                        className: k(
+                          "flex cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs",
+                          N ? "bg-fill text-foreground" : "text-secondary"
+                        ),
+                        children: [
+                          t.icon && /* @__PURE__ */ s(
+                            "span",
+                            {
+                              "aria-hidden": !0,
+                              className: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-4",
+                              children: t.icon
+                            }
+                          ),
+                          /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
+                          t.hint && /* @__PURE__ */ s("span", { className: "shrink-0 text-xs text-tertiary", children: t.hint })
+                        ]
+                      },
+                      t.id
+                    );
+                  })
+                ] }, e ?? "__ungrouped"))
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    document.body
+  ) : null;
+}
+export {
+  _ as CommandPalette
+};

package/components/drawer.d.ts

@@ -14,7 +14,7 @@ export interface DrawerProps extends VariantProps<typeof panelVariants> {
 }
 /**
  * ModalDrawer — legacy portaled drawer. Kept for the demo product's
- * answer-sources / citation-preview / voice-campaigns screens where a blocking
+ * answer-sources / voice-campaigns screens where a blocking
  * side panel over the whole viewport is the intended pattern. New code should
  * prefer `Drawer` (the inline variant) — it doesn't leave the page while it's
  * open, so users can keep referencing content beside it.

package/components/file-dropzone.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+/**
+ * FileDropzone — the drop-or-browse target for file input. ADS previously had
+ * no file primitive at all, so every upload surface hand-rolled a hidden
+ * `<input type="file">`.
+ *
+ * A dashed edge is the one sanctioned stroke here: it is the affordance
+ * ("something goes in this hole"), not decoration. The zone is actionable, so
+ * it takes hover, focus and press feedback; while a file is dragged over it
+ * the fill deepens rather than the stroke thickening, so nothing jumps.
+ */
+declare const fileDropzoneVariants: (props?: ({
+    isDragging?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FileDropzoneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onDrop" | "onChange"> {
+    /** Native accept string, e.g. `"image/*,.csv"`. */
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    /** Fires with the chosen files, whether dropped or browsed. */
+    onFiles?: (files: File[]) => void;
+    /** The current selection — render the chosen state and a clear control. */
+    files?: File[];
+    onClear?: () => void;
+    /** Headline copy; defaults to a browse prompt. */
+    label?: React.ReactNode;
+    /** Sub-line, e.g. "CSV up to 10 MB". */
+    hint?: React.ReactNode;
+}
+export declare const FileDropzone: React.ForwardRefExoticComponent<FileDropzoneProps & React.RefAttributes<HTMLDivElement>>;
+export { fileDropzoneVariants };

package/components/file-dropzone.js

@@ -0,0 +1,134 @@
+"use client";
+import { jsxs as t, jsx as r, Fragment as f } from "react/jsx-runtime";
+import * as i from "react";
+import { cva as C } from "class-variance-authority";
+import { cn as v } from "../lib/cn.js";
+import { Button as D } from "./button.js";
+import { FileText as R, Close as B, Upload as w } from "../lib/icons.js";
+const T = C(
+  v(
+    "flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl px-6 py-8 text-center",
+    "border-2 border-dashed border-border-strong bg-surface outline-none",
+    "transition-[background-color,border-color,transform] duration-(--duration-fast) ease-out",
+    "hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring",
+    "active:scale-(--scale-press) motion-reduce:transition-none"
+  ),
+  {
+    variants: {
+      isDragging: {
+        true: "border-ring bg-accent",
+        false: ""
+      },
+      isDisabled: {
+        true: "pointer-events-none opacity-50",
+        false: ""
+      }
+    },
+    defaultVariants: { isDragging: !1, isDisabled: !1 }
+  }
+), j = (a) => a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${Math.round(a / 1024)} KB` : `${(a / (1024 * 1024)).toFixed(1)} MB`, $ = i.forwardRef(
+  ({
+    className: a,
+    accept: b,
+    multiple: c = !1,
+    disabled: n = !1,
+    onFiles: l,
+    files: s,
+    onClear: g,
+    label: N,
+    hint: p,
+    ...y
+  }, z) => {
+    const m = i.useRef(null), [h, d] = i.useState(!1), o = i.useRef(0), x = (e) => {
+      e != null && e.length && (l == null || l(c ? Array.from(e) : [e[0]]));
+    }, u = () => {
+      var e;
+      return (e = m.current) == null ? void 0 : e.click();
+    }, k = !!(s != null && s.length);
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: z,
+        "data-slot": "file-dropzone",
+        "data-dragging": h || void 0,
+        role: "button",
+        tabIndex: n ? -1 : 0,
+        "aria-disabled": n || void 0,
+        onClick: u,
+        onKeyDown: (e) => {
+          (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u());
+        },
+        onDragEnter: (e) => {
+          e.preventDefault(), o.current += 1, d(!0);
+        },
+        onDragOver: (e) => e.preventDefault(),
+        onDragLeave: () => {
+          o.current -= 1, o.current <= 0 && (o.current = 0, d(!1));
+        },
+        onDrop: (e) => {
+          e.preventDefault(), o.current = 0, d(!1), n || x(e.dataTransfer.files);
+        },
+        className: v(
+          T({ isDragging: h, isDisabled: n }),
+          a
+        ),
+        ...y,
+        children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: m,
+              hidden: !0,
+              type: "file",
+              accept: b,
+              multiple: c,
+              disabled: n,
+              onChange: (e) => {
+                x(e.currentTarget.files), e.currentTarget.value = "";
+              }
+            }
+          ),
+          k ? /* @__PURE__ */ t(f, { children: [
+            /* @__PURE__ */ r("span", { "aria-hidden": !0, className: "text-tertiary [&>svg]:size-6", children: /* @__PURE__ */ r(R, {}) }),
+            /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s.map((e) => /* @__PURE__ */ t("span", { className: "text-base text-foreground", children: [
+              e.name,
+              /* @__PURE__ */ r("span", { className: "ml-2 text-xs text-tertiary tabular-nums", children: j(e.size) })
+            ] }, e.name)) }),
+            /* @__PURE__ */ t("div", { className: "mt-1 flex items-center gap-2", children: [
+              /* @__PURE__ */ r(D, { size: "sm", variant: "secondary", onClick: (e) => {
+                e.stopPropagation(), u();
+              }, children: "Replace" }),
+              g && /* @__PURE__ */ r(
+                D,
+                {
+                  size: "sm",
+                  variant: "ghost",
+                  startContent: /* @__PURE__ */ r(B, {}),
+                  onClick: (e) => {
+                    e.stopPropagation(), g();
+                  },
+                  children: "Clear"
+                }
+              )
+            ] })
+          ] }) : /* @__PURE__ */ t(f, { children: [
+            /* @__PURE__ */ r("span", { "aria-hidden": !0, className: "text-tertiary [&>svg]:size-6", children: /* @__PURE__ */ r(w, {}) }),
+            /* @__PURE__ */ r("span", { className: "text-base text-foreground", children: N ?? /* @__PURE__ */ t(f, { children: [
+              "Drop ",
+              c ? "files" : "a file",
+              " here, or",
+              " ",
+              /* @__PURE__ */ r("span", { className: "underline underline-offset-4", children: "browse" })
+            ] }) }),
+            p && /* @__PURE__ */ r("span", { className: "text-xs text-tertiary", children: p })
+          ] })
+        ]
+      }
+    );
+  }
+);
+$.displayName = "FileDropzone";
+export {
+  $ as FileDropzone,
+  T as fileDropzoneVariants
+};

package/components/index.d.ts

@@ -3,11 +3,18 @@ export { interactive, type InteractiveProps } from '../lib/interactive';
 export { TooltipProvider } from './ui/tooltip';
 export * from './button';
 export * from './spinner';
+export * from './reveal';
 export * from './field';
 export * from './typography';
 export * from './link';
 export * from './divider';
 export * from './kbd';
+export * from './code-block';
+export * from './setting-row';
+export * from './file-dropzone';
+export * from './scroll-area';
+export * from './stepper';
+export * from './resizable-panel';
 export * from './input';
 export * from './input-field';
 export * from './textarea';
@@ -20,6 +27,7 @@ export * from './autocomplete';
 export * from './slider';
 export * from './segmented';
 export * from './modal';
+export * from './command-palette';
 export * from './drawer';
 export * from './popover';
 export * from './tooltip';
@@ -30,6 +38,7 @@ export * from './card';
 export * from './carousel';
 export * from './chart';
 export * from './connector-card';
+export * from './infinite-canvas';
 export * from './table';
 export * from './tabs';
 export * from './tree';
@@ -41,10 +50,12 @@ export * from './timeline';
 export * from './alert';
 export * from './brand-loader';
 export * from './pixel-blast-svg';
+export * from './brand-texture';
 export * from './progress';
 export * from './progress-circle';
 export * from './skeleton';
 export * from './empty-state';
+export * from './page-header';
 export * from './navbar';
 export * from './breadcrumbs';
 export * from './pagination';