@actioneer/ads 0.2.4 → 0.3.1

package/components/brand-texture.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../lib/cn.js";
+import { PixelBlastSVG as s } from "./pixel-blast-svg.js";
+function l({
+  paused: t = !1,
+  speed: a = 1.5,
+  className: r
+}) {
+  return /* @__PURE__ */ e("div", { className: i("size-full bg-background", r), children: /* @__PURE__ */ e(
+    s,
+    {
+      variant: "custom",
+      color: "var(--color-ink-950)",
+      pixelSize: 4,
+      speed: a,
+      patternScale: 3,
+      patternDensity: 1.8,
+      pixelSizeJitter: 0.5,
+      enableRipples: !1,
+      liquid: !1,
+      toneAmount: 0,
+      edgeFade: 0.25,
+      transparent: !0,
+      paused: t
+    }
+  ) });
+}
+const o = ({
+  paused: t,
+  lifted: a,
+  speed: r = 1.5,
+  className: n,
+  ...d
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "aria-hidden": !0,
+    "data-slot": "brand-texture",
+    className: i(
+      "ads-texture-reveal ads-texture-lift pointer-events-none absolute inset-0 overflow-hidden",
+      a ? "ads-texture-lifted opacity-0" : "opacity-(--chat-texture-opacity)",
+      n
+    ),
+    ...d,
+    children: /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ e(l, { paused: t, speed: r }) })
+  }
+);
+o.displayName = "BrandTexture";
+l.displayName = "BrandTextureField";
+export {
+  o as BrandTexture,
+  l as BrandTextureField
+};

package/components/code-block.d.ts

@@ -0,0 +1,42 @@
+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.
+ *
+ * Highlighting is deliberately minimal and dependency-free: `language` selects
+ * one of a few small built-in grammars (sql, json, yaml, bash, ts/js) and only
+ * the parts a reader scans for are coloured — comments recede, strings and
+ * numbers take one accent each, keywords take weight. An unrecognised language
+ * renders plain rather than guessing. No highlighter library, and no rainbow
+ * competing with the brand's monochrome.
+ */
+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`. Also selects the highlighting
+     * grammar: sql · json · yaml · yml · bash/sh/shell/zsh · ts/tsx/js/jsx.
+     * Anything else is shown as a label and rendered plain.
+     */
+    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,235 @@
+"use client";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import * as c from "react";
+import { cva as C } from "class-variance-authority";
+import { Button as R } from "./button.js";
+import { Check as E, Copy as S } from "../lib/icons.js";
+import { cn as k } from "../lib/cn.js";
+const j = C(
+  // `flex flex-col` so a height cap from the consumer squeezes the <pre>
+  // rather than clipping it — the pre is the scroll container, not this.
+  "group/code-block relative flex w-full flex-col 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" }
+  }
+), f = '"(?:[^"\\\\\\n]|\\\\.)*"', h = "'(?:[^'\\\\\\n]|\\\\.)*'", T = {
+  sql: [
+    { kind: "comment", re: /--[^\n]*/y },
+    { kind: "string", re: new RegExp(h, "y") },
+    {
+      kind: "keyword",
+      re: /\b(select|from|where|create|table|index|concurrently|on|and|or|not|null|group|by|order|limit|offset|insert|into|values|update|set|delete|join|left|right|inner|outer|full|as|distinct|case|when|then|else|end|with|union|all|desc|asc|true|false|count|sum|avg|min|max|having)\b/iy
+    },
+    { kind: "number", re: /\b\d+(?:\.\d+)?\b/y },
+    { kind: "punct", re: /[(),;]/y }
+  ],
+  json: [
+    { kind: "string", re: new RegExp(f, "y") },
+    { kind: "keyword", re: /\b(?:true|false|null)\b/y },
+    { kind: "number", re: /-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/y },
+    { kind: "punct", re: /[{}[\],:]/y }
+  ],
+  yaml: [
+    { kind: "comment", re: /#[^\n]*/y },
+    { kind: "string", re: new RegExp(`${f}|${h}`, "y") },
+    { kind: "keyword", re: /\b(?:true|false|null|yes|no)\b/y },
+    { kind: "number", re: /\b\d+(?:\.\d+)?\b/y },
+    { kind: "punct", re: /[-:]/y }
+  ],
+  bash: [
+    { kind: "comment", re: /#[^\n]*/y },
+    { kind: "string", re: new RegExp(`${f}|${h}`, "y") },
+    { kind: "keyword", re: /--?[A-Za-z][\w-]*/y },
+    { kind: "number", re: /\b\d+\b/y }
+  ],
+  ts: [
+    { kind: "comment", re: /\/\/[^\n]*|\/\*[\s\S]*?\*\//y },
+    { kind: "string", re: new RegExp(`${f}|${h}|\`(?:[^\`\\\\]|\\\\.)*\``, "y") },
+    {
+      kind: "keyword",
+      re: /\b(?:const|let|var|function|return|if|else|for|while|import|from|export|default|new|class|extends|implements|async|await|type|interface|enum|public|private|readonly|true|false|null|undefined|this)\b/y
+    },
+    { kind: "number", re: /\b\d+(?:\.\d+)?\b/y },
+    { kind: "punct", re: /[{}[\]();,:]/y }
+  ]
+}, A = {
+  sql: "sql",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  bash: "bash",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  ts: "ts",
+  tsx: "ts",
+  js: "ts",
+  jsx: "ts",
+  javascript: "ts",
+  typescript: "ts"
+}, $ = {
+  comment: "text-tertiary",
+  string: "text-success-700",
+  number: "text-info-700",
+  keyword: "font-bold text-foreground",
+  punct: "text-tertiary"
+};
+function B(s, t) {
+  const e = [];
+  let n = "", o = 0;
+  for (; o < s.length; ) {
+    let i = null;
+    for (const { kind: y, re: u } of t) {
+      u.lastIndex = o;
+      const l = u.exec(s);
+      if (l && l.index === o && l[0].length > 0) {
+        i = { text: l[0], kind: y };
+        break;
+      }
+    }
+    i ? (n && (e.push({ text: n }), n = ""), e.push(i), o += i.text.length) : (n += s[o], o += 1);
+  }
+  return n && e.push({ text: n }), e;
+}
+function z(s) {
+  const t = [[]];
+  for (const e of s)
+    e.text.split(`
+`).forEach((o, i) => {
+      i > 0 && t.push([]), o && t[t.length - 1].push({ ...e, text: o });
+    });
+  return t;
+}
+function g(s) {
+  return s.map(
+    (t, e) => t.kind ? /* @__PURE__ */ r("span", { className: $[t.kind], children: t.text }, e) : /* @__PURE__ */ r(c.Fragment, { children: t.text }, e)
+  );
+}
+function M(s = 2e3) {
+  const [t, e] = c.useState(!1), n = c.useRef(null);
+  c.useEffect(
+    () => () => {
+      n.current !== null && window.clearTimeout(n.current);
+    },
+    []
+  );
+  const o = c.useCallback(
+    (i) => {
+      !i || typeof navigator > "u" || !navigator.clipboard || navigator.clipboard.writeText(i).then(
+        () => {
+          e(!0), n.current !== null && window.clearTimeout(n.current), n.current = window.setTimeout(
+            () => e(!1),
+            s
+          );
+        },
+        () => {
+        }
+      );
+    },
+    [s]
+  );
+  return { isCopied: t, copy: o };
+}
+const _ = c.forwardRef(
+  ({
+    className: s,
+    code: t,
+    language: e,
+    filename: n,
+    variant: o,
+    isCopyable: i = !0,
+    showLineNumbers: y = !1,
+    copyLabel: u = "Copy code",
+    ...l
+  }, v) => {
+    const { isCopied: x, copy: N } = M(), b = !!(n || e), w = c.useMemo(() => {
+      const d = e ? T[A[e.toLowerCase()]] : void 0, a = t.replace(/\n$/, "");
+      return z(d ? B(a, d) : [{ text: a }]);
+    }, [t, e]), p = i ? /* @__PURE__ */ r(
+      R,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-xs",
+        "aria-label": u,
+        onClick: () => N(t),
+        children: x ? /* @__PURE__ */ r(E, { "aria-hidden": !0, className: "text-success" }) : /* @__PURE__ */ r(S, { "aria-hidden": !0 })
+      }
+    ) : null;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: v,
+        "data-slot": "code-block",
+        className: k(j({ variant: o }), s),
+        ...l,
+        children: [
+          /* @__PURE__ */ r("span", { "aria-live": "polite", className: "sr-only", children: x ? "Copied to clipboard" : "" }),
+          b && /* @__PURE__ */ m(
+            "div",
+            {
+              "data-slot": "code-block-header",
+              className: "flex items-center gap-2 px-3 py-1.5 text-tertiary",
+              children: [
+                n && /* @__PURE__ */ r("span", { className: "min-w-0 truncate font-medium text-secondary", children: n }),
+                e && /* @__PURE__ */ r("span", { className: "shrink-0 font-mono text-[11px] uppercase", children: e }),
+                p && /* @__PURE__ */ r("span", { className: "ml-auto shrink-0", children: p })
+              ]
+            }
+          ),
+          !b && p && /* @__PURE__ */ r(
+            "span",
+            {
+              className: k(
+                "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: p
+            }
+          ),
+          /* @__PURE__ */ r(
+            "pre",
+            {
+              "data-slot": "code-block-content",
+              className: k(
+                // min-h-0 lets this shrink inside the flex column; without it a
+                // capped block clips its overflow instead of scrolling to it.
+                "min-h-0 overflow-auto px-3 leading-relaxed text-foreground tabular-nums",
+                b ? "pb-3" : "py-3"
+              ),
+              children: /* @__PURE__ */ r("code", { className: "font-mono", children: y ? w.map((d, a) => /* @__PURE__ */ m("span", { className: "grid grid-cols-[2ch_1fr] gap-3", children: [
+                /* @__PURE__ */ r(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: "select-none text-right text-tertiary",
+                    children: a + 1
+                  }
+                ),
+                /* @__PURE__ */ r("span", { children: g(d) })
+              ] }, a)) : w.map((d, a) => /* @__PURE__ */ m(c.Fragment, { children: [
+                a > 0 && `
+`,
+                g(d)
+              ] }, a)) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_.displayName = "CodeBlock";
+export {
+  _ as CodeBlock,
+  j as codeBlockVariants
+};

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';
@@ -31,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';
@@ -42,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';