@candor-ui/react 1.0.1 → 1.3.0

package/dist/lib/highlight.js

@@ -0,0 +1,224 @@
+/**
+ * A small syntax highlighter for code an agent shows: it splits text into typed tokens (keyword, string, comment…),
+ * and Payload renders each as a span. The output is text, never HTML, so nothing in the code can run or inject markup.
+ * It covers the languages agents show most (JS/TS, Python, SQL, JSON, shell, YAML, CSS, HTML/XML, Go, Rust, Java, C)
+ * in a few kilobytes; anything else comes back as one plain token.
+ */
+const words = (s) => new Set(s.split(" "));
+const js = words("abstract as async await break case catch class const continue debugger default delete do else enum export extends false finally for from function get if implements import in instanceof interface let new null of private protected public readonly return satisfies set static super switch this throw true try type typeof undefined var void while with yield");
+const c = words("auto break case char const continue default do double else enum extern float for goto if int long register return short signed sizeof static struct switch typedef union unsigned void volatile while true false null NULL");
+const grammars = {
+    js: { line: ["//"], block: [["/*", "*/"]], strings: ['"', "'", "`"], keywords: js },
+    python: {
+        line: ["#"],
+        strings: ['"""', "'''", '"', "'"],
+        keywords: words("and as assert async await break class continue def del elif else except False finally for from global if import in is lambda None nonlocal not or pass raise return True try while with yield match case self"),
+    },
+    sql: {
+        line: ["--"],
+        block: [["/*", "*/"]],
+        strings: ["'", '"'],
+        caseless: true,
+        keywords: words("select from where and or not in is null as join left right inner outer full cross on group by order having limit offset insert into values update set delete create table alter drop index view distinct union all case when then else end asc desc count sum avg min max interval like between exists primary key foreign references default with returning true false coalesce cast"),
+    },
+    json: { strings: ['"'], keywords: words("true false null"), properties: "json" },
+    bash: {
+        line: ["#"],
+        strings: ['"', "'"],
+        variables: true,
+        keywords: words("if then else elif fi for while until do done case esac in function return export local readonly set unset echo cd exit source alias sudo npm npx git curl"),
+    },
+    yaml: { line: ["#"], strings: ['"', "'"], keywords: words("true false null yes no on off"), properties: "yaml" },
+    css: { block: [["/*", "*/"]], strings: ['"', "'"], keywords: words("important inherit initial unset none auto") },
+    html: { block: [["<!--", "-->"]], strings: ['"', "'"], keywords: new Set(), markup: true },
+    go: {
+        line: ["//"],
+        block: [["/*", "*/"]],
+        strings: ['"', "`", "'"],
+        keywords: words("break case chan const continue default defer else fallthrough for func go goto if import interface map package range return select struct switch type var nil true false"),
+    },
+    rust: {
+        line: ["//"],
+        block: [["/*", "*/"]],
+        strings: ['"'],
+        keywords: words("as async await break const continue crate dyn else enum extern false fn for if impl in let loop match mod move mut pub ref return self Self static struct super trait true type unsafe use where while"),
+    },
+    java: {
+        line: ["//"],
+        block: [["/*", "*/"]],
+        strings: ['"', "'"],
+        keywords: words("abstract boolean break byte case catch char class const continue default do double else enum extends final finally float for if implements import instanceof int interface long new null package private protected public return short static super switch this throw throws true false try void while var"),
+    },
+    c: { line: ["//"], block: [["/*", "*/"]], strings: ['"', "'"], keywords: c },
+};
+const aliases = {
+    javascript: "js", jsx: "js", ts: "js", tsx: "js", typescript: "js", mjs: "js", cjs: "js",
+    py: "python",
+    sh: "bash", shell: "bash", zsh: "bash", console: "bash",
+    yml: "yaml",
+    xml: "html", svg: "html",
+    golang: "go", rs: "rust", kotlin: "java", cpp: "c", "c++": "c", h: "c", csharp: "java", cs: "java",
+    postgres: "sql", postgresql: "sql", mysql: "sql", sqlite: "sql",
+};
+/** Whether `language` has a grammar here. */
+export function canHighlight(language) {
+    const l = language.toLowerCase();
+    return Boolean(grammars[aliases[l] ?? l]);
+}
+/** Long payloads stay plain: highlighting them would cost more than it helps. */
+const MAX = 50_000;
+/** The text split into typed tokens; their texts joined give back the input exactly. */
+export function tokenize(text, language) {
+    const l = language.toLowerCase();
+    const g = grammars[aliases[l] ?? l];
+    if (!g || text.length > MAX)
+        return [{ type: "plain", text }];
+    const out = [];
+    const push = (type, t) => {
+        if (!t)
+            return;
+        const last = out[out.length - 1];
+        if (last && last.type === type)
+            last.text += t;
+        else
+            out.push({ type, text: t });
+    };
+    let i = 0;
+    let lineStart = true;
+    let inTag = false;
+    while (i < text.length) {
+        const rest = text.slice(i);
+        const ch = text[i];
+        // Comments.
+        const line = g.line?.find((m) => rest.startsWith(m) && !(g.variables && m === "#" && i > 0 && /\S/.test(text[i - 1])));
+        if (line && !inTag) {
+            const end = text.indexOf("\n", i);
+            const stop = end < 0 ? text.length : end;
+            push("comment", text.slice(i, stop));
+            i = stop;
+            continue;
+        }
+        const block = g.block?.find(([open]) => rest.startsWith(open));
+        if (block && !inTag) {
+            const end = text.indexOf(block[1], i + block[0].length);
+            const stop = end < 0 ? text.length : end + block[1].length;
+            push("comment", text.slice(i, stop));
+            i = stop;
+            continue;
+        }
+        // Markup: tag names, attributes, then attribute values as strings.
+        if (g.markup) {
+            const open = /^<\/?([A-Za-z][\w:.-]*)/.exec(rest);
+            if (!inTag && open) {
+                push("operator", rest.startsWith("</") ? "</" : "<");
+                push("tag", open[1]);
+                i += open[0].length;
+                inTag = true;
+                continue;
+            }
+            if (inTag) {
+                const close = /^\/?>/.exec(rest);
+                if (close) {
+                    push("operator", close[0]);
+                    i += close[0].length;
+                    inTag = false;
+                    continue;
+                }
+                const attr = /^[A-Za-z_:][\w:.-]*/.exec(rest);
+                if (attr) {
+                    push("property", attr[0]);
+                    i += attr[0].length;
+                    continue;
+                }
+            }
+            else {
+                // Text between tags.
+                const next = text.indexOf("<", i + 1);
+                const stop = next < 0 ? text.length : next;
+                push("plain", text.slice(i, stop));
+                i = stop;
+                continue;
+            }
+        }
+        // Strings (with backslash escapes), and JSON's property names.
+        const quote = (!g.markup || inTag) && g.strings.find((q) => rest.startsWith(q));
+        if (quote) {
+            let j = i + quote.length;
+            while (j < text.length && !text.startsWith(quote, j)) {
+                if (text[j] === "\\")
+                    j++;
+                else if (quote.length === 1 && quote !== "`" && text[j] === "\n")
+                    break;
+                j++;
+            }
+            const stop = Math.min(text.length, j + (text.startsWith(quote, j) ? quote.length : 0));
+            const s = text.slice(i, stop);
+            push(g.properties === "json" && /^\s*:/.test(text.slice(stop)) ? "property" : "string", s);
+            i = stop;
+            lineStart = false;
+            continue;
+        }
+        // YAML keys at the start of a line (after indentation or "- ").
+        if (g.properties === "yaml" && lineStart) {
+            const key = /^([ \t]*(?:- )?)([\w.-][\w .-]*?)(\s*:)(?=\s|$)/.exec(rest);
+            if (key) {
+                push("plain", key[1]);
+                push("property", key[2]);
+                push("operator", key[3]);
+                i += key[0].length;
+                lineStart = false;
+                continue;
+            }
+        }
+        // Shell variables.
+        if (g.variables && ch === "$") {
+            const v = /^\$(\{[^}\n]*\}|[A-Za-z_]\w*|[0-9@#?*!$-])/.exec(rest);
+            if (v) {
+                push("variable", v[0]);
+                i += v[0].length;
+                lineStart = false;
+                continue;
+            }
+        }
+        // Numbers.
+        const num = /^(?:0x[\da-fA-F_]+|\d[\d_]*(?:\.\d+)?(?:[eE][+-]?\d+)?)/.exec(rest);
+        if (num && (i === 0 || !/[\w$]/.test(text[i - 1]))) {
+            push("number", num[0]);
+            i += num[0].length;
+            lineStart = false;
+            continue;
+        }
+        // Words: keywords, calls, types.
+        const word = /^[A-Za-z_$][\w$]*/.exec(rest);
+        if (word) {
+            const w = word[0];
+            const after = text.slice(i + w.length);
+            const type = (g.caseless ? g.keywords.has(w.toLowerCase()) : g.keywords.has(w))
+                ? "keyword"
+                : /^\s*\(/.test(after) && !g.properties
+                    ? "function"
+                    : /^[A-Z][a-z]/.test(w) && !g.caseless && !g.properties && grammars.css !== g
+                        ? "type"
+                        : "plain";
+            push(type, w);
+            i += w.length;
+            lineStart = false;
+            continue;
+        }
+        if (ch === "\n") {
+            push("plain", ch);
+            lineStart = true;
+            i++;
+            continue;
+        }
+        if (/\s/.test(ch)) {
+            push("plain", ch);
+            i++;
+            continue;
+        }
+        push(/[=+\-*/%<>!&|^~?:]/.test(ch) ? "operator" : "plain", ch);
+        lineStart = false;
+        i++;
+    }
+    return out;
+}

package/dist/lib/status.d.ts

@@ -5,7 +5,22 @@
  * map an SDK's parts onto them.
  */
 export type RunStatus = "idle" | "queued" | "running" | "waiting" | "blocked" | "succeeded" | "failed" | "cancelled" | "skipped";
+/** Status words; override them under `status` in LocaleProvider's `strings`. */
+export declare const statusStrings: {
+    idle: string;
+    queued: string;
+    running: string;
+    waiting: string;
+    blocked: string;
+    succeeded: string;
+    failed: string;
+    cancelled: string;
+    skipped: string;
+};
+/** English status labels. Kept for compatibility; components use `useStatusLabel()` so they follow the locale. */
 export declare const statusLabel: Record<RunStatus, string>;
+/** A status's label in the current locale: `const label = useStatusLabel(); label("running")`. */
+export declare function useStatusLabel(): (status: RunStatus) => string;
 /** The Badge variant that carries each status. */
 export declare const statusTone: {
     readonly idle: "outline";

package/dist/lib/status.js

@@ -1,4 +1,6 @@
-export const statusLabel = {
+import { useStrings } from "../blocks/locale.js";
+/** Status words; override them under `status` in LocaleProvider's `strings`. */
+export const statusStrings = {
     idle: "Not started",
     queued: "Queued",
     running: "Running",
@@ -9,6 +11,13 @@ export const statusLabel = {
     cancelled: "Cancelled",
     skipped: "Skipped",
 };
+/** English status labels. Kept for compatibility; components use `useStatusLabel()` so they follow the locale. */
+export const statusLabel = statusStrings;
+/** A status's label in the current locale: `const label = useStatusLabel(); label("running")`. */
+export function useStatusLabel() {
+    const t = useStrings("status", statusStrings);
+    return t;
+}
 /** The Badge variant that carries each status. */
 export const statusTone = {
     idle: "outline",

package/dist/lib/use-virtual-list.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+/** What to render, in order: an item by its index, or a spacer standing in for the items between. */
+export type VirtualRow = {
+    index: number;
+} | {
+    spacer: number;
+    key: string;
+};
+export type VirtualList = {
+    /** The items to render and the spacers between them, in order. */
+    rows: VirtualRow[];
+    /** The ref for every rendered item, which also carries `data-virtual-key={key}`, so its real height is measured and kept. */
+    measure: (el: HTMLElement | null) => void | (() => void);
+};
+/**
+ * Render only the items of a long list that are in or near view, for Thread's and SessionList's `virtualize`.
+ * Items keep their measured heights by key, so a list that grows or reorders keeps its place; unmeasured items count
+ * as `estimate`. Spacers stand in for the rest. `pin` (an item's key) keeps that item rendered (the one holding
+ * focus), on its own if it's far from view, so focus is never lost to an item scrolling away. Until the scroller is
+ * measured (on the server, on the first render in the browser, and while it's hidden) the first or last `initial`
+ * items render, by `anchor`, so server and browser agree.
+ *
+ * Give each rendered item `ref={list.measure}` and `data-virtual-key={key}`.
+ */
+export declare function useVirtualList({ enabled, count, keyOf, scroller, estimate, overscan, initial, anchor, gap, pin, }: {
+    enabled: boolean;
+    count: number;
+    keyOf: (index: number) => React.Key;
+    scroller: React.RefObject<HTMLElement | null>;
+    estimate?: number;
+    overscan?: number;
+    initial?: number;
+    /** Which end to show before the scroller is measured: "end" for a thread (newest last), "start" for a list. Defaults to "end". */
+    anchor?: "start" | "end";
+    /** The gap between items, in pixels, read once the scroller is measured (e.g. from the list's computed `row-gap`). */
+    gap?: () => number;
+    /** The key of an item to keep rendered, such as the one holding focus. */
+    pin?: string | null;
+}): VirtualList;

package/dist/lib/use-virtual-list.js

@@ -0,0 +1,124 @@
+import * as React from "react";
+const keyAttr = "data-virtual-key";
+/**
+ * Render only the items of a long list that are in or near view, for Thread's and SessionList's `virtualize`.
+ * Items keep their measured heights by key, so a list that grows or reorders keeps its place; unmeasured items count
+ * as `estimate`. Spacers stand in for the rest. `pin` (an item's key) keeps that item rendered (the one holding
+ * focus), on its own if it's far from view, so focus is never lost to an item scrolling away. Until the scroller is
+ * measured (on the server, on the first render in the browser, and while it's hidden) the first or last `initial`
+ * items render, by `anchor`, so server and browser agree.
+ *
+ * Give each rendered item `ref={list.measure}` and `data-virtual-key={key}`.
+ */
+export function useVirtualList({ enabled, count, keyOf, scroller, estimate = 96, overscan = 800, initial = 20, anchor = "end", gap = () => 0, pin, }) {
+    const [heights, setHeights] = React.useState(() => new Map());
+    const [viewport, setViewport] = React.useState(null);
+    const gapOf = React.useRef(gap);
+    React.useLayoutEffect(() => {
+        gapOf.current = gap;
+    });
+    // One observer for the rendered items, made when the first one mounts; a changed height re-renders.
+    const observer = React.useRef(null);
+    React.useEffect(() => () => {
+        observer.current?.disconnect();
+        observer.current = null;
+    }, []);
+    const measure = React.useCallback((el) => {
+        if (!el)
+            return;
+        if (typeof ResizeObserver !== "undefined")
+            observer.current ??= new ResizeObserver((entries) => {
+                const found = entries.flatMap((e) => {
+                    const key = e.target.getAttribute(keyAttr);
+                    const h = e.target.offsetHeight;
+                    return key !== null && h > 0 ? [[key, h]] : [];
+                });
+                if (found.length)
+                    setHeights((prev) => (found.every(([k, h]) => prev.get(k) === h) ? prev : new Map([...prev, ...found])));
+            });
+        const ro = observer.current;
+        ro?.observe(el);
+        const key = el.getAttribute(keyAttr);
+        const h = el.offsetHeight;
+        if (key !== null && h > 0)
+            setHeights((prev) => (prev.get(key) === h ? prev : new Map(prev).set(key, h)));
+        // An item that unmounts stops being observed, so it can be collected.
+        return () => ro?.unobserve(el);
+    }, []);
+    React.useLayoutEffect(() => {
+        const el = scroller.current;
+        if (!enabled || !el)
+            return;
+        const pending = { frame: 0 };
+        const read = () => {
+            pending.frame = 0;
+            const g = gapOf.current();
+            setViewport((v) => (v && v.top === el.scrollTop && v.height === el.clientHeight && v.gap === g ? v : { top: el.scrollTop, height: el.clientHeight, gap: g }));
+        };
+        const later = () => {
+            if (!pending.frame)
+                pending.frame = requestAnimationFrame(read);
+        };
+        read();
+        el.addEventListener("scroll", later, { passive: true });
+        const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(later);
+        ro?.observe(el);
+        return () => {
+            el.removeEventListener("scroll", later);
+            ro?.disconnect();
+            cancelAnimationFrame(pending.frame);
+        };
+    }, [enabled, scroller]);
+    if (!enabled)
+        return { rows: Array.from({ length: count }, (_, index) => ({ index })), measure };
+    const g = viewport?.gap ?? 0;
+    const size = (i) => heights.get(String(keyOf(i))) ?? estimate;
+    const tops = [];
+    let y = 0;
+    for (let i = 0; i < count; i++) {
+        tops.push(y);
+        y += size(i) + g;
+    }
+    const total = Math.max(0, y - g);
+    let start;
+    let end;
+    if (!viewport || viewport.height === 0) {
+        start = anchor === "end" ? Math.max(0, count - initial) : 0;
+        end = anchor === "end" ? count : Math.min(count, initial);
+    }
+    else {
+        const lo = viewport.top - overscan;
+        const hi = viewport.top + viewport.height + overscan;
+        start = 0;
+        while (start < count - 1 && tops[start] + size(start) < lo)
+            start++;
+        end = start;
+        while (end < count && tops[end] <= hi)
+            end++;
+        end = Math.max(end, Math.min(count, start + 1));
+    }
+    // The pinned item and its neighbours (so Tab and Shift+Tab reach the next and previous item) render with the window,
+    // or on their own between spacers when they're far from it.
+    let ranges = [[start, end]];
+    const p = pin == null ? -1 : Array.from({ length: count }, (_, i) => i).find((i) => String(keyOf(i)) === pin) ?? -1;
+    if (p >= 0) {
+        const island = [Math.max(0, p - 1), Math.min(count, p + 2)];
+        ranges = island[1] < start ? [island, [start, end]] : island[0] > end ? [[start, end], island] : [[Math.min(start, island[0]), Math.max(end, island[1])]];
+    }
+    // A spacer stands where its items were; the gaps the layout puts beside it account for theirs.
+    const rows = [];
+    let prevEnd = 0;
+    for (const [a, b] of ranges) {
+        if (a > 0) {
+            const height = prevEnd === 0 ? tops[a] - g : tops[a] - (tops[prevEnd - 1] + size(prevEnd - 1)) - 2 * g;
+            if (a > prevEnd)
+                rows.push({ spacer: Math.max(0, height), key: `spacer-${prevEnd}` });
+        }
+        for (let i = a; i < b; i++)
+            rows.push({ index: i });
+        prevEnd = b;
+    }
+    if (prevEnd < count)
+        rows.push({ spacer: Math.max(0, total - tops[prevEnd]), key: `spacer-${prevEnd}` });
+    return { rows, measure };
+}

package/dist/styles.css

@@ -15,7 +15,7 @@
 
 /*
  * Candor's default colours. GENERATED by scripts/theme.mjs from its data,
- * after checking every text/ground pairing for contrast (40 pairings in
+ * after checking every text/ground pairing for contrast (44 pairings in
  * each of 3 themes); edit there, not here.
  * Light is the default; dark and high contrast follow data-theme, and the
  * system setting when no data-theme is set.
@@ -237,6 +237,10 @@
  * To restyle, override the roles after this file: colours by their shadcn names
  * (--primary, --background…), everything else by its --cd-* name. A brand theme
  * is just such a file.
+ *
+ * Density: data-density="compact" on <html> (or any container) tightens type for
+ * dense apps: 14px conversation text and 13px body and label text, with a narrower
+ * thread and sidebar.
  */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
@@ -256,6 +260,8 @@
   --cd-text-3xl: 1.75rem;
   --cd-text-4xl: 2rem;
   --cd-text-5xl: 2.5rem;
+  /* Conversation text: messages and the composer. */
+  --cd-text-prose: var(--cd-text-md);
   --cd-tracking-body: -0.011em;
   --cd-weight-heading: 620;
 
@@ -278,6 +284,10 @@
   --cd-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
   --cd-ease-spring: linear(0, 0.4 15%, 0.7 30%, 1 50%, 0.95 65%, 1.02 80%, 1 100%);
 
+  /* The message column's width, and the app sidebar's. (Not --sidebar-width: shadcn's SidebarProvider sets that.) */
+  --cd-thread-width: 48rem;
+  --cd-sidebar-width: 16rem;
+
   --radius: var(--cd-radius-lg);
 
   --sidebar: var(--chrome);
@@ -298,6 +308,14 @@
 [data-theme="dark"] {
   --cd-shadow: oklch(0 0 0 / 0.35);
 }
+
+/* The compact preset. Prose is pinned, since by default it follows --cd-text-md, which this shrinks. */
+[data-density="compact"] {
+  --cd-text-prose: 0.875rem;
+  --cd-text-md: 0.8125rem;
+  --cd-thread-width: 44rem;
+  --cd-sidebar-width: 14rem;
+}
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     --cd-shadow: oklch(0 0 0 / 0.35);
@@ -317,6 +335,8 @@
   --text-sm--line-height: 1.25rem;
   --text-base: var(--cd-text-md);
   --text-base--line-height: 1.375rem;
+  --text-prose: var(--cd-text-prose);
+  --text-prose--line-height: 1.375rem;
   --text-lg: var(--cd-text-lg);
   --text-lg--line-height: 1.5rem;
   --text-xl: var(--cd-text-xl);
@@ -426,6 +446,25 @@
   to { visibility: hidden; }
 }
 
+/*
+ * Syntax colours for Payload's tokens: on under data-syntax="highlight" (on <html> for the whole app, or a Payload's
+ * own `highlight`), off again under data-syntax="off". Only text roles that pass contrast on the sunken well are used.
+ */
+[data-syntax="highlight"] [data-token="keyword"] { color: var(--accent-text); }
+[data-syntax="highlight"] [data-token="function"] { color: var(--accent-text); font-weight: 500; }
+[data-syntax="highlight"] [data-token="string"] { color: var(--success-text); }
+[data-syntax="highlight"] [data-token="comment"] { color: var(--muted-foreground); font-style: italic; }
+[data-syntax="highlight"] :is([data-token="number"], [data-token="variable"]) { color: var(--attention-text); }
+[data-syntax="highlight"] :is([data-token="property"], [data-token="tag"], [data-token="type"]) { color: var(--warning-text); }
+[data-syntax="off"] [data-token] { color: inherit; font-style: inherit; font-weight: inherit; }
+/* A Payload's own `highlight` wins over an "off" around it. */
+[data-slot="payload"][data-syntax="highlight"] [data-token="keyword"] { color: var(--accent-text); }
+[data-slot="payload"][data-syntax="highlight"] [data-token="function"] { color: var(--accent-text); font-weight: 500; }
+[data-slot="payload"][data-syntax="highlight"] [data-token="string"] { color: var(--success-text); }
+[data-slot="payload"][data-syntax="highlight"] [data-token="comment"] { color: var(--muted-foreground); font-style: italic; }
+[data-slot="payload"][data-syntax="highlight"] :is([data-token="number"], [data-token="variable"]) { color: var(--attention-text); }
+[data-slot="payload"][data-syntax="highlight"] :is([data-token="property"], [data-token="tag"], [data-token="type"]) { color: var(--warning-text); }
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.001ms !important;

package/dist/ui/button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { type RenderProp } from "../lib/render-prop.js";
 declare const buttonVariants: (props?: ({
-    variant?: "outline" | "secondary" | "destructive" | "link" | "default" | "ghost" | null | undefined;
+    variant?: "link" | "outline" | "secondary" | "destructive" | "default" | "ghost" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button(allProps: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "1.0.1",
+  "version": "1.3.0",
   "description": "Candor UI's free tier as an npm package: React components for agents that do real work, on shadcn/ui and Tailwind 4.",
   "license": "MIT",
   "author": "Methodic LLC",