@actioneer/ads 0.5.3 → 0.5.5

package/components/chip.js

@@ -5,7 +5,7 @@ import { cva as u } from "class-variance-authority";
 import { Close as m } from "../lib/icons.js";
 import { cn as o } from "../lib/cn.js";
 const b = u(
-  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap",
+  "inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-normal whitespace-nowrap",
   {
     variants: {
       variant: {
@@ -26,7 +26,7 @@ const b = u(
     compoundVariants: [
       // solid
       { variant: "solid", color: "default", className: "bg-fill text-fill-foreground" },
-      { variant: "solid", color: "primary", className: "bg-brand text-brand-foreground" },
+      { variant: "solid", color: "primary", className: "bg-foreground text-background" },
       { variant: "solid", color: "success", className: "bg-success text-success-foreground" },
       { variant: "solid", color: "warning", className: "bg-warning text-warning-foreground" },
       { variant: "solid", color: "danger", className: "bg-danger text-danger-foreground" },
@@ -50,7 +50,7 @@ const b = u(
   }
 ), p = {
   default: "bg-muted-foreground",
-  primary: "bg-brand",
+  primary: "bg-foreground",
   success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",

package/components/code-block.d.ts

@@ -5,38 +5,60 @@ import * as React from "react";
  * 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.
+ * Ported from Geist's CodeBlock composition, then adapted to ADS tokens and
+ * component conventions. Code is passed as a string child, line numbers are
+ * visible by default, a filename turns on the toolbar, and highlighted / added
+ * / removed lines are authored through dedicated props.
+ *
+ * The default block uses an unfilled, outlined toolbar above a white, outlined
+ * source surface; the toolbar's bottom stroke separates the two. It stays
+ * static and never elevated (elevation means actionable). 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.
+ * one of a few small built-in grammars (sql, json, yaml, bash, ts/js). Comments
+ * and punctuation recede, keywords take weight, and every other token stays
+ * neutral. An unrecognised language renders plain rather than guessing. No
+ * highlighter library and no syntax rainbow competing with the source.
  */
 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;
+interface CodeBlockBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof codeBlockVariants> {
     /**
-     * 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.
+     * Syntax grammar: sql · json · yaml · yml · bash/sh/shell/zsh ·
+     * ts/tsx/js/jsx. Unknown languages render verbatim rather than guessing.
      */
     language?: string;
-    /** Leading header label, e.g. `schema.yaml`. Takes the header's start slot. */
+    /** A paste destination such as `app/page.tsx`; turns on the toolbar. */
     filename?: string;
     /** Show the copy control. */
     isCopyable?: boolean;
-    /** Number the lines in a non-selectable gutter. */
+    /** Hide the default line-number gutter. Mirrors Geist's public API. */
+    hideLineNumbers?: boolean;
+    /** @deprecated Line numbers are on by default; use `hideLineNumbers`. */
     showLineNumbers?: boolean;
+    /** One-based lines to emphasize as the subject under discussion. */
+    highlightedLinesNumbers?: number[];
+    /** One-based lines introduced by a change. */
+    addedLinesNumbers?: number[];
+    /** One-based lines removed by a change. */
+    removedLinesNumbers?: number[];
     /** Accessible label for the copy control. */
     copyLabel?: string;
 }
+/**
+ * Geist-compatible content uses a string child. The former `code` prop remains
+ * as a deprecated compatibility path so existing ADS consumers do not break.
+ */
+export type CodeBlockProps = CodeBlockBaseProps & ({
+    children: string;
+    code?: never;
+} | {
+    /** @deprecated Pass the source as `<CodeBlock>{code}</CodeBlock>`. */
+    code: string;
+    children?: never;
+});
 export declare const CodeBlock: React.ForwardRefExoticComponent<CodeBlockProps & React.RefAttributes<HTMLDivElement>>;
 export { codeBlockVariants };

package/components/code-block.js

@@ -1,29 +1,29 @@
 "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(
+import { jsxs as v, jsx as o } from "react/jsx-runtime";
+import * as s from "react";
+import { cva as _ } from "class-variance-authority";
+import { Button as L } from "./button.js";
+import { Code as q, Check as I, Copy as Z } from "../lib/icons.js";
+import { cn as u } from "../lib/cn.js";
+const G = _(
   // `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. */
+        /** Outlined toolbar + white outlined source surface — both unfilled. */
+        soft: "bg-transparent",
+        /** Keeps the toolbar stroke but drops the source fill/outer stroke. */
         plain: "bg-transparent"
       }
     },
     defaultVariants: { variant: "soft" }
   }
-), f = '"(?:[^"\\\\\\n]|\\\\.)*"', h = "'(?:[^'\\\\\\n]|\\\\.)*'", T = {
+), b = '"(?:[^"\\\\\\n]|\\\\.)*"', y = "'(?:[^'\\\\\\n]|\\\\.)*'", Q = {
   sql: [
     { kind: "comment", re: /--[^\n]*/y },
-    { kind: "string", re: new RegExp(h, "y") },
+    { kind: "string", re: new RegExp(y, "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
@@ -32,35 +32,37 @@ const j = C(
     { kind: "punct", re: /[(),;]/y }
   ],
   json: [
-    { kind: "string", re: new RegExp(f, "y") },
+    { kind: "string", re: new RegExp(b, "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: "string", re: new RegExp(`${b}|${y}`, "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: "string", re: new RegExp(`${b}|${y}`, "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: "string", re: new RegExp(`${b}|${y}|\`(?:[^\`\\\\]|\\\\.)*\``, "y") },
+    { kind: "tag", re: /<\/?[A-Za-z][\w.-]*/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: "function", re: /\b[A-Za-z_$][\w$]*(?=\s*\()/y },
     { kind: "number", re: /\b\d+(?:\.\d+)?\b/y },
-    { kind: "punct", re: /[{}[\]();,:]/y }
+    { kind: "punct", re: /[{}[\]();,:<>/=]/y }
   ]
-}, A = {
+}, V = {
   sql: "sql",
   json: "json",
   yaml: "yaml",
@@ -75,152 +77,199 @@ const j = C(
   jsx: "ts",
   javascript: "ts",
   typescript: "ts"
-}, $ = {
+}, D = {
   comment: "text-tertiary",
-  string: "text-success-700",
-  number: "text-info-700",
-  keyword: "font-bold text-foreground",
+  string: "text-foreground",
+  number: "text-foreground",
+  keyword: "font-semibold text-foreground",
+  function: "font-medium text-foreground",
+  tag: "font-medium text-foreground",
   punct: "text-tertiary"
 };
-function B(s, t) {
-  const e = [];
-  let n = "", o = 0;
-  for (; o < s.length; ) {
+function F(a, t) {
+  const n = [];
+  let e = "", r = 0;
+  for (; r < a.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 };
+    for (const { kind: g, re: m } of t) {
+      m.lastIndex = r;
+      const l = m.exec(a);
+      if (l && l.index === r && l[0].length > 0) {
+        i = { text: l[0], kind: g };
         break;
       }
     }
-    i ? (n && (e.push({ text: n }), n = ""), e.push(i), o += i.text.length) : (n += s[o], o += 1);
+    i ? (e && (n.push({ text: e }), e = ""), n.push(i), r += i.text.length) : (e += a[r], r += 1);
   }
-  return n && e.push({ text: n }), e;
+  return e && n.push({ text: e }), n;
 }
-function z(s) {
+function H(a) {
   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 });
+  for (const n of a)
+    n.text.split(`
+`).forEach((r, i) => {
+      i > 0 && t.push([]), r && t[t.length - 1].push({ ...n, text: r });
     });
   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 K(a) {
+  return a.map(
+    (t, n) => t.kind ? /* @__PURE__ */ o("span", { className: D[t.kind], children: t.text }, n) : /* @__PURE__ */ o(s.Fragment, { children: t.text }, n)
   );
 }
-function M(s = 2e3) {
-  const [t, e] = c.useState(!1), n = c.useRef(null);
-  c.useEffect(
+function O(a = 2e3) {
+  const [t, n] = s.useState(!1), e = s.useRef(null);
+  s.useEffect(
     () => () => {
-      n.current !== null && window.clearTimeout(n.current);
+      e.current !== null && window.clearTimeout(e.current);
     },
     []
   );
-  const o = c.useCallback(
+  const r = s.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
+          n(!0), e.current !== null && window.clearTimeout(e.current), e.current = window.setTimeout(
+            () => n(!1),
+            a
           );
         },
         () => {
         }
       );
     },
-    [s]
+    [a]
   );
-  return { isCopied: t, copy: o };
+  return { isCopied: t, copy: r };
 }
-const _ = c.forwardRef(
+const J = s.forwardRef(
   ({
-    className: s,
-    code: t,
+    className: a,
+    children: t,
+    code: n,
     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,
+    filename: r,
+    variant: i,
+    isCopyable: g = !0,
+    hideLineNumbers: m = !1,
+    showLineNumbers: l,
+    highlightedLinesNumbers: C,
+    addedLinesNumbers: N,
+    removedLinesNumbers: R,
+    copyLabel: E = "Copy code",
+    ...j
+  }, A) => {
+    const { isCopied: x, copy: $ } = O(), k = t ?? n ?? "", w = !!r, S = l ?? !m, z = s.useMemo(
+      () => new Set(C ?? []),
+      [C]
+    ), M = s.useMemo(
+      () => new Set(N ?? []),
+      [N]
+    ), T = s.useMemo(
+      () => new Set(R ?? []),
+      [R]
+    ), B = s.useMemo(() => {
+      const f = e ? Q[V[e.toLowerCase()]] : void 0, h = k.replace(/\n$/, "");
+      return H(f ? F(h, f) : [{ text: h }]);
+    }, [k, e]), p = g ? /* @__PURE__ */ o(
+      L,
       {
         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 })
+        "aria-label": x ? "Copied" : E,
+        onClick: () => $(k),
+        children: x ? /* @__PURE__ */ o(I, { "aria-hidden": !0, className: "text-foreground" }) : /* @__PURE__ */ o(Z, { "aria-hidden": !0 })
       }
     ) : null;
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ v(
       "div",
       {
-        ref: v,
+        ref: A,
         "data-slot": "code-block",
-        className: k(j({ variant: o }), s),
-        ...l,
+        "data-variant": i ?? "soft",
+        className: u(G({ variant: i }), a),
+        ...j,
         children: [
-          /* @__PURE__ */ r("span", { "aria-live": "polite", className: "sr-only", children: x ? "Copied to clipboard" : "" }),
-          b && /* @__PURE__ */ m(
+          /* @__PURE__ */ o("span", { "aria-live": "polite", className: "sr-only", children: x ? "Copied to clipboard" : "" }),
+          w && /* @__PURE__ */ v(
             "div",
             {
               "data-slot": "code-block-header",
-              className: "flex items-center gap-2 px-3 py-1.5 text-tertiary",
+              className: "flex min-h-10 items-center gap-2 rounded-t-lg border border-border px-4 py-2 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 })
+                /* @__PURE__ */ o(q, { "aria-hidden": !0, className: "size-4 shrink-0" }),
+                /* @__PURE__ */ o("span", { className: "min-w-0 truncate font-normal text-secondary", children: r }),
+                p && /* @__PURE__ */ o("span", { className: "ml-auto shrink-0", children: p })
               ]
             }
           ),
-          !b && p && /* @__PURE__ */ r(
+          !w && p && /* @__PURE__ */ o(
             "span",
             {
-              className: k(
-                "absolute top-1.5 right-1.5 z-10 opacity-0 transition-opacity duration-(--duration-fast) ease-out",
+              className: u(
+                "absolute top-2 right-2 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(
+          /* @__PURE__ */ o(
             "pre",
             {
               "data-slot": "code-block-content",
-              className: k(
+              className: u(
                 // 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"
+                "min-h-0 overflow-auto bg-card leading-relaxed text-foreground tabular-nums",
+                w ? "rounded-b-lg border-x border-b border-border py-3" : "rounded-lg border border-border py-4",
+                i === "plain" && "border-transparent bg-transparent"
               ),
-              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)) })
+              children: /* @__PURE__ */ o(
+                "code",
+                {
+                  "data-slot": "code-block-code",
+                  className: "block w-max min-w-full font-mono",
+                  "data-language": e,
+                  children: B.map((f, h) => {
+                    const c = h + 1, d = M.has(c) ? "added" : T.has(c) ? "removed" : z.has(c) ? "highlighted" : void 0;
+                    return /* @__PURE__ */ v(
+                      "span",
+                      {
+                        "data-slot": "code-block-line",
+                        "data-line": c,
+                        "data-line-state": d,
+                        className: u(
+                          "grid min-h-5 min-w-full px-4",
+                          S ? "grid-cols-[3ch_minmax(0,1fr)] gap-3" : "grid-cols-[minmax(0,1fr)]",
+                          d === "highlighted" && "bg-info-50",
+                          d === "added" && "bg-fill font-medium",
+                          d === "removed" && "bg-danger-50"
+                        ),
+                        children: [
+                          S && /* @__PURE__ */ o(
+                            "span",
+                            {
+                              "aria-hidden": !0,
+                              "data-slot": "code-block-line-number",
+                              className: u(
+                                "select-none text-right text-tertiary",
+                                d === "highlighted" && "text-info-700",
+                                d === "added" && "font-semibold text-foreground",
+                                d === "removed" && "text-danger-700"
+                              ),
+                              children: c
+                            }
+                          ),
+                          /* @__PURE__ */ o("span", { children: K(f) })
+                        ]
+                      },
+                      c
+                    );
+                  })
+                }
+              )
             }
           )
         ]
@@ -228,8 +277,8 @@ const _ = c.forwardRef(
     );
   }
 );
-_.displayName = "CodeBlock";
+J.displayName = "CodeBlock";
 export {
-  _ as CodeBlock,
-  j as codeBlockVariants
+  J as CodeBlock,
+  G as codeBlockVariants
 };

package/components/command-palette.js

@@ -1,22 +1,23 @@
 "use client";
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { jsxs as d, jsx as a } 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,
+import { Ripple as C } from "./ripple.js";
+const F = (s, i) => `${s.label} ${s.keywords ?? ""}`.toLowerCase().includes(i);
+function L({
+  open: s,
   onOpenChange: i,
   items: p,
   onSelect: R,
   placeholder: $ = "Search…",
   emptyLabel: A = "No results",
   "aria-label": D = "Global search",
-  filter: h = C,
+  filter: h = F,
   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 f = o.useId(), v = o.useRef(null), g = o.useRef(null), y = 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(() => {
@@ -27,9 +28,9 @@ function _({
   }, [n]), u = n[c];
   o.useEffect(() => {
     x(0);
-  }, [m, a]), o.useEffect(() => {
-    if (!a) return;
-    g.current = document.activeElement, b("");
+  }, [m, s]), o.useEffect(() => {
+    if (!s) return;
+    y.current = document.activeElement, b("");
     const e = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     const r = requestAnimationFrame(() => {
@@ -38,20 +39,20 @@ function _({
     });
     return () => {
       var t, l;
-      document.body.style.overflow = e, cancelAnimationFrame(r), (l = (t = g.current) == null ? void 0 : t.focus) == null || l.call(t);
+      document.body.style.overflow = e, cancelAnimationFrame(r), (l = (t = y.current) == null ? void 0 : t.focus) == null || l.call(t);
     };
-  }, [a]), o.useEffect(() => {
+  }, [s]), 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]);
+    !s || !u || (r = (e = g.current) == null ? void 0 : e.querySelector(`[data-index="${c}"]`)) == null || r.scrollIntoView({ block: "nearest" });
+  }, [s, 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(
+  return s ? S(
     /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]", children: [
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ a(
         "div",
         {
           "aria-hidden": !0,
@@ -72,9 +73,10 @@ function _({
           ),
           onKeyDown: I,
           children: [
+            /* @__PURE__ */ a(C, { origin: "top" }),
             /* @__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(
+              /* @__PURE__ */ a(q, { "aria-hidden": !0, className: "size-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ a(
                 "input",
                 {
                   ref: v,
@@ -90,16 +92,16 @@ function _({
                 }
               )
             ] }),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ a(
               "div",
               {
-                ref: y,
+                ref: g,
                 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 }),
+                children: n.length === 0 ? /* @__PURE__ */ a("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__ */ a("div", { className: "px-2.5 pb-1 pt-2.5 text-xs font-normal text-muted-foreground select-none", children: e }),
                   r.map((t) => {
                     const l = n.indexOf(t), N = l === c;
                     return /* @__PURE__ */ d(
@@ -116,7 +118,7 @@ function _({
                           N ? "bg-fill text-foreground" : "text-secondary"
                         ),
                         children: [
-                          t.icon && /* @__PURE__ */ s(
+                          t.icon && /* @__PURE__ */ a(
                             "span",
                             {
                               "aria-hidden": !0,
@@ -124,8 +126,8 @@ function _({
                               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 })
+                          /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
+                          t.hint && /* @__PURE__ */ a("span", { className: "shrink-0 text-xs text-tertiary", children: t.hint })
                         ]
                       },
                       t.id
@@ -142,5 +144,5 @@ function _({
   ) : null;
 }
 export {
-  _ as CommandPalette
+  L as CommandPalette
 };

package/components/connector-card.js

@@ -95,7 +95,7 @@ const v = h.forwardRef(
         ] }),
         /* @__PURE__ */ t(N, { strip: e.strip })
       ] }),
-      /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3 rounded-b-xl bg-muted px-[var(--card-padding)] py-3", children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3 rounded-b-xl bg-ink-100 px-[var(--card-padding)] py-3", children: [
         /* @__PURE__ */ t(
           "span",
           {
@@ -110,7 +110,7 @@ const v = h.forwardRef(
           "span",
           {
             className: o(
-              "inline-flex shrink-0 items-center gap-0.5 text-xs font-medium",
+              "inline-flex shrink-0 items-center gap-0.5 text-xs font-normal",
               f ? "text-danger" : "text-foreground"
             ),
             children: [