@arcadeai/design-system 3.33.2 → 3.34.0

package/dist/components/ui/atoms/json-highlight.d.ts

@@ -0,0 +1,60 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps, NamedExoticComponent } from 'react';
+import { ClassProp } from 'class-variance-authority/types';
+declare const jsonHighlightVariants: (props?: ({
+    theme?: "default" | "branded" | "monochrome" | null | undefined;
+} & ClassProp) | undefined) => string;
+type JsonHighlightProps = {
+    code: string;
+} & VariantProps<typeof jsonHighlightVariants> & ComponentProps<"div">;
+/**
+ * Lightweight, synchronous JSON syntax highlighter.
+ *
+ * Uses a single-pass regex tokenizer — **O(n)** over the input string — to
+ * colour keys, strings, numbers, and keywords (true / false / null).
+ *
+ * ## Themes
+ *
+ * Use the `theme` prop to pick a colour preset:
+ *
+ * - `"default"` — amber keys, red strings, teal numbers, green true, red false, gray null.
+ * - `"branded"` — uses design system tokens (chart-2, chart-1, warning, success, destructive).
+ * - `"monochrome"` — foreground keys, muted values (for subdued contexts).
+ *
+ * ## Customising individual colours
+ *
+ * Token colours are CSS custom properties. Override any via `className`:
+ *
+ * | Variable     | Token        |
+ * | ------------ | ------------ |
+ * | `--jh-key`   | Object keys  |
+ * | `--jh-str`   | Strings      |
+ * | `--jh-num`   | Numbers      |
+ * | `--jh-true`  | `true`       |
+ * | `--jh-false` | `false`      |
+ * | `--jh-null`  | `null`       |
+ *
+ * ```tsx
+ * <JsonHighlight
+ *   code={json}
+ *   className="[--jh-str:#2563eb] dark:[--jh-str:#93c5fd]"
+ * />
+ * ```
+ *
+ * ## When to use this over `CodeBlockCode`
+ *
+ * - The content is **always JSON** (no multi-language support needed).
+ * - The component appears in a **hot path** where Shiki's WASM bundle
+ *   (~695 KB gzipped) and async initialisation would cause visible lag.
+ * - You need **synchronous first-paint** (no loading flash).
+ *
+ * ## When to prefer `CodeBlockCode` (Shiki)
+ *
+ * - The language is not JSON, or can vary at runtime.
+ * - You need advanced features like line numbers or line highlighting.
+ * - The code block renders once in a non-latency-critical context.
+ */
+declare const JsonHighlight: NamedExoticComponent<JsonHighlightProps>;
+export { JsonHighlight, jsonHighlightVariants };
+export type { JsonHighlightProps };
+//# sourceMappingURL=json-highlight.d.ts.map

package/dist/components/ui/atoms/json-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-highlight.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/atoms/json-highlight.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,KAAK,cAAc,EAAiB,MAAM,OAAO,CAAC;AAyD3D,QAAA,MAAM,qBAAqB;;8EAiC1B,CAAC;AAeF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,cAAc,CAAC,KAAK,CAAC,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,aAAa,0DA8BjB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/ui/atoms/json-highlight.js

@@ -0,0 +1,77 @@
+import { jsx as l } from "react/jsx-runtime";
+import { c } from "../../../index-UgeK3A8s.js";
+import { memo as m, useMemo as j } from "react";
+import { cn as p } from "../../../lib/utils.js";
+const x = /("(?:[^"\\]|\\.)*")\s*(?=:)|("(?:[^"\\]|\\.)*")|\b(true)\b|\b(false)\b|\b(null)\b|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
+function v(s) {
+  const e = [];
+  let a = 0;
+  for (const o of s.matchAll(x)) {
+    const t = o.index;
+    t > a && e.push(s.slice(a, t));
+    const [n, r, u, h, f, d, i] = o;
+    r ? e.push({ type: "key", text: r, offset: t }) : u ? e.push({ type: "str", text: u, offset: t }) : h ? e.push({ type: "true", text: h, offset: t }) : f ? e.push({ type: "false", text: f, offset: t }) : d ? e.push({ type: "null", text: d, offset: t }) : i && e.push({ type: "num", text: i, offset: t }), a = t + n.length;
+  }
+  return a < s.length && e.push(s.slice(a)), e;
+}
+const g = c(
+  "w-full overflow-x-auto text-[13px] text-foreground/90",
+  {
+    variants: {
+      theme: {
+        default: [
+          "[--jh-key:#8a6c14] dark:[--jh-key:#b8a965]",
+          "[--jh-str:#a8453a] dark:[--jh-str:#c98a7d]",
+          "[--jh-num:#0f766e] dark:[--jh-num:#4c9a91]",
+          "[--jh-true:#2f6e4e] dark:[--jh-true:#4d9375]",
+          "[--jh-false:#a8453a] dark:[--jh-false:#c98a7d]",
+          "[--jh-null:#71717a] dark:[--jh-null:#a1a1aa]"
+        ],
+        branded: [
+          "[--jh-key:var(--chart-2)]",
+          "[--jh-str:var(--chart-1)]",
+          "[--jh-num:var(--warning)]",
+          "[--jh-true:var(--success)]",
+          "[--jh-false:var(--destructive)]",
+          "[--jh-null:var(--color-muted-foreground)]"
+        ],
+        monochrome: [
+          "[--jh-key:var(--color-foreground)]",
+          "[--jh-str:var(--color-muted-foreground)]",
+          "[--jh-num:var(--color-muted-foreground)]",
+          "[--jh-true:var(--color-muted-foreground)]",
+          "[--jh-false:var(--color-muted-foreground)]",
+          "[--jh-null:var(--color-muted-foreground)]"
+        ]
+      }
+    },
+    defaultVariants: { theme: "default" }
+  }
+), k = {
+  key: "text-[var(--jh-key)]",
+  str: "text-[var(--jh-str)]",
+  num: "text-[var(--jh-num)]",
+  true: "text-[var(--jh-true)]",
+  false: "text-[var(--jh-false)]",
+  null: "text-[var(--jh-null)]"
+}, E = m(function({
+  code: e,
+  theme: a,
+  className: o,
+  ...t
+}) {
+  const n = j(() => v(e), [e]);
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: p(g({ theme: a }), o),
+      "data-slot": "json-highlight",
+      ...t,
+      children: /* @__PURE__ */ l("pre", { className: "wrap-break-word max-w-full whitespace-pre-wrap p-3 font-mono leading-relaxed", children: /* @__PURE__ */ l("code", { children: n.map((r) => typeof r == "string" ? r : /* @__PURE__ */ l("span", { className: k[r.type], children: r.text }, r.offset)) }) })
+    }
+  );
+});
+export {
+  E as JsonHighlight,
+  g as jsonHighlightVariants
+};

package/dist/components/ui/atoms/scroll-button.js

@@ -1,4 +1,4 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { ChevronDown as s } from "lucide-react";
 import { Button as c } from "./button.js";
 import { Tooltip as m, TooltipTrigger as p, TooltipContent as u } from "./tooltip.js";
@@ -10,28 +10,28 @@ function y({
   size: n = "sm",
   ...e
 }) {
-  const { isAtBottom: t, scrollToBottom: i } = h();
+  const { isAtBottom: o, scrollToBottom: i } = h();
   return /* @__PURE__ */ a(m, { children: [
-    /* @__PURE__ */ o(p, { asChild: !0, children: /* @__PURE__ */ o(
+    /* @__PURE__ */ t(p, { asChild: !0, children: /* @__PURE__ */ t(
       c,
       {
-        "aria-hidden": t,
+        "aria-hidden": o,
         "aria-label": "Scroll to bottom",
         className: d(
           "h-10 w-10 rounded-full transition-all duration-150 ease-out",
-          t ? "pointer-events-none translate-y-4 scale-95 opacity-0" : "translate-y-0 scale-100 opacity-100",
+          o ? "pointer-events-none translate-y-4 scale-95 opacity-0" : "translate-y-0 scale-100 opacity-100",
           r
         ),
         "data-slot": "scroll-button",
         onClick: () => i(),
         size: n,
-        tabIndex: t ? -1 : 0,
+        tabIndex: o ? -1 : 0,
         variant: l,
         ...e,
-        children: /* @__PURE__ */ o(s, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ t(s, { className: "h-5 w-5" })
       }
     ) }),
-    /* @__PURE__ */ o(u, { children: "Scroll to bottom" })
+    !o && /* @__PURE__ */ t(u, { children: "Scroll to bottom" })
   ] });
 }
 export {

package/dist/components/ui/atoms/view-tools-control.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export type ViewToolsControlProps = {
     toolsCount: number;
     selectedCount?: number;
@@ -7,7 +8,6 @@ export type ViewToolsControlProps = {
     name: string;
 };
 declare function ViewToolsControlImpl({ toolsCount, selectedCount, indeterminate, onClick, className, name, }: ViewToolsControlProps): import("react/jsx-runtime").JSX.Element;
-import * as React from "react";
 export declare const ViewToolsControl: React.MemoExoticComponent<typeof ViewToolsControlImpl>;
 export {};
 //# sourceMappingURL=view-tools-control.d.ts.map

package/dist/components/ui/atoms/view-tools-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"view-tools-control.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/atoms/view-tools-control.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAaF,iBAAS,oBAAoB,CAAC,EAC5B,UAAU,EACV,aAAiB,EACjB,aAAa,EACb,OAAO,EACP,SAAS,EACT,IAAI,GACL,EAAE,qBAAqB,2CAmBvB;AAED,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,gBAAgB,wDAU5B,CAAC"}
+{"version":3,"file":"view-tools-control.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/atoms/view-tools-control.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAaF,iBAAS,oBAAoB,CAAC,EAC5B,UAAU,EACV,aAAiB,EACjB,aAAa,EACb,OAAO,EACP,SAAS,EACT,IAAI,GACL,EAAE,qBAAqB,2CAoBvB;AAED,eAAO,MAAM,gBAAgB,wDAU5B,CAAC"}

package/dist/components/ui/atoms/view-tools-control.js

@@ -1,29 +1,30 @@
-import { jsxs as e, jsx as l } from "react/jsx-runtime";
+import { jsxs as e, jsx as m } from "react/jsx-runtime";
 import { ChevronRight as c } from "lucide-react";
-import { Button as p } from "./button.js";
-import { cn as f } from "../../../lib/utils.js";
-import * as u from "react";
-import { createPropsComparator as g } from "../utils/memo.js";
-function x(o, t = 0, r) {
+import * as p from "react";
+import { Button as f } from "./button.js";
+import { createPropsComparator as u } from "../utils/memo.js";
+import { cn as d } from "../../../lib/utils.js";
+function g(o, t = 0, r) {
   return r && t > 0 ? `${t}/${o}` : String(o);
 }
-function b({
+function x({
   toolsCount: o,
   selectedCount: t = 0,
   indeterminate: r,
   onClick: n,
-  className: i,
-  name: a
+  className: a,
+  name: i
 }) {
-  const s = x(o, t, r);
+  const s = g(o, t, r);
   return /* @__PURE__ */ e(
-    p,
+    f,
     {
-      "aria-label": `View tools in ${a}`,
-      className: f("gap-1", i),
+      "aria-label": `View tools in ${i}`,
+      className: d("gap-1", a),
+      "data-slot": "view-tools-control",
       "data-testid": "view-tools",
-      onClick: (m) => {
-        m.stopPropagation(), n();
+      onClick: (l) => {
+        l.stopPropagation(), n();
       },
       size: "sm",
       variant: "outline",
@@ -32,14 +33,14 @@ function b({
           s,
           " tools"
         ] }),
-        /* @__PURE__ */ l(c, { className: "size-3.5 transition-transform group-hover:translate-x-0.5" })
+        /* @__PURE__ */ m(c, { className: "size-3.5 transition-transform group-hover:translate-x-0.5" })
       ]
     }
   );
 }
-const N = u.memo(
-  b,
-  g([
+const N = p.memo(
+  x,
+  u([
     "toolsCount",
     "selectedCount",
     "indeterminate",