@cosmicdrift/kumiko-renderer 0.374.0 → 0.378.0

package/dist/web/primitives/tabs.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Delegates keyboard nav + ARIA (role=tablist/tab) to Radix instead of hand-rolling it.
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Tabs, TabsList, TabsTrigger } from "../ui/tabs.js";
+// The underline is a real border-b-2 (board) instead of the vendored ::after bar, so the
+// vendored active/dark border resets are overridden with identical variant chains.
+const TAB_TRIGGER_CLASS = "h-full shrink-0 flex-none whitespace-nowrap rounded-none border-0 border-b-2 border-transparent focus-visible:border-transparent bg-transparent px-0 py-0 text-sm font-medium text-foreground-secondary after:hidden hover:text-foreground data-[state=active]:border-primary data-[state=active]:focus-visible:border-primary data-[state=active]:bg-transparent data-[state=active]:font-semibold data-[state=active]:text-foreground dark:text-foreground-secondary dark:data-[state=active]:border-primary dark:data-[state=active]:bg-transparent dark:data-[state=active]:text-foreground dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-primary";
+// A single fade-width both edges share — mask-image needs the same offset
+// on each side or the gradient reads as lopsided.
+const EDGE_FADE_PX = 24;
+function edgeFadeMaskImage(start, end) {
+    if (start && end) {
+        return `linear-gradient(to right, transparent, black ${EDGE_FADE_PX}px, black calc(100% - ${EDGE_FADE_PX}px), transparent)`;
+    }
+    if (start)
+        return `linear-gradient(to right, transparent, black ${EDGE_FADE_PX}px)`;
+    if (end)
+        return `linear-gradient(to left, transparent, black ${EDGE_FADE_PX}px)`;
+    return undefined;
+}
+export function DefaultTabs({ items, activeId, onSelect, testId }) {
+    const scrollerRef = useRef(null);
+    // Two primitive booleans instead of one object: setState with a fresh
+    // object on every measurement would always change reference and force
+    // another render — with the unconditional-per-render effect below that
+    // would loop forever. Primitive setState lets React bail out once the
+    // value stops changing.
+    const [scrollStart, setScrollStart] = useState(false);
+    const [scrollEnd, setScrollEnd] = useState(false);
+    const updateScrollEdges = useCallback(() => {
+        const el = scrollerRef.current;
+        if (el === null) {
+            setScrollStart(false);
+            setScrollEnd(false);
+            return;
+        }
+        const maxScrollLeft = el.scrollWidth - el.clientWidth;
+        // 1px slack absorbs sub-pixel layout rounding that would otherwise leave
+        // a fade permanently on for a strip that doesn't visually overflow.
+        setScrollStart(el.scrollLeft > 1);
+        setScrollEnd(el.scrollLeft < maxScrollLeft - 1);
+    }, []);
+    // Gated on [activeId] instead of running unconditionally: an unconditional
+    // effect also re-ran this on every render, including the render triggered
+    // by the scroll listener's own setScrollStart/End below — so scrolling the
+    // strip by hand immediately snapped it back to the active tab, making it
+    // impossible to reach any other tab by scrolling (fw#follow-up). Only a
+    // mount or an actual activeId change should force the active tab back
+    // into view.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: activeId is the intended re-run trigger even though the DOM query below doesn't reference it directly; updateScrollEdges is a stable useCallback([]) ref and doesn't need to be listed.
+    useLayoutEffect(() => {
+        const el = scrollerRef.current;
+        if (el === null)
+            return;
+        // Radix marks the active trigger via aria-selected — reading it back
+        // through the DOM avoids threading a ref through the vendored
+        // TabsTrigger wrapper for every item.
+        const trigger = el.querySelector('[role="tab"][aria-selected="true"]');
+        if (trigger !== null) {
+            const triggerStart = trigger.offsetLeft;
+            const triggerEnd = triggerStart + trigger.offsetWidth;
+            // scrollIntoView would also scroll the page vertically to reveal the
+            // trigger — setting scrollLeft directly touches only this strip.
+            if (triggerStart < el.scrollLeft) {
+                el.scrollLeft = triggerStart;
+            }
+            else if (triggerEnd > el.scrollLeft + el.clientWidth) {
+                el.scrollLeft = triggerEnd - el.clientWidth;
+            }
+        }
+        updateScrollEdges();
+    }, [activeId]);
+    // Edge-fade measurement stays independent of activeId: a changing item
+    // count can change scrollWidth without activeId changing (e.g. a count
+    // badge finishing a load), and this must not fight the scroll-to-active
+    // effect above by re-running on every scroll-driven render.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: items.length is the intended re-run trigger even though the effect body doesn't reference it directly.
+    useLayoutEffect(() => {
+        updateScrollEdges();
+    }, [items.length, updateScrollEdges]);
+    useLayoutEffect(() => {
+        const el = scrollerRef.current;
+        if (el === null)
+            return;
+        el.addEventListener("scroll", updateScrollEdges, { passive: true });
+        if (typeof ResizeObserver === "undefined") {
+            return () => el.removeEventListener("scroll", updateScrollEdges);
+        }
+        // Observes both the scroller and the list: a growing TabsList (e.g. a
+        // count badge finishing a load) can change scrollWidth without the
+        // scroller's own box ever resizing.
+        const observer = new ResizeObserver(updateScrollEdges);
+        observer.observe(el);
+        const list = el.firstElementChild;
+        if (list !== null)
+            observer.observe(list);
+        return () => {
+            el.removeEventListener("scroll", updateScrollEdges);
+            observer.disconnect();
+        };
+    }, [updateScrollEdges]);
+    const maskImage = edgeFadeMaskImage(scrollStart, scrollEnd);
+    return (_jsx(Tabs, { value: activeId, onValueChange: onSelect, "data-testid": testId, className: "min-w-0", children: _jsx("div", { ref: scrollerRef, "data-scroll-start": scrollStart ? "" : undefined, "data-scroll-end": scrollEnd ? "" : undefined, className: "relative min-w-0 overflow-x-auto border-b border-border px-6 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: maskImage !== undefined ? { maskImage, WebkitMaskImage: maskImage } : undefined, children: _jsx(TabsList, { variant: "line", className: "h-11 gap-6 p-0", children: items.map((item) => (_jsxs(TabsTrigger, { value: item.id, className: TAB_TRIGGER_CLASS, "aria-controls": undefined, "data-testid": testId !== undefined ? `${testId}-${item.id}` : undefined, children: [item.label, item.count !== undefined && (_jsx("span", { className: cn("ml-1.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-[5px] text-xs font-medium", item.id === activeId
+                                ? "bg-primary/10 text-foreground"
+                                : "bg-status-neutral-surface text-foreground-secondary"), "data-testid": testId !== undefined ? `${testId}-${item.id}-count` : undefined, children: item.count }))] }, item.id))) }) }) }));
+}

package/dist/web/primitives/timestamp-input.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+/** Form-State → datetime-local-Format (`yyyy-MM-ddTHH:mm`).
+ *  UTC-Instants (mit `Z`/Offset) werden in lokale Wall-Clock
+ *  umgerechnet; offset-lose Werte nur auf Minuten gekürzt. */
+export declare function timestampToInputValue(value: string): string;
+/** datetime-local-Wert → Wire-Format. wallClock=true reicht die
+ *  Wall-Clock unverändert durch; sonst wird die lokale Zeit als
+ *  UTC-Instant mit `Z`-Suffix emittiert. */
+export declare function inputValueToTimestamp(raw: string, wallClock: boolean): string | undefined;
+export type TimestampInputProps = {
+    readonly id: string;
+    readonly name: string;
+    readonly value: string;
+    readonly onChange: (v: string | undefined) => void;
+    readonly wallClock?: boolean;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+    readonly ariaLabel?: string;
+    readonly locale?: string;
+    /** Untere/obere Grenze als ISO-Datetime. Begrenzt den Kalender auf
+     *  Tages-Granularität; die exakte Uhrzeit-Grenze setzt die Zod-Validierung
+     *  durch. */
+    readonly min?: string;
+    readonly max?: string;
+};
+export declare function TimestampInput({ id, name, value, onChange, wallClock, disabled, required, hasError, ariaLabel, locale, min, max, }: TimestampInputProps): ReactNode;

package/dist/web/primitives/timestamp-input.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// TimestampInput (kind:"timestamp") — gemeinsame Datums-Eingabe (DateField,
+// Tippen + Jahres-Kalender) plus ein Uhrzeit-Input. Bis #369 war dies ein
+// natives <input type="datetime-local"> — tippbar, aber mit nicht-stylebarem
+// Browser-Picker ohne Jahres-Navigation und divergent zu DateInput.
+//
+// Die Wire-Konvertierung bleibt unverändert: der Server validiert timestamp
+// als ISO-UTC mit `Z` (z.iso.datetime()) bzw. als Wall-Clock ohne Offset bei
+// locatedTimestamps (z.iso.datetime({ local: true })). Intern rechnen wir
+// über die datetime-local-Form `yyyy-MM-ddTHH:mm`; timestampToInputValue /
+// inputValueToTimestamp kapseln die UTC↔Wall-Clock-Umrechnung (Bug-Bash-2,
+// 2026-06-08) und sind separat getestet.
+import { useState } from "react";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { DateField } from "./date-field.js";
+const LOCAL_MINUTES = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
+const HAS_OFFSET = /(?:Z|[+-]\d{2}:\d{2})$/;
+function pad(n) {
+    return String(n).padStart(2, "0");
+}
+/** Form-State → datetime-local-Format (`yyyy-MM-ddTHH:mm`).
+ *  UTC-Instants (mit `Z`/Offset) werden in lokale Wall-Clock
+ *  umgerechnet; offset-lose Werte nur auf Minuten gekürzt. */
+export function timestampToInputValue(value) {
+    if (value === "")
+        return "";
+    if (HAS_OFFSET.test(value)) {
+        const d = new Date(value);
+        if (Number.isNaN(d.getTime()))
+            return "";
+        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+    }
+    const m = LOCAL_MINUTES.exec(value);
+    return m !== null ? m[0] : "";
+}
+/** datetime-local-Wert → Wire-Format. wallClock=true reicht die
+ *  Wall-Clock unverändert durch; sonst wird die lokale Zeit als
+ *  UTC-Instant mit `Z`-Suffix emittiert. */
+export function inputValueToTimestamp(raw, wallClock) {
+    if (raw === "")
+        return undefined;
+    if (wallClock)
+        return raw;
+    // Offset-loser Datetime-String wird von Date als LOKALE Zeit geparst
+    // (ES2020+) — genau die Semantik die datetime-local liefert.
+    const d = new Date(raw);
+    if (Number.isNaN(d.getTime()))
+        return undefined;
+    // Seconds are mandatory: write schemas validate offset-bearing timestamps
+    // with z.iso.datetime(), which requires `HH:mm:ssZ`.
+    return `${d.getUTCFullYear()}-${pad(d.getUTCMonth() + 1)}-${pad(d.getUTCDate())}T${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}:${pad(d.getUTCSeconds())}Z`;
+}
+const timeInputClass = "h-9 w-[7.5rem] shrink-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm " +
+    "shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 " +
+    "focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+function toDatePart(iso) {
+    if (iso === undefined || iso === "")
+        return undefined;
+    const v = timestampToInputValue(iso).slice(0, 10);
+    return v !== "" ? v : undefined;
+}
+export function TimestampInput({ id, name, value, onChange, wallClock, disabled, required, hasError, ariaLabel, locale, min, max, }) {
+    const t = useTranslation();
+    const local = timestampToInputValue(value);
+    const isoDate = local !== "" ? local.slice(0, 10) : "";
+    // Uhrzeit ohne gesetztes Datum würde im Wire-Wert verschwinden — lokal
+    // halten, bis ein Datum gewählt ist. Sobald `value` ein Datum trägt, ist
+    // dessen Uhrzeit maßgeblich.
+    const [timeText, setTimeText] = useState("");
+    const effectiveTime = local !== "" ? local.slice(11, 16) : timeText;
+    function emit(nextIsoDate, nextTime) {
+        if (nextIsoDate === "") {
+            onChange(undefined);
+            return;
+        }
+        const localStr = `${nextIsoDate}T${nextTime === "" ? "00:00" : nextTime}`;
+        onChange(inputValueToTimestamp(localStr, wallClock === true));
+    }
+    const minPart = toDatePart(min);
+    const maxPart = toDatePart(max);
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(DateField, { id: id, name: name, value: isoDate, onChange: (d) => emit(d ?? "", effectiveTime), ...(locale !== undefined && { locale }), ...(minPart !== undefined && { min: minPart }), ...(maxPart !== undefined && { max: maxPart }), ...(disabled !== undefined && { disabled }), ...(required !== undefined && { required }), ...(hasError !== undefined && { hasError }), ...(ariaLabel !== undefined && { ariaLabel }) }), _jsx("input", { type: "time", "aria-label": t("kumiko.field.time"), disabled: disabled, "aria-invalid": hasError === true ? true : undefined, value: effectiveTime, onChange: (e) => {
+                    setTimeText(e.target.value);
+                    if (isoDate !== "")
+                        emit(isoDate, e.target.value);
+                }, className: cn(timeInputClass, hasError === true && "border-destructive focus-visible:ring-destructive") })] }));
+}

package/dist/web/primitives/toast.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import type { StatusTone } from "../widgets/status-badge.tsx";
+export type ToastVariant = StatusTone;
+export type ToastOptions = {
+    readonly title: string;
+    readonly description?: string;
+    readonly variant?: ToastVariant;
+    readonly docsUrl?: string;
+    readonly docsLinkLabel?: string;
+};
+type ToastApi = {
+    readonly toast: (opts: ToastOptions) => void;
+};
+export declare function useToast(): ToastApi;
+export type ToastProviderProps = {
+    readonly children: ReactNode;
+};
+export declare function ToastProvider({ children }: ToastProviderProps): ReactNode;
+export {};

package/dist/web/primitives/toast.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Toast-Primitive auf @radix-ui/react-toast. Ein globaler Provider
+// + ein useToast()-Hook der von überall in der App aus Toasts auslösen
+// kann. Kein Context-Boilerplate für Konsumenten — der Hook returned
+// einen `toast()`-Trigger, mehr Public-API gibt's nicht.
+//
+// Variant = StatusTone (dieselbe Farb-Familie wie StatusBadge), Default
+// "muted" (neutral). Auto-dismiss nach 5s, manuell schließbar via X-Button.
+// Der ARIA-Live-Region-Setup kommt komplett aus Radix.
+import * as Primitive from "@radix-ui/react-toast";
+import { X } from "lucide-react";
+import { createContext, useCallback, useContext, useId, useMemo, useRef, useState, } from "react";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+const ToastContext = createContext(null);
+export function useToast() {
+    const ctx = useContext(ToastContext);
+    if (ctx === null) {
+        // Nicht throwen — Tests die einen Component ohne Provider rendern
+        // sollen nicht crashen. No-op statt fehlerhaftes Mount.
+        return { toast: () => undefined };
+    }
+    return ctx;
+}
+export function ToastProvider({ children }) {
+    const [entries, setEntries] = useState([]);
+    // Monoton wachsender Counter via useRef — useState hätte einen
+    // closure-Bug: zwei toast()-Calls im selben Tick lesen denselben
+    // alten Wert aus dem Closure und kollidieren bei der ID. Ref ist
+    // synchron-mutabel, jeder Aufruf bekommt eine garantiert neue ID.
+    const idPrefix = useId();
+    const counterRef = useRef(0);
+    const toast = useCallback((opts) => {
+        counterRef.current += 1;
+        const id = `${idPrefix}-${counterRef.current}`;
+        setEntries((current) => [...current, { ...opts, id }]);
+    }, [idPrefix]);
+    const api = useMemo(() => ({ toast }), [toast]);
+    return (_jsx(ToastContext.Provider, { value: api, children: _jsxs(Primitive.Provider, { swipeDirection: "right", duration: 5000, children: [children, entries.map((entry) => (_jsx(ToastItem, { entry: entry, onClose: () => setEntries((current) => current.filter((e) => e.id !== entry.id)) }, entry.id))), _jsx(Primitive.Viewport, { className: cn("fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4", "sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]") })] }) }));
+}
+const rootClass = "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 " +
+    "overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all " +
+    "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] " +
+    "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none " +
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out " +
+    "data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full " +
+    "data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full";
+const TONE_CLASS = {
+    ok: "border-status-ok/30 bg-status-ok/10 text-status-ok",
+    warn: "border-status-warn/30 bg-status-warn/10 text-status-warn",
+    bad: "border-status-bad/30 bg-status-bad/10 text-status-bad",
+    critical: "border-status-critical/40 bg-status-critical/15 text-status-critical",
+    muted: "border bg-background text-foreground",
+};
+function ToastItem({ entry, onClose, }) {
+    const t = useTranslation();
+    const learnMore = entry.docsLinkLabel ?? t("kumiko.toast.learn-more");
+    const variantClass = TONE_CLASS[entry.variant ?? "muted"];
+    return (_jsxs(Primitive.Root, { className: cn(rootClass, variantClass), onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, children: [_jsxs("div", { className: "grid gap-1", children: [_jsx(Primitive.Title, { className: "text-sm font-semibold", children: entry.title }), entry.description !== undefined && (_jsx(Primitive.Description, { className: "text-sm opacity-90", children: entry.description })), entry.docsUrl !== undefined && (_jsx(Primitive.Action, { altText: learnMore, asChild: true, children: _jsxs("a", { href: entry.docsUrl, target: "_blank", rel: "noopener noreferrer", className: cn("text-xs underline opacity-90 hover:opacity-100", "focus:outline-none focus:ring-1 focus:ring-current rounded"), children: [learnMore, " \u2192"] }) }))] }), _jsx(Primitive.Close, { className: cn("absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity", "hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1", "group-hover:opacity-100"), "aria-label": t("kumiko.dialog.close"), children: _jsx(X, { className: "h-4 w-4" }) })] }));
+}

package/dist/web/primitives/tz-input.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type TzInputProps = {
+    readonly id: string;
+    readonly name: string;
+    readonly value: string;
+    readonly onChange: (v: string | undefined) => void;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+};
+export declare function TzInput({ id, name, value, onChange, disabled, required, hasError, }: TzInputProps): ReactNode;

package/dist/web/primitives/tz-input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from "../../index.js";
+import { ComboboxInput } from "./combobox.js";
+import { TZ_OPTIONS } from "./tz-options.js";
+export function TzInput({ id, name, value, onChange, disabled, required, hasError, }) {
+    const t = useTranslation();
+    return (_jsx(ComboboxInput, { id: id, name: name, options: TZ_OPTIONS, value: value, onChange: (v) => onChange(v === "" ? undefined : v), placeholder: t("kumiko.field.timezone"), ...(disabled !== undefined && { disabled }), ...(required !== undefined && { required }), ...(hasError !== undefined && { hasError }) }));
+}

package/dist/web/primitives/tz-options.d.ts

@@ -0,0 +1,4 @@
+export declare const TZ_OPTIONS: readonly {
+    readonly value: string;
+    readonly label: string;
+}[];

package/dist/web/primitives/tz-options.js

@@ -0,0 +1,17 @@
+// Curated fallback list for runtimes without Intl.supportedValuesOf (pre
+// ES2022). Covers the most common zones; modern browsers + Bun return the
+// full IANA list.
+const FALLBACK_ZONES = [
+    "UTC",
+    "Europe/Berlin",
+    "Europe/London",
+    "Europe/Paris",
+    "Europe/Madrid",
+    "America/New_York",
+    "America/Los_Angeles",
+    "America/Sao_Paulo",
+    "Asia/Tokyo",
+    "Asia/Singapore",
+    "Australia/Sydney",
+];
+export const TZ_OPTIONS = (typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : FALLBACK_ZONES).map((zone) => ({ value: zone, label: zone }));

package/dist/web/primitives/use-keyboard-inset.d.ts

@@ -0,0 +1 @@
+export declare function useKeyboardInset(): number;

package/dist/web/primitives/use-keyboard-inset.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+function readKeyboardInset() {
+    const viewport = window.visualViewport;
+    if (viewport === null || viewport === undefined)
+        return 0;
+    return Math.max(0, Math.round(window.innerHeight - viewport.height - viewport.offsetTop));
+}
+// iOS Safari ignores `interactive-widget=resizes-content`: the layout viewport keeps its full
+// height under the keyboard, so `fixed bottom-0` bars sit behind it. Where the key is honoured
+// (Chromium/Android) the layout viewport shrinks too, the difference is 0 and nothing shifts.
+export function useKeyboardInset() {
+    const [inset, setInset] = useState(0);
+    useEffect(() => {
+        const viewport = window.visualViewport;
+        // skip: without visualViewport no keyboard inset is measurable
+        if (viewport === null || viewport === undefined)
+            return;
+        const update = () => setInset(readKeyboardInset());
+        update();
+        viewport.addEventListener("resize", update);
+        viewport.addEventListener("scroll", update);
+        return () => {
+            viewport.removeEventListener("resize", update);
+            viewport.removeEventListener("scroll", update);
+        };
+    }, []);
+    return inset;
+}

package/dist/web/primitives/use-narrow-viewport.d.ts

@@ -0,0 +1,4 @@
+export declare const NARROW_VIEWPORT_BREAKPOINT_PX = 768;
+export declare function useIsViewportBelow(breakpointPx: number): boolean;
+export declare function useIsNarrowViewport(): boolean;
+export declare function useIsBelowSmViewport(): boolean;

package/dist/web/primitives/use-narrow-viewport.js

@@ -0,0 +1,46 @@
+import { useSyncExternalStore } from "react";
+// Matches ui/use-mobile.ts's MOBILE_BREAKPOINT. Kept as a separate constant
+// because that file is vendored shadcn (regenerated via scripts/sync-shadcn.ts)
+// and cannot be imported from without risking a future overwrite.
+export const NARROW_VIEWPORT_BREAKPOINT_PX = 768;
+const SM_BREAKPOINT = 640;
+// Module-level stores keep subscribe stable, so useSyncExternalStore does not
+// resubscribe on every render (FormFooter re-renders on each keystroke).
+function createBelowBreakpointStore(breakpoint) {
+    const query = `(max-width: ${breakpoint - 1}px)`;
+    return {
+        subscribe: (callback) => {
+            const mql = window.matchMedia(query);
+            mql.addEventListener("change", callback);
+            return () => mql.removeEventListener("change", callback);
+        },
+        getSnapshot: () => window.matchMedia(query).matches,
+    };
+}
+const belowBreakpointStores = new Map();
+function belowBreakpointStore(breakpoint) {
+    const cached = belowBreakpointStores.get(breakpoint);
+    if (cached !== undefined)
+        return cached;
+    const created = createBelowBreakpointStore(breakpoint);
+    belowBreakpointStores.set(breakpoint, created);
+    return created;
+}
+function getServerSnapshot() {
+    return false;
+}
+// Unlike the vendored `useIsMobile` (ui/use-mobile.ts), which only sets its
+// result in a `useEffect` and therefore always reports `false` on the first
+// render regardless of actual viewport, this reads the real value up front
+// via `useSyncExternalStore` — no wrong-then-corrected first render.
+export function useIsViewportBelow(breakpointPx) {
+    const store = belowBreakpointStore(breakpointPx);
+    return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+}
+export function useIsNarrowViewport() {
+    return useIsViewportBelow(NARROW_VIEWPORT_BREAKPOINT_PX);
+}
+// Tailwind's `sm` boundary: true below 640px.
+export function useIsBelowSmViewport() {
+    return useIsViewportBelow(SM_BREAKPOINT);
+}

package/dist/web/react-css-custom-properties.d.ts

@@ -0,0 +1,6 @@
+declare module "react" {
+    interface CSSProperties {
+        [customProperty: `--${string}`]: string | number | undefined;
+    }
+}
+export {};

package/dist/web/react-css-custom-properties.js

@@ -0,0 +1 @@
+export {};

package/dist/web/sse/live-events.d.ts

@@ -0,0 +1,15 @@
+import { type LiveEventSubscriber } from "../../index.ts";
+export type CreateEventSourceLiveEventsOptions = {
+    /** URL des SSE-Endpoints. Default: /api/sse (das ist wo
+     *  createSseRoute im Kumiko-Server mountet). Override wenn der
+     *  Mountpath divergiert. */
+    readonly url?: string;
+    /** Fires once per connection when the session ended: the server refused the SSE
+     *  handshake, or opened the stream with a `session-ended` frame (stale auth
+     *  cookie downgraded to anonymous). Same codes as the dispatcher path. */
+    readonly onSessionEnded?: () => void;
+};
+/** Liefert einen `LiveEventSubscriber` der EventSource-backed ist.
+ *  Normalerweise einmal im App-Bootstrap gerufen und als value an
+ *  `<LiveEventsProvider>` durchgereicht — createKumikoApp tut das. */
+export declare function createEventSourceLiveEvents(options?: CreateEventSourceLiveEventsOptions): LiveEventSubscriber;

package/dist/web/sse/live-events.js

@@ -0,0 +1,148 @@
+import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
+import { isSessionEndedError } from "../../index.js";
+// Wire name of the first frame on a stream downgraded from a stale auth cookie (sse-route.ts).
+const SESSION_ENDED_EVENT = "session-ended";
+function sessionEndedFrameCode(event) {
+    const data = propertyOf(event, "data");
+    if (typeof data !== "string")
+        return undefined;
+    try {
+        const code = propertyOf(JSON.parse(data), "code");
+        return typeof code === "string" ? code : undefined;
+    }
+    catch {
+        // skip: malformed frame, not evidence of a session end
+        return undefined;
+    }
+}
+function hasErrorCode(body) {
+    if (typeof body !== "object" || body === null || !("error" in body))
+        return false;
+    const { error } = body;
+    return (typeof error === "object" && error !== null && "code" in error && typeof error.code === "string");
+}
+// EventSource never exposes the HTTP status, so one plain fetch of the same
+// URL tells a session end apart from an outage. Aborted right after the
+// headers/body so a 200 doesn't hold a second stream open.
+async function isSessionEndedRejection(url) {
+    const controller = new AbortController();
+    try {
+        // guard-allow: same-origin fetch — url is the app's own SSE endpoint, probed with same-origin credentials
+        const res = await fetch(url, {
+            credentials: "same-origin",
+            headers: { Accept: "text/event-stream" },
+            signal: controller.signal,
+        });
+        if (res.status !== 401)
+            return false;
+        const body = await res.json();
+        return hasErrorCode(body) && isSessionEndedError({ code: body.error.code, httpStatus: 401 });
+    }
+    catch {
+        // skip: probe failed (offline, unparseable body) — not evidence of a session end
+        return false;
+    }
+    finally {
+        controller.abort();
+    }
+}
+/** Liefert einen `LiveEventSubscriber` der EventSource-backed ist.
+ *  Normalerweise einmal im App-Bootstrap gerufen und als value an
+ *  `<LiveEventsProvider>` durchgereicht — createKumikoApp tut das. */
+export function createEventSourceLiveEvents(options = {}) {
+    const url = options.url ?? "/api/sse";
+    const subscribers = new Set();
+    let source;
+    const wiredEntities = new Set();
+    // `subscribers` is a flat Set across all entities — the browser-side
+    // addEventListener(entityName, ...) gate below only filters which frames
+    // arrive at all, not which subscriber a given frame is for. Without this
+    // filter, an `invoice` subscriber would also fire on every `user` frame.
+    const handleEvent = (raw) => {
+        let parsed;
+        try {
+            parsed = JSON.parse(raw);
+        }
+        catch {
+            // skip: malformed SSE payload, drop it rather than crash all subscribers
+            return;
+        }
+        const event = { type: parsed.aggregateType, data: parsed };
+        for (const sub of subscribers) {
+            if (sub.entityName === parsed.aggregateType)
+                sub.listener(event);
+        }
+    };
+    const ensureConnected = () => {
+        // skip: EventSource already connected
+        if (source !== undefined)
+            return;
+        // skip: no window/EventSource available (SSR/non-browser), nothing to connect
+        if (typeof window === "undefined" || typeof EventSource === "undefined")
+            return;
+        const connection = new EventSource(url);
+        source = connection;
+        const { onSessionEnded } = options;
+        // skip: no session-end consumer, a refused handshake needs no probe
+        if (onSessionEnded === undefined)
+            return;
+        let sessionEndedSignalled = false;
+        const signalSessionEnded = () => {
+            // skip: the frame and the error probe can both report the same session end
+            if (sessionEndedSignalled)
+                return;
+            sessionEndedSignalled = true;
+            onSessionEnded();
+        };
+        connection.addEventListener(SESSION_ENDED_EVENT, (e) => {
+            const code = sessionEndedFrameCode(e);
+            if (code !== undefined && isSessionEndedError({ code, httpStatus: 401 }))
+                signalSessionEnded();
+        });
+        connection.addEventListener("error", () => {
+            // skip: CONNECTING means a dropped stream the browser retries itself;
+            // only a refused handshake (non-200) closes the EventSource for good.
+            if (connection.readyState !== EventSource.CLOSED)
+                return;
+            void isSessionEndedRejection(url).then((sessionEnded) => {
+                if (sessionEnded)
+                    signalSessionEnded();
+            });
+        });
+    };
+    const ensureListenersForEntity = (entityName) => {
+        // skip: not connected yet, listeners get wired once ensureConnected runs
+        if (source === undefined)
+            return;
+        // skip: already wired for this entity
+        if (wiredEntities.has(entityName))
+            return;
+        source.addEventListener(entityName, (e) => {
+            const data = propertyOf(e, "data");
+            if (typeof data === "string")
+                handleEvent(data);
+        });
+        wiredEntities.add(entityName);
+    };
+    const closeIfEmpty = () => {
+        // skip: subscribers remain, connection still needed
+        if (subscribers.size > 0)
+            return;
+        // skip: already closed, nothing to close
+        if (source === undefined)
+            return;
+        source.close();
+        source = undefined;
+        wiredEntities.clear();
+    };
+    return (entityName, listener) => {
+        ensureConnected();
+        ensureListenersForEntity(entityName);
+        const sub = { entityName, listener };
+        subscribers.add(sub);
+        return () => {
+            subscribers.delete(sub);
+            closeIfEmpty();
+        };
+    };
+}