@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/feedback/feedback-vocabulary.js

@@ -0,0 +1,143 @@
+"use client";
+import {
+  Ban,
+  Bug,
+  CheckCircle2,
+  ClipboardCheck,
+  CloudUpload,
+  Eye,
+  HelpCircle,
+  Inbox,
+  Lightbulb,
+  MoreHorizontal,
+  OctagonAlert,
+  PauseCircle,
+  Wrench
+} from "lucide-react";
+const FEEDBACK_STATUS_META = {
+  OPEN: {
+    icon: Inbox,
+    activeBg: "bg-active",
+    activeText: "text-primary"
+  },
+  // Triaged and released for implementation (feedback contract §8.2, keksdose live
+  // #396): OPEN is "filed, nobody has looked yet", READY is "go". The brand tint at full
+  // strength, so it reads as the go-ahead beside OPEN's neutral fill and
+  // NEEDS_LIVE_TEST's muted brand.
+  READY: {
+    icon: ClipboardCheck,
+    activeBg: "bg-brand-soft",
+    activeText: "text-brand"
+  },
+  IN_PROGRESS: {
+    icon: Wrench,
+    activeBg: "bg-warning-soft",
+    activeText: "text-warning"
+  },
+  // Where solved work is parked, waiting on the person who reported it. Its own
+  // colour, because "somebody has to check this" is a state you want to find by
+  // scanning rather than by reading.
+  IN_EVALUATION: {
+    icon: Eye,
+    activeBg: "bg-info-soft",
+    activeText: "text-info"
+  },
+  // Resolved but only checkable on a deployed build — the SOFT brand tint, so it
+  // reads as "waiting on something" rather than as a done or a refusal, and it
+  // follows whatever the consumer's brand is instead of pinning an indigo island
+  // beside it.
+  NEEDS_LIVE_TEST: {
+    icon: CloudUpload,
+    activeBg: "bg-brand-soft",
+    activeText: "text-brand-muted"
+  },
+  // Parked on purpose. Muted, not `--danger`: it is not a refusal.
+  POSTPONED: {
+    icon: PauseCircle,
+    activeBg: "bg-active",
+    activeText: "text-secondary"
+  },
+  // The one status with nowhere to move to: the vocabulary has a brand, an info, a
+  // warning and a danger, and nothing that means "succeeded". Deliberately NOT
+  // borrowed from a family that means something else — `--status-synced` is a
+  // FIELD's trip to the database rather than an outcome, and tokens.css says so in
+  // as many words. Green beside WONT_DO's red is the classic CVD-unsafe pair, which
+  // is why both carry a glyph and neither leans on colour alone.
+  DONE: {
+    icon: CheckCircle2,
+    activeBg: "bg-success-soft",
+    activeText: "text-success"
+  },
+  WONT_DO: {
+    icon: Ban,
+    activeBg: "bg-danger-soft",
+    activeText: "text-danger"
+  }
+};
+const FEEDBACK_STATUS_ORDER = Object.keys(FEEDBACK_STATUS_META);
+const OFF_CHAIN = ["NEEDS_LIVE_TEST", "POSTPONED", "WONT_DO"];
+const FORWARD_CHAIN = ["OPEN", "READY", "IN_PROGRESS", "IN_EVALUATION", "DONE"];
+function nextFeedbackStatus(current) {
+  const at = FORWARD_CHAIN.indexOf(current);
+  return at !== -1 && at < FORWARD_CHAIN.length - 1 ? FORWARD_CHAIN[at + 1] : null;
+}
+function visibleFeedbackStatuses(current) {
+  const set = /* @__PURE__ */ new Set([current]);
+  const at = FORWARD_CHAIN.indexOf(current);
+  if (at !== -1) {
+    if (at < FORWARD_CHAIN.length - 1) set.add(FORWARD_CHAIN[at + 1]);
+    if (at > 0) set.add(FORWARD_CHAIN[at - 1]);
+    for (const off of OFF_CHAIN) set.add(off);
+  } else if (current !== "WONT_DO") {
+    set.add("IN_PROGRESS");
+    set.add("DONE");
+    set.add("WONT_DO");
+  }
+  return FEEDBACK_STATUS_ORDER.filter((status) => set.has(status));
+}
+function selectableFeedbackStatuses(_current) {
+  return [...FEEDBACK_STATUS_ORDER];
+}
+const FEEDBACK_CATEGORY_META = {
+  CRASH: {
+    icon: OctagonAlert,
+    badgeBg: "bg-danger-soft",
+    badgeText: "text-danger"
+  },
+  BUG: {
+    icon: Bug,
+    badgeBg: "bg-warning-soft",
+    badgeText: "text-warning"
+  },
+  IDEA: {
+    icon: Lightbulb,
+    badgeBg: "bg-surface-2",
+    badgeText: "text-secondary"
+  },
+  QUESTION: {
+    icon: HelpCircle,
+    badgeBg: "bg-surface-2",
+    badgeText: "text-secondary"
+  },
+  OTHER: {
+    icon: MoreHorizontal,
+    badgeBg: "bg-surface-2",
+    badgeText: "text-secondary"
+  }
+};
+const FEEDBACK_CATEGORY_ORDER = Object.keys(FEEDBACK_CATEGORY_META);
+function feedbackCategoryRank(category) {
+  const at = FEEDBACK_CATEGORY_ORDER.indexOf(category);
+  return at === -1 ? FEEDBACK_CATEGORY_ORDER.length : at;
+}
+export {
+  FEEDBACK_CATEGORY_META,
+  FEEDBACK_CATEGORY_ORDER,
+  FEEDBACK_STATUS_META,
+  FEEDBACK_STATUS_ORDER,
+  feedbackCategoryRank,
+  nextFeedbackStatus,
+  selectableFeedbackStatuses,
+  visibleFeedbackStatuses
+};
+//# sourceMappingURL=feedback-vocabulary.js.map

package/dist/feedback/feedback-vocabulary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/feedback/feedback-vocabulary.ts"],"sourcesContent":["import {\n  Ban,\n  Bug,\n  CheckCircle2,\n  ClipboardCheck,\n  CloudUpload,\n  Eye,\n  HelpCircle,\n  Inbox,\n  Lightbulb,\n  MoreHorizontal,\n  OctagonAlert,\n  PauseCircle,\n  Wrench,\n} from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\n\n/**\n * The feedback **vocabulary**: the eight statuses and five categories, the glyph and tone\n * of each, their orders, and the policy for how a report moves from status to status.\n *\n * Data and plain functions, no components. Until 0.34 this lived at the top of\n * feedback-inbox.tsx, so the feedback menu every app mounts in its top bar imported the\n * inbox — its components and the attachment field they render — for one constant (a\n * category's glyph), and only tree-shaking kept the rest out of every app's entry chunk.\n * From here the top bar's imports reach none of it (MOD-1, refactor audit 2026-10).\n * feedback-inbox.tsx re-exports every name here, so nothing an app imports has moved.\n */\n\n/** The eight states a report can be in.\n *\n *  Shared value for value across the apps on purpose: it is what lets one habit,\n *  and one agent prompt, work on any repo. Five are a chain and three sit off\n *  it — see {@link visibleFeedbackStatuses} for what that buys. `READY` joined in 0.31\n *  (feedback contract §8.2): OPEN is \"filed, not yet triaged\", READY \"released for\n *  implementation\", and nobody works an OPEN row. */\nexport type FeedbackStatus =\n  | \"OPEN\"\n  | \"READY\"\n  | \"IN_PROGRESS\"\n  | \"IN_EVALUATION\"\n  | \"NEEDS_LIVE_TEST\"\n  | \"POSTPONED\"\n  | \"DONE\"\n  | \"WONT_DO\";\n\n/** What a report is about. `CRASH` is filed by an error boundary and never\n *  chosen, which is exactly why it is loud below and absent from every picker. */\nexport type FeedbackCategory = \"CRASH\" | \"BUG\" | \"IDEA\" | \"QUESTION\" | \"OTHER\";\n\n/**\n * A glyph and a tone per status.\n *\n * Colour alone is not a label — two of these sit a hue apart, and a consumer who\n * moves `--brand` can park it beside any of the others — so every status carries\n * its own shape as well. Declaration order is chain order, and\n * {@link FEEDBACK_STATUS_ORDER} is derived from it rather than restated, because\n * a restated list cannot be checked for exhaustiveness: an eighth status would\n * break the build here and leave a literal eight long (as READY did in 0.31).\n */\nexport const FEEDBACK_STATUS_META: Record<\n  FeedbackStatus,\n  { icon: LucideIcon; activeBg: string; activeText: string }\n> = {\n  OPEN: {\n    icon: Inbox,\n    activeBg: \"bg-active\",\n    activeText: \"text-primary\",\n  },\n  // Triaged and released for implementation (feedback contract §8.2, keksdose live\n  // #396): OPEN is \"filed, nobody has looked yet\", READY is \"go\". The brand tint at full\n  // strength, so it reads as the go-ahead beside OPEN's neutral fill and\n  // NEEDS_LIVE_TEST's muted brand.\n  READY: {\n    icon: ClipboardCheck,\n    activeBg: \"bg-brand-soft\",\n    activeText: \"text-brand\",\n  },\n  IN_PROGRESS: {\n    icon: Wrench,\n    activeBg: \"bg-warning-soft\",\n    activeText: \"text-warning\",\n  },\n  // Where solved work is parked, waiting on the person who reported it. Its own\n  // colour, because \"somebody has to check this\" is a state you want to find by\n  // scanning rather than by reading.\n  IN_EVALUATION: {\n    icon: Eye,\n    activeBg: \"bg-info-soft\",\n    activeText: \"text-info\",\n  },\n  // Resolved but only checkable on a deployed build — the SOFT brand tint, so it\n  // reads as \"waiting on something\" rather than as a done or a refusal, and it\n  // follows whatever the consumer's brand is instead of pinning an indigo island\n  // beside it.\n  NEEDS_LIVE_TEST: {\n    icon: CloudUpload,\n    activeBg: \"bg-brand-soft\",\n    activeText: \"text-brand-muted\",\n  },\n  // Parked on purpose. Muted, not `--danger`: it is not a refusal.\n  POSTPONED: {\n    icon: PauseCircle,\n    activeBg: \"bg-active\",\n    activeText: \"text-secondary\",\n  },\n  // The one status with nowhere to move to: the vocabulary has a brand, an info, a\n  // warning and a danger, and nothing that means \"succeeded\". Deliberately NOT\n  // borrowed from a family that means something else — `--status-synced` is a\n  // FIELD's trip to the database rather than an outcome, and tokens.css says so in\n  // as many words. Green beside WONT_DO's red is the classic CVD-unsafe pair, which\n  // is why both carry a glyph and neither leans on colour alone.\n  DONE: {\n    icon: CheckCircle2,\n    activeBg: \"bg-success-soft\",\n    activeText: \"text-success\",\n  },\n  WONT_DO: {\n    icon: Ban,\n    activeBg: \"bg-danger-soft\",\n    activeText: \"text-danger\",\n  },\n};\n\n/** Chain order, then the three off it. The order a picker offers, and the rank a\n *  status column sorts by — so a list sorted by status reads as a queue rather\n *  than as an alphabet. */\nexport const FEEDBACK_STATUS_ORDER = Object.keys(FEEDBACK_STATUS_META) as FeedbackStatus[];\n\n/** States that sit OFF the linear chain: reachable from anywhere, leading\n *  nowhere by themselves. `WONT_DO` has always worked this way; `POSTPONED`\n *  (\"not now\") and `NEEDS_LIVE_TEST` (\"resolved, but only provable on a deployed\n *  build\") are the same shape — a row can be parked or handed to the next deploy\n *  from any point, and comes back to the chain when somebody picks a real state\n *  for it.\n *\n *  Kept out of the forward chain deliberately: putting them in it would mean an\n *  \"advance\" gesture could park an item, and every row would have to pass\n *  through them to reach `DONE`. */\nconst OFF_CHAIN: FeedbackStatus[] = [\"NEEDS_LIVE_TEST\", \"POSTPONED\", \"WONT_DO\"];\n\nconst FORWARD_CHAIN: FeedbackStatus[] = [\"OPEN\", \"READY\", \"IN_PROGRESS\", \"IN_EVALUATION\", \"DONE\"];\n\n/** The next status along the chain, or null at the end (or off it, as `WONT_DO`\n *  is). What a swipe-to-advance gesture commits. */\nexport function nextFeedbackStatus(current: FeedbackStatus): FeedbackStatus | null {\n  const at = FORWARD_CHAIN.indexOf(current);\n  return at !== -1 && at < FORWARD_CHAIN.length - 1 ? FORWARD_CHAIN[at + 1] : null;\n}\n\n/**\n * The steps that make sense from where a row currently stands.\n *\n * For the compact control in a table cell: it is a glanceable triage affordance,\n * and a row of eight icons in a cell is noise. One step forward, one step back\n * (so an item can be sent back for rework), and any of the three off-chain\n * verdicts — which is what makes those usable as verdicts at all.\n *\n * The two parking states are not dead ends: each offers the step that resumes\n * work and the ones that close it, but deliberately **not each other** —\n * \"postponed\" and \"waiting on a deploy\" are different answers to different\n * questions, and a row moving between them directly is a re-triage, which starts\n * by picking the work back up.\n */\nexport function visibleFeedbackStatuses(current: FeedbackStatus): FeedbackStatus[] {\n  const set = new Set<FeedbackStatus>([current]);\n  const at = FORWARD_CHAIN.indexOf(current);\n  if (at !== -1) {\n    if (at < FORWARD_CHAIN.length - 1) set.add(FORWARD_CHAIN[at + 1]);\n    if (at > 0) set.add(FORWARD_CHAIN[at - 1]);\n    for (const off of OFF_CHAIN) set.add(off);\n  } else if (current !== \"WONT_DO\") {\n    set.add(\"IN_PROGRESS\");\n    set.add(\"DONE\");\n    set.add(\"WONT_DO\");\n  }\n  // WONT_DO falls through with nothing added: it stays terminal, reopened by a\n  // note from its author rather than by a status pill.\n  return FEEDBACK_STATUS_ORDER.filter((status) => set.has(status));\n}\n\n/**\n * Every status, in chain order — what an EXPANDED row offers.\n *\n * {@link visibleFeedbackStatuses} narrows the choice to the steps that make\n * sense from where a row is, which is right for a table cell. Once the row is\n * open in front of you, that same narrowing turns every non-adjacent move into a\n * walk: OPEN to DONE meant three round trips, and WONT_DO could not be left at\n * all except through a rework note.\n *\n * Takes a `current` it does not use, so the two policies read as one pair at the\n * call sites and a future rule (\"terminal rows still cannot jump to X\") has a\n * place to live.\n */\nexport function selectableFeedbackStatuses(_current: FeedbackStatus): FeedbackStatus[] {\n  return [...FEEDBACK_STATUS_ORDER];\n}\n\n/**\n * Per-category badge treatment, the counterpart to the status meta above.\n *\n * A category cell that is one grey pill holding the raw enum makes a CRASH —\n * filed automatically, by somebody staring at a broken page right now — read\n * exactly like a QUESTION, and sit unnoticed in the queue. `--danger` plus its own\n * glyph is what makes that impossible; the hand-filed categories stay\n * deliberately quiet so that the loud one means something.\n *\n * Declaration order is triage order, CRASH first.\n */\nexport const FEEDBACK_CATEGORY_META: Record<\n  FeedbackCategory,\n  { icon: LucideIcon; badgeBg: string; badgeText: string }\n> = {\n  CRASH: {\n    icon: OctagonAlert,\n    badgeBg: \"bg-danger-soft\",\n    badgeText: \"text-danger\",\n  },\n  BUG: {\n    icon: Bug,\n    badgeBg: \"bg-warning-soft\",\n    badgeText: \"text-warning\",\n  },\n  IDEA: {\n    icon: Lightbulb,\n    badgeBg: \"bg-surface-2\",\n    badgeText: \"text-secondary\",\n  },\n  QUESTION: {\n    icon: HelpCircle,\n    badgeBg: \"bg-surface-2\",\n    badgeText: \"text-secondary\",\n  },\n  OTHER: {\n    icon: MoreHorizontal,\n    badgeBg: \"bg-surface-2\",\n    badgeText: \"text-secondary\",\n  },\n};\n\n/** Triage order, CRASH first — also a category column's sort key and the option\n *  order in its filter. Sorting by the raw enum is alphabetical, which parks\n *  CRASH between BUG and IDEA. */\nexport const FEEDBACK_CATEGORY_ORDER = Object.keys(FEEDBACK_CATEGORY_META) as FeedbackCategory[];\n\n/** A category's rank for a column sort. Anything this build has never heard of —\n *  an older client against a newer API — sorts LAST rather than to `indexOf`'s\n *  −1, which would rank it above CRASH. */\nexport function feedbackCategoryRank(category: FeedbackCategory): number {\n  const at = FEEDBACK_CATEGORY_ORDER.indexOf(category);\n  return at === -1 ? FEEDBACK_CATEGORY_ORDER.length : at;\n}\n"],"mappings":"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","names":[]}

package/dist/feedback.d.ts

@@ -1,104 +1,15 @@
-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-DiPX4Vue.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';
-export { CrashFiling, CrashReportCreate, CrashReportResponse, CrashReporter, CrashReporterOptions, createCrashReporter } from './feedback/feedback-crash.js';
-import 'react';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.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/field-sync.js';
-import './wizard/types.js';
-import './tour/tour.js';
-import './search/command-palette.js';
-import './search/global-search.js';
-import './search/search-index.js';
-import './components/month-picker.js';
-import './components/page-contents.js';
-import './components/series-chart-labels.js';
-import './components/pie-chart-labels.js';
-import './components/sparkline.js';
-import './components/signature-pad.js';
-import './components/password-strength.js';
-import './components/swatch-picker.js';
-import './components/tile-radio.js';
-import './components/icon-picker.js';
-import './components/dialog-frame.js';
-import './components/modal.js';
-import './hooks/use-search-param-state.js';
-import './components/measured-grid.js';
-import './components/user-avatar.js';
-import './lib/person-name.js';
-import './shell/topbar-action-menu.js';
-import './components/menu-item.js';
-import './components/floating-panel.js';
-import './hooks/use-authed-src.js';
-import './components/account-settings-labels.js';
-import './components/bulk-action-bar.js';
-import './components/list.js';
-import './components/breadcrumbs.js';
-import './components/toast.js';
-import './components/description-list.js';
-import './components/line-items.js';
-import './components/error-boundary.js';
-import './components/authed-image.js';
-import './components/image-grid.js';
-import './components/lightbox.js';
-import './auth/sign-in-form.js';
-import './landing/access.js';
-import './landing/landing-labels.js';
-import './shell/topbar-controls.js';
-import './theme/palette-presets.js';
-import './theme/chart-palette.js';
-import './theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import './auth/complete-name-dialog.js';
-import './auth/forgot-password-form.js';
-import './auth/status-parts.js';
-import './auth/reset-password-form.js';
-import './auth/verify-email.js';
-import './auth/not-found-page.js';
-import './auth/accept-invitation.js';
-import './shell/company-switcher.js';
-import './account/email-change-setting.js';
-import './account/sessions-setting.js';
-import './lib/format.js';
-import './account/data-export-setting.js';
-import './components/account-chips.js';
-import './admin/admin-parts.js';
-import './admin/admin-action-log.js';
-import './settings/settings-labels.js';
-import './demo/demo-labels.js';
-import './components/appearance-labels.js';
-import './theme/contrast.js';
-import './theme/text-size.js';
-import './components/reauth-dialog.js';
-import './components/server-wake.js';
-import './lib/server-wake.js';
-import './components/translation-review-labels.js';
-import './lib/translation-review.js';
-import './components/country-select.js';
-import './components/inline-edit-field.js';
-import './lib/iban.js';
-import './lib/phone.js';
-import './components/sign-chip.js';
-import './components/column-mapper.js';
-import './lib/column-mapping.js';
-import './lib/table-text.js';
-import './components/focus-ring.js';
+export * from "./feedback/feedback-attachment.js";
+export * from "./feedback/feedback-dialog.js";
+export * from "./feedback/feedback-inbox.js";
+export * from "./feedback/feedback-thread.js";
+export * from "./feedback/feedback-record.js";
+export * from "./feedback/feedback-labels.js";
+export * from "./feedback/feedback-status-undo.js";
+export * from "./feedback/feedback-swipe.js";
+export * from "./feedback/feedback-menu.js";
+export * from "./feedback/feedback-context.js";
+export * from "./feedback/feedback-capture.js";
+export * from "./feedback/feedback-submit.js";
+export * from "./feedback/feedback-table.js";
+export * from "./feedback/feedback-row-detail.js";
+export * from "./feedback/feedback-crash.js";

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

@@ -1,6 +1,6 @@
-import { RefObject } from 'react';
-import { AnchorRect } from './use-anchored-rect.js';
-
+import type { RefObject } from "react";
+import { type AnchorRect } from "./use-anchored-rect.js";
+import type { Direction } from "../lib/direction.js";
 /**
  * Vertical placement for a portalled, `position: fixed` panel anchored to a trigger.
  *
@@ -15,11 +15,18 @@ import { AnchorRect } from './use-anchored-rect.js';
  * `visualViewport` reports the region actually on screen, so that is what this reads.
  */
 /** The on-screen region, in layout-viewport coordinates. */
-interface ViewportBox {
+export 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 {
+export interface KeyboardInsetOptions {
     /** The smallest inset that counts as a keyboard. Default 100 px. */
     minimum?: number;
 }
@@ -38,8 +45,8 @@ interface KeyboardInsetOptions {
  * Read it on `visualViewport`'s `resize` and `scroll` events (window `resize` as the
  * fallback); a bottom-anchored control lifts itself by the result.
  */
-declare function readKeyboardInset({ minimum }?: KeyboardInsetOptions): number;
-interface AnchoredPanelOptions {
+export declare function readKeyboardInset({ minimum }?: KeyboardInsetOptions): number;
+export interface AnchoredPanelOptions {
     /** Space between trigger and panel. */
     gap?: number;
     /** Space kept clear at the viewport edges. */
@@ -52,11 +59,24 @@ interface AnchoredPanelOptions {
      *  In px at Normal, scaled likewise. */
     minHeight?: number;
 }
-interface AnchoredPanel {
+/**
+ * `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`.
+ */
+export 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,81 @@ 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">;
+export 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.
+ * The glass a panel has to stay on, in CSS pixels — `window.innerWidth` is the wrong
+ * width on a phone (keksdose run 72, live #381). There it is the LAYOUT viewport, and
+ * that grows to the page's width as soon as anything sticks out past the screen: 430 on
+ * a 406px screen in Chromium's mobile emulation, with `position: fixed` layers laid out
+ * against the 430. A panel that had widened the page then measured itself as inside it.
+ * The root element's client width is the initial containing block instead — the screen,
+ * the width `100vw` and the media queries see — whatever overflows, and on a desktop it
+ * also leaves a classic scrollbar out, which is where a fixed box's `right` is measured
+ * from. It is 0 where nothing is laid out (jsdom), and the window is the answer there.
+ * The height stays the window's: nothing measured grows it, and a phone's collapsing
+ * toolbar makes the window the truer of the two.
  *
- * 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`.
+ * Tooltip's lesson, moved here so every anchored panel reads the same width (round 0.34
+ * Wave 2, DUP-7).
  */
+export declare function viewportSize(): {
+    width: number;
+    height: number;
+};
+export interface AnchoredInlineOptions {
+    /** The trigger's reading direction, which `start`, `end` and `after` follow. Default
+     *  `ltr`. A portalled panel has left the subtree it would inherit `dir` from, so read
+     *  it off the trigger (`dirOf`). */
+    dir?: Direction;
+    /**
+     * Which of the panel's edges lines up with which of the trigger's:
+     * - `start` / `end` — the panel's start (end) edge on the trigger's start (end) edge,
+     *   by reading direction: a picker hangs from its field's start, a popover from its
+     *   button's end;
+     * - `left` / `right` — the same, physically;
+     * - `after` — the panel's start edge on the trigger's END edge: beside it, as the
+     *   sidebar's flyout opens.
+     *
+     * Default `start`.
+     */
+    align?: "start" | "end" | "left" | "right" | "after";
+    /** The room kept from either edge of the glass, in px. Default 8. */
+    edge?: number;
+    /** The glass's width. Default {@link viewportSize}'s. */
+    viewportWidth?: number;
+}
+/** The horizontal place of a `position: fixed` panel: its `left`, and the `right` of the
+ *  same box for a panel hung from its right edge (both in px, from the glass's edges). */
+export interface InlinePlacement {
+    left: number;
+    right: number;
+}
+/**
+ * The horizontal half of an anchored panel, beside {@link anchoredPanelPlacement}'s
+ * vertical one (round 0.34 Wave 2, DUP-7): where a panel `panelWidth` wide goes against
+ * the trigger's `rect`, kept `edge` px inside the glass ({@link viewportSize}).
+ *
+ * Popover, DropdownPanel, ComboboxPanel, HoverMenu and the AppShell flyout each wrote
+ * this themselves, against three different widths: `innerWidth`, which on a phone is
+ * the grown layout viewport and on a desktop counts the scrollbar; the root's client
+ * width; and, for the entity picker's panel in a left-to-right form, no clamp at all.
+ *
+ * A panel wider than the room keeps its START on the glass — its left edge in a
+ * left-to-right form, its right in a right-to-left one — as Tooltip's slide does: the
+ * start of a row of text is the half worth keeping.
+ */
+export declare function anchoredInline(rect: Pick<AnchorRect, "left" | "right">, panelWidth: number, { dir, align, edge, viewportWidth }?: AnchoredInlineOptions): InlinePlacement;
 /**
  * The region actually on screen, tracked while `active` (Keksdose live #328).
  *
@@ -107,7 +192,14 @@ declare function anchoredPanelPlacement(rect: Pick<AnchorRect, "top" | "bottom">
  * full width — its close button sat off screen (kastlan, Kurvenschmiede). Zoomed, the
  * sheet keeps its static full-screen box, which the reader can pan to like the page.
  */
-declare function useVisualViewport(active: boolean): ViewportBox | null;
-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 };
+export declare function useVisualViewport(active: boolean): ViewportBox | null;
+/**
+ * Where to put a panel anchored under `ref`, tracking the visible viewport.
+ *
+ * Callers own horizontal placement, through {@link anchoredInline} — the pickers align
+ * to the trigger's start edge, the popovers to its end — 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}.
+ */
+export declare function useAnchoredPanel<T extends HTMLElement>(ref: RefObject<T | null>, open: boolean, options?: AnchoredPanelOptions): AnchoredPanel;

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,12 +29,41 @@ 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);
+  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 viewportSize() {
   return {
-    top: above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap,
-    maxHeight,
-    above
+    width: document.documentElement.clientWidth || window.innerWidth,
+    height: window.innerHeight
   };
 }
+function anchoredInline(rect, panelWidth, { dir = "ltr", align = "start", edge = 8, viewportWidth = viewportSize().width } = {}) {
+  const rtl = dir === "rtl";
+  let wanted;
+  switch (align) {
+    case "left":
+      wanted = rect.left;
+      break;
+    case "right":
+      wanted = rect.right - panelWidth;
+      break;
+    case "start":
+      wanted = rtl ? rect.right - panelWidth : rect.left;
+      break;
+    case "end":
+      wanted = rtl ? rect.left : rect.right - panelWidth;
+      break;
+    case "after":
+      wanted = rtl ? rect.left - panelWidth : rect.right;
+      break;
+  }
+  const min = edge;
+  const max = viewportWidth - edge - panelWidth;
+  const left = max < min ? rtl ? max : min : Math.min(Math.max(wanted, min), max);
+  return { left, right: viewportWidth - left - panelWidth };
+}
 function useVisualViewport(active) {
   const [box, setBox] = useState(null);
   useLayoutEffect(() => {
@@ -78,14 +108,16 @@ 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 }) };
 }
 export {
+  anchoredInline,
   anchoredPanelPlacement,
   readKeyboardInset,
   useAnchoredPanel,
-  useVisualViewport
+  useVisualViewport,
+  viewportSize
 };
 //# sourceMappingURL=use-anchored-panel.js.map

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\";\nimport type { Direction } from \"../lib/direction\";\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 glass a panel has to stay on, in CSS pixels — `window.innerWidth` is the wrong\n * width on a phone (keksdose run 72, live #381). There it is the LAYOUT viewport, and\n * that grows to the page's width as soon as anything sticks out past the screen: 430 on\n * a 406px screen in Chromium's mobile emulation, with `position: fixed` layers laid out\n * against the 430. A panel that had widened the page then measured itself as inside it.\n * The root element's client width is the initial containing block instead — the screen,\n * the width `100vw` and the media queries see — whatever overflows, and on a desktop it\n * also leaves a classic scrollbar out, which is where a fixed box's `right` is measured\n * from. It is 0 where nothing is laid out (jsdom), and the window is the answer there.\n * The height stays the window's: nothing measured grows it, and a phone's collapsing\n * toolbar makes the window the truer of the two.\n *\n * Tooltip's lesson, moved here so every anchored panel reads the same width (round 0.34\n * Wave 2, DUP-7).\n */\nexport function viewportSize(): { width: number; height: number } {\n  return {\n    width: document.documentElement.clientWidth || window.innerWidth,\n    height: window.innerHeight,\n  };\n}\n\nexport interface AnchoredInlineOptions {\n  /** The trigger's reading direction, which `start`, `end` and `after` follow. Default\n   *  `ltr`. A portalled panel has left the subtree it would inherit `dir` from, so read\n   *  it off the trigger (`dirOf`). */\n  dir?: Direction;\n  /**\n   * Which of the panel's edges lines up with which of the trigger's:\n   * - `start` / `end` — the panel's start (end) edge on the trigger's start (end) edge,\n   *   by reading direction: a picker hangs from its field's start, a popover from its\n   *   button's end;\n   * - `left` / `right` — the same, physically;\n   * - `after` — the panel's start edge on the trigger's END edge: beside it, as the\n   *   sidebar's flyout opens.\n   *\n   * Default `start`.\n   */\n  align?: \"start\" | \"end\" | \"left\" | \"right\" | \"after\";\n  /** The room kept from either edge of the glass, in px. Default 8. */\n  edge?: number;\n  /** The glass's width. Default {@link viewportSize}'s. */\n  viewportWidth?: number;\n}\n\n/** The horizontal place of a `position: fixed` panel: its `left`, and the `right` of the\n *  same box for a panel hung from its right edge (both in px, from the glass's edges). */\nexport interface InlinePlacement {\n  left: number;\n  right: number;\n}\n\n/**\n * The horizontal half of an anchored panel, beside {@link anchoredPanelPlacement}'s\n * vertical one (round 0.34 Wave 2, DUP-7): where a panel `panelWidth` wide goes against\n * the trigger's `rect`, kept `edge` px inside the glass ({@link viewportSize}).\n *\n * Popover, DropdownPanel, ComboboxPanel, HoverMenu and the AppShell flyout each wrote\n * this themselves, against three different widths: `innerWidth`, which on a phone is\n * the grown layout viewport and on a desktop counts the scrollbar; the root's client\n * width; and, for the entity picker's panel in a left-to-right form, no clamp at all.\n *\n * A panel wider than the room keeps its START on the glass — its left edge in a\n * left-to-right form, its right in a right-to-left one — as Tooltip's slide does: the\n * start of a row of text is the half worth keeping.\n */\nexport function anchoredInline(\n  rect: Pick<AnchorRect, \"left\" | \"right\">,\n  panelWidth: number,\n  { dir = \"ltr\", align = \"start\", edge = 8, viewportWidth = viewportSize().width }: AnchoredInlineOptions = {},\n): InlinePlacement {\n  const rtl = dir === \"rtl\";\n  // Where the panel's LEFT edge goes, before the clamp.\n  let wanted: number;\n  switch (align) {\n    case \"left\":\n      wanted = rect.left;\n      break;\n    case \"right\":\n      wanted = rect.right - panelWidth;\n      break;\n    case \"start\":\n      wanted = rtl ? rect.right - panelWidth : rect.left;\n      break;\n    case \"end\":\n      wanted = rtl ? rect.left : rect.right - panelWidth;\n      break;\n    case \"after\":\n      wanted = rtl ? rect.left - panelWidth : rect.right;\n      break;\n  }\n  const min = edge;\n  const max = viewportWidth - edge - panelWidth;\n  const left = max < min ? (rtl ? max : min) : Math.min(Math.max(wanted, min), max);\n  return { left, right: viewportWidth - left - panelWidth };\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, through {@link anchoredInline} — the pickers align\n * to the trigger's start edge, the popovers to its end — and must apply `maxHeight` with\n * 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"]}