@cosmicdrift/kumiko-renderer 0.374.0 → 0.378.0

package/dist/web/widgets/collapsible-section.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/** Aufklappbare Sektion (native <details>, aber React-kontrolliert: sonst
+ *  springt das open-Attribut bei jedem Parent-Re-Render auf den Initialwert
+ *  zurück). Eine Optik für alle „Erweitert"/„Mehr"-Abschnitte. */
+export declare function CollapsibleSection({ title, defaultOpen, children, testId, }: {
+    readonly title: string;
+    readonly defaultOpen?: boolean;
+    readonly children: ReactNode;
+    readonly testId?: string;
+}): ReactNode;

package/dist/web/widgets/collapsible-section.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { useEffect, useState } from "react";
+/** Aufklappbare Sektion (native <details>, aber React-kontrolliert: sonst
+ *  springt das open-Attribut bei jedem Parent-Re-Render auf den Initialwert
+ *  zurück). Eine Optik für alle „Erweitert"/„Mehr"-Abschnitte. */
+export function CollapsibleSection({ title, defaultOpen = false, children, testId, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    // useState(defaultOpen) liest nur den Mount-Wert — ein async hydrierter
+    // Draft flippt `defaultOpen` zu spät für den Lazy-Initializer. Open-only
+    // Effect: kämpft nie gegen ein manuelles Zuklappen des Users.
+    useEffect(() => {
+        if (defaultOpen)
+            setOpen(true);
+    }, [defaultOpen]);
+    return (_jsxs("details", { "data-testid": testId, className: "group rounded-lg border bg-card", open: open, onToggle: (e) => setOpen(e.currentTarget.open), children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center justify-between gap-2 rounded-lg px-4 py-2.5 text-sm font-medium hover:bg-muted/50 [&::-webkit-details-marker]:hidden", children: [_jsx("span", { children: title }), _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 text-muted-foreground transition-transform group-open:rotate-90" })] }), _jsx("div", { className: "border-t px-4 py-3", children: children })] }));
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export type DashboardListColumn = {
+    readonly field: string;
+    /** Translated by the caller. */
+    readonly label: string;
+    readonly display?: "bar" | "badge" | "datetime";
+    readonly badgeToneField?: string;
+};
+type Row = Readonly<Record<string, unknown>>;
+/** Compact 40px-row table for dashboard lists with optional bar/badge
+ *  columns. */
+export declare function DashboardListTable({ columns, rows, formatPercent, formatNumber, formatDateTime, translate, testId, }: {
+    readonly columns: readonly DashboardListColumn[];
+    readonly rows: readonly Row[];
+    readonly formatPercent: (fraction: number) => string;
+    readonly formatNumber: (value: number) => string;
+    readonly formatDateTime: (atMs: number) => string;
+    readonly translate: (key: string) => string;
+    readonly testId?: string;
+}): ReactNode;
+export {};

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMPTY_VALUE_PLACEHOLDER } from "../../headless/index.js";
+import { StatusBadge } from "./status-badge.js";
+const BADGE_TONE = {
+    positive: "ok",
+    warn: "warn",
+    negative: "bad",
+    neutral: "muted",
+};
+function fractionOf(raw) {
+    return typeof raw === "number" && Number.isFinite(raw) ? Math.max(0, Math.min(1, raw)) : 0;
+}
+// Rows may carry i18n keys (quota labels, failure reasons); translate falls back to the key itself.
+const I18N_KEY_SHAPE = /^[a-z][\w-]*(?:[:.][\w-]+)+$/i;
+function Cell({ column, row, formatPercent, formatNumber, formatDateTime, translate, }) {
+    const raw = row[column.field];
+    if (column.display === "bar") {
+        const fraction = fractionOf(raw);
+        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { role: "progressbar", "aria-valuenow": Math.round(fraction * 100), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": column.label, className: "h-1 min-w-16 flex-1 overflow-hidden rounded-full bg-border", children: _jsx("div", { className: "h-full rounded-full bg-status-active", style: { width: `${fraction * 100}%` } }) }), _jsx("span", { className: "w-10 shrink-0 text-right tabular-nums text-muted-foreground", children: formatPercent(fraction) })] }));
+    }
+    if (column.display === "badge") {
+        if (raw === undefined || raw === null || raw === "")
+            return EMPTY_VALUE_PLACEHOLDER;
+        const toneKey = column.badgeToneField !== undefined ? row[column.badgeToneField] : undefined;
+        const tone = (typeof toneKey === "string" ? BADGE_TONE[toneKey] : undefined) ?? "muted";
+        return _jsx(StatusBadge, { tone: tone, children: String(raw) });
+    }
+    if (column.display === "datetime") {
+        const atMs = typeof raw === "number" ? raw : typeof raw === "string" ? Date.parse(raw) : Number.NaN;
+        if (!Number.isFinite(atMs))
+            return EMPTY_VALUE_PLACEHOLDER;
+        return _jsx("span", { className: "tabular-nums", children: formatDateTime(atMs) });
+    }
+    if (typeof raw === "number")
+        return _jsx("span", { className: "tabular-nums", children: formatNumber(raw) });
+    if (raw === undefined || raw === null || raw === "")
+        return EMPTY_VALUE_PLACEHOLDER;
+    const text = String(raw);
+    return I18N_KEY_SHAPE.test(text) ? translate(text) : text;
+}
+/** Compact 40px-row table for dashboard lists with optional bar/badge
+ *  columns. */
+export function DashboardListTable({ columns, rows, formatPercent, formatNumber, formatDateTime, translate, testId, }) {
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { "data-testid": testId, className: "w-full text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "h-9 border-b border-border-row text-left text-xs text-muted-foreground", children: columns.map((column) => (_jsx("th", { scope: "col", className: "px-4 font-medium", children: column.label }, column.field))) }) }), _jsx("tbody", { children: rows.map((row, index) => (_jsx("tr", { className: "h-10 border-b border-border-row last:border-b-0", children: columns.map((column) => (_jsx("td", { className: "px-4", children: _jsx(Cell, { column: column, row: row, formatPercent: formatPercent, formatNumber: formatNumber, formatDateTime: formatDateTime, translate: translate }) }, column.field))) }, typeof row["id"] === "string" ? row["id"] : index))) })] }) }));
+}

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+/** Read-only Schlüssel-Wert-Liste für Detail-Masken (Label links gedimmt,
+ *  Wert rechts). Wert ist ReactNode → Badges/Chips möglich. `emphasize` hebt
+ *  eine Zeile hervor (z.B. das Endergebnis in einem Rechner). */
+export declare function DetailList({ rows, testId, }: {
+    readonly rows: readonly {
+        /** Optional stable key -- falls back to the label when omitted (fine as
+         *  long as labels are unique; set id when they can repeat). */
+        readonly id?: string;
+        readonly label: string;
+        readonly value: ReactNode;
+        readonly emphasize?: boolean;
+    }[];
+    readonly testId?: string;
+}): ReactNode;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/** Read-only Schlüssel-Wert-Liste für Detail-Masken (Label links gedimmt,
+ *  Wert rechts). Wert ist ReactNode → Badges/Chips möglich. `emphasize` hebt
+ *  eine Zeile hervor (z.B. das Endergebnis in einem Rechner). */
+export function DetailList({ rows, testId, }) {
+    return (_jsx("dl", { "data-testid": testId, className: "@container flex flex-col divide-y", children: rows.map((row) => (_jsxs("div", { className: "grid grid-cols-1 gap-0.5 py-2.5 @md:grid-cols-[200px_1fr] @md:gap-4", children: [_jsx("dt", { className: cn("text-sm text-muted-foreground", row.emphasize === true && "font-semibold text-foreground"), children: row.label }), _jsx("dd", { className: cn("text-sm font-medium", row.emphasize === true && "font-semibold"), children: row.value })] }, row.id ?? row.label))) }));
+}

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

@@ -0,0 +1,65 @@
+import { type ReactNode } from "react";
+export type DrawerProps = {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly side?: "left" | "right" | "top" | "bottom";
+    readonly title?: ReactNode;
+    readonly description?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly children: ReactNode;
+    readonly testId?: string;
+    /** Header close (X). Default `true`. Turn off when the caller's own
+     *  footer already has a dedicated close/cancel action, so there is only
+     *  one way to dismiss the drawer. */
+    readonly showCloseButton?: boolean;
+    /** Panel treatment. `"flush"` (default) docks the panel against the edge —
+     *  full extent, no radius, and a border only on the edge facing the app
+     *  content. `"floating"` gives the detached-panel look (margin to the
+     *  viewport edge, full corner radius). Ignored in the narrow-viewport
+     *  fullscreen layout. */
+    readonly variant?: "floating" | "flush";
+    /** `variant="flush"` only: dock the panel below the app's ShellHeader
+     *  (offset top by `--shell-header-height`, height shrunk to match)
+     *  instead of covering it. Default `false` is edge-to-edge. No ShellHeader
+     *  mounted → the variable is `0`, so this is a no-op. Ignored in the
+     *  narrow-viewport fullscreen layout, which already takes over the whole
+     *  screen including the header. */
+    readonly belowHeader?: boolean;
+    /** Panel width for `side="left"|"right"` (ignored for top/bottom and in
+     *  the narrow-viewport layout). A number is pixels, a string any CSS
+     *  length. Superseded by `resize` when that's set. Default matches the
+     *  panel's built-in `max(600px, 37.5vw)`. */
+    readonly width?: number | string;
+    /** Opt-in drag-to-resize + maximize toggle (left/right sides only). */
+    readonly resize?: {
+        readonly defaultWidthPx?: number;
+        readonly minWidthPx?: number;
+        readonly maxWidthPx?: number;
+    };
+    /** Backdrop behind the panel. A drawer exists so the content behind it
+     *  stays readable, so the blur is off by default. Ignored when
+     *  `modal={false}` — there is no overlay to style then. */
+    readonly backdrop?: {
+        readonly blurPx?: number;
+        readonly dimPercent?: number;
+    };
+    /** `false` runs the drawer as a panel beside the page instead of over it:
+     *  no overlay, no focus trap, and the page behind stays interactive, so
+     *  text there can be selected and copied. Escape closes in both modes, a
+     *  click beside the panel only in the modal one — the non-modal case
+     *  exists to be used next to the page content, where a stray click must
+     *  not dismiss it. With `showCloseButton={false}` and no footer action
+     *  that leaves Escape as the only way out, so keep one of the two.
+     *  Default `true`. */
+    readonly modal?: boolean;
+    /** Extra classes for the panel, merged over the built-in ones. Not applied
+     *  in the narrow-viewport fullscreen layout. */
+    readonly panelClassName?: string;
+    /** The body becomes a plain flex column with no padding or scrolling of its
+     *  own, for children that bring their own scroll area and pinned footer. */
+    readonly fillBody?: boolean;
+};
+/** 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. */
+export declare function Drawer({ open, onOpenChange, side, title, description, footer, children, testId, showCloseButton, variant, belowHeader, width, resize, backdrop, modal, panelClassName, fillBody, }: DrawerProps): ReactNode;

package/dist/web/widgets/drawer.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useTranslation } from "../../index.js";
+import { clamp } from "../lib/clamp.js";
+import { cn } from "../lib/cn.js";
+import { useIsNarrowViewport } from "../primitives/use-narrow-viewport.js";
+import { Sheet, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../ui/sheet.js";
+import { DrawerSheetContent } from "./sheet-parts.js";
+import { arrowKeyDelta, usePointerDrag } from "./use-pointer-drag.js";
+// Mirrors primitives/index.tsx's cardFooter + cardFooterBorder (row layout,
+// end-justified actions, top border, panel surface instead of the card
+// footer's bg-muted/30) — those two consts aren't exported, so the
+// equivalent classes are inlined here rather than growing the vendored
+// SheetFooter's own default className with panel-specific styling.
+const DRAWER_FOOTER_CLASS = "flex-row flex-wrap items-center justify-end border-t bg-background px-[var(--card-padding)] py-4";
+const MIN_WIDTH_PX = 320;
+const MAX_WIDTH_PX = 1000;
+// Must match the static `max(600px,37.5vw)` in floatingSideClass — Tailwind's
+// JIT can't read these at runtime, so the two are kept in sync by hand.
+// 600px (vs. the old 520px floor) gives a two-column field row (e.g.
+// street/number, zip/city) room to breathe, while staying well under half
+// of a 1280px viewport so a narrow window isn't dominated by the drawer.
+// 37.5vw (vs. the old 25vw) keeps that same 600px on a 1280–1600px window
+// (25vw was still under the floor there, making the ratio dead weight up
+// to 2400px) but actually grows past the floor by ~1600px, so a 1920px
+// window — where the two-column row is cramped just as often — lands
+// around 720px instead of being stuck at 600px alongside a 1280px window.
+const DEFAULT_WIDTH_MIN_PX = 600;
+const DEFAULT_WIDTH_VIEWPORT_RATIO = 0.375;
+const DEFAULT_BLUR_PX = 0;
+const DEFAULT_DIM_PERCENT = 20;
+function defaultWidthFromViewport() {
+    return typeof window === "undefined"
+        ? DEFAULT_WIDTH_MIN_PX
+        : Math.max(DEFAULT_WIDTH_MIN_PX, Math.round(window.innerWidth * DEFAULT_WIDTH_VIEWPORT_RATIO));
+}
+function normalizeWidth(width) {
+    return typeof width === "number" ? `${width}px` : width;
+}
+// Must match the static `max(600px,37.5vw)` in sidePanelClass — Tailwind's
+// JIT can't read DEFAULT_WIDTH_MIN_PX/DEFAULT_WIDTH_VIEWPORT_RATIO at
+// runtime, so the two are kept in sync by hand.
+// Same cap as WIDTH_CLASS: an explicit `width` must not outgrow the viewport.
+const MAX_VIEWPORT_WIDTH = "85vw";
+const WIDTH_CLASS = "w-[max(600px,37.5vw)] max-w-[85vw] sm:max-w-[max(600px,37.5vw)]";
+// "floating": 32px margin + 32px radius so the panel reads as detached from
+// the viewport edge, unlike the sheet primitive's flush-edge default.
+// "flush" docks it back to that flush-edge default instead, borrowing the
+// vendored Sheet's per-side border (only the edge facing the app content).
+// Below the narrow-viewport breakpoint neither treatment fits — the JS hook
+// decides, not a `sm:` Tailwind prefix, since the resize width below already
+// comes from JS and two decision sources is the bug this avoids.
+function sidePanelClass(side, narrow, variant, belowHeader) {
+    if (narrow)
+        return "inset-0 h-full w-full max-w-none rounded-none border-0 overflow-hidden";
+    if (variant === "flush") {
+        switch (side) {
+            // h-full would pin height to 100vh despite the shifted top; h-auto lets inset-y-0 size it.
+            case "left":
+                return `inset-y-0 left-0 ${belowHeader ? "h-auto" : "h-full"} ${WIDTH_CLASS} border-r shadow-2xl overflow-hidden`;
+            case "top":
+                return `inset-x-0 ${belowHeader ? "top-(--shell-header-height)" : "top-0"} h-auto max-h-[80vh] border-b shadow-2xl overflow-hidden`;
+            case "bottom":
+                return "inset-x-0 bottom-0 h-auto max-h-[80vh] border-t shadow-2xl overflow-hidden";
+            default:
+                return `inset-y-0 right-0 ${belowHeader ? "h-auto" : "h-full"} ${WIDTH_CLASS} border-l shadow-2xl overflow-hidden`;
+        }
+    }
+    switch (side) {
+        case "left":
+            return `inset-y-8 left-8 h-auto ${WIDTH_CLASS} rounded-[2rem] border shadow-2xl overflow-hidden`;
+        case "top":
+            return "inset-x-8 top-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
+        case "bottom":
+            return "inset-x-8 bottom-8 h-auto max-h-[80vh] rounded-[2rem] border shadow-2xl overflow-hidden";
+        default:
+            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. */
+export function Drawer({ open, onOpenChange, side = "right", title, description, footer, children, testId, showCloseButton = true, variant = "flush", belowHeader = false, width, resize, backdrop, modal = true, panelClassName, fillBody = false, }) {
+    const t = useTranslation();
+    const narrow = useIsNarrowViewport();
+    const canResize = resize !== undefined && (side === "left" || side === "right");
+    const customWidthStyle = !canResize && !narrow && (side === "left" || side === "right") && width !== undefined
+        ? { width: normalizeWidth(width), maxWidth: MAX_VIEWPORT_WIDTH }
+        : undefined;
+    const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
+    const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
+    const effectiveMaxWidthPx = () => typeof window === "undefined"
+        ? maxWidthPx
+        : 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 = {
+        backgroundColor: `rgb(0 0 0 / ${dimPercent}%)`,
+        ...(blurPx > 0 ? { backdropFilter: `blur(${blurPx}px)` } : {}),
+    };
+    const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : resizedWidthPx;
+    // Inline style because tailwind-merge doesn't dedupe `top-*`/`bottom-*` against the base `inset-y-0`;
+    // style wins over class regardless of generated CSS order.
+    const verticalOffsetStyle = belowHeader && variant === "flush" && !narrow && (side === "left" || side === "right")
+        ? { top: "var(--shell-header-height)", bottom: 0 }
+        : undefined;
+    const widthStyle = canResize && !narrow ? { width: effectiveWidthPx, maxWidth: "none" } : customWidthStyle;
+    const sheetStyle = widthStyle === undefined && verticalOffsetStyle === undefined
+        ? undefined
+        : { ...widthStyle, ...verticalOffsetStyle };
+    const handleDrag = usePointerDrag({
+        onStart: () => {
+            setMaximized(false);
+            return { startWidth: effectiveWidthPx };
+        },
+        onMove: ({ startWidth }, { dx }) => {
+            const signedDelta = side === "right" ? -dx : dx;
+            setResizedWidthPx(clamp(startWidth + signedDelta, minWidthPx, effectiveMaxWidthPx()));
+        },
+    });
+    const onHandleKeyDown = (event) => {
+        const keyDelta = arrowKeyDelta(event);
+        if (keyDelta === undefined || keyDelta.dx === 0)
+            return;
+        event.preventDefault();
+        setMaximized(false);
+        const delta = side === "right" ? -keyDelta.dx : keyDelta.dx;
+        // Seed from the currently visible width, not the stale `resizedWidthPx`
+        // state — while maximized, it still holds the pre-maximize value, so a
+        // key press would otherwise jump the drawer back to that old size
+        // 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, { 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.
+            onInteractOutside: modal ? undefined : (event) => event.preventDefault(), showCloseButton: showCloseButton, closeLabel: t("kumiko.dialog.close"), className: cn(sidePanelClass(side, narrow, variant, belowHeader), fillBody && "gap-0", !narrow && panelClassName), style: sheetStyle, children: [canResize && !narrow && (_jsx("button", { type: "button", onClick: () => setMaximized((m) => !m), "aria-pressed": maximized, "aria-label": maximized ? t("kumiko.widget.drawer.restore") : t("kumiko.widget.drawer.maximize"), className: "absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: maximized ? (_jsx(Minimize2Icon, { className: "size-4" })) : (_jsx(Maximize2Icon, { className: "size-4" })) })), (title !== undefined || description !== undefined) && (_jsxs(SheetHeader, { children: [title !== undefined && _jsx(SheetTitle, { children: title }), description !== undefined && _jsx(SheetDescription, { children: description })] })), _jsx("div", { className: fillBody ? "flex min-h-0 flex-1 flex-col" : "flex-1 overflow-y-auto px-4", children: children }), footer !== undefined && (_jsx(SheetFooter, { className: DRAWER_FOOTER_CLASS, children: footer })), canResize && !narrow && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": t("kumiko.widget.drawer.resize"), "aria-valuenow": effectiveWidthPx, "aria-valuemin": minWidthPx, "aria-valuemax": effectiveMaxWidthPx(), tabIndex: 0, ...handleDrag, onKeyDown: onHandleKeyDown, className: cn("absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border", side === "right" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2") }))] }) }));
+}

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

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export type FeedRow = {
+    readonly id: string;
+    readonly primary: string;
+    readonly trailing?: string;
+};
+/** Nicht-tabellarische Kurzliste (z.B. "nächste Termine") — Primary-Text +
+ *  optionaler rechtsbündiger Trailing-Wert pro Zeile. */
+export declare function FeedList({ rows, emptyContent, testId, }: {
+    readonly rows: readonly FeedRow[];
+    readonly emptyContent?: ReactNode;
+    readonly testId?: string;
+}): ReactNode;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Nicht-tabellarische Kurzliste (z.B. "nächste Termine") — Primary-Text +
+ *  optionaler rechtsbündiger Trailing-Wert pro Zeile. */
+export function FeedList({ 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 overflow-y-auto pr-1 text-sm", children: rows.map((row) => (_jsxs("li", { className: "flex justify-between gap-4 border-b py-1.5 last:border-b-0", children: [_jsx("span", { children: row.primary }), row.trailing !== undefined && (_jsx("span", { className: "tabular-nums text-muted-foreground", children: row.trailing }))] }, row.id))) }));
+}

package/dist/web/widgets/floating-panel.d.ts

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+export type FloatingPanelGeometry = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+export type FloatingPanelProps = {
+    /** Header content; the header is the move handle. */
+    readonly title: ReactNode;
+    /** Header buttons (dock, minimize, close). Pointer-down on interactive
+     *  elements does not start a drag. */
+    readonly headerActions?: ReactNode;
+    readonly children: ReactNode;
+    /** localStorage key; without it the geometry isn't persisted. */
+    readonly storageKey?: string;
+    /** Default 400x560, bottom-right with a 24px margin. */
+    readonly defaultGeometry?: Partial<FloatingPanelGeometry>;
+    readonly minWidthPx?: number;
+    readonly minHeightPx?: number;
+    /** Default: viewport width minus twice the margin. */
+    readonly maxWidthPx?: number;
+    /** Default: viewport height minus twice the margin. */
+    readonly maxHeightPx?: number;
+    readonly testId?: string;
+};
+/** Non-modal panel floating above the page: draggable by its header,
+ *  resizable from all edges and corners, clamped to the viewport, geometry
+ *  optionally remembered. On narrow viewports it becomes a full-screen sheet. */
+export declare function FloatingPanel({ title, headerActions, children, storageKey, defaultGeometry, minWidthPx, minHeightPx, maxWidthPx, maxHeightPx, testId, }: FloatingPanelProps): ReactNode;