@candor-ui/react 0.0.0-stage → 1.0.1

package/dist/lib/status.js

@@ -0,0 +1,26 @@
+export const statusLabel = {
+    idle: "Not started",
+    queued: "Queued",
+    running: "Running",
+    waiting: "Needs you",
+    blocked: "Blocked",
+    succeeded: "Done",
+    failed: "Failed",
+    cancelled: "Cancelled",
+    skipped: "Skipped",
+};
+/** The Badge variant that carries each status. */
+export const statusTone = {
+    idle: "outline",
+    queued: "secondary",
+    running: "running",
+    waiting: "warning",
+    blocked: "outline",
+    succeeded: "success",
+    failed: "destructive",
+    cancelled: "outline",
+    skipped: "outline",
+};
+export function isTerminal(status) {
+    return status === "succeeded" || status === "failed" || status === "cancelled" || status === "skipped";
+}

package/dist/lib/use-copy.d.ts

@@ -0,0 +1,10 @@
+export type CopyState = "idle" | "copying" | "copied" | "failed";
+/**
+ * Copy text and report what actually happened. "copied" only after the
+ * clipboard write resolves; a refused write reports "failed" (Candor's honest
+ * copy control: no success signal without a settled outcome).
+ */
+export declare function useCopy(resetAfter?: number): {
+    state: CopyState;
+    copy: (text: string) => Promise<void>;
+};

package/dist/lib/use-copy.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+/**
+ * Copy text and report what actually happened. "copied" only after the
+ * clipboard write resolves; a refused write reports "failed" (Candor's honest
+ * copy control: no success signal without a settled outcome).
+ */
+export function useCopy(resetAfter = 1600) {
+    const [state, setState] = React.useState("idle");
+    const timer = React.useRef(undefined);
+    React.useEffect(() => () => window.clearTimeout(timer.current), []);
+    const copy = React.useCallback(async (text) => {
+        setState("copying");
+        try {
+            await navigator.clipboard.writeText(text);
+            setState("copied");
+        }
+        catch {
+            setState("failed");
+        }
+        window.clearTimeout(timer.current);
+        timer.current = window.setTimeout(() => setState("idle"), resetAfter);
+    }, [resetAfter]);
+    return { state, copy };
+}

package/dist/lib/use-shortcut.d.ts

@@ -0,0 +1,15 @@
+/** True on Apple platforms, where "mod" is ⌘ rather than Ctrl. */
+export declare function isApple(): boolean;
+/**
+ * The keys of a combo as they should be printed: "mod+k" → ["⌘", "K"] on a
+ * Mac and ["Ctrl", "K"] elsewhere.
+ */
+export declare function comboKeys(combo: string): string[];
+/**
+ * Run `handler` when a key combo is pressed anywhere on the page: "mod+k",
+ * "mod+shift+o", "?", "escape". A combo without mod or alt is ignored while
+ * the person is typing in a field, so "?" still types a question mark.
+ */
+export declare function useShortcut(combo: string, handler: (e: KeyboardEvent) => void, { enabled }?: {
+    enabled?: boolean;
+}): void;

package/dist/lib/use-shortcut.js

@@ -0,0 +1,62 @@
+import * as React from "react";
+/** True on Apple platforms, where "mod" is ⌘ rather than Ctrl. */
+export function isApple() {
+    return typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+}
+/**
+ * The keys of a combo as they should be printed: "mod+k" → ["⌘", "K"] on a
+ * Mac and ["Ctrl", "K"] elsewhere.
+ */
+export function comboKeys(combo) {
+    const apple = isApple();
+    const names = {
+        mod: apple ? "⌘" : "Ctrl",
+        shift: apple ? "⇧" : "Shift",
+        alt: apple ? "⌥" : "Alt",
+        enter: "↵",
+        escape: "Esc",
+        up: "↑",
+        down: "↓",
+    };
+    return combo.split("+").map((k) => names[k] ?? (k.length === 1 ? k.toUpperCase() : k));
+}
+function typing(target) {
+    const el = target;
+    return !!el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName));
+}
+/**
+ * Run `handler` when a key combo is pressed anywhere on the page: "mod+k",
+ * "mod+shift+o", "?", "escape". A combo without mod or alt is ignored while
+ * the person is typing in a field, so "?" still types a question mark.
+ */
+export function useShortcut(combo, handler, { enabled = true } = {}) {
+    const latest = React.useRef(handler);
+    React.useEffect(() => {
+        latest.current = handler;
+    });
+    React.useEffect(() => {
+        if (!enabled)
+            return;
+        const parts = combo.toLowerCase().split("+");
+        const key = parts[parts.length - 1];
+        const mod = parts.includes("mod");
+        const shift = parts.includes("shift");
+        const alt = parts.includes("alt");
+        const onKey = (e) => {
+            const modDown = isApple() ? e.metaKey : e.ctrlKey;
+            if (mod !== modDown || alt !== e.altKey)
+                return;
+            // "?" arrives with shift held; only compare shift when the combo names it.
+            if (shift && !e.shiftKey)
+                return;
+            if (e.key.toLowerCase() !== key)
+                return;
+            if (!mod && !alt && typing(e.target))
+                return;
+            e.preventDefault();
+            latest.current(e);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [combo, enabled]);
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/styles.css

@@ -0,0 +1,460 @@
+/*
+ * @candor-ui/react: Candor UI's theme and tokens, for Tailwind CSS 4. MIT, (c) Methodic LLC.
+ * Built from src/styles/candor.css and candor-theme.css; don't edit here.
+ *
+ *   @import "tailwindcss";
+ *   @import "@candor-ui/react/styles.css";
+ *
+ * The @source below makes Tailwind generate the classes the components use, so they're styled even though
+ * Tailwind skips node_modules when it scans your app.
+ */
+@import "@fontsource-variable/inter/opsz.css";
+@import "tw-animate-css";
+
+@source "./**/*.js";
+
+/*
+ * Candor's default colours. GENERATED by scripts/theme.mjs from its data,
+ * after checking every text/ground pairing for contrast (40 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.
+ */
+:root {
+  color-scheme: light;
+  --background: oklch(0.985 0.002 262);
+  --card: oklch(1 0 0);
+  --popover: oklch(1 0 0);
+  --sunken: oklch(0.972 0.003 262);
+  --chrome: oklch(0.976 0.003 262);
+  --muted: oklch(0.955 0.004 262);
+  --accent: oklch(0.945 0.006 262);
+  --foreground: oklch(0.21 0.014 265);
+  --muted-foreground: oklch(0.46 0.016 265);
+  --faint-foreground: oklch(0.52 0.012 265);
+  --border: oklch(0.915 0.005 262);
+  --border-strong: oklch(0.85 0.007 262);
+  --input: oklch(0.62 0.01 262);
+  --ring: oklch(0.55 0.19 262);
+  --primary: oklch(0.53 0.19 262);
+  --primary-foreground: oklch(1 0 0);
+  --primary-hover: oklch(0.48 0.19 262);
+  --accent-weak: oklch(0.95 0.03 262);
+  --accent-text: oklch(0.45 0.18 262);
+  --destructive: oklch(0.55 0.2 27);
+  --destructive-weak: oklch(0.962 0.024 27);
+  --destructive-text: oklch(0.47 0.17 27);
+  --on-destructive: oklch(1 0 0);
+  --warning: oklch(0.77 0.15 75);
+  --warning-weak: oklch(0.968 0.045 90);
+  --warning-text: oklch(0.46 0.1 60);
+  --success: oklch(0.53 0.13 155);
+  --success-weak: oklch(0.962 0.035 155);
+  --success-text: oklch(0.43 0.1 155);
+  --on-success: oklch(1 0 0);
+  --attention: oklch(0.56 0.2 300);
+  --attention-weak: oklch(0.962 0.03 300);
+  --attention-text: oklch(0.47 0.18 300);
+  --surface-agent: oklch(1 0 0);
+  --surface-user: oklch(0.952 0.022 262);
+  --text-provisional: oklch(0.48 0.11 60);
+  --series-1: #2a78d6;
+  --series-2: #eb6834;
+  --series-3: #1baf7a;
+  --series-4: #eda100;
+  --series-5: #e87ba4;
+  --series-6: #008300;
+  --chart-1: var(--series-1);
+  --chart-2: var(--series-2);
+  --chart-3: var(--series-3);
+  --chart-4: var(--series-4);
+  --chart-5: var(--series-5);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --background: oklch(0.16 0.006 265);
+  --card: oklch(0.195 0.007 265);
+  --popover: oklch(0.215 0.008 265);
+  --sunken: oklch(0.14 0.006 265);
+  --chrome: oklch(0.175 0.007 265);
+  --muted: oklch(0.25 0.008 265);
+  --accent: oklch(0.27 0.009 265);
+  --foreground: oklch(0.95 0.004 265);
+  --muted-foreground: oklch(0.74 0.012 265);
+  --faint-foreground: oklch(0.66 0.012 265);
+  --border: oklch(0.285 0.008 265);
+  --border-strong: oklch(0.36 0.01 265);
+  --input: oklch(0.5 0.012 265);
+  --ring: oklch(0.68 0.15 262);
+  --primary: oklch(0.68 0.15 262);
+  --primary-foreground: oklch(0.16 0.02 262);
+  --primary-hover: oklch(0.74 0.13 262);
+  --accent-weak: oklch(0.29 0.06 262);
+  --accent-text: oklch(0.8 0.11 262);
+  --destructive: oklch(0.66 0.19 25);
+  --destructive-weak: oklch(0.28 0.06 25);
+  --destructive-text: oklch(0.8 0.12 25);
+  --on-destructive: oklch(0.16 0.02 25);
+  --warning: oklch(0.8 0.14 80);
+  --warning-weak: oklch(0.29 0.05 75);
+  --warning-text: oklch(0.86 0.11 85);
+  --success: oklch(0.7 0.14 155);
+  --success-weak: oklch(0.27 0.05 155);
+  --success-text: oklch(0.82 0.11 155);
+  --on-success: oklch(0.16 0.02 155);
+  --attention: oklch(0.7 0.16 300);
+  --attention-weak: oklch(0.29 0.06 300);
+  --attention-text: oklch(0.82 0.11 300);
+  --surface-agent: oklch(0.195 0.007 265);
+  --surface-user: oklch(0.27 0.035 262);
+  --text-provisional: oklch(0.84 0.1 75);
+  --series-1: #3987e5;
+  --series-2: #d95926;
+  --series-3: #199e70;
+  --series-4: #c98500;
+  --series-5: #d55181;
+  --series-6: #008300;
+  --chart-1: var(--series-1);
+  --chart-2: var(--series-2);
+  --chart-3: var(--series-3);
+  --chart-4: var(--series-4);
+  --chart-5: var(--series-5);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --background: oklch(0.16 0.006 265);
+    --card: oklch(0.195 0.007 265);
+    --popover: oklch(0.215 0.008 265);
+    --sunken: oklch(0.14 0.006 265);
+    --chrome: oklch(0.175 0.007 265);
+    --muted: oklch(0.25 0.008 265);
+    --accent: oklch(0.27 0.009 265);
+    --foreground: oklch(0.95 0.004 265);
+    --muted-foreground: oklch(0.74 0.012 265);
+    --faint-foreground: oklch(0.66 0.012 265);
+    --border: oklch(0.285 0.008 265);
+    --border-strong: oklch(0.36 0.01 265);
+    --input: oklch(0.5 0.012 265);
+    --ring: oklch(0.68 0.15 262);
+    --primary: oklch(0.68 0.15 262);
+    --primary-foreground: oklch(0.16 0.02 262);
+    --primary-hover: oklch(0.74 0.13 262);
+    --accent-weak: oklch(0.29 0.06 262);
+    --accent-text: oklch(0.8 0.11 262);
+    --destructive: oklch(0.66 0.19 25);
+    --destructive-weak: oklch(0.28 0.06 25);
+    --destructive-text: oklch(0.8 0.12 25);
+    --on-destructive: oklch(0.16 0.02 25);
+    --warning: oklch(0.8 0.14 80);
+    --warning-weak: oklch(0.29 0.05 75);
+    --warning-text: oklch(0.86 0.11 85);
+    --success: oklch(0.7 0.14 155);
+    --success-weak: oklch(0.27 0.05 155);
+    --success-text: oklch(0.82 0.11 155);
+    --on-success: oklch(0.16 0.02 155);
+    --attention: oklch(0.7 0.16 300);
+    --attention-weak: oklch(0.29 0.06 300);
+    --attention-text: oklch(0.82 0.11 300);
+    --surface-agent: oklch(0.195 0.007 265);
+    --surface-user: oklch(0.27 0.035 262);
+    --text-provisional: oklch(0.84 0.1 75);
+    --series-1: #3987e5;
+    --series-2: #d95926;
+    --series-3: #199e70;
+    --series-4: #c98500;
+    --series-5: #d55181;
+    --series-6: #008300;
+    --chart-1: var(--series-1);
+    --chart-2: var(--series-2);
+    --chart-3: var(--series-3);
+    --chart-4: var(--series-4);
+    --chart-5: var(--series-5);
+  }
+}
+
+[data-theme="hc"] {
+  color-scheme: light;
+  --background: oklch(1 0 0);
+  --card: oklch(1 0 0);
+  --popover: oklch(1 0 0);
+  --sunken: oklch(0.975 0 0);
+  --chrome: oklch(0.97 0 0);
+  --muted: oklch(0.94 0 0);
+  --accent: oklch(0.92 0 0);
+  --foreground: oklch(0.1 0 0);
+  --muted-foreground: oklch(0.27 0.01 265);
+  --faint-foreground: oklch(0.33 0.01 265);
+  --border: oklch(0.45 0.01 265);
+  --border-strong: oklch(0.3 0.01 265);
+  --input: oklch(0.3 0.01 265);
+  --ring: oklch(0.4 0.2 262);
+  --primary: oklch(0.4 0.2 262);
+  --primary-foreground: oklch(1 0 0);
+  --primary-hover: oklch(0.33 0.18 262);
+  --accent-weak: oklch(0.93 0.035 262);
+  --accent-text: oklch(0.33 0.17 262);
+  --destructive: oklch(0.42 0.18 27);
+  --destructive-weak: oklch(0.962 0.024 27);
+  --destructive-text: oklch(0.36 0.15 27);
+  --on-destructive: oklch(1 0 0);
+  --warning: oklch(0.42 0.1 60);
+  --warning-weak: oklch(0.968 0.045 90);
+  --warning-text: oklch(0.34 0.08 60);
+  --success: oklch(0.38 0.1 155);
+  --success-weak: oklch(0.962 0.035 155);
+  --success-text: oklch(0.32 0.08 155);
+  --on-success: oklch(1 0 0);
+  --attention: oklch(0.38 0.18 300);
+  --attention-weak: oklch(0.962 0.03 300);
+  --attention-text: oklch(0.33 0.16 300);
+  --surface-agent: oklch(1 0 0);
+  --surface-user: oklch(0.93 0.03 262);
+  --text-provisional: oklch(0.36 0.09 60);
+  --series-1: #1c5cab;
+  --series-2: #b9461b;
+  --series-3: #0b7a5c;
+  --series-4: #946000;
+  --series-5: #a8325f;
+  --series-6: #006400;
+  --chart-1: var(--series-1);
+  --chart-2: var(--series-2);
+  --chart-3: var(--series-3);
+  --chart-4: var(--series-4);
+  --chart-5: var(--series-5);
+}
+
+/*
+ * Candor UI's theme: its roles, mapped onto shadcn's variables and Tailwind.
+ *
+ * Colours live in candor-theme.css, generated by scripts/theme.mjs after every
+ * text/ground pairing is checked for contrast in light, dark and high contrast
+ * (data-theme="light" | "dark" | "hc"; no attribute follows the system). Chart
+ * series are validated for colour-vision deficiency with the dataviz validator.
+ *
+ * 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.
+ */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+:root {
+  --cd-font: "Inter Variable", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --cd-font-display: "Inter Variable", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --cd-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* A dense app scale: body is 13px, comfortable body 14px. */
+  --cd-text-2xs: 0.6875rem;
+  --cd-text-xs: 0.75rem;
+  --cd-text-sm: 0.8125rem;
+  --cd-text-md: 0.875rem;
+  --cd-text-lg: 1rem;
+  --cd-text-xl: 1.25rem;
+  --cd-text-2xl: 1.5rem;
+  --cd-text-3xl: 1.75rem;
+  --cd-text-4xl: 2rem;
+  --cd-text-5xl: 2.5rem;
+  --cd-tracking-body: -0.011em;
+  --cd-weight-heading: 620;
+
+  --cd-radius-xs: 4px;
+  --cd-radius-sm: 5px;
+  --cd-radius-md: 7px;
+  --cd-radius-lg: 10px;
+  --cd-radius-xl: 12px;
+  --cd-radius-2xl: 16px;
+  --cd-radius-button: 8px;
+  --cd-radius-tile: 24px;
+
+  --cd-shadow: oklch(0.2 0.02 265 / 0.07);
+  --cd-elev-1: 0 1px 2px var(--cd-shadow);
+  --cd-elev-2: 0 1px 2px var(--cd-shadow), 0 2px 8px var(--cd-shadow);
+  --cd-elev-3: 0 12px 40px -12px oklch(0.2 0.02 265 / 0.16), 0 1px 2px var(--cd-shadow);
+  --cd-elev-4: 0 2px 4px var(--cd-shadow), 0 16px 40px oklch(0.2 0.02 265 / 0.14);
+
+  --cd-ease: cubic-bezier(0.2, 0, 0, 1);
+  --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%);
+
+  --radius: var(--cd-radius-lg);
+
+  --sidebar: var(--chrome);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: var(--accent);
+  --sidebar-accent-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  --card-foreground: var(--foreground);
+  --popover-foreground: var(--foreground);
+  --secondary: var(--muted);
+  --secondary-foreground: var(--foreground);
+  --accent-foreground: var(--foreground);
+}
+[data-theme="dark"] {
+  --cd-shadow: oklch(0 0 0 / 0.35);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --cd-shadow: oklch(0 0 0 / 0.35);
+  }
+}
+
+@theme inline {
+  --font-sans: var(--cd-font);
+  --font-display: var(--cd-font-display);
+  --font-mono: var(--cd-font-mono);
+
+  --text-2xs: var(--cd-text-2xs);
+  --text-2xs--line-height: 1rem;
+  --text-xs: var(--cd-text-xs);
+  --text-xs--line-height: 1rem;
+  --text-sm: var(--cd-text-sm);
+  --text-sm--line-height: 1.25rem;
+  --text-base: var(--cd-text-md);
+  --text-base--line-height: 1.375rem;
+  --text-lg: var(--cd-text-lg);
+  --text-lg--line-height: 1.5rem;
+  --text-xl: var(--cd-text-xl);
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: var(--cd-text-2xl);
+  --text-2xl--line-height: 1.2;
+  --text-3xl: var(--cd-text-3xl);
+  --text-3xl--line-height: 1.15;
+  --text-4xl: var(--cd-text-4xl);
+  --text-4xl--line-height: 1.1;
+  --text-5xl: var(--cd-text-5xl);
+  --text-5xl--line-height: 1.05;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-faint-foreground: var(--faint-foreground);
+  --color-sunken: var(--sunken);
+  --color-chrome: var(--chrome);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent-weak: var(--accent-weak);
+  --color-accent-text: var(--accent-text);
+  --color-destructive: var(--destructive);
+  --color-destructive-weak: var(--destructive-weak);
+  --color-destructive-text: var(--destructive-text);
+  --color-on-destructive: var(--on-destructive);
+  --color-on-success: var(--on-success);
+  --color-warning: var(--warning);
+  --color-warning-weak: var(--warning-weak);
+  --color-warning-text: var(--warning-text);
+  --color-success: var(--success);
+  --color-success-weak: var(--success-weak);
+  --color-success-text: var(--success-text);
+  --color-attention: var(--attention);
+  --color-attention-weak: var(--attention-weak);
+  --color-attention-text: var(--attention-text);
+  --color-surface-agent: var(--surface-agent);
+  --color-surface-user: var(--surface-user);
+  --color-provisional: var(--text-provisional);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-xs: var(--cd-radius-xs);
+  --radius-sm: var(--cd-radius-sm);
+  --radius-md: var(--cd-radius-md);
+  --radius-lg: var(--cd-radius-lg);
+  --radius-xl: var(--cd-radius-xl);
+  --radius-2xl: var(--cd-radius-2xl);
+  --radius-button: var(--cd-radius-button);
+  --radius-tile: var(--cd-radius-tile);
+
+  --shadow-xs: var(--cd-elev-1);
+  --shadow-sm: var(--cd-elev-1);
+  --shadow-raised: var(--cd-elev-2);
+  --shadow-float: var(--cd-elev-3);
+  --shadow-overlay: var(--cd-elev-4);
+
+  --ease-standard: var(--cd-ease);
+  --ease-inout: var(--cd-ease-inout);
+  --ease-spring: var(--cd-ease-spring);
+
+  --animate-shimmer: shimmer 2.2s linear infinite;
+  --animate-pulse-dot: pulse-dot 1.6s var(--cd-ease) infinite;
+  --animate-rise-in: rise-in 240ms var(--cd-ease) both;
+  --animate-caret: caret 1s steps(2, start) infinite;
+}
+
+@keyframes shimmer {
+  from { background-position: 200% 0; }
+  to { background-position: -200% 0; }
+}
+@keyframes pulse-dot {
+  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent); }
+  70% { box-shadow: 0 0 0 5px transparent; }
+}
+@keyframes rise-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes caret {
+  to { visibility: hidden; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans text-sm;
+    letter-spacing: var(--cd-tracking-body);
+  }
+  h1, h2, h3, h4 {
+    font-family: var(--cd-font-display);
+    font-variation-settings: "opsz" 32;
+    font-weight: var(--cd-weight-heading);
+  }
+}
+
+@utility shimmer-text {
+  background: linear-gradient(90deg, var(--muted-foreground) 0%, var(--muted-foreground) 40%, var(--foreground) 50%, var(--muted-foreground) 60%, var(--muted-foreground) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: var(--animate-shimmer);
+}

package/dist/ui/button.d.ts

@@ -0,0 +1,12 @@
+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;
+    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> & {
+    /** Render the child element (a link, say) with the button's styles instead of a <button>. */
+    asChild?: boolean;
+} & RenderProp): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/ui/button.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { withRender } from "../lib/render-prop.js";
+import { cn } from "../lib/utils.js";
+// The accent fills the one primary act, the radius is the theme's
+// --cd-radius-button, and buttons press down slightly on :active.
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-button text-sm font-medium whitespace-nowrap outline-none select-none transition-[background-color,color,border-color,box-shadow,transform,opacity] duration-150 ease-standard active:scale-[0.98] focus-visible:ring-[3px] focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-45 data-[locked]:cursor-not-allowed data-[locked]:opacity-45 data-[locked]:active:scale-100 aria-invalid:ring-destructive/25 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+            destructive: "bg-destructive text-on-destructive hover:bg-destructive/90 focus-visible:ring-destructive/25",
+            outline: "border border-input bg-card hover:bg-accent",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-accent",
+            ghost: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
+            link: "text-accent-text underline-offset-4 hover:underline active:scale-100",
+        },
+        size: {
+            default: "h-8 px-3.5 has-[>svg]:px-3",
+            xs: "h-6 gap-1 px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1.5 px-2.5 text-xs has-[>svg]:px-2 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-10 px-5 text-base has-[>svg]:px-4",
+            icon: "size-8",
+            "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7 [&_svg:not([class*='size-'])]:size-3.5",
+            "icon-lg": "size-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button(allProps) {
+    const { className, variant = "default", size = "default", asChild = false, ...props } = withRender(allProps);
+    const Comp = asChild ? Slot.Root : "button";
+    return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/ui/collapsible.d.ts

@@ -0,0 +1,6 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { type RenderProp } from "../lib/render-prop.js";
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
+declare function CollapsibleTrigger(allProps: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & RenderProp): import("react").JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };