@actioneer/ads 0.2.4 → 0.3.0

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,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/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';