@vamos-ui/react 0.2.0 → 0.3.0

package/dist/components/backup-codes.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, Download, RefreshCw } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { Button } from "./button.js";
+export const backupCodesLabels = {
+    title: "Backup codes",
+    copy: "Copy",
+    copied: "Copied",
+    copiedAnnouncement: "Backup codes copied to the clipboard",
+    download: "Download",
+    regenerate: "New codes",
+    used: "used",
+    remaining: "{left} of {total} left",
+    fileHeader: "Backup codes — each code works once. Keep them somewhere safe.",
+};
+/**
+ * One-time recovery codes after two-factor enrolment: a numbered monospace grid with copy,
+ * download and regenerate. Used codes stay visible, struck through.
+ *
+ * ```tsx
+ * <BackupCodes codes={codes} used={["4K7Q-PX2M"]} onRegenerate={regenerate} />
+ * ```
+ */
+export const BackupCodes = React.forwardRef(function BackupCodes({ codes, used = [], title, filename = "backup-codes.txt", fileNote, onCopy, onDownload, onRegenerate, regenerating, labels, className, ...props }, ref) {
+    const t = useLabels("backupCodes", backupCodesLabels, labels);
+    const f = useFormat();
+    const [copied, setCopied] = React.useState(false);
+    const usedSet = React.useMemo(() => new Set(used), [used]);
+    const titleId = React.useId();
+    const text = React.useMemo(() => [fileNote, t("fileHeader"), "", ...codes.map((c, i) => `${String(i + 1).padStart(2, " ")}. ${c}${usedSet.has(c) ? ` (${t("used")})` : ""}`)].filter((l) => l !== undefined).join("\n") + "\n", [codes, usedSet, fileNote, t]);
+    React.useEffect(() => {
+        if (!copied)
+            return;
+        const id = window.setTimeout(() => setCopied(false), 2000);
+        return () => window.clearTimeout(id);
+    }, [copied]);
+    const copy = async () => {
+        try {
+            await navigator.clipboard?.writeText(text);
+        }
+        catch {
+            /* clipboard blocked — still report so the user can select manually */
+        }
+        setCopied(true);
+        onCopy?.(text);
+    };
+    const download = () => {
+        if (onDownload)
+            return onDownload(text);
+        const url = URL.createObjectURL(new Blob([text], { type: "text/plain;charset=utf-8" }));
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        a.click();
+        window.setTimeout(() => URL.revokeObjectURL(url), 0);
+    };
+    const left = codes.filter((c) => !usedSet.has(c)).length;
+    const heading = title === undefined ? t("title") : title;
+    return (_jsxs("div", { ref: ref, "data-slot": "backup-codes", role: "group", "aria-labelledby": heading ? titleId : undefined, className: cn("grid gap-3", className), ...props, children: [heading ? (_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsx("h3", { id: titleId, className: "text-sm font-medium text-fg", children: heading }), _jsx("span", { className: "text-xs text-fg-muted tabular", children: t("remaining", { left: f.number(left), total: f.number(codes.length) }) })] })) : null, _jsx("ol", { className: "grid grid-cols-2 gap-x-6 gap-y-1.5 rounded-ui border border-line bg-surface-2 px-4 py-3.5 font-mono text-[13px] tabular", translate: "no", children: codes.map((code, i) => {
+                    const spent = usedSet.has(code);
+                    return (_jsxs("li", { "data-used": spent || undefined, className: "flex items-baseline gap-3", children: [_jsx("span", { "aria-hidden": "true", className: "w-4 text-end text-[11px] text-fg-subtle", children: i + 1 }), _jsx("span", { className: cn("tracking-wide select-all", spent ? "text-fg-subtle line-through decoration-fg-subtle" : "text-fg"), children: code }), spent ? _jsxs("span", { className: "sr-only", children: ["(", t("used"), ")"] }) : null] }, code));
+                }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { size: "sm", variant: "secondary", onClick: copy, children: [copied ? _jsx(Check, { "aria-hidden": "true" }) : _jsx(Copy, { "aria-hidden": "true" }), copied ? t("copied") : t("copy")] }), _jsxs(Button, { size: "sm", variant: "secondary", onClick: download, children: [_jsx(Download, { "aria-hidden": "true" }), t("download")] }), onRegenerate ? (_jsxs(Button, { size: "sm", variant: "ghost", className: "ms-auto", onClick: onRegenerate, loading: regenerating, children: [_jsx(RefreshCw, { "aria-hidden": "true" }), t("regenerate")] })) : null, _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied ? t("copiedAnnouncement") : "" })] })] }));
+});

package/dist/components/breadcrumb.d.ts

@@ -15,7 +15,7 @@ export interface BreadcrumbItemData {
     label: React.ReactNode;
     href?: string;
     icon?: React.ReactNode;
-    /** Jump to siblings ("Companies › Acme ▾" → other companies). */
+    /** Jump to siblings ("Companies › Northpoint ▾" → other companies). */
     menu?: BreadcrumbMenuLink[];
 }
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
@@ -37,7 +37,7 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
  * `aria-current="page"` on the last item). Links go through the app's router `Link`.
  *
  * ```tsx
- * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Acme", href: "/companies/acme" }, { label: "Contacts" }]} />
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Northpoint", href: "/companies/northpoint" }, { label: "Contacts" }]} />
  * ```
  *
  * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.

package/dist/components/breadcrumb.js

@@ -21,7 +21,7 @@ const SizeContext = React.createContext("md");
  * `aria-current="page"` on the last item). Links go through the app's router `Link`.
  *
  * ```tsx
- * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Acme", href: "/companies/acme" }, { label: "Contacts" }]} />
+ * <Breadcrumb items={[{ label: "Companies", href: "/companies" }, { label: "Northpoint", href: "/companies/northpoint" }, { label: "Contacts" }]} />
  * ```
  *
  * Compound: `<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href/></BreadcrumbItem><BreadcrumbSeparator/>…<BreadcrumbPage/></BreadcrumbList></Breadcrumb>`.

package/dist/components/command.d.ts

@@ -102,7 +102,10 @@ export interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof
     icon?: React.ReactNode;
     /** Second line under the label. */
     description?: React.ReactNode;
-    /** `"mod+shift+n"` or `["mod","shift","n"]` — display only. */
+    /**
+     * `"mod+shift+n"` or `["mod","shift","n"]` — display only. An array without modifier keys is a
+     * key sequence (`["g","o"]` shows G then O).
+     */
     shortcut?: string | string[];
     /** Trailing meta (an app badge, a count). */
     badge?: React.ReactNode;
@@ -113,7 +116,10 @@ export interface CommandItemProps extends React.ComponentPropsWithoutRef<typeof
 }
 /** One selectable row. Highlighted with the arrow keys; Enter or click runs `onSelect`. */
 export declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
-/** Shortcut keycaps at the end of an item. */
+/**
+ * Shortcut keycaps at the end of an item. A string or an array with modifiers is one combination
+ * (`"mod+k"`, `["mod","k"]`); an array of plain keys is a sequence (`["g","o"]` → G O).
+ */
 export declare function CommandShortcut({ keys, className }: {
     keys: string | string[];
     className?: string;

package/dist/components/command.js

@@ -87,9 +87,14 @@ export const CommandSeparator = React.forwardRef(function CommandSeparator({ cla
 export const CommandItem = React.forwardRef(function CommandItem({ className, icon, description, shortcut, badge, chevron, loading, children, ...props }, ref) {
     return (_jsxs(Cmdk.Item, { ref: ref, "data-slot": "command-item", "aria-busy": loading || undefined, className: cn(itemVariants({ size: "md" }), "min-h-[calc(var(--control-h)*0.95)] gap-2.5 px-2.5 data-[selected=true]:bg-selected", className), ...props, children: [loading ? (_jsx(Spinner, { size: "xs", className: "shrink-0" })) : icon ? (_jsx("span", { "aria-hidden": true, className: cn("flex shrink-0 items-center text-fg-muted", description && "self-start pt-0.5"), children: icon })) : null, _jsxs("span", { className: itemSlots.label, children: [children, description ? _jsx("span", { className: cn(itemSlots.description, "mt-0.5 truncate"), children: description }) : null] }), badge != null ? _jsx("span", { className: "ms-auto flex shrink-0 items-center ps-3", children: badge }) : null, shortcut ? _jsx(CommandShortcut, { keys: shortcut, className: badge == null ? "ms-auto" : undefined }) : null, chevron ? _jsx(ChevronRight, { "aria-hidden": true, className: cn("size-3.5! shrink-0 text-fg-subtle rtl:-scale-x-100", !shortcut && badge == null && "ms-auto") }) : null] }));
 });
-/** Shortcut keycaps at the end of an item. */
+const MODIFIER_KEYS = /^(mod|ctrl|control|meta|cmd|command|alt|option|shift)$/i;
+/**
+ * Shortcut keycaps at the end of an item. A string or an array with modifiers is one combination
+ * (`"mod+k"`, `["mod","k"]`); an array of plain keys is a sequence (`["g","o"]` → G O).
+ */
 export function CommandShortcut({ keys, className }) {
-    return _jsx(KbdGroup, { keys: Array.isArray(keys) ? keys.join("+") : keys, size: "sm", variant: "ghost", className: cn("shrink-0 ps-3", className) });
+    const sequence = Array.isArray(keys) && keys.length > 1 && !keys.some((k) => MODIFIER_KEYS.test(k));
+    return (_jsx(KbdGroup, { keys: sequence ? keys : Array.isArray(keys) ? keys.join("+") : keys, size: "sm", variant: "ghost", className: cn("shrink-0 ps-3", className) }));
 }
 /**
  * Command inside a top-anchored dialog (fullscreen on phones). Focus goes to the input; Esc closes

package/dist/components/input.d.ts

@@ -47,7 +47,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
  *   <Input maxLength={60} showCount />
  * </Field>
  * <Input leading={<Search />} placeholder="Search contacts" clearable />
- * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="acme" />
+ * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="northpoint" />
  * ```
  */
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input.js

@@ -36,7 +36,7 @@ const setNativeValue = (el, value) => {
  *   <Input maxLength={60} showCount />
  * </Field>
  * <Input leading={<Search />} placeholder="Search contacts" clearable />
- * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="acme" />
+ * <Input addonStart="https://" addonEnd=".vamos.ist" defaultValue="northpoint" />
  * ```
  */
 export const Input = React.forwardRef(function Input(rawProps, forwardedRef) {

package/dist/components/pin-map.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+export type MapPinTone = "accent" | "neutral" | "info" | "success" | "warning" | "danger";
+export interface MapPin {
+    id: string;
+    lat: number;
+    lng: number;
+    /** Accessible name and callout title. */
+    label: string;
+    /** Callout body (address, status, ETA). */
+    description?: React.ReactNode;
+    tone?: MapPinTone;
+    /** Size for `variant="bubble"` (visitors, orders). */
+    value?: number;
+    /** Live ring — vehicles en route, new visitors. Off under reduced motion. */
+    pulse?: boolean;
+    /** Small glyph inside the marker (pin variant), e.g. a 12px icon or initials. */
+    icon?: React.ReactNode;
+}
+export interface PinMapBounds {
+    north: number;
+    south: number;
+    west: number;
+    east: number;
+}
+export interface PinMapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    pins: MapPin[];
+    /** Visible area. Omit to fit every pin. Expanded to match `aspectRatio` so nothing distorts. */
+    bounds?: PinMapBounds;
+    /** Width ÷ height. Default `16 / 10`. */
+    aspectRatio?: number;
+    /** `"pin"` (default) markers, small `"dot"`s, or value-sized `"bubble"`s. */
+    variant?: "pin" | "dot" | "bubble";
+    selectedId?: string | null;
+    defaultSelectedId?: string | null;
+    onSelectedIdChange?: (id: string | null) => void;
+    /** Callout for the selected pin. Default: label + description. `false` hides it. */
+    callout?: false | ((pin: MapPin) => React.ReactNode);
+    /** Always show labels next to markers (few pins only). */
+    showLabels?: boolean;
+    /** Replace the drawn sheet with your own layer (a static tile image, an SVG of districts). */
+    backdrop?: React.ReactNode;
+    /** Hide the coordinate ticks and scale bar. */
+    bare?: boolean;
+    /** Required: what the map shows ("Stores in Istanbul"). */
+    "aria-label": string;
+}
+/**
+ * Markers on a projected sheet — stores, field jobs, vehicles, live visitors — without a tile
+ * provider. Pins are positioned in Web Mercator inside `bounds`; pass a `backdrop` to lay them
+ * over your own static map. Selection is controlled or not; arrow keys move to the nearest pin
+ * in that direction, Enter selects, Escape clears.
+ *
+ * ```tsx
+ * <PinMap aria-label="Stores" pins={stores.map((s) => ({ id: s.id, lat: s.lat, lng: s.lng, label: s.name }))}
+ *   selectedId={selected} onSelectedIdChange={setSelected} />
+ * ```
+ */
+export declare const PinMap: React.ForwardRefExoticComponent<PinMapProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pin-map.js

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { useFormat } from "../lib/locale.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+const mercY = (lat) => Math.log(Math.tan(Math.PI / 4 + (Math.max(-85, Math.min(85, lat)) * Math.PI) / 360));
+const toRad = (deg) => (deg * Math.PI) / 180;
+/** Percent string with fixed precision — identical on server and client. */
+const pct = (v) => `${(v * 100).toFixed(3)}%`;
+function fitBounds(pins, bounds, aspect) {
+    let b = bounds;
+    if (!b) {
+        if (pins.length === 0)
+            b = { north: 1, south: -1, west: -1, east: 1 };
+        else {
+            const lats = pins.map((p) => p.lat);
+            const lngs = pins.map((p) => p.lng);
+            const [n, s, w, e] = [Math.max(...lats), Math.min(...lats), Math.min(...lngs), Math.max(...lngs)];
+            const padLat = Math.max((n - s) * 0.14, 0.01);
+            const padLng = Math.max((e - w) * 0.1, 0.01);
+            b = { north: n + padLat, south: s - padLat, west: w - padLng, east: e + padLng };
+        }
+    }
+    // Expand the short side so the Mercator projection keeps true shapes at this aspect ratio.
+    const xSpan = toRad(b.east - b.west);
+    const ySpan = mercY(b.north) - mercY(b.south);
+    if (xSpan / ySpan < aspect) {
+        const extra = (ySpan * aspect - xSpan) / 2;
+        const d = (extra * 180) / Math.PI;
+        return { ...b, west: b.west - d, east: b.east + d };
+    }
+    const targetY = xSpan / aspect;
+    const mid = (mercY(b.north) + mercY(b.south)) / 2;
+    const inv = (y) => (Math.atan(Math.exp(y)) * 360) / Math.PI - 90;
+    return { ...b, north: inv(mid + targetY / 2), south: inv(mid - targetY / 2) };
+}
+const toneFill = {
+    accent: "bg-accent text-accent-fg",
+    neutral: "bg-fg-muted text-scene",
+    info: "bg-info text-scene",
+    success: "bg-success text-scene",
+    warning: "bg-warning text-scene",
+    danger: "bg-danger text-scene",
+};
+const toneVar = {
+    accent: "var(--accent)",
+    neutral: "var(--fg-muted)",
+    info: "var(--info)",
+    success: "var(--success)",
+    warning: "var(--warning)",
+    danger: "var(--danger)",
+};
+/** A tidy step for ticks: 0.01, 0.02, 0.05, 0.1 … */
+function niceStep(span, target) {
+    const raw = span / target;
+    const pow = 10 ** Math.floor(Math.log10(raw));
+    const m = raw / pow;
+    return (m < 1.5 ? 1 : m < 3.5 ? 2 : m < 7.5 ? 5 : 10) * pow;
+}
+/**
+ * Markers on a projected sheet — stores, field jobs, vehicles, live visitors — without a tile
+ * provider. Pins are positioned in Web Mercator inside `bounds`; pass a `backdrop` to lay them
+ * over your own static map. Selection is controlled or not; arrow keys move to the nearest pin
+ * in that direction, Enter selects, Escape clears.
+ *
+ * ```tsx
+ * <PinMap aria-label="Stores" pins={stores.map((s) => ({ id: s.id, lat: s.lat, lng: s.lng, label: s.name }))}
+ *   selectedId={selected} onSelectedIdChange={setSelected} />
+ * ```
+ */
+export const PinMap = React.forwardRef(function PinMap({ pins, bounds, aspectRatio = 16 / 10, variant = "pin", selectedId: selectedProp, defaultSelectedId = null, onSelectedIdChange, callout, showLabels, backdrop, bare, className, style, children, ...props }, ref) {
+    const f = useFormat();
+    const [selectedId, setSelectedId] = useControllableState({ value: selectedProp, defaultValue: defaultSelectedId, onChange: onSelectedIdChange, name: "PinMap" });
+    const [focusId, setFocusId] = React.useState(null);
+    const pinRefs = React.useRef(new Map());
+    const calloutId = React.useId();
+    const b = React.useMemo(() => fitBounds(pins, bounds, aspectRatio), [pins, bounds, aspectRatio]);
+    const yTop = mercY(b.north);
+    const ySpan = yTop - mercY(b.south);
+    const project = React.useCallback((lat, lng) => ({ x: (lng - b.west) / (b.east - b.west), y: (yTop - mercY(lat)) / ySpan }), [b, yTop, ySpan]);
+    const placed = React.useMemo(() => pins.map((p) => ({ pin: p, ...project(p.lat, p.lng) })), [pins, project]);
+    const maxValue = Math.max(1, ...pins.map((p) => p.value ?? 0));
+    const tabStop = focusId && pins.some((p) => p.id === focusId) ? focusId : selectedId && pins.some((p) => p.id === selectedId) ? selectedId : pins[0]?.id;
+    const moveFocus = (id) => {
+        if (!id)
+            return;
+        setFocusId(id);
+        pinRefs.current.get(id)?.focus();
+    };
+    const onKeyDown = (e, from) => {
+        const dir = { ArrowRight: [1, 0], ArrowLeft: [-1, 0], ArrowDown: [0, 1], ArrowUp: [0, -1] }[e.key];
+        if (dir) {
+            e.preventDefault();
+            const rtl = getComputedStyle(e.currentTarget).direction === "rtl" && dir[0] !== 0;
+            const [dx, dy] = rtl ? [-dir[0], dir[1]] : dir;
+            let best;
+            let bestScore = Infinity;
+            for (const p of placed) {
+                if (p.pin.id === from.pin.id)
+                    continue;
+                const vx = (p.x - from.x) * aspectRatio;
+                const vy = p.y - from.y;
+                const along = vx * dx + vy * dy;
+                if (along <= 0.0001)
+                    continue;
+                const across = Math.abs(vx * dy - vy * dx);
+                const score = along + across * 2;
+                if (score < bestScore) {
+                    bestScore = score;
+                    best = p;
+                }
+            }
+            moveFocus(best?.pin.id);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            moveFocus(pins[0]?.id);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            moveFocus(pins.at(-1)?.id);
+        }
+        else if (e.key === "Escape" && selectedId) {
+            e.preventDefault();
+            setSelectedId(null);
+        }
+    };
+    // Ticks and scale bar.
+    const latStep = niceStep(b.north - b.south, 4);
+    const lngStep = niceStep(b.east - b.west, 6);
+    const latTicks = [];
+    for (let v = Math.ceil(b.south / latStep) * latStep; v <= b.north; v += latStep)
+        latTicks.push(Number(v.toFixed(6)));
+    const lngTicks = [];
+    for (let v = Math.ceil(b.west / lngStep) * lngStep; v <= b.east; v += lngStep)
+        lngTicks.push(Number(v.toFixed(6)));
+    const decimals = Math.max(0, -Math.floor(Math.log10(Math.min(latStep, lngStep))));
+    const widthKm = (b.east - b.west) * 111.32 * Math.cos(toRad((b.north + b.south) / 2));
+    const scaleKm = niceStep(widthKm, 5);
+    const scaleShare = scaleKm / widthKm;
+    const scaleLabel = scaleKm >= 1 ? f.number(scaleKm, { style: "unit", unit: "kilometer", unitDisplay: "short" }) : f.number(Math.round(scaleKm * 1000), { style: "unit", unit: "meter", unitDisplay: "short" });
+    const selected = placed.find((p) => p.pin.id === selectedId);
+    const renderCallout = callout === false ? null : (callout ?? ((p) => (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-[13px] font-medium text-fg", children: p.label }), p.description ? _jsx("div", { className: "mt-0.5 text-xs text-fg-muted", children: p.description }) : null] }))));
+    return (_jsxs("div", { ref: ref, role: "group", "data-slot": "pin-map", className: cn("relative isolate w-full overflow-hidden rounded-ui border border-line bg-surface-2 select-none", className), style: { aspectRatio: String(aspectRatio), ...style }, ...props, children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 -z-10", children: backdrop ?? (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 bg-[radial-gradient(color-mix(in_oklch,var(--fg)_14%,transparent)_0.8px,transparent_1px)] bg-[length:14px_14px] opacity-70" }), _jsxs("svg", { className: "absolute inset-0 size-full", preserveAspectRatio: "none", viewBox: "0 0 100 100", children: [latTicks.map((v) => {
+                                    const y = project(v, b.west).y * 100;
+                                    return _jsx("line", { x1: "0", x2: "100", y1: y, y2: y, vectorEffect: "non-scaling-stroke", stroke: "var(--line)", strokeWidth: "1" }, `la${v}`);
+                                }), lngTicks.map((v) => {
+                                    const x = project(b.north, v).x * 100;
+                                    return _jsx("line", { y1: "0", y2: "100", x1: x, x2: x, vectorEffect: "non-scaling-stroke", stroke: "var(--line)", strokeWidth: "1" }, `lo${v}`);
+                                })] })] })) }), !bare ? (_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 font-mono text-[9.5px] text-fg-subtle tabular", children: [latTicks.map((v) => (_jsxs("span", { className: "absolute start-1.5 -translate-y-full pb-0.5", style: { top: pct(project(v, b.west).y) }, children: [Math.abs(v).toFixed(decimals), "\u00B0", v >= 0 ? "N" : "S"] }, `tl${v}`))), lngTicks.slice(1).map((v) => (_jsxs("span", { className: "absolute top-1.5 ps-1", style: { left: pct(project(b.north, v).x) }, children: [Math.abs(v).toFixed(decimals), "\u00B0", v >= 0 ? "E" : "W"] }, `tg${v}`))), _jsxs("span", { className: "absolute inset-x-3 bottom-2.5 flex flex-col items-end gap-1", children: [_jsx("span", { children: scaleLabel }), _jsx("span", { className: "block h-1 border-x border-b border-fg-subtle", style: { width: pct(scaleShare) } })] })] })) : null, _jsxs("div", { className: "absolute inset-0", children: [placed.map(({ pin, x, y }) => {
+                        const tone = pin.tone ?? "accent";
+                        const isSelected = pin.id === selectedId;
+                        const size = variant === "bubble" ? Math.round(10 + Math.sqrt((pin.value ?? 0) / maxValue) * 34) : variant === "dot" ? 10 : 22;
+                        return (_jsxs("button", { ref: (el) => {
+                                if (el)
+                                    pinRefs.current.set(pin.id, el);
+                                else
+                                    pinRefs.current.delete(pin.id);
+                            }, type: "button", "data-slot": "pin-map-pin", "data-selected": isSelected || undefined, "aria-pressed": isSelected, "aria-label": pin.label, "aria-describedby": isSelected && renderCallout ? calloutId : undefined, tabIndex: pin.id === tabStop ? 0 : -1, onFocus: () => setFocusId(pin.id), onClick: () => setSelectedId(isSelected ? null : pin.id), onKeyDown: (e) => onKeyDown(e, { pin, x, y }), className: cn("group/pin absolute grid -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]", isSelected ? "z-20" : "z-10 hover:z-20 focus-visible:z-20"), style: { left: pct(x), top: pct(y), width: Math.max(size, 24), height: Math.max(size, 24) }, children: [pin.pulse ? (_jsx("span", { "aria-hidden": "true", className: "absolute rounded-full opacity-60 motion-safe:animate-ping", style: { width: Math.min(size, 22), height: Math.min(size, 22), background: toneVar[tone] } })) : null, variant === "bubble" ? (_jsx("span", { "aria-hidden": "true", className: "rounded-full border transition-transform duration-200 group-hover/pin:scale-105 motion-reduce:transition-none", style: {
+                                        width: size,
+                                        height: size,
+                                        background: `color-mix(in oklch, ${toneVar[tone]} ${isSelected ? 55 : 30}%, transparent)`,
+                                        borderColor: toneVar[tone],
+                                    } })) : (_jsx("span", { "aria-hidden": "true", className: cn("relative grid place-items-center rounded-full ring-2 ring-[var(--surface-solid)] shadow-[0_1px_3px_rgb(0_0_0/0.25)] transition-transform duration-200 group-hover/pin:scale-110 motion-reduce:transition-none [&_svg]:size-3", toneFill[tone], isSelected && "scale-125 ring-[var(--fg)]"), style: { width: variant === "dot" ? 9 : 18, height: variant === "dot" ? 9 : 18 }, children: variant === "pin" ? pin.icon : null })), showLabels ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute start-full ms-0.5 rounded-ui-sm bg-[color-mix(in_oklch,var(--surface-solid)_82%,transparent)] px-1 text-[11px] font-medium whitespace-nowrap text-fg", children: pin.label })) : null] }, pin.id));
+                    }), selected && renderCallout ? (_jsx("div", { id: calloutId, "data-slot": "pin-map-callout", className: cn("surface-popover ui-pop pointer-events-none absolute z-30 w-max max-w-56 -translate-x-1/2 rounded-ui px-3 py-2", selected.y < 0.35 ? "mt-4" : "-translate-y-full -mt-4"), style: { left: `clamp(7rem, ${pct(selected.x)}, calc(100% - 7rem))`, top: pct(selected.y) }, children: renderCallout(selected.pin) })) : null] }), children] }));
+});

package/dist/components/qr-code.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { encodeQr, qrPath, type QrErrorCorrection, type QrMatrix } from "./_qr-core.js";
+export { encodeQr, qrPath, type QrErrorCorrection, type QrMatrix };
+export interface QrCodeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Text to encode (URL, otpauth:// URI, Wi-Fi string…). UTF-8, byte mode. */
+    value: string;
+    /** Accessible name — say what scanning does: "QR code to add Kiln & Linen to your authenticator app". */
+    "aria-label": string;
+    /** `"M"` (default) recovers ~15% damage; a centre mark switches to `"H"` automatically. */
+    errorCorrection?: QrErrorCorrection;
+    /** Rendered width (px or any CSS length). Default `176`. */
+    size?: number | string;
+    /**
+     * Quiet zone in modules. Default `4` without a plate, `2` on the plate (the plate's padding
+     * adds the rest). Scanners need light space around the code.
+     */
+    margin?: number;
+    /**
+     * Draw the code on a light plate (default). Codes scan most reliably dark-on-light, so the plate
+     * stays light in dark mode. `false` uses the current text colour on a transparent background.
+     */
+    plate?: boolean;
+    /** Shown when `value` is too long for version 40. Default "Too long for a QR code". */
+    fallback?: React.ReactNode;
+    /** Small mark in the centre (logo, icon). Keep it under ~20% of the width. */
+    children?: React.ReactNode;
+}
+/**
+ * A QR code drawn as one SVG path — for two-factor enrolment, invite links, tickets and
+ * payment slips. Encoded on the server or client with no dependency; works in RSC.
+ *
+ * ```tsx
+ * <QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />
+ * ```
+ */
+export declare const QrCode: React.ForwardRefExoticComponent<QrCodeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/qr-code.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { encodeQr, qrPath } from "./_qr-core.js";
+export { encodeQr, qrPath };
+/**
+ * A QR code drawn as one SVG path — for two-factor enrolment, invite links, tickets and
+ * payment slips. Encoded on the server or client with no dependency; works in RSC.
+ *
+ * ```tsx
+ * <QrCode value={otpauthUri} aria-label="QR code for your authenticator app" />
+ * ```
+ */
+export const QrCode = React.forwardRef(function QrCode({ value, errorCorrection, size = 176, margin, plate = true, fallback = "Too long for a QR code", children, className, style, ...props }, ref) {
+    const ecl = errorCorrection ?? (children ? "H" : "M");
+    let qr = null;
+    try {
+        qr = encodeQr(value, { errorCorrection: ecl });
+    }
+    catch {
+        qr = null;
+    }
+    const quiet = margin ?? (plate ? 2 : 4);
+    const dim = qr ? qr.size + quiet * 2 : 0;
+    const width = typeof size === "number" ? `${size}px` : size;
+    return (_jsxs("div", { ref: ref, role: "img", "data-slot": "qr-code", "data-version": qr?.version, className: cn("relative inline-grid shrink-0 place-items-center", plate && "light rounded-ui border border-line bg-[var(--surface-solid)] p-2 text-fg shadow-[var(--surface-shadow)]", className), style: { width, ...style }, ...props, children: [qr ? (_jsx("svg", { viewBox: `0 0 ${dim} ${dim}`, "aria-hidden": "true", focusable: "false", shapeRendering: "crispEdges", className: "block size-full", children: _jsx("path", { d: qrPath(qr, quiet), fill: "currentColor" }) })) : (_jsx("span", { className: "grid aspect-square w-full place-items-center p-3 text-center text-xs text-fg-muted", children: fallback })), children && qr ? (_jsx("span", { "data-slot": "qr-code-mark", className: "absolute top-1/2 left-1/2 grid size-[22%] -translate-x-1/2 -translate-y-1/2 place-items-center rounded-ui-sm bg-[var(--surface-solid)] p-[3%] [&>svg]:size-full [&>img]:size-full [&>img]:object-contain", children: children })) : null] }));
+});

package/dist/components/record-detail-layout.d.ts

@@ -68,7 +68,7 @@ export interface RecordLayoutProps extends React.HTMLAttributes<HTMLDivElement>
  *
  * ```tsx
  * <RecordLayout>
- *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Acme"
+ *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Northpoint"
  *     status={<Badge tone="success">Customer</Badge>} facts={[{ label: "Owner", value: "Meltem Aydın" }]}
  *     pager={<RecordPager index={3} total={128} prevHref="/contacts/41" nextHref="/contacts/43" />} />
  *   <RecordMain>{tabs}</RecordMain>
@@ -86,7 +86,7 @@ export interface RecordHeaderProps extends Omit<React.HTMLAttributes<HTMLElement
     media?: React.ReactNode;
     /** The page's `<h1>`. */
     title: React.ReactNode;
-    /** "Head of Operations · Acme Corp". */
+    /** "Head of Operations · Northpoint Ltd". */
     subtitle?: React.ReactNode;
     /** Status badge next to the title. */
     status?: React.ReactNode;

package/dist/components/record-detail-layout.js

@@ -114,7 +114,7 @@ export const SidePaneHandle = React.forwardRef(function SidePaneHandle({ value,
  *
  * ```tsx
  * <RecordLayout>
- *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Acme"
+ *   <RecordHeader media={<Avatar name="Jane Doe" size="xl" />} title="Jane Doe" subtitle="Head of Ops · Northpoint"
  *     status={<Badge tone="success">Customer</Badge>} facts={[{ label: "Owner", value: "Meltem Aydın" }]}
  *     pager={<RecordPager index={3} total={128} prevHref="/contacts/41" nextHref="/contacts/43" />} />
  *   <RecordMain>{tabs}</RecordMain>

package/dist/components/sidebar.js

@@ -82,7 +82,7 @@ export const SidebarFooter = React.forwardRef(function SidebarFooter({ className
 export const SidebarGroup = React.forwardRef(function SidebarGroup({ label, className, children, ...props }, ref) {
     const { collapsed } = useSidebarCtx();
     const id = React.useId();
-    return (_jsxs("div", { ref: ref, "data-slot": "sidebar-group", role: label ? "group" : undefined, "aria-labelledby": label ? id : undefined, className: cn("grid", className), ...props, children: [label ? (collapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { id: id, className: "sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-4 my-2 h-px bg-nav-line" })] })) : (_jsx("span", { id: id, className: "px-4.5 pt-4 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/50", children: label }))) : null, _jsx("ul", { className: "grid gap-px", children: children })] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "sidebar-group", role: label ? "group" : undefined, "aria-labelledby": label ? id : undefined, className: cn("grid", className), ...props, children: [label ? (collapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { id: id, className: "sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-4 my-2 h-px bg-nav-line" })] })) : (_jsx("span", { id: id, className: "px-4.5 pt-4 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }))) : null, _jsx("ul", { className: "grid gap-px", children: children })] }));
 });
 /** A hairline between sections. */
 export function SidebarSeparator({ className }) {
@@ -286,7 +286,7 @@ function SidebarFlyoutItem({ label, href, rowClass, current, inTrail, external,
                                 e.preventDefault();
                                 close(true);
                             }
-                        }, children: [collapsed ? _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/60", children: label }) : null, _jsx(SubContext.Provider, { value: { placement: "flyout", depth: 1, close: () => close(false) }, children: _jsx("ul", { className: "grid gap-px", children: sub }) })] }) }) })] }));
+                        }, children: [collapsed ? _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }) : null, _jsx(SubContext.Provider, { value: { placement: "flyout", depth: 1, close: () => close(false) }, children: _jsx("ul", { className: "grid gap-px", children: sub }) })] }) }) })] }));
 }
 /** A level-2 (or level-3) link under a `SidebarItem`. */
 export function SidebarSubItem({ id, label, href, badge, disabled, external, active, children, className }) {
@@ -300,9 +300,9 @@ export function SidebarSubItem({ id, label, href, badge, disabled, external, act
     const flyout = placement === "flyout";
     const pad = flyout ? (depth > 1 ? "ps-5 pe-2.5" : "px-2.5") : depth > 1 ? "ps-[54px] pe-3" : "ps-[42px] pe-3";
     const rowClass = cn(rowBase, "gap-2 py-1.5 text-[13px]", flyout ? "rounded-ui-sm hover:bg-nav-hover hover:text-nav-fg-strong" : "hover:text-nav-fg-strong", pad, current ? "font-medium text-nav-fg-strong" : undefined, className);
-    const body = (_jsxs(_Fragment, { children: [current && flyout ? _jsx(Check, { "aria-hidden": true, className: "size-3.5 shrink-0 text-accent" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), badgeText ? _jsxs("span", { className: "sr-only", children: [", ", badgeText] }) : null, typeof disabled === "string" ? _jsx("span", { className: "shrink-0 text-[10.5px] text-nav-fg/60", children: disabled }) : _jsx(SidebarBadgeView, { spec: badge, rail: false }), (external ?? (href ? isAbsoluteHref(href) : false)) ? _jsx(ExternalMark, {}) : null] }));
+    const body = (_jsxs(_Fragment, { children: [current && flyout ? _jsx(Check, { "aria-hidden": true, className: "size-3.5 shrink-0 text-accent" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), badgeText ? _jsxs("span", { className: "sr-only", children: [", ", badgeText] }) : null, typeof disabled === "string" ? _jsx("span", { className: "shrink-0 text-[10.5px] text-nav-fg/70", children: disabled }) : _jsx(SidebarBadgeView, { spec: badge, rail: false }), (external ?? (href ? isAbsoluteHref(href) : false)) ? _jsx(ExternalMark, {}) : null] }));
     if (hasChildren && flyout) {
-        return (_jsxs("li", { "data-slot": "sidebar-sub-item", className: "mt-1 first:mt-0", children: [_jsx("p", { className: "px-2.5 pt-1.5 pb-1 text-[11px] font-medium tracking-[0.06em] text-nav-fg/55", children: label }), _jsx("ul", { className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) })] }));
+        return (_jsxs("li", { "data-slot": "sidebar-sub-item", className: "mt-1 first:mt-0", children: [_jsx("p", { className: "px-2.5 pt-1.5 pb-1 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: label }), _jsx("ul", { className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) })] }));
     }
     if (hasChildren) {
         return (_jsx(Collapsible.Root, { asChild: true, open: open, onOpenChange: setOpen, children: _jsxs("li", { "data-slot": "sidebar-sub-item", children: [_jsx(Collapsible.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(rowClass, inTrail && "text-nav-fg-strong"), children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), _jsx(ChevronDown, { "aria-hidden": true, className: cn("size-3.5 shrink-0 opacity-60 transition-transform", open && "rotate-180") })] }) }), _jsx(Collapsible.Content, { className: "ui-collapse", children: _jsx("ul", { "aria-label": label, className: "grid gap-px", children: _jsx(SubContext.Provider, { value: { placement, depth: depth + 1, close }, children: children }) }) })] }) }));
@@ -401,16 +401,16 @@ export function AppSwitcher({ apps, activeApp, onSelect, subtitle, workspaces, a
         return null;
     const single = apps.length < 2 && !(workspaces && workspaces.length > 1);
     const workspace = workspaces?.find((w) => w.id === activeWorkspace);
-    const tile = (_jsxs(_Fragment, { children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-[9px] bg-accent text-accent-fg [&_svg]:size-[17px]", children: _jsx(AppIcon, { icon: app.icon }) }), _jsxs("span", { className: cn("min-w-0 flex-1 leading-tight", collapsed && "sr-only"), children: [_jsx("span", { className: "block truncate text-[13.5px] font-semibold text-nav-fg-strong", children: app.name }), _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/60", children: subtitle ?? (workspace ? workspace.name : app.description) })] })] }));
+    const tile = (_jsxs(_Fragment, { children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-[9px] bg-accent text-accent-fg [&_svg]:size-[17px]", children: _jsx(AppIcon, { icon: app.icon }) }), _jsxs("span", { className: cn("min-w-0 flex-1 leading-tight", collapsed && "sr-only"), children: [_jsx("span", { className: "block truncate text-[13.5px] font-semibold text-nav-fg-strong", children: app.name }), _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/75", children: subtitle ?? (workspace ? workspace.name : app.description) })] })] }));
     const boxClass = cn("flex w-full items-center gap-2.5 rounded-ui-sm p-1.5 text-start", collapsed && "justify-center");
     if (single)
         return _jsx("div", { className: cn(boxClass, className), children: tile });
-    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(boxClass, "transition-colors hover:bg-nav-hover focus-ring", className), children: [_jsx("span", { className: "sr-only", children: t("switchApp", { app: app.name }) }), _jsx("span", { "aria-hidden": true, className: "contents", children: tile }), !collapsed ? _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-4 shrink-0 text-nav-fg/50" }) : null] }) }), _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { side: collapsed ? (dir === "rtl" ? "left" : "right") : "bottom", align: "start", sideOffset: 6, collisionPadding: 12, "aria-label": t("apps"), "data-variant": variant, className: "vui-sidebar-flyout ui-pop z-(--z-popover) w-64 max-w-[calc(100vw-1.5rem)] rounded-ui-lg p-1.5 outline-none", children: [workspaces && workspaces.length > 1 ? (_jsxs("div", { role: "group", "aria-label": t("workspaces"), className: "mb-1 border-b border-nav-line pb-1.5", children: [_jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/55", children: t("workspaces") }), workspaces.map((w) => (_jsxs("button", { type: "button", "aria-pressed": w.id === activeWorkspace, onClick: () => {
+    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn(boxClass, "transition-colors hover:bg-nav-hover focus-ring", className), children: [_jsx("span", { className: "sr-only", children: t("switchApp", { app: app.name }) }), _jsx("span", { "aria-hidden": true, className: "contents", children: tile }), !collapsed ? _jsx(ChevronsUpDown, { "aria-hidden": true, className: "size-4 shrink-0 text-nav-fg/50" }) : null] }) }), _jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { side: collapsed ? (dir === "rtl" ? "left" : "right") : "bottom", align: "start", sideOffset: 6, collisionPadding: 12, "aria-label": t("apps"), "data-variant": variant, className: "vui-sidebar-flyout ui-pop z-(--z-popover) w-64 max-w-[calc(100vw-1.5rem)] rounded-ui-lg p-1.5 outline-none", children: [workspaces && workspaces.length > 1 ? (_jsxs("div", { role: "group", "aria-label": t("workspaces"), className: "mb-1 border-b border-nav-line pb-1.5", children: [_jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: t("workspaces") }), workspaces.map((w) => (_jsxs("button", { type: "button", "aria-pressed": w.id === activeWorkspace, onClick: () => {
                                             onWorkspaceChange?.(w.id);
                                             setOpen(false);
-                                        }, className: "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start text-[13px] text-nav-fg hover:bg-nav-hover hover:text-nav-fg-strong focus-ring", children: [_jsx("span", { "aria-hidden": true, className: "grid size-6 place-items-center rounded-[7px] bg-nav-active text-[11px] font-semibold text-nav-fg-strong", children: w.name.slice(0, 1) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: w.name }), w.id === activeWorkspace ? _jsx(Check, { "aria-hidden": true, className: "size-4 text-accent" }) : null] }, w.id)))] })) : null, _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/55", children: t("apps") }), _jsx("ul", { className: "grid gap-px", children: apps.map((a) => {
+                                        }, className: "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start text-[13px] text-nav-fg hover:bg-nav-hover hover:text-nav-fg-strong focus-ring", children: [_jsx("span", { "aria-hidden": true, className: "grid size-6 place-items-center rounded-[7px] bg-nav-active text-[11px] font-semibold text-nav-fg-strong", children: w.name.slice(0, 1) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: w.name }), w.id === activeWorkspace ? _jsx(Check, { "aria-hidden": true, className: "size-4 text-accent" }) : null] }, w.id)))] })) : null, _jsx("p", { className: "px-2.5 pt-1 pb-1.5 text-[11px] font-medium tracking-[0.06em] text-nav-fg/70", children: t("apps") }), _jsx("ul", { className: "grid gap-px", children: apps.map((a) => {
                                     const isActive = a.id === app.id;
-                                    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("grid size-7 shrink-0 place-items-center rounded-[8px] [&_svg]:size-[15px]", isActive ? "bg-accent text-accent-fg" : "bg-nav-active text-nav-fg-strong"), children: _jsx(AppIcon, { icon: a.icon }) }), _jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "block text-[13px] font-medium text-nav-fg-strong", children: a.name }), a.description ? _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/55", children: a.description }) : null] }), isActive ? _jsx(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-accent" }) : null] }));
+                                    const inner = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("grid size-7 shrink-0 place-items-center rounded-[8px] [&_svg]:size-[15px]", isActive ? "bg-accent text-accent-fg" : "bg-nav-active text-nav-fg-strong"), children: _jsx(AppIcon, { icon: a.icon }) }), _jsxs("span", { className: "min-w-0 flex-1 leading-tight", children: [_jsx("span", { className: "block text-[13px] font-medium text-nav-fg-strong", children: a.name }), a.description ? _jsx("span", { className: "block truncate text-[11.5px] text-nav-fg/70", children: a.description }) : null] }), isActive ? _jsx(Check, { "aria-hidden": true, className: "size-4 shrink-0 text-accent" }) : null] }));
                                     const cls = "flex w-full items-center gap-2.5 rounded-ui-sm px-2 py-1.5 text-start hover:bg-nav-hover focus-ring";
                                     return (_jsx("li", { children: onSelect ? (_jsx("button", { type: "button", "aria-current": isActive ? "true" : undefined, className: cls, onClick: () => {
                                                 onSelect(a.id);