@cosmicdrift/kumiko-renderer 0.373.0 → 0.377.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,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { 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`;
+    }
+}
+/** 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 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, { 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;

package/dist/web/widgets/floating-panel.js

@@ -0,0 +1,242 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GripVerticalIcon } from "lucide-react";
+import { useCallback, useEffect, useId, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+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 { arrowKeyDelta, usePointerDrag } from "./use-pointer-drag.js";
+const MARGIN_PX = 24;
+const DEFAULT_WIDTH_PX = 400;
+const DEFAULT_HEIGHT_PX = 560;
+const DEFAULT_MIN_WIDTH_PX = 280;
+const DEFAULT_MIN_HEIGHT_PX = 200;
+const EDGES = ["top", "right", "bottom", "left"];
+const EDGE_HANDLE_BASE = "absolute z-10 touch-none hover:bg-border focus-visible:bg-ring";
+const CORNER_HANDLE_BASE = "absolute z-20 size-3 touch-none";
+const EDGE_HANDLE_CLASS = {
+    top: cn(EDGE_HANDLE_BASE, "inset-x-3 top-0 h-1.5 cursor-ns-resize"),
+    bottom: cn(EDGE_HANDLE_BASE, "inset-x-3 bottom-0 h-1.5 cursor-ns-resize"),
+    left: cn(EDGE_HANDLE_BASE, "inset-y-3 left-0 w-1.5 cursor-ew-resize"),
+    right: cn(EDGE_HANDLE_BASE, "inset-y-3 right-0 w-1.5 cursor-ew-resize"),
+};
+const CORNER_HANDLES = [
+    { edges: ["top", "left"], className: cn(CORNER_HANDLE_BASE, "top-0 left-0 cursor-nwse-resize") },
+    {
+        edges: ["top", "right"],
+        className: cn(CORNER_HANDLE_BASE, "top-0 right-0 cursor-nesw-resize"),
+    },
+    {
+        edges: ["bottom", "left"],
+        className: cn(CORNER_HANDLE_BASE, "bottom-0 left-0 cursor-nesw-resize"),
+    },
+    {
+        edges: ["bottom", "right"],
+        className: cn(CORNER_HANDLE_BASE, "right-0 bottom-0 cursor-nwse-resize"),
+    },
+];
+const EDGE_LABEL_KEYS = {
+    top: "kumiko.widget.floatingPanel.resizeTop",
+    right: "kumiko.widget.floatingPanel.resizeRight",
+    bottom: "kumiko.widget.floatingPanel.resizeBottom",
+    left: "kumiko.widget.floatingPanel.resizeLeft",
+};
+const DRAG_HANDLE_SELECTOR = "[data-drag-handle]";
+const INTERACTIVE_HEADER_TARGET = "button, a, input, select, textarea, [role=button]";
+function readLimits(options) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const maxWidth = Math.min(options.maxWidthPx ?? viewportWidth - 2 * MARGIN_PX, viewportWidth);
+    const maxHeight = Math.min(options.maxHeightPx ?? viewportHeight - 2 * MARGIN_PX, viewportHeight);
+    return {
+        // A viewport smaller than the configured minimum wins: the panel must stay fully visible.
+        minWidth: Math.min(options.minWidthPx ?? DEFAULT_MIN_WIDTH_PX, maxWidth),
+        minHeight: Math.min(options.minHeightPx ?? DEFAULT_MIN_HEIGHT_PX, maxHeight),
+        maxWidth,
+        maxHeight,
+        viewportWidth,
+        viewportHeight,
+    };
+}
+// Size first, then position, so a shrunk panel is placed against its final size.
+function fitGeometry(geometry, limits) {
+    const width = clamp(geometry.width, limits.minWidth, limits.maxWidth);
+    const height = clamp(geometry.height, limits.minHeight, limits.maxHeight);
+    return {
+        width,
+        height,
+        x: clamp(geometry.x, 0, Math.max(0, limits.viewportWidth - width)),
+        y: clamp(geometry.y, 0, Math.max(0, limits.viewportHeight - height)),
+    };
+}
+// The edge being dragged follows the pointer; the opposite edge stays put.
+function resizeAxis(start, delta, movesStartEdge, min, max, viewportSize) {
+    if (movesStartEdge) {
+        const end = start.position + start.size;
+        const size = clamp(start.size - delta, min, Math.min(max, end));
+        return { position: end - size, size };
+    }
+    const size = clamp(start.size + delta, min, Math.min(max, viewportSize - start.position));
+    return { position: start.position, size };
+}
+function resizeGeometry(start, edges, delta, limits) {
+    let { x, y, width, height } = start;
+    for (const edge of edges) {
+        if (edge === "left" || edge === "right") {
+            ({ position: x, size: width } = resizeAxis({ position: start.x, size: start.width }, delta.dx, edge === "left", limits.minWidth, limits.maxWidth, limits.viewportWidth));
+        }
+        else {
+            ({ position: y, size: height } = resizeAxis({ position: start.y, size: start.height }, delta.dy, edge === "top", limits.minHeight, limits.maxHeight, limits.viewportHeight));
+        }
+    }
+    return { x, y, width, height };
+}
+function isFiniteNumber(value) {
+    return typeof value === "number" && Number.isFinite(value);
+}
+function isFloatingPanelGeometry(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        "x" in value &&
+        isFiniteNumber(value.x) &&
+        "y" in value &&
+        isFiniteNumber(value.y) &&
+        "width" in value &&
+        isFiniteNumber(value.width) &&
+        "height" in value &&
+        isFiniteNumber(value.height));
+}
+function readStoredGeometry(storageKey) {
+    if (storageKey === undefined)
+        return undefined;
+    try {
+        const raw = window.localStorage.getItem(storageKey);
+        if (raw === null)
+            return undefined;
+        const parsed = JSON.parse(raw);
+        return isFloatingPanelGeometry(parsed) ? parsed : undefined;
+    }
+    catch {
+        // Unavailable or corrupt storage just means the default geometry is used.
+        return undefined;
+    }
+}
+function writeStoredGeometry(storageKey, geometry) {
+    if (storageKey === undefined)
+        return;
+    try {
+        window.localStorage.setItem(storageKey, JSON.stringify(geometry));
+    }
+    catch {
+        // Private mode or quota: the position is simply not remembered.
+    }
+}
+function initialGeometry(storageKey, defaults, limits) {
+    const stored = readStoredGeometry(storageKey);
+    if (stored !== undefined)
+        return fitGeometry(stored, limits);
+    const width = defaults?.width ?? DEFAULT_WIDTH_PX;
+    const height = defaults?.height ?? DEFAULT_HEIGHT_PX;
+    return fitGeometry({
+        width,
+        height,
+        x: defaults?.x ?? limits.viewportWidth - width - MARGIN_PX,
+        y: defaults?.y ?? limits.viewportHeight - height - MARGIN_PX,
+    }, limits);
+}
+/** 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 function FloatingPanel({ title, headerActions, children, storageKey, defaultGeometry, minWidthPx, minHeightPx, maxWidthPx, maxHeightPx, testId, }) {
+    const t = useTranslation();
+    const narrow = useIsNarrowViewport();
+    const titleId = useId();
+    const getLimits = () => readLimits({ minWidthPx, minHeightPx, maxWidthPx, maxHeightPx });
+    const getLimitsRef = useRef(getLimits);
+    getLimitsRef.current = getLimits;
+    const [geometry, setGeometry] = useState(() => initialGeometry(storageKey, defaultGeometry, getLimits()));
+    const geometryRef = useRef(geometry);
+    geometryRef.current = geometry;
+    const applyGeometry = useCallback((next) => {
+        geometryRef.current = next;
+        setGeometry(next);
+    }, []);
+    const persistGeometry = () => writeStoredGeometry(storageKey, geometryRef.current);
+    useEffect(() => {
+        if (narrow)
+            return;
+        const onWindowResize = () => {
+            applyGeometry(fitGeometry(geometryRef.current, getLimitsRef.current()));
+        };
+        // Resize events fired while narrow were ignored, so re-fit once on the way back to wide.
+        onWindowResize();
+        window.addEventListener("resize", onWindowResize);
+        return () => window.removeEventListener("resize", onWindowResize);
+    }, [narrow, applyGeometry]);
+    const moveDrag = usePointerDrag({
+        onStart: () => geometryRef.current,
+        onMove: (start, { dx, dy }) => applyGeometry(fitGeometry({ ...start, x: start.x + dx, y: start.y + dy }, getLimits())),
+        onEnd: persistGeometry,
+    });
+    const onHeaderPointerDown = (event) => {
+        // React events from portalled children (menus) bubble through the header although their DOM is elsewhere.
+        if (!(event.target instanceof Node) || !event.currentTarget.contains(event.target))
+            return;
+        if (event.target instanceof Element &&
+            event.target.closest(INTERACTIVE_HEADER_TARGET) &&
+            !event.target.closest(DRAG_HANDLE_SELECTOR)) {
+            return;
+        }
+        moveDrag.onPointerDown(event);
+    };
+    const onGripKeyDown = (event) => {
+        const delta = arrowKeyDelta(event);
+        if (delta === undefined)
+            return;
+        event.preventDefault();
+        const current = geometryRef.current;
+        applyGeometry(fitGeometry({ ...current, x: current.x + delta.dx, y: current.y + delta.dy }, getLimits()));
+        persistGeometry();
+    };
+    if (typeof document === "undefined")
+        return null;
+    if (narrow) {
+        return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "false", "aria-labelledby": titleId, "data-testid": testId, className: "fixed inset-0 z-50 flex flex-col bg-background text-foreground", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b px-3 py-2", children: [_jsx("div", { id: titleId, className: "min-w-0 flex-1 truncate font-medium", children: title }), headerActions] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: children })] }), document.body);
+    }
+    const limits = getLimits();
+    const handleContext = {
+        geometryRef,
+        getLimits,
+        applyGeometry,
+        persistGeometry,
+    };
+    return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "false", "aria-labelledby": titleId, "data-testid": testId, className: "fixed z-50 flex flex-col overflow-hidden rounded-lg border bg-background text-foreground shadow-2xl", style: {
+            left: geometry.x,
+            top: geometry.y,
+            width: geometry.width,
+            height: geometry.height,
+        }, children: [_jsxs("div", { ...moveDrag, onPointerDown: onHeaderPointerDown, className: "flex shrink-0 cursor-grab touch-none select-none items-center gap-2 border-b bg-muted px-3 py-2 active:cursor-grabbing", children: [_jsx("button", { type: "button", "data-drag-handle": "", "aria-label": t("kumiko.widget.floatingPanel.move"), onKeyDown: onGripKeyDown, className: "rounded-xs p-1 text-muted-foreground hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx("div", { id: titleId, className: "min-w-0 flex-1 truncate font-medium", children: title }), headerActions] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: children }), EDGES.map((edge) => (_jsx(PanelResizeHandle, { edges: [edge], className: EDGE_HANDLE_CLASS[edge], context: handleContext, separator: { label: t(EDGE_LABEL_KEYS[edge]), geometry, limits } }, edge))), CORNER_HANDLES.map((corner) => (_jsx(PanelResizeHandle, { edges: corner.edges, className: corner.className, context: handleContext }, corner.edges.join("-"))))] }), document.body);
+}
+function PanelResizeHandle({ edges, className, context, separator, }) {
+    const drag = usePointerDrag({
+        onStart: () => context.geometryRef.current,
+        onMove: (start, delta) => context.applyGeometry(resizeGeometry(start, edges, delta, context.getLimits())),
+        onEnd: context.persistGeometry,
+    });
+    if (separator === undefined) {
+        return _jsx("div", { "aria-hidden": "true", ...drag, className: className });
+    }
+    const [edge] = edges;
+    const horizontalEdge = edge === "left" || edge === "right";
+    const { geometry, limits } = separator;
+    const onKeyDown = (event) => {
+        const delta = arrowKeyDelta(event);
+        if (delta === undefined || (horizontalEdge ? delta.dx === 0 : delta.dy === 0))
+            return;
+        event.preventDefault();
+        context.applyGeometry(resizeGeometry(context.geometryRef.current, edges, delta, context.getLimits()));
+        context.persistGeometry();
+    };
+    return (_jsx("div", { role: "separator", "aria-orientation": horizontalEdge ? "vertical" : "horizontal", "aria-label": separator.label, "aria-valuenow": horizontalEdge ? geometry.width : geometry.height, "aria-valuemin": horizontalEdge ? limits.minWidth : limits.minHeight, "aria-valuemax": horizontalEdge ? limits.maxWidth : limits.maxHeight, tabIndex: 0, ...drag, onKeyDown: onKeyDown, className: className }));
+}