@repraze/kernelkit 0.1.0-alpha.3 → 0.1.0-alpha.5

package/src/hooks/use-time-format.ts

@@ -0,0 +1,72 @@
+"use client";
+
+import {useLocale} from "@repraze/kernelkit/components/locale";
+import * as React from "react";
+
+/** `"auto"` follows the locale: 12 in en-US, 24 in fr-FR, en-GB or ja-JP. */
+type HourCyclePreference = 12 | 24 | "auto";
+
+interface TimeFormat {
+    locale: string;
+    hourCycle: 12 | 24;
+    /** Localized day periods: "AM" / "PM" in en-US, "a.m." / "p.m." in en-CA, "오전" / "오후" in ko. */
+    am: string;
+    pm: string;
+    /** The day period comes before the hour (ko, zh). */
+    periodFirst: boolean;
+    /** "09:30" (24h) or "9:30 AM" / "오전 9:30" (12h), in the locale's own pattern. */
+    format: (minutes: number) => string;
+    /** A two-digit segment in the locale's digits: "05", "٠٥" in ar-EG. */
+    digits: (n: number) => string;
+}
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+/**
+ * Hour cycle, day-period labels and a formatter, from `Intl` for the resolved locale (see `useLocale`:
+ * prop › LocaleProvider › browser, hydration-safe). An explicit 12 / 24 overrides the locale's cycle.
+ */
+function useTimeFormat(preference: HourCyclePreference = "auto", explicitLocale?: string): TimeFormat {
+    const locale = useLocale(explicitLocale);
+    return React.useMemo(() => {
+        let hourCycle: 12 | 24 = preference === "auto" ? 24 : preference;
+        let am = "AM";
+        let pm = "PM";
+        let periodFirst = false;
+        let formatter: Intl.DateTimeFormat | null = null;
+        let numbers: Intl.NumberFormat | null = null;
+        try {
+            numbers = new Intl.NumberFormat(locale, {minimumIntegerDigits: 2, useGrouping: false});
+            if (preference === "auto") {
+                const hc = new Intl.DateTimeFormat(locale, {hour: "numeric"}).resolvedOptions().hourCycle;
+                hourCycle = hc === "h11" || hc === "h12" ? 12 : 24;
+            }
+            const f = new Intl.DateTimeFormat(locale, {hour: "numeric", hourCycle: "h12"});
+            const parts = (h: number) => f.formatToParts(new Date(2000, 0, 1, h));
+            am = parts(9).find((p) => p.type === "dayPeriod")?.value ?? am;
+            pm = parts(21).find((p) => p.type === "dayPeriod")?.value ?? pm;
+            const types = parts(9).map((p) => p.type);
+            periodFirst = types.includes("dayPeriod") && types.indexOf("dayPeriod") < types.indexOf("hour");
+            formatter = new Intl.DateTimeFormat(locale, {
+                hour: hourCycle === 24 ? "2-digit" : "numeric",
+                minute: "2-digit",
+                hourCycle: hourCycle === 24 ? "h23" : "h12",
+            });
+        } catch {
+            formatter = null;
+        }
+        const format = (minutes: number) => {
+            const h = Math.floor(minutes / 60);
+            const m = minutes % 60;
+            if (formatter) {
+                return formatter.format(new Date(2000, 0, 1, h, m));
+            }
+            return hourCycle === 24 ? `${pad(h)}:${pad(m)}` : `${h % 12 || 12}:${pad(m)} ${h < 12 ? am : pm}`;
+        };
+        const digits = (n: number) => (numbers ? numbers.format(n) : pad(n));
+        return {locale, hourCycle, am, pm, periodFirst, format, digits};
+    }, [preference, locale]);
+}
+
+export {useTimeFormat};
+export type {HourCyclePreference, TimeFormat};

package/src/lib/color.ts

@@ -6,9 +6,13 @@
  * - `--c-tint` opaque wash behind foreground text
  * - `--c-fill` / `--c-fill-fg` vivid solid surface and its text (TermiColor "fills are the brand":
  *   in light mode the text tier is darkened for contrast, the fill tier stays vivid)
+ * - `--c-soft-text` text on a wash of its own color (soft variants, soft status surfaces): `--c` mixed 25%
+ *   toward the foreground with its chroma restored, which keeps hue and saturation and passes WCAG AA
+ *   4.5:1 for every color, in light, dark and both hc modes, on background, card and popover (plain `--c`
+ *   on its own wash fell to ~3.6)
  *
  * Spread `colorVariants` into a cva `variants.color` map, then write variants against the vars
- * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c)`, …).
+ * (`bg-(--c) text-(--c-fg)`, `bg-(--c)/12 text-(--c-soft-text)`, …).
  */
 
 export const STATUS_COLORS = ["danger", "warning", "success", "info"] as const;
@@ -17,8 +21,17 @@ export const COLORS = ["neutral", "primary", ...STATUS_COLORS, ...HUES] as const
 
 export type Color = (typeof COLORS)[number];
 
+/**
+ * Derived from `--c` on the same element, so it is set alongside every color (a :root rule would see no `--c`).
+ * The mix toward the (neutral) foreground sets the lightness for contrast but also scales chroma by 0.75, so
+ * where relative color syntax is supported the chroma is multiplied back by 1/0.75: same lightness and hue,
+ * the original saturation (≥ 5.08:1 everywhere, vs ≥ 5.68 for the plain mix kept as the fallback).
+ */
+const SOFT_TEXT =
+    "[--c-soft-text:color-mix(in_oklab,var(--c)_75%,var(--foreground))] supports-[color:oklch(from_red_l_c_h)]:[--c-soft-text:oklch(from_color-mix(in_oklab,var(--c)_75%,var(--foreground))_l_calc(c*1.333)_h)]";
+
 // Literal strings on purpose: Tailwind only generates classes it can read in the source.
-export const colorVariants: Record<Color, string> = {
+const baseColorVariants: Record<Color, string> = {
     neutral:
         "[--c:var(--foreground)] [--c-fg:var(--background)] [--c-tint:var(--secondary)] [--c-fill:var(--foreground)] [--c-fill-fg:var(--background)]",
     primary:
@@ -39,6 +52,10 @@ export const colorVariants: Record<Color, string> = {
     pink: "[--c:var(--tc-pink)] [--c-fg:var(--tc-pink-on)] [--c-tint:var(--tc-pink-tint)] [--c-fill:var(--tc-pink-fill)] [--c-fill-fg:var(--tc-pink-on-fill)]",
 };
 
+export const colorVariants = Object.fromEntries(
+    Object.entries(baseColorVariants).map(([color, vars]) => [color, `${vars} ${SOFT_TEXT}`]),
+) as Record<Color, string>;
+
 /** Every color except neutral: the ones whose outline/ghost variants are tinted. */
 export const TINTED_COLORS = COLORS.filter((c) => c !== "neutral");
 

package/src/lib/recipes.ts

@@ -55,14 +55,16 @@ export const selectedRow = "bg-accent text-accent-foreground shadow-[inset_2px_0
 
 /**
  * Status surface shared by Alert and Callout (§2): one `soft` / `outline` axis, same values in both.
- * Expects a color variant (`--c`, `--c-tint`) on the same element. Neutral swaps the hue border for the
+ * Expects a color variant (`--c`, `--c-tint`) on the same element. Text, icons and links on it use
+ * `--c-text`, which each variant sets to the color that passes 4.5:1 on that surface. Neutral swaps the hue border for the
  * plain border on a card surface (`statusSurfaceNeutral`).
  */
 export const statusSurface = {
-    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule)
-    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c)",
+    // status tint behind foreground text; the hue lives in the border, icon and accents (TermiColor rule).
+    // `--c-text` is the hue for text, icons and links on it: on the tint it is the soft text (4.5:1)
+    soft: "border-(--c)/30 bg-(--c-tint) hc:border-(--c) [--c-text:var(--c-soft-text)]",
     // no wash: card surface with a hue border, for dense layouts
-    outline: "border-(--c)/50 bg-card hc:border-(--c)",
+    outline: "border-(--c)/50 bg-card hc:border-(--c) [--c-text:var(--c)]",
 } as const;
 
-export const statusSurfaceNeutral = "border-border bg-card hc:border-border";
+export const statusSurfaceNeutral = "border-border bg-card hc:border-border [--c-text:var(--c)]";

package/src/provider/theme-provider.tsx

@@ -40,6 +40,9 @@ export interface ThemeContextValue extends ThemeState {
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 
+/** The nearest ThemeScope's resolved theme, so code that paints (canvas, charts) can follow a scope. */
+const ScopeContext = createContext<ResolvedTheme | null>(null);
+
 /** Element overlays portal into, so popups inside a ThemeScope keep its theme. */
 const PortalContainerContext = createContext<HTMLElement | null>(null);
 
@@ -181,6 +184,23 @@ export function useTheme(): ThemeContextValue {
     return ctx;
 }
 
+/** A theme with its mode resolved (never "system"). */
+export type ResolvedTheme = Omit<ThemeState, "mode"> & {mode: ResolvedMode};
+
+/**
+ * The theme that applies here: the nearest ThemeScope's, else the provider's with "system" resolved.
+ * Use it for things CSS can't reach (canvas, WebGL/WebGPU, charts) so they follow review scopes too.
+ */
+export function useResolvedTheme(): ResolvedTheme {
+    const scope = useContext(ScopeContext);
+    const ctx = useContext(ThemeContext);
+    const mode = scope?.mode ?? ctx?.resolvedMode ?? "light";
+    const contrast = scope?.contrast ?? ctx?.contrast ?? DEFAULT_THEME.contrast;
+    const accent = scope?.accent ?? ctx?.accent ?? DEFAULT_THEME.accent;
+    const radius = scope?.radius ?? ctx?.radius ?? DEFAULT_THEME.radius;
+    return useMemo(() => ({mode, contrast, accent, radius}), [mode, contrast, accent, radius]);
+}
+
 /** Renders the pre-paint script. Place in <head> (Next.js: in the root layout). */
 export function ThemeScript({nonce, ...options}: ThemeScriptOptions & {nonce?: string}) {
     return <script nonce={nonce} suppressHydrationWarning dangerouslySetInnerHTML={{__html: themeScript(options)}} />;
@@ -188,7 +208,7 @@ export function ThemeScript({nonce, ...options}: ThemeScriptOptions & {nonce?: s
 
 export interface ThemeScopeProps extends Omit<React.ComponentProps<"div">, "children"> {
     children?: ReactNode;
-    /** Values not given inherit from the surrounding <ThemeProvider> (or the defaults). */
+    /** Values not given inherit from the surrounding ThemeScope or <ThemeProvider> (or the defaults). */
     mode?: ResolvedMode;
     contrast?: ThemeState["contrast"];
     accent?: ThemeState["accent"];
@@ -200,14 +220,17 @@ export interface ThemeScopeProps extends Omit<React.ComponentProps<"div">, "chil
  * the scope, so they keep its colors and radius.
  */
 export function ThemeScope({mode, contrast, accent, radius, className, children, ...props}: ThemeScopeProps) {
-    const parent = useContext(ThemeContext);
+    const parent = useResolvedTheme();
     const [container, setContainer] = useState<HTMLDivElement | null>(null);
-    const theme = {
-        mode: mode ?? parent?.resolvedMode ?? "light",
-        contrast: contrast ?? parent?.contrast ?? DEFAULT_THEME.contrast,
-        accent: accent ?? parent?.accent ?? DEFAULT_THEME.accent,
-        radius: radius ?? parent?.radius ?? DEFAULT_THEME.radius,
-    };
+    const theme = useMemo(
+        () => ({
+            mode: mode ?? parent.mode,
+            contrast: contrast ?? parent.contrast,
+            accent: accent ?? parent.accent,
+            radius: radius ?? parent.radius,
+        }),
+        [mode, contrast, accent, radius, parent],
+    );
     const classes = themeClassName(theme);
     return (
         <div
@@ -215,7 +238,9 @@ export function ThemeScope({mode, contrast, accent, radius, className, children,
             className={[classes, "bg-background text-foreground", className].filter(Boolean).join(" ")}
             {...props}
         >
-            <PortalContainerContext.Provider value={container}>{children}</PortalContainerContext.Provider>
+            <ScopeContext.Provider value={theme}>
+                <PortalContainerContext.Provider value={container}>{children}</PortalContainerContext.Provider>
+            </ScopeContext.Provider>
             <div ref={setContainer} data-slot="theme-scope-portal" className={classes} />
         </div>
     );

package/src/site/brand.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import {cn} from "cn";
+
+/**
+ * A site's brand mark (an SVG string from its `brand/mark.ts`), inlined. Size it in multiples of 32px
+ * (default `size-8`) so it stays pixel-sharp (GUIDELINES §7b).
+ */
+export function BrandMark({svg, className}: {svg: string; className?: string}) {
+    return (
+        <span
+            aria-hidden
+            className={cn("inline-block size-8 shrink-0 leading-0", className)}
+            // Static markup generated by the site from its own mark shapes, never from user input.
+            dangerouslySetInnerHTML={{__html: svg}}
+        />
+    );
+}
+
+export interface BrandLogoProps {
+    /** The mark's SVG markup. */
+    svg: string;
+    /** The wordmark's first word, in the foreground ("Kernel"). */
+    first: string;
+    /** Its second word, in the accent text tier ("Kit"). */
+    second: string;
+    className?: string;
+}
+
+/** Mark + two-tone wordmark in mono semibold: Kernel**Kit**, Termi**Color** (the suite's brand pattern). */
+export function BrandLogo({svg, first, second, className}: BrandLogoProps) {
+    return (
+        <span className={cn("inline-flex items-center gap-2", className)}>
+            <BrandMark svg={svg} />
+            <span className="font-mono text-sm font-semibold tracking-tight">
+                {first}
+                <span className="text-primary-text">{second}</span>
+            </span>
+        </span>
+    );
+}

package/src/site/github-icon.tsx

@@ -0,0 +1,10 @@
+import type * as React from "react";
+
+/** GitHub mark (lucide no longer ships brand icons). */
+export function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden {...props}>
+            <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.3-3.1-.2-.4-.6-1.6 0-3.2 0 0 1-.3 3.4 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.2.8.8 1.3 1.9 1.3 3.1 0 4.6-2.8 5.6-5.5 5.9.5.4.9 1.1.9 2.2v3.3c0 .3.1.7.8.6A12 12 0 0 0 12 .3" />
+        </svg>
+    );
+}

package/src/site/index.ts

@@ -0,0 +1,5 @@
+export * from "./brand";
+export * from "./github-icon";
+export * from "./suite-footer";
+export * from "./suite-header";
+export * from "./use-page-title";

package/src/site/suite-footer.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import {SiteFooter, SiteFooterLink, SiteFooterLinks} from "@repraze/kernelkit/components/site-footer";
+import type * as React from "react";
+import {Fragment} from "react";
+
+export interface SuiteFooterLinkItem {
+    label: string;
+    /** A router link as a `render` element; or `href` for a plain anchor. */
+    render?: React.ReactElement;
+    href?: string;
+}
+
+/** Suite projects a site can credit, in this order: "built with KernelKit", "themed by TermiColor". */
+export type SuiteCredit = "kernelkit" | "termicolor";
+
+const CREDITS: Record<SuiteCredit, {text: string; name: string; href: string}> = {
+    kernelkit: {text: "built with", name: "KernelKit", href: "https://repraze.github.io/kernelkit/"},
+    termicolor: {text: "themed by", name: "TermiColor", href: "https://repraze.github.io/termicolor/"},
+};
+
+export interface SuiteFooterProps {
+    links: SuiteFooterLinkItem[];
+    /** Which suite projects to credit (default `["termicolor"]`). */
+    credits?: SuiteCredit[];
+    /** A phrase of the site's own after the credits ("built from one palette"). */
+    tagline?: React.ReactNode;
+    /** Default "MIT". */
+    license?: string;
+}
+
+/**
+ * The suite's footer (GUIDELINES §7b): "MIT · themed by TermiColor · a repraze.com project" on the left,
+ * the site's links on the right.
+ */
+export function SuiteFooter({links, credits = ["termicolor"], tagline, license = "MIT"}: SuiteFooterProps) {
+    return (
+        <SiteFooter>
+            <span>
+                {license}
+                {credits.map((key) => {
+                    const credit = CREDITS[key];
+                    return (
+                        <Fragment key={key}>
+                            {" "}
+                            · {credit.text}{" "}
+                            <SiteFooterLink href={credit.href} className="underline underline-offset-4">
+                                {credit.name}
+                            </SiteFooterLink>
+                        </Fragment>
+                    );
+                })}
+                {tagline ? <> · {tagline}</> : null} · a{" "}
+                <SiteFooterLink href="https://repraze.com" className="underline underline-offset-4">
+                    repraze.com
+                </SiteFooterLink>{" "}
+                project
+            </span>
+            <SiteFooterLinks aria-label="Footer">
+                {links.map((link) => (
+                    <SiteFooterLink key={link.label} href={link.href} render={link.render}>
+                        {link.label}
+                    </SiteFooterLink>
+                ))}
+            </SiteFooterLinks>
+        </SiteFooter>
+    );
+}

package/src/site/suite-header.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {Button} from "@repraze/kernelkit/components/button";
+import {Separator} from "@repraze/kernelkit/components/separator";
+import {
+    SiteHeader,
+    SiteHeaderActions,
+    SiteHeaderBrand,
+    SiteHeaderContent,
+    SiteHeaderMenu,
+    SiteNav,
+    SiteNavLink,
+} from "@repraze/kernelkit/components/site-header";
+import {ThemeMenu} from "@repraze/kernelkit/components/theme-menu";
+import type * as React from "react";
+import {useEffect, useState} from "react";
+
+import {GithubIcon} from "./github-icon";
+
+export interface SuiteNavItem {
+    label: string;
+    /** A router link as a `render` element (`<Link to="/ports" />`); or `href` for a plain anchor. */
+    render?: React.ReactElement;
+    href?: string;
+    /** Marks the entry current (`aria-current="page"`): the section the open page belongs to. */
+    current?: boolean;
+}
+
+export interface SuiteHeaderProps {
+    /** The brand (a BrandLogo), in the header and as the phone menu's title. */
+    brand: React.ReactNode;
+    /** Accessible name of the home link, e.g. "KernelKit home". */
+    brandLabel: string;
+    /** The home link as a `render` element (`<Link to="/" />`); a plain "/" anchor otherwise. */
+    home?: React.ReactElement;
+    nav: SuiteNavItem[];
+    /** Accessible name of the nav (default "Main"). */
+    navLabel?: string;
+    /** The search (DocsSearch, or the site's own), before the separator. */
+    search?: React.ReactNode;
+    /** Replaces the default `<ThemeMenu />`. */
+    themeMenu?: React.ReactNode;
+    /** The repository button (a GitHub icon). */
+    repository?: {href: string; label?: string; icon?: React.ReactNode};
+    /** The phone menu's content after the nav links (the docs nav, a tree). */
+    menu?: React.ReactNode;
+    /** Closes the phone menu when it changes: pass the pathname. */
+    locationKey?: string;
+}
+
+/**
+ * The suite's site header (GUIDELINES §7b): phone menu, brand, mono nav, then search · theme · repository.
+ * Every site renders this; only the brand, nav and menu content differ.
+ */
+export function SuiteHeader({
+    brand,
+    brandLabel,
+    home,
+    nav,
+    navLabel = "Main",
+    search,
+    themeMenu,
+    repository,
+    menu,
+    locationKey,
+}: SuiteHeaderProps) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    useEffect(() => setMenuOpen(false), [locationKey]);
+
+    const navLinks = nav.map((item) => (
+        <SiteNavLink
+            key={item.label}
+            href={item.href}
+            aria-current={item.current ? "page" : undefined}
+            render={item.render}
+        >
+            {item.label}
+        </SiteNavLink>
+    ));
+
+    return (
+        <SiteHeader>
+            <SiteHeaderContent>
+                <SiteHeaderMenu title={brand} open={menuOpen} onOpenChange={setMenuOpen}>
+                    <nav aria-label={navLabel} className="flex flex-col gap-1 px-2 pt-2">
+                        {navLinks}
+                    </nav>
+                    {menu}
+                </SiteHeaderMenu>
+                <SiteHeaderBrand aria-label={brandLabel} href={home ? undefined : "/"} render={home}>
+                    {brand}
+                </SiteHeaderBrand>
+                <SiteNav aria-label={navLabel}>{navLinks}</SiteNav>
+                <SiteHeaderActions>
+                    {search}
+                    <Separator
+                        orientation="vertical"
+                        className="mx-1 hidden data-vertical:h-5 data-vertical:self-center sm:block"
+                    />
+                    {themeMenu ?? <ThemeMenu />}
+                    {repository ? (
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            render={<a href={repository.href} aria-label={repository.label ?? "GitHub"} />}
+                        >
+                            {repository.icon ?? <GithubIcon className="size-4" />}
+                        </Button>
+                    ) : null}
+                </SiteHeaderActions>
+            </SiteHeaderContent>
+        </SiteHeader>
+    );
+}

package/src/site/use-page-title.ts

@@ -0,0 +1,8 @@
+import {useEffect} from "react";
+
+/** Sets the tab title: "Page · Brand", or the bare brand on the home page (GUIDELINES §7b). */
+export function usePageTitle(title: string | undefined, brand: string) {
+    useEffect(() => {
+        document.title = title ? `${title} · ${brand}` : brand;
+    }, [title, brand]);
+}

package/src/styles/kernelkit.css

@@ -17,6 +17,8 @@
 @source "../provider";
 @source "../lib";
 @source "../hooks";
+@source "../docs";
+@source "../site";
 
 /* Nearest scope wins, so a .light preview nested in a .dark page isn't styled as dark. */
 @custom-variant dark (&:is(.dark, .dark *):not(.dark .light, .dark .light *));
@@ -185,6 +187,62 @@
             translate: 250% 0;
         }
     }
+    /* Spinner variants (spinner.tsx) and segmented Progress: cells light up and fade, a glyph strip steps (braille), a cursor
+       blinks, equalizer bars bounce, a scan line sweeps. Delays are set per cell. */
+    --animate-loader-cell: kk-loader-cell 1.2s ease-in-out infinite;
+    @keyframes kk-loader-cell {
+        0%,
+        100% {
+            opacity: 0.2;
+        }
+        30% {
+            opacity: 1;
+        }
+        60% {
+            opacity: 0.2;
+        }
+    }
+    --animate-loader-braille: kk-loader-braille 0.8s steps(10) infinite;
+    @keyframes kk-loader-braille {
+        to {
+            translate: 0 -100%;
+        }
+    }
+    --animate-loader-blink: kk-loader-blink 1s step-end infinite;
+    @keyframes kk-loader-blink {
+        50% {
+            opacity: 0;
+        }
+    }
+    --animate-loader-bars: kk-loader-bars 0.9s ease-in-out infinite;
+    @keyframes kk-loader-bars {
+        0%,
+        100% {
+            scale: 1 0.3;
+        }
+        50% {
+            scale: 1 1;
+        }
+    }
+    --animate-loader-scan: kk-loader-scan 1.4s linear infinite;
+    @keyframes kk-loader-scan {
+        from {
+            translate: -100% 0;
+        }
+        to {
+            translate: 100% 0;
+        }
+    }
+    /* Shimmer: a highlight band sweeping across clipped text. */
+    --animate-shimmer: kk-shimmer 2s linear infinite;
+    @keyframes kk-shimmer {
+        from {
+            background-position: 100% 0;
+        }
+        to {
+            background-position: 0% 0;
+        }
+    }
     /* Boxes under 20px (checkbox, kbd keys, tiny chips): capped so they never turn into circles at xl. */
     --radius-box: min(calc(var(--kk-radius) * 0.5), 0.25rem);
 

package/src/styles/site.css

@@ -0,0 +1,15 @@
+/*
+ * The suite's site stylesheet: the kit's styles and the suite fonts (Geist to read, JetBrains Mono for
+ * code, labels and the wordmark). A site's index.css:
+ *
+ *     @import "tailwindcss";
+ *     @import "@repraze/kernelkit/site.css";
+ */
+@import "@fontsource-variable/geist";
+@import "@fontsource-variable/jetbrains-mono";
+@import "./kernelkit.css";
+
+:root {
+    --kk-font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+    --kk-font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
+}

package/src/vite/client.d.ts

@@ -0,0 +1,11 @@
+// Ambient types for docsMetaPlugin's modules: add "@repraze/kernelkit/vite/client" to tsconfig `types`.
+
+declare module "virtual:docs-meta" {
+    const meta: {slug: string; title: string; category: string; description: string; order?: number}[];
+    export default meta;
+}
+
+declare module "*?demo-sources" {
+    const sources: {functions: Record<string, string>};
+    export default sources;
+}