@actioneer/ads 0.3.0 → 0.3.1

package/components/alert.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import * as i from "react";
-import { cva as m } from "class-variance-authority";
+import { cva as u } from "class-variance-authority";
 import { Info as l, WarningCircle as g, Warning as p, CheckCircle as x, Close as v } from "../lib/icons.js";
 import { cn as n } from "../lib/cn.js";
-const h = m(
+const h = u(
   "flex w-full items-start gap-4 rounded-2xl bg-muted px-4 py-3",
   {
     variants: {
@@ -25,17 +25,17 @@ const h = m(
   danger: g,
   info: l
 }, N = i.forwardRef(
-  ({ className: r, variant: t = "default", icon: a, onClose: s, children: o, ...c }, d) => {
-    const f = w[t ?? "default"];
-    return /* @__PURE__ */ u(
+  ({ className: t, variant: r = "default", icon: a, onClose: s, children: o, ...c }, d) => {
+    const f = w[r ?? "default"];
+    return /* @__PURE__ */ m(
       "div",
       {
         ref: d,
         role: "alert",
-        className: n(h({ variant: t }), r),
+        className: n(h({ variant: r }), t),
         ...c,
         children: [
-          /* @__PURE__ */ e("span", { className: "flex shrink-0 select-none items-center justify-center p-1 text-(--alert-accent) [&_svg]:size-4", children: a ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
+          /* @__PURE__ */ e("span", { className: "flex shrink-0 select-none items-center justify-center py-1 text-(--alert-accent) [&_svg]:size-4", children: a ?? /* @__PURE__ */ e(f, { "aria-hidden": !0 }) }),
           /* @__PURE__ */ e("div", { className: "flex min-w-0 grow flex-col items-start", children: o }),
           s && /* @__PURE__ */ e(
             "button",
@@ -58,19 +58,31 @@ const h = m(
   }
 );
 N.displayName = "Alert";
-const b = i.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ e(
+const y = i.forwardRef(({ className: t, ...r }, a) => /* @__PURE__ */ e(
   "p",
   {
     ref: a,
-    className: n("text-xs font-medium leading-6 text-(--alert-accent)", r),
-    ...t
+    className: n("text-xs font-medium leading-6 text-(--alert-accent)", t),
+    ...r
   }
 ));
-b.displayName = "AlertTitle";
-const y = i.forwardRef(({ className: r, ...t }, a) => /* @__PURE__ */ e("p", { ref: a, className: n("text-xs text-muted-foreground", r), ...t }));
-y.displayName = "AlertDescription";
+y.displayName = "AlertTitle";
+const b = i.forwardRef(({ className: t, ...r }, a) => (
+  // leading-normal (150%) — the description is the only part of an alert that
+  // regularly wraps, and the text-xs default (138%) sets multi-line copy too
+  // tight to scan.
+  /* @__PURE__ */ e(
+    "p",
+    {
+      ref: a,
+      className: n("text-xs leading-normal text-muted-foreground", t),
+      ...r
+    }
+  )
+));
+b.displayName = "AlertDescription";
 export {
   N as Alert,
-  y as AlertDescription,
-  b as AlertTitle
+  b as AlertDescription,
+  y as AlertTitle
 };

package/components/code-block.d.ts

@@ -10,10 +10,12 @@ import * as React from "react";
  * 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.
+ * 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;
@@ -21,7 +23,11 @@ declare const codeBlockVariants: (props?: ({
 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 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;

package/components/code-block.js

@@ -1,12 +1,14 @@
 "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",
+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: {
@@ -18,110 +20,207 @@ const B = k(
     },
     defaultVariants: { variant: "soft" }
   }
-);
-function T(n = 2e3) {
-  const [o, a] = r.useState(!1), t = r.useRef(null);
-  r.useEffect(
+), 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(
     () => () => {
-      t.current !== null && window.clearTimeout(t.current);
+      n.current !== null && window.clearTimeout(n.current);
     },
     []
   );
-  const c = r.useCallback(
+  const o = c.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
+          e(!0), n.current !== null && window.clearTimeout(n.current), n.current = window.setTimeout(
+            () => e(!1),
+            s
           );
         },
         () => {
         }
       );
     },
-    [n]
+    [s]
   );
-  return { isCopied: o, copy: c };
+  return { isCopied: t, copy: o };
 }
-const R = r.forwardRef(
+const _ = c.forwardRef(
   ({
-    className: n,
-    code: o,
-    language: a,
-    filename: t,
-    variant: c,
+    className: s,
+    code: t,
+    language: e,
+    filename: n,
+    variant: o,
     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,
+    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": h,
-        onClick: () => v(o),
-        children: m ? /* @__PURE__ */ e(w, { "aria-hidden": !0, className: "text-success" }) : /* @__PURE__ */ e(N, { "aria-hidden": !0 })
+        "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__ */ p(
+    return /* @__PURE__ */ m(
       "div",
       {
-        ref: y,
+        ref: v,
         "data-slot": "code-block",
-        className: u(B({ variant: c }), n),
-        ...x,
+        className: k(j({ variant: o }), s),
+        ...l,
         children: [
-          /* @__PURE__ */ e("span", { "aria-live": "polite", className: "sr-only", children: m ? "Copied to clipboard" : "" }),
-          d && /* @__PURE__ */ p(
+          /* @__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: [
-                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 })
+                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 })
               ]
             }
           ),
-          !d && s && /* @__PURE__ */ e(
+          !b && p && /* @__PURE__ */ r(
             "span",
             {
-              className: u(
+              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: s
+              children: p
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ r(
             "pre",
             {
               "data-slot": "code-block-content",
-              className: u(
-                "overflow-x-auto px-3 leading-relaxed text-foreground tabular-nums",
-                d ? "pb-3" : "py-3"
+              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__ */ 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(
+              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: f + 1
+                    children: a + 1
                   }
                 ),
-                /* @__PURE__ */ e("span", { children: g })
-              ] }, f)) : o })
+                /* @__PURE__ */ r("span", { children: g(d) })
+              ] }, a)) : w.map((d, a) => /* @__PURE__ */ m(c.Fragment, { children: [
+                a > 0 && `
+`,
+                g(d)
+              ] }, a)) })
             }
           )
         ]
@@ -129,8 +228,8 @@ const R = r.forwardRef(
     );
   }
 );
-R.displayName = "CodeBlock";
+_.displayName = "CodeBlock";
 export {
-  R as CodeBlock,
-  B as codeBlockVariants
+  _ as CodeBlock,
+  j as codeBlockVariants
 };

package/components/scroll-area.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import * as i from "react";
-import { ScrollArea as a } from "radix-ui";
+import { ScrollArea as e } from "radix-ui";
 import { cn as s } from "../lib/cn.js";
 const m = i.forwardRef(
-  ({ className: e, children: l, orientation: r = "vertical", viewportClassName: t, ...n }, d) => /* @__PURE__ */ f(
-    a.Root,
+  ({ className: a, children: l, orientation: r = "vertical", viewportClassName: t, ...n }, d) => /* @__PURE__ */ f(
+    e.Root,
     {
       ref: d,
       "data-slot": "scroll-area",
-      className: s("relative overflow-hidden", e),
+      className: s("relative overflow-hidden border border-border", a),
       ...n,
       children: [
         /* @__PURE__ */ o(
-          a.Viewport,
+          e.Viewport,
           {
             className: s("size-full rounded-[inherit]", t),
             children: l
@@ -21,14 +21,14 @@ const m = i.forwardRef(
         ),
         (r === "vertical" || r === "both") && /* @__PURE__ */ o(c, { orientation: "vertical" }),
         (r === "horizontal" || r === "both") && /* @__PURE__ */ o(c, { orientation: "horizontal" }),
-        /* @__PURE__ */ o(a.Corner, {})
+        /* @__PURE__ */ o(e.Corner, {})
       ]
     }
   )
 );
 m.displayName = "ScrollArea";
-const c = i.forwardRef(({ className: e, orientation: l = "vertical", ...r }, t) => /* @__PURE__ */ o(
-  a.ScrollAreaScrollbar,
+const c = i.forwardRef(({ className: a, orientation: l = "vertical", ...r }, t) => /* @__PURE__ */ o(
+  e.ScrollAreaScrollbar,
   {
     ref: t,
     orientation: l,
@@ -38,11 +38,11 @@ const c = i.forwardRef(({ className: e, orientation: l = "vertical", ...r }, t)
       "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
       l === "vertical" && "h-full w-2.5",
       l === "horizontal" && "h-2.5 flex-col",
-      e
+      a
     ),
     ...r,
     children: /* @__PURE__ */ o(
-      a.ScrollAreaThumb,
+      e.ScrollAreaThumb,
       {
         "data-slot": "scroll-bar-thumb",
         className: "relative flex-1 rounded-full bg-fill transition-colors duration-(--duration-fast) ease-out hover:bg-border-strong motion-reduce:transition-none"

package/components/sidebar.js

@@ -235,7 +235,7 @@ const B = n.forwardRef(
       className: o("group-data-[collapsed=true]/sidebar:hidden", a),
       ...r,
       children: [
-        e && /* @__PURE__ */ t("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-semibold uppercase tracking-wider text-muted-foreground", children: e }),
+        e && /* @__PURE__ */ t("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-normal uppercase tracking-wider text-muted-foreground", children: e }),
         /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: i })
       ]
     }

package/components/stepper.d.ts

@@ -5,26 +5,34 @@ import * as React from "react";
  *
  * `Progress` is a continuous bar and `Timeline` is a chronological list of
  * content; neither says "step 2 of 5, and here is what 3 through 5 will be".
- * Completed steps collapse to a check so the eye counts what is left, not what
- * is done. The connector is a functional rail, like `Tree`'s — an allowed
- * stroke.
+ * Completed steps collapse to a green check so the eye counts what is left,
+ * not what is done; the current step stays brand-black; a failed step turns
+ * danger and keeps its place in the sequence rather than disappearing — a
+ * wizard that hides the step that broke is unusable.
+ *
+ * One label per step, deliberately: a sub-label under every step is the
+ * redundant chrome design principle 8 warns about.
+ *
+ * Horizontal only. The connector is a functional rail, like `Tree`'s — an
+ * allowed stroke — running the full distance between two markers so the
+ * sequence reads as one continuous line rather than a row of ticks.
  */
-export type StepperStatus = "complete" | "current" | "upcoming";
+export type StepperStatus = "complete" | "current" | "upcoming" | "error";
 export interface StepperStep {
     /** Stable key, also used for the accessible label. */
     id: string;
     label: React.ReactNode;
-    /** Optional qualifier under the label. */
-    description?: React.ReactNode;
+    /** Marks a step that failed. Overrides the index-derived status. */
+    isError?: boolean;
 }
 declare const markerVariants: (props?: ({
-    status?: "current" | "complete" | "upcoming" | null | undefined;
+    status?: "current" | "error" | "complete" | "upcoming" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "onSelect">, VariantProps<typeof markerVariants> {
+export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "onSelect">, Pick<VariantProps<typeof markerVariants>, "size"> {
     steps: StepperStep[];
     /** Zero-based index of the current step. */
     activeIndex: number;
-    orientation?: "horizontal" | "vertical";
     /** Makes completed steps navigable. */
     onSelect?: (index: number) => void;
 }