@cosmicdrift/kumiko-renderer 0.374.0 → 0.378.0

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 }));
+}

package/dist/web/widgets/form-fields.d.ts

@@ -0,0 +1,93 @@
+import type { ReactNode } from "react";
+export interface NumberFieldProps {
+    readonly label: string;
+    readonly id: string;
+    readonly name: string;
+    readonly value: number | undefined;
+    readonly onChange: (v: number | undefined) => void;
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly hideLabel?: boolean;
+    readonly testId?: string;
+    /** `false` renders without thousands separators (e.g. a year). Default `true`. */
+    readonly grouping?: boolean;
+}
+/** Zahlenfeld = Field + Input(kind:"number") in einem — nimmt der Screen die
+ *  wiederholte id/name/value/onChange-Verdrahtung ab. `value` darf `undefined`
+ *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt.
+ *  Einheiten (€/%) gehören ins Label (`t("…Summe (€)")`), nicht als Badge. */
+export declare function NumberField({ label, id, name, value, onChange, required, disabled, hideLabel, testId, grouping, }: NumberFieldProps): ReactNode;
+export declare const MoneyField: typeof NumberField;
+export declare const PercentField: typeof NumberField;
+interface FieldBase {
+    readonly label: string;
+    readonly id: string;
+    readonly name: string;
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly hideLabel?: boolean;
+    readonly testId?: string;
+}
+export interface TextFieldProps extends FieldBase {
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+    readonly placeholder?: string;
+    readonly autoComplete?: string;
+}
+/** Textfeld = Field + Input(kind:"text"). */
+export declare function TextField({ label, id, name, value, onChange, required, disabled, placeholder, autoComplete, hideLabel, testId, }: TextFieldProps): ReactNode;
+export interface SelectFieldProps extends FieldBase {
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+    readonly options: readonly string[] | readonly {
+        readonly value: string;
+        readonly label: string;
+    }[];
+}
+/** Auswahlfeld = Field + Input(kind:"select"). */
+export declare function SelectField({ label, id, name, value, onChange, options, required, disabled, hideLabel, testId, }: SelectFieldProps): ReactNode;
+export interface DateFieldProps extends FieldBase {
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+    readonly min?: string;
+    readonly max?: string;
+}
+/** Datumsfeld = Field + Input(kind:"date"), ISO yyyy-mm-dd. */
+export declare function DateField({ label, id, name, value, onChange, min, max, required, disabled, hideLabel, testId, }: DateFieldProps): ReactNode;
+export interface BooleanFieldProps extends FieldBase {
+    readonly value: boolean;
+    readonly onChange: (v: boolean) => void;
+}
+/** Checkbox/Switch = Field(layout:"inline") + Input(kind:"boolean"). */
+export declare function BooleanField({ label, id, name, value, onChange, required, disabled, hideLabel, testId, }: BooleanFieldProps): ReactNode;
+export interface TextareaFieldProps extends FieldBase {
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+    readonly rows?: number;
+}
+/** Mehrzeiliges Textfeld = Field + Input(kind:"textarea"). */
+export declare function TextareaField({ label, id, name, value, onChange, rows, required, disabled, hideLabel, testId, }: TextareaFieldProps): ReactNode;
+export interface RangeFieldProps extends FieldBase {
+    readonly value: number;
+    readonly onChange: (v: number) => void;
+    readonly min: number;
+    readonly max: number;
+    readonly step?: number;
+}
+/** Schieberegler = Field + Input(kind:"range"). */
+export declare function RangeField({ label, id, name, value, onChange, min, max, step, required, disabled, hideLabel, testId, }: RangeFieldProps): ReactNode;
+export interface FileFieldProps extends FieldBase {
+    /** FileRef-UUID der gespeicherten Datei, oder null. */
+    readonly value: string | null;
+    readonly onChange: (fileId: string | null) => void;
+    readonly accept?: readonly string[];
+    /** "image" zeigt eine Vorschau, "file" nur den Dateinamen. Default "file". */
+    readonly variant?: "file" | "image";
+    /** Bindet den Upload an ein konkretes Entity-Feld — der `/api/files`-Endpoint
+     *  prüft `accept`/`maxSize` dann serverseitig gegen dessen Feld-Definition. */
+    readonly entityType?: string;
+    readonly fieldName?: string;
+}
+/** Datei-Upload = Field + Input(kind:"file"|"image") — FileRef-basiert. */
+export declare function FileField({ label, id, name, value, onChange, accept, variant, entityType, fieldName, required, disabled, hideLabel, testId, }: FileFieldProps): ReactNode;
+export {};

package/dist/web/widgets/form-fields.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePrimitives } from "../../index.js";
+/** Zahlenfeld = Field + Input(kind:"number") in einem — nimmt der Screen die
+ *  wiederholte id/name/value/onChange-Verdrahtung ab. `value` darf `undefined`
+ *  sein (leeres Feld), intern auf den `""`-Empty-State des Inputs gemappt.
+ *  Einheiten (€/%) gehören ins Label (`t("…Summe (€)")`), nicht als Badge. */
+export function NumberField({ label, id, name, value, onChange, required, disabled, hideLabel, testId, grouping, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "number", id: id, name: name, value: value ?? "", onChange: onChange, required: required, disabled: disabled, ...(grouping !== undefined && { grouping }) }) }));
+}
+// Aliase markieren die Feld-Absicht am Call-Site (lesbarer als NumberField
+// überall) ohne eigene Wrapper-Funktion vorzutäuschen — beide sind identisch
+// zu NumberField, kein Ort für künftige geld-/prozent-spezifische Formatierung.
+export const MoneyField = NumberField;
+export const PercentField = NumberField;
+/** Textfeld = Field + Input(kind:"text"). */
+export function TextField({ label, id, name, value, onChange, required, disabled, placeholder, autoComplete, hideLabel, testId, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "text", id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled, ...(placeholder !== undefined && { placeholder }), ...(autoComplete !== undefined && { autoComplete }) }) }));
+}
+/** Auswahlfeld = Field + Input(kind:"select"). */
+export function SelectField({ label, id, name, value, onChange, options, required, disabled, hideLabel, testId, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "select", id: id, name: name, value: value, onChange: onChange, options: options, required: required, disabled: disabled }) }));
+}
+/** Datumsfeld = Field + Input(kind:"date"), ISO yyyy-mm-dd. */
+export function DateField({ label, id, name, value, onChange, min, max, required, disabled, hideLabel, testId, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "date", id: id, name: name, value: value, onChange: (v) => onChange(v ?? ""), required: required, disabled: disabled, ...(min !== undefined && { min }), ...(max !== undefined && { max }) }) }));
+}
+/** Checkbox/Switch = Field(layout:"inline") + Input(kind:"boolean"). */
+export function BooleanField({ label, id, name, value, onChange, required, disabled, hideLabel, testId, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, layout: "inline", hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "boolean", id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled }) }));
+}
+/** Mehrzeiliges Textfeld = Field + Input(kind:"textarea"). */
+export function TextareaField({ label, id, name, value, onChange, rows, required, disabled, hideLabel, testId, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "textarea", id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled, ...(rows !== undefined && { rows }) }) }));
+}
+/** Schieberegler = Field + Input(kind:"range"). */
+export function RangeField({ label, id, name, value, onChange, min, max, step, required, disabled, hideLabel, testId, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: "range", id: id, name: name, value: value, onChange: onChange, min: min, max: max, required: required, disabled: disabled, ...(step !== undefined && { step }) }) }));
+}
+/** Datei-Upload = Field + Input(kind:"file"|"image") — FileRef-basiert. */
+export function FileField({ label, id, name, value, onChange, accept, variant = "file", entityType, fieldName, required, disabled, hideLabel, testId, }) {
+    const { Field, Input } = usePrimitives();
+    return (_jsx(Field, { id: id, label: label, required: required, hideLabel: hideLabel, testId: testId, children: _jsx(Input, { kind: variant, id: id, name: name, value: value, onChange: onChange, required: required, disabled: disabled, ...(accept !== undefined && { accept }), ...(entityType !== undefined && { entityType }), ...(fieldName !== undefined && { fieldName }) }) }));
+}

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

@@ -0,0 +1,28 @@
+export { AiTextArea, type AiTextAreaProps, AiTextField, type AiTextFieldProps, } from "./ai-text-field.tsx";
+export type { StackedAreaDateFormat, StackedAreaInitialWindow, StackedAreaRangeOption, StackedAreaRanges, StackedAreaWindowSelection, } from "./chart-window.ts";
+export { type ChartMarker, type ChartSeries, type ChartTone, SegmentBarChart, type SegmentBarRow, StackedAreaChart, StackedBarChart, StatusBarChart, type StatusBarEntry, smoothPath, TimeseriesChart, type TimeseriesHeight, type TimeseriesPoint, type TimeseriesReferenceLine, type TimeseriesXAxis, type TimeseriesYAxis, } from "./charts.tsx";
+export { CollapsibleSection } from "./collapsible-section.tsx";
+export { type DashboardListColumn, DashboardListTable } from "./dashboard-list.tsx";
+export { DetailList } from "./detail-list.tsx";
+export { Drawer, type DrawerProps } from "./drawer.tsx";
+export { FeedList, type FeedRow } from "./feed-list.tsx";
+export { FloatingPanel, type FloatingPanelGeometry, type FloatingPanelProps, } from "./floating-panel.tsx";
+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";
+export { ProgressList, type ProgressListRow } from "./progress-list.tsx";
+export { PublicShell, type PublicShellProps, type PublicShellVariant } from "./public-shell.tsx";
+export { QueryTable, type QueryTableColumn, type QueryTableProps } from "./query-table.tsx";
+export { type ComparisonMetric, ComparisonTable, type ResultColumn, ResultPanel, ResultTable, } from "./result-panel.tsx";
+export { SectionCard } from "./section-card.tsx";
+export { SideBySideTable, type SideBySideTableCell, type SideBySideTableColumn, type SideBySideTableRow, } from "./side-by-side-table.tsx";
+export { MiniStat, Sparkline, StatCard, type StatDelta, StatStripCell, type StatTone, } from "./stat.tsx";
+export { EmptyState, ErrorState, LoadingState } from "./states.tsx";
+export { STATUS_TONE_TEXT, StatusBadge, type StatusBadgeTone, type StatusTone, } from "./status-badge.tsx";
+export { StepBar } from "./step-bar.tsx";
+export { UploadZone, type UploadZoneProps } from "./upload-zone.tsx";
+export { useDraft } from "./use-draft.ts";

package/dist/web/widgets/index.js

@@ -0,0 +1,31 @@
+// Mid-Level-Widgets — Kompositionen über den Primitives (Card, DataTable,
+// Banner) + Theme-Tokens. Für Custom-Screens: erst hier schauen, dann bauen.
+// Katalog: docs.kumiko.rocks → Guides → Widgets; visueller Überblick im
+// styleguide-Sample.
+export { AiTextArea, AiTextField, } from "./ai-text-field.js";
+export { SegmentBarChart, StackedAreaChart, StackedBarChart, StatusBarChart, smoothPath, TimeseriesChart, } from "./charts.js";
+export { CollapsibleSection } from "./collapsible-section.js";
+export { DashboardListTable } from "./dashboard-list.js";
+export { DetailList } from "./detail-list.js";
+export { Drawer } from "./drawer.js";
+export { FeedList } from "./feed-list.js";
+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";
+export { ProgressList } from "./progress-list.js";
+export { PublicShell } from "./public-shell.js";
+export { QueryTable } from "./query-table.js";
+export { ComparisonTable, ResultPanel, ResultTable, } from "./result-panel.js";
+export { SectionCard } from "./section-card.js";
+export { SideBySideTable, } from "./side-by-side-table.js";
+export { MiniStat, Sparkline, StatCard, StatStripCell, } from "./stat.js";
+export { EmptyState, ErrorState, LoadingState } from "./states.js";
+export { STATUS_TONE_TEXT, StatusBadge, } from "./status-badge.js";
+export { StepBar } from "./step-bar.js";
+export { UploadZone } from "./upload-zone.js";
+export { useDraft } from "./use-draft.js";

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

@@ -0,0 +1,46 @@
+import { type ReactNode } from "react";
+/** Position of the selected row among the rows loaded so far. `total`
+ *  counts loaded rows only; `hasMore` says whether further pages exist. */
+export type InfinityListSelection = {
+    readonly index: number;
+    readonly total: number;
+    readonly prevId: string | null;
+    readonly nextId: string | null;
+    readonly hasMore: boolean;
+};
+export type InfinityListProps<TData = unknown, TRow = Readonly<Record<string, unknown>>> = {
+    /** Dispatcher-Query-Type (`<feature>:query:<entity>:<verb>`). */
+    readonly query: string;
+    readonly payload?: Readonly<Record<string, unknown>>;
+    /** Rows per page — sent as `limit` in the query payload. Default 50. */
+    readonly pageSize?: number;
+    readonly rows: (data: TData) => readonly TRow[];
+    /** Pull the next-page cursor from the result; `null` means last page. */
+    readonly nextCursor: (data: TData) => string | null;
+    /** Must derive from row content (e.g. `row.id`), not from `index` — a
+     *  live refresh reorders rows (new/changed rows move to the front). */
+    readonly rowId: (row: TRow, index: number) => string;
+    readonly renderRow: (row: TRow) => ReactNode;
+    readonly emptyState?: ReactNode;
+    readonly className?: string;
+    readonly testId?: string;
+    /** Subscribe to SSE events for the entity parsed from `query`
+     *  (`<feature>:query:<entity>:<verb>`) and refetch the first page on
+     *  any create/update/delete/restore event, merging it into the
+     *  already-accumulated rows instead of collapsing them — see
+     *  `useQuery`'s `live` option for the same convention. Default false. */
+    readonly live?: boolean;
+    /** Row id (as returned by `rowId`) whose position `onSelectionChange`
+     *  reports. The list itself does not highlight it — `renderRow` does. */
+    readonly selectedId?: string | null;
+    /** Fires when the selected row's position or neighbours change, e.g. for
+     *  a "message 4 of 6" header with previous/next buttons. Not called while
+     *  nothing is selected or the selected row is not loaded. */
+    readonly onSelectionChange?: (selection: InfinityListSelection) => void;
+};
+/** Cursor-paginated scroll list (mail inbox, activity feeds) — loads the
+ *  next page when the end sentinel becomes visible (IntersectionObserver),
+ *  instead of a pager bar like QueryTable/entityList. The query handler
+ *  receives `{ ...payload, limit, cursor? }` and returns rows plus the next
+ *  cursor (same cursor convention as the audit-log screen). */
+export declare function InfinityList<TData = unknown, TRow = Readonly<Record<string, unknown>>>({ query, payload, pageSize, rows, nextCursor, rowId, renderRow, emptyState, className, testId, live, selectedId, onSelectionChange, }: InfinityListProps<TData, TRow>): ReactNode;