@cosmicdrift/kumiko-renderer 0.392.2 → 0.394.0

package/dist/web/layout/shell-breadcrumb.js

@@ -3,6 +3,20 @@ import { lastSegment } from "../../index.js";
 export function screenTitleKey(screenShortId) {
     return `screen:${screenShortId}.title`;
 }
+export function screenCreateTitleKey(screenShortId) {
+    return `screen:${screenShortId}.createTitle`;
+}
+// An edit screen opened without a record creates one; a feature names that state with
+// `createTitle`, and without it the screen title stays (t returns the key when untranslated).
+function detailTitle(screenShortId, creating, t) {
+    if (creating) {
+        const createKey = screenCreateTitleKey(screenShortId);
+        const createTitle = t(createKey);
+        if (createTitle !== createKey)
+            return createTitle;
+    }
+    return t(screenTitleKey(screenShortId));
+}
 // Delegates to resolveNavParentScreen, supplying the feature-qualified-id
 // normalization the client-side schema needs.
 function resolveParentScreen(screens, detail) {
@@ -18,18 +32,19 @@ export function resolveParentScreenId(screens, screenId) {
     const parent = resolveParentScreen(screens, detail);
     return parent !== undefined ? lastSegment(parent.id) : undefined;
 }
-export function resolveDetailBreadcrumb(screens, detailScreenId, t) {
+export function resolveDetailBreadcrumb(screens, detailScreenId, t, options = {}) {
+    const creating = options.creating === true;
     const detail = screens.find((s) => lastSegment(s.id) === detailScreenId);
     if (detail === undefined)
         return undefined;
     const list = resolveParentScreen(screens, detail);
     if (list === undefined) {
-        return [{ label: t(screenTitleKey(detailScreenId)) }];
+        return [{ label: detailTitle(detailScreenId, creating, t) }];
     }
     const listId = lastSegment(list.id);
     return [
         { label: t(screenTitleKey(listId)), screenId: listId },
-        { label: t(screenTitleKey(detailScreenId)) },
+        { label: detailTitle(detailScreenId, creating, t) },
     ];
 }
 export function activeNavLabel(nodes, screenId, t) {

package/dist/web/layout/shell-header.js

@@ -53,8 +53,10 @@ export function ShellHeader({ schema, user, headerActions, allowedNavQns, }) {
             activeNavLabel(tree, screenId, t);
         if (navLabel !== undefined)
             return [{ label: navLabel }];
-        return resolveDetailBreadcrumb(allScreens, screenId, t);
-    }, [allScreens, screenId, entityId, t, tree, allowedTree]);
+        return resolveDetailBreadcrumb(allScreens, screenId, t, {
+            creating: standInScreenId === undefined && entityId === undefined,
+        });
+    }, [allScreens, screenId, standInScreenId, entityId, t, tree, allowedTree]);
     const setStatusElement = slot?.setStatusElement;
     const setActionsElement = slot?.setActionsElement;
     const titleOverride = slot?.title;

package/dist/web/primitives/action-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Generic action menu built on @radix-ui/react-dropdown-
-// menu. Used for ProfileMenu (topbar avatar), Edit-
+// Generic action menu built on the radix-ui DropdownMenu.
+// Used for ProfileMenu (topbar avatar), Edit-
 // Header-Menu (three dots), and list-row kebab menus; only the
 // trigger differs between uses.
 //

package/dist/web/primitives/calendar-popover.js

@@ -9,8 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The text input (typing) intentionally lives in each Primitive, not here:
 // date has one field, while timestamp has two (date + time). This lets both
 // share the calendar mechanics without sharing their input layout.
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Calendar as CalendarIcon } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { lazy, Suspense } from "react";
 import { cn } from "../lib/cn.js";
 const CalendarDayPicker = lazy(() => import("./calendar-day-picker.js"));

package/dist/web/primitives/combobox.js

@@ -12,9 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Multi-mode: `multiple: true` switches to tag display and multi-selection.
 // Selected values render as small chips, while the search input remains open
 // for additional selections.
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Command } from "cmdk";
 import { Check, ChevronDown, Loader2, Plus } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { useEffect, useState } from "react";
 import { REFERENCE_SEARCH_DEBOUNCE_MS, useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";

package/dist/web/primitives/data-table/table-data-cell.js

@@ -8,9 +8,35 @@ import { columnCellPresentationProps } from "./data-cell-props.js";
 // last column slid under the sticky actions column with
 // nothing visibly cut off. max-w-xs bounds a single column;
 // badges and dates stay nowrap by their own classes.
+// A resizable table sizes by content until the user drags a column. Its
+// first column names the row and gets the room it needs: it breaks anywhere
+// only when the table runs out of width, so a long identifier stays on one
+// line on a wide screen instead of wrapping at 20rem. Dates and timestamps
+// keep one line there too; a narrow screen scrolls the table sideways.
+const ONE_LINE_COLUMN_TYPES = new Set(["timestamp", "date"]);
+// Projection lists synthesize every column as type "text"; their dates carry a format spec.
+function isDateColumn(col) {
+    if (ONE_LINE_COLUMN_TYPES.has(col.type))
+        return true;
+    const renderer = col.renderer;
+    return (typeof renderer === "object" &&
+        renderer !== null &&
+        "format" in renderer &&
+        typeof renderer.format === "string" &&
+        ONE_LINE_COLUMN_TYPES.has(renderer.format));
+}
+function autoLayoutCellClassName(m, col, colIndex) {
+    if (m.sizing !== undefined && isDateColumn(col))
+        return "whitespace-nowrap";
+    return colIndex === 0 && m.sizing !== undefined
+        ? "whitespace-normal [overflow-wrap:anywhere]"
+        : "max-w-xs whitespace-normal break-words";
+}
 function dataCellClassName(m, col, colIndex, pinClassName) {
     return cn(col.fileDisplay === undefined
-        ? cn(m.sizing ? "overflow-hidden" : "max-w-xs", "whitespace-normal break-words")
+        ? m.sizing?.fixed === true
+            ? "overflow-hidden whitespace-normal break-words"
+            : autoLayoutCellClassName(m, col, colIndex)
         : FIT_CONTENT_CELL_CLASS, colIndex === 0 ? "font-medium text-foreground" : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40", m.density.cell, pinClassName);
 }
 export function renderDataCell(m, row, col, colIndex, opensOnClick) {

package/dist/web/primitives/data-table/table-header-row.js

@@ -17,5 +17,5 @@ function renderExpandHeaderCell(m) {
     return (_jsx(TableHead, { "data-testid": "column-expand", className: cn(EXPAND_TOGGLE_CELL_CLASS, expandHeaderPin.className), style: expandHeaderPin.style }));
 }
 export function renderTableHeader(m) {
-    return (_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { ref: m.headerRowRef, className: "hover:bg-transparent", children: [m.selection.headerCell(m.pins.headerCell(SELECT_COLUMN_KEY)), m.expansion !== undefined && renderExpandHeaderCell(m), m.columns.map((col) => renderColumnHeader(m, col)), m.hasTableActions && (_jsx(ActionsHeaderCell, { label: m.tableTranslate?.("kumiko.list.actions") ?? "Actions", style: m.pins.actionsHeaderStyle, absorbsLeftover: m.sizing !== undefined }))] }) }));
+    return (_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { ref: m.headerRowRef, className: "hover:bg-transparent", children: [m.selection.headerCell(m.pins.headerCell(SELECT_COLUMN_KEY)), m.expansion !== undefined && renderExpandHeaderCell(m), m.columns.map((col) => renderColumnHeader(m, col)), m.hasTableActions && (_jsx(ActionsHeaderCell, { label: m.tableTranslate?.("kumiko.list.actions") ?? "Actions", style: m.pins.actionsHeaderStyle, absorbsLeftover: m.sizing?.fixed === true }))] }) }));
 }

package/dist/web/primitives/data-table/table-view.js

@@ -8,7 +8,7 @@ import { renderTableHeader } from "./table-header-row.js";
 import { TotalsFooterRow } from "./totals-footer.js";
 function renderColumnWidths(m) {
     const { sizing } = m;
-    if (sizing === undefined)
+    if (sizing === undefined || !sizing.fixed)
         return null;
     return (_jsx(ColumnWidthGroup, { fields: m.columns.map((col) => col.field), sizing: sizing, hasExpandColumn: m.expansion !== undefined, hasSelectColumn: m.selection.active, hasActionsColumn: m.hasTableActions }));
 }
@@ -21,5 +21,5 @@ function renderTotalsRow(m) {
 export function renderTableView(m) {
     const { fillsHeight, chromeless, sizing, testId } = m;
     const TableRoot = fillsHeight ? FlushTable : Table;
-    return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, ...(sizing !== undefined && { style: sizing.tableStyle }), children: [renderColumnWidths(m), renderTableHeader(m), renderTableBody(m), renderTotalsRow(m)] }) }));
+    return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, ...(sizing?.tableStyle !== undefined && { style: sizing.tableStyle }), children: [renderColumnWidths(m), renderTableHeader(m), renderTableBody(m), renderTotalsRow(m)] }) }));
 }

package/dist/web/primitives/data-table/use-column-sizing.d.ts

@@ -2,14 +2,16 @@ import { type CSSProperties } from "react";
 import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
 import { type MeasuredColumnWidths } from "./use-measured-column-widths.ts";
 export type ColumnSizing = {
+    /** False until a column has a chosen width: the table keeps the auto layout and sizes columns by content. */
+    readonly fixed: boolean;
     readonly widthOf: (field: string) => number;
     readonly minWidthOf: (field: string) => number;
-    readonly tableStyle: CSSProperties;
+    readonly tableStyle: CSSProperties | undefined;
     /** Live width while a drag is in progress; nothing reaches the view state until `commit`. */
     readonly setLiveWidth: (field: string, width: number) => void;
     readonly commit: (field: string, width: number) => void;
 };
-/** Fixed-layout sizing for resizable columns; undefined when resizing is off. */
+/** Sizing for resizable columns; undefined when resizing is off. */
 export declare function useColumnSizing({ columns, view, isNarrow, measured, hasExpandColumn, hasSelectColumn, }: {
     readonly columns: readonly {
         readonly field: string;

package/dist/web/primitives/data-table/use-column-sizing.js

@@ -1,22 +1,36 @@
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
+import { DEFAULT_COLUMN_WIDTH_PX } from "../../../hooks/list-column-layout.js";
 import { isResizingActive } from "./column-layout-mode.js";
 import { EXPAND_COLUMN_WIDTH_PX, SELECT_COLUMN_WIDTH_PX, } from "./use-measured-column-widths.js";
-/** Fixed-layout sizing for resizable columns; undefined when resizing is off. */
+/** Sizing for resizable columns; undefined when resizing is off. */
 export function useColumnSizing({ columns, view, isNarrow, measured, hasExpandColumn, hasSelectColumn = false, }) {
     const [live, setLive] = useState(null);
     const active = isResizingActive(view, isNarrow);
     const widths = view?.widths;
     const minWidths = view?.minWidths;
     const onWidthChange = view?.onWidthChange;
-    const commit = useCallback((field, width) => {
-        setLive(null);
-        onWidthChange?.(field, width);
-    }, [onWidthChange]);
     return useMemo(() => {
         if (!active || widths === undefined || minWidths === undefined)
             return undefined;
         const minWidthOf = (field) => minWidths[field] ?? 0;
-        const widthOf = (field) => live?.field === field ? live.width : (widths[field] ?? minWidthOf(field));
+        const fixed = live !== null || columns.some((column) => widths[column.field] !== undefined);
+        // Columns without a chosen width keep the width the auto layout gave them, so the
+        // first drag moves one column instead of snapping every other one to a default.
+        const displayedWidths = () => live?.frozen ?? measured?.fields ?? {};
+        const widthOf = (field) => {
+            if (live?.field === field)
+                return live.width;
+            const chosen = widths[field];
+            if (chosen !== undefined)
+                return chosen;
+            const displayed = displayedWidths()[field];
+            if (displayed !== undefined && displayed > 0)
+                return displayed;
+            return fixed ? Math.max(DEFAULT_COLUMN_WIDTH_PX, minWidthOf(field)) : minWidthOf(field);
+        };
+        const unchosenDisplayedWidths = (dragged) => Object.fromEntries(columns
+            .filter((column) => column.field !== dragged && widths[column.field] === undefined)
+            .map((column) => [column.field, widthOf(column.field)]));
         // The actions column keeps no width of its own: it absorbs the leftover space,
         // so a dragged width holds exactly while the table is wider than its container.
         const total = columns.reduce((sum, column) => sum + widthOf(column.field), 0) +
@@ -24,11 +38,20 @@ export function useColumnSizing({ columns, view, isNarrow, measured, hasExpandCo
             (hasSelectColumn ? SELECT_COLUMN_WIDTH_PX : 0) +
             (measured?.actions ?? 0);
         return {
+            fixed,
             widthOf,
             minWidthOf,
-            tableStyle: { tableLayout: "fixed", width: `max(100%, ${total}px)` },
-            setLiveWidth: (field, width) => setLive({ field, width }),
-            commit,
+            tableStyle: fixed ? { tableLayout: "fixed", width: `max(100%, ${total}px)` } : undefined,
+            setLiveWidth: (field, width) => setLive((previous) => ({
+                field,
+                width,
+                frozen: previous?.frozen ?? { ...measured?.fields },
+            })),
+            commit: (field, width) => {
+                const others = unchosenDisplayedWidths(field);
+                setLive(null);
+                onWidthChange?.(field, width, others);
+            },
         };
     }, [
         active,
@@ -39,6 +62,6 @@ export function useColumnSizing({ columns, view, isNarrow, measured, hasExpandCo
         hasExpandColumn,
         hasSelectColumn,
         measured,
-        commit,
+        onWidthChange,
     ]);
 }

package/dist/web/primitives/data-table/view-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Columns3 } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { useOptionalTranslation } from "../../../index.js";
 import { Button as UiButton } from "../../ui/button.js";
 import { SegmentedControl } from "../segmented-select.js";

package/dist/web/primitives/data-table-cell.js

@@ -76,7 +76,7 @@ export function isBadgeColumn(col) {
 export function FirstCellLink({ enabled, empty, emptyLabel, onOpen, children, }) {
     if (!enabled || (empty && emptyLabel === undefined))
         return children;
-    return (_jsx("button", { type: "button", className: "max-w-full cursor-pointer truncate bg-transparent p-0 text-left font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: (e) => {
+    return (_jsx("button", { type: "button", className: "max-w-full cursor-pointer bg-transparent p-0 text-left font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: (e) => {
             e.stopPropagation();
             onOpen();
         }, onKeyDown: (e) => {

package/dist/web/primitives/dialog.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Confirm dialog built on ModalShell. Cancel is always secondary; async
 // onConfirm shows a spinner on the confirm button until the promise settles.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Loader2 } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { useRef, useState } from "react";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";

package/dist/web/primitives/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import * as Primitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as Primitive } from "radix-ui";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 export declare const DropdownMenu: import("react").FC<Primitive.DropdownMenuProps>;
 export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/web/primitives/dropdown-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // shadcn-style DropdownMenu built on Radix. Wrappers around
-// @radix-ui/react-dropdown-menu use the same Tailwind token classes as
+// the radix-ui DropdownMenu use the same Tailwind token classes as
 // the other primitives. The caller provides the trigger-button styling
 // through the asChild pattern; this module supplies only Content, Item,
 // Label, Separator, and CheckboxItem with consistent styling.
@@ -11,8 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // - Portaled content renders across stacking-context boundaries, which is
 //   useful in dialogs and popovers.
 // - Keyboard navigation (↑↓ + Home/End) works by default.
-import * as Primitive from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
+import { DropdownMenu as Primitive } from "radix-ui";
 import { cn } from "../lib/cn.js";
 export const DropdownMenu = Primitive.Root;
 export const DropdownMenuTrigger = Primitive.Trigger;

package/dist/web/primitives/lightbox.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Full-size image overlay — ModalShell without confirm/cancel actions.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
 import { ModalShell } from "./modal-shell.js";

package/dist/web/primitives/modal-shell.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Shared Radix dialog chrome for confirm Dialog + image Lightbox.
 // Not exported from the package — only an internal building block.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { cn } from "../lib/cn.js";
 export function ModalShell({ open, onOpenChange, children, testId, contentClassName, noAriaDescription, closeLabel, showCloseButton = true, onOpenAutoFocus, onContentKeyDown, }) {
     return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(DialogPrimitive.Content, { "data-testid": testId, ...(noAriaDescription && { "aria-describedby": undefined }), ...(onOpenAutoFocus !== undefined && { onOpenAutoFocus }), ...(onContentKeyDown !== undefined && { onKeyDown: onContentKeyDown }), className: cn("fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", contentClassName), children: [children, showCloseButton && closeLabel !== undefined && (_jsx(DialogPrimitive.Close, { asChild: true, children: _jsx("button", { type: "button", "aria-label": closeLabel, className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: _jsx(X, { className: "size-4" }) }) }))] })] }) }));

package/dist/web/primitives/modal.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Bare content shell for hosting self-contained widgets (own submit/cancel
 // buttons) in a modal overlay — same Radix chrome as DefaultDialog, no
 // footer buttons of its own.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
 import { BareFormProvider } from "./contexts.js";

package/dist/web/primitives/narrow-pinned-footer.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { MoreHorizontal } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
 import { createPortal } from "react-dom";
 import { FOOTER_ACTION_ROLE_PROP, NARROW_LABEL_PROP, STICKY_PRIMARY_ACTION_PROP, } from "../../index.js";

package/dist/web/primitives/toast.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Toast primitive built on @radix-ui/react-toast: a global provider and
+// Toast primitive built on radix-ui Toast: a global provider and
 // a useToast() hook for triggering toasts throughout the app. Consumers
 // get only the `toast()` trigger, without Context boilerplate.
 //
 // Variant is StatusTone, using the same color family as StatusBadge;
 // the default is "muted" (neutral). Toasts auto-dismiss after 5s and can
 // be closed manually with the X button. Radix provides the ARIA live region.
-import * as Primitive from "@radix-ui/react-toast";
 import { X } from "lucide-react";
+import { Toast as Primitive } from "radix-ui";
 import { createContext, useCallback, useContext, useId, useMemo, useRef, useState, } from "react";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";

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

@@ -74,7 +74,6 @@ export function createEventSourceLiveEvents(options = {}) {
     const wiredEntities = new Set();
     let cancelReconnect;
     let reconnectAttempt = 0;
-    let needsResync = false;
     // `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
@@ -134,10 +133,6 @@ export function createEventSourceLiveEvents(options = {}) {
         };
         connection.addEventListener("open", () => {
             reconnectAttempt = 0;
-            // skip: first connect, nothing was missed
-            if (!needsResync)
-                return;
-            needsResync = false;
             emitResync();
         });
         connection.addEventListener(SESSION_ENDED_EVENT, (e) => {
@@ -146,7 +141,6 @@ export function createEventSourceLiveEvents(options = {}) {
                 signalSessionEnded();
         });
         connection.addEventListener("error", () => {
-            needsResync = true;
             // 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)
@@ -191,7 +185,6 @@ export function createEventSourceLiveEvents(options = {}) {
             cancelReconnect = undefined;
         }
         reconnectAttempt = 0;
-        needsResync = false;
         // skip: already closed, nothing to close
         if (source === undefined)
             return;

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

@@ -0,0 +1,32 @@
+import type { DragDelta } from "./use-pointer-drag.ts";
+export type FloatingPanelGeometry = {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+};
+export type Edge = "top" | "right" | "bottom" | "left";
+export declare const FLOATING_PANEL_MARGIN_PX = 24;
+export type Limits = {
+    readonly minWidth: number;
+    readonly minHeight: number;
+    readonly maxWidth: number;
+    readonly maxHeight: number;
+    readonly viewportWidth: number;
+    readonly viewportHeight: number;
+};
+type LimitOptions = {
+    readonly minWidthPx?: number | undefined;
+    readonly minHeightPx?: number | undefined;
+    readonly maxWidthPx?: number | undefined;
+    readonly maxHeightPx?: number | undefined;
+};
+export declare function readLimits(options: LimitOptions): Limits;
+export declare function fitGeometry(geometry: FloatingPanelGeometry, limits: Limits): FloatingPanelGeometry;
+export type ViewportSize = {
+    readonly width: number;
+    readonly height: number;
+};
+export declare function refitToViewport(geometry: FloatingPanelGeometry, previousViewport: ViewportSize, limits: Limits): FloatingPanelGeometry;
+export declare function resizeGeometry(start: FloatingPanelGeometry, edges: readonly Edge[], delta: DragDelta, limits: Limits): FloatingPanelGeometry;
+export {};

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

@@ -0,0 +1,71 @@
+import { clamp } from "../lib/clamp.js";
+export const FLOATING_PANEL_MARGIN_PX = 24;
+// Minimum distance to every viewport edge, so the panel never sticks to the window border.
+const VIEWPORT_GAP_PX = 16;
+const DEFAULT_MIN_WIDTH_PX = 280;
+const DEFAULT_MIN_HEIGHT_PX = 200;
+export function readLimits(options) {
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const maxWidth = Math.min(options.maxWidthPx ?? viewportWidth - 2 * FLOATING_PANEL_MARGIN_PX, viewportWidth - 2 * VIEWPORT_GAP_PX);
+    const maxHeight = Math.min(options.maxHeightPx ?? viewportHeight - 2 * FLOATING_PANEL_MARGIN_PX, viewportHeight - 2 * VIEWPORT_GAP_PX);
+    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.
+export 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: clampIntoViewport(geometry.x, width, limits.viewportWidth),
+        y: clampIntoViewport(geometry.y, height, limits.viewportHeight),
+    };
+}
+function clampIntoViewport(position, size, viewportSize) {
+    return clamp(position, VIEWPORT_GAP_PX, Math.max(VIEWPORT_GAP_PX, viewportSize - size - VIEWPORT_GAP_PX));
+}
+// A panel closer to the right (bottom) edge keeps its distance to that edge when the window
+// changes size; otherwise it keeps its distance to the left (top) edge.
+function anchoredPosition(position, size, previousViewportSize, fittedSize, viewportSize) {
+    const endGap = previousViewportSize - (position + size);
+    return endGap < position ? viewportSize - fittedSize - endGap : position;
+}
+export function refitToViewport(geometry, previousViewport, limits) {
+    const sized = fitGeometry(geometry, limits);
+    return fitGeometry({
+        ...sized,
+        x: anchoredPosition(geometry.x, geometry.width, previousViewport.width, sized.width, limits.viewportWidth),
+        y: anchoredPosition(geometry.y, geometry.height, previousViewport.height, sized.height, limits.viewportHeight),
+    }, limits);
+}
+// 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 - VIEWPORT_GAP_PX));
+        return { position: end - size, size };
+    }
+    const size = clamp(start.size + delta, min, Math.min(max, viewportSize - VIEWPORT_GAP_PX - start.position));
+    return { position: start.position, size };
+}
+export 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 };
+}

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

@@ -1,10 +1,6 @@
 import { type ReactNode } from "react";
-export type FloatingPanelGeometry = {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-};
+import { type FloatingPanelGeometry } from "./floating-panel-geometry.ts";
+export type { FloatingPanelGeometry } from "./floating-panel-geometry.ts";
 export type FloatingPanelProps = {
     /** Header content; the header is the move handle. */
     readonly title: ReactNode;

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

@@ -3,15 +3,12 @@ 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 { FLOATING_PANEL_MARGIN_PX, fitGeometry, readLimits, refitToViewport, resizeGeometry, } from "./floating-panel-geometry.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";
@@ -44,54 +41,6 @@ const EDGE_LABEL_KEYS = {
 };
 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);
 }
@@ -141,8 +90,8 @@ function initialGeometry(storageKey, defaults, limits) {
     return fitGeometry({
         width,
         height,
-        x: defaults?.x ?? limits.viewportWidth - width - MARGIN_PX,
-        y: defaults?.y ?? limits.viewportHeight - height - MARGIN_PX,
+        x: defaults?.x ?? limits.viewportWidth - width - FLOATING_PANEL_MARGIN_PX,
+        y: defaults?.y ?? limits.viewportHeight - height - FLOATING_PANEL_MARGIN_PX,
     }, limits);
 }
 /** Non-modal panel floating above the page: draggable by its header,
@@ -158,6 +107,8 @@ export function FloatingPanel({ title, headerActions, children, storageKey, defa
     const [geometry, setGeometry] = useState(() => initialGeometry(storageKey, defaultGeometry, getLimits()));
     const geometryRef = useRef(geometry);
     geometryRef.current = geometry;
+    // The viewport the current geometry was last fitted to; null until the first fit.
+    const fittedViewportRef = useRef(null);
     const applyGeometry = useCallback((next) => {
         geometryRef.current = next;
         setGeometry(next);
@@ -167,7 +118,12 @@ export function FloatingPanel({ title, headerActions, children, storageKey, defa
         if (narrow)
             return;
         const onWindowResize = () => {
-            applyGeometry(fitGeometry(geometryRef.current, getLimitsRef.current()));
+            const limits = getLimitsRef.current();
+            const previousViewport = fittedViewportRef.current;
+            applyGeometry(previousViewport === null
+                ? fitGeometry(geometryRef.current, limits)
+                : refitToViewport(geometryRef.current, previousViewport, limits));
+            fittedViewportRef.current = { width: limits.viewportWidth, height: limits.viewportHeight };
         };
         // Resize events fired while narrow were ignored, so re-fit once on the way back to wide.
         onWindowResize();