@flanksource/clicky-ui 0.2.13 → 0.2.15

package/dist/index.js

@@ -2,15 +2,20 @@ import { cn } from "./lib/utils.js";
 import { AVATAR_PALETTE, fnv1a32, paletteClass } from "./lib/palette.js";
 import { SIZE_TOKENS, resolveSize } from "./lib/size.js";
 import { formatBytes, formatBytesPerSecond, formatDuration, formatShort, formatUnit } from "./lib/format.js";
-import { ThemeProvider, useOptionalTheme, useResolvedTheme, useTheme } from "./hooks/use-theme.js";
-import { DensityProvider, useDensity, useDensityValue } from "./hooks/use-density.js";
+import { useOptionalTheme, useResolvedTheme, useTheme } from "./hooks/use-theme.js";
+import { ThemeProvider } from "./hooks/theme-provider.js";
+import { useDensity, useDensityValue } from "./hooks/use-density.js";
+import { DensityProvider, DensityValueProvider } from "./hooks/density-provider.js";
 import { useSort } from "./hooks/use-sort.js";
 import { useHistoryRoute } from "./hooks/use-history-route.js";
 import { useTaskRun, useTaskRuns } from "./hooks/use-task-run.js";
-import { Button, buttonVariants } from "./components/button.js";
+import { Button } from "./components/button.js";
+import { Loading, LoadingDots } from "./components/loading.js";
+import { buttonVariants } from "./components/button-variants.js";
 import { IconButton } from "./components/IconButton.js";
 import { SplitButton } from "./components/SplitButton.js";
-import { CLICKY_FORMAT_OPTIONS, FormatOptionsDropdown } from "./components/FormatOptionsDropdown.js";
+import { FormatOptionsDropdown } from "./components/FormatOptionsDropdown.js";
+import { CLICKY_FORMAT_OPTIONS } from "./components/format-options.js";
 import { DateField } from "./components/DateField.js";
 import { DatePicker } from "./components/DatePicker.js";
 import { DateTimePicker } from "./components/DateTimePicker.js";
@@ -20,13 +25,16 @@ import { FilterBar } from "./components/FilterBar.js";
 import { MultiSelect } from "./components/MultiSelect.js";
 import { Select } from "./components/select.js";
 import { Combobox } from "./components/Combobox.js";
-import { WorkloadPicker, kindForValue, loadedWorkloads, parseWorkloadKey, workloadKey } from "./components/WorkloadPicker.js";
+import { TreePickerField } from "./components/TreePickerField.js";
+import { WorkloadPicker } from "./components/WorkloadPicker.js";
+import { kindForValue, loadedWorkloads, parseWorkloadKey, workloadKey } from "./components/workload-picker-utils.js";
 import { SecretKeySelector } from "./components/SecretKeySelector.js";
 import { ThemeSwitcher } from "./components/theme-switcher.js";
 import { DensitySwitcher } from "./components/density-switcher.js";
 import { IconMenuPicker } from "./components/icon-menu-picker.js";
 import { JsonSchemaForm } from "./components/JsonSchemaForm.js";
 import { DEFAULT_FORM_SIZE } from "./components/json-schema-form-size.js";
+import { DEFAULT_PREFERENCES_STORAGE_KEY, readPreferences, writePreferences } from "./components/json-schema-form-preferences.js";
 import { effectiveProperties, isOpenStringMap, matchesIf, resolveControl } from "./components/json-schema-form-resolve.js";
 import { SplitPane } from "./layout/SplitPane.js";
 import { DetailEmptyState, Section } from "./layout/Section.js";
@@ -36,11 +44,15 @@ import { Modal } from "./overlay/Modal.js";
 import { AnsiHtml } from "./data/AnsiHtml.js";
 import { Avatar } from "./data/Avatar.js";
 import { AvatarBadge } from "./data/AvatarBadge.js";
-import { Badge, badgeVariants } from "./data/Badge.js";
+import { badgeVariants } from "./data/badge-variants.js";
+import { Badge } from "./data/Badge.js";
 import { CodeBlock } from "./data/CodeBlock.js";
-import { DataTable, inferColumns } from "./data/DataTable.js";
-import { Timestamp, chooseTimestampFormat, formatDateTimeRelative, formatRelativeTime, formatTimestamp, modeToFormat, parseTimestamp } from "./data/cells/Timestamp.js";
-import { TagActionsProvider, TagList, normalizeTags, splitTagToken, tagActionsFromRecord, tagFilterTokens, useTagActions, useTagActionsValue } from "./data/cells/TagList.js";
+import { inferColumns } from "./data/data-table-utils.js";
+import { DataTable } from "./data/DataTable.js";
+import { Timestamp } from "./data/cells/Timestamp.js";
+import { chooseTimestampFormat, formatDateTimeRelative, formatRelativeTime, formatTimestamp, modeToFormat, parseTimestamp } from "./data/cells/timestamp-format.js";
+import { TagActionsProvider, TagList } from "./data/cells/TagList.js";
+import { normalizeTags, splitTagToken, tagActionsFromRecord, tagFilterTokens, useTagActions, useTagActionsValue } from "./data/cells/tag-utils.js";
 import { StatusDot } from "./data/cells/StatusDot.js";
 import { STATUS_TOKEN_GROUPS, normalizeStatus } from "./data/cells/status-mapping.js";
 import { FilterPill, FilterPillGroup, FilterSeparator } from "./data/FilterPill.js";
@@ -51,7 +63,8 @@ import { KeyValueList } from "./data/KeyValueList.js";
 import { Properties } from "./data/Properties.js";
 import { formatPropertyLabel } from "./data/properties-utils.js";
 import { LogViewer } from "./data/LogViewer.js";
-import { LogsTable, normalizeLogsTableRows } from "./data/LogsTable.js";
+import { LogsTable } from "./data/LogsTable.js";
+import { normalizeLogsTableRows } from "./data/logs-normalize.js";
 import { MatrixTable } from "./data/MatrixTable.js";
 import { Markdown } from "./data/Markdown.js";
 import { MethodBadge } from "./data/MethodBadge.js";
@@ -87,7 +100,8 @@ import { HarPanel } from "./data/har/HarPanel.js";
 import { Clicky, ClickyNodeView, ClickyTable } from "./data/Clicky.js";
 import { OperationCatalog } from "./rpc/OperationCatalog.js";
 import { EntityExplorerApp } from "./rpc/EntityExplorerApp.js";
-import { ACCEPT_OPTIONS, AcceptPicker, VIEW_OPTIONS } from "./rpc/AcceptPicker.js";
+import { AcceptPicker } from "./rpc/AcceptPicker.js";
+import { ACCEPT_OPTIONS, VIEW_OPTIONS } from "./rpc/accept-options.js";
 import { CommandForm } from "./rpc/CommandForm.js";
 import { CommandOutput } from "./rpc/CommandOutput.js";
 import { FilterForm } from "./rpc/FilterForm.js";
@@ -100,6 +114,12 @@ import { useOpenAPI, useOperationById, useOperations } from "./rpc/useOperations
 import { OperationsApiClientError, createOperationsApiClient } from "./rpc/apiClient.js";
 import { filterOperationsByDomain, findDetailEndpoint, findListEndpoint, normalizeRows, parseJsonBody } from "./rpc/classify.js";
 import { isPositionalParam } from "./rpc/types.js";
+import { CacheAdapterRegistry, createCacheRegistry, prefixAdapter } from "./data/cache-browser/adapter.js";
+import { CacheBrowser } from "./data/cache-browser/CacheBrowser.js";
+import { CacheDetailPanel } from "./data/cache-browser/CacheDetailPanel.js";
+import { CacheNodeRow, CacheTree } from "./data/cache-browser/CacheTree.js";
+import { CacheStatsOverview } from "./data/cache-browser/CacheStatsOverview.js";
+import { CacheValue } from "./data/cache-browser/CacheValue.js";
 import { TestAttempts, TestFailureDetail, TestOutput } from "./data/test-runner/TestFailureDetail.js";
 import { TestDetailPanel } from "./data/test-runner/TestDetailPanel.js";
 import { TestFilterBar } from "./data/test-runner/TestFilterBar.js";
@@ -368,10 +388,12 @@ import { UiWrench, UiWrenchFilled } from "./icons/components/UiWrench.js";
 import { UiZap, UiZapFilled } from "./icons/components/UiZap.js";
 import { UiZoomIn, UiZoomInFilled } from "./icons/components/UiZoomIn.js";
 import { UiZoomOut, UiZoomOutFilled } from "./icons/components/UiZoomOut.js";
+import { cacheQueryKeys, createCacheClient } from "./data/cache-browser/api.js";
 import { changeIconAliases, getChangeIcon } from "./icons/changeIconAliases.js";
 import { collapseSingleChildChains, collectFrameworks, filterTests, formatCount, formatTestDuration, hasFailed, hasPending, humanizeName, statusIconFor, statusToneFor, sum, sumNonTaskTests, testStatus, totalDuration } from "./data/test-runner/status.js";
 import { cycleFilterState, decodeFilterState, emptyTestFilters, encodeFilterState, matchesFilterState } from "./data/test-runner/filterState.js";
 import { frameworkIcon } from "./data/test-runner/frameworkIcon.js";
+import { isLeaf } from "./data/cache-browser/types.js";
 export {
   ACCEPT_OPTIONS,
   AVATAR_PALETTE,
@@ -382,6 +404,13 @@ export {
   Badge,
   Button,
   CLICKY_FORMAT_OPTIONS,
+  CacheAdapterRegistry,
+  CacheBrowser,
+  CacheDetailPanel,
+  CacheNodeRow,
+  CacheStatsOverview,
+  CacheTree,
+  CacheValue,
   Clicky,
   ClickyNodeView,
   ClickyTable,
@@ -391,12 +420,14 @@ export {
   CommandOutput,
   CopyBadge,
   DEFAULT_FORM_SIZE,
+  DEFAULT_PREFERENCES_STORAGE_KEY,
   DataTable,
   DateField,
   DatePicker,
   DateTimePicker,
   DensityProvider,
   DensitySwitcher,
+  DensityValueProvider,
   DetailEmptyState,
   DiagnosticsDetailPanel,
   DiagnosticsTree,
@@ -424,6 +455,8 @@ export {
   JvmStackTrace,
   KeyValueList,
   LabelIcon,
+  Loading,
+  LoadingDots,
   LogViewer,
   LogsTable,
   Markdown,
@@ -479,6 +512,7 @@ export {
   Tree,
   TreeGroupHeader,
   TreeNode,
+  TreePickerField,
   UiActivity,
   UiAdd,
   UiAddFilled,
@@ -975,6 +1009,7 @@ export {
   badgeVariants,
   bucketTasks,
   buttonVariants,
+  cacheQueryKeys,
   changeIconAliases,
   chooseTimestampFormat,
   cn,
@@ -985,6 +1020,8 @@ export {
   countProcesses,
   countStackByState,
   countThreadsByState,
+  createCacheClient,
+  createCacheRegistry,
   createOperationsApiClient,
   createTestRunnerRegistry,
   cycleFilterState,
@@ -1020,6 +1057,7 @@ export {
   humanizeName,
   inferColumns,
   isApplicationStackFrame,
+  isLeaf,
   isOpenStringMap,
   isPositionalParam,
   isTerminalStatus,
@@ -1044,9 +1082,11 @@ export {
   parseStackDump,
   parseTimestamp,
   parseWorkloadKey,
+  prefixAdapter,
   processLabel,
   processStateColor,
   processStateIcon,
+  readPreferences,
   resolveBreakdown,
   resolveControl,
   resolveSeries,
@@ -1081,6 +1121,7 @@ export {
   useTaskRuns,
   useTestRunner,
   useTheme,
-  workloadKey
+  workloadKey,
+  writePreferences
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/overlay/DropdownMenu.cjs

@@ -19,6 +19,7 @@ function DropdownMenu({
   align = "right",
   onOpenChange,
   title,
+  menuLabel,
   className,
   menuClassName
 }) {
@@ -90,6 +91,7 @@ function DropdownMenu({
       {
         ref: refs.setFloating,
         role: "menu",
+        "aria-label": menuLabel,
         style: floatingStyles,
         className: utils.cn(
           "z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md",

package/dist/overlay/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","cn","jsx","jsxs","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","cn","jsx","jsxs","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}

package/dist/overlay/DropdownMenu.d.ts

@@ -36,10 +36,12 @@ export type DropdownMenuProps = {
     onOpenChange?: (open: boolean) => void;
     /** Browser tooltip / accessible label for the default trigger. */
     title?: string;
+    /** Accessible label (`aria-label`) for the floating menu element itself. */
+    menuLabel?: string;
     /** Classes applied to the wrapper. */
     className?: string;
     /** Classes applied to the floating menu. */
     menuClassName?: string;
 };
-export declare function DropdownMenu({ label, icon, hideChevron, variant, size, trigger, items, children, align, onOpenChange, title, className, menuClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ label, icon, hideChevron, variant, size, trigger, items, children, align, onOpenChange, title, menuLabel, className, menuClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/overlay/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CA6HnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CA8HnB"}

package/dist/overlay/DropdownMenu.js

@@ -17,6 +17,7 @@ function DropdownMenu({
   align = "right",
   onOpenChange,
   title,
+  menuLabel,
   className,
   menuClassName
 }) {
@@ -88,6 +89,7 @@ function DropdownMenu({
       {
         ref: refs.setFloating,
         role: "menu",
+        "aria-label": menuLabel,
         style: floatingStyles,
         className: cn(
           "z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md",

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/Modal.cjs

@@ -5,6 +5,7 @@ const react = require("react");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const button = require("../components/button.cjs");
+const modalStack = require("./modalStack.cjs");
 const UiFullscreen = require("../icons/components/UiFullscreen.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
 const sizeClass = {
@@ -26,7 +27,7 @@ function Modal({
   confirmClose = false,
   title,
   size = "md",
-  closeOnBackdrop = true,
+  closeOnBackdrop = false,
   closeOnEsc = true,
   hideClose = false,
   expandable = true,
@@ -36,6 +37,7 @@ function Modal({
   children
 }) {
   const dialogRef = react.useRef(null);
+  const { isTop, depth } = modalStack.useModalStack(open);
   const [expanded, setExpanded] = react.useState(false);
   const [confirming, setConfirming] = react.useState(false);
   const requestClose = () => {
@@ -52,7 +54,7 @@ function Modal({
     if (!confirmClose) setConfirming(false);
   }, [confirmClose]);
   react.useEffect(() => {
-    if (!open || !closeOnEsc) return;
+    if (!open || !closeOnEsc || !isTop) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
       if (confirming) setConfirming(false);
@@ -60,7 +62,7 @@ function Modal({
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, closeOnEsc, confirming, confirmClose, onClose]);
+  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);
   react.useEffect(() => {
     var _a;
     if (!open) return;
@@ -75,7 +77,12 @@ function Modal({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40",
+      className: utils.cn(
+        "fixed inset-0 flex items-center justify-center",
+        // Nested modals dim less so the dialog they opened over stays visible.
+        depth === 0 ? "bg-black/40" : "bg-black/20"
+      ),
+      style: { zIndex: 50 + depth * 10 },
       onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/overlay/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  size = \"md\",\n  closeOnBackdrop = true,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40\"\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\n            {title ? (\n              <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n            ) : (\n              <span className=\"flex-1\" />\n            )}\n            {headerSlot}\n            {expandable && (\n              <button\n                type=\"button\"\n                onClick={() => setExpanded((v) => !v)}\n                aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n              </button>\n            )}\n            {!hideClose && (\n              <button\n                type=\"button\"\n                onClick={requestClose}\n                aria-label=\"Close\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={UiClose} />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useState","useEffect","_a","jsx","jsxs","cn","Icon","UiFullscreenFilled","UiFullscreen","UiClose","Button"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useModalStack } from \"./modalStack\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { isTop, depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: 50 + depth * 10 }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\n            {title ? (\n              <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n            ) : (\n              <span className=\"flex-1\" />\n            )}\n            {headerSlot}\n            {expandable && (\n              <button\n                type=\"button\"\n                onClick={() => setExpanded((v) => !v)}\n                aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n              </button>\n            )}\n            {!hideClose && (\n              <button\n                type=\"button\"\n                onClick={requestClose}\n                aria-label=\"Close\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={UiClose} />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useModalStack","useState","useEffect","_a","jsx","cn","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","Button"],"mappings":"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"}

package/dist/overlay/Modal.d.ts

@@ -27,7 +27,7 @@ export type ModalProps = {
     title?: ReactNode;
     /** Width/height preset for the dialog. */
     size?: ModalSize;
-    /** Close when the backdrop is clicked. */
+    /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */
     closeOnBackdrop?: boolean;
     /** Close when Escape is pressed. */
     closeOnEsc?: boolean;

package/dist/overlay/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAiBF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,IAAW,EACX,eAAsB,EACtB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,kDAgHZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAiBF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,IAAW,EACX,eAAuB,EACvB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,kDAwHZ"}

package/dist/overlay/Modal.js

@@ -3,6 +3,7 @@ import { useRef, useState, useEffect } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { Button } from "../components/button.js";
+import { useModalStack } from "./modalStack.js";
 import { UiFullscreenFilled, UiFullscreen } from "../icons/components/UiFullscreen.js";
 import { UiClose } from "../icons/components/UiClose.js";
 const sizeClass = {
@@ -24,7 +25,7 @@ function Modal({
   confirmClose = false,
   title,
   size = "md",
-  closeOnBackdrop = true,
+  closeOnBackdrop = false,
   closeOnEsc = true,
   hideClose = false,
   expandable = true,
@@ -34,6 +35,7 @@ function Modal({
   children
 }) {
   const dialogRef = useRef(null);
+  const { isTop, depth } = useModalStack(open);
   const [expanded, setExpanded] = useState(false);
   const [confirming, setConfirming] = useState(false);
   const requestClose = () => {
@@ -50,7 +52,7 @@ function Modal({
     if (!confirmClose) setConfirming(false);
   }, [confirmClose]);
   useEffect(() => {
-    if (!open || !closeOnEsc) return;
+    if (!open || !closeOnEsc || !isTop) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
       if (confirming) setConfirming(false);
@@ -58,7 +60,7 @@ function Modal({
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, closeOnEsc, confirming, confirmClose, onClose]);
+  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);
   useEffect(() => {
     var _a;
     if (!open) return;
@@ -73,7 +75,12 @@ function Modal({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40",
+      className: cn(
+        "fixed inset-0 flex items-center justify-center",
+        // Nested modals dim less so the dialog they opened over stays visible.
+        depth === 0 ? "bg-black/40" : "bg-black/20"
+      ),
+      style: { zIndex: 50 + depth * 10 },
       onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxs(

package/dist/overlay/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  size = \"md\",\n  closeOnBackdrop = true,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    if (!open || !closeOnEsc) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40\"\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\n            {title ? (\n              <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n            ) : (\n              <span className=\"flex-1\" />\n            )}\n            {headerSlot}\n            {expandable && (\n              <button\n                type=\"button\"\n                onClick={() => setExpanded((v) => !v)}\n                aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n              </button>\n            )}\n            {!hideClose && (\n              <button\n                type=\"button\"\n                onClick={requestClose}\n                aria-label=\"Close\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={UiClose} />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":";;;;;;;AAsDA,MAAM,YAAuC;AAAA,EAC3C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEA,MAAM,kBAAiD;AAAA,EACrD,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AACf;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAG9C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAIlD,QAAM,eAAe,MAAM;AACzB,QAAI,4BAA4B,IAAI;AAAA,QAC/B,SAAA;AAAA,EACP;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,kBAAY,KAAK;AACjB,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAIT,YAAU,MAAM;AACd,QAAI,CAAC,aAAc,eAAc,KAAK;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,CAAC,WAAY;AAC1B,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU;AAExB,UAAI,0BAA0B,KAAK;AAAA,UAC9B,cAAA;AAAA,IACP;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,MAAM,YAAY,YAAY,cAAc,OAAO,CAAC;AAExD,YAAU,MAAM;;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,SAAS;AACtB,oBAAU,YAAV,mBAAmB;AACnB,WAAO,MAAA;;AAAM,cAAAA,MAAA,6BAAM,UAAN,gBAAAA,IAAA;AAAA;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO;AAElB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS,kBAAkB,eAAe;AAAA,MAC1C,MAAK;AAAA,MAEL,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAW;AAAA,UACX,cAAY,OAAO,UAAU,WAAW,QAAQ;AAAA,UAChD,WAAW;AAAA,YACT;AAAA,YACA,WAAW,UAAU,OAAO,UAAU,IAAI;AAAA,YAC1C;AAAA,UAAA;AAAA,UAEF,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEhB,UAAA;AAAA,aAAA,SAAS,cAAc,cAAc,CAAC,cACtC,qBAAC,OAAA,EAAI,WAAU,oFACZ,UAAA;AAAA,cAAA,QACC,oBAAC,QAAG,WAAU,gCAAgC,iBAAM,IAEpD,oBAAC,QAAA,EAAK,WAAU,SAAA,CAAS;AAAA,cAE1B;AAAA,cACA,cACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;AAAA,kBACpC,cAAY,WAAW,iBAAiB;AAAA,kBACxC,WAAU;AAAA,kBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,WAAW,qBAAqB,aAAA,CAAc;AAAA,gBAAA;AAAA,cAAA;AAAA,cAG7D,CAAC,aACA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,cAAW;AAAA,kBACX,WAAU;AAAA,kBAEV,UAAA,oBAAC,MAAA,EAAK,MAAM,QAAA,CAAS;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvB,GAEJ;AAAA,YAEF,oBAAC,OAAA,EAAI,WAAU,kDAAkD,SAAA,CAAS;AAAA,YACzE,UAAU,oBAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,QAAO;AAAA,YACpF,cACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,iBAAiB,OAAO,kBAAkB,EAAE,GAAG,iBAAiB,GAAG,aAAA;AAAA,gBAC5E,WAAW,MAAM;AACf,gCAAc,KAAK;AACnB,0BAAA;AAAA,gBACF;AAAA,gBACA,UAAU,MAAM,cAAc,KAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;AAEA,SAAS,mBAAmB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MACX,cAAY,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ;AAAA,MAChE,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,MAElB,UAAA,qBAAC,OAAA,EAAI,WAAU,uFACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,QAAQ,OAAM;AAAA,QACrD,oBAAC,KAAA,EAAE,WAAU,8CAA8C,kBAAQ,SAAQ;AAAA,QAC3E,qBAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,UACxC,kBAAQ,YAAA,CACX;AAAA,UACA,oBAAC,UAAO,SAAQ,eAAc,MAAK,MAAK,SAAS,WAC9C,UAAA,QAAQ,aAAA,CACX;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Modal.js","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useModalStack } from \"./modalStack\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { isTop, depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: 50 + depth * 10 }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || headerSlot || expandable || !hideClose) && (\n          <div className=\"flex items-center gap-density-2 px-density-4 py-density-3 border-b border-border\">\n            {title ? (\n              <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n            ) : (\n              <span className=\"flex-1\" />\n            )}\n            {headerSlot}\n            {expandable && (\n              <button\n                type=\"button\"\n                onClick={() => setExpanded((v) => !v)}\n                aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n              </button>\n            )}\n            {!hideClose && (\n              <button\n                type=\"button\"\n                onClick={requestClose}\n                aria-label=\"Close\"\n                className=\"text-muted-foreground hover:text-foreground\"\n              >\n                <Icon icon={UiClose} />\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["_a"],"mappings":"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"}