@12-apps/ui 6.64.0 → 6.65.0

package/dist/_internal/components/data-display/Sheet/Sheet.js

@@ -1,6 +1,6 @@
 import {
   Sheet
-} from "../../../../chunk-642NSD7N.js";
+} from "../../../../chunk-HG7MCNRR.js";
 import "../../../../chunk-3ROCD7XF.js";
 import "../../../../chunk-LYVTJLCF.js";
 import "../../../../chunk-CRN4KKNI.js";

package/dist/_internal/components/data-display/index.js

@@ -16,7 +16,7 @@ import "../../../chunk-5JEOLUWJ.js";
 import "../../../chunk-ITACE45O.js";
 import {
   Sheet
-} from "../../../chunk-642NSD7N.js";
+} from "../../../chunk-HG7MCNRR.js";
 import "../../../chunk-3ROCD7XF.js";
 import "../../../chunk-LYVTJLCF.js";
 import "../../../chunk-CRN4KKNI.js";

package/dist/_internal/components/form/PickerSheet/PickerSheet.js

@@ -1,14 +1,15 @@
 "use client";
 import {
   PickerSheet
-} from "../../../../chunk-43UPEJML.js";
-import "../../../../chunk-Z3DEMZ5J.js";
-import "../../../../chunk-ZQRNCUBB.js";
+} from "../../../../chunk-IICBAAL7.js";
+import "../../../../chunk-IDRVQVDL.js";
+import "../../../../chunk-WSMUOFWF.js";
 import "../../../../chunk-QZOXMH7X.js";
-import "../../../../chunk-RLTCU57K.js";
+import "../../../../chunk-LZJHHMOF.js";
 import "../../../../chunk-VPGDYI63.js";
 import "../../../../chunk-DMNZD3Q7.js";
 import "../../../../chunk-PN4HVM43.js";
+import "../../../../chunk-TZ23DNKY.js";
 import "../../../../chunk-RGVNXES5.js";
 import "../../../../chunk-GDN2LUTZ.js";
 import "../../../../chunk-7ZADLRLP.js";

package/dist/_internal/components/form/PickerSheet/PickerSheet.parts.js

@@ -3,9 +3,10 @@ import {
   PickerSheetHead,
   PickerSheetList,
   PickerSheetSearch
-} from "../../../../chunk-Z3DEMZ5J.js";
-import "../../../../chunk-RLTCU57K.js";
+} from "../../../../chunk-IDRVQVDL.js";
+import "../../../../chunk-LZJHHMOF.js";
 import "../../../../chunk-DMNZD3Q7.js";
+import "../../../../chunk-TZ23DNKY.js";
 import "../../../../chunk-RGVNXES5.js";
 import "../../../../chunk-GDN2LUTZ.js";
 import "../../../../chunk-7ZADLRLP.js";

package/dist/_internal/components/form/PickerSheet/PickerSheet.styles.js

@@ -17,7 +17,8 @@ import {
   searchFieldSx,
   sheetPaperSx,
   titleSx
-} from "../../../../chunk-RLTCU57K.js";
+} from "../../../../chunk-LZJHHMOF.js";
+import "../../../../chunk-TZ23DNKY.js";
 import "../../../../chunk-RGVNXES5.js";
 import "../../../../chunk-GDN2LUTZ.js";
 import "../../../../chunk-7ZADLRLP.js";

package/dist/_internal/components/form/PickerSheet/usePickerSheet.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   usePickerSheet
-} from "../../../../chunk-ZQRNCUBB.js";
+} from "../../../../chunk-WSMUOFWF.js";
 import "../../../../chunk-QZOXMH7X.js";
 import "../../../../chunk-PN4HVM43.js";
 import "../../../../chunk-PZ5AY32C.js";

package/dist/_internal/components/index.js

@@ -168,7 +168,7 @@ import {
 } from "../../chunk-GWFAINQ7.js";
 import {
   AppHeaderDetails
-} from "../../chunk-GWL5FYPN.js";
+} from "../../chunk-OZGKIHAA.js";
 import {
   brandGradient,
   highlightOf,
@@ -451,7 +451,7 @@ import "../../chunk-5JEOLUWJ.js";
 import "../../chunk-ITACE45O.js";
 import {
   Sheet
-} from "../../chunk-642NSD7N.js";
+} from "../../chunk-HG7MCNRR.js";
 import "../../chunk-3ROCD7XF.js";
 import "../../chunk-LYVTJLCF.js";
 import "../../chunk-CRN4KKNI.js";

package/dist/_internal/components/navigation/AppHeader/AppHeader.details.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   AppHeaderDetails
-} from "../../../../chunk-GWL5FYPN.js";
-import "../../../../chunk-642NSD7N.js";
+} from "../../../../chunk-OZGKIHAA.js";
+import "../../../../chunk-HG7MCNRR.js";
 import "../../../../chunk-3ROCD7XF.js";
 import "../../../../chunk-LYVTJLCF.js";
 import "../../../../chunk-CRN4KKNI.js";

package/dist/_internal/components/navigation/index.js

@@ -60,7 +60,7 @@ import {
 } from "../../../chunk-GWFAINQ7.js";
 import {
   AppHeaderDetails
-} from "../../../chunk-GWL5FYPN.js";
+} from "../../../chunk-OZGKIHAA.js";
 import {
   brandGradient,
   highlightOf,
@@ -68,7 +68,7 @@ import {
 } from "../../../chunk-IQU4HKND.js";
 import "../../../chunk-TMSWLFL4.js";
 import "../../../chunk-UALPKKAY.js";
-import "../../../chunk-642NSD7N.js";
+import "../../../chunk-HG7MCNRR.js";
 import "../../../chunk-3ROCD7XF.js";
 import "../../../chunk-LYVTJLCF.js";
 import "../../../chunk-CRN4KKNI.js";

package/dist/{chunk-642NSD7N.js → chunk-HG7MCNRR.js}

@@ -96,6 +96,7 @@ var Sheet = (props) => {
     anchor: position,
     open: isOpen,
     className,
+    ...resolved.animated === false ? { transitionDuration: 0 } : {},
     // A tap outside obeys `closeOnOverlayClick`. A swipe-to-dismiss (no
     // reason: SwipeableDrawer calls `onClose()` bare) closes. Escape is the
     // hook's own listener alone, which honours `closeOnEscape` — the modal's
@@ -142,4 +143,4 @@ var Sheet = (props) => {
 export {
   Sheet
 };
-//# sourceMappingURL=chunk-642NSD7N.js.map
+//# sourceMappingURL=chunk-HG7MCNRR.js.map

package/dist/{chunk-642NSD7N.js.map → chunk-HG7MCNRR.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.tsx"],"sourcesContent":["import Drawer from '@mui/material/Drawer/index.js';\nimport SwipeableDrawer from '@mui/material/SwipeableDrawer/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { BackdropProps } from '@mui/material/Backdrop/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport {\n  DEFAULT_DRAG_RESISTANCE,\n  DEFAULT_VELOCITY_THRESHOLD,\n  SPRING_CONFIG,\n} from './Sheet.animations';\nimport { SheetBody } from './Sheet.body';\nimport { useSheetDrag, useSheetOpen } from './Sheet.hooks';\nimport { SheetOverlay } from './Sheet.parts';\nimport { panelSx } from './Sheet.styles';\nimport type { SheetProps } from './Sheet.types';\n\nexport { SheetContent, SheetFooter, SheetHeader, SheetOverlay } from './Sheet.parts';\n\nconst DEFAULTS = {\n  open: false,\n  position: 'bottom',\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  glow: false,\n  pulse: false,\n  glass: false,\n  gradient: false,\n  loading: false,\n  disabled: false,\n  showOverlay: true,\n  closeOnOverlayClick: true,\n  closeOnEscape: true,\n  showCloseButton: true,\n  showHandle: true,\n  swipeable: true,\n  snapPoints: [0.25, 0.5, 0.75, 1],\n  defaultSnapPoint: 0.5,\n  minSnapPoint: 0,\n  maxSnapPoint: 1,\n  velocityThreshold: DEFAULT_VELOCITY_THRESHOLD,\n  dragResistance: DEFAULT_DRAG_RESISTANCE,\n  animationConfig: SPRING_CONFIG,\n  persistent: false,\n  fullHeight: false,\n  rounded: true,\n  elevation: 16,\n  dataTestId: 'sheet',\n} satisfies Partial<SheetProps>;\n\n/**\n * The props with every defaulted key now guaranteed present. Without this the\n * component would need a `?? fallback` at each use site, and each of those is a\n * branch the complexity gate counts.\n */\ntype ResolvedSheetProps = SheetProps & Required<Pick<SheetProps, keyof typeof DEFAULTS>>;\n\n/**\n * The drawer's own backdrop, made invisible: it only CATCHES the tap.\n *\n * The visible veil is {@link SheetOverlay}, which knows about the `glass`\n * blur. But the drawer's modal root covers the whole viewport above that veil,\n * so with no backdrop at all a tap on the veil landed on the bare root, which\n * handles nothing — and no sheet ever closed on an outside tap. This one sits\n * under the panel, paints nothing, and hands the tap to the drawer's\n * `onClose('backdropClick')`, which the sheet routes through its own\n * `closeOnOverlayClick` / `persistent` rules.\n *\n * Defined at module scope: a component built inside a render is a new type on\n * every pass, which remounts the subtree it belongs to.\n */\nconst ClickCatcher = React.forwardRef<HTMLDivElement, BackdropProps & { 'data-testid'?: string }>(\n  ({ onClick, 'data-testid': testId }, ref) => (\n    <div\n      ref={ref}\n      aria-hidden\n      onClick={onClick}\n      data-testid={testId}\n      style={{ position: 'fixed', inset: 0, backgroundColor: 'transparent' }}\n    />\n  ),\n) as React.ComponentType<BackdropProps>;\nClickCatcher.displayName = 'SheetClickCatcher';\n\n/**\n * Which way the sheet is anchored. Four flags rather than four repeated\n * comparisons, and the only thing the hooks and styles need to know about\n * `position` and `variant`.\n */\nconst orientationOf = ({ position, variant }: ResolvedSheetProps) => {\n  const isBottomSheet = position === 'bottom';\n  const isTopSheet = position === 'top';\n\n  return {\n    isBottomSheet,\n    isTopSheet,\n    isVerticalSheet: isBottomSheet || isTopSheet,\n    isDraggableVariant: variant === 'draggable',\n  };\n};\n\nexport const Sheet: React.FC<SheetProps> = (props) => {\n  const resolved = withDefaults(props, DEFAULTS) as ResolvedSheetProps;\n  const { position, variant, showOverlay, swipeable, className, dataTestId } = resolved;\n\n  const theme = useTheme();\n  const orientation = orientationOf(resolved);\n\n  // Support both the dataTestId prop and a plain data-testid attribute.\n  const testId = (resolved as { 'data-testid'?: string })['data-testid'] || dataTestId;\n\n  const { sheetRef, currentHeight, isDragging, isAnimating, handleDragStart, resetToDefaultSnapPoint } =\n    useSheetDrag({ ...resolved, ...orientation });\n\n  const { isOpen, handleClose, handleOverlayClick, handleSwipeOpen } = useSheetOpen({\n    ...resolved,\n    ...orientation,\n    resetToDefaultSnapPoint,\n  });\n\n  const drawerProps = {\n    anchor: position,\n    open: isOpen,\n    className,\n    // A tap outside obeys `closeOnOverlayClick`. A swipe-to-dismiss (no\n    // reason: SwipeableDrawer calls `onClose()` bare) closes. Escape is the\n    // hook's own listener alone, which honours `closeOnEscape` — the modal's\n    // is switched off below so the key never closes twice or past the flag.\n    onClose: (_event?: object, reason?: 'backdropClick' | 'escapeKeyDown') =>\n      reason === 'backdropClick' ? handleOverlayClick() : handleClose(),\n    PaperProps: {\n      ref: sheetRef,\n      sx: panelSx({ ...resolved, ...orientation, theme, currentHeight, isDragging, isAnimating }),\n    },\n    ModalProps: {\n      keepMounted: true,\n      disableEscapeKeyDown: true,\n      BackdropComponent: ClickCatcher,\n      BackdropProps: { 'data-testid': testId ? `${testId}-click-catcher` : undefined } as Partial<BackdropProps>,\n    },\n  };\n\n  const body = (\n    <SheetBody\n      {...resolved}\n      {...orientation}\n      testId={testId}\n      isDragging={isDragging}\n      onClose={handleClose}\n      onDragStart={handleDragStart}\n    />\n  );\n\n  // The draggable variant drives the panel's height itself; MUI's swipe handling\n  // would be a second thing moving it.\n  const isSwipeable = swipeable && !orientation.isDraggableVariant;\n\n  return (\n    <>\n      {showOverlay && isOpen && (\n        <SheetOverlay open={isOpen} onClick={handleOverlayClick} blur={variant === 'glass'} />\n      )}\n\n      {isSwipeable ? (\n        <SwipeableDrawer\n          {...drawerProps}\n          onOpen={handleSwipeOpen}\n          disableSwipeToOpen={false}\n          swipeAreaWidth={20}\n        >\n          {body}\n        </SwipeableDrawer>\n      ) : (\n        <Drawer {...drawerProps}>{body}</Drawer>\n      )}\n    </>\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/components/data-display/Sheet/Sheet.tsx"],"sourcesContent":["import Drawer from '@mui/material/Drawer/index.js';\nimport SwipeableDrawer from '@mui/material/SwipeableDrawer/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { BackdropProps } from '@mui/material/Backdrop/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport {\n  DEFAULT_DRAG_RESISTANCE,\n  DEFAULT_VELOCITY_THRESHOLD,\n  SPRING_CONFIG,\n} from './Sheet.animations';\nimport { SheetBody } from './Sheet.body';\nimport { useSheetDrag, useSheetOpen } from './Sheet.hooks';\nimport { SheetOverlay } from './Sheet.parts';\nimport { panelSx } from './Sheet.styles';\nimport type { SheetProps } from './Sheet.types';\n\nexport { SheetContent, SheetFooter, SheetHeader, SheetOverlay } from './Sheet.parts';\n\nconst DEFAULTS = {\n  open: false,\n  position: 'bottom',\n  variant: 'default',\n  size: 'md',\n  color: 'primary',\n  glow: false,\n  pulse: false,\n  glass: false,\n  gradient: false,\n  loading: false,\n  disabled: false,\n  showOverlay: true,\n  closeOnOverlayClick: true,\n  closeOnEscape: true,\n  showCloseButton: true,\n  showHandle: true,\n  swipeable: true,\n  snapPoints: [0.25, 0.5, 0.75, 1],\n  defaultSnapPoint: 0.5,\n  minSnapPoint: 0,\n  maxSnapPoint: 1,\n  velocityThreshold: DEFAULT_VELOCITY_THRESHOLD,\n  dragResistance: DEFAULT_DRAG_RESISTANCE,\n  animationConfig: SPRING_CONFIG,\n  persistent: false,\n  fullHeight: false,\n  rounded: true,\n  elevation: 16,\n  dataTestId: 'sheet',\n} satisfies Partial<SheetProps>;\n\n/**\n * The props with every defaulted key now guaranteed present. Without this the\n * component would need a `?? fallback` at each use site, and each of those is a\n * branch the complexity gate counts.\n */\ntype ResolvedSheetProps = SheetProps & Required<Pick<SheetProps, keyof typeof DEFAULTS>>;\n\n/**\n * The drawer's own backdrop, made invisible: it only CATCHES the tap.\n *\n * The visible veil is {@link SheetOverlay}, which knows about the `glass`\n * blur. But the drawer's modal root covers the whole viewport above that veil,\n * so with no backdrop at all a tap on the veil landed on the bare root, which\n * handles nothing — and no sheet ever closed on an outside tap. This one sits\n * under the panel, paints nothing, and hands the tap to the drawer's\n * `onClose('backdropClick')`, which the sheet routes through its own\n * `closeOnOverlayClick` / `persistent` rules.\n *\n * Defined at module scope: a component built inside a render is a new type on\n * every pass, which remounts the subtree it belongs to.\n */\nconst ClickCatcher = React.forwardRef<HTMLDivElement, BackdropProps & { 'data-testid'?: string }>(\n  ({ onClick, 'data-testid': testId }, ref) => (\n    <div\n      ref={ref}\n      aria-hidden\n      onClick={onClick}\n      data-testid={testId}\n      style={{ position: 'fixed', inset: 0, backgroundColor: 'transparent' }}\n    />\n  ),\n) as React.ComponentType<BackdropProps>;\nClickCatcher.displayName = 'SheetClickCatcher';\n\n/**\n * Which way the sheet is anchored. Four flags rather than four repeated\n * comparisons, and the only thing the hooks and styles need to know about\n * `position` and `variant`.\n */\nconst orientationOf = ({ position, variant }: ResolvedSheetProps) => {\n  const isBottomSheet = position === 'bottom';\n  const isTopSheet = position === 'top';\n\n  return {\n    isBottomSheet,\n    isTopSheet,\n    isVerticalSheet: isBottomSheet || isTopSheet,\n    isDraggableVariant: variant === 'draggable',\n  };\n};\n\nexport const Sheet: React.FC<SheetProps> = (props) => {\n  const resolved = withDefaults(props, DEFAULTS) as ResolvedSheetProps;\n  const { position, variant, showOverlay, swipeable, className, dataTestId } = resolved;\n\n  const theme = useTheme();\n  const orientation = orientationOf(resolved);\n\n  // Support both the dataTestId prop and a plain data-testid attribute.\n  const testId = (resolved as { 'data-testid'?: string })['data-testid'] || dataTestId;\n\n  const { sheetRef, currentHeight, isDragging, isAnimating, handleDragStart, resetToDefaultSnapPoint } =\n    useSheetDrag({ ...resolved, ...orientation });\n\n  const { isOpen, handleClose, handleOverlayClick, handleSwipeOpen } = useSheetOpen({\n    ...resolved,\n    ...orientation,\n    resetToDefaultSnapPoint,\n  });\n\n  const drawerProps = {\n    anchor: position,\n    open: isOpen,\n    className,\n    ...(resolved.animated === false ? { transitionDuration: 0 } : {}),\n    // A tap outside obeys `closeOnOverlayClick`. A swipe-to-dismiss (no\n    // reason: SwipeableDrawer calls `onClose()` bare) closes. Escape is the\n    // hook's own listener alone, which honours `closeOnEscape` — the modal's\n    // is switched off below so the key never closes twice or past the flag.\n    onClose: (_event?: object, reason?: 'backdropClick' | 'escapeKeyDown') =>\n      reason === 'backdropClick' ? handleOverlayClick() : handleClose(),\n    PaperProps: {\n      ref: sheetRef,\n      sx: panelSx({ ...resolved, ...orientation, theme, currentHeight, isDragging, isAnimating }),\n    },\n    ModalProps: {\n      keepMounted: true,\n      disableEscapeKeyDown: true,\n      BackdropComponent: ClickCatcher,\n      BackdropProps: { 'data-testid': testId ? `${testId}-click-catcher` : undefined } as Partial<BackdropProps>,\n    },\n  };\n\n  const body = (\n    <SheetBody\n      {...resolved}\n      {...orientation}\n      testId={testId}\n      isDragging={isDragging}\n      onClose={handleClose}\n      onDragStart={handleDragStart}\n    />\n  );\n\n  // The draggable variant drives the panel's height itself; MUI's swipe handling\n  // would be a second thing moving it.\n  const isSwipeable = swipeable && !orientation.isDraggableVariant;\n\n  return (\n    <>\n      {showOverlay && isOpen && (\n        <SheetOverlay open={isOpen} onClick={handleOverlayClick} blur={variant === 'glass'} />\n      )}\n\n      {isSwipeable ? (\n        <SwipeableDrawer\n          {...drawerProps}\n          onOpen={handleSwipeOpen}\n          disableSwipeToOpen={false}\n          swipeAreaWidth={20}\n        >\n          {body}\n        </SwipeableDrawer>\n      ) : (\n        <Drawer {...drawerProps}>{body}</Drawer>\n      )}\n    </>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/{chunk-Z3DEMZ5J.js → chunk-IDRVQVDL.js}

@@ -13,7 +13,7 @@ import {
   rowTextSx,
   searchFieldSx,
   titleSx
-} from "./chunk-RLTCU57K.js";
+} from "./chunk-LZJHHMOF.js";
 import {
   CheckGlyph,
   SearchGlyph
@@ -152,4 +152,4 @@ export {
   PickerSheetSearch,
   PickerSheetList
 };
-//# sourceMappingURL=chunk-Z3DEMZ5J.js.map
+//# sourceMappingURL=chunk-IDRVQVDL.js.map

package/dist/chunk-IICBAAL7.js

@@ -0,0 +1,128 @@
+import {
+  PickerSheetHead,
+  PickerSheetList,
+  PickerSheetSearch
+} from "./chunk-IDRVQVDL.js";
+import {
+  usePickerSheet
+} from "./chunk-WSMUOFWF.js";
+import {
+  bodySx,
+  dialogPaperSx,
+  footSx,
+  sheetPaperSx
+} from "./chunk-LZJHHMOF.js";
+import {
+  METRICS
+} from "./chunk-VPGDYI63.js";
+import {
+  stackedOverlayZIndex
+} from "./chunk-MFU4Y25U.js";
+
+// src/components/form/PickerSheet/PickerSheet.tsx
+import { useId } from "react";
+import Box from "@mui/material/Box/index.js";
+import Dialog from "@mui/material/Dialog/index.js";
+import Drawer from "@mui/material/Drawer/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import useMediaQuery from "@mui/material/useMediaQuery/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ABOVE_SHEETS = { zIndex: stackedOverlayZIndex };
+function PickerSheetSurface({
+  open,
+  sheet,
+  onClose,
+  titleId,
+  dataTestId,
+  animated,
+  children
+}) {
+  const close = () => onClose();
+  const motion = animated ? {} : { transitionDuration: 0 };
+  if (sheet) {
+    const paper2 = {
+      sx: sheetPaperSx,
+      role: "dialog",
+      "aria-modal": true,
+      "aria-labelledby": titleId,
+      "data-testid": dataTestId
+    };
+    return /* @__PURE__ */ jsx(Drawer, { anchor: "bottom", open, onClose: close, sx: ABOVE_SHEETS, slotProps: { paper: paper2 }, ...motion, children });
+  }
+  const paper = { sx: dialogPaperSx, "data-testid": dataTestId };
+  return /* @__PURE__ */ jsx(Dialog, { open, onClose: close, "aria-labelledby": titleId, sx: ABOVE_SHEETS, slotProps: { paper }, ...motion, children });
+}
+function PickerSheet(props) {
+  const { open, onClose, kicker, title, searchPlaceholder, searchLabel, closeLabel, createLabel, createMeta, emptyText, foot } = props;
+  const dataTestId = props.dataTestId ?? "picker-sheet";
+  const theme = useTheme();
+  const sheet = useMediaQuery(theme.breakpoints.down(METRICS.sheetBreakpoint));
+  const baseId = useId();
+  const titleId = `${baseId}-title`;
+  const listId = `${baseId}-list`;
+  const rowId = (index) => `${baseId}-row-${index}`;
+  const state = usePickerSheet(props);
+  return /* @__PURE__ */ jsxs(
+    PickerSheetSurface,
+    {
+      open,
+      sheet,
+      onClose,
+      titleId,
+      dataTestId,
+      animated: props.animated ?? true,
+      children: [
+        /* @__PURE__ */ jsx(
+          PickerSheetHead,
+          {
+            kicker,
+            title,
+            titleId,
+            closeLabel,
+            onClose,
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { sx: bodySx, children: [
+          /* @__PURE__ */ jsx(
+            PickerSheetSearch,
+            {
+              query: state.query,
+              placeholder: searchPlaceholder,
+              label: searchLabel,
+              listId,
+              activeId: state.activeIndex >= 0 ? rowId(state.activeIndex) : void 0,
+              expanded: state.view.rowCount > 0,
+              inputRef: state.searchInputRef,
+              onQueryChange: state.setQuery,
+              onKeyDown: state.onSearchKeyDown,
+              dataTestId
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PickerSheetList,
+            {
+              view: state.view,
+              activeIndex: state.activeIndex,
+              cursorShown: state.cursorShown,
+              listId,
+              rowId,
+              listRef: state.listRef,
+              createLabel,
+              createMeta,
+              emptyText,
+              onChoose: state.choose,
+              dataTestId
+            }
+          ),
+          foot ? /* @__PURE__ */ jsx(Box, { component: "p", sx: footSx, "data-testid": `${dataTestId}-foot`, children: foot }) : null
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  PickerSheet
+};
+//# sourceMappingURL=chunk-IICBAAL7.js.map

package/dist/chunk-IICBAAL7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PickerSheet/PickerSheet.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport Box from '@mui/material/Box/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport Drawer from '@mui/material/Drawer/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\n\nimport { METRICS as CATEGORY_SELECT_METRICS } from '../CategorySelect/CategorySelect.styles';\nimport { stackedOverlayZIndex } from '../../../tokens/layers';\nimport { PickerSheetHead, PickerSheetList, PickerSheetSearch } from './PickerSheet.parts';\nimport { bodySx, dialogPaperSx, footSx, sheetPaperSx } from './PickerSheet.styles';\nimport type { PickerSheetProps } from './PickerSheet.types';\nimport { usePickerSheet } from './usePickerSheet';\n\n/**\n * Both surfaces clear the sheet ladder rather than taking MUI's default — the\n * same rule as `CategoryPanelSurface`. A `Dialog` sits at `zIndex.modal` and a\n * temporary `Drawer` a step lower, while `StackedModal` puts its second panel\n * at 1310: a picker opened from a stacked editor painted UNDER it (FUT-806).\n * See `tokens/layers`.\n */\nconst ABOVE_SHEETS = { zIndex: stackedOverlayZIndex } as const;\n\ninterface SurfaceProps {\n  open: boolean;\n  /** True below the sheet breakpoint — a bottom sheet instead of a centred dialog. */\n  sheet: boolean;\n  onClose: () => void;\n  titleId: string;\n  dataTestId: string;\n  /** False: open and close at once, with no slide or fade. */\n  animated: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * Where the sheet lives. Both surfaces are modal, which gives Esc, the\n * tap-outside dismissal and focus containment for free.\n */\nfunction PickerSheetSurface({\n  open,\n  sheet,\n  onClose,\n  titleId,\n  dataTestId,\n  animated,\n  children,\n}: SurfaceProps): React.JSX.Element {\n  const close = (): void => onClose();\n  const motion = animated ? {} : { transitionDuration: 0 };\n  if (sheet) {\n    // A Drawer's paper carries no dialog semantics of its own, so it is given them.\n    const paper = {\n      sx: sheetPaperSx,\n      role: 'dialog',\n      'aria-modal': true,\n      'aria-labelledby': titleId,\n      'data-testid': dataTestId,\n    };\n    return (\n      <Drawer anchor=\"bottom\" open={open} onClose={close} sx={ABOVE_SHEETS} slotProps={{ paper }} {...motion}>\n        {children}\n      </Drawer>\n    );\n  }\n  const paper = { sx: dialogPaperSx, 'data-testid': dataTestId };\n  return (\n    <Dialog open={open} onClose={close} aria-labelledby={titleId} sx={ABOVE_SHEETS} slotProps={{ paper }} {...motion}>\n      {children}\n    </Dialog>\n  );\n}\n\n/**\n * A searchable pick-or-create sheet: a title, a search box, a list of rows\n * (optionally a tree), and a create row when the query names nothing yet.\n *\n * A centred dialog on a pointer and a bottom sheet under `CategorySelect`'s\n * sheet breakpoint. Typing filters (case-insensitive substring over each\n * item's label and `searchText`, accents aside) and flattens the tree; ↑↓ move\n * the cursor, Enter picks,\n * Esc or a tap outside closes. Picking calls `onPick` and nothing else — the\n * caller decides when to close. All copy comes from the caller.\n */\nexport function PickerSheet(props: PickerSheetProps): React.JSX.Element {\n  const { open, onClose, kicker, title, searchPlaceholder, searchLabel, closeLabel, createLabel, createMeta, emptyText, foot } =\n    props;\n  const dataTestId = props.dataTestId ?? 'picker-sheet';\n  const theme = useTheme();\n  const sheet = useMediaQuery(theme.breakpoints.down(CATEGORY_SELECT_METRICS.sheetBreakpoint));\n  const baseId = useId();\n  const titleId = `${baseId}-title`;\n  const listId = `${baseId}-list`;\n  const rowId = (index: number): string => `${baseId}-row-${index}`;\n  const state = usePickerSheet(props);\n\n  return (\n    <PickerSheetSurface\n      open={open}\n      sheet={sheet}\n      onClose={onClose}\n      titleId={titleId}\n      dataTestId={dataTestId}\n      animated={props.animated ?? true}\n    >\n      <PickerSheetHead\n        kicker={kicker}\n        title={title}\n        titleId={titleId}\n        closeLabel={closeLabel}\n        onClose={onClose}\n        dataTestId={dataTestId}\n      />\n      <Box sx={bodySx}>\n        <PickerSheetSearch\n          query={state.query}\n          placeholder={searchPlaceholder}\n          label={searchLabel}\n          listId={listId}\n          activeId={state.activeIndex >= 0 ? rowId(state.activeIndex) : undefined}\n          expanded={state.view.rowCount > 0}\n          inputRef={state.searchInputRef}\n          onQueryChange={state.setQuery}\n          onKeyDown={state.onSearchKeyDown}\n          dataTestId={dataTestId}\n        />\n        <PickerSheetList\n          view={state.view}\n          activeIndex={state.activeIndex}\n          cursorShown={state.cursorShown}\n          listId={listId}\n          rowId={rowId}\n          listRef={state.listRef}\n          createLabel={createLabel}\n          createMeta={createMeta}\n          emptyText={emptyText}\n          onChoose={state.choose}\n          dataTestId={dataTestId}\n        />\n        {foot ? (\n          <Box component=\"p\" sx={footSx} data-testid={`${dataTestId}-foot`}>\n            {foot}\n          </Box>\n        ) : null}\n      </Box>\n    </PickerSheetSurface>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,aAAa;AACtB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,YAAY;AACnB,SAAS,gBAAgB;AACzB,OAAO,mBAAmB;AAuDpB,cAqDA,YArDA;AAvCN,IAAM,eAAe,EAAE,QAAQ,qBAAqB;AAkBpD,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,QAAM,QAAQ,MAAY,QAAQ;AAClC,QAAM,SAAS,WAAW,CAAC,IAAI,EAAE,oBAAoB,EAAE;AACvD,MAAI,OAAO;AAET,UAAMA,SAAQ;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,eAAe;AAAA,IACjB;AACA,WACE,oBAAC,UAAO,QAAO,UAAS,MAAY,SAAS,OAAO,IAAI,cAAc,WAAW,EAAE,OAAAA,OAAM,GAAI,GAAG,QAC7F,UACH;AAAA,EAEJ;AACA,QAAM,QAAQ,EAAE,IAAI,eAAe,eAAe,WAAW;AAC7D,SACE,oBAAC,UAAO,MAAY,SAAS,OAAO,mBAAiB,SAAS,IAAI,cAAc,WAAW,EAAE,MAAM,GAAI,GAAG,QACvG,UACH;AAEJ;AAaO,SAAS,YAAY,OAA4C;AACtE,QAAM,EAAE,MAAM,SAAS,QAAQ,OAAO,mBAAmB,aAAa,YAAY,aAAa,YAAY,WAAW,KAAK,IACzH;AACF,QAAM,aAAa,MAAM,cAAc;AACvC,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,cAAc,MAAM,YAAY,KAAK,QAAwB,eAAe,CAAC;AAC3F,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,GAAG,MAAM;AACzB,QAAM,SAAS,GAAG,MAAM;AACxB,QAAM,QAAQ,CAAC,UAA0B,GAAG,MAAM,QAAQ,KAAK;AAC/D,QAAM,QAAQ,eAAe,KAAK;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,MAAM,YAAY;AAAA,MAE5B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA,qBAAC,OAAI,IAAI,QACP;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,MAAM;AAAA,cACb,aAAa;AAAA,cACb,OAAO;AAAA,cACP;AAAA,cACA,UAAU,MAAM,eAAe,IAAI,MAAM,MAAM,WAAW,IAAI;AAAA,cAC9D,UAAU,MAAM,KAAK,WAAW;AAAA,cAChC,UAAU,MAAM;AAAA,cAChB,eAAe,MAAM;AAAA,cACrB,WAAW,MAAM;AAAA,cACjB;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,MAAM;AAAA,cACZ,aAAa,MAAM;AAAA,cACnB,aAAa,MAAM;AAAA,cACnB;AAAA,cACA;AAAA,cACA,SAAS,MAAM;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU,MAAM;AAAA,cAChB;AAAA;AAAA,UACF;AAAA,UACC,OACC,oBAAC,OAAI,WAAU,KAAI,IAAI,QAAQ,eAAa,GAAG,UAAU,SACtD,gBACH,IACE;AAAA,WACN;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["paper"]}

package/dist/{chunk-RLTCU57K.js → chunk-LZJHHMOF.js}

@@ -1,3 +1,6 @@
+import {
+  surfaces
+} from "./chunk-TZ23DNKY.js";
 import {
   fieldBorder,
   fieldHeight
@@ -43,6 +46,7 @@ var METRICS = {
   /** The prototype's body line-height; the sheet sets it rather than inheriting a host's. */
   lineHeight: 1.4
 };
+var hoverWash = (theme) => alpha(theme.palette.divider, 0.5);
 var panelShadow = (theme) => `${rems(theme, 0, 16, 48)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`;
 var dialogPaperSx = (theme) => ({
   width: rem(theme, METRICS.dialogWidthPx),
@@ -51,7 +55,8 @@ var dialogPaperSx = (theme) => ({
   margin: 0,
   borderRadius: rem(theme, METRICS.dialogRadiusPx),
   boxShadow: panelShadow(theme),
-  background: theme.palette.background.paper,
+  // The raised step (`uiSurfaces.raised`): a sheet is nearer than the page.
+  background: surfaces(theme).raised,
   backgroundImage: "none",
   display: "flex",
   flexDirection: "column",
@@ -62,7 +67,8 @@ var sheetPaperSx = (theme) => ({
   maxHeight: "88%",
   borderRadius: rems(theme, METRICS.sheetRadiusPx, METRICS.sheetRadiusPx, 0, 0),
   boxShadow: panelShadow(theme),
-  background: theme.palette.background.paper,
+  // The raised step (`uiSurfaces.raised`): a sheet is nearer than the page.
+  background: surfaces(theme).raised,
   backgroundImage: "none",
   display: "flex",
   flexDirection: "column",
@@ -74,7 +80,7 @@ var headSx = (theme) => ({
   gap: rem(theme, METRICS.headGapPx),
   padding: rems(theme, 14, 16),
   // A shade under the controls' own border: the rule separates, it does not frame.
-  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.6)}`,
+  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.66)}`,
   flex: "0 0 auto"
 });
 var kickerSx = (theme) => ({
@@ -102,8 +108,9 @@ var closeButtonSx = (theme) => ({
   color: theme.palette.text.primary,
   cursor: "pointer",
   "& svg": { width: rem(theme, METRICS.closeGlyphPx), height: rem(theme, METRICS.closeGlyphPx) },
-  "&:hover": { background: theme.palette.action.hover },
-  "&:focus-visible": { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) }
+  "&:hover": { background: hoverWash(theme) },
+  // The browser's own ring, as on every control the design draws.
+  "&:focus-visible": { outlineStyle: "auto", outlineWidth: "1px" }
 });
 var bodySx = (theme) => ({
   display: "flex",
@@ -161,7 +168,7 @@ var listSx = (theme) => ({
 var rowPaddingLeft = (theme, depth) => rem(theme, depth > 0 ? METRICS.rowIndentStepPx * depth : METRICS.rowPaddingPx);
 function rowBackground(theme, selected, active) {
   if (selected) return alpha(theme.palette.primary.main, 0.1);
-  return active ? theme.palette.action.hover : "transparent";
+  return active ? hoverWash(theme) : "transparent";
 }
 var rowSx = (theme, selected, active) => ({
   display: "flex",
@@ -169,6 +176,9 @@ var rowSx = (theme, selected, active) => ({
   gap: rem(theme, 10),
   padding: rem(theme, METRICS.rowPaddingPx),
   minHeight: rem(theme, METRICS.rowMinHeightPx),
+  // The list is a capped flex column: without this a row with a meta line
+  // shrinks to the 44px floor and the two lines overprint.
+  flexShrink: 0,
   boxSizing: "border-box",
   borderRadius: rem(theme, METRICS.controlRadiusPx),
   textAlign: "left",
@@ -177,7 +187,7 @@ var rowSx = (theme, selected, active) => ({
   color: theme.palette.text.primary,
   background: rowBackground(theme, selected, active),
   boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : "none",
-  "&:hover": { background: selected ? alpha(theme.palette.primary.main, 0.1) : theme.palette.action.hover }
+  "&:hover": { background: selected ? alpha(theme.palette.primary.main, 0.1) : hoverWash(theme) }
 });
 var rowTextSx = { flex: "1 1 auto", minWidth: 0 };
 var rowLabelSx = (theme) => ({
@@ -235,4 +245,4 @@ export {
   emptySx,
   footSx
 };
-//# sourceMappingURL=chunk-RLTCU57K.js.map
+//# sourceMappingURL=chunk-LZJHHMOF.js.map

package/dist/chunk-LZJHHMOF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PickerSheet/PickerSheet.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';\n\nimport { fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldWell, uiInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\nimport { surfaces } from '../../../tokens/surfaces';\n\n/**\n * The prototype's measurements, verbatim, in the design's px.\n *\n * Each is drawn through `rem()` where it is read, so the sheet follows a\n * density mode the way every other surface in the package does. Colours come\n * from the palette (a white-labelled tenant and dark mode carry through).\n */\nconst METRICS = {\n  dialogWidthPx: 520,\n  dialogMaxHeightPx: 780,\n  dialogRadiusPx: 14,\n  /** The gap a centred dialog keeps from the viewport edge. */\n  dialogMarginPx: 32,\n  sheetRadiusPx: 16,\n  headGapPx: 10,\n  closeButtonPx: 36,\n  controlRadiusPx: 8,\n  bodyPaddingPx: 16,\n  bodyGapPx: 12,\n  listMaxHeightPx: 380,\n  listGapPx: 2,\n  rowPaddingPx: 10,\n  rowMinHeightPx: 44,\n  /** Left padding per level of `indent` (`.pitem.ind{padding-left:28px}` at depth 1). */\n  rowIndentStepPx: 28,\n  checkGlyphPx: 16,\n  closeGlyphPx: 18,\n  searchGlyphPx: 16,\n  /** The magnifier's inset from the field's inner edge, and the gap before the text. */\n  searchGlyphInsetPx: 10,\n  searchGlyphGapPx: 6,\n  /** The prototype's body line-height; the sheet sets it rather than inheriting a host's. */\n  lineHeight: 1.4,\n} as const;\n\n/**\n * A quiet control's hover: the hairline at half strength, a green-grey step\n * (#E9EDE7 on one adopter's raised surface) rather than MUI's black wash.\n */\nconst hoverWash = (theme: Theme): string => alpha(theme.palette.divider, 0.5);\n\n/** The panel's shadow: `0 16px 48px` of ink at 0.28. */\nconst panelShadow = (theme: Theme): string =>\n  `${rems(theme, 0, 16, 48)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`;\n\n/** The centred dialog's paper, on a pointer. */\nexport const dialogPaperSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, METRICS.dialogWidthPx),\n  maxWidth: `calc(100% - ${rem(theme, METRICS.dialogMarginPx)})`,\n  maxHeight: `min(${rem(theme, METRICS.dialogMaxHeightPx)}, calc(100% - ${rem(theme, METRICS.dialogMarginPx * 2)}))`,\n  margin: 0,\n  borderRadius: rem(theme, METRICS.dialogRadiusPx),\n  boxShadow: panelShadow(theme),\n  // The raised step (`uiSurfaces.raised`): a sheet is nearer than the page.\n  background: surfaces(theme).raised,\n  backgroundImage: 'none',\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n});\n\n/** The bottom sheet's paper, on a phone: full width, no grab handle. */\nexport const sheetPaperSx = (theme: Theme): CSSObject => ({\n  width: '100%',\n  maxHeight: '88%',\n  borderRadius: rems(theme, METRICS.sheetRadiusPx, METRICS.sheetRadiusPx, 0, 0),\n  boxShadow: panelShadow(theme),\n  // The raised step (`uiSurfaces.raised`): a sheet is nearer than the page.\n  background: surfaces(theme).raised,\n  backgroundImage: 'none',\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n});\n\n/** `.sh` — kicker and title on the left, the close button on the right. */\nexport const headSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: rem(theme, METRICS.headGapPx),\n  padding: rems(theme, 14, 16),\n  // A shade under the controls' own border: the rule separates, it does not frame.\n  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.66)}`,\n  flex: '0 0 auto',\n});\n\nexport const kickerSx = (theme: Theme): CSSObject => ({\n  fontSize: rem(theme, 11.5),\n  color: theme.palette.text.secondary,\n  lineHeight: METRICS.lineHeight,\n});\n\nexport const titleSx = (theme: Theme): CSSObject => ({\n  margin: 0,\n  fontSize: rem(theme, 14),\n  fontWeight: 700,\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.primary,\n});\n\nexport const closeButtonSx = (theme: Theme): CSSObject => ({\n  flex: '0 0 auto',\n  width: rem(theme, METRICS.closeButtonPx),\n  height: rem(theme, METRICS.closeButtonPx),\n  display: 'grid',\n  placeItems: 'center',\n  padding: 0,\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: rem(theme, METRICS.controlRadiusPx),\n  background: 'transparent',\n  color: theme.palette.text.primary,\n  cursor: 'pointer',\n  '& svg': { width: rem(theme, METRICS.closeGlyphPx), height: rem(theme, METRICS.closeGlyphPx) },\n  '&:hover': { background: hoverWash(theme) },\n  // The browser's own ring, as on every control the design draws.\n  '&:focus-visible': { outlineStyle: 'auto', outlineWidth: '1px' },\n});\n\n/** `.sb` — the scrolling body: search, list, foot. */\nexport const bodySx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: rem(theme, METRICS.bodyGapPx),\n  padding: rem(theme, METRICS.bodyPaddingPx),\n  overflow: 'auto',\n  minHeight: 0,\n  flex: '1 1 auto',\n});\n\n/**\n * The search field: the library's field height, border and corner, with a\n * leading magnifier. White on the light sheet, so the field reads as a field\n * against the paper behind it.\n */\nexport const searchFieldSx = (theme: Theme): CSSObject => ({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  flex: '0 0 auto',\n  '& > svg': {\n    position: 'absolute',\n    // + 1 for the input's own border, which the glyph sits inside of.\n    left: rem(theme, METRICS.searchGlyphInsetPx + 1),\n    width: rem(theme, METRICS.searchGlyphPx),\n    height: rem(theme, METRICS.searchGlyphPx),\n    color: theme.palette.text.secondary,\n    pointerEvents: 'none',\n    zIndex: 1,\n  },\n  '& input': {\n    width: '100%',\n    height: fieldHeight(theme),\n    boxSizing: 'border-box',\n    padding: rems(theme, 0, 10, 0, METRICS.searchGlyphInsetPx + METRICS.searchGlyphPx + METRICS.searchGlyphGapPx),\n    fontSize: rem(theme, 14),\n    border: fieldBorder(theme),\n    borderRadius: fieldRadiusPx(theme),\n    background: fieldWell(theme),\n    color: theme.palette.text.primary,\n    '&:focus': {\n      outline: 'none',\n      borderColor: theme.palette.primary.main,\n      boxShadow: `0 0 0 ${rem(theme, 3)} ${alpha(theme.palette.primary.main, 0.15)}`,\n    },\n  },\n});\n\n/** The list: a column, scrolling on its own past 380px. */\nexport const listSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: rem(theme, METRICS.listGapPx),\n  maxHeight: rem(theme, METRICS.listMaxHeightPx),\n  overflow: 'auto',\n  overscrollBehavior: 'contain',\n  margin: 0,\n  padding: 0,\n  listStyle: 'none',\n  flex: '0 1 auto',\n});\n\n/** Left padding for a row at `depth` — the row's own 10px at depth 0, 28px per level below it. */\nexport const rowPaddingLeft = (theme: Theme, depth: number): string =>\n  rem(theme, depth > 0 ? METRICS.rowIndentStepPx * depth : METRICS.rowPaddingPx);\n\n/** Background of a row: selected wins over the keyboard cursor, which wins over rest. */\nfunction rowBackground(theme: Theme, selected: boolean, active: boolean): string {\n  if (selected) return alpha(theme.palette.primary.main, 0.1);\n  return active ? hoverWash(theme) : 'transparent';\n}\n\n/** `.pitem` — a row. `active` is the keyboard cursor, drawn as a ring so it reads apart from `selected`. */\nexport const rowSx = (theme: Theme, selected: boolean, active: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: rem(theme, 10),\n  padding: rem(theme, METRICS.rowPaddingPx),\n  minHeight: rem(theme, METRICS.rowMinHeightPx),\n  // The list is a capped flex column: without this a row with a meta line\n  // shrinks to the 44px floor and the two lines overprint.\n  flexShrink: 0,\n  boxSizing: 'border-box',\n  borderRadius: rem(theme, METRICS.controlRadiusPx),\n  textAlign: 'left',\n  cursor: 'pointer',\n  userSelect: 'none',\n  color: theme.palette.text.primary,\n  background: rowBackground(theme, selected, active),\n  boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : 'none',\n  '&:hover': { background: selected ? alpha(theme.palette.primary.main, 0.1) : hoverWash(theme) },\n});\n\nexport const rowTextSx: CSSObject = { flex: '1 1 auto', minWidth: 0 };\n\nexport const rowLabelSx = (theme: Theme): CSSObject => ({\n  display: 'block',\n  fontSize: rem(theme, 14),\n  lineHeight: METRICS.lineHeight,\n});\n\nexport const rowMetaSx = (theme: Theme): CSSObject => ({\n  display: 'block',\n  fontSize: rem(theme, 12),\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.secondary,\n});\n\nexport const checkSx = (theme: Theme): CSSObject => ({\n  flex: '0 0 auto',\n  display: 'grid',\n  color: theme.palette.primary.main,\n  '& svg': { width: rem(theme, METRICS.checkGlyphPx), height: rem(theme, METRICS.checkGlyphPx) },\n});\n\n/** The create row's text: the accent, at 600. */\nexport const createLabelSx = (theme: Theme): CSSObject => ({\n  ...rowLabelSx(theme),\n  color: theme.palette.primary.main,\n  fontWeight: 600,\n});\n\nexport const emptySx = (theme: Theme): CSSObject => ({\n  fontSize: rem(theme, 12),\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.secondary,\n  padding: rem(theme, 10),\n});\n\nexport const footSx = (theme: Theme): CSSObject => ({\n  margin: 0,\n  fontSize: rem(theme, 12),\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.secondary,\n});\n"],"mappings":"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","names":[]}

package/dist/{chunk-GWL5FYPN.js → chunk-OZGKIHAA.js}

@@ -1,6 +1,6 @@
 import {
   Sheet
-} from "./chunk-642NSD7N.js";
+} from "./chunk-HG7MCNRR.js";
 import {
   Dialog
 } from "./chunk-GMJBWOIU.js";
@@ -166,4 +166,4 @@ AppHeaderDetails.displayName = "AppHeaderDetails";
 export {
   AppHeaderDetails
 };
-//# sourceMappingURL=chunk-GWL5FYPN.js.map
+//# sourceMappingURL=chunk-OZGKIHAA.js.map

package/dist/{chunk-ZQRNCUBB.js → chunk-WSMUOFWF.js}

@@ -5,14 +5,7 @@ import {
 
 // src/components/form/PickerSheet/usePickerSheet.ts
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-function useSheetScroll(open, activeIndex, listRef) {
-  useEffect(() => {
-    if (!open) return void 0;
-    const frame = requestAnimationFrame(() => {
-      listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: "nearest" });
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [open, listRef]);
+function useCursorScroll(activeIndex, listRef) {
   useEffect(() => {
     if (activeIndex < 0) return;
     const rows = listRef.current?.querySelectorAll('[role="option"]');
@@ -37,7 +30,7 @@ function usePickerSheet({ open, items, onPick, onCreate, createLabel }) {
   const creatable = Boolean(onCreate && createLabel);
   const view = useMemo(() => pickerSheetView(items, query, creatable), [items, query, creatable]);
   const activeIndex = rawActiveIndex < view.rowCount ? rawActiveIndex : -1;
-  useSheetScroll(open, activeIndex, listRef);
+  useCursorScroll(activeIndex, listRef);
   const setQuery = useCallback((next) => {
     setRawQuery(next);
     setActiveIndex(next.trim() ? 0 : -1);
@@ -75,4 +68,4 @@ function usePickerSheet({ open, items, onPick, onCreate, createLabel }) {
 export {
   usePickerSheet
 };
-//# sourceMappingURL=chunk-ZQRNCUBB.js.map
+//# sourceMappingURL=chunk-WSMUOFWF.js.map

package/dist/chunk-WSMUOFWF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/PickerSheet/usePickerSheet.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { pickerSheetView, stepActiveIndex, type PickerSheetView } from './picker-sheet-model';\nimport type { PickerSheetProps } from './PickerSheet.types';\n\n/** Everything the sheet's parts read: the query, the derived list, the cursor and the handlers. */\ninterface PickerSheetState {\n  query: string;\n  view: PickerSheetView;\n  /** The keyboard cursor, an index into `view` (items, then the create row); -1 for none. Always a row that exists. */\n  activeIndex: number;\n  /** Draw the cursor: only once an arrow key has moved it, never from typing alone. */\n  cursorShown: boolean;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  listRef: React.RefObject<HTMLUListElement | null>;\n  setQuery: (next: string) => void;\n  /** Pick the row at `index` — an item, or the create row when it is the last one. */\n  choose: (index: number) => void;\n  onSearchKeyDown: (event: React.KeyboardEvent) => void;\n}\n\ntype HookProps = Pick<PickerSheetProps, 'open' | 'items' | 'onPick' | 'onCreate' | 'createLabel'>;\n\n/**\n * Keep the keyboard cursor in view.\n *\n * Nothing inside is focused on open — the modal focuses its own paper. Focusing\n * the search box raised a phone's keyboard over the list it was opened to show.\n * The list opens at its top, the selected row wherever it falls (the design's\n * picker does not jump to it).\n */\nfunction useCursorScroll(activeIndex: number, listRef: React.RefObject<HTMLUListElement | null>): void {\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const rows = listRef.current?.querySelectorAll('[role=\"option\"]');\n    rows?.[activeIndex]?.scrollIntoView?.({ block: 'nearest' });\n  }, [activeIndex, listRef]);\n}\n\n/**\n * The sheet's state. The query resets every time the sheet opens; typing puts\n * the cursor on the first match, so \"type, then Enter\" picks it (or creates,\n * when the create row is all there is).\n */\nexport function usePickerSheet({ open, items, onPick, onCreate, createLabel }: HookProps): PickerSheetState {\n  const [query, setRawQuery] = useState('');\n  const [rawActiveIndex, setActiveIndex] = useState(-1);\n  const [cursorShown, setCursorShown] = useState(false);\n  const searchInputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLUListElement | null>(null);\n\n  // Reset while rendering the frame that opens the sheet, not in an effect\n  // after it — an effect would paint the last session's query for one frame.\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (open) {\n      setRawQuery('');\n      setActiveIndex(-1);\n      setCursorShown(false);\n    }\n  }\n\n  const creatable = Boolean(onCreate && createLabel);\n  const view = useMemo(() => pickerSheetView(items, query, creatable), [items, query, creatable]);\n  // Clamped on read: the rows can shrink under the cursor (a query, new items),\n  // and `aria-activedescendant` must never name a row that is not there.\n  const activeIndex = rawActiveIndex < view.rowCount ? rawActiveIndex : -1;\n\n  useCursorScroll(activeIndex, listRef);\n\n  const setQuery = useCallback((next: string) => {\n    setRawQuery(next);\n    setActiveIndex(next.trim() ? 0 : -1);\n  }, []);\n\n  const choose = useCallback(\n    (index: number) => {\n      const item = view.items[index];\n      if (item) {\n        onPick(item.id);\n        return;\n      }\n      if (view.canCreate && index === view.items.length) onCreate?.(view.query);\n    },\n    [view, onPick, onCreate],\n  );\n\n  const onSearchKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault();\n        const delta = event.key === 'ArrowDown' ? 1 : -1;\n        setActiveIndex(stepActiveIndex(activeIndex, delta, view.rowCount));\n        setCursorShown(true);\n        return;\n      }\n      if (event.key === 'Enter' && activeIndex >= 0) {\n        event.preventDefault();\n        choose(activeIndex);\n      }\n      // Escape is the modal's: it closes through `onClose`, once.\n    },\n    [view.rowCount, activeIndex, choose],\n  );\n\n  return { query, view, activeIndex, cursorShown, searchInputRef, listRef, setQuery, choose, onSearchKeyDown };\n}\n"],"mappings":";;;;;;AAEA,SAAS,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AA+BlE,SAAS,gBAAgB,aAAqB,SAAyD;AACrG,YAAU,MAAM;AACd,QAAI,cAAc,EAAG;AACrB,UAAM,OAAO,QAAQ,SAAS,iBAAiB,iBAAiB;AAChE,WAAO,WAAW,GAAG,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAAA,EAC5D,GAAG,CAAC,aAAa,OAAO,CAAC;AAC3B;AAOO,SAAS,eAAe,EAAE,MAAM,OAAO,QAAQ,UAAU,YAAY,GAAgC;AAC1G,QAAM,CAAC,OAAO,WAAW,IAAI,SAAS,EAAE;AACxC,QAAM,CAAC,gBAAgB,cAAc,IAAI,SAAS,EAAE;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,iBAAiB,OAAgC,IAAI;AAC3D,QAAM,UAAU,OAAgC,IAAI;AAIpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AACf,QAAI,MAAM;AACR,kBAAY,EAAE;AACd,qBAAe,EAAE;AACjB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,YAAY,QAAQ,YAAY,WAAW;AACjD,QAAM,OAAO,QAAQ,MAAM,gBAAgB,OAAO,OAAO,SAAS,GAAG,CAAC,OAAO,OAAO,SAAS,CAAC;AAG9F,QAAM,cAAc,iBAAiB,KAAK,WAAW,iBAAiB;AAEtE,kBAAgB,aAAa,OAAO;AAEpC,QAAM,WAAW,YAAY,CAAC,SAAiB;AAC7C,gBAAY,IAAI;AAChB,mBAAe,KAAK,KAAK,IAAI,IAAI,EAAE;AAAA,EACrC,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,CAAC,UAAkB;AACjB,YAAM,OAAO,KAAK,MAAM,KAAK;AAC7B,UAAI,MAAM;AACR,eAAO,KAAK,EAAE;AACd;AAAA,MACF;AACA,UAAI,KAAK,aAAa,UAAU,KAAK,MAAM,OAAQ,YAAW,KAAK,KAAK;AAAA,IAC1E;AAAA,IACA,CAAC,MAAM,QAAQ,QAAQ;AAAA,EACzB;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA+B;AAC9B,UAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AACxD,cAAM,eAAe;AACrB,cAAM,QAAQ,MAAM,QAAQ,cAAc,IAAI;AAC9C,uBAAe,gBAAgB,aAAa,OAAO,KAAK,QAAQ,CAAC;AACjE,uBAAe,IAAI;AACnB;AAAA,MACF;AACA,UAAI,MAAM,QAAQ,WAAW,eAAe,GAAG;AAC7C,cAAM,eAAe;AACrB,eAAO,WAAW;AAAA,MACpB;AAAA,IAEF;AAAA,IACA,CAAC,KAAK,UAAU,aAAa,MAAM;AAAA,EACrC;AAEA,SAAO,EAAE,OAAO,MAAM,aAAa,aAAa,gBAAgB,SAAS,UAAU,QAAQ,gBAAgB;AAC7G;","names":[]}

package/dist/data-display/Sheet.js

@@ -1,7 +1,7 @@
 import "../chunk-ITACE45O.js";
 import {
   Sheet
-} from "../chunk-642NSD7N.js";
+} from "../chunk-HG7MCNRR.js";
 import "../chunk-3ROCD7XF.js";
 import "../chunk-LYVTJLCF.js";
 import "../chunk-CRN4KKNI.js";

package/dist/form/PickerSheet.js

@@ -1,13 +1,14 @@
 import {
   PickerSheet
-} from "../chunk-43UPEJML.js";
-import "../chunk-Z3DEMZ5J.js";
-import "../chunk-ZQRNCUBB.js";
+} from "../chunk-IICBAAL7.js";
+import "../chunk-IDRVQVDL.js";
+import "../chunk-WSMUOFWF.js";
 import "../chunk-QZOXMH7X.js";
-import "../chunk-RLTCU57K.js";
+import "../chunk-LZJHHMOF.js";
 import "../chunk-VPGDYI63.js";
 import "../chunk-DMNZD3Q7.js";
 import "../chunk-PN4HVM43.js";
+import "../chunk-TZ23DNKY.js";
 import "../chunk-RGVNXES5.js";
 import "../chunk-GDN2LUTZ.js";
 import "../chunk-7ZADLRLP.js";

package/dist/navigation/AppHeader.js

@@ -12,13 +12,13 @@ import {
 } from "../chunk-GWFAINQ7.js";
 import {
   AppHeaderDetails
-} from "../chunk-GWL5FYPN.js";
+} from "../chunk-OZGKIHAA.js";
 import {
   brandGradient,
   highlightOf,
   initialsOf
 } from "../chunk-IQU4HKND.js";
-import "../chunk-642NSD7N.js";
+import "../chunk-HG7MCNRR.js";
 import "../chunk-3ROCD7XF.js";
 import "../chunk-LYVTJLCF.js";
 import "../chunk-CRN4KKNI.js";

package/dist/types/components/data-display/Sheet/Sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqFrF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4EtC,CAAC"}
+{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqFrF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA6EtC,CAAC"}

package/dist/types/components/data-display/Sheet/Sheet.types.d.ts

@@ -54,6 +54,8 @@ export interface SheetProps {
     fullHeight?: boolean;
     rounded?: boolean;
     elevation?: number;
+    /** Slide in and out (default). `false` opens and closes at once. */
+    animated?: boolean;
     dataTestId?: string;
 }
 export interface SheetHeaderProps {

package/dist/types/components/data-display/Sheet/Sheet.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sheet.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sheet.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Sheet/Sheet.types.ts"],"names":[],"mappings":"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"}

package/dist/types/components/form/PickerSheet/PickerSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerSheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/PickerSheet.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAmD5D;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAwDtE"}
+{"version":3,"file":"PickerSheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/PickerSheet.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AA8D5D;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA+DtE"}

package/dist/types/components/form/PickerSheet/PickerSheet.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerSheet.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/PickerSheet.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA8ClF,gDAAgD;AAChD,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAY3C,CAAC;AAEH,wEAAwE;AACxE,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,KAAG,SAU1C,CAAC;AAEH,2EAA2E;AAC3E,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAQpC,CAAC;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,KAAG,SAItC,CAAC;AAEH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,SAMrC,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAe3C,CAAC;AAEH,sDAAsD;AACtD,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAQpC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SA+B3C,CAAC;AAEH,2DAA2D;AAC3D,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAWpC,CAAC;AAEH,kGAAkG;AAClG,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,MACmB,CAAC;AAQjF,4GAA4G;AAC5G,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,EAAE,UAAU,OAAO,EAAE,QAAQ,OAAO,KAAG,SAevE,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,SAA6C,CAAC;AAEtE,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAIxC,CAAC;AAEH,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,KAAG,SAKvC,CAAC;AAEH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,SAKrC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAI3C,CAAC;AAEH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,SAKrC,CAAC;AAEH,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAKpC,CAAC"}
+{"version":3,"file":"PickerSheet.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/PickerSheet.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAqDlF,gDAAgD;AAChD,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAa3C,CAAC;AAEH,wEAAwE;AACxE,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,KAAG,SAW1C,CAAC;AAEH,2EAA2E;AAC3E,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAQpC,CAAC;AAEH,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,KAAG,SAItC,CAAC;AAEH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,SAMrC,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAgB3C,CAAC;AAEH,sDAAsD;AACtD,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAQpC,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SA+B3C,CAAC;AAEH,2DAA2D;AAC3D,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAWpC,CAAC;AAEH,kGAAkG;AAClG,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,EAAE,OAAO,MAAM,KAAG,MACmB,CAAC;AAQjF,4GAA4G;AAC5G,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,EAAE,UAAU,OAAO,EAAE,QAAQ,OAAO,KAAG,SAkBvE,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,SAA6C,CAAC;AAEtE,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,KAAG,SAIxC,CAAC;AAEH,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,KAAG,SAKvC,CAAC;AAEH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,SAKrC,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,SAI3C,CAAC;AAEH,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,SAKrC,CAAC;AAEH,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,KAAG,SAKpC,CAAC"}

package/dist/types/components/form/PickerSheet/PickerSheet.types.d.ts

@@ -55,6 +55,8 @@ export interface PickerSheetProps {
     emptyText?: (query: string) => string;
     /** The note under the list. */
     foot?: string;
+    /** Slide or fade in and out (default). `false` opens and closes at once. */
+    animated?: boolean;
     /**
      * Base test id (default `picker-sheet`). Sub-elements get `${id}-search`,
      * `${id}-item-${item.id}`, `${id}-create`, `${id}-close`.

package/dist/types/components/form/PickerSheet/PickerSheet.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PickerSheet.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/PickerSheet.types.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,4FAA4F;IAC5F,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,kEAAkE;IAClE,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,8FAA8F;IAC9F,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"PickerSheet.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/PickerSheet.types.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,MAAM,WAAW,eAAe;IAC9B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,4FAA4F;IAC5F,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,kEAAkE;IAClE,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,8FAA8F;IAC9F,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iFAAiF;IACjF,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types/components/form/PickerSheet/usePickerSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePickerSheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/usePickerSheet.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoC,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,mGAAmG;AACnG,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,qHAAqH;IACrH,WAAW,EAAE,MAAM,CAAC;IACpB,qFAAqF;IACrF,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACzD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oFAAoF;IACpF,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACvD;AAED,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC,CAAC;AA8BlG;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,SAAS,GAAG,gBAAgB,CA+D1G"}
+{"version":3,"file":"usePickerSheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/PickerSheet/usePickerSheet.ts"],"names":[],"mappings":"AAIA,OAAO,EAAoC,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,mGAAmG;AACnG,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB,qHAAqH;IACrH,WAAW,EAAE,MAAM,CAAC;IACpB,qFAAqF;IACrF,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACzD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,oFAAoF;IACpF,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,eAAe,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACvD;AAED,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC,CAAC;AAkBlG;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,SAAS,GAAG,gBAAgB,CA+D1G"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.64.0",
+  "version": "6.65.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/Sheet/Sheet.md

@@ -41,6 +41,7 @@ A vertical sheet's **width** is one rule rather than one per preset: `min(100%,
 - **pulse** (boolean): Enable pulse animation effect
 - **rounded** (boolean): Apply rounded corners to the sheet
 - **elevation** (number): Shadow depth level (0-24)
+- **animated** (boolean, default true): `false` opens and closes the panel at once, with no slide
 
 ### Interactive Behavior
 

package/src/components/data-display/Sheet/Sheet.tsx

@@ -125,6 +125,7 @@ export const Sheet: React.FC<SheetProps> = (props) => {
     anchor: position,
     open: isOpen,
     className,
+    ...(resolved.animated === false ? { transitionDuration: 0 } : {}),
     // A tap outside obeys `closeOnOverlayClick`. A swipe-to-dismiss (no
     // reason: SwipeableDrawer calls `onClose()` bare) closes. Escape is the
     // hook's own listener alone, which honours `closeOnEscape` — the modal's

package/src/components/data-display/Sheet/Sheet.types.ts

@@ -55,6 +55,8 @@ export interface SheetProps {
   fullHeight?: boolean;
   rounded?: boolean;
   elevation?: number;
+  /** Slide in and out (default). `false` opens and closes at once. */
+  animated?: boolean;
   dataTestId?: string;
 }
 

package/src/components/form/PickerSheet/PickerSheet.md

@@ -40,11 +40,12 @@ Every word it shows comes from the caller: the package ships no copy for it.
 - **onCreate** (`(query: string) => void`): called with the TRIMMED query. The create row is offered last when both `createLabel` and `onCreate` are given and the trimmed query matches no item label exactly (case and accents aside).
 - **emptyText** (`(query: string) => string`): shown instead of the list when nothing matches and there is no create row.
 - **foot** (`string`): the note under the list.
+- **animated** (`boolean`, default `true`): `false` opens and closes the sheet at once, with no fade or slide — for a host whose design draws its overlays without motion.
 - **dataTestId** (`string`, default `picker-sheet`): on the sheet's paper. Sub-elements: `${id}-search`, `${id}-item-${item.id}`, `${id}-create`, `${id}-close`, plus `${id}-check-${item.id}`, `${id}-create-meta`, `${id}-empty`, `${id}-foot`, `${id}-list`.
 
 ## Behaviour
 
-- Nothing takes focus inside the sheet on open — the dialog itself does — so a phone does not raise its keyboard over the list; the selected row is scrolled into view. Tab reaches the search box.
+- Nothing takes focus inside the sheet on open — the dialog itself does — so a phone does not raise its keyboard over the list. The list opens at its top. Tab reaches the search box.
 - Filtering is a substring match on each item's label and `searchText`, case and ACCENTS aside ("acai" finds "Açaí", as in `CategorySelect`).
 - ↑/↓ move the keyboard cursor (wrapping at both ends, as `Command` does) and Enter picks the row under it. Typing puts the cursor on the first match, so "type, then Enter" picks it — or creates, when the create row is the only row. The cursor is drawn only once an arrow key has moved it: typing alone shows no ring on a phone.
 - Esc and a tap outside close (through `onClose`).

package/src/components/form/PickerSheet/PickerSheet.styles.ts

@@ -4,6 +4,7 @@ import { fieldBorder, fieldHeight } from '../../../tokens/field-height';
 import { fieldRadiusPx } from '../../../tokens/field-radius';
 import { fieldWell, uiInk } from '../../../tokens/ink';
 import { rem, rems } from '../../../tokens/relative';
+import { surfaces } from '../../../tokens/surfaces';
 
 /**
  * The prototype's measurements, verbatim, in the design's px.
@@ -40,6 +41,12 @@ const METRICS = {
   lineHeight: 1.4,
 } as const;
 
+/**
+ * A quiet control's hover: the hairline at half strength, a green-grey step
+ * (#E9EDE7 on one adopter's raised surface) rather than MUI's black wash.
+ */
+const hoverWash = (theme: Theme): string => alpha(theme.palette.divider, 0.5);
+
 /** The panel's shadow: `0 16px 48px` of ink at 0.28. */
 const panelShadow = (theme: Theme): string =>
   `${rems(theme, 0, 16, 48)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`;
@@ -52,7 +59,8 @@ export const dialogPaperSx = (theme: Theme): CSSObject => ({
   margin: 0,
   borderRadius: rem(theme, METRICS.dialogRadiusPx),
   boxShadow: panelShadow(theme),
-  background: theme.palette.background.paper,
+  // The raised step (`uiSurfaces.raised`): a sheet is nearer than the page.
+  background: surfaces(theme).raised,
   backgroundImage: 'none',
   display: 'flex',
   flexDirection: 'column',
@@ -65,7 +73,8 @@ export const sheetPaperSx = (theme: Theme): CSSObject => ({
   maxHeight: '88%',
   borderRadius: rems(theme, METRICS.sheetRadiusPx, METRICS.sheetRadiusPx, 0, 0),
   boxShadow: panelShadow(theme),
-  background: theme.palette.background.paper,
+  // The raised step (`uiSurfaces.raised`): a sheet is nearer than the page.
+  background: surfaces(theme).raised,
   backgroundImage: 'none',
   display: 'flex',
   flexDirection: 'column',
@@ -79,7 +88,7 @@ export const headSx = (theme: Theme): CSSObject => ({
   gap: rem(theme, METRICS.headGapPx),
   padding: rems(theme, 14, 16),
   // A shade under the controls' own border: the rule separates, it does not frame.
-  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.6)}`,
+  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.66)}`,
   flex: '0 0 auto',
 });
 
@@ -110,8 +119,9 @@ export const closeButtonSx = (theme: Theme): CSSObject => ({
   color: theme.palette.text.primary,
   cursor: 'pointer',
   '& svg': { width: rem(theme, METRICS.closeGlyphPx), height: rem(theme, METRICS.closeGlyphPx) },
-  '&:hover': { background: theme.palette.action.hover },
-  '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) },
+  '&:hover': { background: hoverWash(theme) },
+  // The browser's own ring, as on every control the design draws.
+  '&:focus-visible': { outlineStyle: 'auto', outlineWidth: '1px' },
 });
 
 /** `.sb` — the scrolling body: search, list, foot. */
@@ -184,7 +194,7 @@ export const rowPaddingLeft = (theme: Theme, depth: number): string =>
 /** Background of a row: selected wins over the keyboard cursor, which wins over rest. */
 function rowBackground(theme: Theme, selected: boolean, active: boolean): string {
   if (selected) return alpha(theme.palette.primary.main, 0.1);
-  return active ? theme.palette.action.hover : 'transparent';
+  return active ? hoverWash(theme) : 'transparent';
 }
 
 /** `.pitem` — a row. `active` is the keyboard cursor, drawn as a ring so it reads apart from `selected`. */
@@ -194,6 +204,9 @@ export const rowSx = (theme: Theme, selected: boolean, active: boolean): CSSObje
   gap: rem(theme, 10),
   padding: rem(theme, METRICS.rowPaddingPx),
   minHeight: rem(theme, METRICS.rowMinHeightPx),
+  // The list is a capped flex column: without this a row with a meta line
+  // shrinks to the 44px floor and the two lines overprint.
+  flexShrink: 0,
   boxSizing: 'border-box',
   borderRadius: rem(theme, METRICS.controlRadiusPx),
   textAlign: 'left',
@@ -202,7 +215,7 @@ export const rowSx = (theme: Theme, selected: boolean, active: boolean): CSSObje
   color: theme.palette.text.primary,
   background: rowBackground(theme, selected, active),
   boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : 'none',
-  '&:hover': { background: selected ? alpha(theme.palette.primary.main, 0.1) : theme.palette.action.hover },
+  '&:hover': { background: selected ? alpha(theme.palette.primary.main, 0.1) : hoverWash(theme) },
 });
 
 export const rowTextSx: CSSObject = { flex: '1 1 auto', minWidth: 0 };

package/src/components/form/PickerSheet/PickerSheet.tsx

@@ -30,6 +30,8 @@ interface SurfaceProps {
   onClose: () => void;
   titleId: string;
   dataTestId: string;
+  /** False: open and close at once, with no slide or fade. */
+  animated: boolean;
   children: React.ReactNode;
 }
 
@@ -37,8 +39,17 @@ interface SurfaceProps {
  * Where the sheet lives. Both surfaces are modal, which gives Esc, the
  * tap-outside dismissal and focus containment for free.
  */
-function PickerSheetSurface({ open, sheet, onClose, titleId, dataTestId, children }: SurfaceProps): React.JSX.Element {
+function PickerSheetSurface({
+  open,
+  sheet,
+  onClose,
+  titleId,
+  dataTestId,
+  animated,
+  children,
+}: SurfaceProps): React.JSX.Element {
   const close = (): void => onClose();
+  const motion = animated ? {} : { transitionDuration: 0 };
   if (sheet) {
     // A Drawer's paper carries no dialog semantics of its own, so it is given them.
     const paper = {
@@ -49,14 +60,14 @@ function PickerSheetSurface({ open, sheet, onClose, titleId, dataTestId, childre
       'data-testid': dataTestId,
     };
     return (
-      <Drawer anchor="bottom" open={open} onClose={close} sx={ABOVE_SHEETS} slotProps={{ paper }}>
+      <Drawer anchor="bottom" open={open} onClose={close} sx={ABOVE_SHEETS} slotProps={{ paper }} {...motion}>
         {children}
       </Drawer>
     );
   }
   const paper = { sx: dialogPaperSx, 'data-testid': dataTestId };
   return (
-    <Dialog open={open} onClose={close} aria-labelledby={titleId} sx={ABOVE_SHEETS} slotProps={{ paper }}>
+    <Dialog open={open} onClose={close} aria-labelledby={titleId} sx={ABOVE_SHEETS} slotProps={{ paper }} {...motion}>
       {children}
     </Dialog>
   );
@@ -86,7 +97,14 @@ export function PickerSheet(props: PickerSheetProps): React.JSX.Element {
   const state = usePickerSheet(props);
 
   return (
-    <PickerSheetSurface open={open} sheet={sheet} onClose={onClose} titleId={titleId} dataTestId={dataTestId}>
+    <PickerSheetSurface
+      open={open}
+      sheet={sheet}
+      onClose={onClose}
+      titleId={titleId}
+      dataTestId={dataTestId}
+      animated={props.animated ?? true}
+    >
       <PickerSheetHead
         kicker={kicker}
         title={title}

package/src/components/form/PickerSheet/PickerSheet.types.ts

@@ -56,6 +56,8 @@ export interface PickerSheetProps {
   emptyText?: (query: string) => string;
   /** The note under the list. */
   foot?: string;
+  /** Slide or fade in and out (default). `false` opens and closes at once. */
+  animated?: boolean;
   /**
    * Base test id (default `picker-sheet`). Sub-elements get `${id}-search`,
    * `${id}-item-${item.id}`, `${id}-create`, `${id}-close`.

package/src/components/form/PickerSheet/usePickerSheet.ts

@@ -24,26 +24,14 @@ interface PickerSheetState {
 type HookProps = Pick<PickerSheetProps, 'open' | 'items' | 'onPick' | 'onCreate' | 'createLabel'>;
 
 /**
- * Bring the selected row into view on open, and keep the keyboard cursor in view.
+ * Keep the keyboard cursor in view.
  *
  * Nothing inside is focused on open — the modal focuses its own paper. Focusing
  * the search box raised a phone's keyboard over the list it was opened to show.
- * Deferred a frame: the surface mounts its content in the same commit as this
- * effect.
+ * The list opens at its top, the selected row wherever it falls (the design's
+ * picker does not jump to it).
  */
-function useSheetScroll(
-  open: boolean,
-  activeIndex: number,
-  listRef: React.RefObject<HTMLUListElement | null>,
-): void {
-  useEffect(() => {
-    if (!open) return undefined;
-    const frame = requestAnimationFrame(() => {
-      listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView?.({ block: 'nearest' });
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [open, listRef]);
-
+function useCursorScroll(activeIndex: number, listRef: React.RefObject<HTMLUListElement | null>): void {
   useEffect(() => {
     if (activeIndex < 0) return;
     const rows = listRef.current?.querySelectorAll('[role="option"]');
@@ -81,7 +69,7 @@ export function usePickerSheet({ open, items, onPick, onCreate, createLabel }: H
   // and `aria-activedescendant` must never name a row that is not there.
   const activeIndex = rawActiveIndex < view.rowCount ? rawActiveIndex : -1;
 
-  useSheetScroll(open, activeIndex, listRef);
+  useCursorScroll(activeIndex, listRef);
 
   const setQuery = useCallback((next: string) => {
     setRawQuery(next);

package/dist/chunk-43UPEJML.js

@@ -1,108 +0,0 @@
-import {
-  PickerSheetHead,
-  PickerSheetList,
-  PickerSheetSearch
-} from "./chunk-Z3DEMZ5J.js";
-import {
-  usePickerSheet
-} from "./chunk-ZQRNCUBB.js";
-import {
-  bodySx,
-  dialogPaperSx,
-  footSx,
-  sheetPaperSx
-} from "./chunk-RLTCU57K.js";
-import {
-  METRICS
-} from "./chunk-VPGDYI63.js";
-import {
-  stackedOverlayZIndex
-} from "./chunk-MFU4Y25U.js";
-
-// src/components/form/PickerSheet/PickerSheet.tsx
-import { useId } from "react";
-import Box from "@mui/material/Box/index.js";
-import Dialog from "@mui/material/Dialog/index.js";
-import Drawer from "@mui/material/Drawer/index.js";
-import { useTheme } from "@mui/material/styles/index.js";
-import useMediaQuery from "@mui/material/useMediaQuery/index.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ABOVE_SHEETS = { zIndex: stackedOverlayZIndex };
-function PickerSheetSurface({ open, sheet, onClose, titleId, dataTestId, children }) {
-  const close = () => onClose();
-  if (sheet) {
-    const paper2 = {
-      sx: sheetPaperSx,
-      role: "dialog",
-      "aria-modal": true,
-      "aria-labelledby": titleId,
-      "data-testid": dataTestId
-    };
-    return /* @__PURE__ */ jsx(Drawer, { anchor: "bottom", open, onClose: close, sx: ABOVE_SHEETS, slotProps: { paper: paper2 }, children });
-  }
-  const paper = { sx: dialogPaperSx, "data-testid": dataTestId };
-  return /* @__PURE__ */ jsx(Dialog, { open, onClose: close, "aria-labelledby": titleId, sx: ABOVE_SHEETS, slotProps: { paper }, children });
-}
-function PickerSheet(props) {
-  const { open, onClose, kicker, title, searchPlaceholder, searchLabel, closeLabel, createLabel, createMeta, emptyText, foot } = props;
-  const dataTestId = props.dataTestId ?? "picker-sheet";
-  const theme = useTheme();
-  const sheet = useMediaQuery(theme.breakpoints.down(METRICS.sheetBreakpoint));
-  const baseId = useId();
-  const titleId = `${baseId}-title`;
-  const listId = `${baseId}-list`;
-  const rowId = (index) => `${baseId}-row-${index}`;
-  const state = usePickerSheet(props);
-  return /* @__PURE__ */ jsxs(PickerSheetSurface, { open, sheet, onClose, titleId, dataTestId, children: [
-    /* @__PURE__ */ jsx(
-      PickerSheetHead,
-      {
-        kicker,
-        title,
-        titleId,
-        closeLabel,
-        onClose,
-        dataTestId
-      }
-    ),
-    /* @__PURE__ */ jsxs(Box, { sx: bodySx, children: [
-      /* @__PURE__ */ jsx(
-        PickerSheetSearch,
-        {
-          query: state.query,
-          placeholder: searchPlaceholder,
-          label: searchLabel,
-          listId,
-          activeId: state.activeIndex >= 0 ? rowId(state.activeIndex) : void 0,
-          expanded: state.view.rowCount > 0,
-          inputRef: state.searchInputRef,
-          onQueryChange: state.setQuery,
-          onKeyDown: state.onSearchKeyDown,
-          dataTestId
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        PickerSheetList,
-        {
-          view: state.view,
-          activeIndex: state.activeIndex,
-          cursorShown: state.cursorShown,
-          listId,
-          rowId,
-          listRef: state.listRef,
-          createLabel,
-          createMeta,
-          emptyText,
-          onChoose: state.choose,
-          dataTestId
-        }
-      ),
-      foot ? /* @__PURE__ */ jsx(Box, { component: "p", sx: footSx, "data-testid": `${dataTestId}-foot`, children: foot }) : null
-    ] })
-  ] });
-}
-
-export {
-  PickerSheet
-};
-//# sourceMappingURL=chunk-43UPEJML.js.map

package/dist/chunk-43UPEJML.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/PickerSheet/PickerSheet.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport Box from '@mui/material/Box/index.js';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport Drawer from '@mui/material/Drawer/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport useMediaQuery from '@mui/material/useMediaQuery/index.js';\n\nimport { METRICS as CATEGORY_SELECT_METRICS } from '../CategorySelect/CategorySelect.styles';\nimport { stackedOverlayZIndex } from '../../../tokens/layers';\nimport { PickerSheetHead, PickerSheetList, PickerSheetSearch } from './PickerSheet.parts';\nimport { bodySx, dialogPaperSx, footSx, sheetPaperSx } from './PickerSheet.styles';\nimport type { PickerSheetProps } from './PickerSheet.types';\nimport { usePickerSheet } from './usePickerSheet';\n\n/**\n * Both surfaces clear the sheet ladder rather than taking MUI's default — the\n * same rule as `CategoryPanelSurface`. A `Dialog` sits at `zIndex.modal` and a\n * temporary `Drawer` a step lower, while `StackedModal` puts its second panel\n * at 1310: a picker opened from a stacked editor painted UNDER it (FUT-806).\n * See `tokens/layers`.\n */\nconst ABOVE_SHEETS = { zIndex: stackedOverlayZIndex } as const;\n\ninterface SurfaceProps {\n  open: boolean;\n  /** True below the sheet breakpoint — a bottom sheet instead of a centred dialog. */\n  sheet: boolean;\n  onClose: () => void;\n  titleId: string;\n  dataTestId: string;\n  children: React.ReactNode;\n}\n\n/**\n * Where the sheet lives. Both surfaces are modal, which gives Esc, the\n * tap-outside dismissal and focus containment for free.\n */\nfunction PickerSheetSurface({ open, sheet, onClose, titleId, dataTestId, children }: SurfaceProps): React.JSX.Element {\n  const close = (): void => onClose();\n  if (sheet) {\n    // A Drawer's paper carries no dialog semantics of its own, so it is given them.\n    const paper = {\n      sx: sheetPaperSx,\n      role: 'dialog',\n      'aria-modal': true,\n      'aria-labelledby': titleId,\n      'data-testid': dataTestId,\n    };\n    return (\n      <Drawer anchor=\"bottom\" open={open} onClose={close} sx={ABOVE_SHEETS} slotProps={{ paper }}>\n        {children}\n      </Drawer>\n    );\n  }\n  const paper = { sx: dialogPaperSx, 'data-testid': dataTestId };\n  return (\n    <Dialog open={open} onClose={close} aria-labelledby={titleId} sx={ABOVE_SHEETS} slotProps={{ paper }}>\n      {children}\n    </Dialog>\n  );\n}\n\n/**\n * A searchable pick-or-create sheet: a title, a search box, a list of rows\n * (optionally a tree), and a create row when the query names nothing yet.\n *\n * A centred dialog on a pointer and a bottom sheet under `CategorySelect`'s\n * sheet breakpoint. Typing filters (case-insensitive substring over each\n * item's label and `searchText`, accents aside) and flattens the tree; ↑↓ move\n * the cursor, Enter picks,\n * Esc or a tap outside closes. Picking calls `onPick` and nothing else — the\n * caller decides when to close. All copy comes from the caller.\n */\nexport function PickerSheet(props: PickerSheetProps): React.JSX.Element {\n  const { open, onClose, kicker, title, searchPlaceholder, searchLabel, closeLabel, createLabel, createMeta, emptyText, foot } =\n    props;\n  const dataTestId = props.dataTestId ?? 'picker-sheet';\n  const theme = useTheme();\n  const sheet = useMediaQuery(theme.breakpoints.down(CATEGORY_SELECT_METRICS.sheetBreakpoint));\n  const baseId = useId();\n  const titleId = `${baseId}-title`;\n  const listId = `${baseId}-list`;\n  const rowId = (index: number): string => `${baseId}-row-${index}`;\n  const state = usePickerSheet(props);\n\n  return (\n    <PickerSheetSurface open={open} sheet={sheet} onClose={onClose} titleId={titleId} dataTestId={dataTestId}>\n      <PickerSheetHead\n        kicker={kicker}\n        title={title}\n        titleId={titleId}\n        closeLabel={closeLabel}\n        onClose={onClose}\n        dataTestId={dataTestId}\n      />\n      <Box sx={bodySx}>\n        <PickerSheetSearch\n          query={state.query}\n          placeholder={searchPlaceholder}\n          label={searchLabel}\n          listId={listId}\n          activeId={state.activeIndex >= 0 ? rowId(state.activeIndex) : undefined}\n          expanded={state.view.rowCount > 0}\n          inputRef={state.searchInputRef}\n          onQueryChange={state.setQuery}\n          onKeyDown={state.onSearchKeyDown}\n          dataTestId={dataTestId}\n        />\n        <PickerSheetList\n          view={state.view}\n          activeIndex={state.activeIndex}\n          cursorShown={state.cursorShown}\n          listId={listId}\n          rowId={rowId}\n          listRef={state.listRef}\n          createLabel={createLabel}\n          createMeta={createMeta}\n          emptyText={emptyText}\n          onChoose={state.choose}\n          dataTestId={dataTestId}\n        />\n        {foot ? (\n          <Box component=\"p\" sx={footSx} data-testid={`${dataTestId}-foot`}>\n            {foot}\n          </Box>\n        ) : null}\n      </Box>\n    </PickerSheetSurface>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,aAAa;AACtB,OAAO,SAAS;AAChB,OAAO,YAAY;AACnB,OAAO,YAAY;AACnB,SAAS,gBAAgB;AACzB,OAAO,mBAAmB;AA4CpB,cA8CA,YA9CA;AA5BN,IAAM,eAAe,EAAE,QAAQ,qBAAqB;AAgBpD,SAAS,mBAAmB,EAAE,MAAM,OAAO,SAAS,SAAS,YAAY,SAAS,GAAoC;AACpH,QAAM,QAAQ,MAAY,QAAQ;AAClC,MAAI,OAAO;AAET,UAAMA,SAAQ;AAAA,MACZ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,eAAe;AAAA,IACjB;AACA,WACE,oBAAC,UAAO,QAAO,UAAS,MAAY,SAAS,OAAO,IAAI,cAAc,WAAW,EAAE,OAAAA,OAAM,GACtF,UACH;AAAA,EAEJ;AACA,QAAM,QAAQ,EAAE,IAAI,eAAe,eAAe,WAAW;AAC7D,SACE,oBAAC,UAAO,MAAY,SAAS,OAAO,mBAAiB,SAAS,IAAI,cAAc,WAAW,EAAE,MAAM,GAChG,UACH;AAEJ;AAaO,SAAS,YAAY,OAA4C;AACtE,QAAM,EAAE,MAAM,SAAS,QAAQ,OAAO,mBAAmB,aAAa,YAAY,aAAa,YAAY,WAAW,KAAK,IACzH;AACF,QAAM,aAAa,MAAM,cAAc;AACvC,QAAM,QAAQ,SAAS;AACvB,QAAM,QAAQ,cAAc,MAAM,YAAY,KAAK,QAAwB,eAAe,CAAC;AAC3F,QAAM,SAAS,MAAM;AACrB,QAAM,UAAU,GAAG,MAAM;AACzB,QAAM,SAAS,GAAG,MAAM;AACxB,QAAM,QAAQ,CAAC,UAA0B,GAAG,MAAM,QAAQ,KAAK;AAC/D,QAAM,QAAQ,eAAe,KAAK;AAElC,SACE,qBAAC,sBAAmB,MAAY,OAAc,SAAkB,SAAkB,YAChF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,OAAI,IAAI,QACP;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,MAAM;AAAA,UACb,aAAa;AAAA,UACb,OAAO;AAAA,UACP;AAAA,UACA,UAAU,MAAM,eAAe,IAAI,MAAM,MAAM,WAAW,IAAI;AAAA,UAC9D,UAAU,MAAM,KAAK,WAAW;AAAA,UAChC,UAAU,MAAM;AAAA,UAChB,eAAe,MAAM;AAAA,UACrB,WAAW,MAAM;AAAA,UACjB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,aAAa,MAAM;AAAA,UACnB,aAAa,MAAM;AAAA,UACnB;AAAA,UACA;AAAA,UACA,SAAS,MAAM;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,MAAM;AAAA,UAChB;AAAA;AAAA,MACF;AAAA,MACC,OACC,oBAAC,OAAI,WAAU,KAAI,IAAI,QAAQ,eAAa,GAAG,UAAU,SACtD,gBACH,IACE;AAAA,OACN;AAAA,KACF;AAEJ;","names":["paper"]}

package/dist/chunk-RLTCU57K.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/PickerSheet/PickerSheet.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type Theme } from '@mui/material/styles/index.js';\n\nimport { fieldBorder, fieldHeight } from '../../../tokens/field-height';\nimport { fieldRadiusPx } from '../../../tokens/field-radius';\nimport { fieldWell, uiInk } from '../../../tokens/ink';\nimport { rem, rems } from '../../../tokens/relative';\n\n/**\n * The prototype's measurements, verbatim, in the design's px.\n *\n * Each is drawn through `rem()` where it is read, so the sheet follows a\n * density mode the way every other surface in the package does. Colours come\n * from the palette (a white-labelled tenant and dark mode carry through).\n */\nconst METRICS = {\n  dialogWidthPx: 520,\n  dialogMaxHeightPx: 780,\n  dialogRadiusPx: 14,\n  /** The gap a centred dialog keeps from the viewport edge. */\n  dialogMarginPx: 32,\n  sheetRadiusPx: 16,\n  headGapPx: 10,\n  closeButtonPx: 36,\n  controlRadiusPx: 8,\n  bodyPaddingPx: 16,\n  bodyGapPx: 12,\n  listMaxHeightPx: 380,\n  listGapPx: 2,\n  rowPaddingPx: 10,\n  rowMinHeightPx: 44,\n  /** Left padding per level of `indent` (`.pitem.ind{padding-left:28px}` at depth 1). */\n  rowIndentStepPx: 28,\n  checkGlyphPx: 16,\n  closeGlyphPx: 18,\n  searchGlyphPx: 16,\n  /** The magnifier's inset from the field's inner edge, and the gap before the text. */\n  searchGlyphInsetPx: 10,\n  searchGlyphGapPx: 6,\n  /** The prototype's body line-height; the sheet sets it rather than inheriting a host's. */\n  lineHeight: 1.4,\n} as const;\n\n/** The panel's shadow: `0 16px 48px` of ink at 0.28. */\nconst panelShadow = (theme: Theme): string =>\n  `${rems(theme, 0, 16, 48)} ${alpha(uiInk(theme).panelShadowInk, 0.28)}`;\n\n/** The centred dialog's paper, on a pointer. */\nexport const dialogPaperSx = (theme: Theme): CSSObject => ({\n  width: rem(theme, METRICS.dialogWidthPx),\n  maxWidth: `calc(100% - ${rem(theme, METRICS.dialogMarginPx)})`,\n  maxHeight: `min(${rem(theme, METRICS.dialogMaxHeightPx)}, calc(100% - ${rem(theme, METRICS.dialogMarginPx * 2)}))`,\n  margin: 0,\n  borderRadius: rem(theme, METRICS.dialogRadiusPx),\n  boxShadow: panelShadow(theme),\n  background: theme.palette.background.paper,\n  backgroundImage: 'none',\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n});\n\n/** The bottom sheet's paper, on a phone: full width, no grab handle. */\nexport const sheetPaperSx = (theme: Theme): CSSObject => ({\n  width: '100%',\n  maxHeight: '88%',\n  borderRadius: rems(theme, METRICS.sheetRadiusPx, METRICS.sheetRadiusPx, 0, 0),\n  boxShadow: panelShadow(theme),\n  background: theme.palette.background.paper,\n  backgroundImage: 'none',\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'hidden',\n});\n\n/** `.sh` — kicker and title on the left, the close button on the right. */\nexport const headSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: rem(theme, METRICS.headGapPx),\n  padding: rems(theme, 14, 16),\n  // A shade under the controls' own border: the rule separates, it does not frame.\n  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.6)}`,\n  flex: '0 0 auto',\n});\n\nexport const kickerSx = (theme: Theme): CSSObject => ({\n  fontSize: rem(theme, 11.5),\n  color: theme.palette.text.secondary,\n  lineHeight: METRICS.lineHeight,\n});\n\nexport const titleSx = (theme: Theme): CSSObject => ({\n  margin: 0,\n  fontSize: rem(theme, 14),\n  fontWeight: 700,\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.primary,\n});\n\nexport const closeButtonSx = (theme: Theme): CSSObject => ({\n  flex: '0 0 auto',\n  width: rem(theme, METRICS.closeButtonPx),\n  height: rem(theme, METRICS.closeButtonPx),\n  display: 'grid',\n  placeItems: 'center',\n  padding: 0,\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: rem(theme, METRICS.controlRadiusPx),\n  background: 'transparent',\n  color: theme.palette.text.primary,\n  cursor: 'pointer',\n  '& svg': { width: rem(theme, METRICS.closeGlyphPx), height: rem(theme, METRICS.closeGlyphPx) },\n  '&:hover': { background: theme.palette.action.hover },\n  '&:focus-visible': { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 1) },\n});\n\n/** `.sb` — the scrolling body: search, list, foot. */\nexport const bodySx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: rem(theme, METRICS.bodyGapPx),\n  padding: rem(theme, METRICS.bodyPaddingPx),\n  overflow: 'auto',\n  minHeight: 0,\n  flex: '1 1 auto',\n});\n\n/**\n * The search field: the library's field height, border and corner, with a\n * leading magnifier. White on the light sheet, so the field reads as a field\n * against the paper behind it.\n */\nexport const searchFieldSx = (theme: Theme): CSSObject => ({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  flex: '0 0 auto',\n  '& > svg': {\n    position: 'absolute',\n    // + 1 for the input's own border, which the glyph sits inside of.\n    left: rem(theme, METRICS.searchGlyphInsetPx + 1),\n    width: rem(theme, METRICS.searchGlyphPx),\n    height: rem(theme, METRICS.searchGlyphPx),\n    color: theme.palette.text.secondary,\n    pointerEvents: 'none',\n    zIndex: 1,\n  },\n  '& input': {\n    width: '100%',\n    height: fieldHeight(theme),\n    boxSizing: 'border-box',\n    padding: rems(theme, 0, 10, 0, METRICS.searchGlyphInsetPx + METRICS.searchGlyphPx + METRICS.searchGlyphGapPx),\n    fontSize: rem(theme, 14),\n    border: fieldBorder(theme),\n    borderRadius: fieldRadiusPx(theme),\n    background: fieldWell(theme),\n    color: theme.palette.text.primary,\n    '&:focus': {\n      outline: 'none',\n      borderColor: theme.palette.primary.main,\n      boxShadow: `0 0 0 ${rem(theme, 3)} ${alpha(theme.palette.primary.main, 0.15)}`,\n    },\n  },\n});\n\n/** The list: a column, scrolling on its own past 380px. */\nexport const listSx = (theme: Theme): CSSObject => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: rem(theme, METRICS.listGapPx),\n  maxHeight: rem(theme, METRICS.listMaxHeightPx),\n  overflow: 'auto',\n  overscrollBehavior: 'contain',\n  margin: 0,\n  padding: 0,\n  listStyle: 'none',\n  flex: '0 1 auto',\n});\n\n/** Left padding for a row at `depth` — the row's own 10px at depth 0, 28px per level below it. */\nexport const rowPaddingLeft = (theme: Theme, depth: number): string =>\n  rem(theme, depth > 0 ? METRICS.rowIndentStepPx * depth : METRICS.rowPaddingPx);\n\n/** Background of a row: selected wins over the keyboard cursor, which wins over rest. */\nfunction rowBackground(theme: Theme, selected: boolean, active: boolean): string {\n  if (selected) return alpha(theme.palette.primary.main, 0.1);\n  return active ? theme.palette.action.hover : 'transparent';\n}\n\n/** `.pitem` — a row. `active` is the keyboard cursor, drawn as a ring so it reads apart from `selected`. */\nexport const rowSx = (theme: Theme, selected: boolean, active: boolean): CSSObject => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: rem(theme, 10),\n  padding: rem(theme, METRICS.rowPaddingPx),\n  minHeight: rem(theme, METRICS.rowMinHeightPx),\n  boxSizing: 'border-box',\n  borderRadius: rem(theme, METRICS.controlRadiusPx),\n  textAlign: 'left',\n  cursor: 'pointer',\n  userSelect: 'none',\n  color: theme.palette.text.primary,\n  background: rowBackground(theme, selected, active),\n  boxShadow: active ? `inset 0 0 0 ${rem(theme, 1)} ${alpha(theme.palette.primary.main, 0.3)}` : 'none',\n  '&:hover': { background: selected ? alpha(theme.palette.primary.main, 0.1) : theme.palette.action.hover },\n});\n\nexport const rowTextSx: CSSObject = { flex: '1 1 auto', minWidth: 0 };\n\nexport const rowLabelSx = (theme: Theme): CSSObject => ({\n  display: 'block',\n  fontSize: rem(theme, 14),\n  lineHeight: METRICS.lineHeight,\n});\n\nexport const rowMetaSx = (theme: Theme): CSSObject => ({\n  display: 'block',\n  fontSize: rem(theme, 12),\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.secondary,\n});\n\nexport const checkSx = (theme: Theme): CSSObject => ({\n  flex: '0 0 auto',\n  display: 'grid',\n  color: theme.palette.primary.main,\n  '& svg': { width: rem(theme, METRICS.checkGlyphPx), height: rem(theme, METRICS.checkGlyphPx) },\n});\n\n/** The create row's text: the accent, at 600. */\nexport const createLabelSx = (theme: Theme): CSSObject => ({\n  ...rowLabelSx(theme),\n  color: theme.palette.primary.main,\n  fontWeight: 600,\n});\n\nexport const emptySx = (theme: Theme): CSSObject => ({\n  fontSize: rem(theme, 12),\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.secondary,\n  padding: rem(theme, 10),\n});\n\nexport const footSx = (theme: Theme): CSSObject => ({\n  margin: 0,\n  fontSize: rem(theme, 12),\n  lineHeight: METRICS.lineHeight,\n  color: theme.palette.text.secondary,\n});\n"],"mappings":"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","names":[]}

package/dist/chunk-ZQRNCUBB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/PickerSheet/usePickerSheet.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { pickerSheetView, stepActiveIndex, type PickerSheetView } from './picker-sheet-model';\nimport type { PickerSheetProps } from './PickerSheet.types';\n\n/** Everything the sheet's parts read: the query, the derived list, the cursor and the handlers. */\ninterface PickerSheetState {\n  query: string;\n  view: PickerSheetView;\n  /** The keyboard cursor, an index into `view` (items, then the create row); -1 for none. Always a row that exists. */\n  activeIndex: number;\n  /** Draw the cursor: only once an arrow key has moved it, never from typing alone. */\n  cursorShown: boolean;\n  searchInputRef: React.RefObject<HTMLInputElement | null>;\n  listRef: React.RefObject<HTMLUListElement | null>;\n  setQuery: (next: string) => void;\n  /** Pick the row at `index` — an item, or the create row when it is the last one. */\n  choose: (index: number) => void;\n  onSearchKeyDown: (event: React.KeyboardEvent) => void;\n}\n\ntype HookProps = Pick<PickerSheetProps, 'open' | 'items' | 'onPick' | 'onCreate' | 'createLabel'>;\n\n/**\n * Bring the selected row into view on open, and keep the keyboard cursor in view.\n *\n * Nothing inside is focused on open — the modal focuses its own paper. Focusing\n * the search box raised a phone's keyboard over the list it was opened to show.\n * Deferred a frame: the surface mounts its content in the same commit as this\n * effect.\n */\nfunction useSheetScroll(\n  open: boolean,\n  activeIndex: number,\n  listRef: React.RefObject<HTMLUListElement | null>,\n): void {\n  useEffect(() => {\n    if (!open) return undefined;\n    const frame = requestAnimationFrame(() => {\n      listRef.current?.querySelector('[aria-selected=\"true\"]')?.scrollIntoView?.({ block: 'nearest' });\n    });\n    return () => cancelAnimationFrame(frame);\n  }, [open, listRef]);\n\n  useEffect(() => {\n    if (activeIndex < 0) return;\n    const rows = listRef.current?.querySelectorAll('[role=\"option\"]');\n    rows?.[activeIndex]?.scrollIntoView?.({ block: 'nearest' });\n  }, [activeIndex, listRef]);\n}\n\n/**\n * The sheet's state. The query resets every time the sheet opens; typing puts\n * the cursor on the first match, so \"type, then Enter\" picks it (or creates,\n * when the create row is all there is).\n */\nexport function usePickerSheet({ open, items, onPick, onCreate, createLabel }: HookProps): PickerSheetState {\n  const [query, setRawQuery] = useState('');\n  const [rawActiveIndex, setActiveIndex] = useState(-1);\n  const [cursorShown, setCursorShown] = useState(false);\n  const searchInputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLUListElement | null>(null);\n\n  // Reset while rendering the frame that opens the sheet, not in an effect\n  // after it — an effect would paint the last session's query for one frame.\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (open) {\n      setRawQuery('');\n      setActiveIndex(-1);\n      setCursorShown(false);\n    }\n  }\n\n  const creatable = Boolean(onCreate && createLabel);\n  const view = useMemo(() => pickerSheetView(items, query, creatable), [items, query, creatable]);\n  // Clamped on read: the rows can shrink under the cursor (a query, new items),\n  // and `aria-activedescendant` must never name a row that is not there.\n  const activeIndex = rawActiveIndex < view.rowCount ? rawActiveIndex : -1;\n\n  useSheetScroll(open, activeIndex, listRef);\n\n  const setQuery = useCallback((next: string) => {\n    setRawQuery(next);\n    setActiveIndex(next.trim() ? 0 : -1);\n  }, []);\n\n  const choose = useCallback(\n    (index: number) => {\n      const item = view.items[index];\n      if (item) {\n        onPick(item.id);\n        return;\n      }\n      if (view.canCreate && index === view.items.length) onCreate?.(view.query);\n    },\n    [view, onPick, onCreate],\n  );\n\n  const onSearchKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault();\n        const delta = event.key === 'ArrowDown' ? 1 : -1;\n        setActiveIndex(stepActiveIndex(activeIndex, delta, view.rowCount));\n        setCursorShown(true);\n        return;\n      }\n      if (event.key === 'Enter' && activeIndex >= 0) {\n        event.preventDefault();\n        choose(activeIndex);\n      }\n      // Escape is the modal's: it closes through `onClose`, once.\n    },\n    [view.rowCount, activeIndex, choose],\n  );\n\n  return { query, view, activeIndex, cursorShown, searchInputRef, listRef, setQuery, choose, onSearchKeyDown };\n}\n"],"mappings":";;;;;;AAEA,SAAS,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AA+BlE,SAAS,eACP,MACA,aACA,SACM;AACN,YAAU,MAAM;AACd,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,QAAQ,sBAAsB,MAAM;AACxC,cAAQ,SAAS,cAAc,wBAAwB,GAAG,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAAA,IACjG,CAAC;AACD,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACzC,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,YAAU,MAAM;AACd,QAAI,cAAc,EAAG;AACrB,UAAM,OAAO,QAAQ,SAAS,iBAAiB,iBAAiB;AAChE,WAAO,WAAW,GAAG,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAAA,EAC5D,GAAG,CAAC,aAAa,OAAO,CAAC;AAC3B;AAOO,SAAS,eAAe,EAAE,MAAM,OAAO,QAAQ,UAAU,YAAY,GAAgC;AAC1G,QAAM,CAAC,OAAO,WAAW,IAAI,SAAS,EAAE;AACxC,QAAM,CAAC,gBAAgB,cAAc,IAAI,SAAS,EAAE;AACpD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,iBAAiB,OAAgC,IAAI;AAC3D,QAAM,UAAU,OAAgC,IAAI;AAIpD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AACf,QAAI,MAAM;AACR,kBAAY,EAAE;AACd,qBAAe,EAAE;AACjB,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,YAAY,QAAQ,YAAY,WAAW;AACjD,QAAM,OAAO,QAAQ,MAAM,gBAAgB,OAAO,OAAO,SAAS,GAAG,CAAC,OAAO,OAAO,SAAS,CAAC;AAG9F,QAAM,cAAc,iBAAiB,KAAK,WAAW,iBAAiB;AAEtE,iBAAe,MAAM,aAAa,OAAO;AAEzC,QAAM,WAAW,YAAY,CAAC,SAAiB;AAC7C,gBAAY,IAAI;AAChB,mBAAe,KAAK,KAAK,IAAI,IAAI,EAAE;AAAA,EACrC,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,CAAC,UAAkB;AACjB,YAAM,OAAO,KAAK,MAAM,KAAK;AAC7B,UAAI,MAAM;AACR,eAAO,KAAK,EAAE;AACd;AAAA,MACF;AACA,UAAI,KAAK,aAAa,UAAU,KAAK,MAAM,OAAQ,YAAW,KAAK,KAAK;AAAA,IAC1E;AAAA,IACA,CAAC,MAAM,QAAQ,QAAQ;AAAA,EACzB;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA+B;AAC9B,UAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AACxD,cAAM,eAAe;AACrB,cAAM,QAAQ,MAAM,QAAQ,cAAc,IAAI;AAC9C,uBAAe,gBAAgB,aAAa,OAAO,KAAK,QAAQ,CAAC;AACjE,uBAAe,IAAI;AACnB;AAAA,MACF;AACA,UAAI,MAAM,QAAQ,WAAW,eAAe,GAAG;AAC7C,cAAM,eAAe;AACrB,eAAO,WAAW;AAAA,MACpB;AAAA,IAEF;AAAA,IACA,CAAC,KAAK,UAAU,aAAa,MAAM;AAAA,EACrC;AAEA,SAAO,EAAE,OAAO,MAAM,aAAa,aAAa,gBAAgB,SAAS,UAAU,QAAQ,gBAAgB;AAC7G;","names":[]}