@cosmicdrift/kumiko-renderer 0.377.0 → 0.378.0

package/dist/primitives.d.ts

@@ -1346,6 +1346,12 @@ export type JsonViewProps = {
     readonly indent?: number;
     readonly testId?: string;
 };
+/** Read-only list of stored files (FileRef ids): name, download link and, for
+ *  PDFs, an inline preview. Used for `renderer: { format: "file" }` on a detail field. */
+export type FileValueListProps = {
+    readonly fileIds: readonly string[];
+    readonly testId?: string;
+};
 /** Band above the tabs of a record detail: optional subtitle line plus the
  *  metrics as a definition list. `children` are `Metric` tiles. */
 export type MetricBandProps = {
@@ -1528,6 +1534,10 @@ export type CorePrimitives = {
      *  CorePrimitives mocks in tests keep compiling — additive rollout of
      *  a new primitive shouldn't force every test double to grow a stub. */
     readonly JsonView?: ComponentType<JsonViewProps>;
+    /** Optional (unlike the other Core-Primitives) so existing partial
+     *  CorePrimitives mocks in tests keep compiling — additive rollout of
+     *  a new primitive shouldn't force every test double to grow a stub. */
+    readonly FileValueList?: ComponentType<FileValueListProps>;
     /** Optional (unlike the other Core-Primitives) so existing partial
      *  CorePrimitives mocks in tests keep compiling — additive rollout of
      *  a new primitive shouldn't force every test double to grow a stub. */

package/dist/web/index.d.ts

@@ -74,5 +74,5 @@ export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resiz
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.tsx";
 export type { KumikoBuild } from "./version/update-checker.tsx";
 export { readLoadedBuild } from "./version/update-checker.tsx";
-export type { AiTextAreaProps, AiTextFieldProps, BooleanFieldProps, ComparisonMetric, DateFieldProps, DrawerProps, FeedRow, FileFieldProps, FloatingPanelGeometry, FloatingPanelProps, InfinityListProps, InfinityListSelection, ModeSwitchVariant, NumberFieldProps, PhotoSlotSpec, PhotoSlotsProps, PlanCardActionSlot, PlanCardLinkSlot, PlanCardPrice, PlanCardProps, PlanGridProps, ProgressListRow, PublicShellProps, PublicShellVariant, QueryTableColumn, QueryTableProps, RangeFieldProps, ResultColumn, SelectFieldProps, SideBySideTableCell, SideBySideTableColumn, SideBySideTableRow, StatDelta, StatTone, StatusBadgeTone, StatusBarEntry, StatusTone, TextareaFieldProps, TextFieldProps, TimeseriesHeight, TimeseriesPoint, TimeseriesReferenceLine, TimeseriesXAxis, TimeseriesYAxis, UploadZoneProps, } from "./widgets/index.ts";
-export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.ts";
+export type { AiTextAreaProps, AiTextFieldProps, BooleanFieldProps, ComparisonMetric, DateFieldProps, DrawerProps, FeedRow, FileFieldProps, FloatingPanelGeometry, FloatingPanelProps, InfinityListProps, InfinityListSelection, ModeSwitchVariant, NumberFieldProps, PdfPreviewSource, PhotoSlotSpec, PhotoSlotsProps, PlanCardActionSlot, PlanCardLinkSlot, PlanCardPrice, PlanCardProps, PlanGridProps, ProgressListRow, PublicShellProps, PublicShellVariant, QueryTableColumn, QueryTableProps, RangeFieldProps, ResultColumn, SelectFieldProps, SideBySideTableCell, SideBySideTableColumn, SideBySideTableRow, StatDelta, StatTone, StatusBadgeTone, StatusBarEntry, StatusTone, TextareaFieldProps, TextFieldProps, TimeseriesHeight, TimeseriesPoint, TimeseriesReferenceLine, TimeseriesXAxis, TimeseriesYAxis, UploadZoneProps, } from "./widgets/index.ts";
+export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.ts";

package/dist/web/index.js

@@ -50,4 +50,4 @@ export { applyTokensToCssVars, defaultTokens, lightTokens, useBrowserTokensApi,
 export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./ui/resizable.js";
 export { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar.js";
 export { readLoadedBuild } from "./version/update-checker.js";
-export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.js";
+export { AiTextArea, AiTextField, BooleanField, CollapsibleSection, ComparisonTable, DateField, DetailList, Drawer, EmptyState, ErrorState, FeedList, FileField, FloatingPanel, InfinityList, LoadingState, MiniStat, ModeSwitch, MoneyField, NumberField, PdfPreview, PercentField, PhotoSlots, PlanCard, PlanGrid, ProgressBar, ProgressList, PublicShell, QueryTable, RangeField, ResultPanel, ResultTable, SectionCard, SelectField, SideBySideTable, Sparkline, STATUS_TONE_TEXT, StatCard, StatusBadge, StatusBarChart, StepBar, smoothPath, TextareaField, TextField, TimeseriesChart, UploadZone, useDraft, } from "./widgets/index.js";

package/dist/web/primitives/file-thumbnail.d.ts

@@ -8,6 +8,11 @@ export declare function FileThumbnail({ fileId, variant, className, testId, }: {
     readonly className?: string;
     readonly testId?: string;
 }): ReactNode;
+type FileMeta = {
+    readonly fileName: string;
+    readonly mimeType: string | undefined;
+};
+export declare function useFileMeta(fileId: string): FileMeta | null;
 export declare function FileNameLink({ fileId, fallbackLabel, className, }: {
     readonly fileId: string;
     readonly fallbackLabel: string;
@@ -23,3 +28,4 @@ export declare function FileDisplayCell({ value, display, fallbackLabel, compact
     readonly fallbackLabel: string;
     readonly compact?: boolean;
 }): ReactNode;
+export {};

package/dist/web/primitives/file-thumbnail.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isUuid } from "@cosmicdrift/kumiko-types/identifiers";
 import { ImageIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import { fileIdsOf } from "../../file-ids-of.js";
 import { cn } from "../lib/cn.js";
 // Stored values are untrusted: only UUIDs reach a request, and path segments are
 // encoded so an id like "../x" or "a?b" cannot redirect the request.
@@ -33,42 +34,41 @@ function ThumbnailChain({ fileId, variant, className, testId, }) {
 export function FileThumbnail({ fileId, variant, className = "h-24 w-32", testId, }) {
     return (_jsx(ThumbnailChain, { fileId: fileId, variant: variant, className: className, testId: testId }, `${fileId}:${variant ?? ""}`));
 }
-function isFileMeta(value) {
-    return (typeof value === "object" &&
-        value !== null &&
-        "fileName" in value &&
-        typeof value.fileName === "string");
+function parseFileMeta(value) {
+    if (typeof value !== "object" || value === null || !("fileName" in value))
+        return null;
+    if (typeof value.fileName !== "string")
+        return null;
+    const mimeType = "mimeType" in value && typeof value.mimeType === "string" ? value.mimeType : undefined;
+    return { fileName: value.fileName, mimeType };
 }
-export function FileNameLink({ fileId, fallbackLabel, className, }) {
-    const [fileName, setFileName] = useState(null);
+export function useFileMeta(fileId) {
+    const [meta, setMeta] = useState(null);
     const validId = isUuid(fileId);
     useEffect(() => {
         let cancelled = false;
-        setFileName(null);
+        setMeta(null);
         if (!validId)
             return;
         fetch(`${fileOriginalUrl(fileId)}/meta`)
             .then((res) => (res.ok ? res.json() : null))
-            .then((meta) => {
-            if (!cancelled && isFileMeta(meta))
-                setFileName(meta.fileName);
+            .then((json) => {
+            if (!cancelled)
+                setMeta(parseFileMeta(json));
         })
             .catch(() => { });
         return () => {
             cancelled = true;
         };
     }, [fileId, validId]);
-    if (!validId)
+    return meta;
+}
+export function FileNameLink({ fileId, fallbackLabel, className, }) {
+    const fileName = useFileMeta(fileId)?.fileName ?? null;
+    if (!isUuid(fileId))
         return _jsx("span", { className: cn("text-sm", className), children: fallbackLabel });
     return (_jsx("a", { href: fileOriginalUrl(fileId), target: "_blank", rel: "noreferrer", className: cn("text-sm underline underline-offset-2", className), children: fileName ?? fallbackLabel }));
 }
-function fileIdsOf(value) {
-    if (typeof value === "string")
-        return value === "" ? [] : [value];
-    if (!Array.isArray(value))
-        return [];
-    return value.filter((entry) => typeof entry === "string" && entry !== "");
-}
 // Height-bound, width follows the aspect ratio within a clamp, so a portrait and
 // a landscape photo both read as a preview without stretching the column.
 const TABLE_THUMBNAIL_CLASS = "h-16 min-w-16 max-w-24 object-cover";

package/dist/web/primitives/file-value-list.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+import { type FileValueListProps } from "../../index.ts";
+export declare function FileValueList({ fileIds, testId }: FileValueListProps): ReactNode;

package/dist/web/primitives/file-value-list.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isUuid } from "@cosmicdrift/kumiko-types/identifiers";
+import { useState } from "react";
+import { useTranslation } from "../../index.js";
+import { Button } from "../ui/button.js";
+import { PdfPreview } from "../widgets/pdf-preview.js";
+import { fileOriginalUrl, useFileMeta } from "./file-thumbnail.js";
+const PDF_MIME_TYPE = "application/pdf";
+function FileValueRow({ fileId, testId, }) {
+    const t = useTranslation();
+    const meta = useFileMeta(fileId);
+    const [previewOpen, setPreviewOpen] = useState(false);
+    if (!isUuid(fileId))
+        return _jsx("span", { className: "text-sm", children: fileId });
+    const downloadUrl = fileOriginalUrl(fileId);
+    return (_jsxs("li", { className: "flex flex-col gap-2", "data-testid": testId, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-sm", children: meta?.fileName ?? fileId.slice(0, 8) }), _jsx("a", { href: downloadUrl, download: meta?.fileName ?? "", className: "text-primary text-sm underline underline-offset-2", ...(testId !== undefined && { "data-testid": `${testId}-download` }), children: t("kumiko.field.file-list.download") }), meta?.mimeType === PDF_MIME_TYPE && (_jsx(Button, { type: "button", variant: "link", size: "sm", "aria-expanded": previewOpen, onClick: () => setPreviewOpen((open) => !open), ...(testId !== undefined && { "data-testid": `${testId}-preview-toggle` }), children: t(previewOpen ? "kumiko.field.file-list.hidePreview" : "kumiko.field.file-list.preview") }))] }), previewOpen && (_jsx(PdfPreview, { source: { url: downloadUrl }, testId: `file-preview-${fileId}` }))] }));
+}
+export function FileValueList({ fileIds, testId }) {
+    if (fileIds.length === 0)
+        return null;
+    return (_jsx("ul", { className: "m-0 flex list-none flex-col gap-3 p-0", "data-testid": testId, children: fileIds.map((fileId) => (_jsx(FileValueRow, { fileId: fileId, ...(testId !== undefined && { testId: `${testId}-${fileId}` }) }, fileId))) }));
+}

package/dist/web/primitives/index.js

@@ -32,6 +32,7 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 import { EmbeddedListInput } from "./embedded-list-input.js";
 import { CardLeadingImage, FileDisplayCell } from "./file-thumbnail.js";
 import { FileUploadInput } from "./file-upload.js";
+import { FileValueList } from "./file-value-list.js";
 import { DefaultJsonView } from "./json-view.js";
 import { screenFormColumnWidthClassName, screenPaddingClassName, screenWidthClassName, } from "./layout.js";
 import { DefaultLightbox } from "./lightbox.js";
@@ -1920,7 +1921,7 @@ export function DefaultCard({ slots, options, className, testId, dataAttributes,
                 // The one region allowed to shrink and scroll internally — mirrors
                 // FormSections' fillHeight === true && "min-h-0" treatment of the
                 // section it wraps.
-                fillHeight && "min-h-0 flex flex-col"), children: children })), s.footer !== undefined && (_jsx("div", { className: cn(cardFooter, footerInset && cardFooterInset, footerBordered && cardFooterBorder, fillHeight && "shrink-0"), children: s.footer }))] }));
+                fillHeight && "min-h-0 flex flex-col"), children: children })), s.footer !== undefined && s.footer !== null && s.footer !== false && (_jsx("div", { className: cn(cardFooter, footerInset && cardFooterInset, footerBordered && cardFooterBorder, fillHeight && "shrink-0"), children: s.footer }))] }));
     return (_jsx(InsideScreenFormColumnContext.Provider, { value: false, children: screenBody ? _jsx(FormScreenShell, { children: card }) : card }));
 }
 // otpauth:// enrollment URI → scannable QR (errorCorrectionLevel "H", ~30%
@@ -2011,6 +2012,7 @@ export const defaultPrimitives = {
     MetricBand: DefaultMetricBand,
     PageHeader: DefaultPageHeader,
     JsonView: DefaultJsonView,
+    FileValueList,
     FillContainer: DefaultFillContainer,
     ActionOverflowMenu,
     SecretReveal: DefaultSecretReveal,

package/dist/web/widgets/bounded-load-cache.d.ts

@@ -0,0 +1 @@
+export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void): (key: string, load: () => Promise<T>) => Promise<T>;

package/dist/web/widgets/bounded-load-cache.js

@@ -0,0 +1,25 @@
+// Evicts the oldest entry once `max` is exceeded and disposes only that one,
+// so several documents on one page keep their own loading tasks alive.
+export function createBoundedLoadCache(max, dispose) {
+    const entries = new Map();
+    return (key, load) => {
+        const cached = entries.get(key);
+        if (cached !== undefined)
+            return cached;
+        const loading = load();
+        entries.set(key, loading);
+        // A failed load must not stick: the next mount retries instead of replaying the rejection.
+        loading.catch(() => {
+            if (entries.get(key) === loading)
+                entries.delete(key);
+        });
+        if (entries.size > max) {
+            const [oldestKey, oldest] = entries.entries().next().value ?? [];
+            if (oldestKey !== undefined && oldest !== undefined) {
+                entries.delete(oldestKey);
+                void oldest.then(dispose);
+            }
+        }
+        return loading;
+    };
+}

package/dist/web/widgets/drawer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Maximize2Icon, Minimize2Icon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "../../index.js";
 import { clamp } from "../lib/clamp.js";
 import { cn } from "../lib/cn.js";
@@ -78,6 +78,39 @@ function sidePanelClass(side, narrow, variant, belowHeader) {
             return `inset-y-8 right-8 h-auto ${WIDTH_CLASS} rounded-[2rem] border shadow-2xl overflow-hidden`;
     }
 }
+const DRAWER_INSET_PROPERTY = {
+    left: "--kumiko-drawer-inset-left",
+    right: "--kumiko-drawer-inset-right",
+};
+// Publishes the width a non-modal side drawer occupies so the shell content (styles.css) can
+// narrow instead of sitting underneath it. Read from the layout box (offsetLeft/offsetWidth), not
+// getBoundingClientRect: the slide-in animation moves the painted rect, and the observer would
+// not fire again once it settles.
+// ponytail: one owner per side, so two non-modal drawers open on the same side overwrite each
+// other's value; a registry that takes the max is needed once a screen stacks them.
+function usePublishDrawerInset(sheet, side, active) {
+    useEffect(() => {
+        if (!active || sheet === null || (side !== "left" && side !== "right"))
+            return;
+        const property = DRAWER_INSET_PROPERTY[side];
+        const root = document.documentElement;
+        const publish = () => {
+            const inset = side === "right"
+                ? window.innerWidth - sheet.offsetLeft
+                : sheet.offsetLeft + sheet.offsetWidth;
+            root.style.setProperty(property, `${Math.max(0, Math.round(inset))}px`);
+        };
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(sheet);
+        window.addEventListener("resize", publish);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("resize", publish);
+            root.style.removeProperty(property);
+        };
+    }, [sheet, side, active]);
+}
 /** Slide-in panel beside a list (e.g. mail reader next to the inbox) —
  *  thin wrapper over the Sheet primitive with header/body/footer slots
  *  so screens skip per-route Radix boilerplate. */
@@ -95,6 +128,8 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
         : Math.min(maxWidthPx, Math.round(window.innerWidth * 0.9));
     const [resizedWidthPx, setResizedWidthPx] = useState(() => clamp(resize?.defaultWidthPx ?? defaultWidthFromViewport(), minWidthPx, effectiveMaxWidthPx()));
     const [maximized, setMaximized] = useState(false);
+    const [sheet, setSheet] = useState(null);
+    usePublishDrawerInset(sheet, side, open && !modal && !narrow);
     const blurPx = backdrop?.blurPx ?? DEFAULT_BLUR_PX;
     const dimPercent = backdrop?.dimPercent ?? DEFAULT_DIM_PERCENT;
     const overlayStyle = {
@@ -134,7 +169,7 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
         // instead of resizing relative to what's on screen.
         setResizedWidthPx((current) => clamp((maximized ? effectiveWidthPx : current) + delta, minWidthPx, effectiveMaxWidthPx()));
     };
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, modal: modal, children: _jsxs(DrawerSheetContent, { side: side, "data-testid": testId, overlayStyle: overlayStyle, 
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, modal: modal, children: _jsxs(DrawerSheetContent, { ref: setSheet, side: side, "data-testid": testId, overlayStyle: overlayStyle, 
             // Radix already drops the overlay and the focus trap for a
             // non-modal Root; only the dismiss-on-outside-interaction is left
             // to suppress, so a click into the page behind keeps the panel open.

package/dist/web/widgets/index.d.ts

@@ -10,6 +10,7 @@ export { FloatingPanel, type FloatingPanelGeometry, type FloatingPanelProps, } f
 export { BooleanField, type BooleanFieldProps, DateField, type DateFieldProps, FileField, type FileFieldProps, MoneyField, NumberField, type NumberFieldProps, PercentField, RangeField, type RangeFieldProps, SelectField, type SelectFieldProps, TextareaField, type TextareaFieldProps, TextField, type TextFieldProps, } from "./form-fields.tsx";
 export { InfinityList, type InfinityListProps, type InfinityListSelection, } from "./infinity-list.tsx";
 export { ModeSwitch, type ModeSwitchVariant } from "./mode-switch.tsx";
+export { PdfPreview, type PdfPreviewSource } from "./pdf-preview.tsx";
 export { type PhotoSlotSpec, PhotoSlots, type PhotoSlotsProps } from "./photo-slots.tsx";
 export { PlanCard, type PlanCardActionSlot, type PlanCardLinkSlot, type PlanCardPrice, type PlanCardProps, PlanGrid, type PlanGridProps, } from "./plan-card.tsx";
 export { ProgressBar } from "./progress-bar.tsx";

package/dist/web/widgets/index.js

@@ -13,6 +13,7 @@ export { FloatingPanel, } from "./floating-panel.js";
 export { BooleanField, DateField, FileField, MoneyField, NumberField, PercentField, RangeField, SelectField, TextareaField, TextField, } from "./form-fields.js";
 export { InfinityList, } from "./infinity-list.js";
 export { ModeSwitch } from "./mode-switch.js";
+export { PdfPreview } from "./pdf-preview.js";
 export { PhotoSlots } from "./photo-slots.js";
 export { PlanCard, PlanGrid, } from "./plan-card.js";
 export { ProgressBar } from "./progress-bar.js";

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.377.0",
+  "version": "0.378.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>",
@@ -17,6 +17,10 @@
       "types": "./dist/headless/index.d.ts",
       "default": "./dist/headless/index.js"
     },
+    "./flow-diagram": {
+      "types": "./dist/flow-diagram/index.d.ts",
+      "default": "./dist/flow-diagram/index.js"
+    },
     "./headless/apex": {
       "types": "./dist/headless/apex/index.d.ts",
       "default": "./dist/headless/apex/index.js"
@@ -44,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.377.0",
-    "@cosmicdrift/kumiko-types": "0.377.0",
+    "@cosmicdrift/kumiko-framework": "0.378.0",
+    "@cosmicdrift/kumiko-types": "0.378.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,6 +68,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^1.14.0",
+    "pdfjs-dist": "6.3.289",
     "qrcode": "^1.5.4",
     "radix-ui": "^1.4.3",
     "react": "^19.2.6",
@@ -87,8 +92,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.377.0",
-    "@cosmicdrift/kumiko-testing": "0.377.0",
+    "@cosmicdrift/kumiko-locale-de": "0.378.0",
+    "@cosmicdrift/kumiko-testing": "0.378.0",
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
@@ -118,6 +123,10 @@
         "types": "./dist/headless/index.d.ts",
         "default": "./dist/headless/index.js"
       },
+      "./flow-diagram": {
+        "types": "./dist/flow-diagram/index.d.ts",
+        "default": "./dist/flow-diagram/index.js"
+      },
       "./headless/apex": {
         "types": "./dist/headless/apex/index.d.ts",
         "default": "./dist/headless/apex/index.js"

package/src/changes.json

@@ -1,4 +1,43 @@
 [
+  {
+    "version": "0.378.0",
+    "type": "fix",
+    "title": "Non-modal drawers narrow the content instead of covering it",
+    "detail": "A Drawer with modal={false} on a wide viewport now publishes the width it occupies as --kumiko-drawer-inset-right or --kumiko-drawer-inset-left on the document root, and the shell content area (main next to the sidebar) takes it as inline padding, so error banners, right columns and the pinned form footer end beside the drawer. Modal drawers and narrow viewports keep overlaying. Two non-modal drawers open on the same side overwrite each other's value."
+  },
+  {
+    "version": "0.378.0",
+    "type": "improvement",
+    "title": "Files fields show download and PDF preview",
+    "detail": "A read-only detail field with renderer { format: \"file\" } (projectionDetail, readOnly edit field) lists each file with its name and a download link; PDFs get an inline preview toggle. New optional primitive FileValueList, and PdfPreview (moved here from the document designer) with a per-source bounded document cache so several PDFs can share a page. i18n keys kumiko.field.file-list.download/preview/hidePreview and kumiko.widget.pdf-preview.* ship in de, es, fr and it.",
+    "migration": "PdfPreview is now exported from @cosmicdrift/kumiko-renderer/web (props: source {base64}|{url}, testId)."
+  },
+  {
+    "version": "0.378.0",
+    "type": "improvement",
+    "title": "FormScreenLayout gives custom screens the standard form screen layout",
+    "detail": "New universal component FormScreenLayout (children, description, actions, secondaryActions, onSubmit, width, testId) renders the same left-aligned form column, section stack and pinned footer as an entityEdit screen. Fill it with Section primitives (title, icon, subtitle); description becomes the form subtitle.",
+    "migration": "Custom form screens can replace FormScreenShell + Card with FormScreenLayout + Section."
+  },
+  {
+    "version": "0.378.0",
+    "type": "fix",
+    "title": "Card renders no footer bar for an empty footer slot",
+    "detail": "slots.footer set to false or null (for example `hasDone && <Button/>`) left an empty grey footer bar. The bar now renders only when the footer slot has content."
+  },
+  {
+    "version": "0.378.0",
+    "type": "improvement",
+    "title": "flow-diagram subpath",
+    "detail": "\"@cosmicdrift/kumiko-renderer/flow-diagram\" exports renderFlow(spec) and the FlowSpec, FlowNode, FlowEdge, FlowIcon types, a pure string function that renders an animated SVG flow diagram."
+  },
+  {
+    "version": "0.378.0",
+    "type": "breaking",
+    "title": "Renderer stylesheet no longer scans the document designer",
+    "detail": "The renderer stylesheet stopped scanning the document designer sources by relative path, which broke in isolated installs.",
+    "migration": "Apps that embed the document designer add `@import \"@cosmicdrift/kumiko-document-designer/web/styles.css\";` after the renderer stylesheet import in their styles.css."
+  },
   {
     "version": "0.377.0",
     "type": "improvement",

package/src/web/styles.css

@@ -34,12 +34,13 @@
    imported through. Here that is `<package>/src/web` in both layouts, so:
    - `../` is the renderer's own src (shared screens and components) and
      `../../dist` its compiled twin;
-   - the sibling packages (bundled-features, document-designer, neither
-     ships its own compiled CSS) need two variants: `../../../X` in the
+   - the sibling package bundled-features (no compiled CSS of its own) needs two variants: `../../../X` in the
      workspace (unscoped dir name) and `../../../kumiko-X` in a standalone
      consumer (scoped registry name under node_modules/@cosmicdrift/).
    A path that doesn't exist in a given layout is simply not matched, no
-   error. samples is monorepo-only (in-repo sample build), a no-op elsewhere.
+   error. The document designer is not scanned from here: it ships its own
+   `@cosmicdrift/kumiko-document-designer/web/styles.css`, which an app imports
+   after this file. samples is monorepo-only (in-repo sample build), a no-op elsewhere.
 
    The published packages ship compiled dist (class names survive as string
    literals in the .js), so every src line has a dist twin; src stays for
@@ -51,10 +52,6 @@
 @source "../../../bundled-features/dist/**/*.js";
 @source "../../../kumiko-bundled-features/src/**/*.{ts,tsx}";
 @source "../../../kumiko-bundled-features/dist/**/*.js";
-@source "../../../document-designer/src/**/*.{ts,tsx}";
-@source "../../../document-designer/dist/**/*.js";
-@source "../../../kumiko-document-designer/src/**/*.{ts,tsx}";
-@source "../../../kumiko-document-designer/dist/**/*.js";
 @source "../../../../samples/**/src/**/*.{ts,tsx}";
 /* In the monorepo `tsc --build` emits composite output (incl. compiled tests
    and stale files of deleted components) into dist; scanning it would make the
@@ -62,8 +59,6 @@
 @source not "../../dist/**/__tests__/**";
 @source not "../../../bundled-features/dist/**/__tests__/**";
 @source not "../../../kumiko-bundled-features/dist/**/__tests__/**";
-@source not "../../../document-designer/dist/**/__tests__/**";
-@source not "../../../kumiko-document-designer/dist/**/__tests__/**";
 
 /* Dark-Mode via class-selector (nicht media). Erlaubt JS-Toggle
    und überschreibt System-Preference wenn die App will. */
@@ -301,6 +296,15 @@
   --shell-header-height: 3.5rem;
 }
 
+/* A non-modal side Drawer publishes the width it occupies (widgets/drawer.tsx); the content area
+   narrows by that much instead of sitting underneath. Only <main>: the drawer starts below the
+   header, and the pinned form footer lives inside <main>. No transition: the sheet slides by
+   transform, its width never animates. */
+[data-slot="sidebar-inset"] > main {
+  padding-inline-end: var(--kumiko-drawer-inset-right, 0px);
+  padding-inline-start: var(--kumiko-drawer-inset-left, 0px);
+}
+
 /* Light-Mode-Overrides — aktiv wenn `<html>` KEINE `.dark` Klasse
    hat. Dark ist der Default (siehe @theme oben); toggled der User
    auf light, greifen diese Werte. */