@womp/kookie-ui 0.6.2 → 0.8.0

package/dist/cjs/components/user-card.props.d.ts

@@ -8,11 +8,6 @@ declare const userCardPropDefs: {
         type: "boolean";
         default: false;
     };
-    highContrast: {
-        type: "boolean";
-        className: string;
-        default: undefined;
-    };
     color: {
         type: "enum";
         values: readonly ["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"];

package/dist/cjs/components/user-card.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-card.props.d.ts","sourceRoot":"","sources":["../../../src/components/user-card.props.tsx"],"names":[],"mappings":"AAYA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"user-card.props.d.ts","sourceRoot":"","sources":["../../../src/components/user-card.props.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BrB,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/cjs/components/user-card.props.js

@@ -1,2 +1,2 @@
-"use strict";var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var d=(o,e)=>{for(var t in e)a(o,t,{get:e[t],enumerable:!0})},m=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!c.call(o,r)&&r!==t&&a(o,r,{get:()=>e[r],enumerable:!(s=l(e,r))||s.enumerable});return o};var y=o=>m(a({},"__esModule",{value:!0}),o);var k={};d(k,{userCardPropDefs:()=>C});module.exports=y(k);var n={asChild:{type:"boolean"}};var D=["gray","gold","bronze","brown","yellow","amber","orange","tomato","red","ruby","crimson","pink","plum","purple","violet","iris","indigo","blue","cyan","teal","jade","green","grass","lime","mint","sky"];var p={color:{type:"enum",values:D,default:""}};var i={highContrast:{type:"boolean",className:"rt-high-contrast",default:void 0}};var P=["none","small","medium","large","full"],f={radius:{type:"enum",values:P,default:void 0}};var g=["1","2","3","4"],b=["ghost","surface","classic"],v=["solid","soft","surface","outline"],h=["solid","translucent"],C={...n,size:{type:"enum",className:"rt-r-size",values:g,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:b,default:"surface"},src:{type:"string"},fallback:{type:"ReactNode",required:!0},name:{type:"string",required:!0},description:{type:"string"},avatarVariant:{type:"enum",values:v,default:"soft"},...f,...p,...i,panelBackground:{type:"enum",values:h,default:void 0},flush:{type:"boolean",default:!1}};
+"use strict";var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var c=(o,e)=>{for(var a in e)s(o,a,{get:e[a],enumerable:!0})},d=(o,e,a,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of l(e))!u.call(o,r)&&r!==a&&s(o,r,{get:()=>e[r],enumerable:!(t=f(e,r))||t.enumerable});return o};var m=o=>d(s({},"__esModule",{value:!0}),o);var k={};c(k,{userCardPropDefs:()=>C});module.exports=m(k);var n={asChild:{type:"boolean"}};var y=["gray","gold","bronze","brown","yellow","amber","orange","tomato","red","ruby","crimson","pink","plum","purple","violet","iris","indigo","blue","cyan","teal","jade","green","grass","lime","mint","sky"];var p={color:{type:"enum",values:y,default:""}};var D=["none","small","medium","large","full"],i={radius:{type:"enum",values:D,default:void 0}};var P=["1","2","3","4"],g=["ghost","surface","classic"],b=["solid","soft","surface","outline"],v=["solid","translucent"],C={...n,size:{type:"enum",className:"rt-r-size",values:P,default:"2",responsive:!0},variant:{type:"enum",className:"rt-variant",values:g,default:"surface"},src:{type:"string"},fallback:{type:"ReactNode",required:!0},name:{type:"string",required:!0},description:{type:"string"},avatarVariant:{type:"enum",values:b,default:"soft"},...i,...p,panelBackground:{type:"enum",values:v,default:void 0},flush:{type:"boolean",default:!1}};
 //# sourceMappingURL=user-card.props.js.map

package/dist/cjs/components/user-card.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/user-card.props.tsx", "../../../src/props/as-child.prop.ts", "../../../src/props/color.prop.ts", "../../../src/props/high-contrast.prop.ts", "../../../src/props/radius.prop.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst variants = ['ghost', 'surface', 'classic'] as const;\nconst avatarVariants = ['solid', 'soft', 'surface', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\nconst userCardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n\n  // Content props\n  src: { type: 'string' },\n  fallback: { type: 'ReactNode', required: true },\n  name: { type: 'string', required: true },\n  description: { type: 'string' },\n\n  // Avatar styling\n  avatarVariant: { type: 'enum', values: avatarVariants, default: 'soft' },\n  ...radiusPropDef,\n\n  // Card styling\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  src: PropDef<string>;\n  fallback: PropDef<React.ReactNode>;\n  name: PropDef<string>;\n  description: PropDef<string>;\n  avatarVariant: PropDef<(typeof avatarVariants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { userCardPropDefs };\n", "import type { PropDef } from './prop-def.js';\n\nconst asChildPropDef = {\n  /**\n   * Composes the component into its immediate child instead of rendering its own HTML element.\n   * You\u2019ll have to provide a single React Element child.\n   */\n  asChild: {\n    type: 'boolean',\n  },\n} satisfies {\n  asChild: PropDef<boolean>;\n};\n\nexport { asChildPropDef };\n", "import type { PropDef } from './prop-def.js';\n\n// prettier-ignore\nconst accentColors = ['gray', 'gold', 'bronze', 'brown', 'yellow', 'amber', 'orange', 'tomato', 'red', 'ruby', 'crimson', 'pink', 'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', 'grass', 'lime', 'mint', 'sky'] as const;\n\nconst grayColors = ['auto', 'gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;\n\nconst colorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: undefined as (typeof accentColors)[number] | undefined,\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\n// 1. When used on components that compose Text, sets the color of the text to the current accent.\n// 2. Defines accent color for descendant text components\u00A0with `highContrast={true}`.\nconst accentColorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: '' as (typeof accentColors)[number],\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\nexport {\n  accentColorPropDef,\n  colorPropDef,\n  //\n  accentColors,\n  grayColors,\n};\n", "import type { PropDef } from './prop-def.js';\n\nconst highContrastPropDef = {\n  highContrast: {\n    type: 'boolean',\n    className: 'rt-high-contrast',\n    default: undefined,\n  },\n} satisfies {\n  highContrast: PropDef<boolean>;\n};\n\nexport { highContrastPropDef };\n", "import type { PropDef } from './prop-def.js';\n\nconst radii = ['none', 'small', 'medium', 'large', 'full'] as const;\n\nconst radiusPropDef = {\n  radius: {\n    type: 'enum',\n    values: radii,\n    default: undefined,\n  },\n} satisfies {\n  radius: PropDef<(typeof radii)[number]>;\n};\n\nexport { radiusPropDef, radii };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GCEA,IAAMI,EAAiB,CAKrB,QAAS,CACP,KAAM,SACR,CACF,ECPA,IAAMC,EAAe,CAAC,OAAQ,OAAQ,SAAU,QAAS,SAAU,QAAS,SAAU,SAAU,MAAO,OAAQ,UAAW,OAAQ,OAAQ,SAAU,SAAU,OAAQ,SAAU,OAAQ,OAAQ,OAAQ,OAAQ,QAAS,QAAS,OAAQ,OAAQ,KAAK,EAgBvP,IAAMC,EAAqB,CACzB,MAAO,CACL,KAAM,OACN,OAAQC,EACR,QAAS,EACX,CACF,ECvBA,IAAMC,EAAsB,CAC1B,aAAc,CACZ,KAAM,UACN,UAAW,mBACX,QAAS,MACX,CACF,ECNA,IAAMC,EAAQ,CAAC,OAAQ,QAAS,SAAU,QAAS,MAAM,EAEnDC,EAAgB,CACpB,OAAQ,CACN,KAAM,OACN,OAAQD,EACR,QAAS,MACX,CACF,EJHA,IAAME,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAC3BC,EAAW,CAAC,QAAS,UAAW,SAAS,EACzCC,EAAiB,CAAC,QAAS,OAAQ,UAAW,SAAS,EACvDC,EAAmB,CAAC,QAAS,aAAa,EAE1CC,EAAmB,CACvB,GAAGC,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQL,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EAGvF,IAAK,CAAE,KAAM,QAAS,EACtB,SAAU,CAAE,KAAM,YAAa,SAAU,EAAK,EAC9C,KAAM,CAAE,KAAM,SAAU,SAAU,EAAK,EACvC,YAAa,CAAE,KAAM,QAAS,EAG9B,cAAe,CAAE,KAAM,OAAQ,OAAQC,EAAgB,QAAS,MAAO,EACvE,GAAGI,EAGH,GAAGC,EACH,GAAGC,EACH,gBAAiB,CAAE,KAAM,OAAQ,OAAQL,EAAkB,QAAS,MAAU,EAC9E,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
-  "names": ["user_card_props_exports", "__export", "userCardPropDefs", "__toCommonJS", "asChildPropDef", "accentColors", "accentColorPropDef", "accentColors", "highContrastPropDef", "radii", "radiusPropDef", "sizes", "variants", "avatarVariants", "panelBackgrounds", "userCardPropDefs", "asChildPropDef", "radiusPropDef", "accentColorPropDef", "highContrastPropDef"]
+  "sources": ["../../../src/components/user-card.props.tsx", "../../../src/props/as-child.prop.ts", "../../../src/props/color.prop.ts", "../../../src/props/radius.prop.ts"],
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef } from '../props/color.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4'] as const;\nconst variants = ['ghost', 'surface', 'classic'] as const;\nconst avatarVariants = ['solid', 'soft', 'surface', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\n\nconst userCardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },\n\n  // Content props\n  src: { type: 'string' },\n  fallback: { type: 'ReactNode', required: true },\n  name: { type: 'string', required: true },\n  description: { type: 'string' },\n\n  // Avatar styling\n  avatarVariant: { type: 'enum', values: avatarVariants, default: 'soft' },\n  ...radiusPropDef,\n\n  // Card styling\n  ...accentColorPropDef,\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  src: PropDef<string>;\n  fallback: PropDef<React.ReactNode>;\n  name: PropDef<string>;\n  description: PropDef<string>;\n  avatarVariant: PropDef<(typeof avatarVariants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { userCardPropDefs };\n", "import type { PropDef } from './prop-def.js';\n\nconst asChildPropDef = {\n  /**\n   * Composes the component into its immediate child instead of rendering its own HTML element.\n   * You\u2019ll have to provide a single React Element child.\n   */\n  asChild: {\n    type: 'boolean',\n  },\n} satisfies {\n  asChild: PropDef<boolean>;\n};\n\nexport { asChildPropDef };\n", "import type { PropDef } from './prop-def.js';\n\n// prettier-ignore\nconst accentColors = ['gray', 'gold', 'bronze', 'brown', 'yellow', 'amber', 'orange', 'tomato', 'red', 'ruby', 'crimson', 'pink', 'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', 'grass', 'lime', 'mint', 'sky'] as const;\n\nconst grayColors = ['auto', 'gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;\n\nconst colorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: undefined as (typeof accentColors)[number] | undefined,\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\n// 1. When used on components that compose Text, sets the color of the text to the current accent.\n// 2. Re-declares the accent role tokens (`--accent-ink`, `--accent-solid`, ...) that descendants read.\nconst accentColorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: '' as (typeof accentColors)[number],\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\nexport {\n  accentColorPropDef,\n  colorPropDef,\n  //\n  accentColors,\n  grayColors,\n};\n", "import type { PropDef } from './prop-def.js';\n\nconst radii = ['none', 'small', 'medium', 'large', 'full'] as const;\n\nconst radiusPropDef = {\n  radius: {\n    type: 'enum',\n    values: radii,\n    default: undefined,\n  },\n} satisfies {\n  radius: PropDef<(typeof radii)[number]>;\n};\n\nexport { radiusPropDef, radii };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,IAAA,eAAAC,EAAAH,GCEA,IAAMI,EAAiB,CAKrB,QAAS,CACP,KAAM,SACR,CACF,ECPA,IAAMC,EAAe,CAAC,OAAQ,OAAQ,SAAU,QAAS,SAAU,QAAS,SAAU,SAAU,MAAO,OAAQ,UAAW,OAAQ,OAAQ,SAAU,SAAU,OAAQ,SAAU,OAAQ,OAAQ,OAAQ,OAAQ,QAAS,QAAS,OAAQ,OAAQ,KAAK,EAgBvP,IAAMC,EAAqB,CACzB,MAAO,CACL,KAAM,OACN,OAAQC,EACR,QAAS,EACX,CACF,ECvBA,IAAMC,EAAQ,CAAC,OAAQ,QAAS,SAAU,QAAS,MAAM,EAEnDC,EAAgB,CACpB,OAAQ,CACN,KAAM,OACN,OAAQD,EACR,QAAS,MACX,CACF,EHJA,IAAME,EAAQ,CAAC,IAAK,IAAK,IAAK,GAAG,EAC3BC,EAAW,CAAC,QAAS,UAAW,SAAS,EACzCC,EAAiB,CAAC,QAAS,OAAQ,UAAW,SAAS,EACvDC,EAAmB,CAAC,QAAS,aAAa,EAE1CC,EAAmB,CACvB,GAAGC,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQL,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EAGvF,IAAK,CAAE,KAAM,QAAS,EACtB,SAAU,CAAE,KAAM,YAAa,SAAU,EAAK,EAC9C,KAAM,CAAE,KAAM,SAAU,SAAU,EAAK,EACvC,YAAa,CAAE,KAAM,QAAS,EAG9B,cAAe,CAAE,KAAM,OAAQ,OAAQC,EAAgB,QAAS,MAAO,EACvE,GAAGI,EAGH,GAAGC,EACH,gBAAiB,CAAE,KAAM,OAAQ,OAAQJ,EAAkB,QAAS,MAAU,EAC9E,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
+  "names": ["user_card_props_exports", "__export", "userCardPropDefs", "__toCommonJS", "asChildPropDef", "accentColors", "accentColorPropDef", "accentColors", "radii", "radiusPropDef", "sizes", "variants", "avatarVariants", "panelBackgrounds", "userCardPropDefs", "asChildPropDef", "radiusPropDef", "accentColorPropDef"]
 }

package/dist/cjs/components/virtual-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/virtual-menu.tsx", "../../../src/components/_internal/menu-context.tsx", "../../../src/components/theme.tsx", "../../../src/helpers/get-matching-gray-color.ts", "../../../src/hooks/use-prop-synced-state.ts", "../../../src/helpers/use-deprecation-warning.ts", "../../../src/props/as-child.prop.ts", "../../../src/props/color.prop.ts", "../../../src/props/radius.prop.ts", "../../../src/components/theme.props.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';\nimport { useThemeContext } from './theme.js';\n\n/**\n * VirtualMenu - A virtualized menu component for rendering large lists efficiently.\n *\n * Uses TanStack Virtual to render only visible items.\n * Works inside any container (DropdownMenu.Content, Popover.Content, etc.)\n *\n * @example\n * // Simple usage with itemLabel\n * <VirtualMenu\n *   items={items}\n *   itemLabel={(item) => item.name}\n *   onSelect={handleSelect}\n * />\n *\n * @example\n * // Custom rendering with renderItem\n * const UserItem = React.memo(({ item, ...props }) => (\n *   <VirtualMenu.Item {...props}>\n *     <Avatar src={item.avatar} />\n *     {item.name}\n *   </VirtualMenu.Item>\n * ));\n *\n * <VirtualMenu items={users} renderItem={UserItem} onSelect={handleSelect} />\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Props passed to custom renderItem components */\ninterface VirtualMenuRenderItemProps<T> {\n  /** The item data */\n  item: T;\n  /** Index in the items array */\n  index: number;\n  /** Whether this item is currently highlighted */\n  isHighlighted: boolean;\n  /** Unique ID for accessibility */\n  id: string;\n  /** Positioning styles - must be applied */\n  style: React.CSSProperties;\n  /** Tab index for focus management */\n  tabIndex: number;\n  /** Data attribute for CSS styling */\n  'data-highlighted': true | undefined;\n  /** Data attribute for event delegation */\n  'data-index': number;\n  /** Mouse enter handler */\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Mouse leave handler */\n  onMouseLeave: () => void;\n  /** Click handler */\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Keyboard handler for Enter/Space activation */\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface VirtualMenuProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /**\n   * Simple label accessor for basic text items.\n   * Can be a property key or a function.\n   * @example\n   * itemLabel=\"name\"\n   * itemLabel={(item) => item.name}\n   */\n  itemLabel?: keyof T | ((item: T) => React.ReactNode);\n  /**\n   * Custom component for rendering items.\n   * Must be memoized (React.memo) for optimal performance.\n   * @example\n   * const MyItem = React.memo(({ item, ...props }) => (\n   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>\n   * ));\n   * <VirtualMenu items={items} renderItem={MyItem} />\n   */\n  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;\n  /**\n   * Menu size - controls item height.\n   * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.\n   * Only set manually when using VirtualMenu outside of a menu context.\n   * @default '2' (or inherited from context)\n   */\n  size?: '1' | '2';\n  /**\n   * Estimated height of each item in pixels.\n   * Can be a number (same for all) or a function (per-item).\n   * Usually not needed - height is automatically derived from size prop/context.\n   * Use this only for custom item heights (e.g., variable height items).\n   */\n  estimatedItemSize?: number | ((index: number) => number);\n  /** Number of items to render outside visible area */\n  overscan?: number;\n  /** Callback when an item is selected */\n  onSelect?: (item: T, index: number) => void;\n  /** Additional class name */\n  className?: string;\n  /** Additional styles */\n  style?: React.CSSProperties;\n  /** Accessible label for the menu */\n  'aria-label'?: string;\n}\n\n// ============================================================================\n// Internal Memoized Item Component\n// ============================================================================\n\ninterface SimpleItemProps {\n  label: React.ReactNode;\n  isHighlighted: boolean;\n  id: string;\n  style: React.CSSProperties;\n  tabIndex: number;\n  'data-highlighted': true | undefined;\n  'data-index': number;\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nconst SimpleItem = React.memo(\n  function SimpleItem({\n    label,\n    isHighlighted: _isHighlighted,\n    id,\n    style,\n    tabIndex,\n    'data-highlighted': dataHighlighted,\n    'data-index': dataIndex,\n    onMouseEnter,\n    onMouseLeave,\n    onClick,\n    onKeyDown,\n  }: SimpleItemProps) {\n    return (\n      <div\n        id={id}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem')}\n        style={style}\n        tabIndex={tabIndex}\n        data-highlighted={dataHighlighted}\n        data-index={dataIndex}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {label}\n      </div>\n    );\n  },\n  (prev, next) => {\n    // Custom comparison - only re-render if these change\n    if (prev.label !== next.label) return false;\n    if (prev['data-highlighted'] !== next['data-highlighted']) return false;\n    if (prev.style.height !== next.style.height) return false;\n    if (prev.style.transform !== next.style.transform) return false;\n    if (prev.tabIndex !== next.tabIndex) return false;\n    if (prev.id !== next.id) return false;\n    // Event handlers are stable, skip comparison\n    return true;\n  },\n);\n\n// ============================================================================\n// VirtualMenu Component\n// ============================================================================\n\nfunction VirtualMenuRoot<T>({\n  items,\n  itemLabel,\n  renderItem: RenderItem,\n  size: sizeProp,\n  estimatedItemSize: estimatedItemSizeProp,\n  overscan = 5,\n  onSelect,\n  className,\n  style,\n  'aria-label': ariaLabel,\n}: VirtualMenuProps<T>) {\n  const menuId = React.useId();\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);\n  const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();\n  const { scaling } = useThemeContext();\n\n  // Resolve item height: explicit prop > own size > parent menu > default size '2'.\n  // Heights follow the theme scaling, like the --base-menu-item-height token.\n  const estimatedItemSize =\n    estimatedItemSizeProp ??\n    (sizeProp\n      ? getMenuItemHeight(sizeProp, scaling)\n      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2', scaling)));\n\n  // Validate props\n  if (!itemLabel && !RenderItem) {\n    throw new Error('VirtualMenu requires either itemLabel or renderItem prop');\n  }\n\n  // Normalize itemLabel to a function\n  const getLabel = React.useMemo(() => {\n    if (!itemLabel) return null;\n    if (typeof itemLabel === 'function') return itemLabel;\n    return (item: T) => item[itemLabel] as React.ReactNode;\n  }, [itemLabel]);\n\n  // Derive safe highlighted index\n  const safeHighlightedIndex = React.useMemo(() => {\n    if (items.length === 0) return -1;\n    if (highlightedIndex < 0) return -1;\n    return Math.min(highlightedIndex, items.length - 1);\n  }, [highlightedIndex, items.length]);\n\n  // Normalize estimatedItemSize to a function\n  const getItemSize = React.useMemo(\n    () =>\n      typeof estimatedItemSize === 'function'\n        ? estimatedItemSize\n        : () => estimatedItemSize,\n    [estimatedItemSize],\n  );\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: getItemSize,\n    overscan,\n  });\n\n  const virtualItems = virtualizer.getVirtualItems();\n\n  // Refs for stable handler references\n  const itemsRef = React.useRef(items);\n  const onSelectRef = React.useRef(onSelect);\n  itemsRef.current = items;\n  onSelectRef.current = onSelect;\n\n  const scrollToIndexRef = React.useRef(virtualizer.scrollToIndex);\n  scrollToIndexRef.current = virtualizer.scrollToIndex;\n\n  const highlightedIndexRef = React.useRef(safeHighlightedIndex);\n  highlightedIndexRef.current = safeHighlightedIndex;\n\n  // Stable event handlers\n  const handleItemMouseEnter = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      setHighlightedIndex(Number(index));\n    }\n  }, []);\n\n  const handleItemClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      const idx = Number(index);\n      const currentItems = itemsRef.current;\n      if (idx >= 0 && idx < currentItems.length) {\n        onSelectRef.current?.(currentItems[idx], idx);\n      }\n    }\n  }, []);\n\n  const noop = React.useCallback(() => {}, []);\n\n  // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)\n  const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      const index = e.currentTarget.dataset.index;\n      if (index != null) {\n        const idx = Number(index);\n        const currentItems = itemsRef.current;\n        if (idx >= 0 && idx < currentItems.length) {\n          onSelectRef.current?.(currentItems[idx], idx);\n        }\n      }\n    }\n  }, []);\n\n  // Keyboard navigation\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    const currentItems = itemsRef.current;\n    const currentHighlightedIndex = highlightedIndexRef.current;\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const nextIndex =\n          currentHighlightedIndex < currentItems.length - 1 ? currentHighlightedIndex + 1 : 0;\n        setHighlightedIndex(nextIndex);\n        scrollToIndexRef.current(nextIndex, { align: 'auto' });\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prevIndex =\n          currentHighlightedIndex > 0 ? currentHighlightedIndex - 1 : currentItems.length - 1;\n        setHighlightedIndex(prevIndex);\n        scrollToIndexRef.current(prevIndex, { align: 'auto' });\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        setHighlightedIndex(0);\n        scrollToIndexRef.current(0, { align: 'start' });\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const lastIndex = currentItems.length - 1;\n        setHighlightedIndex(lastIndex);\n        scrollToIndexRef.current(lastIndex, { align: 'end' });\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (currentHighlightedIndex >= 0 && currentHighlightedIndex < currentItems.length) {\n          onSelectRef.current?.(currentItems[currentHighlightedIndex], currentHighlightedIndex);\n        }\n        break;\n      }\n      case 'Tab': {\n        e.preventDefault();\n        break;\n      }\n      case 'Escape': {\n        (e.currentTarget as HTMLElement).blur();\n        break;\n      }\n    }\n  }, []);\n\n  // Item ID generator\n  const getItemId = React.useCallback(\n    (index: number) => `${menuId}-item-${index}`,\n    [menuId],\n  );\n\n  // Memoize styles\n  const rootStyle = React.useMemo(\n    () => ({\n      overflow: 'auto' as const,\n      position: 'relative' as const,\n      ...style,\n    }),\n    [style],\n  );\n\n  const totalSize = virtualizer.getTotalSize();\n  const viewportStyle = React.useMemo(\n    () => ({\n      height: `${totalSize}px`,\n      width: '100%' as const,\n      position: 'relative' as const,\n    }),\n    [totalSize],\n  );\n\n  return (\n    <div\n      ref={parentRef}\n      role={isInsideMenu ? 'group' : 'menu'}\n      aria-label={ariaLabel}\n      aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      className={classNames('rt-VirtualMenuRoot', className)}\n      style={rootStyle}\n    >\n      <div className=\"rt-VirtualMenuViewport\" style={viewportStyle}>\n        {virtualItems.map((virtualRow) => {\n          const item = items[virtualRow.index];\n          const index = virtualRow.index;\n          const isHighlighted = safeHighlightedIndex === index;\n\n          const itemStyle: React.CSSProperties = {\n            height: virtualRow.size,\n            transform: `translateY(${virtualRow.start}px)`,\n          };\n\n          const commonProps = {\n            id: getItemId(index),\n            isHighlighted,\n            style: itemStyle,\n            tabIndex: isHighlighted ? 0 : -1,\n            'data-highlighted': isHighlighted ? true as const : undefined,\n            'data-index': index,\n            onMouseEnter: handleItemMouseEnter,\n            onMouseLeave: noop,\n            onClick: handleItemClick,\n            onKeyDown: handleItemKeyDown,\n          };\n\n          // Use renderItem if provided, otherwise use SimpleItem with itemLabel\n          if (RenderItem) {\n            return (\n              <RenderItem\n                key={virtualRow.key}\n                item={item}\n                index={index}\n                {...commonProps}\n              />\n            );\n          }\n\n          return (\n            <SimpleItem\n              key={virtualRow.key}\n              label={getLabel!(item)}\n              {...commonProps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nVirtualMenuRoot.displayName = 'VirtualMenu';\n\n// ============================================================================\n// VirtualMenu.Item Component (for custom renderItem usage)\n// ============================================================================\n\ninterface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  children: React.ReactNode;\n  /** Data attribute for highlight styling */\n  'data-highlighted'?: true | undefined;\n  /** Data attribute for event delegation */\n  'data-index'?: number;\n}\n\nconst VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nVirtualMenuItemInner.displayName = 'VirtualMenu.Item';\n\n// Memoized with custom comparison\nconst VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {\n  const prevStyle = prevProps.style as React.CSSProperties | undefined;\n  const nextStyle = nextProps.style as React.CSSProperties | undefined;\n  if (prevStyle?.height !== nextStyle?.height) return false;\n  if (prevStyle?.transform !== nextStyle?.transform) return false;\n  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;\n  if (prevProps.tabIndex !== nextProps.tabIndex) return false;\n  if (prevProps.id !== nextProps.id) return false;\n  if (prevProps.className !== nextProps.className) return false;\n  if (prevProps.children !== nextProps.children) return false;\n  return true;\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst VirtualMenu = Object.assign(VirtualMenuRoot, {\n  Item: VirtualMenuItem,\n});\n\nexport { VirtualMenu };\nexport type { VirtualMenuProps, VirtualMenuItemProps, VirtualMenuRenderItemProps };\n", "'use client';\n\nimport * as React from 'react';\n\nimport { useThemeContext } from '../theme.js';\nimport { useResolvedResponsiveValue } from './base-menu.utils.js';\n\nimport type { Responsive } from '../../props/prop-def.js';\n\n/**\n * Context to detect if a component is rendered inside a menu (DropdownMenu, ContextMenu, etc.)\n * Used by VirtualMenu to adjust its behavior:\n * - Skip role=\"menu\" when inside a parent menu (parent owns the role)\n * - Delegate certain keyboard handling to parent\n * - Use the correct item height based on menu size\n */\n\nexport type MenuSize = '1' | '2';\n\ninterface MenuContextValue {\n  /** Whether we're inside a menu that owns the menu role */\n  isInsideMenu: boolean;\n  /** Menu size for the current breakpoint */\n  size?: MenuSize;\n  /** Item height in px for the current size and theme scaling */\n  itemHeight?: number;\n}\n\nconst MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });\n\ninterface MenuProviderProps {\n  children: React.ReactNode;\n  /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */\n  size?: Responsive<MenuSize>;\n}\n\n/** Map menu size to item height in pixels at 100% scaling */\nexport const menuSizeToItemHeight: Record<MenuSize, number> = {\n  '1': 24, // --space-5\n  '2': 32, // --space-6\n};\n\n/** Item height in px for a size at the given theme scaling (\"100%\", \"110%\"\u2026). */\nexport function getMenuItemHeight(size: MenuSize, scaling: string | undefined): number {\n  const scale = scaling ? parseFloat(scaling) / 100 : 1;\n  return menuSizeToItemHeight[size] * (Number.isFinite(scale) ? scale : 1);\n}\n\nexport function MenuProvider({ children, size }: MenuProviderProps) {\n  const resolvedSize = useResolvedResponsiveValue<MenuSize | undefined>(size, undefined);\n  const { scaling } = useThemeContext();\n  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize, scaling) : undefined;\n  const value = React.useMemo(\n    () => ({ isInsideMenu: true, size: resolvedSize, itemHeight }),\n    [resolvedSize, itemHeight],\n  );\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n}\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n", "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\nimport { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { usePropSyncedState } from '../hooks/use-prop-synced-state.js';\nimport { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\ntype ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];\n// Headings follow the body font until something sets this, so `undefined` is a\n// meaningful value here rather than a missing one.\ntype ThemeHeadingFontFamily = ThemeFontFamily | undefined;\n\ninterface ThemeChangeHandlers {\n  onAppearanceChange: (appearance: ThemeAppearance) => void;\n  onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n  onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n  onMaterialChange: (material: ThemeMaterial) => void;\n  onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n  onRadiusChange: (radius: ThemeRadius) => void;\n  onScalingChange: (scaling: ThemeScaling) => void;\n  onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;\n  onHeadingFontFamilyChange: (headingFontFamily: ThemeHeadingFontFamily) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n  appearance: ThemeAppearance;\n  accentColor: ThemeAccentColor;\n  grayColor: ThemeGrayColor;\n  resolvedGrayColor: ThemeGrayColor;\n  material: ThemeMaterial;\n  panelBackground: ThemePanelBackground;\n  radius: ThemeRadius;\n  scaling: ThemeScaling;\n  fontFamily: ThemeFontFamily;\n  headingFontFamily: ThemeHeadingFontFamily;\n}\n// Default theme values used when components render outside a Theme provider\nconst defaultThemeContext: ThemeContextValue = {\n  appearance: themePropDefs.appearance.default,\n  accentColor: themePropDefs.accentColor.default,\n  grayColor: themePropDefs.grayColor.default,\n  resolvedGrayColor: themePropDefs.grayColor.default,\n  material: themePropDefs.material.default,\n  panelBackground: themePropDefs.panelBackground.default,\n  radius: themePropDefs.radius.default,\n  scaling: themePropDefs.scaling.default,\n  fontFamily: themePropDefs.fontFamily.default,\n  headingFontFamily: undefined,\n  onAppearanceChange: noop,\n  onAccentColorChange: noop,\n  onGrayColorChange: noop,\n  onMaterialChange: noop,\n  onPanelBackgroundChange: noop,\n  onRadiusChange: noop,\n  onScalingChange: noop,\n  onFontFamilyChange: noop,\n  onHeadingFontFamilyChange: noop,\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n  const context = React.useContext(ThemeContext);\n  // Return default context if used outside Theme provider (e.g., during SSR)\n  return context ?? defaultThemeContext;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const isRoot = context === undefined;\n  if (isRoot) {\n    return (\n      <TooltipPrimitive.Provider delayDuration={200}>\n        <Direction.Provider dir=\"ltr\">\n          <ThemeRoot {...props} ref={forwardedRef} />\n        </Direction.Provider>\n      </TooltipPrimitive.Provider>\n    );\n  }\n  return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n  (props, forwardedRef) => {\n    const {\n      appearance: appearanceProp = themePropDefs.appearance.default,\n      accentColor: accentColorProp = themePropDefs.accentColor.default,\n      grayColor: grayColorProp = themePropDefs.grayColor.default,\n      material: materialProp = themePropDefs.material.default,\n      panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n      radius: radiusProp = themePropDefs.radius.default,\n      scaling: scalingProp = themePropDefs.scaling.default,\n      fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,\n      headingFontFamily: headingFontFamilyProp,\n      hasBackground = themePropDefs.hasBackground.default,\n      ...rootProps\n    } = props;\n\n    useDeprecatedPanelBackgroundWarning(props.panelBackground);\n\n    // Each of these follows its prop but stays independently settable, so\n    // `ThemePanel` can change the theme at runtime. Syncing during render\n    // rather than in an effect matters here: an effect would commit the old\n    // theme first and re-render every consumer of the context a second time.\n    const [appearance, setAppearance] = usePropSyncedState(appearanceProp);\n    const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);\n    const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);\n\n    // Material takes precedence over panelBackground\n    const effectiveMaterial =\n      materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n    const [material, setMaterial] = usePropSyncedState(effectiveMaterial);\n\n    // Keep panelBackground in sync with material for backward compatibility\n    const [panelBackground, setPanelBackground] = usePropSyncedState(material);\n\n    const [radius, setRadius] = usePropSyncedState(radiusProp);\n    const [scaling, setScaling] = usePropSyncedState(scalingProp);\n    const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);\n    const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);\n\n    return (\n      <ThemeImpl\n        {...rootProps}\n        ref={forwardedRef}\n        isRoot\n        hasBackground={hasBackground}\n        //\n        appearance={appearance}\n        accentColor={accentColor}\n        grayColor={grayColor}\n        material={material}\n        panelBackground={panelBackground}\n        radius={radius}\n        scaling={scaling}\n        fontFamily={fontFamily}\n        headingFontFamily={headingFontFamily}\n        //\n        onAppearanceChange={setAppearance}\n        onAccentColorChange={setAccentColor}\n        onGrayColorChange={setGrayColor}\n        onMaterialChange={setMaterial}\n        onPanelBackgroundChange={setPanelBackground}\n        onRadiusChange={setRadius}\n        onScalingChange={setScaling}\n        onFontFamilyChange={setFontFamily}\n        onHeadingFontFamilyChange={setHeadingFontFamily}\n      />\n    );\n  },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n    ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n  isRoot?: boolean;\n}\nfunction getClientOS(): 'windows' | 'macos' | 'linux' | undefined {\n  if (typeof navigator === 'undefined') return undefined;\n  const ua = navigator.userAgent;\n  if (ua.includes('Win')) return 'windows';\n  if (ua.includes('Mac')) return 'macos';\n  if (ua.includes('Linux')) return 'linux';\n  return undefined;\n}\n\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const {\n    asChild,\n    isRoot,\n    hasBackground: hasBackgroundProp,\n    //\n    appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n    accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n    grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n    material = props.material ?? context?.material ?? themePropDefs.material.default,\n    panelBackground = props.panelBackground ??\n      context?.panelBackground ??\n      themePropDefs.panelBackground.default,\n    radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n    scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n    fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,\n    headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,\n    //\n    onAppearanceChange = noop,\n    onAccentColorChange = noop,\n    onGrayColorChange = noop,\n    onMaterialChange = noop,\n    onPanelBackgroundChange = noop,\n    onRadiusChange = noop,\n    onScalingChange = noop,\n    onFontFamilyChange = noop,\n    onHeadingFontFamilyChange = noop,\n    //\n    ...themeProps\n  } = props;\n  const Comp = asChild ? Slot.Root : 'div';\n  const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n  const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n  const hasBackground =\n    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n\n  // `data-os` can only be resolved on the client. Writing it straight to the\n  // DOM keeps it out of the server markup \u2014 so hydration still matches \u2014 without\n  // spending a render pass, and a state update here would re-render the whole\n  // application on mount.\n  const rootRef = React.useRef<ThemeImplElement>(null);\n  const composedRef = useComposedRefs(forwardedRef, rootRef);\n  const hasExplicitOS = 'data-os' in themeProps;\n\n  useLayoutEffect(() => {\n    if (!isRoot || hasExplicitOS) return;\n    const node = rootRef.current;\n    if (!node) return;\n\n    const os = getClientOS();\n    if (!os) return;\n    node.setAttribute('data-os', os);\n    return () => node.removeAttribute('data-os');\n  }, [isRoot, hasExplicitOS]);\n\n  return (\n    <ThemeContext.Provider\n      value={React.useMemo(\n        () => ({\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          fontFamily,\n          headingFontFamily,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n          onFontFamilyChange,\n          onHeadingFontFamilyChange,\n        }),\n        [\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          fontFamily,\n          headingFontFamily,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n          onFontFamilyChange,\n          onHeadingFontFamilyChange,\n        ],\n      )}\n    >\n      <Comp\n        data-is-root-theme={isRoot ? 'true' : 'false'}\n        data-accent-color={accentColor}\n        data-gray-color={resolvedGrayColor}\n        // for nested `Theme` background\n        data-has-background={hasBackground ? 'true' : 'false'}\n        data-material={material}\n        data-panel-background={panelBackground}\n        data-radius={radius}\n        data-scaling={scaling}\n        data-font-family={fontFamily}\n        data-heading-font-family={headingFontFamily}\n        ref={composedRef}\n        {...themeProps}\n        className={classNames(\n          'radix-themes',\n          {\n            light: appearance === 'light',\n            dark: appearance === 'dark',\n          },\n          themeProps.className,\n        )}\n      />\n    </ThemeContext.Provider>\n  );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps, ThemeContextValue };\n", "import type { accentColors } from '../props/color.prop.js';\n\ntype ThemeAccentColor = (typeof accentColors)[number];\n\nexport function getMatchingGrayColor(accentColor: ThemeAccentColor) {\n  switch (accentColor) {\n    case 'tomato':\n    case 'red':\n    case 'ruby':\n    case 'crimson':\n    case 'pink':\n    case 'plum':\n    case 'purple':\n    case 'violet':\n      return 'mauve';\n    case 'iris':\n    case 'indigo':\n    case 'blue':\n    case 'sky':\n    case 'cyan':\n      return 'slate';\n    case 'teal':\n    case 'jade':\n    case 'mint':\n    case 'green':\n      return 'sage';\n    case 'grass':\n    case 'lime':\n      return 'olive';\n    case 'yellow':\n    case 'amber':\n    case 'orange':\n    case 'brown':\n    case 'gold':\n    case 'bronze':\n      return 'sand';\n    case 'gray':\n      return 'gray';\n  }\n}\n", "import * as React from 'react';\n\n/**\n * State that tracks a prop but can also be set imperatively \u2014 the shape `Theme`\n * needs, where a prop sets the value and `ThemePanel` can change it at runtime.\n *\n * Adjusts state during render rather than syncing in a `useEffect`. An effect\n * would commit one render carrying the *old* value and schedule a second one,\n * which for a provider means every consumer renders twice and the browser can\n * paint the stale value in between.\n *\n * @see https://react.dev/reference/react/useState#storing-information-from-previous-renders\n */\nexport function usePropSyncedState<T>(propValue: T) {\n  const [value, setValue] = React.useState(propValue);\n  const [previousPropValue, setPreviousPropValue] = React.useState(propValue);\n\n  if (!Object.is(propValue, previousPropValue)) {\n    setPreviousPropValue(propValue);\n    setValue(propValue);\n  }\n\n  return [value, setValue] as const;\n}\n", "import * as React from 'react';\n\nconst PANEL_BACKGROUND_MESSAGE = 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.';\n\nconst warned = new Set<string>();\n\nfunction warnOnce(message: string) {\n  if (warned.has(message)) return;\n  warned.add(message);\n  console.warn(message);\n}\n\n/**\n * Warns, in development only, that `panelBackground` is deprecated.\n *\n * The `process.env.NODE_ENV` check is a compile-time constant, so a production\n * bundle minifies the effect body away to an empty function instead of reading\n * props and formatting a message per mounted component. The message is also\n * logged once per session rather than once per component instance.\n */\nexport function useDeprecatedPanelBackgroundWarning(panelBackground: unknown) {\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'production') return;\n    if (panelBackground !== undefined) warnOnce(PANEL_BACKGROUND_MESSAGE);\n  }, [panelBackground]);\n}\n", "import type { PropDef } from './prop-def.js';\n\nconst asChildPropDef = {\n  /**\n   * Composes the component into its immediate child instead of rendering its own HTML element.\n   * You\u2019ll have to provide a single React Element child.\n   */\n  asChild: {\n    type: 'boolean',\n  },\n} satisfies {\n  asChild: PropDef<boolean>;\n};\n\nexport { asChildPropDef };\n", "import type { PropDef } from './prop-def.js';\n\n// prettier-ignore\nconst accentColors = ['gray', 'gold', 'bronze', 'brown', 'yellow', 'amber', 'orange', 'tomato', 'red', 'ruby', 'crimson', 'pink', 'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', 'grass', 'lime', 'mint', 'sky'] as const;\n\nconst grayColors = ['auto', 'gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;\n\nconst colorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: undefined as (typeof accentColors)[number] | undefined,\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\n// 1. When used on components that compose Text, sets the color of the text to the current accent.\n// 2. Defines accent color for descendant text components\u00A0with `highContrast={true}`.\nconst accentColorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: '' as (typeof accentColors)[number],\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\nexport {\n  accentColorPropDef,\n  colorPropDef,\n  //\n  accentColors,\n  grayColors,\n};\n", "import type { PropDef } from './prop-def.js';\n\nconst radii = ['none', 'small', 'medium', 'large', 'full'] as const;\n\nconst radiusPropDef = {\n  radius: {\n    type: 'enum',\n    values: radii,\n    default: undefined,\n  },\n} satisfies {\n  radius: PropDef<(typeof radii)[number]>;\n};\n\nexport { radiusPropDef, radii };\n", "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\nconst fontFamilies = ['sans', 'mono', 'serif'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  material: { type: 'enum', values: materials, default: 'translucent' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'full' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n  /**\n   * Sets the font family used for body text in the theme.\n   *\n   * Headings follow this unless `headingFontFamily` (or the `--font-heading`\n   * token) says otherwise.\n   *\n   * @default 'sans'\n   */\n  fontFamily: { type: 'enum', values: fontFamilies, default: 'sans' },\n  /**\n   * Sets the font family used for `Heading`, independently of body text.\n   *\n   * Deliberately has no default: when it is left unset no attribute is\n   * emitted and `--font-heading` keeps following `--font-body`, so a\n   * `--font-heading` override in your own CSS survives a `fontFamily` switch.\n   */\n  headingFontFamily: { type: 'enum', values: fontFamilies },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  material: PropDef<(typeof materials)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n  fontFamily: PropDef<(typeof fontFamilies)[number]>;\n  headingFontFamily: PropDef<(typeof fontFamilies)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';\nimport { useThemeContext } from './theme.js';\n\n/**\n * VirtualMenu - A virtualized menu component for rendering large lists efficiently.\n *\n * Uses TanStack Virtual to render only visible items.\n * Works inside any container (DropdownMenu.Content, Popover.Content, etc.)\n *\n * @example\n * // Simple usage with itemLabel\n * <VirtualMenu\n *   items={items}\n *   itemLabel={(item) => item.name}\n *   onSelect={handleSelect}\n * />\n *\n * @example\n * // Custom rendering with renderItem\n * const UserItem = React.memo(({ item, ...props }) => (\n *   <VirtualMenu.Item {...props}>\n *     <Avatar src={item.avatar} />\n *     {item.name}\n *   </VirtualMenu.Item>\n * ));\n *\n * <VirtualMenu items={users} renderItem={UserItem} onSelect={handleSelect} />\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Props passed to custom renderItem components */\ninterface VirtualMenuRenderItemProps<T> {\n  /** The item data */\n  item: T;\n  /** Index in the items array */\n  index: number;\n  /** Whether this item is currently highlighted */\n  isHighlighted: boolean;\n  /** Unique ID for accessibility */\n  id: string;\n  /** Positioning styles - must be applied */\n  style: React.CSSProperties;\n  /** Tab index for focus management */\n  tabIndex: number;\n  /** Data attribute for CSS styling */\n  'data-highlighted': true | undefined;\n  /** Data attribute for event delegation */\n  'data-index': number;\n  /** Mouse enter handler */\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Mouse leave handler */\n  onMouseLeave: () => void;\n  /** Click handler */\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Keyboard handler for Enter/Space activation */\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface VirtualMenuProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /**\n   * Simple label accessor for basic text items.\n   * Can be a property key or a function.\n   * @example\n   * itemLabel=\"name\"\n   * itemLabel={(item) => item.name}\n   */\n  itemLabel?: keyof T | ((item: T) => React.ReactNode);\n  /**\n   * Custom component for rendering items.\n   * Must be memoized (React.memo) for optimal performance.\n   * @example\n   * const MyItem = React.memo(({ item, ...props }) => (\n   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>\n   * ));\n   * <VirtualMenu items={items} renderItem={MyItem} />\n   */\n  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;\n  /**\n   * Menu size - controls item height.\n   * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.\n   * Only set manually when using VirtualMenu outside of a menu context.\n   * @default '2' (or inherited from context)\n   */\n  size?: '1' | '2';\n  /**\n   * Estimated height of each item in pixels.\n   * Can be a number (same for all) or a function (per-item).\n   * Usually not needed - height is automatically derived from size prop/context.\n   * Use this only for custom item heights (e.g., variable height items).\n   */\n  estimatedItemSize?: number | ((index: number) => number);\n  /** Number of items to render outside visible area */\n  overscan?: number;\n  /** Callback when an item is selected */\n  onSelect?: (item: T, index: number) => void;\n  /** Additional class name */\n  className?: string;\n  /** Additional styles */\n  style?: React.CSSProperties;\n  /** Accessible label for the menu */\n  'aria-label'?: string;\n}\n\n// ============================================================================\n// Internal Memoized Item Component\n// ============================================================================\n\ninterface SimpleItemProps {\n  label: React.ReactNode;\n  isHighlighted: boolean;\n  id: string;\n  style: React.CSSProperties;\n  tabIndex: number;\n  'data-highlighted': true | undefined;\n  'data-index': number;\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nconst SimpleItem = React.memo(\n  function SimpleItem({\n    label,\n    isHighlighted: _isHighlighted,\n    id,\n    style,\n    tabIndex,\n    'data-highlighted': dataHighlighted,\n    'data-index': dataIndex,\n    onMouseEnter,\n    onMouseLeave,\n    onClick,\n    onKeyDown,\n  }: SimpleItemProps) {\n    return (\n      <div\n        id={id}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem')}\n        style={style}\n        tabIndex={tabIndex}\n        data-highlighted={dataHighlighted}\n        data-index={dataIndex}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {label}\n      </div>\n    );\n  },\n  (prev, next) => {\n    // Custom comparison - only re-render if these change\n    if (prev.label !== next.label) return false;\n    if (prev['data-highlighted'] !== next['data-highlighted']) return false;\n    if (prev.style.height !== next.style.height) return false;\n    if (prev.style.transform !== next.style.transform) return false;\n    if (prev.tabIndex !== next.tabIndex) return false;\n    if (prev.id !== next.id) return false;\n    // Event handlers are stable, skip comparison\n    return true;\n  },\n);\n\n// ============================================================================\n// VirtualMenu Component\n// ============================================================================\n\nfunction VirtualMenuRoot<T>({\n  items,\n  itemLabel,\n  renderItem: RenderItem,\n  size: sizeProp,\n  estimatedItemSize: estimatedItemSizeProp,\n  overscan = 5,\n  onSelect,\n  className,\n  style,\n  'aria-label': ariaLabel,\n}: VirtualMenuProps<T>) {\n  const menuId = React.useId();\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);\n  const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();\n  const { scaling } = useThemeContext();\n\n  // Resolve item height: explicit prop > own size > parent menu > default size '2'.\n  // Heights follow the theme scaling, like the --base-menu-item-height token.\n  const estimatedItemSize =\n    estimatedItemSizeProp ??\n    (sizeProp\n      ? getMenuItemHeight(sizeProp, scaling)\n      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2', scaling)));\n\n  // Validate props\n  if (!itemLabel && !RenderItem) {\n    throw new Error('VirtualMenu requires either itemLabel or renderItem prop');\n  }\n\n  // Normalize itemLabel to a function\n  const getLabel = React.useMemo(() => {\n    if (!itemLabel) return null;\n    if (typeof itemLabel === 'function') return itemLabel;\n    return (item: T) => item[itemLabel] as React.ReactNode;\n  }, [itemLabel]);\n\n  // Derive safe highlighted index\n  const safeHighlightedIndex = React.useMemo(() => {\n    if (items.length === 0) return -1;\n    if (highlightedIndex < 0) return -1;\n    return Math.min(highlightedIndex, items.length - 1);\n  }, [highlightedIndex, items.length]);\n\n  // Normalize estimatedItemSize to a function\n  const getItemSize = React.useMemo(\n    () =>\n      typeof estimatedItemSize === 'function'\n        ? estimatedItemSize\n        : () => estimatedItemSize,\n    [estimatedItemSize],\n  );\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: getItemSize,\n    overscan,\n  });\n\n  const virtualItems = virtualizer.getVirtualItems();\n\n  // Refs for stable handler references\n  const itemsRef = React.useRef(items);\n  const onSelectRef = React.useRef(onSelect);\n  itemsRef.current = items;\n  onSelectRef.current = onSelect;\n\n  const scrollToIndexRef = React.useRef(virtualizer.scrollToIndex);\n  scrollToIndexRef.current = virtualizer.scrollToIndex;\n\n  const highlightedIndexRef = React.useRef(safeHighlightedIndex);\n  highlightedIndexRef.current = safeHighlightedIndex;\n\n  // Stable event handlers\n  const handleItemMouseEnter = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      setHighlightedIndex(Number(index));\n    }\n  }, []);\n\n  const handleItemClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      const idx = Number(index);\n      const currentItems = itemsRef.current;\n      if (idx >= 0 && idx < currentItems.length) {\n        onSelectRef.current?.(currentItems[idx], idx);\n      }\n    }\n  }, []);\n\n  const noop = React.useCallback(() => {}, []);\n\n  // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)\n  const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      const index = e.currentTarget.dataset.index;\n      if (index != null) {\n        const idx = Number(index);\n        const currentItems = itemsRef.current;\n        if (idx >= 0 && idx < currentItems.length) {\n          onSelectRef.current?.(currentItems[idx], idx);\n        }\n      }\n    }\n  }, []);\n\n  // Keyboard navigation\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    const currentItems = itemsRef.current;\n    const currentHighlightedIndex = highlightedIndexRef.current;\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const nextIndex =\n          currentHighlightedIndex < currentItems.length - 1 ? currentHighlightedIndex + 1 : 0;\n        setHighlightedIndex(nextIndex);\n        scrollToIndexRef.current(nextIndex, { align: 'auto' });\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prevIndex =\n          currentHighlightedIndex > 0 ? currentHighlightedIndex - 1 : currentItems.length - 1;\n        setHighlightedIndex(prevIndex);\n        scrollToIndexRef.current(prevIndex, { align: 'auto' });\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        setHighlightedIndex(0);\n        scrollToIndexRef.current(0, { align: 'start' });\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const lastIndex = currentItems.length - 1;\n        setHighlightedIndex(lastIndex);\n        scrollToIndexRef.current(lastIndex, { align: 'end' });\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (currentHighlightedIndex >= 0 && currentHighlightedIndex < currentItems.length) {\n          onSelectRef.current?.(currentItems[currentHighlightedIndex], currentHighlightedIndex);\n        }\n        break;\n      }\n      case 'Tab': {\n        e.preventDefault();\n        break;\n      }\n      case 'Escape': {\n        (e.currentTarget as HTMLElement).blur();\n        break;\n      }\n    }\n  }, []);\n\n  // Item ID generator\n  const getItemId = React.useCallback(\n    (index: number) => `${menuId}-item-${index}`,\n    [menuId],\n  );\n\n  // Memoize styles\n  const rootStyle = React.useMemo(\n    () => ({\n      overflow: 'auto' as const,\n      position: 'relative' as const,\n      ...style,\n    }),\n    [style],\n  );\n\n  const totalSize = virtualizer.getTotalSize();\n  const viewportStyle = React.useMemo(\n    () => ({\n      height: `${totalSize}px`,\n      width: '100%' as const,\n      position: 'relative' as const,\n    }),\n    [totalSize],\n  );\n\n  return (\n    <div\n      ref={parentRef}\n      role={isInsideMenu ? 'group' : 'menu'}\n      aria-label={ariaLabel}\n      aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      className={classNames('rt-VirtualMenuRoot', className)}\n      style={rootStyle}\n    >\n      <div className=\"rt-VirtualMenuViewport\" style={viewportStyle}>\n        {virtualItems.map((virtualRow) => {\n          const item = items[virtualRow.index];\n          const index = virtualRow.index;\n          const isHighlighted = safeHighlightedIndex === index;\n\n          const itemStyle: React.CSSProperties = {\n            height: virtualRow.size,\n            transform: `translateY(${virtualRow.start}px)`,\n          };\n\n          const commonProps = {\n            id: getItemId(index),\n            isHighlighted,\n            style: itemStyle,\n            tabIndex: isHighlighted ? 0 : -1,\n            'data-highlighted': isHighlighted ? true as const : undefined,\n            'data-index': index,\n            onMouseEnter: handleItemMouseEnter,\n            onMouseLeave: noop,\n            onClick: handleItemClick,\n            onKeyDown: handleItemKeyDown,\n          };\n\n          // Use renderItem if provided, otherwise use SimpleItem with itemLabel\n          if (RenderItem) {\n            return (\n              <RenderItem\n                key={virtualRow.key}\n                item={item}\n                index={index}\n                {...commonProps}\n              />\n            );\n          }\n\n          return (\n            <SimpleItem\n              key={virtualRow.key}\n              label={getLabel!(item)}\n              {...commonProps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nVirtualMenuRoot.displayName = 'VirtualMenu';\n\n// ============================================================================\n// VirtualMenu.Item Component (for custom renderItem usage)\n// ============================================================================\n\ninterface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  children: React.ReactNode;\n  /** Data attribute for highlight styling */\n  'data-highlighted'?: true | undefined;\n  /** Data attribute for event delegation */\n  'data-index'?: number;\n}\n\nconst VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nVirtualMenuItemInner.displayName = 'VirtualMenu.Item';\n\n// Memoized with custom comparison\nconst VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {\n  const prevStyle = prevProps.style as React.CSSProperties | undefined;\n  const nextStyle = nextProps.style as React.CSSProperties | undefined;\n  if (prevStyle?.height !== nextStyle?.height) return false;\n  if (prevStyle?.transform !== nextStyle?.transform) return false;\n  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;\n  if (prevProps.tabIndex !== nextProps.tabIndex) return false;\n  if (prevProps.id !== nextProps.id) return false;\n  if (prevProps.className !== nextProps.className) return false;\n  if (prevProps.children !== nextProps.children) return false;\n  return true;\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst VirtualMenu = Object.assign(VirtualMenuRoot, {\n  Item: VirtualMenuItem,\n});\n\nexport { VirtualMenu };\nexport type { VirtualMenuProps, VirtualMenuItemProps, VirtualMenuRenderItemProps };\n", "'use client';\n\nimport * as React from 'react';\n\nimport { useThemeContext } from '../theme.js';\nimport { useResolvedResponsiveValue } from './base-menu.utils.js';\n\nimport type { Responsive } from '../../props/prop-def.js';\n\n/**\n * Context to detect if a component is rendered inside a menu (DropdownMenu, ContextMenu, etc.)\n * Used by VirtualMenu to adjust its behavior:\n * - Skip role=\"menu\" when inside a parent menu (parent owns the role)\n * - Delegate certain keyboard handling to parent\n * - Use the correct item height based on menu size\n */\n\nexport type MenuSize = '1' | '2';\n\ninterface MenuContextValue {\n  /** Whether we're inside a menu that owns the menu role */\n  isInsideMenu: boolean;\n  /** Menu size for the current breakpoint */\n  size?: MenuSize;\n  /** Item height in px for the current size and theme scaling */\n  itemHeight?: number;\n}\n\nconst MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });\n\ninterface MenuProviderProps {\n  children: React.ReactNode;\n  /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */\n  size?: Responsive<MenuSize>;\n}\n\n/** Map menu size to item height in pixels at 100% scaling */\nexport const menuSizeToItemHeight: Record<MenuSize, number> = {\n  '1': 24, // --space-5\n  '2': 32, // --space-6\n};\n\n/** Item height in px for a size at the given theme scaling (\"100%\", \"110%\"\u2026). */\nexport function getMenuItemHeight(size: MenuSize, scaling: string | undefined): number {\n  const scale = scaling ? parseFloat(scaling) / 100 : 1;\n  return menuSizeToItemHeight[size] * (Number.isFinite(scale) ? scale : 1);\n}\n\nexport function MenuProvider({ children, size }: MenuProviderProps) {\n  const resolvedSize = useResolvedResponsiveValue<MenuSize | undefined>(size, undefined);\n  const { scaling } = useThemeContext();\n  const itemHeight = resolvedSize ? getMenuItemHeight(resolvedSize, scaling) : undefined;\n  const value = React.useMemo(\n    () => ({ isInsideMenu: true, size: resolvedSize, itemHeight }),\n    [resolvedSize, itemHeight],\n  );\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n}\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n", "'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';\nimport { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';\n\nimport { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';\nimport { usePropSyncedState } from '../hooks/use-prop-synced-state.js';\nimport { useDeprecatedPanelBackgroundWarning } from '../helpers/use-deprecation-warning.js';\nimport { themePropDefs } from './theme.props.js';\n\nimport type { ThemeOwnProps } from './theme.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\nconst noop = () => {};\n\ntype ThemeAppearance = (typeof themePropDefs.appearance.values)[number];\ntype ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];\ntype ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];\ntype ThemeMaterial = (typeof themePropDefs.material.values)[number];\ntype ThemePanelBackground = (typeof themePropDefs.panelBackground.values)[number];\ntype ThemeRadius = (typeof themePropDefs.radius.values)[number];\ntype ThemeScaling = (typeof themePropDefs.scaling.values)[number];\ntype ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];\n// Headings follow the body font until something sets this, so `undefined` is a\n// meaningful value here rather than a missing one.\ntype ThemeHeadingFontFamily = ThemeFontFamily | undefined;\n\ninterface ThemeChangeHandlers {\n  onAppearanceChange: (appearance: ThemeAppearance) => void;\n  onAccentColorChange: (accentColor: ThemeAccentColor) => void;\n  onGrayColorChange: (grayColor: ThemeGrayColor) => void;\n  onMaterialChange: (material: ThemeMaterial) => void;\n  onPanelBackgroundChange: (panelBackground: ThemePanelBackground) => void;\n  onRadiusChange: (radius: ThemeRadius) => void;\n  onScalingChange: (scaling: ThemeScaling) => void;\n  onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;\n  onHeadingFontFamilyChange: (headingFontFamily: ThemeHeadingFontFamily) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n  appearance: ThemeAppearance;\n  accentColor: ThemeAccentColor;\n  grayColor: ThemeGrayColor;\n  resolvedGrayColor: ThemeGrayColor;\n  material: ThemeMaterial;\n  panelBackground: ThemePanelBackground;\n  radius: ThemeRadius;\n  scaling: ThemeScaling;\n  fontFamily: ThemeFontFamily;\n  headingFontFamily: ThemeHeadingFontFamily;\n}\n// Default theme values used when components render outside a Theme provider\nconst defaultThemeContext: ThemeContextValue = {\n  appearance: themePropDefs.appearance.default,\n  accentColor: themePropDefs.accentColor.default,\n  grayColor: themePropDefs.grayColor.default,\n  resolvedGrayColor: themePropDefs.grayColor.default,\n  material: themePropDefs.material.default,\n  panelBackground: themePropDefs.panelBackground.default,\n  radius: themePropDefs.radius.default,\n  scaling: themePropDefs.scaling.default,\n  fontFamily: themePropDefs.fontFamily.default,\n  headingFontFamily: undefined,\n  onAppearanceChange: noop,\n  onAccentColorChange: noop,\n  onGrayColorChange: noop,\n  onMaterialChange: noop,\n  onPanelBackgroundChange: noop,\n  onRadiusChange: noop,\n  onScalingChange: noop,\n  onFontFamilyChange: noop,\n  onHeadingFontFamilyChange: noop,\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);\n\nfunction useThemeContext() {\n  const context = React.useContext(ThemeContext);\n  // Return default context if used outside Theme provider (e.g., during SSR)\n  return context ?? defaultThemeContext;\n}\n\ninterface ThemeProps extends ThemeImplPublicProps {}\nconst Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const isRoot = context === undefined;\n  if (isRoot) {\n    return (\n      <TooltipPrimitive.Provider delayDuration={200}>\n        <Direction.Provider dir=\"ltr\">\n          <ThemeRoot {...props} ref={forwardedRef} />\n        </Direction.Provider>\n      </TooltipPrimitive.Provider>\n    );\n  }\n  return <ThemeImpl {...props} ref={forwardedRef} />;\n});\nTheme.displayName = 'Theme';\n\nconst ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(\n  (props, forwardedRef) => {\n    const {\n      appearance: appearanceProp = themePropDefs.appearance.default,\n      accentColor: accentColorProp = themePropDefs.accentColor.default,\n      grayColor: grayColorProp = themePropDefs.grayColor.default,\n      material: materialProp = themePropDefs.material.default,\n      panelBackground: panelBackgroundProp = themePropDefs.panelBackground.default,\n      radius: radiusProp = themePropDefs.radius.default,\n      scaling: scalingProp = themePropDefs.scaling.default,\n      fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,\n      headingFontFamily: headingFontFamilyProp,\n      hasBackground = themePropDefs.hasBackground.default,\n      ...rootProps\n    } = props;\n\n    useDeprecatedPanelBackgroundWarning(props.panelBackground);\n\n    // Each of these follows its prop but stays independently settable, so\n    // `ThemePanel` can change the theme at runtime. Syncing during render\n    // rather than in an effect matters here: an effect would commit the old\n    // theme first and re-render every consumer of the context a second time.\n    const [appearance, setAppearance] = usePropSyncedState(appearanceProp);\n    const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);\n    const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);\n\n    // Material takes precedence over panelBackground\n    const effectiveMaterial =\n      materialProp !== themePropDefs.material.default ? materialProp : panelBackgroundProp;\n    const [material, setMaterial] = usePropSyncedState(effectiveMaterial);\n\n    // Keep panelBackground in sync with material for backward compatibility\n    const [panelBackground, setPanelBackground] = usePropSyncedState(material);\n\n    const [radius, setRadius] = usePropSyncedState(radiusProp);\n    const [scaling, setScaling] = usePropSyncedState(scalingProp);\n    const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);\n    const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);\n\n    return (\n      <ThemeImpl\n        {...rootProps}\n        ref={forwardedRef}\n        isRoot\n        hasBackground={hasBackground}\n        //\n        appearance={appearance}\n        accentColor={accentColor}\n        grayColor={grayColor}\n        material={material}\n        panelBackground={panelBackground}\n        radius={radius}\n        scaling={scaling}\n        fontFamily={fontFamily}\n        headingFontFamily={headingFontFamily}\n        //\n        onAppearanceChange={setAppearance}\n        onAccentColorChange={setAccentColor}\n        onGrayColorChange={setGrayColor}\n        onMaterialChange={setMaterial}\n        onPanelBackgroundChange={setPanelBackground}\n        onRadiusChange={setRadius}\n        onScalingChange={setScaling}\n        onFontFamilyChange={setFontFamily}\n        onHeadingFontFamilyChange={setHeadingFontFamily}\n      />\n    );\n  },\n);\nThemeRoot.displayName = 'ThemeRoot';\n\ntype ThemeImplElement = React.ElementRef<'div'>;\ninterface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}\ninterface ThemeImplPublicProps\n  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,\n    ThemeOwnProps {}\ninterface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {\n  isRoot?: boolean;\n}\nfunction getClientOS(): 'windows' | 'macos' | 'linux' | undefined {\n  if (typeof navigator === 'undefined') return undefined;\n  const ua = navigator.userAgent;\n  if (ua.includes('Win')) return 'windows';\n  if (ua.includes('Mac')) return 'macos';\n  if (ua.includes('Linux')) return 'linux';\n  return undefined;\n}\n\nconst ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, forwardedRef) => {\n  const context = React.useContext(ThemeContext);\n  const {\n    asChild,\n    isRoot,\n    hasBackground: hasBackgroundProp,\n    //\n    appearance = props.appearance ?? context?.appearance ?? themePropDefs.appearance.default,\n    accentColor = props.accentColor ?? context?.accentColor ?? themePropDefs.accentColor.default,\n    grayColor = props.grayColor ?? context?.resolvedGrayColor ?? themePropDefs.grayColor.default,\n    material = props.material ?? context?.material ?? themePropDefs.material.default,\n    panelBackground = props.panelBackground ??\n      context?.panelBackground ??\n      themePropDefs.panelBackground.default,\n    radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,\n    scaling = props.scaling ?? context?.scaling ?? themePropDefs.scaling.default,\n    fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,\n    headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,\n    //\n    onAppearanceChange = noop,\n    onAccentColorChange = noop,\n    onGrayColorChange = noop,\n    onMaterialChange = noop,\n    onPanelBackgroundChange = noop,\n    onRadiusChange = noop,\n    onScalingChange = noop,\n    onFontFamilyChange = noop,\n    onHeadingFontFamilyChange = noop,\n    //\n    ...themeProps\n  } = props;\n  const Comp = asChild ? Slot.Root : 'div';\n  const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;\n  const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';\n  const hasBackground =\n    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;\n\n  // `data-os` can only be resolved on the client. Writing it straight to the\n  // DOM keeps it out of the server markup \u2014 so hydration still matches \u2014 without\n  // spending a render pass, and a state update here would re-render the whole\n  // application on mount.\n  const rootRef = React.useRef<ThemeImplElement>(null);\n  const composedRef = useComposedRefs(forwardedRef, rootRef);\n  const hasExplicitOS = 'data-os' in themeProps;\n\n  useLayoutEffect(() => {\n    if (!isRoot || hasExplicitOS) return;\n    const node = rootRef.current;\n    if (!node) return;\n\n    const os = getClientOS();\n    if (!os) return;\n    node.setAttribute('data-os', os);\n    return () => node.removeAttribute('data-os');\n  }, [isRoot, hasExplicitOS]);\n\n  return (\n    <ThemeContext.Provider\n      value={React.useMemo(\n        () => ({\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          fontFamily,\n          headingFontFamily,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n          onFontFamilyChange,\n          onHeadingFontFamilyChange,\n        }),\n        [\n          appearance,\n          accentColor,\n          grayColor,\n          resolvedGrayColor,\n          material,\n          panelBackground,\n          radius,\n          scaling,\n          fontFamily,\n          headingFontFamily,\n          //\n          onAppearanceChange,\n          onAccentColorChange,\n          onGrayColorChange,\n          onMaterialChange,\n          onPanelBackgroundChange,\n          onRadiusChange,\n          onScalingChange,\n          onFontFamilyChange,\n          onHeadingFontFamilyChange,\n        ],\n      )}\n    >\n      <Comp\n        data-is-root-theme={isRoot ? 'true' : 'false'}\n        data-accent-color={accentColor}\n        data-gray-color={resolvedGrayColor}\n        // for nested `Theme` background\n        data-has-background={hasBackground ? 'true' : 'false'}\n        data-material={material}\n        data-panel-background={panelBackground}\n        data-radius={radius}\n        data-scaling={scaling}\n        data-font-family={fontFamily}\n        data-heading-font-family={headingFontFamily}\n        ref={composedRef}\n        {...themeProps}\n        className={classNames(\n          'radix-themes',\n          {\n            light: appearance === 'light',\n            dark: appearance === 'dark',\n          },\n          themeProps.className,\n        )}\n      />\n    </ThemeContext.Provider>\n  );\n});\nThemeImpl.displayName = 'ThemeImpl';\n\nexport { Theme, ThemeContext, useThemeContext };\nexport type { ThemeProps, ThemeContextValue };\n", "import type { accentColors } from '../props/color.prop.js';\n\ntype ThemeAccentColor = (typeof accentColors)[number];\n\nexport function getMatchingGrayColor(accentColor: ThemeAccentColor) {\n  switch (accentColor) {\n    case 'tomato':\n    case 'red':\n    case 'ruby':\n    case 'crimson':\n    case 'pink':\n    case 'plum':\n    case 'purple':\n    case 'violet':\n      return 'mauve';\n    case 'iris':\n    case 'indigo':\n    case 'blue':\n    case 'sky':\n    case 'cyan':\n      return 'slate';\n    case 'teal':\n    case 'jade':\n    case 'mint':\n    case 'green':\n      return 'sage';\n    case 'grass':\n    case 'lime':\n      return 'olive';\n    case 'yellow':\n    case 'amber':\n    case 'orange':\n    case 'brown':\n    case 'gold':\n    case 'bronze':\n      return 'sand';\n    case 'gray':\n      return 'gray';\n  }\n}\n", "import * as React from 'react';\n\n/**\n * State that tracks a prop but can also be set imperatively \u2014 the shape `Theme`\n * needs, where a prop sets the value and `ThemePanel` can change it at runtime.\n *\n * Adjusts state during render rather than syncing in a `useEffect`. An effect\n * would commit one render carrying the *old* value and schedule a second one,\n * which for a provider means every consumer renders twice and the browser can\n * paint the stale value in between.\n *\n * @see https://react.dev/reference/react/useState#storing-information-from-previous-renders\n */\nexport function usePropSyncedState<T>(propValue: T) {\n  const [value, setValue] = React.useState(propValue);\n  const [previousPropValue, setPreviousPropValue] = React.useState(propValue);\n\n  if (!Object.is(propValue, previousPropValue)) {\n    setPreviousPropValue(propValue);\n    setValue(propValue);\n  }\n\n  return [value, setValue] as const;\n}\n", "import * as React from 'react';\n\nconst PANEL_BACKGROUND_MESSAGE = 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.';\n\nconst warned = new Set<string>();\n\nfunction warnOnce(message: string) {\n  if (warned.has(message)) return;\n  warned.add(message);\n  console.warn(message);\n}\n\n/**\n * Warns, in development only, that `panelBackground` is deprecated.\n *\n * The `process.env.NODE_ENV` check is a compile-time constant, so a production\n * bundle minifies the effect body away to an empty function instead of reading\n * props and formatting a message per mounted component. The message is also\n * logged once per session rather than once per component instance.\n */\nexport function useDeprecatedPanelBackgroundWarning(panelBackground: unknown) {\n  React.useEffect(() => {\n    if (process.env.NODE_ENV === 'production') return;\n    if (panelBackground !== undefined) warnOnce(PANEL_BACKGROUND_MESSAGE);\n  }, [panelBackground]);\n}\n", "import type { PropDef } from './prop-def.js';\n\nconst asChildPropDef = {\n  /**\n   * Composes the component into its immediate child instead of rendering its own HTML element.\n   * You\u2019ll have to provide a single React Element child.\n   */\n  asChild: {\n    type: 'boolean',\n  },\n} satisfies {\n  asChild: PropDef<boolean>;\n};\n\nexport { asChildPropDef };\n", "import type { PropDef } from './prop-def.js';\n\n// prettier-ignore\nconst accentColors = ['gray', 'gold', 'bronze', 'brown', 'yellow', 'amber', 'orange', 'tomato', 'red', 'ruby', 'crimson', 'pink', 'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green', 'grass', 'lime', 'mint', 'sky'] as const;\n\nconst grayColors = ['auto', 'gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;\n\nconst colorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: undefined as (typeof accentColors)[number] | undefined,\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\n// 1. When used on components that compose Text, sets the color of the text to the current accent.\n// 2. Re-declares the accent role tokens (`--accent-ink`, `--accent-solid`, ...) that descendants read.\nconst accentColorPropDef = {\n  color: {\n    type: 'enum',\n    values: accentColors,\n    default: '' as (typeof accentColors)[number],\n  },\n} satisfies {\n  color: PropDef<(typeof accentColors)[number]>;\n};\n\nexport {\n  accentColorPropDef,\n  colorPropDef,\n  //\n  accentColors,\n  grayColors,\n};\n", "import type { PropDef } from './prop-def.js';\n\nconst radii = ['none', 'small', 'medium', 'large', 'full'] as const;\n\nconst radiusPropDef = {\n  radius: {\n    type: 'enum',\n    values: radii,\n    default: undefined,\n  },\n} satisfies {\n  radius: PropDef<(typeof radii)[number]>;\n};\n\nexport { radiusPropDef, radii };\n", "import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColors, grayColors } from '../props/color.prop.js';\nimport { radii } from '../props/radius.prop.js';\n\nimport type { GetPropDefTypes, PropDef } from '../props/prop-def.js';\n\nconst appearances = ['inherit', 'light', 'dark'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst scalings = ['90%', '95%', '100%', '105%', '110%'] as const;\nconst fontFamilies = ['sans', 'mono', 'serif'] as const;\n\nconst themePropDefs = {\n  ...asChildPropDef,\n  /**\n   * Whether to apply background color to the Theme element.\n   *\n   * Defaults to true for the root Theme and for Theme elements that\n   * have an explicit light or dark appearance prop.\n   */\n  hasBackground: { type: 'boolean', default: true },\n  /**\n   * Sets the color scheme of the theme, typcially referred to as light and dark mode.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/dark-mode\n   */\n  appearance: { type: 'enum', values: appearances, default: 'inherit' },\n  /**\n   * Selects one of the accent color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  accentColor: { type: 'enum', values: accentColors, default: 'blue' },\n  /**\n   * Selects one of the gray color options to use in the Theme.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/color\n   */\n  grayColor: { type: 'enum', values: grayColors, default: 'slate' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  material: { type: 'enum', values: materials, default: 'translucent' },\n  /**\n   * Controls whether to use a solid or translucent background color on panelled\n   * elements such as Card or Table is solid or translucent.\n   *\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: 'translucent' },\n  /**\n   * Sets the default radius of the components.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/visual-style\n   */\n  radius: { type: 'enum', values: radii, default: 'full' },\n  /**\n   * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.\n   *\n   * @link\n   * https://www.radix-ui.com/themes/docs/theme/layout\n   */\n  scaling: { type: 'enum', values: scalings, default: '100%' },\n  /**\n   * Sets the font family used for body text in the theme.\n   *\n   * Headings follow this unless `headingFontFamily` (or the `--font-heading`\n   * token) says otherwise.\n   *\n   * @default 'sans'\n   */\n  fontFamily: { type: 'enum', values: fontFamilies, default: 'sans' },\n  /**\n   * Sets the font family used for `Heading`, independently of body text.\n   *\n   * Deliberately has no default: when it is left unset no attribute is\n   * emitted and `--font-heading` keeps following `--font-body`, so a\n   * `--font-heading` override in your own CSS survives a `fontFamily` switch.\n   */\n  headingFontFamily: { type: 'enum', values: fontFamilies },\n} satisfies {\n  hasBackground: PropDef<boolean>;\n  appearance: PropDef<(typeof appearances)[number]>;\n  accentColor: PropDef<(typeof accentColors)[number]>;\n  grayColor: PropDef<(typeof grayColors)[number]>;\n  material: PropDef<(typeof materials)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number]>;\n  radius: PropDef<(typeof radii)[number]>;\n  scaling: PropDef<(typeof scalings)[number]>;\n  fontFamily: PropDef<(typeof fontFamilies)[number]>;\n  headingFontFamily: PropDef<(typeof fontFamilies)[number]>;\n};\n\ntype ThemeOwnProps = GetPropDefTypes<typeof themePropDefs & typeof asChildPropDef>;\n\nexport { themePropDefs };\nexport type { ThemeOwnProps };\n"],
   "mappings": "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",
   "names": ["virtual_menu_exports", "__export", "VirtualMenu", "__toCommonJS", "React", "import_classnames", "import_react_virtual", "React", "React", "import_classnames", "import_radix_ui", "import_internal", "getMatchingGrayColor", "accentColor", "React", "usePropSyncedState", "propValue", "value", "setValue", "previousPropValue", "setPreviousPropValue", "React", "PANEL_BACKGROUND_MESSAGE", "warned", "warnOnce", "message", "useDeprecatedPanelBackgroundWarning", "panelBackground", "asChildPropDef", "accentColors", "grayColors", "radii", "appearances", "panelBackgrounds", "materials", "scalings", "fontFamilies", "themePropDefs", "asChildPropDef", "accentColors", "grayColors", "radii", "noop", "defaultThemeContext", "themePropDefs", "ThemeContext", "useThemeContext", "Theme", "props", "forwardedRef", "TooltipPrimitive", "ThemeRoot", "ThemeImpl", "appearanceProp", "accentColorProp", "grayColorProp", "materialProp", "panelBackgroundProp", "radiusProp", "scalingProp", "fontFamilyProp", "headingFontFamilyProp", "hasBackground", "rootProps", "useDeprecatedPanelBackgroundWarning", "appearance", "setAppearance", "usePropSyncedState", "accentColor", "setAccentColor", "grayColor", "setGrayColor", "effectiveMaterial", "material", "setMaterial", "panelBackground", "setPanelBackground", "radius", "setRadius", "scaling", "setScaling", "fontFamily", "setFontFamily", "headingFontFamily", "setHeadingFontFamily", "getClientOS", "ua", "context", "asChild", "isRoot", "hasBackgroundProp", "onAppearanceChange", "onAccentColorChange", "onGrayColorChange", "onMaterialChange", "onPanelBackgroundChange", "onRadiusChange", "onScalingChange", "onFontFamilyChange", "onHeadingFontFamilyChange", "themeProps", "Comp", "resolvedGrayColor", "getMatchingGrayColor", "isExplicitAppearance", "rootRef", "composedRef", "hasExplicitOS", "node", "os", "classNames", "MenuContext", "menuSizeToItemHeight", "getMenuItemHeight", "size", "scaling", "scale", "useMenuContext", "MenuContext", "SimpleItem", "label", "_isHighlighted", "id", "style", "tabIndex", "dataHighlighted", "dataIndex", "onMouseEnter", "onMouseLeave", "onClick", "onKeyDown", "classNames", "prev", "next", "VirtualMenuRoot", "items", "itemLabel", "RenderItem", "sizeProp", "estimatedItemSizeProp", "overscan", "onSelect", "className", "ariaLabel", "menuId", "parentRef", "highlightedIndex", "setHighlightedIndex", "isInsideMenu", "contextSize", "contextItemHeight", "useMenuContext", "scaling", "useThemeContext", "estimatedItemSize", "getMenuItemHeight", "getLabel", "item", "safeHighlightedIndex", "getItemSize", "virtualizer", "virtualItems", "itemsRef", "onSelectRef", "scrollToIndexRef", "highlightedIndexRef", "handleItemMouseEnter", "e", "index", "handleItemClick", "idx", "currentItems", "noop", "handleItemKeyDown", "handleKeyDown", "currentHighlightedIndex", "nextIndex", "prevIndex", "lastIndex", "getItemId", "rootStyle", "totalSize", "viewportStyle", "virtualRow", "isHighlighted", "itemStyle", "commonProps", "VirtualMenuItemInner", "children", "props", "forwardedRef", "VirtualMenuItem", "prevProps", "nextProps", "prevStyle", "nextStyle", "VirtualMenu"]
 }

package/dist/cjs/hooks/use-breakpoint.d.ts

@@ -1,4 +1,9 @@
 import { type Breakpoint } from '../components/shell.types.js';
+/**
+ * The breakpoint right now, outside React's render. For an effect that needs
+ * the answer at the moment it runs rather than the one its render saw.
+ */
+export declare function readBreakpoint(): Breakpoint;
 /**
  * The current breakpoint, and whether it has been resolved against a real
  * viewport yet (`false` on the server and during hydration).

package/dist/cjs/hooks/use-breakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-breakpoint.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAyF7E;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,OAAO,UAAO,GAAG;IAAE,UAAU,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,CAexF"}
+{"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-breakpoint.ts"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAmF7E;;;GAGG;AACH,wBAAgB,cAAc,IAAI,UAAU,CAG3C;AAQD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,OAAO,UAAO,GAAG;IAAE,UAAU,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,CAexF"}

package/dist/cjs/hooks/use-breakpoint.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var S=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var v=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},m=(e,t,n,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of P(t))!h.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(u=b(t,r))||u.enumerable});return e};var g=(e,t,n)=>(n=e!=null?S(R(e)):{},m(t||!e||!e.__esModule?s(n,"default",{value:e,enumerable:!0}):n,e)),k=e=>m(s({},"__esModule",{value:!0}),e);var T={};v(T,{useBreakpoint:()=>C});module.exports=k(T);var a=g(require("react"));var f={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"};var B=Object.entries(f),d=null,o=new Set,i=null;function l(){return d??(d=B.map(([e,t])=>[e,window.matchMedia(t)])),d}function c(){let e="initial";for(let[t,n]of l())n.matches&&(e=t);return e}function p(){let e=c();e!==i&&(i=e,o.forEach(t=>t()))}function x(e){if(typeof window>"u")return()=>{};if(o.size===0){i=c();for(let[,t]of l())typeof t.addEventListener=="function"?t.addEventListener("change",p):t.addListener?.(p)}return o.add(e),()=>{if(o.delete(e),!(o.size>0)){for(let[,t]of l())try{typeof t.removeEventListener=="function"?t.removeEventListener("change",p):t.removeListener?.(p)}catch{}i=null}}}function z(){return typeof window>"u"?"initial":(i??(i=c()),i)}function E(){return"initial"}var w=()=>!0,M=()=>!1,y=()=>()=>{},L=()=>"initial";function C(e=!0){let t=a.useSyncExternalStore(e?x:y,e?z:L,E),n=a.useSyncExternalStore(e?x:y,w,M);return a.useMemo(()=>({breakpoint:t,ready:n}),[t,n])}
+"use strict";"use client";var S=Object.create;var s=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},m=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of b(t))!v.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(c=P(t,r))||c.enumerable});return e};var h=(e,t,n)=>(n=e!=null?S(R(e)):{},m(t||!e||!e.__esModule?s(n,"default",{value:e,enumerable:!0}):n,e)),k=e=>m(s({},"__esModule",{value:!0}),e);var I={};g(I,{readBreakpoint:()=>z,useBreakpoint:()=>C});module.exports=k(I);var a=h(require("react"));var f={xs:"(min-width: 520px)",sm:"(min-width: 768px)",md:"(min-width: 1024px)",lg:"(min-width: 1280px)",xl:"(min-width: 1640px)"};var B=Object.entries(f),l=null,o=new Set,i=null;function u(){return l??(l=B.map(([e,t])=>[e,window.matchMedia(t)])),l}function d(){let e="initial";for(let[t,n]of u())n.matches&&(e=t);return e}function p(){let e=d();e!==i&&(i=e,o.forEach(t=>t()))}function x(e){if(typeof window>"u")return()=>{};if(o.size===0){i=d();for(let[,t]of u())typeof t.addEventListener=="function"?t.addEventListener("change",p):t.addListener?.(p)}return o.add(e),()=>{if(o.delete(e),!(o.size>0)){for(let[,t]of u())try{typeof t.removeEventListener=="function"?t.removeEventListener("change",p):t.removeListener?.(p)}catch{}i=null}}}function E(){return typeof window>"u"?"initial":(i??(i=d()),i)}function w(){return"initial"}function z(){return typeof window>"u"?"initial":d()}var L=()=>!0,M=()=>!1,y=()=>()=>{},T=()=>"initial";function C(e=!0){let t=a.useSyncExternalStore(e?x:y,e?E:T,w),n=a.useSyncExternalStore(e?x:y,L,M);return a.useMemo(()=>({breakpoint:t,ready:n}),[t,n])}
 //# sourceMappingURL=use-breakpoint.js.map

package/dist/cjs/hooks/use-breakpoint.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-breakpoint.ts", "../../../src/components/shell.types.ts"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { _BREAKPOINTS, type Breakpoint } from '../components/shell.types.js';\n\nconst QUERIES = Object.entries(_BREAKPOINTS) as Array<[Breakpoint, string]>;\n\ntype Listener = () => void;\n\n/**\n * One set of `MediaQueryList`s and one set of listeners for the whole\n * application. Every component that asks for the breakpoint used to create and\n * subscribe to its own copy of all five queries.\n */\nlet mediaQueryLists: Array<[Breakpoint, MediaQueryList]> | null = null;\nconst listeners = new Set<Listener>();\nlet cachedBreakpoint: Breakpoint | null = null;\n\nfunction getMediaQueryLists() {\n  mediaQueryLists ??= QUERIES.map(([name, query]) => [name, window.matchMedia(query)] as [Breakpoint, MediaQueryList]);\n  return mediaQueryLists;\n}\n\nfunction computeBreakpoint(): Breakpoint {\n  // The largest matching query wins; `_BREAKPOINTS` is ordered smallest first.\n  let matched: Breakpoint = 'initial';\n  for (const [name, mql] of getMediaQueryLists()) {\n    if (mql.matches) matched = name;\n  }\n  return matched;\n}\n\nfunction handleChange() {\n  const next = computeBreakpoint();\n  if (next === cachedBreakpoint) return;\n  cachedBreakpoint = next;\n  listeners.forEach((listener) => listener());\n}\n\nfunction subscribe(listener: Listener) {\n  if (typeof window === 'undefined') return () => {};\n\n  if (listeners.size === 0) {\n    cachedBreakpoint = computeBreakpoint();\n    for (const [, mql] of getMediaQueryLists()) {\n      // Safari below 14 only has the deprecated listener API.\n      if (typeof mql.addEventListener === 'function') mql.addEventListener('change', handleChange);\n      else mql.addListener?.(handleChange);\n    }\n  }\n\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size > 0) return;\n\n    for (const [, mql] of getMediaQueryLists()) {\n      try {\n        if (typeof mql.removeEventListener === 'function') mql.removeEventListener('change', handleChange);\n        else mql.removeListener?.(handleChange);\n      } catch (error) {\n        // Removal can throw in edge cases, e.g. the list was already torn down.\n        if (process.env.NODE_ENV !== 'production') {\n          console.warn('[useBreakpoint] MediaQueryList cleanup warning:', error);\n        }\n      }\n    }\n    cachedBreakpoint = null;\n  };\n}\n\n/**\n * `getSnapshot` must return a referentially stable value between changes, so it\n * reads the cache that `handleChange` maintains rather than recomputing.\n */\nfunction getSnapshot(): Breakpoint {\n  if (typeof window === 'undefined') return 'initial';\n  cachedBreakpoint ??= computeBreakpoint();\n  return cachedBreakpoint;\n}\n\nfunction getServerSnapshot(): Breakpoint {\n  return 'initial';\n}\n\nconst getReadySnapshot = () => true;\nconst getReadyServerSnapshot = () => false;\n\nconst noopSubscribe = () => () => {};\nconst getInitialSnapshot = (): Breakpoint => 'initial';\n\n/**\n * The current breakpoint, and whether it has been resolved against a real\n * viewport yet (`false` on the server and during hydration).\n *\n * Reads through `useSyncExternalStore` rather than settling into state from an\n * effect. On a client render the very first pass already has the real\n * breakpoint, instead of rendering the whole shell at `initial` and correcting\n * it after the browser has painted.\n *\n * Pass `enabled = false` to skip the subscription (the breakpoint then reads as\n * `initial`).\n */\nexport function useBreakpoint(enabled = true): { breakpoint: Breakpoint; ready: boolean } {\n  // Callers with a non-responsive value pass `enabled = false` so they neither\n  // subscribe to the media queries nor re-render when the viewport crosses one.\n  const breakpoint = React.useSyncExternalStore(\n    enabled ? subscribe : noopSubscribe,\n    enabled ? getSnapshot : getInitialSnapshot,\n    getServerSnapshot,\n  );\n  const ready = React.useSyncExternalStore(\n    enabled ? subscribe : noopSubscribe,\n    getReadySnapshot,\n    getReadyServerSnapshot,\n  );\n\n  return React.useMemo(() => ({ breakpoint, ready }), [breakpoint, ready]);\n}\n", "import type * as React from 'react';\n\nexport type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n  load?: () => number | Promise<number | undefined> | undefined;\n  save?: (size: number) => void | Promise<void>;\n};\n\nexport interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {\n  presentation?: ResponsivePresentation;\n  expandedSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  height?: string | number;\n  resizable?: boolean;\n  collapsible?: boolean;\n  onExpand?: () => void;\n  onCollapse?: () => void;\n  onResize?: (size: number) => void;\n  resizer?: React.ReactNode;\n  onResizeStart?: (size: number) => void;\n  onResizeEnd?: (size: number) => void;\n  snapPoints?: number[];\n  snapTolerance?: number;\n  collapseThreshold?: number;\n  paneId?: string;\n  persistence?: PaneSizePersistence;\n}\n\nexport const _BREAKPOINTS = {\n  xs: '(min-width: 520px)',\n  sm: '(min-width: 768px)',\n  md: '(min-width: 1024px)',\n  lg: '(min-width: 1280px)',\n  xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n\n/**\n * CSS custom property key type for type-safe style objects.\n * Allows any string prefixed with '--'.\n */\nexport type CSSCustomProperty = `--${string}`;\n\n/**\n * Style object that supports CSS custom properties.\n */\nexport type CSSPropertiesWithVars = React.CSSProperties & {\n  [key: CSSCustomProperty]: string | number | undefined;\n};\n"],
-  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,mBAAAE,IAAA,eAAAC,EAAAH,GAEA,IAAAI,EAAuB,oBCuChB,IAAMC,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,ED1CA,IAAMC,EAAU,OAAO,QAAQC,CAAY,EASvCC,EAA8D,KAC5DC,EAAY,IAAI,IAClBC,EAAsC,KAE1C,SAASC,GAAqB,CAC5B,OAAAH,MAAoBF,EAAQ,IAAI,CAAC,CAACM,EAAMC,CAAK,IAAM,CAACD,EAAM,OAAO,WAAWC,CAAK,CAAC,CAAiC,GAC5GL,CACT,CAEA,SAASM,GAAgC,CAEvC,IAAIC,EAAsB,UAC1B,OAAW,CAACH,EAAMI,CAAG,IAAKL,EAAmB,EACvCK,EAAI,UAASD,EAAUH,GAE7B,OAAOG,CACT,CAEA,SAASE,GAAe,CACtB,IAAMC,EAAOJ,EAAkB,EAC3BI,IAASR,IACbA,EAAmBQ,EACnBT,EAAU,QAASU,GAAaA,EAAS,CAAC,EAC5C,CAEA,SAASC,EAAUD,EAAoB,CACrC,GAAI,OAAO,OAAW,IAAa,MAAO,IAAM,CAAC,EAEjD,GAAIV,EAAU,OAAS,EAAG,CACxBC,EAAmBI,EAAkB,EACrC,OAAW,CAAC,CAAEE,CAAG,IAAKL,EAAmB,EAEnC,OAAOK,EAAI,kBAAqB,WAAYA,EAAI,iBAAiB,SAAUC,CAAY,EACtFD,EAAI,cAAcC,CAAY,CAEvC,CAEA,OAAAR,EAAU,IAAIU,CAAQ,EAEf,IAAM,CAEX,GADAV,EAAU,OAAOU,CAAQ,EACrB,EAAAV,EAAU,KAAO,GAErB,QAAW,CAAC,CAAEO,CAAG,IAAKL,EAAmB,EACvC,GAAI,CACE,OAAOK,EAAI,qBAAwB,WAAYA,EAAI,oBAAoB,SAAUC,CAAY,EAC5FD,EAAI,iBAAiBC,CAAY,CACxC,MAAgB,CAKhB,CAEFP,EAAmB,KACrB,CACF,CAMA,SAASW,GAA0B,CACjC,OAAI,OAAO,OAAW,IAAoB,WAC1CX,MAAqBI,EAAkB,GAChCJ,EACT,CAEA,SAASY,GAAgC,CACvC,MAAO,SACT,CAEA,IAAMC,EAAmB,IAAM,GACzBC,EAAyB,IAAM,GAE/BC,EAAgB,IAAM,IAAM,CAAC,EAC7BC,EAAqB,IAAkB,UActC,SAASC,EAAcC,EAAU,GAAkD,CAGxF,IAAMC,EAAmB,uBACvBD,EAAUR,EAAYK,EACtBG,EAAUP,EAAcK,EACxBJ,CACF,EACMQ,EAAc,uBAClBF,EAAUR,EAAYK,EACtBF,EACAC,CACF,EAEA,OAAa,UAAQ,KAAO,CAAE,WAAAK,EAAY,MAAAC,CAAM,GAAI,CAACD,EAAYC,CAAK,CAAC,CACzE",
-  "names": ["use_breakpoint_exports", "__export", "useBreakpoint", "__toCommonJS", "React", "_BREAKPOINTS", "QUERIES", "_BREAKPOINTS", "mediaQueryLists", "listeners", "cachedBreakpoint", "getMediaQueryLists", "name", "query", "computeBreakpoint", "matched", "mql", "handleChange", "next", "listener", "subscribe", "getSnapshot", "getServerSnapshot", "getReadySnapshot", "getReadyServerSnapshot", "noopSubscribe", "getInitialSnapshot", "useBreakpoint", "enabled", "breakpoint", "ready"]
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport { _BREAKPOINTS, type Breakpoint } from '../components/shell.types.js';\n\nconst QUERIES = Object.entries(_BREAKPOINTS) as Array<[Breakpoint, string]>;\n\ntype Listener = () => void;\n\n/**\n * One set of `MediaQueryList`s and one set of listeners for the whole\n * application. Every component that asks for the breakpoint used to create and\n * subscribe to its own copy of all five queries.\n */\nlet mediaQueryLists: Array<[Breakpoint, MediaQueryList]> | null = null;\nconst listeners = new Set<Listener>();\nlet cachedBreakpoint: Breakpoint | null = null;\n\nfunction getMediaQueryLists() {\n  mediaQueryLists ??= QUERIES.map(([name, query]) => [name, window.matchMedia(query)] as [Breakpoint, MediaQueryList]);\n  return mediaQueryLists;\n}\n\nfunction computeBreakpoint(): Breakpoint {\n  // The largest matching query wins; `_BREAKPOINTS` is ordered smallest first.\n  let matched: Breakpoint = 'initial';\n  for (const [name, mql] of getMediaQueryLists()) {\n    if (mql.matches) matched = name;\n  }\n  return matched;\n}\n\nfunction handleChange() {\n  const next = computeBreakpoint();\n  if (next === cachedBreakpoint) return;\n  cachedBreakpoint = next;\n  listeners.forEach((listener) => listener());\n}\n\nfunction subscribe(listener: Listener) {\n  if (typeof window === 'undefined') return () => {};\n\n  if (listeners.size === 0) {\n    cachedBreakpoint = computeBreakpoint();\n    for (const [, mql] of getMediaQueryLists()) {\n      // Safari below 14 only has the deprecated listener API.\n      if (typeof mql.addEventListener === 'function') mql.addEventListener('change', handleChange);\n      else mql.addListener?.(handleChange);\n    }\n  }\n\n  listeners.add(listener);\n\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size > 0) return;\n\n    for (const [, mql] of getMediaQueryLists()) {\n      try {\n        if (typeof mql.removeEventListener === 'function') mql.removeEventListener('change', handleChange);\n        else mql.removeListener?.(handleChange);\n      } catch (error) {\n        // Removal can throw in edge cases, e.g. the list was already torn down.\n        if (process.env.NODE_ENV !== 'production') {\n          console.warn('[useBreakpoint] MediaQueryList cleanup warning:', error);\n        }\n      }\n    }\n    cachedBreakpoint = null;\n  };\n}\n\n/**\n * `getSnapshot` must return a referentially stable value between changes, so it\n * reads the cache that `handleChange` maintains rather than recomputing.\n */\nfunction getSnapshot(): Breakpoint {\n  if (typeof window === 'undefined') return 'initial';\n  cachedBreakpoint ??= computeBreakpoint();\n  return cachedBreakpoint;\n}\n\nfunction getServerSnapshot(): Breakpoint {\n  return 'initial';\n}\n\n/**\n * The breakpoint right now, outside React's render. For an effect that needs\n * the answer at the moment it runs rather than the one its render saw.\n */\nexport function readBreakpoint(): Breakpoint {\n  if (typeof window === 'undefined') return 'initial';\n  return computeBreakpoint();\n}\n\nconst getReadySnapshot = () => true;\nconst getReadyServerSnapshot = () => false;\n\nconst noopSubscribe = () => () => {};\nconst getInitialSnapshot = (): Breakpoint => 'initial';\n\n/**\n * The current breakpoint, and whether it has been resolved against a real\n * viewport yet (`false` on the server and during hydration).\n *\n * Reads through `useSyncExternalStore` rather than settling into state from an\n * effect. On a client render the very first pass already has the real\n * breakpoint, instead of rendering the whole shell at `initial` and correcting\n * it after the browser has painted.\n *\n * Pass `enabled = false` to skip the subscription (the breakpoint then reads as\n * `initial`).\n */\nexport function useBreakpoint(enabled = true): { breakpoint: Breakpoint; ready: boolean } {\n  // Callers with a non-responsive value pass `enabled = false` so they neither\n  // subscribe to the media queries nor re-render when the viewport crosses one.\n  const breakpoint = React.useSyncExternalStore(\n    enabled ? subscribe : noopSubscribe,\n    enabled ? getSnapshot : getInitialSnapshot,\n    getServerSnapshot,\n  );\n  const ready = React.useSyncExternalStore(\n    enabled ? subscribe : noopSubscribe,\n    getReadySnapshot,\n    getReadyServerSnapshot,\n  );\n\n  return React.useMemo(() => ({ breakpoint, ready }), [breakpoint, ready]);\n}\n", "import type * as React from 'react';\n\nexport type PresentationValue = 'fixed' | 'overlay' | 'stacked';\n\nexport type ResponsivePresentation = PresentationValue | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PresentationValue>>;\n\nexport type PaneMode = 'expanded' | 'collapsed';\nexport type SidebarMode = 'collapsed' | 'thin' | 'expanded';\n\nexport type ResponsiveMode = PaneMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', PaneMode>>;\n\nexport type ResponsiveSidebarMode = SidebarMode | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', SidebarMode>>;\n\nexport type Responsive<T> = T | Partial<Record<'initial' | 'xs' | 'sm' | 'md' | 'lg' | 'xl', T>>;\n\nexport type PaneSizePersistence = {\n  load?: () => number | Promise<number | undefined> | undefined;\n  save?: (size: number) => void | Promise<void>;\n};\n\n/**\n * Why a pane's open state changed. Since 0.8.0 only a user action is reported:\n * `toggle` for a Trigger, a handle double-click or a drag past\n * `collapseThreshold`, and `dismiss` for Escape or a press on the scrim.\n * `init`, `responsive`, `panel` and `left` are kept in the types for\n * compatibility and are never sent.\n */\nexport type PaneOpenChangeReason = 'toggle' | 'dismiss' | 'init' | 'responsive';\n\nexport interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {\n  presentation?: ResponsivePresentation;\n  expandedSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  resizable?: boolean;\n  collapsible?: boolean;\n  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */\n  onExpand?: () => void;\n  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */\n  onCollapse?: () => void;\n  onResize?: (size: number) => void;\n  onResizeStart?: (size: number) => void;\n  onResizeEnd?: (size: number) => void;\n  /** @deprecated Removed in 1.0. Snap in your own `onSizeChange` and pass `size`. */\n  snapPoints?: number[];\n  /** @deprecated Removed in 1.0, with `snapPoints`. */\n  snapTolerance?: number;\n  /** @deprecated Removed in 1.0. Close the pane from your own `onResizeEnd`. */\n  collapseThreshold?: number;\n  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */\n  paneId?: string;\n  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */\n  persistence?: PaneSizePersistence;\n}\n\nexport const _BREAKPOINTS = {\n  xs: '(min-width: 520px)',\n  sm: '(min-width: 768px)',\n  md: '(min-width: 1024px)',\n  lg: '(min-width: 1280px)',\n  xl: '(min-width: 1640px)',\n} as const;\n\nexport type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;\n\n/** Every breakpoint, smallest first. The stylesheet's @media blocks follow this order. */\nexport const SHELL_BREAKPOINTS: readonly Breakpoint[] = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];\n\nexport type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';\n\n/** The panes a Trigger can drive. `left` is the deprecated name for `rail`. */\nexport type PaneName = Exclude<PaneTarget, 'left'>;\n\n/**\n * CSS custom property key type for type-safe style objects.\n * Allows any string prefixed with '--'.\n */\nexport type CSSCustomProperty = `--${string}`;\n\n/**\n * Style object that supports CSS custom properties.\n */\nexport type CSSPropertiesWithVars = React.CSSProperties & {\n  [key: CSSCustomProperty]: string | number | undefined;\n};\n"],
+  "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,EAAA,kBAAAC,IAAA,eAAAC,EAAAJ,GAEA,IAAAK,EAAuB,oBCqDhB,IAAMC,EAAe,CAC1B,GAAI,qBACJ,GAAI,qBACJ,GAAI,sBACJ,GAAI,sBACJ,GAAI,qBACN,EDxDA,IAAMC,EAAU,OAAO,QAAQC,CAAY,EASvCC,EAA8D,KAC5DC,EAAY,IAAI,IAClBC,EAAsC,KAE1C,SAASC,GAAqB,CAC5B,OAAAH,MAAoBF,EAAQ,IAAI,CAAC,CAACM,EAAMC,CAAK,IAAM,CAACD,EAAM,OAAO,WAAWC,CAAK,CAAC,CAAiC,GAC5GL,CACT,CAEA,SAASM,GAAgC,CAEvC,IAAIC,EAAsB,UAC1B,OAAW,CAACH,EAAMI,CAAG,IAAKL,EAAmB,EACvCK,EAAI,UAASD,EAAUH,GAE7B,OAAOG,CACT,CAEA,SAASE,GAAe,CACtB,IAAMC,EAAOJ,EAAkB,EAC3BI,IAASR,IACbA,EAAmBQ,EACnBT,EAAU,QAASU,GAAaA,EAAS,CAAC,EAC5C,CAEA,SAASC,EAAUD,EAAoB,CACrC,GAAI,OAAO,OAAW,IAAa,MAAO,IAAM,CAAC,EAEjD,GAAIV,EAAU,OAAS,EAAG,CACxBC,EAAmBI,EAAkB,EACrC,OAAW,CAAC,CAAEE,CAAG,IAAKL,EAAmB,EAEnC,OAAOK,EAAI,kBAAqB,WAAYA,EAAI,iBAAiB,SAAUC,CAAY,EACtFD,EAAI,cAAcC,CAAY,CAEvC,CAEA,OAAAR,EAAU,IAAIU,CAAQ,EAEf,IAAM,CAEX,GADAV,EAAU,OAAOU,CAAQ,EACrB,EAAAV,EAAU,KAAO,GAErB,QAAW,CAAC,CAAEO,CAAG,IAAKL,EAAmB,EACvC,GAAI,CACE,OAAOK,EAAI,qBAAwB,WAAYA,EAAI,oBAAoB,SAAUC,CAAY,EAC5FD,EAAI,iBAAiBC,CAAY,CACxC,MAAgB,CAKhB,CAEFP,EAAmB,KACrB,CACF,CAMA,SAASW,GAA0B,CACjC,OAAI,OAAO,OAAW,IAAoB,WAC1CX,MAAqBI,EAAkB,GAChCJ,EACT,CAEA,SAASY,GAAgC,CACvC,MAAO,SACT,CAMO,SAASC,GAA6B,CAC3C,OAAI,OAAO,OAAW,IAAoB,UACnCT,EAAkB,CAC3B,CAEA,IAAMU,EAAmB,IAAM,GACzBC,EAAyB,IAAM,GAE/BC,EAAgB,IAAM,IAAM,CAAC,EAC7BC,EAAqB,IAAkB,UActC,SAASC,EAAcC,EAAU,GAAkD,CAGxF,IAAMC,EAAmB,uBACvBD,EAAUT,EAAYM,EACtBG,EAAUR,EAAcM,EACxBL,CACF,EACMS,EAAc,uBAClBF,EAAUT,EAAYM,EACtBF,EACAC,CACF,EAEA,OAAa,UAAQ,KAAO,CAAE,WAAAK,EAAY,MAAAC,CAAM,GAAI,CAACD,EAAYC,CAAK,CAAC,CACzE",
+  "names": ["use_breakpoint_exports", "__export", "readBreakpoint", "useBreakpoint", "__toCommonJS", "React", "_BREAKPOINTS", "QUERIES", "_BREAKPOINTS", "mediaQueryLists", "listeners", "cachedBreakpoint", "getMediaQueryLists", "name", "query", "computeBreakpoint", "matched", "mql", "handleChange", "next", "listener", "subscribe", "getSnapshot", "getServerSnapshot", "readBreakpoint", "getReadySnapshot", "getReadyServerSnapshot", "noopSubscribe", "getInitialSnapshot", "useBreakpoint", "enabled", "breakpoint", "ready"]
 }