@repraze/kernelkit 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/vite/index.js

@@ -0,0 +1,242 @@
+/// <reference types="node" />
+/**
+ * Vite plugins shared by the suite's sites (Node-side: no React, nothing here reaches the browser).
+ *
+ * ```ts
+ * import {docsMetaPlugin, faviconPlugin, spaFallback, suiteSourceConditions, themeScriptPlugin} from "@repraze/kernelkit/vite";
+ * ```
+ *
+ * `vite` is only imported for its types; `typescript` is loaded lazily by docsMetaPlugin / extractFunction.
+ */
+import { lstatSync, readdirSync, readFileSync } from "node:fs";
+import { copyFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { themeScript } from "../provider/theme.js";
+/**
+ * Inline the kit's pre-paint theme script into index.html, so the stored mode, contrast, accent and radius
+ * apply before first paint. Replaces the marker comment, or goes first in <head> when there is none.
+ */
+export function themeScriptPlugin({ storageKey, defaults, marker = "<!-- kernelkit:theme-script -->", prelude, }) {
+    const source = [prelude, themeScript({ storageKey, defaults })].filter(Boolean).join("\n");
+    return {
+        name: "kernelkit-theme-script",
+        transformIndexHtml: (html) => html.includes(marker)
+            ? html.replace(marker, `<script>${source}</script>`)
+            : { html, tags: [{ tag: "script", children: source, injectTo: "head-prepend" }] },
+    };
+}
+// ─── favicon ────────────────────────────────────────────────────────────────────────────────────
+/**
+ * Serve (dev) and emit (build) `favicon.svg` from the brand mark's SVG, so the icon never drifts from the
+ * logo. Link it with `href="%BASE_URL%favicon.svg"` so it works under a Pages base path.
+ */
+export function faviconPlugin(svg, fileName = "favicon.svg") {
+    const source = typeof svg === "function" ? svg() : svg;
+    return {
+        name: "kernelkit-favicon",
+        configureServer(server) {
+            server.middlewares.use((req, res, next) => {
+                if (req.url?.split("?")[0]?.endsWith(`/${fileName}`)) {
+                    res.setHeader("Content-Type", "image/svg+xml");
+                    res.end(source);
+                    return;
+                }
+                next();
+            });
+        },
+        generateBundle() {
+            this.emitFile({ type: "asset", fileName, source });
+        },
+    };
+}
+// ─── SPA fallback ───────────────────────────────────────────────────────────────────────────────
+/** GitHub Pages has no SPA rewrites: copy index.html to 404.html so deep links load the app. */
+export function spaFallback() {
+    return {
+        name: "kernelkit-spa-fallback",
+        apply: "build",
+        async writeBundle({ dir }) {
+            if (dir) {
+                await copyFile(join(dir, "index.html"), join(dir, "404.html"));
+            }
+        },
+    };
+}
+// ─── linked suite packages ──────────────────────────────────────────────────────────────────────
+/** Is `node_modules/<name>` a symlink (npm link, a workspace), looking up from `root`? */
+function isLinked(name, root) {
+    for (let dir = resolve(root);; dir = dirname(dir)) {
+        try {
+            return lstatSync(join(dir, "node_modules", name)).isSymbolicLink();
+        }
+        catch {
+            // not installed here: look in the parent
+        }
+        if (dirname(dir) === dir) {
+            return false;
+        }
+    }
+}
+const DEDUPE = ["react", "react-dom", "@base-ui/react", "cmdk", "lucide-react"];
+/**
+ * For each suite package (`@repraze/kernelkit`…) that is symlinked into node_modules (`npm link`, a
+ * workspace): serve it from its TypeScript sources (its `@repraze/source` exports condition), unbundled,
+ * so edits there hot-reload; dedupe React-context packages, since a linked package sits outside this tree.
+ * Installed from npm: nothing changes, its built dist is used and pre-bundled like any dependency.
+ */
+export function suiteSourceConditions(packages, options = {}) {
+    const { dedupe = DEDUPE, condition = "@repraze/source" } = options;
+    return {
+        name: "kernelkit-suite-source-conditions",
+        enforce: "pre",
+        config(config) {
+            const linked = packages.filter((name) => isLinked(name, config.root ?? process.cwd()));
+            if (!linked.length) {
+                return undefined;
+            }
+            return {
+                resolve: { conditions: [condition, ...DEFAULT_CLIENT_CONDITIONS], dedupe },
+                optimizeDeps: { exclude: linked },
+            };
+        },
+    };
+}
+/** Vite's `defaultClientConditions`, inlined so this module needs no runtime import of vite. */
+const DEFAULT_CLIENT_CONDITIONS = ["module", "browser", "development|production"];
+// ─── docs manifest and demo sources ─────────────────────────────────────────────────────────────
+const require = createRequire(import.meta.url);
+let typescript;
+/** TypeScript, loaded on first use (the sites already have it): only docs sites pay for it. */
+const ts = () => (typescript ??= require("typescript"));
+/** Static value of a string/number expression: literals, no-substitution templates, "a" + "b". */
+function literal(node) {
+    const t = ts();
+    if (t.isStringLiteral(node) || t.isNoSubstitutionTemplateLiteral(node)) {
+        return node.text;
+    }
+    if (t.isNumericLiteral(node)) {
+        return Number(node.text);
+    }
+    if (t.isParenthesizedExpression(node)) {
+        return literal(node.expression);
+    }
+    if (t.isBinaryExpression(node) && node.operatorToken.kind === t.SyntaxKind.PlusToken) {
+        const a = literal(node.left);
+        const b = literal(node.right);
+        return a !== undefined && b !== undefined ? `${a}${b}` : undefined;
+    }
+    return undefined;
+}
+/** A docs page's manifest entry, read from its `defineDoc({...})` call without running it. */
+export function readDocMeta(file, slug, source = readFileSync(file, "utf8")) {
+    const t = ts();
+    const sf = t.createSourceFile(file, source, t.ScriptTarget.Latest, true);
+    let meta;
+    const visit = (node) => {
+        if (!meta &&
+            t.isCallExpression(node) &&
+            t.isIdentifier(node.expression) &&
+            node.expression.text === "defineDoc" &&
+            node.arguments[0] &&
+            t.isObjectLiteralExpression(node.arguments[0])) {
+            const props = {};
+            for (const p of node.arguments[0].properties) {
+                if (t.isPropertyAssignment(p) && t.isIdentifier(p.name)) {
+                    props[p.name.text] = literal(p.initializer);
+                }
+            }
+            if (typeof props.title !== "string" || typeof props.category !== "string") {
+                throw new Error(`${file}: defineDoc needs literal "title" and "category" (read at build time)`);
+            }
+            meta = {
+                slug,
+                title: props.title,
+                category: props.category,
+                description: typeof props.description === "string" ? props.description : "",
+                ...(typeof props.order === "number" ? { order: props.order } : {}),
+            };
+        }
+        t.forEachChild(node, visit);
+    };
+    visit(sf);
+    if (!meta) {
+        throw new Error(`${file}: no defineDoc({...}) call found`);
+    }
+    return meta;
+}
+/** Each top-level function or const of a file, by name, as written (without `export `). */
+export function extractFunctions(source, fileName = "doc.tsx") {
+    const t = ts();
+    const sf = t.createSourceFile(fileName, source, t.ScriptTarget.Latest, true, t.ScriptKind.TSX);
+    const out = {};
+    const text = (node) => source.slice(node.getStart(sf), node.getEnd()).replace(/^export /, "");
+    for (const statement of sf.statements) {
+        if (t.isFunctionDeclaration(statement) && statement.name) {
+            out[statement.name.text] = text(statement);
+        }
+        else if (t.isVariableStatement(statement)) {
+            for (const decl of statement.declarationList.declarations) {
+                if (t.isIdentifier(decl.name)) {
+                    out[decl.name.text] = text(statement);
+                }
+            }
+        }
+    }
+    return out;
+}
+/**
+ * A demo's own source: its declaration from `export function Name` (or `export const Name`) to its
+ * closing brace, parsed with TypeScript, so code after it (a `Notes()` helper, constants) stays out.
+ */
+export function extractFunction(source, name) {
+    return extractFunctions(source)[name] ?? "";
+}
+const META_ID = "virtual:docs-meta";
+const META_RESOLVED = `\0${META_ID}`;
+const SOURCES_QUERY = "demo-sources";
+/**
+ * The docs build step, for `@repraze/kernelkit/docs`:
+ * - `virtual:docs-meta`: title, category, description and order of every page in `docsDir`, read
+ *   statically from its `defineDoc({...})` call, so the nav and search don't pull every page's demos into
+ *   the main bundle;
+ * - `<page>.tsx?demo-sources`: `{functions}`, each demo's own source for its Code tab (see extractFunction).
+ *
+ * Types: add `@repraze/kernelkit/vite/client` to the site's tsconfig `types`.
+ */
+export function docsMetaPlugin(docsDir) {
+    const dir = resolve(docsDir);
+    return {
+        name: "kernelkit-docs-meta",
+        enforce: "pre",
+        resolveId: (id) => (id === META_ID ? META_RESOLVED : undefined),
+        load(id) {
+            if (id === META_RESOLVED) {
+                const files = readdirSync(dir).filter((f) => f.endsWith(".tsx"));
+                const metas = files.map((f) => {
+                    const file = join(dir, f);
+                    this.addWatchFile(file);
+                    return readDocMeta(file, f.replace(/\.tsx$/, ""));
+                });
+                return `export default ${JSON.stringify(metas)};`;
+            }
+            const [file = "", query = ""] = id.split("?");
+            if (query.split("&").includes(SOURCES_QUERY)) {
+                this.addWatchFile(file);
+                const functions = extractFunctions(readFileSync(file, "utf8"), file);
+                return { code: `export default ${JSON.stringify({ functions })};`, moduleType: "js" };
+            }
+            return undefined;
+        },
+        // a docs page added, removed or retitled → refresh the manifest
+        handleHotUpdate({ file, server }) {
+            if (file.startsWith(dir)) {
+                const mod = server.moduleGraph.getModuleById(META_RESOLVED);
+                if (mod) {
+                    server.moduleGraph.invalidateModule(mod);
+                }
+            }
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/vite/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/vite/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@repraze/kernelkit",
-    "version": "0.1.0-alpha.2",
+    "version": "0.1.0-alpha.4",
     "description": "Modern, techy React components: every shadcn component on Base UI, Tailwind v4 and cva, themed by TermiColor.",
     "keywords": [
         "react",
@@ -56,7 +56,26 @@
             "types": "./dist/provider/theme.d.ts",
             "default": "./dist/provider/theme.js"
         },
+        "./docs": {
+            "@repraze/source": "./src/docs/index.ts",
+            "types": "./dist/docs/index.d.ts",
+            "default": "./dist/docs/index.js"
+        },
+        "./site": {
+            "@repraze/source": "./src/site/index.ts",
+            "types": "./dist/site/index.d.ts",
+            "default": "./dist/site/index.js"
+        },
+        "./vite": {
+            "@repraze/source": "./src/vite/index.ts",
+            "types": "./dist/vite/index.d.ts",
+            "default": "./dist/vite/index.js"
+        },
+        "./vite/client": {
+            "types": "./src/vite/client.d.ts"
+        },
         "./styles.css": "./src/styles/kernelkit.css",
+        "./site.css": "./src/styles/site.css",
         "./package.json": "./package.json"
     },
     "files": [
@@ -83,7 +102,11 @@
         "input-otp": "^1.5.0",
         "react-resizable-panels": "^4.19.1",
         "@tanstack/react-virtual": "^3.14.26",
-        "@shadcn/react": "^0.3.1"
+        "@shadcn/react": "^0.3.1",
+        "@fontsource-variable/geist": "^5.2.0",
+        "@fontsource-variable/jetbrains-mono": "^5.2.0",
+        "typescript": ">=5.0",
+        "vite": ">=7.0"
     },
     "peerDependenciesMeta": {
         "recharts": {
@@ -115,6 +138,18 @@
         },
         "@shadcn/react": {
             "optional": true
+        },
+        "@fontsource-variable/geist": {
+            "optional": true
+        },
+        "@fontsource-variable/jetbrains-mono": {
+            "optional": true
+        },
+        "typescript": {
+            "optional": true
+        },
+        "vite": {
+            "optional": true
         }
     },
     "dependencies": {
@@ -141,6 +176,7 @@
         "input-otp": "^1.5.0",
         "react-resizable-panels": "^4.19.1",
         "@tanstack/react-virtual": "^3.14.26",
-        "@shadcn/react": "^0.3.1"
+        "@shadcn/react": "^0.3.1",
+        "vite": "^8.3.6"
     }
 }

package/src/components/alert.tsx

@@ -3,7 +3,7 @@
 import {mergeProps} from "@base-ui/react/merge-props";
 import {useRender} from "@base-ui/react/use-render";
 import {type Color, colorVariants} from "@repraze/kernelkit/lib/color";
-import {heading} from "@repraze/kernelkit/lib/recipes";
+import {heading, statusSurface, statusSurfaceNeutral} from "@repraze/kernelkit/lib/recipes";
 import {cva} from "class-variance-authority";
 import {cn} from "cn";
 
@@ -17,16 +17,14 @@ const alertCva = cva(
         variants: {
             color: colorVariants,
             variant: {
-                // status tint behind foreground text; the hue lives in the border and the icon (§2 TermiColor rule)
-                soft: "border-(--c)/30 bg-(--c-tint) text-foreground *:[svg]:text-(--c) hc:border-(--c)",
-                // no wash: card surface with a hue border, for dense layouts
-                outline: "border-(--c)/50 bg-card text-card-foreground *:[svg]:text-(--c) hc:border-(--c)",
+                soft: [statusSurface.soft, "text-foreground *:[svg]:text-(--c)"],
+                outline: [statusSurface.outline, "text-card-foreground *:[svg]:text-(--c)"],
             },
         },
         compoundVariants: [
             {
                 color: "neutral",
-                class: "border-border bg-card text-card-foreground *:[svg]:text-foreground hc:border-border",
+                class: [statusSurfaceNeutral, "text-card-foreground *:[svg]:text-foreground"],
             },
         ],
         defaultVariants: {variant: "soft", color: "neutral"},

package/src/components/avatar.tsx

@@ -100,7 +100,7 @@ function AvatarGroupCount({className, ...props}: React.ComponentProps<"div">) {
         <div
             data-slot="avatar-group-count"
             className={cn(
-                "relative flex size-8 shrink-0 items-center justify-center rounded-pill bg-muted font-mono text-xs font-medium text-muted-foreground ring-2 ring-background [&>svg]:size-4",
+                "relative flex size-8 shrink-0 items-center justify-center rounded-pill bg-muted font-alt text-xs font-medium text-muted-foreground ring-2 ring-background [&>svg]:size-4",
                 "group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=lg]/avatar-group:text-sm group-has-data-[size=lg]/avatar-group:[&>svg]:size-5",
                 "group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:text-[0.625rem] group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
                 "group-has-data-[size=xs]/avatar-group:size-4 group-has-data-[size=xs]/avatar-group:text-[0.5rem] group-has-data-[size=xs]/avatar-group:[&>svg]:size-2",

package/src/components/badge.tsx

@@ -16,7 +16,7 @@ import {cn} from "cn";
 
 const badgeCva = cva(
     [
-        "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow]",
+        "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-pill border border-transparent px-2 py-0.5 font-alt text-xs font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow]",
         "has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:pointer-events-none [&>svg]:size-3!",
         focusRing,
     ],

package/src/components/breadcrumb.tsx

@@ -4,7 +4,7 @@ import {mergeProps} from "@base-ui/react/merge-props";
 import {useRender} from "@base-ui/react/use-render";
 import {focusRing} from "@repraze/kernelkit/lib/recipes";
 import {cn} from "cn";
-import {ChevronRightIcon, MoreHorizontalIcon} from "lucide-react";
+import {MoreHorizontalIcon} from "lucide-react";
 import * as React from "react";
 
 function Breadcrumb({className, ...props}: React.ComponentProps<"nav">) {
@@ -16,7 +16,7 @@ function BreadcrumbList({className, ...props}: React.ComponentProps<"ol">) {
         <ol
             data-slot="breadcrumb-list"
             className={cn(
-                "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
+                "flex flex-wrap items-center gap-1.5 font-alt text-xs wrap-break-word text-muted-foreground",
                 className,
             )}
             {...props}
@@ -34,7 +34,7 @@ function BreadcrumbLink({className, render, ...props}: useRender.ComponentProps<
         props: mergeProps<"a">(
             {
                 className: cn(
-                    "inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground [&_svg:not([class*='size-'])]:size-3.5",
+                    "inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground [&_svg:not([class*='size-'])]:size-3",
                     focusRing,
                     className,
                 ),
@@ -56,7 +56,7 @@ function BreadcrumbPage({className, ...props}: React.ComponentProps<"span">) {
             aria-disabled="true"
             aria-current="page"
             className={cn(
-                "inline-flex items-center gap-1 font-medium text-foreground [&_svg:not([class*='size-'])]:size-3.5",
+                "inline-flex items-center gap-1 font-medium text-foreground [&_svg:not([class*='size-'])]:size-3",
                 className,
             )}
             {...props}
@@ -64,16 +64,17 @@ function BreadcrumbPage({className, ...props}: React.ComponentProps<"span">) {
     );
 }
 
+/** A muted `/` between levels (a path, in mono). Pass children to use another mark. */
 function BreadcrumbSeparator({children, className, ...props}: React.ComponentProps<"li">) {
     return (
         <li
             data-slot="breadcrumb-separator"
             role="presentation"
             aria-hidden="true"
-            className={cn("text-muted-foreground [&>svg]:size-3.5", className)}
+            className={cn("text-muted-foreground select-none [&>svg]:size-3", className)}
             {...props}
         >
-            {children ?? <ChevronRightIcon />}
+            {children ?? "/"}
         </li>
     );
 }
@@ -84,7 +85,7 @@ function BreadcrumbEllipsis({className, ...props}: React.ComponentProps<"span">)
             data-slot="breadcrumb-ellipsis"
             role="presentation"
             aria-hidden="true"
-            className={cn("flex size-5 items-center justify-center rounded-sm [&>svg]:size-4", className)}
+            className={cn("flex size-5 items-center justify-center rounded-sm [&>svg]:size-3.5", className)}
             {...props}
         >
             <MoreHorizontalIcon />

package/src/components/callout.tsx

@@ -2,44 +2,55 @@
 
 import {Collapsible, CollapsibleContent, CollapsibleTrigger} from "@repraze/kernelkit/components/collapsible";
 import {type Color, colorVariants} from "@repraze/kernelkit/lib/color";
-import {heading} from "@repraze/kernelkit/lib/recipes";
+import {heading, statusSurface, statusSurfaceNeutral} from "@repraze/kernelkit/lib/recipes";
 import {cva} from "class-variance-authority";
 import {cn} from "cn";
 import {ChevronDownIcon} from "lucide-react";
 import type * as React from "react";
 
 /**
- * Long-form aside for docs and articles (note, tip, warning). A left accent bar carries the color;
- * the surface is a faint wash so body text stays foreground. For app status use Alert.
+ * Long-form aside for docs and articles (note, tip, warning). The color rides on the suite's row
+ * indicator (the sidebar and menu pill: 2px, rounded, flush left, inset from the top and bottom).
+ * Surfaces share Alert's `soft` / `outline` variants. For app status use Alert.
  */
 const calloutVariants = cva(
     [
-        "group/callout relative overflow-hidden rounded-lg border border-(--c)/25 bg-(--c)/5 pl-1 text-sm text-foreground hc:border-(--c)",
-        "before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-(--c)",
+        "group/callout relative overflow-hidden rounded-lg border text-sm text-foreground",
+        // header/body divider: half-strength hue, so it reads on the soft tint too (the hue itself in hc)
+        "[--callout-line:color-mix(in_oklab,var(--c)_50%,transparent)] hc:[--callout-line:var(--c)]",
+        // the row indicator (recipes rowIndicator), always on, in the callout's color, above the header's hover.
+        // The box has no padding of its own: header and body span the full width (pl-4 clears the pill).
+        "before:pointer-events-none before:absolute before:z-10 before:top-1.5 before:bottom-1.5 before:left-0 before:w-0.5 before:rounded-pill before:bg-(--c)",
     ],
     {
         variants: {
             color: colorVariants,
+            variant: statusSurface,
         },
         compoundVariants: [
             {
                 color: "neutral",
-                class: "border-border bg-card before:bg-muted-foreground hc:border-border",
+                class: [
+                    statusSurfaceNeutral,
+                    "before:bg-muted-foreground [--callout-line:var(--border)] hc:[--callout-line:var(--border)]",
+                ],
             },
         ],
-        defaultVariants: {color: "neutral"},
+        defaultVariants: {color: "neutral", variant: "soft"},
     },
 );
 
 const calloutHeader =
-    "flex min-h-8 w-full items-center gap-1.5 px-3 py-1.5 text-left text-xs text-(--c) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+    "flex min-h-8 w-full items-center gap-1.5 py-1.5 pr-3 pl-4 text-left text-xs text-(--c) group-data-[color=neutral]/callout:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 
 const calloutBody =
-    "px-3 py-2 text-sm leading-relaxed [&_a]:text-(--c) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--c)/25 group-data-[color=neutral]/callout:border-border hc:border-(--c)";
+    "py-2 pr-3 pl-4 text-sm leading-relaxed [&_a]:text-(--c) [&_a]:underline [&_a]:underline-offset-3 group-data-[color=neutral]/callout:[&_a]:text-foreground [&_p:not(:last-child)]:mb-2 border-(--callout-line)";
 
 interface CalloutProps extends Omit<React.ComponentProps<"div">, "color" | "title"> {
-    /** Status or hue of the bar, header and border. */
+    /** Status or hue of the indicator, header and border. */
     color?: Color | null;
+    /** `soft` (tinted, default) or `outline` (card surface, stronger border): the same axis as Alert. */
+    variant?: "soft" | "outline" | null;
     /** Leading icon element, e.g. `<InfoIcon />`. */
     icon?: React.ReactNode;
     /** Header label. The header renders when `title` or `icon` is set. */
@@ -53,6 +64,7 @@ interface CalloutProps extends Omit<React.ComponentProps<"div">, "color" | "titl
 function Callout({
     className,
     color,
+    variant,
     icon,
     title,
     collapsible = false,
@@ -61,6 +73,7 @@ function Callout({
     ...props
 }: CalloutProps) {
     const resolved = color ?? "neutral";
+    const surface = variant ?? "soft";
     const hasHeader = Boolean(title || icon);
     const headerContent = (
         <>
@@ -78,8 +91,9 @@ function Callout({
             <Collapsible
                 data-slot="callout"
                 data-color={resolved}
+                data-variant={surface}
                 defaultOpen={!defaultCollapsed}
-                className={cn(calloutVariants({color: resolved}), className)}
+                className={cn(calloutVariants({color: resolved, variant: surface}), className)}
                 {...props}
             >
                 <CollapsibleTrigger
@@ -110,7 +124,8 @@ function Callout({
         <div
             data-slot="callout"
             data-color={resolved}
-            className={cn(calloutVariants({color: resolved}), className)}
+            data-variant={surface}
+            className={cn(calloutVariants({color: resolved, variant: surface}), className)}
             {...props}
         >
             {hasHeader ? (

package/src/components/chart.tsx

@@ -21,7 +21,7 @@ const rechartsDefaults = [
 
 const chartContainerClass = [
     "flex aspect-video justify-center text-xs",
-    "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-axis-tick_text]:font-mono",
+    "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-axis-tick_text]:font-alt",
     "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-hover",
     "[&_.recharts-radial-bar-background-sector]:fill-muted",
     "[&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
@@ -230,7 +230,7 @@ function ChartTooltipContent({
                                                 </span>
                                             </div>
                                             {item.value != null && (
-                                                <span className="font-mono font-medium text-foreground tabular-nums">
+                                                <span className="font-alt font-medium text-foreground tabular-nums">
                                                     {typeof item.value === "number"
                                                         ? item.value.toLocaleString()
                                                         : String(item.value)}

package/src/components/code-block.tsx

@@ -65,7 +65,7 @@ function CodeBlockTitle({className, ...props}: React.ComponentProps<"div">) {
         <div
             data-slot="code-block-title"
             className={cn(
-                "min-w-0 truncate font-mono text-xs font-medium text-foreground group-data-[variant=danger]/code-block:text-danger [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5",
+                "min-w-0 truncate font-alt text-xs font-medium text-foreground group-data-[variant=danger]/code-block:text-danger [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5",
                 className,
             )}
             {...props}

package/src/components/command.tsx

@@ -151,7 +151,7 @@ function CommandShortcut({className, ...props}: React.ComponentProps<"span">) {
         <span
             data-slot="command-shortcut"
             className={cn(
-                "ml-auto pl-4 font-mono text-xs text-muted-foreground group-data-[selected=true]/command-item:text-accent-foreground",
+                "ml-auto pl-4 font-alt text-xs text-muted-foreground group-data-[selected=true]/command-item:text-accent-foreground",
                 className,
             )}
             {...props}

package/src/components/data-table/elements/data-table-info-row.tsx

@@ -19,7 +19,7 @@ export function DataTableInfoRow<T>({className, view, ...props}: DataTableInfoRo
     const infoColumn: DataTableViewColumn<undefined> = convertColumn({
         id: "info",
         cell: () => (
-            <span className="font-mono tabular-nums">
+            <span className="font-alt tabular-nums">
                 {rowCount.toLocaleString()} rows · {columnCount} columns
             </span>
         ),

package/src/components/dropdown-menu.tsx

@@ -35,7 +35,7 @@ function resolveItemVariant(variant: MenuItemVariant | undefined) {
 
 /** Keyboard shortcut hint at the end of a menu row. */
 const menuShortcutClass =
-    "ml-auto pl-4 font-mono text-xs text-muted-foreground group-data-highlighted/menu-item:text-accent-foreground";
+    "ml-auto pl-4 font-alt text-xs text-muted-foreground group-data-highlighted/menu-item:text-accent-foreground";
 
 /** Right-side indicator of checkbox and radio rows. */
 const menuIndicatorClass = "pointer-events-none absolute right-2 flex size-4 items-center justify-center";

package/src/components/kbd.tsx

@@ -7,9 +7,7 @@ import type * as React from "react";
 /** A keycap: mono, `rounded-sm`, a thicker bottom border for the key look (readable in hc). */
 const kbdVariants = cva(
     [
-        "pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-muted font-mono font-medium text-muted-foreground select-none [&_svg]:shrink-0",
-        // inside a tooltip (inverted surface) the key becomes a translucent chip
-        "in-data-[slot=tooltip-content]:border-transparent in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10",
+        "pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-muted font-alt font-medium text-muted-foreground select-none [&_svg]:shrink-0",
     ],
     {
         variants: {
@@ -30,7 +28,7 @@ function KbdGroup({className, ...props}: React.ComponentProps<"kbd">) {
     return (
         <kbd
             data-slot="kbd-group"
-            className={cn("inline-flex items-center gap-1 font-mono text-xs text-muted-foreground", className)}
+            className={cn("inline-flex items-center gap-1 font-alt text-xs text-muted-foreground", className)}
             {...props}
         />
     );