@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/slider.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { mergeIds } from "../lib/compose-refs.js";
+import { FieldContextReset, useFieldContext } from "../lib/field-context.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { Input } from "./input.js";
+const sliderLabels = {
+    min: "Minimum",
+    max: "Maximum",
+    value: "Value {index} of {total}",
+};
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const decimalsOf = (n) => {
+    const s = String(n);
+    const i = s.indexOf(".");
+    return i === -1 ? 0 : s.length - i - 1;
+};
+const snap = (n, min, step) => {
+    const d = decimalsOf(step);
+    return Number((Math.round((n - min) / step) * step + min).toFixed(d));
+};
+/**
+ * Pick a number or a range by dragging: price filter, salary band, deal probability, opacity.
+ * Radix Slider (WAI-ARIA: arrows ± step, PageUp/PageDown ± 10 steps, Home/End). Values are
+ * formatted with the provider locale (`aria-valuetext` included).
+ *
+ * ```tsx
+ * <Field label="Price per night">
+ *   <Slider defaultValue={[80, 240]} min={0} max={500} step={10} formatOptions={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} withInputs />
+ * </Field>
+ * <Slider defaultValue={[60]} marks={[0, 25, 50, 75, 100]} aria-label="Deal probability" />
+ * ```
+ */
+export const Slider = React.forwardRef(function Slider({ value: valueProp, defaultValue, onValueChange, onValueCommit, min = 0, max = 100, step = 1, marks, formatValue, formatOptions, showValue = "hover", withInputs, size = "md", thumbLabels, name, names, invalid, readOnly, required, disabled, labels, id, className, orientation = "horizontal", "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy, ...props }, ref) {
+    const field = useFieldContext();
+    const t = useLabels("slider", sliderLabels, labels);
+    const f = useFormat();
+    const [value, setValue] = useControllableState({
+        value: valueProp,
+        defaultValue: defaultValue ?? [min],
+        onChange: onValueChange,
+        name: "Slider",
+    });
+    const [dragging, setDragging] = React.useState(false);
+    const fmt = React.useCallback((n) => (formatValue ? formatValue(n) : f.number(n, formatOptions)), [formatValue, f, formatOptions]);
+    const isDisabled = disabled ?? field?.disabled;
+    const isReadOnly = readOnly ?? field?.readOnly;
+    const isInvalid = invalid ?? field?.invalid;
+    const isRequired = required ?? field?.required;
+    const formName = name ?? field?.name;
+    const autoId = React.useId().replace(/:/g, "");
+    const rootId = id ?? field?.id;
+    const groupLabel = labelledBy ?? field?.labelId;
+    const count = value.length;
+    const thumbName = (i) => {
+        const own = thumbLabels?.[i];
+        if (own)
+            return own;
+        if (count === 2)
+            return i === 0 ? t("min") : t("max");
+        if (count > 2)
+            return t("value", { index: i + 1, total: count });
+        return undefined;
+    };
+    const commit = (next) => {
+        if (isReadOnly)
+            return;
+        setValue(next);
+        onValueCommit?.(next);
+    };
+    const markList = (marks ?? []).map((m) => (typeof m === "number" ? { value: m, label: undefined } : m));
+    const pct = (n) => ((clamp(n, min, max) - min) / (max - min || 1)) * 100;
+    const vertical = orientation === "vertical";
+    // Radix keeps thumbs inside the track (half a thumb in at the ends); marks follow the same curve.
+    const half = size === "sm" ? 7 : 9;
+    const atThumb = (n) => {
+        const p = pct(n);
+        return `calc(${p}% + ${(half * (1 - p / 50)).toFixed(2)}px)`;
+    };
+    return (_jsxs("div", { "data-slot": "slider-field", "data-size": size, className: cn("grid gap-3", vertical && "h-full w-fit", className), "data-disabled": isDisabled ? "" : undefined, children: [_jsxs(SliderPrimitive.Root, { ...props, ref: ref, id: rootId, "data-slot": "slider", "data-readonly": isReadOnly ? "" : undefined, "data-dragging": dragging ? "" : undefined, "aria-invalid": isInvalid || undefined, min: min, max: max, step: step, orientation: orientation, disabled: isDisabled, value: value, onValueChange: (next) => {
+                    if (isReadOnly)
+                        return;
+                    setDragging(true);
+                    setValue(next);
+                }, onValueCommit: (next) => {
+                    setDragging(false);
+                    if (!isReadOnly)
+                        onValueCommit?.(next);
+                }, onPointerUp: (e) => {
+                    setDragging(false);
+                    props.onPointerUp?.(e);
+                }, className: cn("group/slider relative flex touch-none select-none items-center data-disabled:opacity-45", vertical ? "h-full min-h-32 w-5 flex-col" : "h-5 w-full", isReadOnly && "cursor-default", 
+                // room for the value bubble
+                showValue === "always" && !vertical && "mt-7", markList.length > 0 && !vertical && (markList.some((m) => m.label != null) ? "mb-7" : "mb-2")), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("relative grow overflow-hidden rounded-full bg-track", vertical ? (size === "sm" ? "w-1" : "w-1.5") : size === "sm" ? "h-1" : "h-1.5", "group-aria-invalid/slider:bg-[color-mix(in_srgb,var(--danger)_25%,transparent)]"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("absolute rounded-full bg-accent-ink", vertical ? "w-full" : "h-full", "group-aria-invalid/slider:bg-danger group-data-readonly/slider:bg-fg-subtle") }) }), markList.length ? (_jsx("div", { "aria-hidden": true, className: cn("pointer-events-none absolute", vertical ? "inset-y-0 start-full ms-1.5" : "inset-x-0 top-full mt-1"), children: markList.map((m) => {
+                            const active = count === 1 ? m.value <= value[0] : m.value >= Math.min(...value) && m.value <= Math.max(...value);
+                            return (_jsxs("span", { "data-active": active ? "" : undefined, className: cn("absolute flex items-center gap-1", vertical ? "-translate-y-1/2 flex-row" : "-translate-x-1/2 flex-col rtl:translate-x-1/2"), style: vertical ? { bottom: atThumb(m.value) } : { insetInlineStart: atThumb(m.value) }, children: [_jsx("span", { className: cn("rounded-full", vertical ? "h-px w-1.5" : "h-1.5 w-px", active ? "bg-accent-ink" : "bg-field-border-hover") }), m.label != null ? _jsx("span", { className: "whitespace-nowrap font-mono text-[11px] tabular text-fg-subtle", children: m.label }) : null] }, m.value));
+                        }) })) : null, value.map((v, i) => {
+                        const own = thumbName(i);
+                        const labelSpanId = own && groupLabel ? `${autoId}-thumb-${i}` : undefined;
+                        return (_jsxs(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", name: names?.[i] ?? formName, "aria-label": labelSpanId ? undefined : (own ?? ariaLabel), "aria-labelledby": labelSpanId ? `${groupLabel} ${labelSpanId}` : own ? undefined : groupLabel, "aria-describedby": mergeIds(field?.describedBy, describedBy), "aria-valuetext": fmt(v), "aria-invalid": isInvalid || undefined, "aria-readonly": isReadOnly || undefined, "aria-required": isRequired || undefined, className: cn("group/thumb relative block rounded-full border-2 border-accent-ink bg-popover-nested outline-none", "shadow-[0_1px_3px_rgb(0_0_0/0.18)] transition-[transform,box-shadow] duration-150", "hover:shadow-[0_0_0_5px_var(--accent-soft),0_1px_3px_rgb(0_0_0/0.18)]", "focus-visible:shadow-[0_0_0_2px_var(--scene),0_0_0_4px_var(--ring)]", "motion-safe:active:scale-110 group-data-dragging/slider:cursor-grabbing", "group-aria-invalid/slider:border-danger group-data-readonly/slider:border-fg-subtle group-data-disabled/slider:cursor-not-allowed", size === "sm" ? "size-3.5" : "size-[18px]", isReadOnly ? "cursor-default" : "cursor-grab"), children: [labelSpanId ? (_jsx("span", { id: labelSpanId, hidden: true, children: own })) : null, showValue !== "never" ? (_jsx("span", { "aria-hidden": true, "data-slot": "slider-value", className: cn("pointer-events-none absolute whitespace-nowrap rounded-[6px] bg-fg px-1.5 py-0.5 font-mono text-[11px] font-medium tabular text-scene", "transition-[opacity,transform] duration-150", vertical ? "start-full top-1/2 ms-3 -translate-y-1/2" : "bottom-full left-1/2 mb-2.5 -translate-x-1/2", showValue === "hover" &&
+                                        "opacity-0 scale-95 group-hover/thumb:opacity-100 group-hover/thumb:scale-100 group-focus-visible/thumb:opacity-100 group-focus-visible/thumb:scale-100 group-data-dragging/slider:opacity-100 group-data-dragging/slider:scale-100"), children: fmt(v) })) : null] }, i));
+                    })] }), withInputs && !vertical ? (_jsx(FieldContextReset, { children: _jsx(SliderInputs, { value: value, min: min, max: max, step: step, size: size, disabled: isDisabled, readOnly: isReadOnly, names: value.map((_, i) => thumbName(i) ?? ariaLabel ?? t("value", { index: i + 1, total: count })), groupLabel: groupLabel, idBase: autoId, onCommit: commit }) })) : null] }));
+});
+function SliderInputs({ value, min, max, step, size, disabled, readOnly, names, groupLabel, idBase, onCommit, }) {
+    const [drafts, setDrafts] = React.useState(null);
+    const shown = drafts ?? value.map(String);
+    const apply = (i, raw) => {
+        setDrafts(null);
+        const n = Number(raw.replace(",", "."));
+        if (raw.trim() === "" || Number.isNaN(n))
+            return;
+        const next = [...value];
+        const lo = i > 0 ? next[i - 1] : min;
+        const hi = i < next.length - 1 ? next[i + 1] : max;
+        next[i] = clamp(snap(n, min, step), lo, hi);
+        onCommit(next);
+    };
+    return (_jsx("div", { "data-slot": "slider-inputs", className: "flex items-center gap-2", children: value.map((_, i) => (_jsxs(React.Fragment, { children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: "h-px w-3 shrink-0 bg-field-border" })) : null, _jsx("span", { id: `${idBase}-input-${i}`, hidden: true, children: names[i] }), _jsx(Input, { type: "number", inputMode: "decimal", size: size === "sm" ? "sm" : "md", min: min, max: max, step: step, disabled: disabled, readOnly: readOnly, "aria-labelledby": mergeIds(groupLabel, `${idBase}-input-${i}`), value: shown[i] ?? "", onChange: (e) => {
+                        const next = [...shown];
+                        next[i] = e.currentTarget.value;
+                        setDrafts(next);
+                    }, onBlur: (e) => apply(i, e.currentTarget.value), onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                            e.preventDefault();
+                            apply(i, e.currentTarget.value);
+                        }
+                    }, className: "w-28 min-w-0 flex-1 sm:flex-none", inputClassName: "tabular font-mono text-[13px]" })] }, i))) }));
+}

package/dist/components/slug-input.d.ts

@@ -0,0 +1,69 @@
+import * as React from "react";
+declare const slugLabels: {
+    edit: string;
+    editSlug: string;
+    done: string;
+    cancel: string;
+    auto: string;
+    autoHint: string;
+    regenerate: string;
+    checking: string;
+    available: string;
+    taken: string;
+    useSuggestion: string;
+    empty: string;
+    slug: string;
+};
+export type SlugInputLabels = typeof slugLabels;
+export interface SlugInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (slug: string) => void;
+    /** Text the slug is derived from (the title) until the user edits the slug. */
+    source?: string;
+    /** `true` = manual: stops following `source`. Saved content should start locked. */
+    locked?: boolean;
+    /** Default: `true` when there is an initial slug, else `false` (auto). */
+    defaultLocked?: boolean;
+    onLockedChange?: (locked: boolean) => void;
+    /** Shown before the slug: `"vamos.ist/blog/"`. */
+    prefix?: string;
+    /** Default 80. Cut at a word boundary when possible. */
+    maxLength?: number;
+    /** Transliteration rules. Default: the LocaleProvider's locale. */
+    locale?: string;
+    /**
+     * Async uniqueness check, debounced. Resolve `true` when free, or a message ("Used by
+     * “Spring menu”") when not. The signal aborts when the slug changes again.
+     */
+    validate?: (slug: string, signal: AbortSignal) => Promise<string | true>;
+    /** Offer a free alternative after a failed check ("spring-menu-2"). */
+    suggestUnique?: (slug: string) => Promise<string>;
+    /** Debounce for `validate`, ms. Default 350. */
+    validateDelay?: number;
+    /** `"field"`: always an input (default). `"permalink"`: a link with "Edit" that opens the input inline. */
+    variant?: "field" | "permalink";
+    /** Link target for the permalink view. Default: `prefix + slug` when the prefix looks like a URL. */
+    href?: string;
+    size?: "sm" | "md" | "lg";
+    name?: string;
+    id?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    placeholder?: string;
+    labels?: Partial<SlugInputLabels>;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+}
+/**
+ * URL slug derived from a title, with locale transliteration ("İşe Alım & Oryantasyon" →
+ * `ise-alim-ve-oryantasyon` in Turkish), a lock once edited by hand, and an optional async
+ * uniqueness check with a suggested alternative.
+ *
+ * ```tsx
+ * <Field label="URL"><SlugInput source={title} prefix="vamos.ist/blog/" validate={checkSlug} /></Field>
+ * <SlugInput variant="permalink" source={title} prefix="https://vamos.ist/blog/" />
+ * ```
+ */
+export declare const SlugInput: React.ForwardRefExoticComponent<SlugInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/slug-input.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, CircleAlert, Link2, Pencil, RefreshCw } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { mergeIds, useComposedRefs } from "../lib/compose-refs.js";
+import { useFieldContext } from "../lib/field-context.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { slugify } from "../lib/text.js";
+import { useControllableState, useLatest } from "../lib/use-controllable-state.js";
+import { useFormattedInput } from "../lib/use-formatted-input.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Spinner } from "./spinner.js";
+import { WithoutFieldName } from "./formatted-input.js";
+const slugLabels = {
+    edit: "Edit",
+    editSlug: "Edit URL",
+    done: "Done",
+    cancel: "Cancel",
+    auto: "Auto",
+    autoHint: "Follows the title until you edit it",
+    regenerate: "Regenerate from title",
+    checking: "Checking availability…",
+    available: "Available",
+    taken: "This URL is already in use",
+    useSuggestion: "Use {slug}",
+    empty: "Add a title to create the URL",
+    slug: "URL slug",
+};
+/**
+ * URL slug derived from a title, with locale transliteration ("İşe Alım & Oryantasyon" →
+ * `ise-alim-ve-oryantasyon` in Turkish), a lock once edited by hand, and an optional async
+ * uniqueness check with a suggested alternative.
+ *
+ * ```tsx
+ * <Field label="URL"><SlugInput source={title} prefix="vamos.ist/blog/" validate={checkSlug} /></Field>
+ * <SlugInput variant="permalink" source={title} prefix="https://vamos.ist/blog/" />
+ * ```
+ */
+export const SlugInput = React.forwardRef(function SlugInput(props, forwardedRef) {
+    const { value, defaultValue, onValueChange, source, locked: lockedProp, defaultLocked, onLockedChange, prefix, maxLength = 80, locale: localeProp, validate, suggestUnique, validateDelay = 350, variant = "field", href, size, name, id, disabled, invalid, placeholder, labels, className, "aria-label": ariaLabel, "aria-describedby": describedByProp, ...rest } = props;
+    const { locale: providerLocale } = useLocale();
+    const locale = localeProp ?? providerLocale;
+    const t = useLabels("slug", slugLabels, labels);
+    const field = useFieldContext();
+    const submitName = name ?? field?.name;
+    const messageId = React.useId();
+    const initial = value ?? defaultValue ?? "";
+    const [slug, setSlug] = useControllableState({ value, defaultValue: defaultValue ?? "", onChange: onValueChange, name: "SlugInput" });
+    const [locked, setLocked] = useControllableState({ value: lockedProp, defaultValue: defaultLocked ?? initial !== "", onChange: onLockedChange, name: "SlugInput" });
+    const derive = React.useCallback((s) => slugify(s, { locale, maxLength }), [locale, maxLength]);
+    // Follow the source while unlocked.
+    React.useEffect(() => {
+        if (locked || source === undefined)
+            return;
+        const next = derive(source);
+        if (next !== slug)
+            setSlug(next);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [source, locked, derive]);
+    /* ---------------- typing (sanitised live, caret kept) ---------------- */
+    const accept = (ch) => /^[\p{L}\p{N}\s_-]$/u.test(ch);
+    const sanitize = (typed) => {
+        const trailing = /[\s_-]$/.test(typed);
+        let s = slugify(typed, { locale, maxLength });
+        if (trailing && s && s.length < maxLength)
+            s += "-";
+        return s;
+    };
+    const engine = useFormattedInput({
+        value: slug,
+        accept,
+        format: sanitize,
+        parse: (d) => d.replace(/-+$/, ""),
+        toDisplay: (raw) => raw ?? "",
+        formatOnBlur: (d) => d.replace(/-+$/, ""),
+        onValueChange: (raw) => {
+            setSlug(raw ?? "");
+            if (!locked)
+                setLocked(true);
+        },
+    });
+    const ref = useComposedRefs(forwardedRef, engine.ref);
+    /* ---------------- uniqueness ---------------- */
+    const [check, setCheck] = React.useState({ state: "idle" });
+    const validateRef = useLatest(validate);
+    const suggestRef = useLatest(suggestUnique);
+    React.useEffect(() => {
+        const fn = validateRef.current;
+        if (!fn || !slug) {
+            setCheck({ state: "idle" });
+            return;
+        }
+        const ac = new AbortController();
+        setCheck({ state: "checking" });
+        const timer = setTimeout(async () => {
+            try {
+                const res = await fn(slug, ac.signal);
+                if (ac.signal.aborted)
+                    return;
+                if (res === true) {
+                    setCheck({ state: "ok" });
+                    return;
+                }
+                const message = typeof res === "string" && res ? res : t("taken");
+                setCheck({ state: "error", message });
+                const sug = suggestRef.current;
+                if (sug) {
+                    const suggestion = await sug(slug);
+                    if (!ac.signal.aborted && suggestion && suggestion !== slug)
+                        setCheck({ state: "error", message, suggestion });
+                }
+            }
+            catch {
+                if (!ac.signal.aborted)
+                    setCheck({ state: "idle" });
+            }
+        }, validateDelay);
+        return () => {
+            ac.abort();
+            clearTimeout(timer);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [slug, validateDelay]);
+    const regenerate = () => {
+        setLocked(false);
+        if (source !== undefined)
+            setSlug(derive(source));
+    };
+    const applySuggestion = (s) => {
+        setSlug(s);
+        setLocked(true);
+        engine.ref.current?.focus();
+    };
+    const isInvalid = invalid || check.state === "error";
+    const canRegenerate = locked && source !== undefined && derive(source) !== slug && !!derive(source);
+    const status = check.state === "checking" ? (_jsx(Spinner, { size: "xs", className: "text-fg-subtle" })) : check.state === "ok" ? (_jsx(Check, { "aria-hidden": true, className: "size-3.5 text-success" })) : check.state === "error" ? (_jsx(CircleAlert, { "aria-hidden": true, className: "size-3.5 text-danger" })) : null;
+    const lockControl = !locked && source !== undefined ? (_jsx("span", { "data-slot": "slug-input-auto", title: t("autoHint"), className: "me-1.5 inline-flex h-5 items-center rounded-full bg-accent-soft px-2 text-[11px] font-medium text-accent-ink", children: t("auto") })) : canRegenerate && !disabled ? (_jsx("button", { type: "button", "data-slot": "slug-input-regenerate", onClick: regenerate, "aria-label": t("regenerate"), title: t("regenerate"), className: "me-1 inline-flex size-7 items-center justify-center rounded-ui-sm text-fg-subtle transition-colors hover:bg-hover hover:text-fg focus-ring [&_svg]:size-3.5", children: _jsx(RefreshCw, { "aria-hidden": true, className: "rtl:-scale-x-100" }) })) : null;
+    const message = check.state === "error" ? (_jsxs("p", { id: messageId, "data-slot": "slug-input-message", className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-danger", children: [_jsx("span", { children: check.message }), check.suggestion ? (_jsx("button", { type: "button", onClick: () => applySuggestion(check.suggestion), className: "rounded-ui-sm font-mono text-[11.5px] font-medium text-fg underline decoration-line underline-offset-[3px] transition-colors hover:decoration-fg focus-ring", children: t("useSuggestion", { slug: check.suggestion }) })) : null] })) : null;
+    const live = (_jsx("span", { className: "sr-only", "aria-live": "polite", children: check.state === "checking" ? t("checking") : check.state === "ok" ? t("available") : check.state === "error" ? check.message : "" }));
+    const input = (extra) => (_jsx(WithoutFieldName, { children: _jsx(Input, { ref: ref, ...engine.inputProps, id: id, size: size, disabled: disabled, invalid: isInvalid, dir: "ltr", spellCheck: false, autoCapitalize: "off", autoComplete: "off", placeholder: placeholder ?? (source !== undefined && !source ? t("empty") : undefined), "aria-label": ariaLabel ?? (field ? undefined : t("slug")), "aria-describedby": mergeIds(describedByProp, message ? messageId : undefined), addonStart: prefix ? _jsx("span", { className: "max-w-[16rem] truncate font-mono text-[12px] text-fg-subtle", title: prefix, children: prefix }) : undefined, inputClassName: "font-mono text-[13px]", "data-slot": "slug-input-control", trailing: status || lockControl || extra?.trailingExtra ? (_jsxs("span", { className: "flex items-center gap-1", children: [status ? _jsx("span", { className: "flex size-5 items-center justify-center", children: status }) : null, lockControl, extra?.trailingExtra] })) : undefined, onKeyDown: (e) => {
+                extra?.onKeyDown?.(e);
+                if (!e.defaultPrevented)
+                    engine.inputProps.onKeyDown(e);
+            } }) }));
+    const hidden = submitName ? _jsx("input", { type: "hidden", name: submitName, value: slug, disabled: disabled }) : null;
+    if (variant === "permalink") {
+        return (_jsx(Permalink, { ...rest, className: className, slug: slug, prefix: prefix, href: href, disabled: disabled, t: t, input: input, message: message, live: live, hiddenInput: hidden, status: status, onCancel: (previous) => setSlug(previous), onConfirm: () => {
+                const el = engine.ref.current;
+                if (el)
+                    engine.inputProps.onBlur({ currentTarget: el });
+            } }));
+    }
+    return (_jsxs("div", { ...rest, "data-slot": "slug-input", "data-locked": locked ? "" : undefined, className: cn("grid min-w-0 gap-1.5", className), children: [input(), message, live, hidden] }));
+});
+/* ------------------------------------------------------------------ */
+/* Permalink view                                                      */
+/* ------------------------------------------------------------------ */
+function Permalink({ slug, prefix, href, disabled, t, input, message, live, hiddenInput, status, onCancel, onConfirm, className, ...rest }) {
+    const [editing, setEditing] = React.useState(false);
+    const previous = React.useRef(slug);
+    const editRef = React.useRef(null);
+    const wrapRef = React.useRef(null);
+    const returnFocus = React.useRef(false);
+    React.useEffect(() => {
+        if (editing)
+            wrapRef.current?.querySelector("input:not([type=hidden])")?.focus();
+        else if (returnFocus.current) {
+            returnFocus.current = false;
+            editRef.current?.focus();
+        }
+    }, [editing]);
+    const open = () => {
+        previous.current = slug;
+        setEditing(true);
+    };
+    const close = (keep) => {
+        if (keep)
+            onConfirm();
+        else
+            onCancel(previous.current);
+        returnFocus.current = true;
+        setEditing(false);
+    };
+    const link = href ?? (prefix && /^(https?:)?\/\//.test(prefix) ? prefix + slug : undefined);
+    return (_jsxs("div", { ...rest, ref: wrapRef, "data-slot": "slug-input", "data-variant": "permalink", className: cn("grid min-w-0 gap-1.5", className), children: [editing ? (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: input({
+                            onKeyDown: (e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault();
+                                    close(true);
+                                }
+                                else if (e.key === "Escape") {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    close(false);
+                                }
+                            },
+                        }) }), _jsx(Button, { size: "sm", variant: "primary", onClick: () => close(true), children: t("done") }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => close(false), children: t("cancel") })] })) : (_jsxs("div", { className: "flex min-w-0 items-center gap-2 text-[13px]", children: [_jsx(Link2, { "aria-hidden": true, className: "size-3.5 shrink-0 text-fg-subtle rtl:-scale-x-100" }), _jsx("span", { dir: "ltr", className: "min-w-0 truncate font-mono text-[12.5px]", children: link ? (_jsxs("a", { href: link, target: "_blank", rel: "noreferrer", className: "rounded-ui-sm text-fg-muted underline decoration-line underline-offset-[3px] transition-colors hover:text-fg hover:decoration-fg-subtle focus-ring", children: [_jsx("span", { className: "text-fg-subtle", children: prefix }), _jsx("span", { className: "text-fg", children: slug || "…" })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-fg-subtle", children: prefix }), _jsx("span", { className: "text-fg", children: slug || "…" })] })) }), status ? _jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: status }) : null, _jsxs(Button, { ref: editRef, size: "xs", variant: "ghost", className: "shrink-0", disabled: disabled, onClick: open, "aria-label": t("editSlug"), children: [_jsx(Pencil, { "aria-hidden": true }), " ", t("edit")] })] })), message, live, hiddenInput] }));
+}

package/dist/components/sparkline.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+/** A theme colour token, or any CSS colour. Tokens follow every theme axis. */
+export type SparklineColor = "currentColor" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "accent-ink" | "fg" | "fg-muted" | "fg-subtle" | "success" | "warning" | "danger" | "info" | (string & {});
+/** `"chart-2"` → `"var(--chart-2)"`; other values pass through. */
+export declare const sparklineColor: (c?: SparklineColor) => string;
+declare const SIZES: {
+    readonly xs: readonly [64, 20];
+    readonly sm: readonly [96, 32];
+    readonly md: readonly [160, 40];
+};
+export interface SparklineProps extends Omit<React.SVGAttributes<SVGSVGElement>, "values" | "color" | "width" | "height"> {
+    /** Data points, oldest first. `null` leaves a gap. */
+    values: ReadonlyArray<number | null>;
+    /** Default `"line"`. `"winloss"` draws up/down ticks from the sign of each value. */
+    variant?: "line" | "area" | "bars" | "winloss";
+    /** Preset box: xs 64×20 (table cells), sm 96×32, md 160×40. Default `"sm"`. */
+    size?: keyof typeof SIZES;
+    /** Pixel width, or `"100%"` to fill the container (strokes stay crisp). Overrides `size`. */
+    width?: number | "100%";
+    /** Pixel height. Overrides `size`. */
+    height?: number;
+    /** Token (`"chart-2"`, `"success"`…) or CSS colour. Default `currentColor`. */
+    color?: SparklineColor;
+    /** Stroke width of line/area. Default 1.6. */
+    strokeWidth?: number;
+    /** Dot on the last value. */
+    showLast?: boolean;
+    /** Dots on the lowest and highest value. */
+    showMinMax?: boolean;
+    /** Dashed reference line (target, average). */
+    reference?: number;
+    /** Shared scale `[min, max]` — use the same domain for every row of a table. */
+    domain?: readonly [number, number];
+    /** Accessible description. Without it the sparkline is decorative (`aria-hidden`). See `sparklineSummary()`. */
+    label?: string;
+}
+/**
+ * An axis-less mini trend: plain SVG, no chart library, server-component compatible.
+ * Use in Stat, table cells and list rows; decorative unless you pass `label`.
+ *
+ * ```tsx
+ * <Sparkline values={[4, 6, 5, 8, 7, 9, 12]} className="text-accent-ink" />
+ * <Sparkline values={weekly} variant="bars" size="xs" domain={[0, 120]} label={sparklineSummary(weekly)} />
+ * ```
+ */
+export declare const Sparkline: React.ForwardRefExoticComponent<SparklineProps & React.RefAttributes<SVGSVGElement>>;
+/** Direction of a series from its first to its last number: `1` up, `-1` down, `0` flat. */
+export declare function sparklineDirection(values: ReadonlyArray<number | null>): -1 | 0 | 1;
+/**
+ * Plain-English summary for a sparkline's `label`: "Rose from 4 to 14, peak 14".
+ * Pass `format` for locale numbers (`(n) => f.number(n)`), or write your own sentence.
+ */
+export declare function sparklineSummary(values: ReadonlyArray<number | null>, format?: (n: number) => string): string;
+export {};

package/dist/components/sparkline.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+const TOKENS = new Set(["chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "chart-6", "accent-ink", "fg", "fg-muted", "fg-subtle", "success", "warning", "danger", "info"]);
+/** `"chart-2"` → `"var(--chart-2)"`; other values pass through. */
+export const sparklineColor = (c = "currentColor") => (TOKENS.has(c) ? `var(--${c})` : c);
+const SIZES = { xs: [64, 20], sm: [96, 32], md: [160, 40] };
+/**
+ * An axis-less mini trend: plain SVG, no chart library, server-component compatible.
+ * Use in Stat, table cells and list rows; decorative unless you pass `label`.
+ *
+ * ```tsx
+ * <Sparkline values={[4, 6, 5, 8, 7, 9, 12]} className="text-accent-ink" />
+ * <Sparkline values={weekly} variant="bars" size="xs" domain={[0, 120]} label={sparklineSummary(weekly)} />
+ * ```
+ */
+export const Sparkline = React.forwardRef(function Sparkline({ values, variant = "line", size = "sm", width, height, color, strokeWidth = 1.6, showLast, showMinMax, reference, domain, label, className, style, ...props }, ref) {
+    const gradientId = `spark-${React.useId().replace(/:/g, "")}`;
+    const fluid = width === "100%";
+    const w = typeof width === "number" ? width : SIZES[size][0];
+    const h = height ?? SIZES[size][1];
+    const nums = values.filter((v) => typeof v === "number" && Number.isFinite(v));
+    const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+    const svgProps = {
+        ref,
+        "data-slot": "sparkline",
+        "data-variant": variant,
+        viewBox: `0 0 ${w} ${h}`,
+        width: fluid ? "100%" : w,
+        height: h,
+        preserveAspectRatio: fluid ? "none" : undefined,
+        className: cn("block shrink-0 overflow-visible", fluid && "w-full", className),
+        style: { color: color ? sparklineColor(color) : undefined, ...style },
+        focusable: "false",
+        ...a11y,
+        ...props,
+    };
+    if (nums.length === 0) {
+        return (_jsx("svg", { ...svgProps, children: _jsx("line", { x1: 0, x2: w, y1: h / 2, y2: h / 2, stroke: "var(--line)", strokeDasharray: "2 3", vectorEffect: "non-scaling-stroke" }) }));
+    }
+    const pad = variant === "bars" || variant === "winloss" ? 0 : Math.max(2, strokeWidth + 1.5);
+    const base = variant === "bars" ? [Math.min(0, ...nums), Math.max(0, ...nums)] : [Math.min(...nums), Math.max(...nums)];
+    const extra = reference === undefined ? [] : [reference];
+    const lo = domain ? domain[0] : Math.min(base[0], ...extra);
+    const hi = domain ? domain[1] : Math.max(base[1], ...extra);
+    const span = hi - lo || 1;
+    const flat = hi === lo;
+    const y = (v) => (flat ? h / 2 : h - pad - ((Math.min(hi, Math.max(lo, v)) - lo) / span) * (h - pad * 2));
+    const n = values.length;
+    const x = (i) => (n === 1 ? w / 2 : (i / (n - 1)) * w);
+    const stroke = { vectorEffect: "non-scaling-stroke" };
+    // A zero-length round-capped line renders as a true circle even when the SVG is stretched.
+    const dot = (i, v, key, r = 2.25) => (_jsx("path", { d: `M${x(i)} ${y(v)}h0`, stroke: "currentColor", strokeWidth: r * 2, strokeLinecap: "round", ...stroke }, key));
+    if (variant === "bars" || variant === "winloss") {
+        const slot = w / n;
+        const gap = Math.min(2, slot * 0.25);
+        const bw = Math.max(1, slot - gap);
+        const zero = variant === "winloss" ? h / 2 : y(Math.max(lo, Math.min(hi, 0)));
+        return (_jsxs("svg", { ...svgProps, children: [reference !== undefined && variant === "bars" ? (_jsx("line", { x1: 0, x2: w, y1: y(reference), y2: y(reference), stroke: "var(--fg-subtle)", strokeDasharray: "3 3", strokeWidth: 1, ...stroke })) : null, values.map((v, i) => {
+                    if (typeof v !== "number" || !Number.isFinite(v))
+                        return null;
+                    const bx = i * slot + gap / 2;
+                    if (variant === "winloss") {
+                        if (v === 0)
+                            return _jsx("rect", { x: bx, width: bw, y: h / 2 - 0.5, height: 1, fill: "var(--fg-subtle)" }, i);
+                        const up = v > 0;
+                        return _jsx("rect", { x: bx, width: bw, y: up ? 1 : h / 2 + 1, height: h / 2 - 2, rx: Math.min(1.5, bw / 3), fill: up ? "var(--success)" : "var(--danger)" }, i);
+                    }
+                    const top = Math.min(y(v), zero);
+                    const bh = Math.max(1, Math.abs(zero - y(v)));
+                    const last = i === n - 1;
+                    return _jsx("rect", { x: bx, width: bw, y: top, height: bh, rx: Math.min(1.5, bw / 3), fill: "currentColor", opacity: showLast && !last ? 0.45 : 1 }, i);
+                })] }));
+    }
+    // Line / area: split into segments at null gaps.
+    const segments = [];
+    let cur = [];
+    values.forEach((v, i) => {
+        if (typeof v === "number" && Number.isFinite(v))
+            cur.push([x(i), y(v)]);
+        else if (cur.length) {
+            segments.push(cur);
+            cur = [];
+        }
+    });
+    if (cur.length)
+        segments.push(cur);
+    const path = (seg) => seg.length === 1 ? `M${Math.max(0, seg[0][0] - 2)} ${seg[0][1]}H${Math.min(w, seg[0][0] + 2)}` : seg.map(([px, py], i) => `${i ? "L" : "M"}${px.toFixed(2)} ${py.toFixed(2)}`).join("");
+    const lastIdx = values.findLastIndex((v) => typeof v === "number" && Number.isFinite(v));
+    const minIdx = values.indexOf(Math.min(...nums));
+    const maxIdx = values.indexOf(Math.max(...nums));
+    return (_jsxs("svg", { ...svgProps, children: [variant === "area" ? (_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: 0.24 }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: 0 })] }) })) : null, reference !== undefined ? (_jsx("line", { "data-slot": "sparkline-reference", x1: 0, x2: w, y1: y(reference), y2: y(reference), stroke: "var(--fg-subtle)", strokeDasharray: "3 3", strokeWidth: 1, ...stroke })) : null, variant === "area"
+                ? segments.map((seg, i) => seg.length > 1 ? _jsx("path", { d: `${path(seg)}L${seg[seg.length - 1][0]} ${h}L${seg[0][0]} ${h}Z`, fill: `url(#${gradientId})`, stroke: "none" }, `a${i}`) : null)
+                : null, segments.map((seg, i) => (_jsx("path", { d: path(seg), fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, strokeLinejoin: "round", strokeLinecap: "round", ...stroke }, `l${i}`))), showMinMax && !flat ? [dot(minIdx, nums.length ? Math.min(...nums) : 0, "min", 1.75), dot(maxIdx, Math.max(...nums), "max", 1.75)] : null, showLast && lastIdx >= 0 ? dot(lastIdx, values[lastIdx], "last") : null] }));
+});
+/** Direction of a series from its first to its last number: `1` up, `-1` down, `0` flat. */
+export function sparklineDirection(values) {
+    const nums = values.filter((v) => typeof v === "number" && Number.isFinite(v));
+    if (nums.length < 2)
+        return 0;
+    const d = nums[nums.length - 1] - nums[0];
+    return d > 0 ? 1 : d < 0 ? -1 : 0;
+}
+/**
+ * Plain-English summary for a sparkline's `label`: "Rose from 4 to 14, peak 14".
+ * Pass `format` for locale numbers (`(n) => f.number(n)`), or write your own sentence.
+ */
+export function sparklineSummary(values, format = (n) => n.toLocaleString("en-US")) {
+    const nums = values.filter((v) => typeof v === "number" && Number.isFinite(v));
+    if (nums.length === 0)
+        return "No data";
+    if (nums.length === 1)
+        return `Single value ${format(nums[0])}`;
+    const first = nums[0];
+    const last = nums[nums.length - 1];
+    const peak = Math.max(...nums);
+    const low = Math.min(...nums);
+    const verb = last > first ? "Rose" : last < first ? "Fell" : "Held";
+    const range = last === first ? `at ${format(first)}` : `from ${format(first)} to ${format(last)}`;
+    const tail = last > first ? `, peak ${format(peak)}` : last < first ? `, low ${format(low)}` : "";
+    return `${verb} ${range}${tail}`;
+}

package/dist/components/spinner.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const SIZES: {
+    readonly xs: 12;
+    readonly sm: 16;
+    readonly md: 20;
+    readonly lg: 28;
+};
+export declare const spinnerVariants: (props?: ({
+    tone?: "accent" | "current" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SpinnerProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children">, VariantProps<typeof spinnerVariants> {
+    /** 12 / 16 / 20 / 28 px, or any pixel number. Default `"sm"`. */
+    size?: keyof typeof SIZES | number;
+    /**
+     * Accessible status text ("Saving changes"). When set, the spinner is announced politely
+     * (`role="status"`); without it the spinner is decorative (`aria-hidden`) — use that inside a
+     * button that already has `aria-busy`.
+     */
+    label?: string;
+    /** ms to wait before showing, so fast responses don't flash a spinner. CSS-only. */
+    delay?: number;
+}
+/**
+ * Indeterminate loading indicator: a thin track with a rotating, breathing arc.
+ * Server-compatible. Under `prefers-reduced-motion` it pulses slowly instead of spinning.
+ *
+ * ```tsx
+ * <Spinner label="Loading orders" />
+ * <Button loading>Save</Button>   // uses a decorative Spinner
+ * ```
+ */
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
+export {};