@eifi1/ui-kit 0.32.2 → 0.33.1

package/dist/feedback.d.ts

@@ -1,4 +1,4 @@
-export { C as ChatComposer, a as ChatComposerHandle, b as ChatComposerLabels, c as ChatComposerProps, d as ChatComposerSlotContext, D as DEFAULT_ATTACHMENT_ACCEPT, e as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, f as DEFAULT_FEEDBACK_CATEGORY_LABELS, g as DEFAULT_FEEDBACK_COMPOSER_LABELS, h as DEFAULT_FEEDBACK_CONTEXT_LABELS, i as DEFAULT_FEEDBACK_DETAIL_LABELS, j as DEFAULT_FEEDBACK_DIALOG_LABELS, k as DEFAULT_FEEDBACK_MENU_LABELS, l as DEFAULT_FEEDBACK_PAGE_LABELS, m as DEFAULT_FEEDBACK_STATUS_LABELS, n as DEFAULT_FEEDBACK_THREAD_LABELS, o as DEFAULT_FEEDBACK_TOAST_LABELS, p as DEFAULT_MAX_ATTACHMENTS, q as DEFAULT_MAX_ATTACHMENT_BYTES, F as FEEDBACK_ATTACHMENT_ACCEPT, r as FEEDBACK_AUTHOR_EDITABLE_STATUSES, s as FEEDBACK_AWAITING_STATUSES, t as FEEDBACK_CATEGORY_META, u as FEEDBACK_CATEGORY_ORDER, v as FEEDBACK_PICKABLE_CATEGORIES, w as FEEDBACK_REWORKABLE_STATUSES, x as FEEDBACK_STATUS_META, y as FEEDBACK_STATUS_ORDER, z as FEEDBACK_UNDO_DURATION, A as FeedbackAttachmentError, B as FeedbackAttachmentErrorInfo, E as FeedbackAttachmentField, G as FeedbackAttachmentFieldLabels, H as FeedbackAttachmentFieldMultipleProps, I as FeedbackAttachmentFieldProps, J as FeedbackAttachmentFieldRefsProps, K as FeedbackAttachmentFieldSingleProps, L as FeedbackAttachmentLabels, M as FeedbackAttachmentRef, N as FeedbackAttachmentRefsError, O as FeedbackAwaitingToggle, P as FeedbackAwaitingToggleProps, Q as FeedbackCategory, R as FeedbackCategoryBadge, S as FeedbackCategoryLabels, T as FeedbackCategoryOption, U as FeedbackColumnsOptions, V as FeedbackComposer, W as FeedbackComposerAttachment, X as FeedbackComposerHandle, Y as FeedbackComposerLabels, Z as FeedbackComposerProps, _ as FeedbackComposerSlotContext, $ as FeedbackContext, a0 as FeedbackContextBox, a1 as FeedbackContextBoxProps, a2 as FeedbackContextInput, a3 as FeedbackContextLabels, a4 as FeedbackDetail, a5 as FeedbackDetailLabels, a6 as FeedbackDetailPatch, a7 as FeedbackDetailSection, a8 as FeedbackDetailUpdate, a9 as FeedbackDialog, aa as FeedbackDialogLabels, ab as FeedbackDialogMultipleProps, ac as FeedbackDialogProps, ad as FeedbackDialogSingleProps, ae as FeedbackDialogTextLabels, af as FeedbackEmptyState, ag as FeedbackEmptyStateProps, ah as FeedbackEnvironment, ai as FeedbackMenu, aj as FeedbackMenuLabels, ak as FeedbackMenuProps, al as FeedbackMobileCard, am as FeedbackMobileCardProps, an as FeedbackMultipleSubmission, ao as FeedbackNoteAttachment, ap as FeedbackNoteEditor, aq as FeedbackPageLabels, ar as FeedbackProse, as as FeedbackRecord, at as FeedbackRenderDate, au as FeedbackReworkSection, av as FeedbackReworkSectionProps, aw as FeedbackRowAccess, ax as FeedbackRowDetail, ay as FeedbackRowDetailProps, az as FeedbackStatus, aA as FeedbackStatusBadge, aB as FeedbackStatusChange, aC as FeedbackStatusLabels, aD as FeedbackStatusMutate, aE as FeedbackStatusPatch, aF as FeedbackStatusRow, aG as FeedbackStatusTransitions, aH as FeedbackStatusUndoOptions, aI as FeedbackSubject, aJ as FeedbackSubjectProps, aK as FeedbackSubmission, aL as FeedbackSubmitHint, aM as FeedbackSubmitter, aN as FeedbackTableRow, aO as FeedbackThread, aP as FeedbackThreadAttachment, aQ as FeedbackThreadEvent, aR as FeedbackThreadItem, aS as FeedbackThreadLabels, aT as FeedbackThreadMessage, aU as FeedbackThreadProps, aV as FeedbackToastLabels, aW as FeedbackUpload, aX as UseFeedbackColumnsOptions, aY as appendRework, aZ as attachmentName, a_ as feedbackAttachmentLine, a$ as feedbackAttachmentUrls, b0 as feedbackCategoryRank, b1 as feedbackColumns, b2 as feedbackContext, b3 as feedbackEnvironment, b4 as feedbackMobileGroupBy, b5 as feedbackPageHref, b6 as feedbackPagePath, b7 as feedbackPageUrl, b8 as feedbackRowAccess, b9 as feedbackSubmitter, ba as feedbackSubmitterEmail, bb as isFeedbackAwaiting, bc as isImageAttachment, bd as nextFeedbackStatus, be as pastedName, bf as replaceDescription, bg as reworkCount, bh as selectableFeedbackStatuses, bi as splitBodyAttachments, bj as splitDescription, bk as useFeedbackCategoryLabels, bl as useFeedbackColumns, bm as useFeedbackDetailLabels, bn as useFeedbackPageLabels, bo as useFeedbackRenderDate, bp as useFeedbackStatusLabels, bq as useFeedbackStatusUndo, br as useFeedbackToastLabels, bs as visibleFeedbackStatuses } from './delete-account-setting-Dy4kJgUm.js';
+export { C as ChatComposer, a as ChatComposerHandle, b as ChatComposerLabels, c as ChatComposerProps, d as ChatComposerSlotContext, D as DEFAULT_ATTACHMENT_ACCEPT, e as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, f as DEFAULT_FEEDBACK_CATEGORY_LABELS, g as DEFAULT_FEEDBACK_COMPOSER_LABELS, h as DEFAULT_FEEDBACK_CONTEXT_LABELS, i as DEFAULT_FEEDBACK_DETAIL_LABELS, j as DEFAULT_FEEDBACK_DIALOG_LABELS, k as DEFAULT_FEEDBACK_MENU_LABELS, l as DEFAULT_FEEDBACK_PAGE_LABELS, m as DEFAULT_FEEDBACK_STATUS_LABELS, n as DEFAULT_FEEDBACK_THREAD_LABELS, o as DEFAULT_FEEDBACK_TOAST_LABELS, p as DEFAULT_MAX_ATTACHMENTS, q as DEFAULT_MAX_ATTACHMENT_BYTES, F as FEEDBACK_ATTACHMENT_ACCEPT, r as FEEDBACK_AUTHOR_EDITABLE_STATUSES, s as FEEDBACK_AWAITING_STATUSES, t as FEEDBACK_CATEGORY_META, u as FEEDBACK_CATEGORY_ORDER, v as FEEDBACK_PICKABLE_CATEGORIES, w as FEEDBACK_REWORKABLE_STATUSES, x as FEEDBACK_STATUS_META, y as FEEDBACK_STATUS_ORDER, z as FEEDBACK_UNDO_DURATION, A as FeedbackAttachmentError, B as FeedbackAttachmentErrorInfo, E as FeedbackAttachmentField, G as FeedbackAttachmentFieldLabels, H as FeedbackAttachmentFieldMultipleProps, I as FeedbackAttachmentFieldProps, J as FeedbackAttachmentFieldRefsProps, K as FeedbackAttachmentFieldSingleProps, L as FeedbackAttachmentLabels, M as FeedbackAttachmentRef, N as FeedbackAttachmentRefsError, O as FeedbackAwaitingToggle, P as FeedbackAwaitingToggleProps, Q as FeedbackCategory, R as FeedbackCategoryBadge, S as FeedbackCategoryLabels, T as FeedbackCategoryOption, U as FeedbackColumnsOptions, V as FeedbackComposer, W as FeedbackComposerAttachment, X as FeedbackComposerHandle, Y as FeedbackComposerLabels, Z as FeedbackComposerProps, _ as FeedbackComposerSlotContext, $ as FeedbackContext, a0 as FeedbackContextBox, a1 as FeedbackContextBoxProps, a2 as FeedbackContextInput, a3 as FeedbackContextLabels, a4 as FeedbackDetail, a5 as FeedbackDetailLabels, a6 as FeedbackDetailPatch, a7 as FeedbackDetailSection, a8 as FeedbackDetailUpdate, a9 as FeedbackDialog, aa as FeedbackDialogLabels, ab as FeedbackDialogMultipleProps, ac as FeedbackDialogProps, ad as FeedbackDialogSingleProps, ae as FeedbackDialogTextLabels, af as FeedbackEmptyState, ag as FeedbackEmptyStateProps, ah as FeedbackEnvironment, ai as FeedbackMenu, aj as FeedbackMenuLabels, ak as FeedbackMenuProps, al as FeedbackMobileCard, am as FeedbackMobileCardProps, an as FeedbackMultipleSubmission, ao as FeedbackNoteAttachment, ap as FeedbackNoteEditor, aq as FeedbackPageLabels, ar as FeedbackProse, as as FeedbackRecord, at as FeedbackRenderDate, au as FeedbackReworkSection, av as FeedbackReworkSectionProps, aw as FeedbackRowAccess, ax as FeedbackRowDetail, ay as FeedbackRowDetailProps, az as FeedbackStatus, aA as FeedbackStatusBadge, aB as FeedbackStatusChange, aC as FeedbackStatusLabels, aD as FeedbackStatusMutate, aE as FeedbackStatusPatch, aF as FeedbackStatusRow, aG as FeedbackStatusTransitions, aH as FeedbackStatusUndoOptions, aI as FeedbackSubject, aJ as FeedbackSubjectProps, aK as FeedbackSubmission, aL as FeedbackSubmitHint, aM as FeedbackSubmitter, aN as FeedbackTableRow, aO as FeedbackThread, aP as FeedbackThreadAttachment, aQ as FeedbackThreadEvent, aR as FeedbackThreadItem, aS as FeedbackThreadLabels, aT as FeedbackThreadMessage, aU as FeedbackThreadProps, aV as FeedbackToastLabels, aW as FeedbackUpload, aX as UseFeedbackColumnsOptions, aY as appendRework, aZ as attachmentName, a_ as feedbackAttachmentLine, a$ as feedbackAttachmentUrls, b0 as feedbackCategoryRank, b1 as feedbackColumns, b2 as feedbackContext, b3 as feedbackEnvironment, b4 as feedbackMobileGroupBy, b5 as feedbackPageHref, b6 as feedbackPagePath, b7 as feedbackPageUrl, b8 as feedbackRowAccess, b9 as feedbackSubmitter, ba as feedbackSubmitterEmail, bb as isFeedbackAwaiting, bc as isImageAttachment, bd as nextFeedbackStatus, be as pastedName, bf as replaceDescription, bg as reworkCount, bh as selectableFeedbackStatuses, bi as splitBodyAttachments, bj as splitDescription, bk as useFeedbackCategoryLabels, bl as useFeedbackColumns, bm as useFeedbackDetailLabels, bn as useFeedbackPageLabels, bo as useFeedbackRenderDate, bp as useFeedbackStatusLabels, bq as useFeedbackStatusUndo, br as useFeedbackToastLabels, bs as visibleFeedbackStatuses } from './delete-account-setting-DAgGBrbn.js';
 export { DEFAULT_FEEDBACK_SWIPE, FEEDBACK_SWIPE_ACTIONS, FeedbackSwipeAction, FeedbackSwipeBinding, FeedbackSwipeOptions, feedbackSwipePlan } from './feedback/feedback-swipe.js';
 export { CaptureAppScreenshotOptions, captureAppScreenshot } from './feedback/feedback-capture.js';
 export { FeedbackCreatePayload, FeedbackSubmit, UseFeedbackSubmitOptions, useFeedbackSubmit } from './feedback/feedback-submit.js';
@@ -7,16 +7,21 @@ import 'react';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
-import './data-table-labels-kpAAVi6g.js';
+import './data-table-labels-BJ5JE_X2.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
+import './components/status-dot.js';
+import './components/progress-bar.js';
+import './components/signed-amount.js';
+import './components/stat-tile.js';
+import './components/chip.js';
+import 'lucide-react';
+import './components/field-parts.js';
+import './components/write-lock.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
 import './components/popover.js';
 import './hooks/use-breakpoint.js';
-import './components/chip.js';
-import 'lucide-react';
-import './components/field-parts.js';
 import './components/field-sync.js';
 import './wizard/types.js';
 import './tour/tour.js';
@@ -28,7 +33,6 @@ import './components/page-contents.js';
 import './components/series-chart-labels.js';
 import './components/pie-chart-labels.js';
 import './components/sparkline.js';
-import './components/stat-tile.js';
 import './components/signature-pad.js';
 import './components/password-strength.js';
 import './components/swatch-picker.js';
@@ -40,9 +44,6 @@ import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
 import './components/user-avatar.js';
 import './lib/person-name.js';
-import './components/status-dot.js';
-import './components/progress-bar.js';
-import './components/signed-amount.js';
 import './shell/topbar-action-menu.js';
 import './components/menu-item.js';
 import './components/floating-panel.js';
@@ -58,7 +59,6 @@ import './components/error-boundary.js';
 import './components/authed-image.js';
 import './components/image-grid.js';
 import './components/lightbox.js';
-import './components/write-lock.js';
 import './auth/sign-in-form.js';
 import './landing/access.js';
 import './landing/landing-labels.js';
@@ -85,6 +85,7 @@ import './admin/admin-parts.js';
 import './admin/admin-action-log.js';
 import './settings/settings-labels.js';
 import './demo/demo-labels.js';
+import './i18n/plurals.js';
 import './components/appearance-labels.js';
 import './theme/contrast.js';
 import './theme/text-size.js';

package/dist/hooks/use-anchored-panel.d.ts

@@ -18,6 +18,13 @@ import { AnchorRect } from './use-anchored-rect.js';
 interface ViewportBox {
     top: number;
     height: number;
+    /**
+     * The height of the LAYOUT viewport itself, which `position: fixed`'s `bottom` is
+     * measured from. Only {@link anchoredPanelPlacement} reads it, for a flipped panel's
+     * `bottom`. Defaults to `top + height`: the two are the same box whenever no keyboard
+     * and no zoom shrink the visible region.
+     */
+    layoutHeight?: number;
 }
 interface KeyboardInsetOptions {
     /** The smallest inset that counts as a keyboard. Default 100 px. */
@@ -52,11 +59,24 @@ interface AnchoredPanelOptions {
      *  In px at Normal, scaled likewise. */
     minHeight?: number;
 }
+/**
+ * `top` and `bottom` are the two edges of a panel exactly `maxHeight` tall. A panel is
+ * sized by its content and `maxHeight` only caps it, so apply the edge on the trigger's
+ * side, the one that holds whatever the height: `top` while the panel is below,
+ * `bottom` (and no `top`) once it is flipped `above`.
+ */
 interface AnchoredPanel {
     /** The trigger's rect, or null while closed/unmeasured. */
     rect: AnchorRect | null;
-    /** Viewport-space `top` for the panel. */
+    /** Viewport-space `top` for the panel — the one to apply while it is below. Flipped,
+     *  it is where a FULL-height panel's top would be, and a three-row list placed by it
+     *  floated far above its field (keksdose K1, live #401); place that one by `bottom`. */
     top: number;
+    /** CSS `bottom` for a `position: fixed` panel: the distance from the layout
+     *  viewport's bottom edge up to the panel's. The one to apply once it is flipped
+     *  `above`: it keeps the panel's foot `gap` above the trigger however short its
+     *  content, and while a filtered list shrinks or grows under the user's typing. */
+    bottom: number;
     /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */
     maxHeight: number;
     /** Whether the panel was flipped above the trigger. */
@@ -76,16 +96,18 @@ interface AnchoredPanel {
  * returned `maxHeight` is what makes the flip sufficient rather than merely different:
  * without it a tall panel placed above just runs off the top instead of the bottom.
  *
+ * A flipped panel hangs from its BOTTOM edge, `gap` above the trigger, and is placed by
+ * `bottom` (keksdose K1, live #401). It used to be placed by a `top` worked out as
+ * though the panel were `maxHeight` tall, and a panel is only as tall as its content:
+ * a three-row address list under a 256 px cap sat ~176 px above its field, on a phone
+ * with the keyboard up. Only when even the {@link FLOOR} does not fit above does that
+ * edge give way, as `top` always did, so the panel's head (a search box, often) stays
+ * on screen rather than above it.
+ *
  * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has
  * no test runner of its own, so this is exercised from the consuming app.
  */
 declare function anchoredPanelPlacement(rect: Pick<AnchorRect, "top" | "bottom">, viewport: ViewportBox, { gap, margin, preferredHeight, minHeight }?: AnchoredPanelOptions): Omit<AnchoredPanel, "rect">;
-/**
- * Where to put a panel anchored under `ref`, tracking the visible viewport.
- *
- * Callers own horizontal placement — the pickers align to the trigger's left edge, the
- * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.
- */
 /**
  * The region actually on screen, tracked while `active` (Keksdose live #328).
  *
@@ -108,6 +130,14 @@ declare function anchoredPanelPlacement(rect: Pick<AnchorRect, "top" | "bottom">
  * sheet keeps its static full-screen box, which the reader can pan to like the page.
  */
 declare function useVisualViewport(active: boolean): ViewportBox | null;
+/**
+ * Where to put a panel anchored under `ref`, tracking the visible viewport.
+ *
+ * Callers own horizontal placement — the pickers align to the trigger's left edge, the
+ * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.
+ * Vertically, apply `top` while the panel is below and `bottom` (with no `top`) once it
+ * is `above`; see {@link AnchoredPanel}.
+ */
 declare function useAnchoredPanel<T extends HTMLElement>(ref: RefObject<T | null>, open: boolean, options?: AnchoredPanelOptions): AnchoredPanel;
 
 export { type AnchoredPanel, type AnchoredPanelOptions, type KeyboardInsetOptions, type ViewportBox, anchoredPanelPlacement, readKeyboardInset, useAnchoredPanel, useVisualViewport };

package/dist/hooks/use-anchored-panel.js

@@ -16,7 +16,8 @@ function readKeyboardInset({ minimum = MIN_KEYBOARD_PX } = {}) {
 function readViewport() {
   if (typeof window === "undefined") return { top: 0, height: 0 };
   const vv = window.visualViewport;
-  return vv ? { top: vv.offsetTop, height: vv.height } : { top: 0, height: window.innerHeight };
+  const layoutHeight = window.innerHeight;
+  return vv ? { top: vv.offsetTop, height: vv.height, layoutHeight } : { top: 0, height: window.innerHeight, layoutHeight };
 }
 const FLOOR = 96;
 const FLIP_GAIN = 48;
@@ -28,11 +29,9 @@ function anchoredPanelPlacement(rect, viewport, { gap = 4, margin = 8, preferred
   const above = spaceAbove > spaceBelow && (spaceBelow < minHeight || spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN));
   const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);
   const maxHeight = Math.min(preferredHeight, space);
-  return {
-    top: above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap,
-    maxHeight,
-    above
-  };
+  const top = above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap;
+  const layoutHeight = viewport.layoutHeight ?? viewport.top + viewport.height;
+  return { top, bottom: layoutHeight - (top + maxHeight), maxHeight, above };
 }
 function useVisualViewport(active) {
   const [box, setBox] = useState(null);
@@ -78,7 +77,7 @@ function useAnchoredPanel(ref, open, options = {}) {
     };
   }, [open]);
   if (!rect) {
-    return { rect: null, top: 0, maxHeight: preferredHeight, above: false };
+    return { rect: null, top: 0, bottom: 0, maxHeight: preferredHeight, above: false };
   }
   return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };
 }

package/dist/hooks/use-anchored-panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-anchored-panel.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\nimport { useAnchoredRect, type AnchorRect } from \"./use-anchored-rect\";\nimport { useTextSize } from \"../theme/text-size\";\n\n/**\n * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.\n *\n * The problem it solves (feedback #135): on a phone, opening a picker focuses its\n * search box, the on-screen keyboard slides up, and a panel pinned below a trigger in\n * the lower half of the screen ends up entirely behind that keyboard — with nothing\n * the user can do about it, because `position: fixed` does not scroll.\n *\n * The keyboard is invisible to the usual measurements: on Android Chrome the LAYOUT\n * viewport (`window.innerHeight`, and the origin `getBoundingClientRect` and\n * `position: fixed` are relative to) does not shrink when it opens. Only\n * `visualViewport` reports the region actually on screen, so that is what this reads.\n */\n\n/** The on-screen region, in layout-viewport coordinates. */\nexport interface ViewportBox {\n  top: number;\n  height: number;\n}\n\n/**\n * Whether the page is pinch-zoomed (docs/text-size-harmonization.md §10.2). A zoom\n * shrinks `visualViewport.height` exactly like an on-screen keyboard does, so every\n * reader below must tell the two apart — and while zoomed, the answer is \"no keyboard\":\n * following a zoomed viewport would drag a pinned row on every pan, magnified, and the\n * browser already scrolls a focused field into view. The epsilon absorbs a scale of\n * 1.0000001 that some engines report at rest.\n */\nfunction isZoomed(vv: VisualViewport): boolean {\n  return vv.scale > 1.001;\n}\n\n/** Below this the \"keyboard\" is rounding noise or a browser UI strip — `innerHeight` and\n *  `visualViewport.height` routinely disagree by a pixel or two — and nothing should move\n *  (keksdose's `MIN_KEYBOARD_PX`). */\nconst MIN_KEYBOARD_PX = 100;\n\nexport interface KeyboardInsetOptions {\n  /** The smallest inset that counts as a keyboard. Default 100 px. */\n  minimum?: number;\n}\n\n/**\n * How many CSS px at the bottom of the LAYOUT viewport the on-screen keyboard covers, now\n * — the one guarded reader (§10.2), so the apps' copies go (keksdose's\n * `use-keyboard-inset.ts`):\n *\n * - 0 while the page is pinch-zoomed (`visualViewport.scale > 1`), where a smaller visual\n *   viewport is the zoom, not a keyboard;\n * - 0 below `minimum` (100 px), which is noise;\n * - 0 without `visualViewport` (SSR, jsdom, an old browser) and under\n *   `interactive-widget=resizes-content`, where `bottom: 0` already lands above the\n *   keyboard.\n *\n * Read it on `visualViewport`'s `resize` and `scroll` events (window `resize` as the\n * fallback); a bottom-anchored control lifts itself by the result.\n */\nexport function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOptions = {}): number {\n  if (typeof window === \"undefined\") return 0;\n  const vv = window.visualViewport;\n  if (!vv || isZoomed(vv)) return 0;\n  const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);\n  return inset >= minimum ? inset : 0;\n}\n\nfunction readViewport(): ViewportBox {\n  if (typeof window === \"undefined\") return { top: 0, height: 0 };\n  const vv = window.visualViewport;\n  // offsetTop, not 0: with the keyboard up the user can also pan the visual viewport\n  // within the layout viewport, which shifts where \"visible\" starts.\n  return vv ? { top: vv.offsetTop, height: vv.height } : { top: 0, height: window.innerHeight };\n}\n\nexport interface AnchoredPanelOptions {\n  /** Space between trigger and panel. */\n  gap?: number;\n  /** Space kept clear at the viewport edges. */\n  margin?: number;\n  /** The height the panel would like, when there is room. In px at Normal text size:\n   *  {@link useAnchoredPanel} multiplies it by the size's scale, since what a panel\n   *  holds is rows of text (0.32, docs/text-size-harmonization.md §3.2). */\n  preferredHeight?: number;\n  /** Below this, the space under the trigger counts as unusable and a flip is considered.\n   *  In px at Normal, scaled likewise. */\n  minHeight?: number;\n}\n\nexport interface AnchoredPanel {\n  /** The trigger's rect, or null while closed/unmeasured. */\n  rect: AnchorRect | null;\n  /** Viewport-space `top` for the panel. */\n  top: number;\n  /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */\n  maxHeight: number;\n  /** Whether the panel was flipped above the trigger. */\n  above: boolean;\n}\n\n/** Absolute floor: below this a list is useless, so overflow the margin instead. */\nconst FLOOR = 96;\n\n/** How much more room above must offer, when neither side fits the preferred height,\n *  before the panel changes sides — so it never jumps for a few pixels' gain. */\nconst FLIP_GAIN = 48;\n\n/**\n * The pure half of {@link useAnchoredPanel}: where a panel goes, given the trigger's\n * rect and the region actually on screen.\n *\n * Prefers below the trigger — the conventional direction, and the one that keeps the\n * trigger's own value visible — whenever the panel's preferred height fits there. When it\n * does not, the panel opens above if the full height fits there, or if above is clearly\n * roomier (by {@link FLIP_GAIN}); below an unusable `minHeight` it flips to any roomier\n * side, as before. It used to flip only below `minHeight`, so a select with 160–319 px\n * under it opened downward as a cramped list with 600 px free above (keksdose live #384,\n * the currency select of the new-budget form near the bottom of the screen). The\n * returned `maxHeight` is what makes the flip sufficient rather than merely different:\n * without it a tall panel placed above just runs off the top instead of the bottom.\n *\n * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has\n * no test runner of its own, so this is exercised from the consuming app.\n */\nexport function anchoredPanelPlacement(\n  rect: Pick<AnchorRect, \"top\" | \"bottom\">,\n  viewport: ViewportBox,\n  { gap = 4, margin = 8, preferredHeight = 320, minHeight = 160 }: AnchoredPanelOptions = {},\n): Omit<AnchoredPanel, \"rect\"> {\n  const viewTop = viewport.top + margin;\n  const viewBottom = viewport.top + viewport.height - margin;\n  const spaceBelow = viewBottom - (rect.bottom + gap);\n  const spaceAbove = rect.top - gap - viewTop;\n  const above =\n    spaceAbove > spaceBelow &&\n    (spaceBelow < minHeight ||\n      (spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN)));\n  const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);\n  const maxHeight = Math.min(preferredHeight, space);\n  return {\n    top: above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap,\n    maxHeight,\n    above,\n  };\n}\n\n/**\n * Where to put a panel anchored under `ref`, tracking the visible viewport.\n *\n * Callers own horizontal placement — the pickers align to the trigger's left edge, the\n * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.\n */\n/**\n * The region actually on screen, tracked while `active` (Keksdose live #328).\n *\n * The same measurement {@link useAnchoredPanel} caps a dropdown with, for the callers\n * that need the box itself rather than a placement: a FULL-SCREEN sheet cannot use\n * `inset-0`, because on Android the on-screen keyboard shrinks only the VISUAL\n * viewport — `inset-0` still spans the whole screen, so the bottom of the sheet, and\n * the end of whatever list is scrolling inside it, live behind the keyboard where no\n * gesture reaches them.\n *\n * Returns `null` where there is nothing to correct: no `visualViewport` (jsdom, SSR,\n * older browsers) or no keyboard taking a bite out of it. A caller then keeps its\n * static layout, which is right at every width where this does not apply — and is why\n * the desktop and the test suite see exactly the markup they saw before.\n *\n * Also `null` while the page is pinch-zoomed (0.32, §10.2), with the guard\n * {@link readKeyboardInset} uses. A zoom shrinks the visual viewport like a keyboard,\n * and following it gave PickerSheet the zoomed region's top and height but the page's\n * full width — its close button sat off screen (kastlan, Kurvenschmiede). Zoomed, the\n * sheet keeps its static full-screen box, which the reader can pan to like the page.\n */\nexport function useVisualViewport(active: boolean): ViewportBox | null {\n  const [box, setBox] = useState<ViewportBox | null>(null);\n\n  useLayoutEffect(() => {\n    if (!active) return;\n    const update = () => {\n      const vv = typeof window === \"undefined\" ? undefined : window.visualViewport;\n      // The 1px slack is not superstition: `visualViewport.height` is fractional on a\n      // device-pixel-ratio that is not an integer (his phone reports 1.25), so a\n      // strict comparison would report a \"keyboard\" of 0.4px on every phone and pin\n      // a height where none was needed.\n      setBox(\n        vv && !isZoomed(vv) && vv.height < window.innerHeight - 1 ? { top: vv.offsetTop, height: vv.height } : null,\n      );\n    };\n    update();\n    const vv = window.visualViewport;\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [active]);\n\n  return box;\n}\n\nexport function useAnchoredPanel<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  open: boolean,\n  options: AnchoredPanelOptions = {},\n): AnchoredPanel {\n  const rect = useAnchoredRect(ref, open);\n  const [viewport, setViewport] = useState<ViewportBox>(readViewport);\n  // A panel of rows wants room for the same number of rows at every text size; the gap\n  // and the edge margin are not text and stay px.\n  const { scale } = useTextSize();\n  const preferredHeight = (options.preferredHeight ?? 320) * scale;\n  const minHeight = (options.minHeight ?? 160) * scale;\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => setViewport(readViewport());\n    update();\n    const vv = window.visualViewport;\n    // The visualViewport events are the ones that fire when the keyboard opens;\n    // window.resize is the fallback for browsers without the API (and for a genuine\n    // window resize on desktop).\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  if (!rect) {\n    return { rect: null, top: 0, maxHeight: preferredHeight, above: false };\n  }\n  return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };\n}\n"],"mappings":"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","names":["vv"]}
+{"version":3,"sources":["../../src/hooks/use-anchored-panel.ts"],"sourcesContent":["import { useLayoutEffect, useState } from \"react\";\nimport type { RefObject } from \"react\";\nimport { useAnchoredRect, type AnchorRect } from \"./use-anchored-rect\";\nimport { useTextSize } from \"../theme/text-size\";\n\n/**\n * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.\n *\n * The problem it solves (feedback #135): on a phone, opening a picker focuses its\n * search box, the on-screen keyboard slides up, and a panel pinned below a trigger in\n * the lower half of the screen ends up entirely behind that keyboard — with nothing\n * the user can do about it, because `position: fixed` does not scroll.\n *\n * The keyboard is invisible to the usual measurements: on Android Chrome the LAYOUT\n * viewport (`window.innerHeight`, and the origin `getBoundingClientRect` and\n * `position: fixed` are relative to) does not shrink when it opens. Only\n * `visualViewport` reports the region actually on screen, so that is what this reads.\n */\n\n/** The on-screen region, in layout-viewport coordinates. */\nexport interface ViewportBox {\n  top: number;\n  height: number;\n  /**\n   * The height of the LAYOUT viewport itself, which `position: fixed`'s `bottom` is\n   * measured from. Only {@link anchoredPanelPlacement} reads it, for a flipped panel's\n   * `bottom`. Defaults to `top + height`: the two are the same box whenever no keyboard\n   * and no zoom shrink the visible region.\n   */\n  layoutHeight?: number;\n}\n\n/**\n * Whether the page is pinch-zoomed (docs/text-size-harmonization.md §10.2). A zoom\n * shrinks `visualViewport.height` exactly like an on-screen keyboard does, so every\n * reader below must tell the two apart — and while zoomed, the answer is \"no keyboard\":\n * following a zoomed viewport would drag a pinned row on every pan, magnified, and the\n * browser already scrolls a focused field into view. The epsilon absorbs a scale of\n * 1.0000001 that some engines report at rest.\n */\nfunction isZoomed(vv: VisualViewport): boolean {\n  return vv.scale > 1.001;\n}\n\n/** Below this the \"keyboard\" is rounding noise or a browser UI strip — `innerHeight` and\n *  `visualViewport.height` routinely disagree by a pixel or two — and nothing should move\n *  (keksdose's `MIN_KEYBOARD_PX`). */\nconst MIN_KEYBOARD_PX = 100;\n\nexport interface KeyboardInsetOptions {\n  /** The smallest inset that counts as a keyboard. Default 100 px. */\n  minimum?: number;\n}\n\n/**\n * How many CSS px at the bottom of the LAYOUT viewport the on-screen keyboard covers, now\n * — the one guarded reader (§10.2), so the apps' copies go (keksdose's\n * `use-keyboard-inset.ts`):\n *\n * - 0 while the page is pinch-zoomed (`visualViewport.scale > 1`), where a smaller visual\n *   viewport is the zoom, not a keyboard;\n * - 0 below `minimum` (100 px), which is noise;\n * - 0 without `visualViewport` (SSR, jsdom, an old browser) and under\n *   `interactive-widget=resizes-content`, where `bottom: 0` already lands above the\n *   keyboard.\n *\n * Read it on `visualViewport`'s `resize` and `scroll` events (window `resize` as the\n * fallback); a bottom-anchored control lifts itself by the result.\n */\nexport function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOptions = {}): number {\n  if (typeof window === \"undefined\") return 0;\n  const vv = window.visualViewport;\n  if (!vv || isZoomed(vv)) return 0;\n  const inset = Math.round(window.innerHeight - vv.height - vv.offsetTop);\n  return inset >= minimum ? inset : 0;\n}\n\nfunction readViewport(): ViewportBox {\n  if (typeof window === \"undefined\") return { top: 0, height: 0 };\n  const vv = window.visualViewport;\n  // The layout viewport's height is `innerHeight`, the reference `readKeyboardInset`\n  // measures the keyboard against. The keyboard leaves it alone (it shrinks only the\n  // VISUAL viewport; under `interactive-widget=resizes-content` it shrinks both, the\n  // fixed box with them), and it follows the mobile URL bar as it slides away, as a\n  // fixed box's `bottom` does. Not `documentElement.clientHeight`: on mobile Chrome and\n  // Safari that stays at the small, URL-bar-shown height, so with the bar scrolled away\n  // a flipped panel would sit that much too low, over its own field. `innerHeight`'s one\n  // error is a desktop page with a horizontal scrollbar, which it counts and the fixed\n  // box does not: the gap widens by the bar's thickness, and never closes.\n  const layoutHeight = window.innerHeight;\n  // offsetTop, not 0: with the keyboard up the user can also pan the visual viewport\n  // within the layout viewport, which shifts where \"visible\" starts.\n  return vv\n    ? { top: vv.offsetTop, height: vv.height, layoutHeight }\n    : { top: 0, height: window.innerHeight, layoutHeight };\n}\n\nexport interface AnchoredPanelOptions {\n  /** Space between trigger and panel. */\n  gap?: number;\n  /** Space kept clear at the viewport edges. */\n  margin?: number;\n  /** The height the panel would like, when there is room. In px at Normal text size:\n   *  {@link useAnchoredPanel} multiplies it by the size's scale, since what a panel\n   *  holds is rows of text (0.32, docs/text-size-harmonization.md §3.2). */\n  preferredHeight?: number;\n  /** Below this, the space under the trigger counts as unusable and a flip is considered.\n   *  In px at Normal, scaled likewise. */\n  minHeight?: number;\n}\n\n/**\n * `top` and `bottom` are the two edges of a panel exactly `maxHeight` tall. A panel is\n * sized by its content and `maxHeight` only caps it, so apply the edge on the trigger's\n * side, the one that holds whatever the height: `top` while the panel is below,\n * `bottom` (and no `top`) once it is flipped `above`.\n */\nexport interface AnchoredPanel {\n  /** The trigger's rect, or null while closed/unmeasured. */\n  rect: AnchorRect | null;\n  /** Viewport-space `top` for the panel — the one to apply while it is below. Flipped,\n   *  it is where a FULL-height panel's top would be, and a three-row list placed by it\n   *  floated far above its field (keksdose K1, live #401); place that one by `bottom`. */\n  top: number;\n  /** CSS `bottom` for a `position: fixed` panel: the distance from the layout\n   *  viewport's bottom edge up to the panel's. The one to apply once it is flipped\n   *  `above`: it keeps the panel's foot `gap` above the trigger however short its\n   *  content, and while a filtered list shrinks or grows under the user's typing. */\n  bottom: number;\n  /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */\n  maxHeight: number;\n  /** Whether the panel was flipped above the trigger. */\n  above: boolean;\n}\n\n/** Absolute floor: below this a list is useless, so overflow the margin instead. */\nconst FLOOR = 96;\n\n/** How much more room above must offer, when neither side fits the preferred height,\n *  before the panel changes sides — so it never jumps for a few pixels' gain. */\nconst FLIP_GAIN = 48;\n\n/**\n * The pure half of {@link useAnchoredPanel}: where a panel goes, given the trigger's\n * rect and the region actually on screen.\n *\n * Prefers below the trigger — the conventional direction, and the one that keeps the\n * trigger's own value visible — whenever the panel's preferred height fits there. When it\n * does not, the panel opens above if the full height fits there, or if above is clearly\n * roomier (by {@link FLIP_GAIN}); below an unusable `minHeight` it flips to any roomier\n * side, as before. It used to flip only below `minHeight`, so a select with 160–319 px\n * under it opened downward as a cramped list with 600 px free above (keksdose live #384,\n * the currency select of the new-budget form near the bottom of the screen). The\n * returned `maxHeight` is what makes the flip sufficient rather than merely different:\n * without it a tall panel placed above just runs off the top instead of the bottom.\n *\n * A flipped panel hangs from its BOTTOM edge, `gap` above the trigger, and is placed by\n * `bottom` (keksdose K1, live #401). It used to be placed by a `top` worked out as\n * though the panel were `maxHeight` tall, and a panel is only as tall as its content:\n * a three-row address list under a 256 px cap sat ~176 px above its field, on a phone\n * with the keyboard up. Only when even the {@link FLOOR} does not fit above does that\n * edge give way, as `top` always did, so the panel's head (a search box, often) stays\n * on screen rather than above it.\n *\n * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has\n * no test runner of its own, so this is exercised from the consuming app.\n */\nexport function anchoredPanelPlacement(\n  rect: Pick<AnchorRect, \"top\" | \"bottom\">,\n  viewport: ViewportBox,\n  { gap = 4, margin = 8, preferredHeight = 320, minHeight = 160 }: AnchoredPanelOptions = {},\n): Omit<AnchoredPanel, \"rect\"> {\n  const viewTop = viewport.top + margin;\n  const viewBottom = viewport.top + viewport.height - margin;\n  const spaceBelow = viewBottom - (rect.bottom + gap);\n  const spaceAbove = rect.top - gap - viewTop;\n  const above =\n    spaceAbove > spaceBelow &&\n    (spaceBelow < minHeight ||\n      (spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN)));\n  const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);\n  const maxHeight = Math.min(preferredHeight, space);\n  // Unchanged, for the apps that call the hook and apply it: the edge to use below, and\n  // a full-height panel's top above. In layout-viewport space, like the rect.\n  const top = above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap;\n  // `bottom` counts up from the LAYOUT viewport's bottom edge, not the visible region's:\n  // `position: fixed` is laid out in the layout viewport, which runs on behind the\n  // keyboard, exactly as the rect is measured in it. The keyboard, the pan and the zoom\n  // are already in `maxHeight`, which keeps the panel's top inside what is on screen.\n  const layoutHeight = viewport.layoutHeight ?? viewport.top + viewport.height;\n  return { top, bottom: layoutHeight - (top + maxHeight), maxHeight, above };\n}\n\n/**\n * The region actually on screen, tracked while `active` (Keksdose live #328).\n *\n * The same measurement {@link useAnchoredPanel} caps a dropdown with, for the callers\n * that need the box itself rather than a placement: a FULL-SCREEN sheet cannot use\n * `inset-0`, because on Android the on-screen keyboard shrinks only the VISUAL\n * viewport — `inset-0` still spans the whole screen, so the bottom of the sheet, and\n * the end of whatever list is scrolling inside it, live behind the keyboard where no\n * gesture reaches them.\n *\n * Returns `null` where there is nothing to correct: no `visualViewport` (jsdom, SSR,\n * older browsers) or no keyboard taking a bite out of it. A caller then keeps its\n * static layout, which is right at every width where this does not apply — and is why\n * the desktop and the test suite see exactly the markup they saw before.\n *\n * Also `null` while the page is pinch-zoomed (0.32, §10.2), with the guard\n * {@link readKeyboardInset} uses. A zoom shrinks the visual viewport like a keyboard,\n * and following it gave PickerSheet the zoomed region's top and height but the page's\n * full width — its close button sat off screen (kastlan, Kurvenschmiede). Zoomed, the\n * sheet keeps its static full-screen box, which the reader can pan to like the page.\n */\nexport function useVisualViewport(active: boolean): ViewportBox | null {\n  const [box, setBox] = useState<ViewportBox | null>(null);\n\n  useLayoutEffect(() => {\n    if (!active) return;\n    const update = () => {\n      const vv = typeof window === \"undefined\" ? undefined : window.visualViewport;\n      // The 1px slack is not superstition: `visualViewport.height` is fractional on a\n      // device-pixel-ratio that is not an integer (his phone reports 1.25), so a\n      // strict comparison would report a \"keyboard\" of 0.4px on every phone and pin\n      // a height where none was needed.\n      setBox(\n        vv && !isZoomed(vv) && vv.height < window.innerHeight - 1 ? { top: vv.offsetTop, height: vv.height } : null,\n      );\n    };\n    update();\n    const vv = window.visualViewport;\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [active]);\n\n  return box;\n}\n\n/**\n * Where to put a panel anchored under `ref`, tracking the visible viewport.\n *\n * Callers own horizontal placement — the pickers align to the trigger's left edge, the\n * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.\n * Vertically, apply `top` while the panel is below and `bottom` (with no `top`) once it\n * is `above`; see {@link AnchoredPanel}.\n */\nexport function useAnchoredPanel<T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  open: boolean,\n  options: AnchoredPanelOptions = {},\n): AnchoredPanel {\n  const rect = useAnchoredRect(ref, open);\n  const [viewport, setViewport] = useState<ViewportBox>(readViewport);\n  // A panel of rows wants room for the same number of rows at every text size; the gap\n  // and the edge margin are not text and stay px.\n  const { scale } = useTextSize();\n  const preferredHeight = (options.preferredHeight ?? 320) * scale;\n  const minHeight = (options.minHeight ?? 160) * scale;\n\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => setViewport(readViewport());\n    update();\n    const vv = window.visualViewport;\n    // The visualViewport events are the ones that fire when the keyboard opens;\n    // window.resize is the fallback for browsers without the API (and for a genuine\n    // window resize on desktop).\n    vv?.addEventListener(\"resize\", update);\n    vv?.addEventListener(\"scroll\", update);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      vv?.removeEventListener(\"resize\", update);\n      vv?.removeEventListener(\"scroll\", update);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  if (!rect) {\n    return { rect: null, top: 0, bottom: 0, maxHeight: preferredHeight, above: false };\n  }\n  return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };\n}\n"],"mappings":"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","names":["vv"]}

package/dist/hooks/use-file-drop.d.ts

@@ -1,18 +1,23 @@
 import { DragEvent, ReactElement } from 'react';
-import { fA as UseFilePickerOptions } from '../delete-account-setting-Dy4kJgUm.js';
+import { fM as UseFilePickerOptions } from '../delete-account-setting-DAgGBrbn.js';
 import '../components/tooltip.js';
 import './use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../components/stat-tile.js';
+import '../components/chip.js';
+import 'lucide-react';
+import '../components/field-parts.js';
+import '../components/write-lock.js';
 import '../components/mini-calendar.js';
 import '../components/calendar-heatmap.js';
 import '../components/popover.js';
 import './use-breakpoint.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
 import '../components/field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -24,7 +29,6 @@ import '../components/page-contents.js';
 import '../components/series-chart-labels.js';
 import '../components/pie-chart-labels.js';
 import '../components/sparkline.js';
-import '../components/stat-tile.js';
 import '../components/signature-pad.js';
 import '../components/password-strength.js';
 import '../components/swatch-picker.js';
@@ -36,9 +40,6 @@ import './use-search-param-state.js';
 import '../components/measured-grid.js';
 import '../components/user-avatar.js';
 import '../lib/person-name.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import '../components/menu-item.js';
 import '../components/floating-panel.js';
@@ -54,7 +55,6 @@ import '../components/error-boundary.js';
 import '../components/authed-image.js';
 import '../components/image-grid.js';
 import '../components/lightbox.js';
-import '../components/write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -81,6 +81,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../i18n/plurals.js';
 import '../components/appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';

package/dist/hooks/use-focus-trap.d.ts

@@ -8,6 +8,14 @@ interface FocusTrapOptions {
      * what `Modal` does and why: focusing the first FIELD pops the software keyboard on
      * a phone the moment a dialog opens, before the user has asked to type.
      * The container needs `tabIndex={-1}` for this to work.
+     *
+     * `"container"` and `"first"` both step aside when focus is ALREADY inside the
+     * container, on something other than the container itself. That is a child the app
+     * focused on purpose — an `autoFocus`, which React honours before this hook's effect
+     * runs — and the keyboard it brings up is the one the user was promised. Moving focus
+     * off it lost keksdose's create card its amount field the instant it got it, and on a
+     * phone the numpad sheet with it, which shows only while the field is focused (live
+     * #402). A function is the caller's explicit choice and is always followed.
      */
     initialFocus?: "container" | "first" | (() => HTMLElement | null);
 }

package/dist/hooks/use-focus-trap.js

@@ -1,18 +1,23 @@
 "use client";
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 const FOCUSABLE = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
 const TRAP_ATTR = "data-focus-trap";
+function focusedElement() {
+  return typeof document === "undefined" ? null : document.activeElement;
+}
 function useFocusTrap(containerRef, { active = true, restoreFocus = true, initialFocus = "container" } = {}) {
-  const optsRef = useRef({ restoreFocus, initialFocus });
-  useEffect(() => {
-    optsRef.current = { restoreFocus, initialFocus };
+  const optsRef = useRef({ active, restoreFocus, initialFocus });
+  useLayoutEffect(() => {
+    optsRef.current = { active, restoreFocus, initialFocus };
   });
+  const [opener, setOpener] = useState(void 0);
+  if (active && opener === void 0) setOpener(focusedElement());
+  else if (!active && opener !== void 0) setOpener(void 0);
   useEffect(() => {
     if (!active) return;
     const container = containerRef.current;
     if (!container) return;
     container.setAttribute(TRAP_ATTR, "");
-    const previouslyFocused = document.activeElement;
     const inNestedTrap = (node) => {
       if (!node) return false;
       const owner = node.closest(`[${TRAP_ATTR}]`);
@@ -25,12 +30,12 @@ function useFocusTrap(containerRef, { active = true, restoreFocus = true, initia
       (el) => !inNestedTrap(el)
     );
     const { initialFocus: how } = optsRef.current;
+    const focused = document.activeElement;
+    const childHasFocus = focused !== container && container.contains(focused);
     if (typeof how === "function") {
       (how() ?? container).focus();
-    } else if (how === "first") {
-      (tabbables()[0] ?? container).focus();
-    } else {
-      container.focus();
+    } else if (!childHasFocus) {
+      (how === "first" ? tabbables()[0] ?? container : container).focus();
     }
     const onKeyDown = (e) => {
       if (e.key !== "Tab") return;
@@ -56,10 +61,11 @@ function useFocusTrap(containerRef, { active = true, restoreFocus = true, initia
     return () => {
       container.removeEventListener("keydown", onKeyDown);
       container.removeAttribute(TRAP_ATTR);
+      if (container.isConnected && optsRef.current.active) return;
       if (!optsRef.current.restoreFocus) return;
-      if (previouslyFocused?.isConnected) previouslyFocused.focus?.();
+      if (opener?.isConnected) opener.focus?.();
     };
-  }, [active, containerRef]);
+  }, [active, containerRef, opener]);
 }
 export {
   useFocusTrap

package/dist/hooks/use-focus-trap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-focus-trap.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\n/**\n * Keep keyboard focus inside an open overlay, and give it back when it closes.\n *\n * Extracted from `Modal`, which was the ONLY component in this package that did any of\n * this. Every other overlay — the full-bleed dialog a phone's row editor opens, the\n * picker sheet, the numpad, the tour card — declared `role=\"dialog\" aria-modal=\"true\"`\n * and then left focus on the page behind it. That is the worst of the two possible\n * bugs: assistive technology hides the page because of `aria-modal`, while the user's\n * focus is still down there in the part that is now hidden, so Tab walks through\n * controls the screen reader refuses to describe.\n *\n * What this does beyond Modal's original copy:\n *\n *   - **Recomputes the tabbable list on every Tab**, not once when the overlay opens.\n *     These panels have conditionally-rendered contents — a search box that appears\n *     once options load, a \"clear\" button that exists only while a filter is set — and\n *     a list captured at open time traps focus against elements that have since gone.\n *   - **Guards the restore target.** The element focused before opening may have left\n *     the DOM by the time the overlay closes (the row that owned the button was\n *     filtered away). Calling `.focus()` on a detached node silently drops focus to\n *     `<body>`, which for a keyboard user means losing their place in the page\n *     entirely. When the target is gone, focus falls back to the nearest thing that\n *     still exists rather than to nothing.\n *   - **Nests.** An overlay can open another — a picker inside a dialog. Only the\n *     innermost trap handles a keystroke, and closing it hands control back to the one\n *     underneath. Innermost is decided by DOM containment rather than by mount order;\n *     see the note on `TRAP_ATTR` for why the obvious stack is wrong.\n *     `use-overlay-history.ts` reasons about the same nesting problem for the back\n *     button; this is the focus half of it.\n */\n\n/**\n * Tabbable descendants, in DOM order.\n *\n * Deliberately the same selector `Modal` used, rather than a more thorough one that\n * also walks `inert`, `visibility: hidden` and open `<details>`: this is the set that\n * has been in production across three apps, and widening it here would change which\n * element receives focus in overlays nobody asked me to change the behaviour of.\n */\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Marks a container whose trap is currently active.\n *\n * \"Which trap is innermost?\" is answered by DOM CONTAINMENT, not by mount order. The\n * obvious implementation — a module-level stack pushed in the effect — is wrong, and\n * wrong in a way that passes a casual reading: React runs CHILD effects before PARENT\n * effects, so a nested overlay pushes first and the outer one ends up on top of the\n * stack, claiming to be innermost. The outer trap then handles the keystroke and wraps\n * focus to its own first element, jumping the user out of the picker they had open.\n *\n * An attribute on the live DOM cannot disagree with the DOM.\n */\nconst TRAP_ATTR = \"data-focus-trap\";\n\nexport interface FocusTrapOptions {\n  /** Trap only while this is true. Mount-time `true` is the common case. */\n  active?: boolean;\n  /** Return focus to whatever had it before the trap engaged. Default `true`. */\n  restoreFocus?: boolean;\n  /**\n   * What to focus when the trap engages. Default is the container itself, which is\n   * what `Modal` does and why: focusing the first FIELD pops the software keyboard on\n   * a phone the moment a dialog opens, before the user has asked to type.\n   * The container needs `tabIndex={-1}` for this to work.\n   */\n  initialFocus?: \"container\" | \"first\" | (() => HTMLElement | null);\n}\n\nexport function useFocusTrap(\n  containerRef: React.RefObject<HTMLElement | null>,\n  { active = true, restoreFocus = true, initialFocus = \"container\" }: FocusTrapOptions = {},\n): void {\n  // Latest-ref so a caller passing an inline `initialFocus` thunk — which every caller\n  // will — does not tear the trap down and re-engage it on each render, stealing focus\n  // back to the top of the panel mid-interaction.\n  const optsRef = useRef({ restoreFocus, initialFocus });\n  useEffect(() => {\n    optsRef.current = { restoreFocus, initialFocus };\n  });\n\n  useEffect(() => {\n    if (!active) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.setAttribute(TRAP_ATTR, \"\");\n    const previouslyFocused = document.activeElement as HTMLElement | null;\n\n    /** Is `node` inside a trap nested within this one? */\n    const inNestedTrap = (node: Element | null) => {\n      if (!node) return false;\n      const owner = node.closest(`[${TRAP_ATTR}]`);\n      return owner !== null && owner !== container;\n    };\n\n    const tabbables = () =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        // A tabbable inside a NESTED open overlay belongs to that overlay's trap, not\n        // to this one — otherwise the outer list spans both panels and Tab from the\n        // inner panel's last control wraps to the OUTER panel's first.\n        (el) => !inNestedTrap(el),\n      );\n\n    const { initialFocus: how } = optsRef.current;\n    if (typeof how === \"function\") {\n      (how() ?? container).focus();\n    } else if (how === \"first\") {\n      (tabbables()[0] ?? container).focus();\n    } else {\n      container.focus();\n    }\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Tab\") return;\n      // Only the innermost trap acts. The event bubbles through every ancestor\n      // container, so without this an outer dialog and an inner picker both handle one\n      // Tab and fight over where focus lands.\n      if (inNestedTrap(document.activeElement)) return;\n\n      // Recomputed per keystroke — see the note at the top of this file.\n      const items = tabbables();\n      if (items.length === 0) {\n        e.preventDefault();\n        container.focus();\n        return;\n      }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const activeEl = document.activeElement;\n      if (e.shiftKey && (activeEl === first || activeEl === container)) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && activeEl === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    // On the container, not the document: a portalled child panel (an open dropdown\n    // rendered to <body>) is outside this subtree and manages its own focus, which is\n    // the behaviour Modal's comment describes and consumers already depend on.\n    container.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      container.removeEventListener(\"keydown\", onKeyDown);\n      container.removeAttribute(TRAP_ATTR);\n\n      if (!optsRef.current.restoreFocus) return;\n      // `isConnected` is the whole point: restoring to a node that has been removed\n      // sends focus to <body> and the user loses their place entirely. When the\n      // original is gone, leave focus where the browser put it rather than moving it\n      // somewhere arbitrary — a wrong guess is worse than no move.\n      if (previouslyFocused?.isConnected) previouslyFocused.focus?.();\n    };\n  }, [active, containerRef]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,cAAc;AAyClC,MAAM,YACJ;AAcF,MAAM,YAAY;AAgBX,SAAS,aACd,cACA,EAAE,SAAS,MAAM,eAAe,MAAM,eAAe,YAAY,IAAsB,CAAC,GAClF;AAIN,QAAM,UAAU,OAAO,EAAE,cAAc,aAAa,CAAC;AACrD,YAAU,MAAM;AACd,YAAQ,UAAU,EAAE,cAAc,aAAa;AAAA,EACjD,CAAC;AAED,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,cAAU,aAAa,WAAW,EAAE;AACpC,UAAM,oBAAoB,SAAS;AAGnC,UAAM,eAAe,CAAC,SAAyB;AAC7C,UAAI,CAAC,KAAM,QAAO;AAClB,YAAM,QAAQ,KAAK,QAAQ,IAAI,SAAS,GAAG;AAC3C,aAAO,UAAU,QAAQ,UAAU;AAAA,IACrC;AAEA,UAAM,YAAY,MAChB,MAAM,KAAK,UAAU,iBAA8B,SAAS,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,MAI7D,CAAC,OAAO,CAAC,aAAa,EAAE;AAAA,IAC1B;AAEF,UAAM,EAAE,cAAc,IAAI,IAAI,QAAQ;AACtC,QAAI,OAAO,QAAQ,YAAY;AAC7B,OAAC,IAAI,KAAK,WAAW,MAAM;AAAA,IAC7B,WAAW,QAAQ,SAAS;AAC1B,OAAC,UAAU,EAAE,CAAC,KAAK,WAAW,MAAM;AAAA,IACtC,OAAO;AACL,gBAAU,MAAM;AAAA,IAClB;AAEA,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,MAAO;AAIrB,UAAI,aAAa,SAAS,aAAa,EAAG;AAG1C,YAAM,QAAQ,UAAU;AACxB,UAAI,MAAM,WAAW,GAAG;AACtB,UAAE,eAAe;AACjB,kBAAU,MAAM;AAChB;AAAA,MACF;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,YAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AACnC,YAAM,WAAW,SAAS;AAC1B,UAAI,EAAE,aAAa,aAAa,SAAS,aAAa,YAAY;AAChE,UAAE,eAAe;AACjB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,EAAE,YAAY,aAAa,MAAM;AAC3C,UAAE,eAAe;AACjB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAKA,cAAU,iBAAiB,WAAW,SAAS;AAE/C,WAAO,MAAM;AACX,gBAAU,oBAAoB,WAAW,SAAS;AAClD,gBAAU,gBAAgB,SAAS;AAEnC,UAAI,CAAC,QAAQ,QAAQ,aAAc;AAKnC,UAAI,mBAAmB,YAAa,mBAAkB,QAAQ;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAC3B;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-focus-trap.ts"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState } from \"react\";\n\n/**\n * Keep keyboard focus inside an open overlay, and give it back when it closes.\n *\n * Extracted from `Modal`, which was the ONLY component in this package that did any of\n * this. Every other overlay — the full-bleed dialog a phone's row editor opens, the\n * picker sheet, the numpad, the tour card — declared `role=\"dialog\" aria-modal=\"true\"`\n * and then left focus on the page behind it. That is the worst of the two possible\n * bugs: assistive technology hides the page because of `aria-modal`, while the user's\n * focus is still down there in the part that is now hidden, so Tab walks through\n * controls the screen reader refuses to describe.\n *\n * What this does beyond Modal's original copy:\n *\n *   - **Recomputes the tabbable list on every Tab**, not once when the overlay opens.\n *     These panels have conditionally-rendered contents — a search box that appears\n *     once options load, a \"clear\" button that exists only while a filter is set — and\n *     a list captured at open time traps focus against elements that have since gone.\n *   - **Guards the restore target.** The element focused before opening may have left\n *     the DOM by the time the overlay closes (the row that owned the button was\n *     filtered away). Calling `.focus()` on a detached node silently drops focus to\n *     `<body>`, which for a keyboard user means losing their place in the page\n *     entirely. When the target is gone, focus falls back to the nearest thing that\n *     still exists rather than to nothing.\n *   - **Leaves an app's own autofocus alone** (0.33.1). React honours a child's\n *     `autoFocus` while it commits, and this hook's effect runs AFTER that commit, so\n *     focusing the container there took focus straight back off the field the app had\n *     asked for. See `initialFocus`.\n *   - **Nests.** An overlay can open another — a picker inside a dialog. Only the\n *     innermost trap handles a keystroke, and closing it hands control back to the one\n *     underneath. Innermost is decided by DOM containment rather than by mount order;\n *     see the note on `TRAP_ATTR` for why the obvious stack is wrong.\n *     `use-overlay-history.ts` reasons about the same nesting problem for the back\n *     button; this is the focus half of it.\n */\n\n/**\n * Tabbable descendants, in DOM order.\n *\n * Deliberately the same selector `Modal` used, rather than a more thorough one that\n * also walks `inert`, `visibility: hidden` and open `<details>`: this is the set that\n * has been in production across three apps, and widening it here would change which\n * element receives focus in overlays nobody asked me to change the behaviour of.\n */\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Marks a container whose trap is currently active.\n *\n * \"Which trap is innermost?\" is answered by DOM CONTAINMENT, not by mount order. The\n * obvious implementation — a module-level stack pushed in the effect — is wrong, and\n * wrong in a way that passes a casual reading: React runs CHILD effects before PARENT\n * effects, so a nested overlay pushes first and the outer one ends up on top of the\n * stack, claiming to be innermost. The outer trap then handles the keystroke and wraps\n * focus to its own first element, jumping the user out of the picker they had open.\n *\n * An attribute on the live DOM cannot disagree with the DOM.\n */\nconst TRAP_ATTR = \"data-focus-trap\";\n\nexport interface FocusTrapOptions {\n  /** Trap only while this is true. Mount-time `true` is the common case. */\n  active?: boolean;\n  /** Return focus to whatever had it before the trap engaged. Default `true`. */\n  restoreFocus?: boolean;\n  /**\n   * What to focus when the trap engages. Default is the container itself, which is\n   * what `Modal` does and why: focusing the first FIELD pops the software keyboard on\n   * a phone the moment a dialog opens, before the user has asked to type.\n   * The container needs `tabIndex={-1}` for this to work.\n   *\n   * `\"container\"` and `\"first\"` both step aside when focus is ALREADY inside the\n   * container, on something other than the container itself. That is a child the app\n   * focused on purpose — an `autoFocus`, which React honours before this hook's effect\n   * runs — and the keyboard it brings up is the one the user was promised. Moving focus\n   * off it lost keksdose's create card its amount field the instant it got it, and on a\n   * phone the numpad sheet with it, which shows only while the field is focused (live\n   * #402). A function is the caller's explicit choice and is always followed.\n   */\n  initialFocus?: \"container\" | \"first\" | (() => HTMLElement | null);\n}\n\n/** Whatever has focus right now; nothing on the server, where there is no document. */\nfunction focusedElement(): Element | null {\n  return typeof document === \"undefined\" ? null : document.activeElement;\n}\n\nexport function useFocusTrap(\n  containerRef: React.RefObject<HTMLElement | null>,\n  { active = true, restoreFocus = true, initialFocus = \"container\" }: FocusTrapOptions = {},\n): void {\n  // Latest-ref so a caller passing an inline `initialFocus` thunk — which every caller\n  // will — does not tear the trap down and re-engage it on each render, stealing focus\n  // back to the top of the panel mid-interaction. Written in a LAYOUT effect so that\n  // the trap's cleanup, which runs after the layout effects of the same commit, reads\n  // this render's `active` rather than the last one's — see the cleanup for why.\n  const optsRef = useRef({ active, restoreFocus, initialFocus });\n  useLayoutEffect(() => {\n    optsRef.current = { active, restoreFocus, initialFocus };\n  });\n\n  // Where focus was BEFORE the trap engaged: the element it is given back to on close.\n  //\n  // Read DURING the render that turns the trap on, and that timing is the point. React\n  // honours a child's `autoFocus` while it commits that render, before any effect runs,\n  // so the effect below asking `document.activeElement` would get the child, inside the\n  // overlay. Restoring to that on close aimed focus at the dialog that was closing —\n  // already out of the DOM, so focus fell to <body> rather than going back to the\n  // button that opened it.\n  //\n  // State adjusted during render (the pattern `Modal` uses for `open`) rather than a\n  // ref written there: set once per opening and cleared on release, so a re-render\n  // while open cannot replace it with something inside, and StrictMode's second render\n  // and second effect both see the same element. `undefined` means \"not captured\";\n  // `null` is a capture that found nothing.\n  const [opener, setOpener] = useState<Element | null | undefined>(undefined);\n  if (active && opener === undefined) setOpener(focusedElement());\n  else if (!active && opener !== undefined) setOpener(undefined);\n\n  useEffect(() => {\n    if (!active) return;\n    const container = containerRef.current;\n    if (!container) return;\n\n    container.setAttribute(TRAP_ATTR, \"\");\n\n    /** Is `node` inside a trap nested within this one? */\n    const inNestedTrap = (node: Element | null) => {\n      if (!node) return false;\n      const owner = node.closest(`[${TRAP_ATTR}]`);\n      return owner !== null && owner !== container;\n    };\n\n    const tabbables = () =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        // A tabbable inside a NESTED open overlay belongs to that overlay's trap, not\n        // to this one — otherwise the outer list spans both panels and Tab from the\n        // inner panel's last control wraps to the OUTER panel's first.\n        (el) => !inNestedTrap(el),\n      );\n\n    const { initialFocus: how } = optsRef.current;\n    const focused = document.activeElement;\n    // A child that already has focus was given it on purpose — see `initialFocus`.\n    const childHasFocus = focused !== container && container.contains(focused);\n    if (typeof how === \"function\") {\n      (how() ?? container).focus();\n    } else if (!childHasFocus) {\n      (how === \"first\" ? (tabbables()[0] ?? container) : container).focus();\n    }\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Tab\") return;\n      // Only the innermost trap acts. The event bubbles through every ancestor\n      // container, so without this an outer dialog and an inner picker both handle one\n      // Tab and fight over where focus lands.\n      if (inNestedTrap(document.activeElement)) return;\n\n      // Recomputed per keystroke — see the note at the top of this file.\n      const items = tabbables();\n      if (items.length === 0) {\n        e.preventDefault();\n        container.focus();\n        return;\n      }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const activeEl = document.activeElement;\n      if (e.shiftKey && (activeEl === first || activeEl === container)) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && activeEl === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    // On the container, not the document: a portalled child panel (an open dropdown\n    // rendered to <body>) is outside this subtree and manages its own focus, which is\n    // the behaviour Modal's comment describes and consumers already depend on.\n    container.addEventListener(\"keydown\", onKeyDown);\n\n    return () => {\n      container.removeEventListener(\"keydown\", onKeyDown);\n      container.removeAttribute(TRAP_ATTR);\n\n      // Only when the trap is really being released: the container has left the page,\n      // or `active` has turned false. StrictMode runs this cleanup once more right after\n      // mounting, with the overlay still up, and then the effect again — and React does\n      // not re-apply `autoFocus` for that second run. Restoring here would pull focus\n      // out of the autofocused field for good: live #402 again, in development.\n      if (container.isConnected && optsRef.current.active) return;\n      if (!optsRef.current.restoreFocus) return;\n      // `isConnected` is the whole point: restoring to a node that has been removed\n      // sends focus to <body> and the user loses their place entirely. When the\n      // original is gone, leave focus where the browser put it rather than moving it\n      // somewhere arbitrary — a wrong guess is worse than no move.\n      if (opener?.isConnected) (opener as HTMLElement).focus?.();\n    };\n  }, [active, containerRef, opener]);\n}\n"],"mappings":";AAAA,SAAS,WAAW,iBAAiB,QAAQ,gBAAgB;AA6C7D,MAAM,YACJ;AAcF,MAAM,YAAY;AAyBlB,SAAS,iBAAiC;AACxC,SAAO,OAAO,aAAa,cAAc,OAAO,SAAS;AAC3D;AAEO,SAAS,aACd,cACA,EAAE,SAAS,MAAM,eAAe,MAAM,eAAe,YAAY,IAAsB,CAAC,GAClF;AAMN,QAAM,UAAU,OAAO,EAAE,QAAQ,cAAc,aAAa,CAAC;AAC7D,kBAAgB,MAAM;AACpB,YAAQ,UAAU,EAAE,QAAQ,cAAc,aAAa;AAAA,EACzD,CAAC;AAgBD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAqC,MAAS;AAC1E,MAAI,UAAU,WAAW,OAAW,WAAU,eAAe,CAAC;AAAA,WACrD,CAAC,UAAU,WAAW,OAAW,WAAU,MAAS;AAE7D,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAEhB,cAAU,aAAa,WAAW,EAAE;AAGpC,UAAM,eAAe,CAAC,SAAyB;AAC7C,UAAI,CAAC,KAAM,QAAO;AAClB,YAAM,QAAQ,KAAK,QAAQ,IAAI,SAAS,GAAG;AAC3C,aAAO,UAAU,QAAQ,UAAU;AAAA,IACrC;AAEA,UAAM,YAAY,MAChB,MAAM,KAAK,UAAU,iBAA8B,SAAS,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA,MAI7D,CAAC,OAAO,CAAC,aAAa,EAAE;AAAA,IAC1B;AAEF,UAAM,EAAE,cAAc,IAAI,IAAI,QAAQ;AACtC,UAAM,UAAU,SAAS;AAEzB,UAAM,gBAAgB,YAAY,aAAa,UAAU,SAAS,OAAO;AACzE,QAAI,OAAO,QAAQ,YAAY;AAC7B,OAAC,IAAI,KAAK,WAAW,MAAM;AAAA,IAC7B,WAAW,CAAC,eAAe;AACzB,OAAC,QAAQ,UAAW,UAAU,EAAE,CAAC,KAAK,YAAa,WAAW,MAAM;AAAA,IACtE;AAEA,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,MAAO;AAIrB,UAAI,aAAa,SAAS,aAAa,EAAG;AAG1C,YAAM,QAAQ,UAAU;AACxB,UAAI,MAAM,WAAW,GAAG;AACtB,UAAE,eAAe;AACjB,kBAAU,MAAM;AAChB;AAAA,MACF;AACA,YAAM,QAAQ,MAAM,CAAC;AACrB,YAAM,OAAO,MAAM,MAAM,SAAS,CAAC;AACnC,YAAM,WAAW,SAAS;AAC1B,UAAI,EAAE,aAAa,aAAa,SAAS,aAAa,YAAY;AAChE,UAAE,eAAe;AACjB,aAAK,MAAM;AAAA,MACb,WAAW,CAAC,EAAE,YAAY,aAAa,MAAM;AAC3C,UAAE,eAAe;AACjB,cAAM,MAAM;AAAA,MACd;AAAA,IACF;AAKA,cAAU,iBAAiB,WAAW,SAAS;AAE/C,WAAO,MAAM;AACX,gBAAU,oBAAoB,WAAW,SAAS;AAClD,gBAAU,gBAAgB,SAAS;AAOnC,UAAI,UAAU,eAAe,QAAQ,QAAQ,OAAQ;AACrD,UAAI,CAAC,QAAQ,QAAQ,aAAc;AAKnC,UAAI,QAAQ,YAAa,CAAC,OAAuB,QAAQ;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,MAAM,CAAC;AACnC;","names":[]}

package/dist/i18n/defaults.d.ts

@@ -1,18 +1,23 @@
-import { fx as UiKitLabels } from '../delete-account-setting-Dy4kJgUm.js';
+import { fJ as UiKitLabels } from '../delete-account-setting-DAgGBrbn.js';
 import 'react';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../components/stat-tile.js';
+import '../components/chip.js';
+import 'lucide-react';
+import '../components/field-parts.js';
+import '../components/write-lock.js';
 import '../components/mini-calendar.js';
 import '../components/calendar-heatmap.js';
 import '../components/popover.js';
 import '../hooks/use-breakpoint.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
 import '../components/field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -24,7 +29,6 @@ import '../components/page-contents.js';
 import '../components/series-chart-labels.js';
 import '../components/pie-chart-labels.js';
 import '../components/sparkline.js';
-import '../components/stat-tile.js';
 import '../components/signature-pad.js';
 import '../components/password-strength.js';
 import '../components/swatch-picker.js';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
 import '../components/measured-grid.js';
 import '../components/user-avatar.js';
 import '../lib/person-name.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import '../components/menu-item.js';
 import '../components/floating-panel.js';
@@ -54,7 +55,6 @@ import '../components/error-boundary.js';
 import '../components/authed-image.js';
 import '../components/image-grid.js';
 import '../components/lightbox.js';
-import '../components/write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';
@@ -81,6 +81,7 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './plurals.js';
 import '../components/appearance-labels.js';
 import '../theme/contrast.js';
 import '../theme/text-size.js';

package/dist/i18n/defaults.js

@@ -86,6 +86,7 @@ import { DEFAULT_SETTINGS_LABELS } from "../settings/settings-labels.js";
 import { DEFAULT_LANDING_LABELS } from "../landing/landing-labels.js";
 import { DEFAULT_DEMO_LABELS } from "../demo/demo-labels.js";
 import { DEFAULT_BILLING_LABELS } from "../billing/billing-labels.js";
+import { DEFAULT_PLAN_CHANGE_LABELS } from "../admin/plan-change.js";
 import { DEFAULT_APPEARANCE_LABELS } from "../components/appearance-labels.js";
 import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions.js";
 import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell.js";
@@ -210,6 +211,7 @@ const DEFAULT_UI_KIT_LABELS = {
   landing: DEFAULT_LANDING_LABELS,
   demo: DEFAULT_DEMO_LABELS,
   billing: DEFAULT_BILLING_LABELS,
+  planChange: DEFAULT_PLAN_CHANGE_LABELS,
   appearance: DEFAULT_APPEARANCE_LABELS,
   rowActions: DEFAULT_ROW_ACTIONS_LABELS,
   appShellMore: DEFAULT_APP_SHELL_MORE_LABELS,