@cosmicdrift/kumiko-renderer 0.373.0 → 0.377.0

package/dist/web/widgets/step-bar.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+/** Wizard step overview — numbered chips with a connector line between
+ *  them. With `onStepSelect`, done chips render as buttons for jumping back
+ *  (every non-current chip with `selectableSteps="all"`); the current chip
+ *  never does. `doneSteps` overrides the position-based done state. With
+ *  `onStepSelect` and `selectableSteps="all"` the narrow-viewport label becomes
+ *  a dropdown listing every step (same rows as the rail), so phones can jump
+ *  too. Three visual states, none conveyed by color alone:
+ *  done (checkmark replaces the number, `aria-current` absent, a sr-only
+ *  label says so since the number itself is gone), current (`aria-current
+ *  ="step"`, own background), upcoming (dimmed, number visible). Below
+ *  `sm` the chip row hides in favor of `compactLabel` (seven step names
+ *  don't fit on a phone) — both live in the DOM, Tailwind's
+ *  `hidden`/`sm:hidden` pair picks the visible one per viewport (same
+ *  pattern as embedded-list-input.tsx's desktop/mobile split). */
+export declare function StepBar({ steps, currentIndex, compactLabel, onStepSelect, doneSteps, selectableSteps, narrowLayout, orientation, heading, description, subtitles, upNext, testId, compactTestId, }: {
+    readonly steps: readonly string[];
+    readonly currentIndex: number;
+    readonly compactLabel: string;
+    readonly onStepSelect?: (index: number) => void;
+    readonly doneSteps?: readonly boolean[];
+    readonly selectableSteps?: "done" | "all";
+    readonly narrowLayout?: "label" | "steps";
+    readonly orientation?: "horizontal" | "vertical";
+    readonly heading?: string;
+    readonly description?: string;
+    readonly subtitles?: readonly (string | undefined)[];
+    readonly upNext?: {
+        readonly heading: string;
+        readonly title: string;
+        readonly subtitle?: string;
+    };
+    readonly testId?: string;
+    readonly compactTestId?: string;
+}): ReactNode;

package/dist/web/widgets/step-bar.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+const CHIP_CLASS = "flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors";
+function chipTestId(testId, index) {
+    return testId !== undefined ? `${testId}-step-${index}` : undefined;
+}
+function StepRailRow({ index, label, subtitle, subtitleTestId, rowTestId, state: { isCurrent, isDone, isSelectable }, onSelect, doneLabel, minHeightClass = "min-h-9", }) {
+    const rowClass = cn("flex w-full items-center gap-2.5 rounded-md px-2 py-1 text-left text-sm", minHeightClass, isCurrent && "bg-primary/10 font-semibold text-primary", isDone && "text-foreground", !isCurrent && !isDone && "text-foreground-secondary");
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("flex size-[22px] shrink-0 items-center justify-center rounded-full border text-xs font-semibold", isCurrent && "border-primary bg-primary text-primary-foreground", isDone && "border-status-ok-surface bg-status-ok-surface text-status-ok", !isCurrent && !isDone && "border-input bg-card text-foreground-secondary"), children: isDone ? _jsx(Check, { className: "size-3" }) : index + 1 }), isDone && _jsx("span", { className: "sr-only", children: doneLabel }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: label }), subtitle !== undefined && (_jsx("span", { "data-testid": subtitleTestId, className: "truncate text-xs font-normal text-foreground-secondary", children: subtitle }))] })] }));
+    return isSelectable ? (_jsx("button", { type: "button", onClick: () => onSelect?.(index), "data-testid": rowTestId, className: cn(rowClass, "hover:bg-muted-foreground/10"), children: content })) : (_jsx("span", { "aria-current": isCurrent ? "step" : undefined, "data-testid": rowTestId, className: rowClass, children: content }));
+}
+function CompactStepPicker({ steps, compactLabel, subtitles, stepState, onStepSelect, compactTestId, doneLabel, }) {
+    const [open, setOpen] = useState(false);
+    const listId = useId();
+    const toggleRef = useRef(null);
+    return (_jsxs("div", { onKeyDown: (event) => {
+            if (event.key === "Escape" && open) {
+                setOpen(false);
+                toggleRef.current?.focus();
+            }
+        }, children: [_jsxs("button", { ref: toggleRef, type: "button", "aria-expanded": open, "aria-controls": open ? listId : undefined, "data-testid": compactTestId, onClick: () => setOpen((wasOpen) => !wasOpen), className: "flex min-h-11 w-full items-center justify-between gap-2 rounded-md border border-border bg-card px-3 text-left text-sm font-medium text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [compactLabel, _jsx(ChevronDown, { "aria-hidden": "true", className: cn("size-4 shrink-0 transition-transform", open && "rotate-180") })] }), open && (_jsx("ol", { id: listId, className: "m-0 mt-1 flex list-none flex-col gap-0.5 rounded-md border border-border bg-card p-1", children: steps.map((label, i) => (_jsx("li", { children: _jsx(StepRailRow, { index: i, label: label, subtitle: subtitles?.[i], subtitleTestId: undefined, rowTestId: chipTestId(compactTestId, i), state: stepState(i), onSelect: (index) => {
+                            setOpen(false);
+                            onStepSelect(index);
+                        }, doneLabel: doneLabel, minHeightClass: "min-h-11" }) }, `${i}-${label}`))) }))] }));
+}
+/** Wizard step overview — numbered chips with a connector line between
+ *  them. With `onStepSelect`, done chips render as buttons for jumping back
+ *  (every non-current chip with `selectableSteps="all"`); the current chip
+ *  never does. `doneSteps` overrides the position-based done state. With
+ *  `onStepSelect` and `selectableSteps="all"` the narrow-viewport label becomes
+ *  a dropdown listing every step (same rows as the rail), so phones can jump
+ *  too. Three visual states, none conveyed by color alone:
+ *  done (checkmark replaces the number, `aria-current` absent, a sr-only
+ *  label says so since the number itself is gone), current (`aria-current
+ *  ="step"`, own background), upcoming (dimmed, number visible). Below
+ *  `sm` the chip row hides in favor of `compactLabel` (seven step names
+ *  don't fit on a phone) — both live in the DOM, Tailwind's
+ *  `hidden`/`sm:hidden` pair picks the visible one per viewport (same
+ *  pattern as embedded-list-input.tsx's desktop/mobile split). */
+export function StepBar({ steps, currentIndex, compactLabel, onStepSelect, doneSteps, selectableSteps = "done", narrowLayout = "label", orientation = "horizontal", heading, description, subtitles, upNext, testId, compactTestId, }) {
+    const t = useTranslation();
+    const stepState = (i) => {
+        const isCurrent = i === currentIndex;
+        const isDone = !isCurrent && (doneSteps !== undefined ? doneSteps[i] === true : i < currentIndex);
+        const isSelectable = onStepSelect !== undefined && !isCurrent && (selectableSteps === "all" || isDone);
+        return { isCurrent, isDone, isSelectable };
+    };
+    const compactPicker = onStepSelect !== undefined && selectableSteps === "all";
+    const pickerElement = compactPicker ? (_jsx(CompactStepPicker, { steps: steps, compactLabel: compactLabel, subtitles: subtitles, stepState: stepState, onStepSelect: onStepSelect, compactTestId: compactTestId, doneLabel: t("kumiko.widget.step-bar.done") })) : null;
+    if (orientation === "vertical") {
+        return (_jsxs(_Fragment, { children: [_jsxs("nav", { className: "hidden w-[280px] shrink-0 flex-col gap-4 overflow-y-auto border-r border-border bg-muted px-6 py-7 lg:flex", children: [heading !== undefined && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: heading }), description !== undefined && (_jsx("span", { className: "text-[13px] text-foreground-secondary", children: description }))] })), _jsx("ol", { "data-testid": testId, className: "m-0 flex list-none flex-col gap-0.5 p-0", children: steps.map((label, i) => (_jsx("li", { children: _jsx(StepRailRow, { index: i, label: label, subtitle: subtitles?.[i], subtitleTestId: testId !== undefined ? `${testId}-subtitle-${i}` : undefined, rowTestId: chipTestId(testId, i), state: stepState(i), onSelect: onStepSelect, doneLabel: t("kumiko.widget.step-bar.done") }) }, `${i}-${label}`))) }), upNext !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-up-next` : undefined, className: "mt-2 flex flex-col gap-1 rounded-md border border-border bg-card px-3 py-2.5", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: upNext.heading }), _jsx("span", { className: "text-sm font-medium text-foreground", children: upNext.title }), upNext.subtitle !== undefined && (_jsx("span", { className: "text-xs text-foreground-secondary", children: upNext.subtitle }))] }))] }), compactPicker ? (_jsx("div", { className: "px-4 pt-3 lg:hidden", children: pickerElement })) : (_jsx("p", { "data-testid": compactTestId, className: "px-4 pt-3 text-sm text-muted-foreground lg:hidden", children: compactLabel }))] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { "data-testid": testId, className: cn("items-center gap-2", narrowLayout === "steps" ? "flex flex-wrap" : "hidden sm:flex sm:flex-wrap"), children: steps.map((label, i) => {
+                    const { isCurrent, isDone, isSelectable } = stepState(i);
+                    return (_jsxs("li", { className: "flex items-center gap-2", children: [i > 0 && _jsx("span", { "aria-hidden": "true", className: "h-px w-4 bg-border" }), isSelectable ? (_jsxs("button", { type: "button", onClick: () => onStepSelect?.(i), "data-testid": chipTestId(testId, i), className: cn(CHIP_CLASS, isDone ? "text-primary" : "text-muted-foreground", "max-sm:min-h-11 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: [isDone ? (_jsxs(_Fragment, { children: [_jsx(Check, { "aria-hidden": "true", className: "size-3.5" }), _jsx("span", { className: "sr-only", children: t("kumiko.widget.step-bar.done") })] })) : (_jsx("span", { className: "text-xs font-semibold", children: i + 1 })), label] })) : (_jsxs("span", { "aria-current": isCurrent ? "step" : undefined, "data-testid": chipTestId(testId, i), className: cn(CHIP_CLASS, isCurrent && "bg-primary font-semibold text-primary-foreground", isDone && "text-primary", !isCurrent && !isDone && "text-muted-foreground"), children: [isDone ? (_jsxs(_Fragment, { children: [_jsx(Check, { "aria-hidden": "true", className: "size-3.5" }), _jsx("span", { className: "sr-only", children: t("kumiko.widget.step-bar.done") })] })) : (_jsx("span", { className: "text-xs font-semibold", children: i + 1 })), label] }))] }, `${i}-${label}`));
+                }) }), compactPicker ? (_jsx("div", { className: narrowLayout === "steps" ? "hidden" : "sm:hidden", children: pickerElement })) : (_jsx("p", { "data-testid": compactTestId, className: cn("text-sm text-muted-foreground", narrowLayout === "steps" ? "hidden" : "sm:hidden"), children: compactLabel }))] }));
+}

package/dist/web/widgets/upload-zone.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+export type UploadZoneProps = {
+    /** Uploads a single file (POST + optional follow-up mutation). Throws on
+     *  failure — the message ends up in the row's error line. Runs in
+     *  parallel per file within a batch (no sequential waiting). */
+    readonly onUpload: (file: File) => Promise<void>;
+    readonly title: ReactNode;
+    readonly hint?: ReactNode;
+    readonly accept?: readonly string[];
+    /** Allow multiple files per pick/drop. Defaults to true. */
+    readonly multiple?: boolean;
+    /** Forwarded to the file input: a phone opens that camera directly instead
+     *  of offering camera, gallery and files. Leave unset to keep the choice. */
+    readonly capture?: "environment" | "user";
+    readonly disabled?: boolean;
+    readonly testId?: string;
+};
+export declare function matchesAccept(file: File, accept?: readonly string[]): boolean;
+/** Drop zone + multi-file picker with a per-file status row (uploading/done/
+ *  error). For screens that accept several files and upload them
+ *  independently — unlike `FileField` (single file, FileRef value inside a
+ *  form field). `onUpload` decides what "upload" means (storage POST, ingest
+ *  mutation, or both); the zone only tracks uploading/done/error. */
+export declare function UploadZone({ onUpload, title, hint, accept, multiple, capture, disabled, testId, }: UploadZoneProps): ReactNode;

package/dist/web/widgets/upload-zone.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckCircle2, FileUp, Loader2, TriangleAlert, Upload } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import { useTranslation } from "../../index.js";
+import { toAcceptAttr } from "../lib/accept-attr.js";
+import { cn } from "../lib/cn.js";
+import { resizeImageBeforeUpload } from "../lib/resize-image.js";
+const STATUS_ICON = {
+    uploading: _jsx(Loader2, { className: "size-3.5 animate-spin text-muted-foreground", "aria-hidden": "true" }),
+    done: _jsx(CheckCircle2, { className: "size-3.5 text-primary", "aria-hidden": "true" }),
+    error: _jsx(TriangleAlert, { className: "size-3.5 text-destructive", "aria-hidden": "true" }),
+};
+const STATUS_LABEL_KEY = {
+    uploading: "kumiko.widget.upload.uploading",
+    done: "kumiko.widget.upload.done",
+    error: "kumiko.widget.upload.error",
+};
+// `accept` on the native <input> only filters the file-picker dialog — a
+// drag&drop drop is never routed through it, so any file type lands in
+// `onUpload` regardless of what `accept` promises. Same matching rules as
+// the native attribute: MIME type (with an optional "type/*" wildcard) or
+// file extension.
+export function matchesAccept(file, accept) {
+    if (accept === undefined || accept.length === 0)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept.some((raw) => {
+        const a = raw.toLowerCase();
+        if (a.includes("/"))
+            return a.endsWith("/*") ? type.startsWith(a.slice(0, -1)) : type === a;
+        return name.endsWith(a.startsWith(".") ? a : `.${a}`);
+    });
+}
+function partitionByAccept(files, accept) {
+    const accepted = [];
+    const rejected = [];
+    for (const file of files)
+        (matchesAccept(file, accept) ? accepted : rejected).push(file);
+    return [accepted, rejected];
+}
+/** Drop zone + multi-file picker with a per-file status row (uploading/done/
+ *  error). For screens that accept several files and upload them
+ *  independently — unlike `FileField` (single file, FileRef value inside a
+ *  form field). `onUpload` decides what "upload" means (storage POST, ingest
+ *  mutation, or both); the zone only tracks uploading/done/error. */
+export function UploadZone({ onUpload, title, hint, accept, multiple = true, capture, disabled, testId, }) {
+    const t = useTranslation();
+    const inputId = useId();
+    const inputRef = useRef(null);
+    const [rows, setRows] = useState([]);
+    const [dragOver, setDragOver] = useState(false);
+    // `crypto.randomUUID` only exists in a secure context — a plain-HTTP LAN
+    // preview leaves it undefined. These ids are React keys/row ids, not
+    // globally unique identifiers, so a per-instance counter is enough.
+    const nextRowId = useRef(0);
+    async function uploadOne(file) {
+        const rowId = String(nextRowId.current++);
+        const uploadFile = await resizeImageBeforeUpload(file);
+        setRows((prev) => [...prev, { id: rowId, fileName: uploadFile.name, status: "uploading" }]);
+        try {
+            await onUpload(uploadFile);
+            setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "done" } : row)));
+        }
+        catch (cause) {
+            const message = cause instanceof Error ? cause.message : t("kumiko.widget.upload.error");
+            setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "error", error: message } : row)));
+        }
+    }
+    async function uploadFiles(files) {
+        if (files === null || files.length === 0)
+            return;
+        const picked = multiple ? Array.from(files) : files[0] !== undefined ? [files[0]] : [];
+        // Reset before awaits so re-picking the same file during a slow upload still fires change.
+        if (inputRef.current)
+            inputRef.current.value = "";
+        const [accepted, rejected] = partitionByAccept(picked, accept);
+        for (const file of rejected) {
+            setRows((prev) => [
+                ...prev,
+                {
+                    id: String(nextRowId.current++),
+                    fileName: file.name,
+                    status: "error",
+                    error: t("kumiko.widget.upload.rejected-type"),
+                },
+            ]);
+        }
+        await Promise.all(accepted.map((file) => uploadOne(file)));
+    }
+    function handleDrop(e) {
+        e.preventDefault();
+        setDragOver(false);
+        if (disabled === true)
+            return;
+        void uploadFiles(e.dataTransfer.files);
+    }
+    const acceptAttr = toAcceptAttr(accept);
+    return (_jsxs("div", { "data-testid": testId, className: "flex flex-col gap-4", children: [_jsxs("label", { htmlFor: inputId, onDragOver: (e) => {
+                    e.preventDefault();
+                    if (disabled !== true)
+                        setDragOver(true);
+                }, onDragLeave: (e) => {
+                    if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
+                        setDragOver(false);
+                    }
+                }, onDrop: handleDrop, "data-testid": testId !== undefined ? `${testId}-dropzone` : undefined, className: cn("flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed p-10 text-center transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", dragOver ? "border-primary bg-muted/40" : "border-border", disabled === true && "cursor-not-allowed opacity-50"), children: [_jsx(Upload, { className: "size-8 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "text-sm", children: title }), hint !== undefined && _jsx("span", { className: "text-sm text-muted-foreground", children: hint }), _jsx("input", { ref: inputRef, id: inputId, type: "file", multiple: multiple, className: "sr-only", "data-testid": testId !== undefined ? `${testId}-input` : undefined, disabled: disabled, ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(capture !== undefined && { capture }), onChange: (e) => void uploadFiles(e.target.files) })] }), rows.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: rows.map((row) => (_jsxs("li", { "data-testid": testId !== undefined ? `${testId}-row` : undefined, className: "flex items-center justify-between gap-3 rounded-md border border-border px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileUp, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate text-sm", children: row.fileName })] }), _jsxs("output", { className: "flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground", children: [STATUS_ICON[row.status], _jsx("span", { className: "sr-only", children: t(STATUS_LABEL_KEY[row.status]) }), row.status === "error" && row.error !== undefined && _jsx("span", { children: row.error })] })] }, row.id))) }))] }));
+}

package/dist/web/widgets/use-draft.d.ts

@@ -0,0 +1,20 @@
+/** Formular-State für Rechner-Screens: ein Draft-Objekt + `patch` für
+ *  Teil-Updates + `field(name)` das die `{ id, name, value, onChange }`-Props
+ *  fertig für die Feld-Widgets (NumberField/MoneyField/PercentField) liefert.
+ *  Ersetzt das pro Screen wiederholte Draft-Interface + patch-Helper.
+ *  `idPrefix` verhindert doppelte DOM-`id`s, wenn mehrere `useDraft`-Formulare
+ *  mit gleichnamigen Feldern auf derselben Seite gemountet werden — `name`
+ *  bleibt der reine Key fürs Form-Payload. */
+export declare function useDraft<T extends object>(defaults: T, options?: {
+    readonly idPrefix?: string;
+}): {
+    readonly draft: T;
+    readonly patch: (changes: Partial<T>) => void;
+    readonly reset: () => void;
+    readonly field: <K extends keyof T>(name: K) => {
+        readonly id: string;
+        readonly name: string;
+        readonly value: T[K];
+        readonly onChange: (v: T[K]) => void;
+    };
+};

package/dist/web/widgets/use-draft.js

@@ -0,0 +1,21 @@
+import { useCallback, useState } from "react";
+/** Formular-State für Rechner-Screens: ein Draft-Objekt + `patch` für
+ *  Teil-Updates + `field(name)` das die `{ id, name, value, onChange }`-Props
+ *  fertig für die Feld-Widgets (NumberField/MoneyField/PercentField) liefert.
+ *  Ersetzt das pro Screen wiederholte Draft-Interface + patch-Helper.
+ *  `idPrefix` verhindert doppelte DOM-`id`s, wenn mehrere `useDraft`-Formulare
+ *  mit gleichnamigen Feldern auf derselben Seite gemountet werden — `name`
+ *  bleibt der reine Key fürs Form-Payload. */
+export function useDraft(defaults, options) {
+    const idPrefix = options?.idPrefix;
+    const [draft, setDraft] = useState(defaults);
+    const patch = useCallback((changes) => setDraft((d) => ({ ...d, ...changes })), []);
+    const reset = useCallback(() => setDraft(defaults), [defaults]);
+    const field = useCallback((name) => ({
+        id: idPrefix !== undefined ? `${idPrefix}-${String(name)}` : String(name),
+        name: String(name),
+        value: draft[name],
+        onChange: (v) => setDraft((d) => ({ ...d, [name]: v })),
+    }), [draft, idPrefix]);
+    return { draft, patch, reset, field };
+}

package/dist/web/widgets/use-pointer-drag.d.ts

@@ -0,0 +1,21 @@
+import { type KeyboardEvent, type PointerEvent } from "react";
+export type DragDelta = {
+    readonly dx: number;
+    readonly dy: number;
+};
+type PointerDragOptions<TStart> = {
+    readonly onStart: (event: PointerEvent<HTMLElement>) => TStart;
+    readonly onMove: (start: TStart, delta: DragDelta) => void;
+    readonly onEnd?: () => void;
+};
+type PointerDragHandlers = {
+    readonly onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    readonly onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+    readonly onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+    readonly onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+    readonly onLostPointerCapture: (event: PointerEvent<HTMLElement>) => void;
+};
+export declare function usePointerDrag<TStart>({ onStart, onMove, onEnd, }: PointerDragOptions<TStart>): PointerDragHandlers;
+/** Arrow keys as a pixel delta (Shift = larger step); undefined for any other key. */
+export declare function arrowKeyDelta(event: KeyboardEvent<HTMLElement>): DragDelta | undefined;
+export {};

package/dist/web/widgets/use-pointer-drag.js

@@ -0,0 +1,53 @@
+import { useRef } from "react";
+export function usePointerDrag({ onStart, onMove, onEnd, }) {
+    const dragRef = useRef(null);
+    const onPointerDown = (event) => {
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragRef.current = { startX: event.clientX, startY: event.clientY, start: onStart(event) };
+        // Without the lock a fast drag selects the text underneath instead of just dragging.
+        document.body.style.setProperty("user-select", "none");
+    };
+    const onPointerMove = (event) => {
+        const drag = dragRef.current;
+        if (drag !== null) {
+            onMove(drag.start, { dx: event.clientX - drag.startX, dy: event.clientY - drag.startY });
+        }
+    };
+    const endDrag = (event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+        const wasDragging = dragRef.current !== null;
+        dragRef.current = null;
+        document.body.style.removeProperty("user-select");
+        // pointerup and the lostpointercapture it triggers both land here; only the first ends a drag.
+        if (wasDragging)
+            onEnd?.();
+    };
+    return {
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        onLostPointerCapture: endDrag,
+    };
+}
+const KEY_STEP_PX = 16;
+const KEY_STEP_SHIFT_PX = 40;
+/** Arrow keys as a pixel delta (Shift = larger step); undefined for any other key. */
+export function arrowKeyDelta(event) {
+    const step = event.shiftKey ? KEY_STEP_SHIFT_PX : KEY_STEP_PX;
+    switch (event.key) {
+        case "ArrowLeft":
+            return { dx: -step, dy: 0 };
+        case "ArrowRight":
+            return { dx: step, dy: 0 };
+        case "ArrowUp":
+            return { dx: 0, dy: -step };
+        case "ArrowDown":
+            return { dx: 0, dy: step };
+        default:
+            return undefined;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.373.0",
-  "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
+  "version": "0.377.0",
+  "description": "React renderer for Kumiko screens. The root export holds the platform-agnostic logic (primitives contract, hooks, KumikoScreen, navigation and SSE abstractions); ./headless the DOM-free UI logic, ./live the HTTP dispatcher, ./web the browser bindings (HTML primitives, history navigation, EventSource live events, createKumikoApp).",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
   "type": "module",
@@ -12,23 +12,90 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./headless": {
+      "types": "./dist/headless/index.d.ts",
+      "default": "./dist/headless/index.js"
+    },
+    "./headless/apex": {
+      "types": "./dist/headless/apex/index.d.ts",
+      "default": "./dist/headless/apex/index.js"
+    },
+    "./headless/dispatcher": {
+      "types": "./dist/headless/dispatcher/index.d.ts",
+      "default": "./dist/headless/dispatcher/index.js"
+    },
+    "./headless/locale-routing": {
+      "types": "./dist/headless/locale-routing/index.d.ts",
+      "default": "./dist/headless/locale-routing/index.js"
+    },
+    "./live": {
+      "types": "./dist/live/index.d.ts",
+      "default": "./dist/live/index.js"
+    },
+    "./web": {
+      "types": "./dist/web/index.d.ts",
+      "default": "./dist/web/index.js"
+    },
+    "./web/styles.css": "./src/web/styles.css",
+    "./web/theme-plugin": {
+      "types": "./dist/web/theme-plugin.d.ts",
+      "default": "./dist/web/theme-plugin.js"
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.373.0",
-    "@cosmicdrift/kumiko-headless": "0.373.0",
-    "@cosmicdrift/kumiko-types": "0.373.0",
+    "@cosmicdrift/kumiko-framework": "0.377.0",
+    "@cosmicdrift/kumiko-types": "0.377.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tiptap/core": "^3.30.5",
+    "@tiptap/pm": "^3.30.5",
+    "@tiptap/react": "^3.30.5",
+    "@tiptap/starter-kit": "^3.30.5",
+    "@types/qrcode": "^1.5.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.14.0",
+    "qrcode": "^1.5.4",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.6",
+    "react-day-picker": "^10.0.0",
+    "react-dom": "^19.2.6",
+    "react-resizable-panels": "^4.12.2",
+    "tailwind-merge": "^3.6.0",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
   },
+  "peerDependencies": {
+    "@tailwindcss/cli": "^4.3.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@tailwindcss/cli": {
+      "optional": false
+    },
+    "tailwindcss": {
+      "optional": false
+    }
+  },
   "devDependencies": {
+    "@cosmicdrift/kumiko-locale-de": "0.377.0",
+    "@cosmicdrift/kumiko-testing": "0.377.0",
+    "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
-    "react-dom": "^19.2.6",
-    "@cosmicdrift/kumiko-locale-de": "0.373.0"
+    "tailwindcss": "^4.3.0"
   },
   "repository": {
     "type": "git",
@@ -46,12 +113,43 @@
       ".": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
+      },
+      "./headless": {
+        "types": "./dist/headless/index.d.ts",
+        "default": "./dist/headless/index.js"
+      },
+      "./headless/apex": {
+        "types": "./dist/headless/apex/index.d.ts",
+        "default": "./dist/headless/apex/index.js"
+      },
+      "./headless/dispatcher": {
+        "types": "./dist/headless/dispatcher/index.d.ts",
+        "default": "./dist/headless/dispatcher/index.js"
+      },
+      "./headless/locale-routing": {
+        "types": "./dist/headless/locale-routing/index.d.ts",
+        "default": "./dist/headless/locale-routing/index.js"
+      },
+      "./live": {
+        "types": "./dist/live/index.d.ts",
+        "default": "./dist/live/index.js"
+      },
+      "./web": {
+        "types": "./dist/web/index.d.ts",
+        "default": "./dist/web/index.js"
+      },
+      "./web/styles.css": "./src/web/styles.css",
+      "./web/theme-plugin": {
+        "types": "./dist/web/theme-plugin.d.ts",
+        "default": "./dist/web/theme-plugin.js"
       }
     }
   },
   "files": [
     "dist",
     "src/changes.json",
+    "src/web/styles.css",
+    "src/web/fonts",
     "README.md",
     "LICENSE"
   ]

package/src/changes.json

@@ -1,4 +1,81 @@
 [
+  {
+    "version": "0.377.0",
+    "type": "improvement",
+    "title": "PlanCard ctaLink",
+    "detail": "PlanCard takes ctaLink ({ label, href, target? }) and renders it as a full-width link button in the footer instead of the cta button. The PlanCardLinkSlot type is exported from @cosmicdrift/kumiko-renderer/web next to PlanCardActionSlot."
+  },
+  {
+    "version": "0.377.0",
+    "type": "fix",
+    "title": "The entityEdit discard-confirm test waits for the form's mount effects before it types and clicks",
+    "detail": "The test rendered outside act and only waited for the input to appear. Under CPU load the form's mount effects (store subscription, dirty reporting) ran after the click, so the header action still had no discard confirm and the test failed. The render now runs inside act, so the detail query, the commit and the effects settle first. Test-only change, no runtime behavior changes."
+  },
+  {
+    "version": "0.377.0",
+    "type": "improvement",
+    "title": "headless and the live dispatcher moved into renderer",
+    "detail": "The headless UI logic is exported from @cosmicdrift/kumiko-renderer/headless (with /headless/apex, /headless/dispatcher and /headless/locale-routing), the HTTP dispatcher from @cosmicdrift/kumiko-renderer/live. @cosmicdrift/kumiko-headless and @cosmicdrift/kumiko-dispatcher-live now only re-export these subpaths and are removed after the consumer pass of wave 4.",
+    "migration": "Run bun kumiko-upgrade --apply, or bun kumiko codemod package-merge . --write. It rewrites imports of @cosmicdrift/kumiko-headless (and its subpaths) to @cosmicdrift/kumiko-renderer/headless and imports of @cosmicdrift/kumiko-dispatcher-live to @cosmicdrift/kumiko-renderer/live, and replaces both dependencies in package.json with kumiko-renderer.",
+    "codemod": "scripts/codemod/package-merge.ts"
+  },
+  {
+    "version": "0.377.0",
+    "type": "improvement",
+    "title": "renderer-web moved into renderer",
+    "detail": "The web bindings are exported from @cosmicdrift/kumiko-renderer/web, the stylesheet from @cosmicdrift/kumiko-renderer/web/styles.css and the Tailwind theme plugin from @cosmicdrift/kumiko-renderer/web/theme-plugin. @cosmicdrift/kumiko-renderer-web now only re-exports these and is removed after the consumer pass of wave 4.",
+    "migration": "Run bun kumiko-upgrade --apply, or bun kumiko codemod package-merge . --write. It rewrites imports and CSS @import lines of @cosmicdrift/kumiko-renderer-web (including /styles.css and /theme-plugin) to @cosmicdrift/kumiko-renderer/web and replaces the dependency in package.json with kumiko-renderer.",
+    "codemod": "scripts/codemod/package-merge.ts"
+  },
+  {
+    "version": "0.377.0",
+    "type": "improvement",
+    "title": "actionForm shows key figures from the handler's success payload",
+    "detail": "ActionFormScreenDefinition gets successFacts, a list of { field, label } entries read from the success payload and shown in the success box next to successLinks while the screen stays put. A number or string is one value, an array a comma-separated list of numbers, strings or { label } objects, a missing field is hidden. Mutually exclusive with redirect (boot validator). Default behaviour is unchanged."
+  },
+  {
+    "version": "0.377.0",
+    "type": "improvement",
+    "title": "A text field with format month renders a native month input",
+    "detail": "createTextField({ format: \"month\" }) renders <input type=\"month\"> and carries YYYY-MM. The schema builder validates the pattern server-side (an empty string is accepted for optional fields). New InputProps kind \"month\" for custom Input primitives.",
+    "migration": "Only custom CorePrimitives.Input implementations with an exhaustive switch over kind need a \"month\" branch; a text fallback is fine."
+  },
+  {
+    "version": "0.377.0",
+    "type": "improvement",
+    "title": "Array reference fields render as links in lists",
+    "detail": "A reference column over an array field renders one link per entry, labelled from the eagerloaded record or the label lookup, like single references. New CellLinkItem and RuntimeCellLinkItems exports from the headless view model; DataTableCell accepts linkItems."
+  },
+  {
+    "version": "0.377.0",
+    "type": "fix",
+    "title": "List empty state, sidebar rail cursor, toolbar description spacing and root form errors",
+    "detail": "The empty list no longer shows a second Create button when Create is already in the page header. The sidebar rail edge, which only toggles open and closed, shows a pointer cursor instead of a resize cursor. toolbarDescription always gets the standard bottom spacing, not only with fillsHeight. A server error without a field reference (path \"(root)\") shows once in the form banner instead of also at a field."
+  },
+  {
+    "version": "0.374.0",
+    "type": "improvement",
+    "title": "Success box with links, form reset and field placeholder",
+    "detail": "The actionForm success box shows the default text \"Done.\" (kumiko.actionForm.success) next to successMessage links, resetOnSuccess remounts the form with its initial values, and EditFieldSpec.placeholder reaches text, number and textarea inputs."
+  },
+  {
+    "version": "0.374.0",
+    "type": "improvement",
+    "title": "Client action registry for row actions",
+    "detail": "ClientActionsProvider, ActionNoticeProvider and runClientAction execute clientAction row actions on list, related list and record actions, with confirm, toast feedback and refetch."
+  },
+  {
+    "version": "0.374.0",
+    "type": "improvement",
+    "title": "actionForm load states and drawer row click",
+    "detail": "An actionForm with load queries by the route, drawer or URL id and shows loading, error, not-found and missing-id states; loaded values count as prefill for submitPrefilled. A row click fires a rowClick drawer action in entityList, projectionList and relatedList."
+  },
+  {
+    "version": "0.374.0",
+    "type": "improvement",
+    "title": "Input prefix, suffix and fill button",
+    "detail": "Text and number inputs show prefix and suffix text, and a fillAction renders a button that fetches a suggestion into the field, also for a readOnly field. The Input primitive takes prefix, suffix and fill; renderer-web draws them beside the input."
+  },
   {
     "version": "0.372.0",
     "type": "fix",