@cosmicdrift/kumiko-renderer 0.374.0 → 0.378.0

package/dist/web/widgets/infinity-list.js

@@ -0,0 +1,211 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { entityFromQueryType, useDispatcher, useLiveEvents, useTranslation } from "../../index.js";
+import { EmptyState, ErrorState, LoadingState } from "./states.js";
+/** Cursor-paginated scroll list (mail inbox, activity feeds) — loads the
+ *  next page when the end sentinel becomes visible (IntersectionObserver),
+ *  instead of a pager bar like QueryTable/entityList. The query handler
+ *  receives `{ ...payload, limit, cursor? }` and returns rows plus the next
+ *  cursor (same cursor convention as the audit-log screen). */
+export function InfinityList({ query, payload, pageSize = 50, rows, nextCursor, rowId, renderRow, emptyState, className, testId, live = false, selectedId, onSelectionChange, }) {
+    const dispatcher = useDispatcher();
+    const t = useTranslation();
+    const subscribeLive = useLiveEvents();
+    const [state, setState] = useState({ kind: "loading" });
+    const sentinelRef = useRef(null);
+    const payloadKey = JSON.stringify(payload ?? {});
+    // rows/nextCursor/rowId are fresh closures on every caller render
+    // (inline arrow props). As useCallback deps that would recreate
+    // `load`/`refreshFirstPage` every render → the effects below would
+    // refetch in a loop. Refs keep them stable while always reading the
+    // current selector.
+    const rowsRef = useRef(rows);
+    rowsRef.current = rows;
+    const nextCursorRef = useRef(nextCursor);
+    nextCursorRef.current = nextCursor;
+    const rowIdRef = useRef(rowId);
+    rowIdRef.current = rowId;
+    // Discards a response whose request was superseded by a newer one before
+    // it resolved (e.g. two searches fired in quick succession) — without
+    // this, a slow earlier response can land after a faster later one and
+    // overwrite it, leaving stale rows on screen (fw#1705).
+    const requestSeq = useRef(0);
+    // IDs of the most recently loaded first page. refreshFirstPage() needs
+    // this to tell "row dropped from page 1 elsewhere" (must be pruned) apart
+    // from "row belongs to an already-accumulated later page" (must survive)
+    // — both are simply absent from the fresh page's id set.
+    const firstPageIdsRef = useRef(new Set());
+    // biome-ignore lint/correctness/useExhaustiveDependencies: payload goes through payloadKey
+    const load = useCallback(async (cursor) => {
+        const mySeq = ++requestSeq.current;
+        const res = await dispatcher.query(query, {
+            ...payload,
+            limit: pageSize,
+            ...(cursor !== null && { cursor }),
+        });
+        if (mySeq !== requestSeq.current)
+            return;
+        if (!res.isSuccess) {
+            setState({ kind: "error", error: res.error });
+            return;
+        }
+        const nextRows = rowsRef.current(res.data);
+        if (cursor === null) {
+            // Same identity as refreshFirstPage's freshIds/staleRows diff below
+            // — this ref is what that diff's previousFirstPageIds reads, so it
+            firstPageIdsRef.current = new Set(nextRows.map((row, index) => rowIdRef.current(row, index)));
+        }
+        setState((prev) => {
+            if (cursor === null || prev.kind !== "ready") {
+                return { kind: "ready", rows: nextRows, cursor: nextCursorRef.current(res.data) };
+            }
+            // The live-merge above can re-sort a row to the front of page 1; an
+            // offset-based cursor then re-serves that same row in a later page.
+            // Dedupe on append so it doesn't land twice under duplicate React
+            // keys.
+            const existingIds = new Set(prev.rows.map((row, index) => rowIdRef.current(row, index)));
+            const newRows = nextRows.filter((row, index) => !existingIds.has(rowIdRef.current(row, index)));
+            return {
+                kind: "ready",
+                rows: [...prev.rows, ...newRows],
+                cursor: nextCursorRef.current(res.data),
+            };
+        });
+    }, [dispatcher, query, pageSize, payloadKey]);
+    useEffect(() => {
+        setState({ kind: "loading" });
+        void load(null);
+        return () => {
+            requestSeq.current += 1;
+        };
+    }, [load]);
+    // Live-mode: on an SSE event for the query's entity, refetch only the
+    // first page and merge it in — rows the fresh page still contains move
+    // to the front (newest-first feeds), rows it dropped (edited/deleted
+    // elsewhere) are pruned, and everything beyond page 1 stays untouched.
+    // A full reload would collapse already-accumulated pages and jump the
+    // scroll position; see fw#1827.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: payload goes through payloadKey
+    const refreshFirstPage = useCallback(async () => {
+        // Read, don't bump: a concurrent load() (e.g. the mount fetch still
+        // in flight) must still land. Bumping here would make load()'s own
+        // sequence check discard it, and the refresh below then bails on
+        // `prev.kind !== "ready"` — the list gets stuck in loading forever.
+        const seqAtStart = requestSeq.current;
+        const res = await dispatcher.query(query, { ...payload, limit: pageSize });
+        if (seqAtStart !== requestSeq.current)
+            return;
+        // skip: background live refresh failed, keep showing the current rows
+        if (!res.isSuccess)
+            return;
+        const freshRows = rowsRef.current(res.data);
+        const freshIds = new Set(freshRows.map((row, index) => rowIdRef.current(row, index)));
+        // A row absent from freshIds is stale for one of two reasons: it was
+        // dropped from page 1 (deleted, or filtered out elsewhere) and must be
+        // pruned, or it belongs to an already-accumulated later page and must
+        // survive. previousFirstPageIds — captured before it's overwritten below
+        // — is what tells those two cases apart.
+        const previousFirstPageIds = firstPageIdsRef.current;
+        firstPageIdsRef.current = freshIds;
+        setState((prev) => {
+            // skip: the initial load() is still in flight and owns the eventual
+            // state — a concurrent refresh landing here has nothing accumulated
+            // to merge into yet.
+            if (prev.kind === "loading")
+                return prev;
+            if (prev.kind !== "ready") {
+                // prev.kind === "error": this refresh succeeded — promote straight
+                // to "ready" instead of leaving the list stuck on the earlier
+                // failure forever (a live event should be able to recover it).
+                return { kind: "ready", rows: freshRows, cursor: nextCursorRef.current(res.data) };
+            }
+            const staleRows = prev.rows.filter((row, index) => {
+                const id = rowIdRef.current(row, index);
+                return !freshIds.has(id) && !previousFirstPageIds.has(id);
+            });
+            return { kind: "ready", rows: [...freshRows, ...staleRows], cursor: prev.cursor };
+        });
+    }, [dispatcher, query, pageSize, payloadKey]);
+    // Trailing debounce + in-flight coalesce: bulk SSE storms must not fan out
+    // into one query per event (fw#1829). A refresh already running schedules
+    // exactly one trailing pass after it settles.
+    const liveTimerRef = useRef(null);
+    const liveInFlightRef = useRef(false);
+    const liveTrailingRef = useRef(false);
+    useEffect(() => {
+        // skip: live mode off, no SSE subscription needed
+        if (!live)
+            return;
+        const entity = entityFromQueryType(query);
+        // skip: query type has no mapped entity, nothing to subscribe to
+        if (entity === undefined)
+            return;
+        const runRefresh = () => {
+            liveInFlightRef.current = true;
+            void refreshFirstPage().finally(() => {
+                liveInFlightRef.current = false;
+                if (liveTrailingRef.current) {
+                    liveTrailingRef.current = false;
+                    runRefresh();
+                }
+            });
+        };
+        const scheduleRefresh = () => {
+            if (liveTimerRef.current !== null)
+                clearTimeout(liveTimerRef.current);
+            liveTimerRef.current = setTimeout(() => {
+                liveTimerRef.current = null;
+                if (liveInFlightRef.current) {
+                    liveTrailingRef.current = true;
+                    return;
+                }
+                runRefresh();
+            }, 250);
+        };
+        const unsubscribe = subscribeLive(entity, scheduleRefresh);
+        return () => {
+            unsubscribe();
+            if (liveTimerRef.current !== null) {
+                clearTimeout(liveTimerRef.current);
+                liveTimerRef.current = null;
+            }
+        };
+    }, [live, query, refreshFirstPage, subscribeLive]);
+    useEffect(() => {
+        const sentinel = sentinelRef.current;
+        // skip: no further page or not ready yet — observer not needed
+        if (sentinel === null || state.kind !== "ready" || state.cursor === null)
+            return;
+        const cursor = state.cursor;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0]?.isIntersecting === true)
+                void load(cursor);
+        });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [state, load]);
+    const onSelectionChangeRef = useRef(onSelectionChange);
+    onSelectionChangeRef.current = onSelectionChange;
+    useEffect(() => {
+        if (selectedId === undefined || selectedId === null || state.kind !== "ready")
+            return;
+        const ids = state.rows.map((row, index) => rowIdRef.current(row, index));
+        const index = ids.indexOf(selectedId);
+        if (index === -1)
+            return;
+        onSelectionChangeRef.current?.({
+            index,
+            total: ids.length,
+            prevId: ids[index - 1] ?? null,
+            nextId: ids[index + 1] ?? null,
+            hasMore: state.cursor !== null,
+        });
+    }, [state, selectedId]);
+    if (state.kind === "loading")
+        return _jsx(LoadingState, { rows: 4, testId: testId });
+    if (state.kind === "error")
+        return _jsx(ErrorState, { error: state.error, onRetry: () => void load(null), testId: testId });
+    if (state.rows.length === 0)
+        return _jsx(_Fragment, { children: emptyState ?? _jsx(EmptyState, { title: t("kumiko.list.no-entries"), testId: testId }) });
+    return (_jsxs("div", { "data-testid": testId, className: className ?? "flex flex-col overflow-y-auto", children: [state.rows.map((row, index) => (_jsx("div", { children: renderRow(row) }, rowId(row, index)))), _jsx("div", { ref: sentinelRef, className: "h-px" })] }));
+}

package/dist/web/widgets/mode-switch.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export type ModeSwitchVariant = "outline" | "pill";
+/** Segmented-Control für sich ausschließende Modi — die prominente
+ *  Alternative zum vergrabenen <select>. */
+export declare function ModeSwitch<T extends string>({ value, options, onChange, ariaLabel, variant, className, testId, }: {
+    /** `null`: no option active. */
+    readonly value: T | null;
+    readonly options: readonly {
+        readonly value: T;
+        readonly label: string;
+        /** Muted tabular counter after the label. */
+        readonly count?: number;
+    }[];
+    readonly onChange: (value: T) => void;
+    readonly ariaLabel?: string;
+    /** `outline` (default): bordered segments, active tinted. `pill`: grey
+     *  track with a raised active segment. */
+    readonly variant?: ModeSwitchVariant;
+    readonly className?: string;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/mode-switch.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/** Segmented-Control für sich ausschließende Modi — die prominente
+ *  Alternative zum vergrabenen <select>. */
+export function ModeSwitch({ value, options, onChange, ariaLabel, variant = "outline", className, testId, }) {
+    const pill = variant === "pill";
+    return (_jsx("div", { "data-testid": testId, role: "group", "aria-label": ariaLabel, className: cn("flex min-h-8", pill
+            ? "gap-0.5 rounded-lg bg-muted p-0.5"
+            : "overflow-hidden rounded-md border border-input bg-background", className), children: options.map((o) => {
+            const active = o.value === value;
+            return (_jsxs("button", { type: "button", "aria-pressed": active, onClick: () => onChange(o.value), className: cn("grow px-3 text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", pill
+                    ? [
+                        "rounded-md",
+                        active
+                            ? "bg-card font-semibold text-foreground shadow-sm dark:bg-foreground/10"
+                            : "text-muted-foreground hover:text-foreground",
+                    ]
+                    : [
+                        "border-l border-input first:border-l-0",
+                        active
+                            ? "bg-primary/10 font-semibold text-primary"
+                            : "text-foreground hover:bg-muted",
+                    ]), children: [o.label, o.count !== undefined && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-count-${o.value}` : undefined, className: cn("ml-1.5 font-normal tabular-nums", !active && "text-muted-foreground"), children: o.count }))] }, o.value));
+        }) }));
+}

package/dist/web/widgets/pdf-preview.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+export type PdfPreviewSource = {
+    readonly base64: string;
+} | {
+    readonly url: string;
+};
+export declare function PdfPreview({ source, testId, }: {
+    readonly source: PdfPreviewSource;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/pdf-preview.js

@@ -0,0 +1,140 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, use, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "../../i18n.js";
+import { createBoundedLoadCache } from "./bounded-load-cache.js";
+// pdf.js runs in the main thread ("fake worker"): the worker module is bundled
+// with the app and handed over through globalThis.pdfjsWorker, so no worker or
+// CDN URL is ever fetched (self-hosting and CSP stay intact).
+const RENDER_SCALE = 96 / 72;
+const MAX_CACHED_DOCUMENTS = 4;
+const cachedDocument = createBoundedLoadCache(MAX_CACHED_DOCUMENTS, (loaded) => {
+    if (loaded.ok)
+        void loaded.loadingTask.destroy();
+});
+function decodeBase64(base64) {
+    const binary = atob(base64);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index++)
+        bytes[index] = binary.charCodeAt(index);
+    return bytes;
+}
+async function loadBytes(source) {
+    if ("base64" in source)
+        return decodeBase64(source.base64);
+    const res = await fetch(source.url, { credentials: "same-origin" });
+    if (!res.ok)
+        throw new Error(`pdf fetch failed (${res.status})`);
+    return new Uint8Array(await res.arrayBuffer());
+}
+async function loadDocument(source) {
+    try {
+        const [pdfjs, worker, data] = await Promise.all([
+            import("pdfjs-dist"),
+            import("pdfjs-dist/build/pdf.worker.min.mjs"),
+            loadBytes(source),
+        ]);
+        Object.assign(globalThis, { pdfjsWorker: worker });
+        const loadingTask = pdfjs.getDocument({ data });
+        return { ok: true, document: await loadingTask.promise, loadingTask };
+    }
+    catch {
+        return { ok: false };
+    }
+}
+// The promise must be stable across renders for use().
+function documentFor(source) {
+    const key = "base64" in source ? `base64:${source.base64}` : `url:${source.url}`;
+    return cachedDocument(key, () => loadDocument(source));
+}
+function PageView({ document, pageNumber, }) {
+    const t = useTranslation();
+    const page = use(pageFor(document, pageNumber));
+    // Stable identity: the mount callbacks below depend on it, and a new viewport per render re-mounts canvas and text layer.
+    const viewport = useMemo(() => page.getViewport({ scale: RENDER_SCALE }), [page]);
+    const [availableWidth, setAvailableWidth] = useState(null);
+    const measureFrame = useCallback((frame) => {
+        if (frame === null)
+            return;
+        const observer = new ResizeObserver(() => setAvailableWidth(frame.clientWidth));
+        observer.observe(frame);
+        setAvailableWidth(frame.clientWidth);
+        return () => observer.disconnect();
+    }, []);
+    // The sheet keeps its natural pixel size and is scaled as a whole, so canvas and text layer stay aligned.
+    const fitScale = availableWidth === null || availableWidth <= 0
+        ? 1
+        : Math.min(1, availableWidth / viewport.width);
+    const mountCanvas = useCallback((canvas) => {
+        if (canvas === null)
+            return;
+        const pixelRatio = globalThis.devicePixelRatio || 1;
+        canvas.width = Math.floor(viewport.width * pixelRatio);
+        canvas.height = Math.floor(viewport.height * pixelRatio);
+        const task = page.render({
+            canvas,
+            viewport,
+            transform: pixelRatio === 1 ? undefined : [pixelRatio, 0, 0, pixelRatio, 0, 0],
+        });
+        task.promise.catch(() => undefined);
+        return () => task.cancel();
+    }, [page, viewport]);
+    const mountTextLayer = useCallback((container) => {
+        if (container === null)
+            return;
+        container.style.setProperty("--total-scale-factor", String(RENDER_SCALE));
+        container.style.setProperty("--scale-factor", String(RENDER_SCALE));
+        let layer = null;
+        let cancelled = false;
+        void import("pdfjs-dist").then(({ TextLayer }) => {
+            // skip: cleanup ran before pdfjs finished loading
+            if (cancelled)
+                return undefined;
+            // TextLayer.cancel() keeps rendered spans; a re-mount must not append a second layer.
+            container.replaceChildren();
+            const textLayer = new TextLayer({
+                textContentSource: page.streamTextContent(),
+                container,
+                viewport,
+            });
+            layer = textLayer;
+            return textLayer.render().catch(() => undefined);
+        });
+        return () => {
+            cancelled = true;
+            layer?.cancel();
+        };
+    }, [page, viewport]);
+    return (_jsxs("figure", { className: "m-0 flex w-full flex-col items-center gap-2 rounded-lg bg-muted p-4", "data-testid": `pdf-page-${pageNumber}`, children: [_jsx("div", { ref: measureFrame, className: "w-full", children: _jsx("div", { className: "mx-auto", style: { width: viewport.width * fitScale, height: viewport.height * fitScale }, children: _jsxs("div", { className: "relative border border-border bg-white shadow-md", style: {
+                            width: viewport.width,
+                            height: viewport.height,
+                            transform: `scale(${fitScale})`,
+                            transformOrigin: "top left",
+                        }, children: [_jsx("canvas", { ref: mountCanvas, style: { width: viewport.width, height: viewport.height }, className: "block" }), _jsx("div", { ref: mountTextLayer, className: "absolute inset-0 overflow-hidden leading-none [&_span]:absolute [&_span]:origin-top-left [&_span]:cursor-text [&_span]:whitespace-pre [&_span]:text-transparent [&_span::selection]:bg-primary/30" })] }) }) }), _jsx("figcaption", { className: "text-xs text-muted-foreground", children: t("kumiko.widget.pdf-preview.pageOf", { page: pageNumber, pages: document.numPages }) })] }));
+}
+const pageCache = new WeakMap();
+function pageFor(document, pageNumber) {
+    let pages = pageCache.get(document);
+    if (pages === undefined) {
+        pages = new Map();
+        pageCache.set(document, pages);
+    }
+    let page = pages.get(pageNumber);
+    if (page === undefined) {
+        page = document.getPage(pageNumber);
+        pages.set(pageNumber, page);
+    }
+    return page;
+}
+function Pages({ source }) {
+    const t = useTranslation();
+    const loaded = use(documentFor(source));
+    if (!loaded.ok) {
+        return _jsx("p", { className: "text-sm text-status-bad", children: t("kumiko.widget.pdf-preview.renderFailed") });
+    }
+    const pageNumbers = Array.from({ length: loaded.document.numPages }, (_, index) => index + 1);
+    return (_jsx(_Fragment, { children: pageNumbers.map((pageNumber) => (_jsx(Suspense, { fallback: null, children: _jsx(PageView, { document: loaded.document, pageNumber: pageNumber }) }, pageNumber))) }));
+}
+export function PdfPreview({ source, testId = "pdf-preview", }) {
+    const t = useTranslation();
+    return (_jsx("div", { className: "flex flex-col items-stretch gap-4 overflow-auto", "data-testid": testId, children: _jsx(Suspense, { fallback: _jsx("p", { className: "text-sm text-muted-foreground", children: t("kumiko.widget.pdf-preview.loading") }), children: _jsx(Pages, { source: source }) }) }));
+}

package/dist/web/widgets/photo-slots.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export type PhotoSlotSpec = {
+    readonly id: string;
+    /** The shot this slot asks for ("Front, angled") — the empty slot's
+     *  caption and the filled thumbnail's alt text. */
+    readonly label: string;
+    /** Set once the app holds the photo; the slot then shows the thumbnail. */
+    readonly previewUrl?: string;
+    /** Corner tag on a filled slot, e.g. "Cover photo". */
+    readonly badge?: string;
+};
+export type PhotoSlotsProps = {
+    readonly slots: readonly PhotoSlotSpec[];
+    /** Stores the photo for `slotId`. Throws on failure — the message is shown
+     *  under the slot. The app then passes the slot's `previewUrl`. */
+    readonly onUpload: (slotId: string, file: File) => Promise<void>;
+    /** Second line on an empty slot, e.g. "Camera or gallery". */
+    readonly pickHint?: ReactNode;
+    readonly accept?: readonly string[];
+    /** Opens that camera directly on phones; unset keeps camera and gallery. */
+    readonly capture?: "environment" | "user";
+    /** The first slot spans the full row (cover photo). Defaults to true. */
+    readonly featureFirst?: boolean;
+    readonly disabled?: boolean;
+    readonly testId?: string;
+};
+/** Guided photo capture: one tile per requested shot in a two-column grid,
+ *  each its own camera/gallery picker, filled tiles show the thumbnail. */
+export declare function PhotoSlots({ slots, onUpload, pickHint, accept, capture, featureFirst, disabled, testId, }: PhotoSlotsProps): ReactNode;

package/dist/web/widgets/photo-slots.js

@@ -0,0 +1,52 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Camera, Check, Loader2 } from "lucide-react";
+import { 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";
+import { matchesAccept } from "./upload-zone.js";
+const DEFAULT_ACCEPT = ["image/*"];
+/** Guided photo capture: one tile per requested shot in a two-column grid,
+ *  each its own camera/gallery picker, filled tiles show the thumbnail. */
+export function PhotoSlots({ slots, onUpload, pickHint, accept = DEFAULT_ACCEPT, capture, featureFirst = true, disabled, testId, }) {
+    const t = useTranslation();
+    const [uploadStates, setUploadStates] = useState({});
+    function setSlotState(slotId, state) {
+        setUploadStates((prev) => {
+            const { [slotId]: _previous, ...rest } = prev;
+            return state === undefined ? rest : { ...rest, [slotId]: state };
+        });
+    }
+    async function uploadIntoSlot(slotId, file) {
+        if (!matchesAccept(file, accept)) {
+            setSlotState(slotId, { kind: "error", message: t("kumiko.widget.upload.rejected-type") });
+            return;
+        }
+        setSlotState(slotId, { kind: "uploading" });
+        try {
+            await onUpload(slotId, await resizeImageBeforeUpload(file));
+            setSlotState(slotId, undefined);
+        }
+        catch (cause) {
+            const message = cause instanceof Error ? cause.message : t("kumiko.widget.upload.error");
+            setSlotState(slotId, { kind: "error", message });
+        }
+    }
+    const acceptAttr = toAcceptAttr(accept);
+    return (_jsx("div", { "data-testid": testId, className: "grid grid-cols-2 gap-2.5", children: slots.map((slot, index) => {
+            const uploadState = uploadStates[slot.id];
+            const isUploading = uploadState?.kind === "uploading";
+            const isFeatured = featureFirst && index === 0;
+            const slotTestId = testId !== undefined ? `${testId}-slot-${slot.id}` : undefined;
+            return (_jsxs("div", { className: cn("flex flex-col gap-1", isFeatured && "col-span-2"), children: [_jsxs("label", { "data-testid": slotTestId, "data-filled": slot.previewUrl !== undefined ? "true" : undefined, className: cn("relative flex cursor-pointer flex-col items-center justify-center gap-1 overflow-hidden rounded-lg border-2 text-center text-sm transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", isFeatured ? "h-52" : "h-32", slot.previewUrl !== undefined
+                            ? "border-transparent"
+                            : "border-dashed border-primary/60 bg-primary/5 text-primary", (disabled === true || isUploading) && "cursor-not-allowed opacity-60"), children: [slot.previewUrl !== undefined ? (_jsxs(_Fragment, { children: [_jsx("img", { src: slot.previewUrl, alt: slot.label, className: "absolute inset-0 size-full object-cover" }), slot.badge !== undefined && (_jsx("span", { className: "absolute bottom-2 left-2 rounded-full bg-background/90 px-2 py-0.5 text-xs font-semibold text-foreground", children: slot.badge })), _jsx("span", { className: "absolute top-2 right-2 flex size-6 items-center justify-center rounded-full bg-status-ok text-background", children: _jsx(Check, { "aria-hidden": "true", className: "size-3.5" }) })] })) : (_jsxs(_Fragment, { children: [isUploading ? (_jsx(Loader2, { "aria-hidden": "true", className: "size-6 animate-spin" })) : (_jsx(Camera, { "aria-hidden": "true", className: "size-6" })), _jsx("span", { className: "font-semibold", children: slot.label }), pickHint !== undefined && _jsx("span", { className: "text-xs", children: pickHint })] })), isUploading && (_jsx("span", { className: "sr-only", children: t("kumiko.widget.upload.uploading") })), _jsx("input", { type: "file", className: "sr-only", "data-testid": slotTestId !== undefined ? `${slotTestId}-input` : undefined, "aria-label": slot.label, disabled: disabled === true || isUploading, ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(capture !== undefined && { capture }), onChange: (e) => {
+                                    const file = e.target.files?.[0];
+                                    // Reset so picking the same file again after an error still fires change.
+                                    e.target.value = "";
+                                    if (file !== undefined)
+                                        void uploadIntoSlot(slot.id, file);
+                                } })] }), uploadState?.kind === "error" && (_jsx("p", { role: "alert", className: "text-xs text-destructive", children: uploadState.message }))] }, slot.id));
+        }) }));
+}

package/dist/web/widgets/plan-card.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+export type PlanCardPrice = {
+    readonly amount: string;
+    readonly period?: string;
+};
+export type PlanCardActionSlot = {
+    readonly label: string;
+    readonly onClick: () => void;
+    readonly disabled?: boolean;
+};
+export type PlanCardLinkSlot = {
+    readonly label: string;
+    readonly href: string;
+    readonly target?: "_blank";
+};
+export type PlanCardProps = {
+    readonly title: string;
+    readonly description?: string;
+    /** null renders the price-unavailable state; undefined renders no price row. */
+    readonly price?: PlanCardPrice | null;
+    readonly features?: readonly ReactNode[];
+    readonly current?: boolean;
+    readonly cta?: PlanCardActionSlot;
+    /** Link-styled cta (e.g. contact sales); wins over `cta` when both are set. */
+    readonly ctaLink?: PlanCardLinkSlot;
+    readonly secondaryAction?: PlanCardActionSlot;
+    /** compact: one-off purchases (e.g. credit packs) — title+price in one row, no feature emphasis, smaller padding. */
+    readonly variant?: "default" | "compact";
+    readonly testId?: string;
+};
+export type PlanGridProps = {
+    readonly children: ReactNode;
+    readonly testId?: string;
+};
+export declare function PlanCard({ title, description, price, features, current, cta, ctaLink, secondaryAction, variant, testId, }: PlanCardProps): ReactNode;
+export declare function PlanGrid({ children, testId }: PlanGridProps): ReactNode;

package/dist/web/widgets/plan-card.js

@@ -0,0 +1,13 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePrimitives, useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+export function PlanCard({ title, description, price, features, current = false, cta, ctaLink, secondaryAction, variant = "default", testId, }) {
+    const { Card, Button, Link } = usePrimitives();
+    const t = useTranslation();
+    const compact = variant === "compact";
+    const footer = cta !== undefined || ctaLink !== undefined || secondaryAction !== undefined ? (_jsxs("div", { className: "flex w-full flex-col gap-2", children: [ctaLink !== undefined && (_jsx(Link, { href: ctaLink.href, variant: "button", target: ctaLink.target, className: "w-full justify-center", testId: testId !== undefined ? `${testId}-cta` : "plan-card-cta", children: ctaLink.label })), ctaLink === undefined && cta !== undefined && (_jsx(Button, { width: "full", disabled: cta.disabled, onClick: cta.onClick, testId: testId !== undefined ? `${testId}-cta` : "plan-card-cta", children: cta.label })), secondaryAction !== undefined && (_jsx(Button, { variant: "secondary", width: "full", disabled: secondaryAction.disabled, onClick: secondaryAction.onClick, children: secondaryAction.label }))] })) : undefined;
+    return (_jsxs(Card, { testId: testId ?? "plan-card", className: cn(current && "border-primary"), slots: { footer }, children: [_jsxs("div", { className: cn("flex items-start justify-between gap-2", compact && "items-center"), children: [_jsx("h2", { className: cn("font-semibold", compact ? "text-base" : "text-lg"), children: title }), current && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-current` : "plan-card-current", className: "inline-block rounded-xl bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary", children: t("kumiko.planCard.current") }))] }), description !== undefined && !compact && (_jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })), price !== undefined && (_jsx("div", { className: cn(compact ? "mt-1" : "mt-1 mb-3"), children: price === null ? (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-price-unavailable` : "plan-card-price-unavailable", className: "text-sm text-muted-foreground", children: t("kumiko.planCard.priceUnavailable") })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-2xl font-bold", children: price.amount }), price.period !== undefined && (_jsx("span", { className: "ml-1 text-sm text-muted-foreground", children: price.period }))] })) })), !compact && features !== undefined && features.length > 0 && (_jsx("ul", { className: "space-y-1 text-sm", children: features.map((feature, index) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { "aria-hidden": "true", children: "\u2713" }), _jsx("span", { children: feature })] }, index))) }))] }));
+}
+export function PlanGrid({ children, testId }) {
+    return (_jsx("div", { "data-testid": testId, className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: children }));
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { ProgressTone } from "../../index.ts";
+/**
+ * Progress bar, `value` 0..1 (clamped).
+ *
+ * The track lives in its own inner element so a parent that pads or
+ * stretches its direct children (e.g. RenderEdit's wizard chrome) never
+ * touches the track's own `h-2` — a caller's `className` reaches the
+ * outer wrapper, not the height-bearing track.
+ */
+export declare function ProgressBar({ value, tone, size, ariaLabel, className, testId, }: {
+    readonly value: number;
+    readonly tone?: ProgressTone;
+    /** `"thin"` is a 4px bar on the border-token track for quiet inline progress. */
+    readonly size?: "default" | "thin";
+    readonly ariaLabel?: string;
+    readonly className?: string;
+    readonly testId?: string;
+}): ReactNode;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+// Fully spelled out (no interpolation) — Tailwind's scanner only picks up
+// literal class strings, not `bg-status-${tone}`.
+const FILL_TONE = {
+    default: "bg-primary",
+    success: "bg-status-ok",
+    warn: "bg-status-warn",
+    danger: "bg-status-critical",
+};
+/**
+ * Progress bar, `value` 0..1 (clamped).
+ *
+ * The track lives in its own inner element so a parent that pads or
+ * stretches its direct children (e.g. RenderEdit's wizard chrome) never
+ * touches the track's own `h-2` — a caller's `className` reaches the
+ * outer wrapper, not the height-bearing track.
+ */
+export function ProgressBar({ value, tone = "default", size = "default", ariaLabel, className, testId, }) {
+    // `value` is typically `done / total`; total:0 produces NaN, which would
+    // otherwise leak into `width: "NaN%"` and an invalid aria-valuenow.
+    const pct = Number.isFinite(value) ? Math.max(0, Math.min(1, value)) : 0;
+    return (_jsx("div", { className: cn("w-full", className), children: _jsx("div", { "data-testid": testId, role: "progressbar", "aria-valuenow": Math.round(pct * 100), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": ariaLabel, className: cn("relative w-full overflow-hidden rounded-full", size === "thin" ? "h-1 bg-border" : "h-2 bg-muted"), children: _jsx("div", { className: cn("absolute inset-y-0 left-0 rounded-full", FILL_TONE[tone]), style: { width: `${pct * 100}%` } }) }) }));
+}

package/dist/web/widgets/progress-list.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+export type ProgressListRow = {
+    readonly id: string;
+    readonly label: string;
+    readonly value: string;
+    /** null renders no bar (nothing to measure against, e.g. an unlimited cap). */
+    readonly fraction: number | null;
+    /** danger colors bar and value. */
+    readonly tone?: "default" | "danger";
+    /** Small line under the bar, e.g. "42 % repaid". */
+    readonly sub?: string;
+};
+/** Liste aus Label/Wert-Kopfzeile + Fortschrittsbalken pro Eintrag (z.B.
+ *  Tilgungsfortschritt pro Kredit). */
+export declare function ProgressList({ rows, emptyContent, testId, }: {
+    readonly rows: readonly ProgressListRow[];
+    readonly emptyContent?: ReactNode;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/progress-list.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { ProgressBar } from "./progress-bar.js";
+/** Liste aus Label/Wert-Kopfzeile + Fortschrittsbalken pro Eintrag (z.B.
+ *  Tilgungsfortschritt pro Kredit). */
+export function ProgressList({ rows, emptyContent, testId, }) {
+    if (rows.length === 0) {
+        return _jsx("div", { "data-testid": testId, children: emptyContent });
+    }
+    return (_jsx("ul", { "data-testid": testId, className: "flex max-h-64 flex-col gap-3 overflow-y-auto pr-1", children: rows.map((row) => (_jsxs("li", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-2 text-sm", children: [_jsx("span", { className: "font-medium", children: row.label }), _jsx("span", { className: cn("tabular-nums", row.tone === "danger" ? "text-status-critical" : "text-muted-foreground"), children: row.value })] }), row.fraction !== null && _jsx(ProgressBar, { value: row.fraction, tone: row.tone }), row.sub !== undefined && _jsx("div", { className: "text-xs text-muted-foreground", children: row.sub })] }, row.id))) }));
+}