entangle-ui 0.10.0 → 0.12.0

package/dist/esm/components/layout/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../../../../src/components/layout/Divider/Divider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAcA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}
+{"version":3,"file":"Divider.js","sources":["src/components/layout/Divider/Divider.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  dividerLabelTextStyle,\n  dividerRecipe,\n  dividerWithLabelRecipe,\n} from './Divider.css';\n\nimport type { DividerProps, DividerSpacing } from './Divider.types';\n\nconst SPACING_MAP: Record<number, string> = {\n  0: '0',\n  1: 'var(--etui-spacing-xs)',\n  2: 'var(--etui-spacing-sm)',\n  3: 'var(--etui-spacing-md)',\n  4: 'var(--etui-spacing-lg)',\n  5: 'var(--etui-spacing-xl)',\n  6: 'var(--etui-spacing-xxl)',\n  7: 'var(--etui-spacing-xxxl)',\n};\n\nfunction resolveSpacing(spacing: DividerSpacing | string | undefined): string {\n  if (spacing === undefined) return '0';\n  if (typeof spacing === 'number') return SPACING_MAP[spacing] ?? '0';\n  return spacing;\n}\n\n/**\n * Thin horizontal or vertical rule, optionally with an inline label.\n *\n * @example\n * ```tsx\n * <Stack>\n *   <SectionA />\n *   <Divider spacing={3} />\n *   <SectionB />\n * </Stack>\n *\n * <Divider label=\"Advanced\" />\n * ```\n */\nexport const Divider = /*#__PURE__*/ React.memo<DividerProps>(\n  ({\n    orientation = 'horizontal',\n    variant = 'solid',\n    spacing = 0,\n    label,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const spacingValue = resolveSpacing(spacing);\n    const marginStyle =\n      orientation === 'horizontal'\n        ? { marginTop: spacingValue, marginBottom: spacingValue }\n        : { marginLeft: spacingValue, marginRight: spacingValue };\n\n    if (label && orientation === 'horizontal') {\n      return (\n        <div\n          ref={ref}\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          className={cx(dividerWithLabelRecipe({ variant }), className)}\n          style={{ ...marginStyle, ...style }}\n          data-testid={testId}\n          {...rest}\n        >\n          <span className={dividerLabelTextStyle}>{label}</span>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"separator\"\n        aria-orientation={orientation}\n        className={cx(dividerRecipe({ orientation, variant }), className)}\n        style={{ ...marginStyle, ...style }}\n        data-testid={testId}\n        {...rest}\n      />\n    );\n  }\n);\n\nDivider.displayName = 'Divider';\n"],"names":[],"mappings":";;;;;;AAcA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;AAC6B;;AACM;AACjC;AACF;AAEA;;;;;;;;;;;;;AAaG;AACI;AAYH;AACA;;;AAKA;;;AAgBA;AAWF;AAGF;;"}

package/dist/esm/components/layout/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../../../src/components/layout/Flex/Flex.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAqMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}
+{"version":3,"file":"Flex.js","sources":["src/components/layout/Flex/Flex.tsx"],"sourcesContent":["'use client';\n\n// src/components/layout/Flex/Flex.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { flexRecipe, gapVar, growVar, shrinkVar, basisVar } from './Flex.css';\n\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Flex direction options\n */\nexport type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';\n\n/**\n * Flex wrap options\n */\nexport type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\n\n/**\n * Justify content options\n */\nexport type FlexJustify =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\n/**\n * Align items options\n */\nexport type FlexAlign =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'stretch'\n  | 'baseline';\n\n/**\n * Align content options (for wrapped flex containers)\n */\nexport type FlexAlignContent =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'stretch'\n  | 'space-between'\n  | 'space-around';\n\n/**\n * Spacing multiplier (0-8) based on theme spacing unit\n */\nexport type FlexSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nexport interface FlexBaseProps extends BaseComponent {\n  /**\n   * Flex content - any React elements\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Flex direction - controls main axis orientation\n   * - `row`: Left to right (default)\n   * - `row-reverse`: Right to left\n   * - `column`: Top to bottom\n   * - `column-reverse`: Bottom to top\n   * @default \"row\"\n   */\n  direction?: FlexDirection | undefined;\n\n  /**\n   * Responsive flex direction\n   * Allows different directions at different breakpoints\n   */\n  sm?: FlexDirection | undefined;\n  md?: FlexDirection | undefined;\n  lg?: FlexDirection | undefined;\n  xl?: FlexDirection | undefined;\n\n  /**\n   * Flex wrap behavior\n   * - `nowrap`: Items stay on one line (default)\n   * - `wrap`: Items wrap to new lines as needed\n   * - `wrap-reverse`: Items wrap in reverse order\n   * @default \"nowrap\"\n   */\n  wrap?: FlexWrap | undefined;\n\n  /**\n   * Justify content - distributes space along main axis\n   * - `flex-start`: Items packed to start (default)\n   * - `flex-end`: Items packed to end\n   * - `center`: Items centered\n   * - `space-between`: Even space between items\n   * - `space-around`: Even space around items\n   * - `space-evenly`: Equal space between and around items\n   * @default \"flex-start\"\n   */\n  justify?: FlexJustify | undefined;\n\n  /**\n   * Align items - aligns items along cross axis\n   * - `stretch`: Items stretch to fill container (default)\n   * - `flex-start`: Items align to start of cross axis\n   * - `flex-end`: Items align to end of cross axis\n   * - `center`: Items centered on cross axis\n   * - `baseline`: Items align to text baseline\n   * @default \"stretch\"\n   */\n  align?: FlexAlign | undefined;\n\n  /**\n   * Align content - aligns wrapped lines\n   * Only applies when wrap is enabled and there are multiple lines\n   * - `stretch`: Lines stretch to fill container (default)\n   * - `flex-start`: Lines packed to start\n   * - `flex-end`: Lines packed to end\n   * - `center`: Lines centered\n   * - `space-between`: Even space between lines\n   * - `space-around`: Even space around lines\n   * @default \"stretch\"\n   */\n  alignContent?: FlexAlignContent | undefined;\n\n  /**\n   * Gap between flex items (multiplier of base spacing unit)\n   * - `0`: No gap (0px)\n   * - `1`: 1x base unit (4px)\n   * - `2`: 2x base unit (8px)\n   * - `3`: 3x base unit (12px)\n   * - `4`: 4x base unit (16px)\n   * @default 0\n   */\n  gap?: FlexSpacing | undefined;\n\n  /**\n   * Custom gap override (CSS value)\n   * Overrides gap prop if provided\n   * @example \"16px\", \"1rem\", \"2rem 1rem\"\n   */\n  customGap?: string | number | undefined;\n\n  /**\n   * Flex grow - how much item should grow\n   * @default 0\n   */\n  grow?: number | undefined;\n\n  /**\n   * Flex shrink - how much item should shrink\n   * @default 1\n   */\n  shrink?: number | undefined;\n\n  /**\n   * Flex basis - initial size before free space is distributed\n   * @example \"auto\", \"100px\", \"50%\", \"0\"\n   * @default \"auto\"\n   */\n  basis?: string | number | undefined;\n\n  /**\n   * Whether this flex container should fill available width\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Whether this flex container should fill available height\n   * @default false\n   */\n  fullHeight?: boolean;\n\n  /**\n   * Minimum height for the flex container\n   * @example \"100vh\", \"300px\", \"50%\"\n   */\n  minHeight?: string | number | undefined;\n\n  /**\n   * Maximum width for the flex container\n   * @example \"1200px\", \"100%\", \"50vw\"\n   */\n  maxWidth?: string | number | undefined;\n}\n\n/**\n * Props for the Flex component with prettified type for better IntelliSense\n */\nexport type FlexProps = Prettify<FlexBaseProps>;\n\n/** Base spacing unit in px */\nconst SPACING_UNIT = 4;\n\n/**\n * Calculate gap value based on spacing multiplier\n */\nconst getGapValue = (gap: FlexSpacing, customGap?: string | number): string => {\n  if (customGap !== undefined) {\n    return typeof customGap === 'number' ? `${customGap}px` : customGap;\n  }\n  return `${gap * SPACING_UNIT}px`;\n};\n\n/**\n * A comprehensive flexbox component providing full control over flex properties.\n *\n * More powerful than Stack for complex layouts requiring precise flexbox control.\n * Supports all flexbox properties, responsive direction changes, and flexible sizing.\n * Perfect for complex layouts, navigation bars, form layouts, and sophisticated arrangements.\n *\n * @example\n * ```tsx\n * // Basic horizontal flex\n * <Flex justify=\"space-between\" align=\"center\">\n *   <div>Left content</div>\n *   <div>Right content</div>\n * </Flex>\n *\n * // Vertical stack with gap\n * <Flex direction=\"column\" gap={3}>\n *   <Card>Item 1</Card>\n *   <Card>Item 2</Card>\n *   <Card>Item 3</Card>\n * </Flex>\n *\n * // Responsive navigation\n * <Flex\n *   direction=\"column\"\n *   md=\"row\"\n *   justify=\"space-between\"\n *   align=\"center\"\n *   gap={2}\n * >\n *   <Logo />\n *   <Navigation />\n *   <UserMenu />\n * </Flex>\n *\n * // Flexible form layout\n * <Flex direction=\"column\" gap={2} maxWidth=\"400px\">\n *   <Input label=\"Email\" />\n *   <Input label=\"Password\" />\n *   <Flex justify=\"space-between\" gap={2}>\n *     <Button fullWidth variant=\"ghost\">Cancel</Button>\n *     <Button fullWidth variant=\"filled\">Login</Button>\n *   </Flex>\n * </Flex>\n *\n * // Card grid with wrapping\n * <Flex wrap=\"wrap\" gap={3} justify=\"center\">\n *   <Card basis=\"300px\">Card 1</Card>\n *   <Card basis=\"300px\">Card 2</Card>\n *   <Card basis=\"300px\">Card 3</Card>\n * </Flex>\n *\n * // Complex layout with nesting\n * <Flex direction=\"column\" fullHeight>\n *   <Header />\n *   <Flex grow={1}>\n *     <Sidebar basis=\"200px\" />\n *     <MainContent grow={1} />\n *   </Flex>\n *   <Footer />\n * </Flex>\n * ```\n */\nexport const Flex: React.FC<FlexProps> = ({\n  children,\n  direction = 'row',\n  sm,\n  md,\n  lg,\n  xl,\n  wrap = 'nowrap',\n  justify = 'flex-start',\n  align = 'stretch',\n  alignContent = 'stretch',\n  gap = 0,\n  customGap,\n  grow = 0,\n  shrink = 1,\n  basis = 'auto',\n  fullWidth = false,\n  fullHeight = false,\n  minHeight,\n  maxWidth,\n  className,\n  testId,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  const basisValue = typeof basis === 'number' ? `${basis}px` : basis;\n\n  const dynamicStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [gapVar]: getGapValue(gap, customGap),\n      [growVar]: String(grow),\n      [shrinkVar]: String(shrink),\n      [basisVar]: basisValue,\n    }),\n    ...(minHeight !== undefined\n      ? {\n          minHeight:\n            typeof minHeight === 'number' ? `${minHeight}px` : minHeight,\n        }\n      : undefined),\n    ...(maxWidth !== undefined\n      ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }\n      : undefined),\n    ...style,\n  };\n\n  // Build data attributes for responsive direction overrides\n  const dataAttrs: Record<string, string> = {};\n  if (sm) dataAttrs['data-sm-dir'] = sm;\n  if (md) dataAttrs['data-md-dir'] = md;\n  if (lg) dataAttrs['data-lg-dir'] = lg;\n  if (xl) dataAttrs['data-xl-dir'] = xl;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        flexRecipe({\n          direction,\n          wrap,\n          justify,\n          align,\n          alignContent,\n          fullWidth: fullWidth || undefined,\n          fullHeight: fullHeight || undefined,\n        }),\n        className\n      )}\n      data-testid={testId}\n      style={dynamicStyle}\n      {...dataAttrs}\n      {...htmlProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nFlex.displayName = 'Flex';\n"],"names":[],"mappings":";;;;;;AAqMA;AACA;AAEA;;AAEG;AACH;AACE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DG;AACI;AA0BL;AAEA;AACE;;AAEE;AACA;;;;AAIA;AACI;AAED;;;AAGH;;AAEF;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;;;;;;;;;AAcD;AAWT;AAEA;;"}

package/dist/esm/components/layout/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../../../src/components/layout/Grid/Grid.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAoGA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;;;AAoBC;AACE;;AAEE;;AAEF;;;;;;;;;;;;;;;;AA2BJ;;AAEI;;AAEF;;AAGF;AAYF;AAEA;;"}
+{"version":3,"file":"Grid.js","sources":["src/components/layout/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\n// src/components/layout/Grid/Grid.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { gridContainer, gridItem, gapVar, columnsVar } from './Grid.css';\n\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Grid size variants from 1-12 columns or auto-sizing\n */\nexport type GridSize =\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 'auto';\n\n/**\n * Spacing multiplier (0-8) based on theme spacing unit\n * 0 = no spacing, 1 = 1x base unit, 2 = 2x base unit, etc.\n */\nexport type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nexport interface GridBaseProps extends Omit<BaseComponent, 'children'> {\n  /**\n   * Grid content - other Grid components or any React elements\n   */\n  children: React.ReactNode;\n\n  /**\n   * Whether this Grid acts as a container (enables CSS Grid)\n   * When true, this Grid becomes a container for child Grid items\n   * @default false\n   */\n  container?: boolean;\n\n  /**\n   * Grid item size (1-12 columns)\n   * Only used when this Grid is a child of a container Grid\n   * @example 6 // Takes 6 out of 12 columns (50% width)\n   */\n  size?: GridSize | undefined;\n\n  /**\n   * Responsive grid sizes\n   * Allows different column spans at different breakpoints\n   * @example xs={12} sm={6} md={4} // Full width on mobile, half on tablet, third on desktop\n   */\n  xs?: GridSize | undefined;\n  sm?: GridSize | undefined;\n  md?: GridSize | undefined;\n  lg?: GridSize | undefined;\n  xl?: GridSize | undefined;\n\n  /**\n   * Spacing between grid items (multiplier of base spacing unit)\n   * Only applies when container=true\n   * - `0`: No spacing (0px)\n   * - `1`: 1x base unit (4px)\n   * - `2`: 2x base unit (8px)\n   * - `3`: 3x base unit (12px)\n   * - `4`: 4x base unit (16px)\n   * @default 2\n   */\n  spacing?: GridSpacing | undefined;\n\n  /**\n   * Total number of columns in the grid\n   * Only applies when container=true\n   * @default 12\n   */\n  columns?: number | undefined;\n\n  /**\n   * Custom gap override (CSS value)\n   * Overrides spacing prop if provided\n   * @example \"16px\", \"1rem\", \"2\"\n   */\n  gap?: string | number | undefined;\n}\n\n/**\n * Props for the Grid component with prettified type for better IntelliSense\n */\nexport type GridProps = Prettify<GridBaseProps>;\n\n/** Base spacing unit in px */\nconst SPACING_UNIT = 4;\n\n/**\n * Calculate gap value based on spacing multiplier\n */\nconst getGapValue = (\n  spacing: GridSpacing,\n  customGap?: string | number\n): string => {\n  if (customGap !== undefined) {\n    return typeof customGap === 'number' ? `${customGap}px` : customGap;\n  }\n  return `${spacing * SPACING_UNIT}px`;\n};\n\n/**\n * A flexible 12-column grid system component for creating responsive layouts.\n *\n * Supports both container and item modes. Container grids create the grid layout,\n * while item grids define how much space each child should occupy.\n * Built on CSS Grid for modern, flexible layouts.\n *\n * @example\n * ```tsx\n * // Basic two-column layout\n * <Grid container spacing=\"md\">\n *   <Grid size={6}>Left content</Grid>\n *   <Grid size={6}>Right content</Grid>\n * </Grid>\n *\n * // Responsive three-column layout\n * <Grid container spacing=\"lg\">\n *   <Grid xs={12} sm={6} md={4}>Card 1</Grid>\n *   <Grid xs={12} sm={6} md={4}>Card 2</Grid>\n *   <Grid xs={12} sm={12} md={4}>Card 3</Grid>\n * </Grid>\n *\n * // Nested grids\n * <Grid container spacing=\"md\">\n *   <Grid size={8}>\n *     <Grid container spacing=\"sm\">\n *       <Grid size={6}>Nested left</Grid>\n *       <Grid size={6}>Nested right</Grid>\n *     </Grid>\n *   </Grid>\n *   <Grid size={4}>Sidebar</Grid>\n * </Grid>\n *\n * // Custom gap\n * <Grid container gap=\"2rem\">\n *   <Grid size={4}>Item 1</Grid>\n *   <Grid size={4}>Item 2</Grid>\n *   <Grid size={4}>Item 3</Grid>\n * </Grid>\n * ```\n */\nexport const Grid: React.FC<GridProps> = ({\n  children,\n  container = false,\n  size,\n  xs,\n  sm,\n  md,\n  lg,\n  xl,\n  spacing = 2,\n  columns = 12,\n  gap,\n  className,\n  testId,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  if (container) {\n    const containerStyle: React.CSSProperties = {\n      ...assignInlineVars({\n        [gapVar]: getGapValue(spacing, gap),\n        [columnsVar]: String(columns),\n      }),\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cx(gridContainer, className)}\n        data-testid={testId}\n        style={containerStyle}\n        {...htmlProps}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  // Item mode — use data attributes for responsive grid-column spans\n  const dataAttrs: Record<string, string> = {};\n  if (size !== undefined) {\n    // Base size applied via inline style for simplicity\n  }\n  if (xs !== undefined) dataAttrs['data-xs'] = String(xs);\n  if (sm !== undefined) dataAttrs['data-sm'] = String(sm);\n  if (md !== undefined) dataAttrs['data-md'] = String(md);\n  if (lg !== undefined) dataAttrs['data-lg'] = String(lg);\n  if (xl !== undefined) dataAttrs['data-xl'] = String(xl);\n\n  const itemStyle: React.CSSProperties = {\n    ...(size !== undefined\n      ? { gridColumn: `span ${size === 'auto' ? 'auto' : size}` }\n      : undefined),\n    ...style,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cx(gridItem, className)}\n      data-testid={testId}\n      style={itemStyle}\n      {...dataAttrs}\n      {...htmlProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nGrid.displayName = 'Grid';\n"],"names":[],"mappings":";;;;;;AAoGA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCG;;;AAoBC;AACE;;AAEE;;AAEF;;;;;;;;;;;;;;;;AA2BJ;;AAEI;;AAEF;;AAGF;AAYF;AAEA;;"}

package/dist/esm/components/layout/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../../src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;;;AAIF;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}
+{"version":3,"file":"ListItem.js","sources":["src/components/layout/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  listItemContentStyle,\n  listItemLeadingStyle,\n  listItemRecipe,\n  listItemTrailingStyle,\n} from './ListItem.css';\n\nimport type { ListItemProps } from './ListItem.types';\n\n/**\n * Reusable list row with leading / trailing slots and hover/selected/active\n * states. Becomes keyboard-activatable when `onClick` is provided (Enter\n * and Space trigger the handler).\n *\n * @example\n * ```tsx\n * <ListItem\n *   leading={<FileIcon />}\n *   trailing={<Badge color=\"success\">done</Badge>}\n *   selected={id === activeId}\n *   onClick={() => select(id)}\n * >\n *   scene.blend\n * </ListItem>\n * ```\n */\nexport const ListItem = /*#__PURE__*/ React.memo<ListItemProps>(\n  ({\n    onClick,\n    leading,\n    trailing,\n    selected = false,\n    active = false,\n    disabled = false,\n    density = 'comfortable',\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const clickable = !!onClick && !disabled;\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (!clickable) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick(event as unknown as React.MouseEvent<HTMLDivElement>);\n        }\n      },\n      [clickable, onClick]\n    );\n\n    return (\n      <div\n        ref={ref}\n        role={clickable ? 'button' : undefined}\n        tabIndex={clickable ? 0 : undefined}\n        aria-disabled={disabled || undefined}\n        data-disabled={disabled ? 'true' : 'false'}\n        data-selected={selected ? 'true' : undefined}\n        data-active={active ? 'true' : undefined}\n        onClick={clickable ? onClick : undefined}\n        onKeyDown={handleKeyDown}\n        className={cx(\n          listItemRecipe({\n            density,\n            clickable: clickable || undefined,\n            selected: selected || undefined,\n            active: active || undefined,\n            disabled: disabled || undefined,\n          }),\n          className\n        )}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {leading && <span className={listItemLeadingStyle}>{leading}</span>}\n        <span className={listItemContentStyle}>{children}</span>\n        {trailing && <span className={listItemTrailingStyle}>{trailing}</span>}\n      </div>\n    );\n  }\n);\n\nListItem.displayName = 'ListItem';\n"],"names":[],"mappings":";;;;;;AAeA;;;;;;;;;;;;;;;;AAgBG;;;AAmBC;AAEI;;AACA;;;;AAIF;AAIF;;;;;;AAkBO;AAYT;AAGF;;"}

package/dist/esm/components/layout/PageHeader/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sources":["../../../../../../src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkBA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}
+{"version":3,"file":"PageHeader.js","sources":["src/components/layout/PageHeader/PageHeader.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  pageHeaderActionsStyle,\n  pageHeaderBreadcrumbsStyle,\n  pageHeaderIconStyle,\n  pageHeaderRecipe,\n  pageHeaderSubtitleStyle,\n  pageHeaderTitleColumnStyle,\n  pageHeaderTitleRecipe,\n} from './PageHeader.css';\n\nimport type { PageHeaderProps } from './PageHeader.types';\n\n/**\n * Structural page/view header with optional breadcrumbs, subtitle,\n * leading icon, and right-aligned actions.\n *\n * Renders a semantic `<header>` element.\n *\n * @example\n * ```tsx\n * <PageHeader\n *   icon={<FolderIcon size=\"lg\" />}\n *   title=\"Project Assets\"\n *   subtitle=\"124 items\"\n *   actions={<Button variant=\"filled\">Upload</Button>}\n * />\n * ```\n */\nexport const PageHeader = /*#__PURE__*/ React.memo<PageHeaderProps>(\n  ({\n    icon,\n    title,\n    subtitle,\n    actions,\n    breadcrumbs,\n    size = 'md',\n    bordered = true,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <header\n        ref={ref}\n        className={cx(pageHeaderRecipe({ size, bordered }), className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {icon && <span className={pageHeaderIconStyle}>{icon}</span>}\n\n        <div className={pageHeaderTitleColumnStyle}>\n          {breadcrumbs && (\n            <div className={pageHeaderBreadcrumbsStyle}>{breadcrumbs}</div>\n          )}\n          <h1 className={pageHeaderTitleRecipe({ size })}>{title}</h1>\n          {subtitle && (\n            <div className={pageHeaderSubtitleStyle}>{subtitle}</div>\n          )}\n        </div>\n\n        {actions && <div className={pageHeaderActionsStyle}>{actions}</div>}\n      </header>\n    );\n  }\n);\n\nPageHeader.displayName = 'PageHeader';\n"],"names":[],"mappings":";;;;;;AAkBA;;;;;;;;;;;;;;;AAeG;AACI;;AAsCL;AAGF;;"}

package/dist/esm/components/layout/PanelSurface/PanelSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSurface.js","sources":["../../../../../../src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA6BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}
+{"version":3,"file":"PanelSurface.js","sources":["src/components/layout/PanelSurface/PanelSurface.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { createContext, useContext, useMemo } from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  rootStyle,\n  rootBordered,\n  rootNoBorder,\n  backgroundVar,\n  headerRecipe,\n  headerActions,\n  bodyStyle,\n  bodyScrollable,\n  bodyHidden,\n  footerRecipe,\n} from './PanelSurface.css';\n\nimport type {\n  PanelSurfaceBodyProps,\n  PanelSurfaceContextValue,\n  PanelSurfaceFooterProps,\n  PanelSurfaceHeaderProps,\n  PanelSurfaceProps,\n} from './PanelSurface.types';\n\nconst PanelSurfaceContext =\n  /*#__PURE__*/ createContext<PanelSurfaceContextValue>({\n    size: 'md',\n  });\n\nconst usePanelSurface = () => useContext(PanelSurfaceContext);\n\nconst PanelSurfaceHeader: React.FC<PanelSurfaceHeaderProps> = ({\n  children,\n  actions,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { size } = usePanelSurface();\n\n  return (\n    <div\n      ref={ref}\n      className={cx(headerRecipe({ size }), className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <span>{children}</span>\n      {actions ? <div className={headerActions}>{actions}</div> : null}\n    </div>\n  );\n};\n\nPanelSurfaceHeader.displayName = 'PanelSurface.Header';\n\nconst PanelSurfaceBody: React.FC<PanelSurfaceBodyProps> = ({\n  children,\n  scroll = false,\n  padding = 0,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const resolvedPadding =\n    typeof padding === 'number' ? `${padding}px` : padding;\n\n  const mergedStyle: React.CSSProperties = {\n    padding: resolvedPadding,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cx(bodyStyle, scroll ? bodyScrollable : bodyHidden, className)}\n      style={mergedStyle}\n      data-testid={testId}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nPanelSurfaceBody.displayName = 'PanelSurface.Body';\n\nconst PanelSurfaceFooter: React.FC<PanelSurfaceFooterProps> = ({\n  children,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { size } = usePanelSurface();\n\n  return (\n    <div\n      ref={ref}\n      className={cx(footerRecipe({ size }), className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\nPanelSurfaceFooter.displayName = 'PanelSurface.Footer';\n\nconst PanelSurfaceRoot: React.FC<PanelSurfaceProps> = ({\n  children,\n  size = 'md',\n  bordered = true,\n  background,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const contextValue = useMemo(() => ({ size }), [size]);\n\n  const mergedStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [backgroundVar]: background ?? vars.colors.background.secondary,\n    }),\n    ...style,\n  };\n\n  return (\n    <PanelSurfaceContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        className={cx(\n          rootStyle,\n          bordered ? rootBordered : rootNoBorder,\n          className\n        )}\n        style={mergedStyle}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    </PanelSurfaceContext.Provider>\n  );\n};\n\nPanelSurfaceRoot.displayName = 'PanelSurface';\n\nexport const PanelSurface = /*#__PURE__*/ Object.assign(PanelSurfaceRoot, {\n  Header: PanelSurfaceHeader,\n  Body: PanelSurfaceBody,\n  Footer: PanelSurfaceFooter,\n});\n"],"names":[],"mappings":";;;;;;;;AA6BA;AACE;AACE;AACD;AAEH;AAEA;AASE;;AAcF;AAEA;AAEA;AAUE;AAGA;AACE;AACA;;AAGF;AAWF;AAEA;AAEA;AAQE;AAEA;AAWF;AAEA;AAEA;AAWE;AAEA;AACE;;;AAGA;;;AAoBJ;AAEA;AAEO;AACL;AACA;AACA;AACD;;"}

package/dist/esm/components/layout/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../../../../src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAmCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;;;;;;AAgBA;AAGA;;;;AAIA;;AAIA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;AAGA;;;;AAIE;;;;;;;AAQF;;;AAGA;;;;AAIE;;;;;;;AAQF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;;AAIA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;;AAOE;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAUF;AACA;;;AAGA;AACA;;AAEE;;AAEF;AAEA;;;AAIA;AACE;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;;;;AAKF;;AAEE;;;AAEA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;AAEA;AACE;AACF;AACA;AACA;;AAEA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;AAGF;;;;;;AAgFU;AACF;AAEE;;;;AAYC;AAEC;AACF;AAwBA;AACF;AAEE;;;;AAYC;AAEC;;AAUd;AAEA;;"}
+{"version":3,"file":"ScrollArea.js","sources":["src/components/layout/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { useMergedRef } from '@/hooks/useMergedRef';\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\nimport { cx } from '@/utils/cx';\n\nimport {\n  rootStyle,\n  rootAutoFill,\n  viewportRecipe,\n  scrollbarVertical,\n  scrollbarHorizontal,\n  scrollbarVisible,\n  scrollbarHidden,\n  thumbBase,\n  thumbVertical,\n  thumbHorizontal,\n  thumbDragging,\n  fadeMaskBase,\n  fadeMaskVisible,\n  fadeMaskHiddenStyle,\n  fadeMaskTop,\n  fadeMaskBottom,\n  fadeMaskLeft,\n  fadeMaskRight,\n  scrollbarWidthVar,\n  scrollbarPaddingVar,\n  fadeMaskSizeVar,\n} from './ScrollArea.css';\n\nimport type { ScrollAreaProps } from './ScrollArea.types';\n\n// --- Component ---\n\nexport const ScrollArea: React.FC<ScrollAreaProps> = ({\n  children,\n  direction = 'vertical',\n  scrollbarVisibility = 'auto',\n  hideDelay = 1000,\n  scrollbarWidth = 6,\n  minThumbLength = 30,\n  scrollbarPadding = 2,\n  fadeMask = false,\n  fadeMaskHeight = 24,\n  maxHeight,\n  maxWidth,\n  autoFill = false,\n  onScroll,\n  onScrollTop,\n  onScrollBottom,\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const autoId = useId();\n  const viewportId = `scrollarea-${autoId}-viewport`;\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n\n  // Thumb state\n  const [vThumbSize, setVThumbSize] = useState(0);\n  const [vThumbOffset, setVThumbOffset] = useState(0);\n  const [hThumbSize, setHThumbSize] = useState(0);\n  const [hThumbOffset, setHThumbOffset] = useState(0);\n  const [hasVOverflow, setHasVOverflow] = useState(false);\n  const [hasHOverflow, setHasHOverflow] = useState(false);\n  // Scroll position as a 0–100 percentage, exposed via aria-valuenow. Kept in\n  // state (updated in recalculate) so it stays reactive instead of being read\n  // from the viewport ref during render.\n  const [vScrollPercent, setVScrollPercent] = useState(0);\n  const [hScrollPercent, setHScrollPercent] = useState(0);\n\n  // Visibility state\n  const [scrollbarVisibleState, setScrollbarVisibleState] = useState(\n    scrollbarVisibility === 'always'\n  );\n  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  // Ref drives synchronous reads in the move handler; the state mirror is used\n  // for the thumb's dragging class during render.\n  const dragAxisRef = useRef<'vertical' | 'horizontal' | null>(null);\n  const [dragAxis, setDragAxis] = useState<'vertical' | 'horizontal' | null>(\n    null\n  );\n  const dragStartRef = useRef({ pointerPos: 0, scrollPos: 0 });\n\n  // Fade mask state\n  const [atTop, setAtTop] = useState(true);\n  const [atBottom, setAtBottom] = useState(false);\n  const [atLeft, setAtLeft] = useState(true);\n  const [atRight, setAtRight] = useState(false);\n\n  const showV = direction === 'vertical' || direction === 'both';\n  const showH = direction === 'horizontal' || direction === 'both';\n\n  // Recalculate thumb sizes\n  const recalculate = useCallback(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n\n    if (showV) {\n      const ratio = vp.clientHeight / vp.scrollHeight;\n      const overflow = ratio < 1;\n      setHasVOverflow(overflow);\n      const maxScroll = vp.scrollHeight - vp.clientHeight;\n      const scrollRatio = maxScroll > 0 ? vp.scrollTop / maxScroll : 0;\n      setVScrollPercent(Math.round(scrollRatio * 100));\n      if (overflow) {\n        const trackHeight = vp.clientHeight - scrollbarPadding * 2;\n        const thumbH = Math.max(minThumbLength, ratio * trackHeight);\n        setVThumbSize(thumbH);\n        setVThumbOffset(scrollRatio * (trackHeight - thumbH));\n      }\n    }\n\n    if (showH) {\n      const ratio = vp.clientWidth / vp.scrollWidth;\n      const overflow = ratio < 1;\n      setHasHOverflow(overflow);\n      const maxScroll = vp.scrollWidth - vp.clientWidth;\n      const scrollRatio = maxScroll > 0 ? vp.scrollLeft / maxScroll : 0;\n      setHScrollPercent(Math.round(scrollRatio * 100));\n      if (overflow) {\n        const trackWidth = vp.clientWidth - scrollbarPadding * 2;\n        const thumbW = Math.max(minThumbLength, ratio * trackWidth);\n        setHThumbSize(thumbW);\n        setHThumbOffset(scrollRatio * (trackWidth - thumbW));\n      }\n    }\n\n    // Update fade mask state\n    if (fadeMask) {\n      setAtTop(vp.scrollTop <= 0);\n      setAtBottom(vp.scrollTop + vp.clientHeight >= vp.scrollHeight - 1);\n      setAtLeft(vp.scrollLeft <= 0);\n      setAtRight(vp.scrollLeft + vp.clientWidth >= vp.scrollWidth - 1);\n    }\n  }, [showV, showH, scrollbarPadding, minThumbLength, fadeMask]);\n\n  // Show scrollbar with auto-hide\n  const showScrollbar = useCallback(() => {\n    if (scrollbarVisibility === 'never') return;\n    if (scrollbarVisibility === 'always') return;\n\n    setScrollbarVisibleState(true);\n    if (hideTimerRef.current) {\n      clearTimeout(hideTimerRef.current);\n    }\n\n    if (scrollbarVisibility === 'auto') {\n      hideTimerRef.current = setTimeout(() => {\n        if (!isDragging) {\n          setScrollbarVisibleState(false);\n        }\n      }, hideDelay);\n    }\n  }, [scrollbarVisibility, hideDelay, isDragging]);\n\n  // Handle scroll\n  const handleScroll = useCallback(\n    (e: React.UIEvent<HTMLDivElement>) => {\n      recalculate();\n      showScrollbar();\n      onScroll?.(e);\n\n      const vp = e.currentTarget;\n      if (vp.scrollTop <= 0) {\n        onScrollTop?.();\n      }\n      if (vp.scrollTop + vp.clientHeight >= vp.scrollHeight - 1) {\n        onScrollBottom?.();\n      }\n    },\n    [recalculate, showScrollbar, onScroll, onScrollTop, onScrollBottom]\n  );\n\n  // Handle hover\n  const handleMouseEnter = useCallback(() => {\n    if (scrollbarVisibility === 'hover' || scrollbarVisibility === 'auto') {\n      setScrollbarVisibleState(true);\n      if (hideTimerRef.current) {\n        clearTimeout(hideTimerRef.current);\n        hideTimerRef.current = null;\n      }\n    }\n  }, [scrollbarVisibility]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (scrollbarVisibility === 'hover') {\n      setScrollbarVisibleState(false);\n    } else if (scrollbarVisibility === 'auto' && !isDragging) {\n      hideTimerRef.current = setTimeout(() => {\n        setScrollbarVisibleState(false);\n      }, hideDelay);\n    }\n  }, [scrollbarVisibility, isDragging, hideDelay]);\n\n  // Thumb drag handlers\n  const handleThumbPointerDown = useCallback(\n    (axis: 'vertical' | 'horizontal', e: React.PointerEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      setIsDragging(true);\n      dragAxisRef.current = axis;\n      setDragAxis(axis);\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n\n      if (axis === 'vertical') {\n        dragStartRef.current = {\n          pointerPos: e.clientY,\n          scrollPos: vp.scrollTop,\n        };\n      } else {\n        dragStartRef.current = {\n          pointerPos: e.clientX,\n          scrollPos: vp.scrollLeft,\n        };\n      }\n    },\n    []\n  );\n\n  const handleThumbPointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isDragging || !dragAxisRef.current) return;\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      const axis = dragAxisRef.current;\n\n      if (axis === 'vertical') {\n        const trackHeight = vp.clientHeight - scrollbarPadding * 2;\n        const maxScroll = vp.scrollHeight - vp.clientHeight;\n        const delta = e.clientY - dragStartRef.current.pointerPos;\n        const scrollDelta = (delta / (trackHeight - vThumbSize)) * maxScroll;\n        vp.scrollTop = dragStartRef.current.scrollPos + scrollDelta;\n      } else {\n        const trackWidth = vp.clientWidth - scrollbarPadding * 2;\n        const maxScroll = vp.scrollWidth - vp.clientWidth;\n        const delta = e.clientX - dragStartRef.current.pointerPos;\n        const scrollDelta = (delta / (trackWidth - hThumbSize)) * maxScroll;\n        vp.scrollLeft = dragStartRef.current.scrollPos + scrollDelta;\n      }\n    },\n    [isDragging, scrollbarPadding, vThumbSize, hThumbSize]\n  );\n\n  const handleThumbPointerUp = useCallback(() => {\n    setIsDragging(false);\n    dragAxisRef.current = null;\n    setDragAxis(null);\n  }, []);\n\n  // Track click handler\n  const handleTrackClick = useCallback(\n    (axis: 'vertical' | 'horizontal', e: React.MouseEvent) => {\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      const trackRect = (\n        e.currentTarget as HTMLElement\n      ).getBoundingClientRect();\n\n      if (axis === 'vertical') {\n        const clickRatio = (e.clientY - trackRect.top) / trackRect.height;\n        vp.scrollTop = clickRatio * (vp.scrollHeight - vp.clientHeight);\n      } else {\n        const clickRatio = (e.clientX - trackRect.left) / trackRect.width;\n        vp.scrollLeft = clickRatio * (vp.scrollWidth - vp.clientWidth);\n      }\n    },\n    []\n  );\n\n  // Keyboard scrolling for the focusable scrollbar role, mirroring the native\n  // scrollbar interaction model (arrows step, PageUp/Down page, Home/End jump).\n  const handleTrackKeyDown = useCallback(\n    (axis: 'vertical' | 'horizontal', e: React.KeyboardEvent) => {\n      const vp = viewportRef.current;\n      if (!vp) return;\n\n      const step = 40;\n      const isVertical = axis === 'vertical';\n      const page = isVertical ? vp.clientHeight : vp.clientWidth;\n      const maxScroll = isVertical\n        ? vp.scrollHeight - vp.clientHeight\n        : vp.scrollWidth - vp.clientWidth;\n      const current = isVertical ? vp.scrollTop : vp.scrollLeft;\n\n      let next: number | undefined;\n      const decKey = isVertical ? 'ArrowUp' : 'ArrowLeft';\n      const incKey = isVertical ? 'ArrowDown' : 'ArrowRight';\n\n      switch (e.key) {\n        case decKey:\n          next = current - step;\n          break;\n        case incKey:\n          next = current + step;\n          break;\n        case 'PageUp':\n          next = current - page;\n          break;\n        case 'PageDown':\n          next = current + page;\n          break;\n        case 'Home':\n          next = 0;\n          break;\n        case 'End':\n          next = maxScroll;\n          break;\n        default:\n          return;\n      }\n\n      e.preventDefault();\n      const clamped = Math.max(0, Math.min(next, maxScroll));\n      if (isVertical) {\n        vp.scrollTop = clamped;\n      } else {\n        vp.scrollLeft = clamped;\n      }\n    },\n    []\n  );\n\n  // Initial measurement once the viewport is mounted.\n  useEffect(() => {\n    if (viewportRef.current) recalculate();\n  }, [recalculate]);\n\n  useResizeObserver(viewportRef, recalculate);\n\n  // Also observe the first child so the scrollbar reacts to content growth.\n  // The child is user-supplied content with no stable ref — kept inline since\n  // useResizeObserver is single-target.\n  useEffect(() => {\n    const vp = viewportRef.current;\n    if (!vp) return;\n    const child = vp.firstElementChild;\n    if (!child || typeof ResizeObserver === 'undefined') return;\n\n    const ro = new ResizeObserver(() => {\n      recalculate();\n    });\n    ro.observe(child);\n    return () => {\n      ro.disconnect();\n    };\n  }, [recalculate]);\n\n  // Cleanup timer\n  useEffect(() => {\n    return () => {\n      if (hideTimerRef.current) {\n        clearTimeout(hideTimerRef.current);\n      }\n    };\n  }, []);\n\n  const setViewportRef = useMergedRef<HTMLDivElement>(viewportRef, externalRef);\n\n  const isScrollbarShown =\n    scrollbarVisibility === 'never' ? false : scrollbarVisibleState;\n\n  const rootInlineStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [scrollbarWidthVar]: `${scrollbarWidth}px`,\n      [scrollbarPaddingVar]: `${scrollbarPadding}px`,\n      [fadeMaskSizeVar]: `${fadeMaskHeight}px`,\n    }),\n    ...(maxHeight != null\n      ? {\n          maxHeight:\n            typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n        }\n      : undefined),\n    ...(maxWidth != null\n      ? {\n          maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n        }\n      : undefined),\n    ...style,\n  };\n\n  return (\n    <div\n      className={cx(rootStyle, autoFill && rootAutoFill, className)}\n      style={rootInlineStyle}\n      data-testid={testId}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      {...rest}\n    >\n      <div\n        ref={setViewportRef}\n        id={viewportId}\n        role=\"region\"\n        // The scroll viewport is intentionally focusable so keyboard users can\n        // scroll overflowing content with the arrow/page keys (native behavior\n        // of a focused scroll container).\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={0}\n        className={viewportRecipe({ direction })}\n        onScroll={handleScroll}\n      >\n        {children}\n      </div>\n\n      {/* Fade masks */}\n      {fadeMask && showV && (\n        <>\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskTop,\n              !atTop ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n            data-testid={testId ? `${testId}-fade-top` : undefined}\n          />\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskBottom,\n              !atBottom ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n            data-testid={testId ? `${testId}-fade-bottom` : undefined}\n          />\n        </>\n      )}\n      {fadeMask && showH && (\n        <>\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskLeft,\n              !atLeft ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n          />\n          <div\n            className={cx(\n              fadeMaskBase,\n              fadeMaskRight,\n              !atRight ? fadeMaskVisible : fadeMaskHiddenStyle\n            )}\n          />\n        </>\n      )}\n\n      {/* Vertical scrollbar */}\n      {showV && hasVOverflow && (\n        <div\n          className={cx(\n            scrollbarVertical,\n            isScrollbarShown ? scrollbarVisible : scrollbarHidden\n          )}\n          role=\"scrollbar\"\n          tabIndex={0}\n          aria-controls={viewportId}\n          aria-orientation=\"vertical\"\n          aria-valuenow={vScrollPercent}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          data-testid={testId ? `${testId}-scrollbar-v` : undefined}\n          onClick={e => {\n            handleTrackClick('vertical', e);\n          }}\n          onKeyDown={e => {\n            handleTrackKeyDown('vertical', e);\n          }}\n        >\n          <div\n            className={cx(\n              thumbBase,\n              thumbVertical,\n              isDragging && dragAxis === 'vertical' && thumbDragging\n            )}\n            style={{\n              height: `${vThumbSize}px`,\n              transform: `translateY(${vThumbOffset}px)`,\n            }}\n            onPointerDown={e => {\n              handleThumbPointerDown('vertical', e);\n            }}\n            onPointerMove={handleThumbPointerMove}\n            onPointerUp={handleThumbPointerUp}\n            data-testid={testId ? `${testId}-thumb-v` : undefined}\n          />\n        </div>\n      )}\n\n      {/* Horizontal scrollbar */}\n      {showH && hasHOverflow && (\n        <div\n          className={cx(\n            scrollbarHorizontal,\n            isScrollbarShown ? scrollbarVisible : scrollbarHidden\n          )}\n          role=\"scrollbar\"\n          tabIndex={0}\n          aria-controls={viewportId}\n          aria-orientation=\"horizontal\"\n          aria-valuenow={hScrollPercent}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          data-testid={testId ? `${testId}-scrollbar-h` : undefined}\n          onClick={e => {\n            handleTrackClick('horizontal', e);\n          }}\n          onKeyDown={e => {\n            handleTrackKeyDown('horizontal', e);\n          }}\n        >\n          <div\n            className={cx(\n              thumbBase,\n              thumbHorizontal,\n              isDragging && dragAxis === 'horizontal' && thumbDragging\n            )}\n            style={{\n              width: `${hThumbSize}px`,\n              transform: `translateX(${hThumbOffset}px)`,\n            }}\n            onPointerDown={e => {\n              handleThumbPointerDown('horizontal', e);\n            }}\n            onPointerMove={handleThumbPointerMove}\n            onPointerUp={handleThumbPointerUp}\n            data-testid={testId ? `${testId}-thumb-h` : undefined}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nScrollArea.displayName = 'ScrollArea';\n"],"names":[],"mappings":";;;;;;;;;AAmCA;AAEO;AAsBL;AACA;AACA;;;;;;;;;;;;;;AAgBA;AAGA;;;;AAIA;;AAIA;;;;;;;;;AAYA;AACE;AACA;;;;AAIE;;;AAGA;;;;AAIE;;;;;;;AAQF;;;AAGA;;;;AAIE;;;;;;;AAQF;AACA;AACA;AACA;;AAEJ;;AAGA;;;;;;AAKE;AACE;;AAGF;AACE;;;;;;;;AASJ;AAEI;AACA;AACA;AAEA;AACA;;;AAGA;;;AAGF;;AAKF;;;AAGI;AACE;AACA;;;AAGN;AAEA;AACE;;;AAEO;AACL;;;;;;;;;AAWA;AACA;;;AAGA;;;AAIA;;;;;;;;;;;;;AAeJ;AAEI;;AACA;AACA;;AAEA;AAEA;;;;AAIE;;;;;;;AAMA;;;;AAON;;AAEE;;;;;AAOE;AACA;;;AAMA;AACE;AACA;;;AAEA;AACA;;;;;;AAUF;AACA;;;AAGA;AACA;;AAEE;;AAEF;AAEA;;;AAIA;AACE;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;AACE;;AAEF;;;AAGA;;;AAGA;;;;AAKF;;AAEE;;;AAEA;;;;;;AAQqB;AAC3B;AAEA;;;;;AAME;AACA;;AACA;AACA;;AAEA;AACE;AACF;AACA;AACA;;AAEA;AACF;;;AAIE;AACE;AACE;;AAEJ;;;AAKF;AAGA;AACE;AACE;AACA;AACA;;;AAGA;AACI;AAED;;;AAGH;AACI;AACD;;AAEL;;AAGF;;;;;;AAgFU;AACF;AAEE;;;;AAYC;AAEC;AACF;AAwBA;AACF;AAEE;;;;AAYC;AAEC;;AAUd;AAEA;;"}

package/dist/esm/components/layout/Spacer/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../../../../src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACI;AAEH;AAEI;;AAEE;;AAGN;AAEI;;AAGJ;AAaF;AAGF;;"}
+{"version":3,"file":"Spacer.js","sources":["src/components/layout/Spacer/Spacer.tsx"],"sourcesContent":["'use client';\n\n// src/components/layout/Spacer/Spacer.tsx\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { spacerBase, spacerFixed, spacerFlexible } from './Spacer.css';\n\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\nexport interface SpacerBaseProps extends Omit<BaseComponent, 'children'> {\n  /**\n   * Fixed size instead of auto-expanding.\n   * When provided, spacer will have a fixed dimension instead of flexible growth.\n   *\n   * Note: In fixed mode, both width and height are set to the same value.\n   * The parent flex container's direction determines which dimension is used —\n   * the cross-axis dimension is typically overridden by `align-items: stretch`.\n   *\n   * @example \"20px\", \"1rem\", \"2em\", 40\n   */\n  size?: string | number | undefined;\n}\n\n/**\n * Props for the Spacer component with prettified type for better IntelliSense\n */\nexport type SpacerProps = Prettify<SpacerBaseProps>;\n\n/**\n * A flexible spacer component that expands to fill available space.\n *\n * Perfect for pushing elements apart in flex layouts (Stack, Flex components).\n * By default, it grows to fill available space. Can also be used with fixed size.\n *\n * @example\n * ```tsx\n * // Auto-expanding spacer (pushes elements apart)\n * <Stack direction=\"row\">\n *   <Button>Left</Button>\n *   <Spacer />\n *   <Button>Right</Button>\n * </Stack>\n *\n * // Fixed size spacer\n * <Stack direction=\"column\">\n *   <Title>Header</Title>\n *   <Spacer size=\"2rem\" />\n *   <Content>Body</Content>\n * </Stack>\n *\n * // Multiple spacers for even distribution\n * <Flex direction=\"row\">\n *   <Logo />\n *   <Spacer />\n *   <Navigation />\n *   <Spacer />\n *   <UserMenu />\n * </Flex>\n *\n * // Numeric size\n * <Stack>\n *   <Item />\n *   <Spacer size={20} />\n *   <Item />\n * </Stack>\n * ```\n */\nexport const Spacer = /*#__PURE__*/ React.memo<SpacerProps>(\n  ({ size, className, testId, style, ref, ...htmlProps }) => {\n    const sizeValue =\n      size !== undefined\n        ? typeof size === 'number'\n          ? `${size}px`\n          : size\n        : undefined;\n\n    const inlineStyle: React.CSSProperties | undefined =\n      sizeValue !== undefined\n        ? { ...style, width: sizeValue, height: sizeValue }\n        : style;\n\n    return (\n      <div\n        ref={ref}\n        className={cx(\n          spacerBase,\n          size !== undefined ? spacerFixed : spacerFlexible,\n          className\n        )}\n        data-testid={testId}\n        style={inlineStyle}\n        {...htmlProps}\n      />\n    );\n  }\n);\n\nSpacer.displayName = 'Spacer';\n"],"names":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AACI;AAEH;AAEI;;AAEE;;AAGN;AAEI;;AAGJ;AAaF;AAGF;;"}

package/dist/esm/components/layout/SplitPane/SplitPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAuBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;;;;AAQA;;;;;;;AAQE;AACD;;;;AAMD;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAGJ;AAEA;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AACF;;;;;;;AAOC;AAED;;;;;;;;AAYI;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;;AASG;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACL;;AAEJ;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;;;;;;;;AAoBM;AACD;AAEC;AACD;AAEC;AACF;AAEE;AACF;AAEE;AACF;AAEE;AACF;;AAIR;AAEA;AAWF;AAEA;;"}
+{"version":3,"file":"SplitPane.js","sources":["src/components/layout/SplitPane/SplitPane.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useLatest } from '@/hooks/useLatest';\nimport { useResizeObserver } from '@/hooks/useResizeObserver';\nimport { cx } from '@/utils/cx';\n\nimport {\n  containerRecipe,\n  dividerRecipe,\n  dividerSizeVar,\n} from './SplitPane.css';\n\nimport type { PanelConfig, SplitPaneProps } from './SplitPane.types';\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n/**\n * Parse a PanelConfig defaultSize into a pixel value given the available space.\n * Returns `undefined` when no explicit default is given.\n */\nfunction parseDefaultSize(\n  defaultSize: PanelConfig['defaultSize'],\n  availableSpace: number\n): number | undefined {\n  if (defaultSize === undefined) return undefined;\n  if (typeof defaultSize === 'number') return defaultSize;\n  // Handle percentage strings like \"30%\"\n  if (defaultSize.endsWith('%')) {\n    const pct = parseFloat(defaultSize);\n    if (!Number.isNaN(pct)) return (pct / 100) * availableSpace;\n  }\n  return undefined;\n}\n\n/**\n * Calculate initial sizes from panel configs and available space.\n */\nfunction computeInitialSizes(\n  panelCount: number,\n  panels: PanelConfig[],\n  availableSpace: number\n): number[] {\n  const sizes: (number | undefined)[] = Array.from(\n    { length: panelCount },\n    (_, i) => {\n      const cfg = panels[i];\n      if (!cfg) return undefined;\n      return parseDefaultSize(cfg.defaultSize, availableSpace);\n    }\n  );\n\n  let allocated = 0;\n  let unspecifiedCount = 0;\n  for (let i = 0; i < panelCount; i++) {\n    if (sizes[i] !== undefined) {\n      allocated += sizes[i] as number;\n    } else {\n      unspecifiedCount++;\n    }\n  }\n\n  const remaining = Math.max(0, availableSpace - allocated);\n  const perUnspecified =\n    unspecifiedCount > 0 ? remaining / unspecifiedCount : 0;\n\n  return sizes.map(s => s ?? perUnspecified);\n}\n\n/**\n * Clamp sizes to min/max constraints in the panel configs.\n */\nfunction clampSizes(\n  sizes: number[],\n  panels: PanelConfig[],\n  collapsed?: Set<number>\n): number[] {\n  return sizes.map((size, i) => {\n    const cfg = panels[i];\n    if (!cfg) return size;\n    let clamped = size;\n    if (cfg.minSize !== undefined && !collapsed?.has(i))\n      clamped = Math.max(clamped, cfg.minSize);\n    if (cfg.maxSize !== undefined) clamped = Math.min(clamped, cfg.maxSize);\n    return clamped;\n  });\n}\n\n/**\n * Snap panel sizes to whole pixels while preserving total width/height.\n * This avoids sub-pixel rounding gaps (often visible as a 1-2px seam).\n */\nfunction snapSizesToWholePixels(\n  sizes: number[],\n  panels: PanelConfig[],\n  availableSpace: number\n): number[] {\n  const targetTotal = Math.max(0, Math.round(availableSpace));\n  const floored = sizes.map(size => Math.max(0, Math.floor(size)));\n  const fractions = sizes.map((size, i) => ({\n    index: i,\n    fraction: Math.max(0, size - (floored[i] ?? 0)),\n  }));\n  const snapped = [...floored];\n\n  let delta = targetTotal - snapped.reduce((sum, size) => sum + size, 0);\n\n  if (delta > 0) {\n    const growOrder = [...fractions].sort((a, b) => {\n      if (b.fraction !== a.fraction) return b.fraction - a.fraction;\n      return b.index - a.index;\n    });\n\n    while (delta > 0) {\n      let changed = false;\n      for (const { index } of growOrder) {\n        if (delta <= 0) break;\n        const max = panels[index]?.maxSize ?? Infinity;\n        const current = snapped[index] ?? 0;\n        if (current + 1 > max) continue;\n        snapped[index] = current + 1;\n        delta -= 1;\n        changed = true;\n      }\n      if (!changed) break;\n    }\n  } else if (delta < 0) {\n    delta = -delta;\n    const shrinkOrder = [...fractions].sort((a, b) => {\n      if (a.fraction !== b.fraction) return a.fraction - b.fraction;\n      return b.index - a.index;\n    });\n\n    while (delta > 0) {\n      let changed = false;\n      for (const { index } of shrinkOrder) {\n        if (delta <= 0) break;\n        const min = panels[index]?.minSize ?? 0;\n        const current = snapped[index] ?? 0;\n        if (current - 1 < min) continue;\n        snapped[index] = current - 1;\n        delta -= 1;\n        changed = true;\n      }\n      if (!changed) break;\n    }\n  }\n\n  return snapped;\n}\n\n/**\n * Ensures panel sizes fill the available space exactly.\n * Handles small floating-point drift and rounding leftovers by distributing\n * the remaining pixels across panels that can still grow/shrink.\n */\nfunction reconcileSizesToAvailableSpace(\n  sizes: number[],\n  panels: PanelConfig[],\n  availableSpace: number,\n  collapsed?: Set<number>\n): number[] {\n  const adjusted = clampSizes(sizes, panels, collapsed);\n  let remaining =\n    availableSpace - adjusted.reduce((sum, size) => sum + size, 0);\n\n  // Ignore tiny floating-point noise.\n  if (Math.abs(remaining) < 0.01) {\n    return snapSizesToWholePixels(adjusted, panels, availableSpace);\n  }\n\n  // Try to consume remainder from right to left so right-most panel\n  // naturally absorbs visual rounding leftovers.\n  for (let i = adjusted.length - 1; i >= 0; i--) {\n    if (Math.abs(remaining) < 0.01) break;\n\n    const cfg = panels[i];\n    const min = cfg?.minSize ?? 0;\n    const max = cfg?.maxSize ?? Infinity;\n    const current = adjusted[i] ?? 0;\n\n    if (remaining > 0) {\n      const room = max - current;\n      if (room <= 0) continue;\n      const delta = Math.min(room, remaining);\n      adjusted[i] = current + delta;\n      remaining -= delta;\n      continue;\n    }\n\n    const room = current - min;\n    if (room <= 0) continue;\n    const delta = Math.min(room, -remaining);\n    adjusted[i] = current - delta;\n    remaining += delta;\n  }\n\n  return snapSizesToWholePixels(adjusted, panels, availableSpace);\n}\n\nconst KEYBOARD_STEP = 10;\nconst KEYBOARD_LARGE_STEP = 50;\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * A resizable split-pane layout component.\n *\n * Divides space between two or more child panels with draggable dividers.\n * Supports horizontal and vertical directions, controlled and uncontrolled\n * modes, collapsible panels, and keyboard-accessible dividers.\n *\n * @example\n * ```tsx\n * <SplitPane direction=\"horizontal\">\n *   <SplitPanePanel>Left</SplitPanePanel>\n *   <SplitPanePanel>Right</SplitPanePanel>\n * </SplitPane>\n * ```\n */\nexport const SplitPane: React.FC<SplitPaneProps> = ({\n  direction = 'horizontal',\n  panels: panelConfigs = [],\n  sizes: controlledSizes,\n  dividerSize = 4,\n  children,\n  onResize,\n  onResizeEnd,\n  onCollapseChange,\n  className,\n  testId,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const [internalSizes, setInternalSizes] = useState<number[]>([]);\n  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);\n  const collapsedRef = useRef<Set<number>>(new Set());\n\n  // Refs for drag tracking\n  const dragStartPos = useRef(0);\n  const dragStartSizes = useRef<number[]>([]);\n\n  // Extract panel children\n  const panelChildren = React.Children.toArray(children);\n  const panelCount = panelChildren.length;\n\n  // Which sizes array to use\n  const isControlled = controlledSizes !== undefined;\n  const sizes = isControlled ? controlledSizes : internalSizes;\n\n  // Stable reference to panelConfigs for use in effects/callbacks. The\n  // serialized key is the deliberate deep-equality dependency, so panelConfigs\n  // itself is intentionally absent from the array.\n  const panelConfigsKey = JSON.stringify(panelConfigs);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const stablePanelConfigs = useMemo(() => panelConfigs, [panelConfigsKey]);\n\n  // Keep a ref so the ResizeObserver callback always reads latest values.\n  const latestRef = useLatest({\n    panelCount,\n    dividerSize,\n    direction,\n    isControlled,\n    panelConfigs: stablePanelConfigs,\n  });\n\n  // -----------------------------------------------------------------------\n  // Initial size calculation + ResizeObserver\n  // -----------------------------------------------------------------------\n\n  const recalculate = useCallback(() => {\n    const container = containerRef.current;\n    const {\n      panelCount: count,\n      dividerSize: dSize,\n      direction: dir,\n      isControlled: ctrl,\n      panelConfigs: cfgs,\n    } = latestRef.current;\n    if (!container || count < 2) return;\n\n    const totalDividerSpace = (count - 1) * dSize;\n    const containerDim =\n      dir === 'horizontal' ? container.clientWidth : container.clientHeight;\n    const availableSpace = Math.max(0, containerDim - totalDividerSpace);\n\n    if (!ctrl) {\n      const collapsed = collapsedRef.current;\n      setInternalSizes(prev => {\n        if (prev.length === count && prev.length > 0) {\n          // Proportionally redistribute on container resize\n          const prevTotal = prev.reduce((a, b) => a + b, 0);\n          if (prevTotal <= 0) {\n            return reconcileSizesToAvailableSpace(\n              computeInitialSizes(count, cfgs, availableSpace),\n              cfgs,\n              availableSpace,\n              collapsed\n            );\n          }\n          const ratio = availableSpace / prevTotal;\n          const newSizes = prev.map((s, i) =>\n            collapsed.has(i) ? 0 : s * ratio\n          );\n          return reconcileSizesToAvailableSpace(\n            newSizes,\n            cfgs,\n            availableSpace,\n            collapsed\n          );\n        }\n        return reconcileSizesToAvailableSpace(\n          computeInitialSizes(count, cfgs, availableSpace),\n          cfgs,\n          availableSpace,\n          collapsed\n        );\n      });\n    }\n    // latestRef is a stable useLatest ref; listed to satisfy the rule.\n  }, [latestRef]);\n\n  const getAvailableSpace = useCallback((): number | null => {\n    const container = containerRef.current;\n    if (!container || panelCount < 2) return null;\n\n    const containerDim =\n      direction === 'horizontal'\n        ? container.clientWidth\n        : container.clientHeight;\n    if (containerDim <= 0) return null;\n    const totalDividerSpace = (panelCount - 1) * dividerSize;\n    return Math.max(0, containerDim - totalDividerSpace);\n  }, [direction, dividerSize, panelCount]);\n\n  useEffect(() => {\n    recalculate();\n  }, [\n    recalculate,\n    panelCount,\n    dividerSize,\n    direction,\n    isControlled,\n    stablePanelConfigs,\n  ]);\n\n  useResizeObserver(containerRef, recalculate);\n\n  // -----------------------------------------------------------------------\n  // Pointer resize handlers\n  // -----------------------------------------------------------------------\n\n  const handlePointerDown = useCallback(\n    (dividerIndex: number, e: React.PointerEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n\n      setDraggingIndex(dividerIndex);\n      dragStartPos.current = direction === 'horizontal' ? e.clientX : e.clientY;\n      dragStartSizes.current = [...sizes];\n    },\n    [direction, sizes]\n  );\n\n  const handlePointerMove = useCallback(\n    (dividerIndex: number, e: React.PointerEvent<HTMLDivElement>) => {\n      if (draggingIndex !== dividerIndex) return;\n\n      const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;\n      const delta = currentPos - dragStartPos.current;\n\n      const startSizes = dragStartSizes.current;\n      const leftIndex = dividerIndex;\n      const rightIndex = dividerIndex + 1;\n\n      const startLeft = startSizes[leftIndex] ?? 0;\n      const startRight = startSizes[rightIndex] ?? 0;\n\n      const leftCfg = panelConfigs[leftIndex];\n      const rightCfg = panelConfigs[rightIndex];\n\n      const leftMin = leftCfg?.minSize ?? 0;\n      const leftMax = leftCfg?.maxSize ?? Infinity;\n      const rightMin = rightCfg?.minSize ?? 0;\n      const rightMax = rightCfg?.maxSize ?? Infinity;\n\n      const totalSize = startLeft + startRight;\n\n      // Raw sizes (unclamped) — used for collapse threshold detection\n      const rawLeft = startLeft + delta;\n      const rawRight = startRight - delta;\n\n      // Clamp to [0, totalSize] to prevent overflow\n      let newLeft = Math.max(0, Math.min(totalSize, rawLeft));\n      let newRight = totalSize - newLeft;\n\n      // Collapse / expand handling\n      let leftCollapsed = false;\n      let rightCollapsed = false;\n\n      if (leftCfg?.collapsible) {\n        const threshold = leftCfg.collapseThreshold ?? leftMin / 2;\n        if (rawLeft < threshold) {\n          leftCollapsed = true;\n          if (startLeft > 0) {\n            onCollapseChange?.(leftIndex, true);\n          }\n        } else if (startLeft === 0 && rawLeft >= leftMin) {\n          // Expanding from collapsed state\n          onCollapseChange?.(leftIndex, false);\n        }\n      }\n\n      if (rightCfg?.collapsible) {\n        const threshold = rightCfg.collapseThreshold ?? rightMin / 2;\n        if (rawRight < threshold) {\n          rightCollapsed = true;\n          if (startRight > 0) {\n            onCollapseChange?.(rightIndex, true);\n          }\n        } else if (startRight === 0 && rawRight >= rightMin) {\n          // Expanding from collapsed state\n          onCollapseChange?.(rightIndex, false);\n        }\n      }\n\n      // Apply collapse or min/max with coupled clamping\n      if (leftCollapsed) {\n        newLeft = 0;\n        newRight = totalSize;\n      } else if (rightCollapsed) {\n        newRight = 0;\n        newLeft = totalSize;\n      } else {\n        // Clamp left, then recompute right\n        newLeft = Math.max(leftMin, Math.min(leftMax, newLeft));\n        newRight = totalSize - newLeft;\n\n        // If right violates its constraints, clamp it and recompute left\n        if (newRight < rightMin) {\n          newRight = rightMin;\n          newLeft = totalSize - newRight;\n        } else if (newRight > rightMax) {\n          newRight = rightMax;\n          newLeft = totalSize - newRight;\n        }\n      }\n\n      // Update collapsed tracking\n      const collapsed = new Set(collapsedRef.current);\n      if (leftCollapsed) {\n        collapsed.add(leftIndex);\n      } else {\n        collapsed.delete(leftIndex);\n      }\n      if (rightCollapsed) {\n        collapsed.add(rightIndex);\n      } else {\n        collapsed.delete(rightIndex);\n      }\n      collapsedRef.current = collapsed;\n\n      const newSizes = [...startSizes];\n      newSizes[leftIndex] = newLeft;\n      newSizes[rightIndex] = newRight;\n      const availableSpace = getAvailableSpace();\n      const nextSizes =\n        availableSpace !== null && availableSpace > 0\n          ? reconcileSizesToAvailableSpace(\n              newSizes,\n              panelConfigs,\n              availableSpace,\n              collapsed\n            )\n          : newSizes;\n\n      if (!isControlled) {\n        setInternalSizes(nextSizes);\n      }\n      onResize?.(nextSizes);\n    },\n    [\n      draggingIndex,\n      direction,\n      getAvailableSpace,\n      panelConfigs,\n      isControlled,\n      onResize,\n      onCollapseChange,\n    ]\n  );\n\n  const handlePointerUp = useCallback(\n    (_dividerIndex: number, e: React.PointerEvent<HTMLDivElement>) => {\n      (e.target as HTMLElement).releasePointerCapture(e.pointerId);\n      setDraggingIndex(null);\n\n      if (isControlled) {\n        onResizeEnd?.(controlledSizes);\n      } else {\n        onResizeEnd?.(internalSizes);\n      }\n    },\n    [isControlled, controlledSizes, internalSizes, onResizeEnd]\n  );\n\n  // -----------------------------------------------------------------------\n  // Keyboard handler on dividers\n  // -----------------------------------------------------------------------\n\n  const handleKeyDown = useCallback(\n    (dividerIndex: number, e: React.KeyboardEvent<HTMLDivElement>) => {\n      const isHorizontal = direction === 'horizontal';\n      let delta = 0;\n\n      const positiveKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n      const negativeKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n      if (e.key === positiveKey) {\n        delta = e.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;\n      } else if (e.key === negativeKey) {\n        delta = -(e.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP);\n      } else if (e.key === 'Enter') {\n        // Toggle collapse on the left panel if collapsible\n        const leftCfg = panelConfigs[dividerIndex];\n        if (leftCfg?.collapsible) {\n          e.preventDefault();\n          const currentSizes = [...sizes];\n          const leftIndex = dividerIndex;\n          const rightIndex = dividerIndex + 1;\n\n          const curLeft = currentSizes[leftIndex] ?? 0;\n          const curRight = currentSizes[rightIndex] ?? 0;\n\n          if (curLeft === 0) {\n            // Expand: restore to minSize\n            const restoreSize = leftCfg.minSize ?? 100;\n            currentSizes[leftIndex] = restoreSize;\n            currentSizes[rightIndex] = curRight - restoreSize;\n            collapsedRef.current = new Set(\n              [...collapsedRef.current].filter(i => i !== leftIndex)\n            );\n            onCollapseChange?.(leftIndex, false);\n          } else {\n            // Collapse\n            currentSizes[rightIndex] = curRight + curLeft;\n            currentSizes[leftIndex] = 0;\n            collapsedRef.current = new Set([\n              ...collapsedRef.current,\n              leftIndex,\n            ]);\n            onCollapseChange?.(leftIndex, true);\n          }\n\n          if (!isControlled) {\n            setInternalSizes(currentSizes);\n          }\n          onResize?.(currentSizes);\n          onResizeEnd?.(currentSizes);\n        }\n        return;\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n\n      const leftIndex = dividerIndex;\n      const rightIndex = dividerIndex + 1;\n\n      const newSizes = [...sizes];\n      let left = (newSizes[leftIndex] ?? 0) + delta;\n      let right = (newSizes[rightIndex] ?? 0) - delta;\n\n      // Clamp\n      const leftCfg = panelConfigs[leftIndex];\n      const rightCfg = panelConfigs[rightIndex];\n      const leftMin = leftCfg?.minSize ?? 0;\n      const leftMax = leftCfg?.maxSize ?? Infinity;\n      const rightMin = rightCfg?.minSize ?? 0;\n      const rightMax = rightCfg?.maxSize ?? Infinity;\n\n      if (left < leftMin) {\n        right += left - leftMin;\n        left = leftMin;\n      }\n      if (left > leftMax) {\n        right += left - leftMax;\n        left = leftMax;\n      }\n      if (right < rightMin) {\n        left += right - rightMin;\n        right = rightMin;\n      }\n      if (right > rightMax) {\n        left += right - rightMax;\n        right = rightMax;\n      }\n\n      newSizes[leftIndex] = left;\n      newSizes[rightIndex] = right;\n      const availableSpace = getAvailableSpace();\n      const nextSizes =\n        availableSpace !== null && availableSpace > 0\n          ? reconcileSizesToAvailableSpace(\n              newSizes,\n              panelConfigs,\n              availableSpace\n            )\n          : newSizes;\n\n      if (!isControlled) {\n        setInternalSizes(nextSizes);\n      }\n      onResize?.(nextSizes);\n    },\n    [\n      direction,\n      sizes,\n      getAvailableSpace,\n      panelConfigs,\n      isControlled,\n      onResize,\n      onResizeEnd,\n      onCollapseChange,\n    ]\n  );\n\n  // -----------------------------------------------------------------------\n  // Merge refs\n  // -----------------------------------------------------------------------\n\n  const setContainerRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      containerRef.current = node;\n      if (typeof ref === 'function') {\n        ref(node);\n      } else if (ref && typeof ref === 'object') {\n        ref.current = node;\n      }\n    },\n    [ref]\n  );\n\n  // -----------------------------------------------------------------------\n  // Render\n  // -----------------------------------------------------------------------\n\n  const elements: React.ReactNode[] = [];\n\n  panelChildren.forEach((child, i) => {\n    // Panel wrapper with controlled sizing\n    const panelSize = sizes[i] ?? 0;\n    const panelStyle: React.CSSProperties = {\n      flex: `0 0 ${panelSize}px`,\n      overflow: panelSize === 0 ? 'hidden' : undefined,\n      [direction === 'horizontal' ? 'width' : 'height']: `${panelSize}px`,\n      minWidth: direction === 'horizontal' ? 0 : undefined,\n      minHeight: direction === 'vertical' ? 0 : undefined,\n    };\n\n    elements.push(\n      <div\n        key={`panel-${i}`}\n        style={panelStyle}\n        data-splitpane-panel-wrapper=\"\"\n      >\n        {child}\n      </div>\n    );\n\n    // Add divider between panels\n    if (i < panelCount - 1) {\n      const leftSize = sizes[i] ?? 0;\n      const leftCfg = panelConfigs[i];\n\n      elements.push(\n        // Focusable window-splitter: a separator with aria-valuenow that the\n        // user can move with the keyboard is an interactive separator per the\n        // WAI-ARIA window splitter pattern, which jsx-a11y does not model.\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n        <div\n          key={`divider-${i}`}\n          role=\"separator\"\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n          tabIndex={0}\n          aria-orientation={\n            direction === 'horizontal' ? 'vertical' : 'horizontal'\n          }\n          aria-valuenow={Math.round(leftSize)}\n          aria-valuemin={leftCfg?.minSize ?? 0}\n          aria-valuemax={leftCfg?.maxSize ?? undefined}\n          aria-label=\"Panel divider\"\n          data-testid={testId ? `${testId}-divider-${i}` : undefined}\n          className={dividerRecipe({\n            direction,\n            isDragging: draggingIndex === i || undefined,\n          })}\n          style={assignInlineVars({\n            [dividerSizeVar]: `${dividerSize}px`,\n          })}\n          onPointerDown={e => {\n            handlePointerDown(i, e);\n          }}\n          onPointerMove={e => {\n            handlePointerMove(i, e);\n          }}\n          onPointerUp={e => {\n            handlePointerUp(i, e);\n          }}\n          onKeyDown={e => {\n            handleKeyDown(i, e);\n          }}\n        />\n      );\n    }\n  });\n\n  return (\n    <div\n      ref={setContainerRef}\n      className={cx(containerRecipe({ direction }), className)}\n      data-testid={testId}\n      style={style}\n      {...htmlProps}\n    >\n      {elements}\n    </div>\n  );\n};\n\nSplitPane.displayName = 'SplitPane';\n"],"names":[],"mappings":";;;;;;;;;AAuBA;AACA;AACA;AAEA;;;AAGG;AACH;;AAIiC;;AACM;;AAErC;AACE;AACA;AAAwB;;AAE1B;AACF;AAEA;;AAEG;AACH;AAKE;AAGI;AACA;AAAU;;AAEZ;;;AAKF;AACE;AACE;;;AAEA;;;AAIJ;AACA;AAGA;AACF;AAEA;;AAEG;AACH;;AAMI;AACA;AAAU;;AAEV;;AAEA;;AACA;AACF;AACF;AAEA;;;AAGG;AACH;AAKE;;AAEA;AACE;AACA;AACD;AACD;;AAIA;AACE;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAEG;;AAEL;AACE;AAA+B;AAC/B;AACF;AAEA;;AAEE;;;;;AAIE;;AACA;;;;AAIF;;;;AAIJ;AACF;AAEA;;;;AAIG;AACH;;;;;;;;;AAiBE;AACE;;AAEA;AACA;AACA;;AAGA;AACE;;;;AAGA;;;;AAKF;;;;AAGA;;;;AAKJ;AAEA;AACA;AAEA;AACA;AACA;AAEA;;;;;;;;;;;;;;AAcG;;AAgBD;;;;;AAMA;AACA;;;AAIA;;AAGA;;;;;;;AAQA;;;;;;;AAQE;AACD;;;;AAMD;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAGJ;AAEA;AACE;AACA;AAAkC;AAElC;;AAGI;;AACmB;;;;;AAMvB;AACF;;;;;;;AAOC;AAED;;;;;;;;AAYI;AACA;AACF;;;;AAQE;AACA;AAEA;;AAEA;;;AAKA;AACA;AAEA;AACA;AACA;AACA;AAEA;;AAGA;AACA;;AAGA;AACA;;;;AAMA;;AAEE;;AAEE;AACE;;;;;AAIF;;;AAIJ;;AAEE;;AAEE;AACE;;;;;AAIF;;;;;;;;;;;;;;AAaF;AACA;;AAGA;;AAEE;;AACK;;AAEL;;;;;;AAOF;;;AAEA;;;AAGA;;;AAEA;;AAEF;AAEA;AACA;AACA;AACA;;;;;;;AAcA;AACF;;;;;;;;AASC;;;;;AASG;;;AAEA;;;;;;;AAYF;;;;AAMA;AACE;;AACK;AACL;;AACK;;AAEL;AACA;;AAEE;;AAEA;;;AAKA;;AAEE;AACA;AACA;;AAIA;;;;AAGA;AACA;AACA;;;AAGC;AACD;;;;;AAMF;AACA;;;;;;;;;AAUJ;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAGF;AACE;;;AAIF;AACA;AACA;;;;;;;AAaA;AACF;;;;;;;;;AAUC;;;;AAOH;AAEI;AACA;;;AAEO;AACL;;AAEJ;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;;;;;;;;AAoBM;AACD;AAEC;AACD;AAEC;AACF;AAEE;AACF;AAEE;AACF;AAEE;AACF;;AAIR;AAEA;AAWF;AAEA;;"}

package/dist/esm/components/layout/SplitPane/SplitPanePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPanePanel.js","sources":["../../../../../../src/components/layout/SplitPane/SplitPanePanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAUA;;;;;;;;;;;;;AAaG;;AASD;AAYF;AAEA;;"}
+{"version":3,"file":"SplitPanePanel.js","sources":["src/components/layout/SplitPane/SplitPanePanel.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { panelStyle } from './SplitPane.css';\n\nimport type { SplitPanePanelProps } from './SplitPane.types';\n\n/**\n * A panel within a SplitPane layout.\n *\n * Simple wrapper that renders its children with `overflow: auto`.\n * The parent SplitPane manages its sizing.\n *\n * @example\n * ```tsx\n * <SplitPane>\n *   <SplitPanePanel>Left content</SplitPanePanel>\n *   <SplitPanePanel>Right content</SplitPanePanel>\n * </SplitPane>\n * ```\n */\nexport const SplitPanePanel: React.FC<SplitPanePanelProps> = ({\n  children,\n  className,\n  testId,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  return (\n    <div\n      ref={ref}\n      className={cx(panelStyle, className)}\n      data-testid={testId}\n      data-splitpane-panel=\"\"\n      style={style}\n      {...htmlProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nSplitPanePanel.displayName = 'SplitPanePanel';\n"],"names":[],"mappings":";;;;;AAUA;;;;;;;;;;;;;AAaG;;AASD;AAYF;AAEA;;"}

package/dist/esm/components/layout/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../../../../../src/components/layout/Stack/Stack.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAyIA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DG;AACI;AAmBL;AACE;;;AAGA;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAY;;;;;;AAWJ;AACA;AACD;AAWT;AAEA;;"}
+{"version":3,"file":"Stack.js","sources":["src/components/layout/Stack/Stack.tsx"],"sourcesContent":["'use client';\n\n// src/components/layout/Stack/Stack.tsx\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { stackRecipe, gapVar } from './Stack.css';\n\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\n\n/**\n * Stack direction options\n */\nexport type StackDirection = 'row' | 'column';\n\n/**\n * Stack wrap options\n */\nexport type StackWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\n\n/**\n * Justify content options for main axis alignment\n */\nexport type StackJustify =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\n/**\n * Align items options for cross axis alignment\n */\nexport type StackAlign =\n  | 'flex-start'\n  | 'flex-end'\n  | 'center'\n  | 'stretch'\n  | 'baseline';\n\n/**\n * Spacing multiplier (0-8) based on theme spacing unit\n */\nexport type StackSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\n\nexport interface StackBaseProps extends Omit<BaseComponent, 'children'> {\n  /**\n   * Stack content - any React elements\n   */\n  children: React.ReactNode;\n\n  /**\n   * Stack direction - controls main axis orientation\n   * - `row`: Left to right (horizontal)\n   * - `column`: Top to bottom (vertical)\n   * @default \"column\"\n   */\n  direction?: StackDirection | undefined;\n\n  /**\n   * Responsive stack direction\n   * Allows different directions at different breakpoints\n   * @example direction=\"column\" md=\"row\" // Vertical on mobile, horizontal on desktop\n   */\n  sm?: StackDirection | undefined;\n  md?: StackDirection | undefined;\n  lg?: StackDirection | undefined;\n  xl?: StackDirection | undefined;\n\n  /**\n   * Stack wrap behavior\n   * - `nowrap`: Items stay on one line (default)\n   * - `wrap`: Items wrap to new lines as needed\n   * - `wrap-reverse`: Items wrap in reverse order\n   * @default \"nowrap\"\n   */\n  wrap?: StackWrap | undefined;\n\n  /**\n   * Whether stack should expand to fill available space\n   * - For row direction: takes 100% width\n   * - For column direction: takes 100% height\n   * @default false\n   */\n  expand?: boolean;\n\n  /**\n   * Spacing between stack items (multiplier of base spacing unit)\n   * - `0`: No spacing (0px)\n   * - `1`: 1x base unit (4px)\n   * - `2`: 2x base unit (8px)\n   * - `3`: 3x base unit (12px)\n   * - `4`: 4x base unit (16px)\n   * @default 0\n   */\n  spacing?: StackSpacing | undefined;\n\n  /**\n   * Custom gap override (CSS value)\n   * Overrides spacing prop if provided\n   * @example \"16px\", \"1rem\", \"2rem 1rem\"\n   */\n  customGap?: string | number | undefined;\n\n  /**\n   * Justify content - distributes space along main axis\n   * - `flex-start`: Items packed to start (default)\n   * - `flex-end`: Items packed to end\n   * - `center`: Items centered\n   * - `space-between`: Even space between items\n   * - `space-around`: Even space around items\n   * - `space-evenly`: Equal space between and around items\n   * @default \"flex-start\"\n   */\n  justify?: StackJustify | undefined;\n\n  /**\n   * Align items - aligns items along cross axis\n   * - `flex-start`: Items align to start of cross axis (default)\n   * - `flex-end`: Items align to end of cross axis\n   * - `center`: Items centered on cross axis\n   * - `stretch`: Items stretch to fill container\n   * - `baseline`: Items align to text baseline\n   * @default \"flex-start\"\n   */\n  align?: StackAlign | undefined;\n}\n\n/**\n * Props for the Stack component with prettified type for better IntelliSense\n */\nexport type StackProps = Prettify<StackBaseProps>;\n\n/** Base spacing unit in px */\nconst SPACING_UNIT = 4;\n\n/**\n * Calculate gap value based on spacing multiplier\n */\nconst getGapValue = (\n  spacing: StackSpacing,\n  customGap?: string | number\n): string => {\n  if (customGap !== undefined) {\n    return typeof customGap === 'number' ? `${customGap}px` : customGap;\n  }\n  return `${spacing * SPACING_UNIT}px`;\n};\n\n/**\n * A flexible stacking component for arranging elements vertically or horizontally.\n *\n * Built on flexbox with consistent spacing and alignment options. Perfect for\n * simple layouts where you need to stack elements with controlled spacing.\n * Use Grid or Flex components for more complex layout requirements.\n *\n * @example\n * ```tsx\n * // Basic vertical stack\n * <Stack spacing={2}>\n *   <Card>Item 1</Card>\n *   <Card>Item 2</Card>\n *   <Card>Item 3</Card>\n * </Stack>\n *\n * // Horizontal stack with full width\n * <Stack direction=\"row\" expand spacing={3} justify=\"space-between\">\n *   <Button>Cancel</Button>\n *   <Button variant=\"filled\">Save</Button>\n * </Stack>\n *\n * // Responsive stack\n * <Stack\n *   direction=\"column\"\n *   md=\"row\"\n *   spacing={2}\n *   align=\"center\"\n * >\n *   <Logo />\n *   <Navigation />\n *   <UserMenu />\n * </Stack>\n *\n * // Centered content\n * <Stack\n *   direction=\"column\"\n *   expand\n *   justify=\"center\"\n *   align=\"center\"\n *   spacing={4}\n * >\n *   <Icon />\n *   <Title>Welcome</Title>\n *   <Button>Get Started</Button>\n * </Stack>\n *\n * // Wrapping horizontal stack\n * <Stack\n *   direction=\"row\"\n *   wrap=\"wrap\"\n *   spacing={2}\n *   justify=\"center\"\n * >\n *   <Tag>React</Tag>\n *   <Tag>TypeScript</Tag>\n *   <Tag>CSS</Tag>\n * </Stack>\n * ```\n */\nexport const Stack: React.FC<StackProps> = ({\n  children,\n  direction = 'column',\n  sm,\n  md,\n  lg,\n  xl,\n  wrap = 'nowrap',\n  expand = false,\n  spacing = 0,\n  customGap,\n  justify = 'flex-start',\n  align = 'flex-start',\n  className,\n  testId,\n  style,\n  ref,\n  ...htmlProps\n}) => {\n  const mergedStyle: React.CSSProperties = {\n    ...assignInlineVars({\n      [gapVar]: getGapValue(spacing, customGap),\n    }),\n    ...style,\n  };\n\n  // Build data attributes for responsive direction overrides\n  const dataAttrs: Record<string, string> = {};\n  if (sm) dataAttrs['data-sm-dir'] = sm;\n  if (md) dataAttrs['data-md-dir'] = md;\n  if (lg) dataAttrs['data-lg-dir'] = lg;\n  if (xl) dataAttrs['data-xl-dir'] = xl;\n  if (expand) dataAttrs['data-expand'] = 'true';\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        stackRecipe({\n          direction,\n          wrap,\n          justify,\n          align,\n          expandRow: expand && direction === 'row' ? true : undefined,\n          expandColumn: expand && direction === 'column' ? true : undefined,\n        }),\n        className\n      )}\n      data-testid={testId}\n      style={mergedStyle}\n      {...dataAttrs}\n      {...htmlProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nStack.displayName = 'Stack';\n"],"names":[],"mappings":";;;;;;AAyIA;AACA;AAEA;;AAEG;AACH;AAIE;AACE;;AAEF;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DG;AACI;AAmBL;AACE;;;AAGA;;;;AAKF;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAQ;AACR;AAAY;;;;;;AAWJ;AACA;AACD;AAWT;AAEA;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbEllipsis.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbEllipsis.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbEllipsis.js","sources":["src/components/navigation/Breadcrumbs/BreadcrumbEllipsis.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { Tooltip } from '@/components/primitives';\nimport { cx } from '@/utils/cx';\n\nimport {\n  breadcrumbEllipsisButtonStyle,\n  breadcrumbEllipsisStyle,\n  breadcrumbEllipsisTextStyle,\n} from './Breadcrumbs.css';\n\nimport type { BreadcrumbEllipsisProps } from './Breadcrumbs.types';\n\n/**\n * Ellipsis placeholder for collapsed breadcrumb segments.\n *\n * @example\n * ```tsx\n * <BreadcrumbEllipsis onClick={expand} tooltip=\"src / components\" />\n * ```\n */\nexport const BreadcrumbEllipsis =\n  /*#__PURE__*/ React.memo<BreadcrumbEllipsisProps>(\n    ({ onClick, tooltip, className, style, testId, ref, ...rest }) => {\n      const ellipsis = onClick ? (\n        <button\n          type=\"button\"\n          className={breadcrumbEllipsisButtonStyle}\n          onClick={onClick}\n          aria-label=\"Show all breadcrumbs\"\n        >\n          …\n        </button>\n      ) : (\n        <span className={breadcrumbEllipsisTextStyle}>…</span>\n      );\n\n      return (\n        <li\n          ref={ref as React.Ref<HTMLLIElement>}\n          className={cx(breadcrumbEllipsisStyle, className)}\n          style={style}\n          data-testid={testId}\n          {...rest}\n        >\n          {tooltip ? (\n            <Tooltip title={tooltip} delay={300}>\n              {ellipsis}\n            </Tooltip>\n          ) : (\n            ellipsis\n          )}\n        </li>\n      );\n    }\n  );\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA;;;;;;;AAOG;;AAED;AAEI;;AA8BF;AAGJ;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAeH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAuBJ;AAGF;;"}
+{"version":3,"file":"BreadcrumbItem.js","sources":["src/components/navigation/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { Tooltip } from '@/components/primitives';\nimport { cx } from '@/utils/cx';\n\nimport {\n  breadcrumbContentRecipe,\n  breadcrumbIconStyle,\n  breadcrumbItemStyle,\n  breadcrumbLabelStyle,\n} from './Breadcrumbs.css';\n\nimport type { BreadcrumbItemProps } from './Breadcrumbs.types';\n\nfunction getTruncatedLabel(children: React.ReactNode, maxLength?: number) {\n  if (\n    typeof children !== 'string' ||\n    !maxLength ||\n    children.length <= maxLength\n  ) {\n    return { label: children, fullLabel: undefined };\n  }\n\n  const endIndex = Math.max(0, maxLength - 1);\n  return {\n    label: `${children.slice(0, endIndex)}…`,\n    fullLabel: children,\n  };\n}\n\n/**\n * Individual segment in a breadcrumb trail.\n *\n * Renders as a link, clickable span for client routing, current-page text, or\n * disabled text depending on the props provided.\n *\n * @example\n * ```tsx\n * <BreadcrumbItem href=\"/components\">Components</BreadcrumbItem>\n * <BreadcrumbItem isCurrent>Button</BreadcrumbItem>\n * ```\n */\nexport const BreadcrumbItem = /*#__PURE__*/ React.memo<BreadcrumbItemProps>(\n  ({\n    href,\n    onClick,\n    isCurrent = false,\n    icon,\n    maxLength,\n    endContent,\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const { label, fullLabel } = getTruncatedLabel(children, maxLength);\n    const isInteractive =\n      (href !== undefined || onClick !== undefined) && !isCurrent;\n    const state = isCurrent ? 'current' : isInteractive ? 'link' : 'disabled';\n\n    const handleKeyDown = useCallback(\n      (event: React.KeyboardEvent<HTMLSpanElement>) => {\n        if (!onClick || isCurrent) {\n          return;\n        }\n\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          event.currentTarget.click();\n        }\n      },\n      [isCurrent, onClick]\n    );\n\n    const content = (\n      <>\n        {icon && <span className={breadcrumbIconStyle}>{icon}</span>}\n        <span className={breadcrumbLabelStyle}>{label}</span>\n      </>\n    );\n\n    let inner: React.ReactElement;\n\n    if (isCurrent) {\n      inner = (\n        <span\n          className={breadcrumbContentRecipe({ state })}\n          aria-current=\"page\"\n        >\n          {content}\n        </span>\n      );\n    } else if (href) {\n      inner = (\n        <a className={breadcrumbContentRecipe({ state })} href={href}>\n          {content}\n        </a>\n      );\n    } else if (onClick) {\n      inner = (\n        <span\n          className={breadcrumbContentRecipe({ state })}\n          role=\"button\"\n          tabIndex={0}\n          onClick={onClick}\n          onKeyDown={handleKeyDown}\n        >\n          {content}\n        </span>\n      );\n    } else {\n      inner = (\n        <span className={breadcrumbContentRecipe({ state })}>{content}</span>\n      );\n    }\n\n    return (\n      <li\n        ref={ref as React.Ref<HTMLLIElement>}\n        className={cx(breadcrumbItemStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {fullLabel ? (\n          <Tooltip title={fullLabel} delay={300}>\n            {inner}\n          </Tooltip>\n        ) : (\n          inner\n        )}\n        {endContent}\n      </li>\n    );\n  }\n);\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAeH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAuBJ;AAGF;;"}

package/dist/esm/components/navigation/Breadcrumbs/BreadcrumbSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbSeparator.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/BreadcrumbSeparator.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUA;;;;;;;AAOG;;AAED;AAEI;AAYF;AAGJ;;"}
+{"version":3,"file":"BreadcrumbSeparator.js","sources":["src/components/navigation/Breadcrumbs/BreadcrumbSeparator.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { breadcrumbSeparatorStyle } from './Breadcrumbs.css';\n\nimport type { BreadcrumbSeparatorProps } from './Breadcrumbs.types';\n\n/**\n * Decorative separator rendered between breadcrumb items.\n *\n * @example\n * ```tsx\n * <BreadcrumbSeparator>/</BreadcrumbSeparator>\n * ```\n */\nexport const BreadcrumbSeparator =\n  /*#__PURE__*/ React.memo<BreadcrumbSeparatorProps>(\n    ({ children, className, style, testId, ref, ...rest }) => {\n      return (\n        <li\n          ref={ref as React.Ref<HTMLLIElement>}\n          className={cx(breadcrumbSeparatorStyle, className)}\n          style={style}\n          data-testid={testId}\n          aria-hidden=\"true\"\n          {...rest}\n        >\n          {children}\n        </li>\n      );\n    }\n  );\n\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;AAOG;;AAED;AAEI;AAYF;AAGJ;;"}

package/dist/esm/components/navigation/Breadcrumbs/Breadcrumbs.js

@@ -88,6 +88,12 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
 import { cx } from '../../../utils/cx.js';
 import { BreadcrumbEllipsis } from './BreadcrumbEllipsis.js';
 import { BreadcrumbItem } from './BreadcrumbItem.js';

package/dist/esm/components/navigation/Breadcrumbs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../../src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;AACA;;;;;AAWA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}
+{"version":3,"file":"Breadcrumbs.js","sources":["src/components/navigation/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo, useState } from 'react';\n\nimport { ArrowRightIcon } from '@/components/Icons';\nimport { cx } from '@/utils/cx';\n\nimport { BreadcrumbEllipsis } from './BreadcrumbEllipsis';\nimport { BreadcrumbItem } from './BreadcrumbItem';\nimport {\n  breadcrumbsListRecipe,\n  breadcrumbsRootRecipe,\n} from './Breadcrumbs.css';\nimport { BreadcrumbSeparator } from './BreadcrumbSeparator';\n\nimport type { BreadcrumbsProps } from './Breadcrumbs.types';\n\nfunction isComponentElement(\n  child: React.ReactNode,\n  component: React.ComponentType<unknown>\n) {\n  return React.isValidElement(child) && child.type === component;\n}\n\nfunction getItemLabel(child: React.ReactNode) {\n  if (\n    React.isValidElement<{ children?: React.ReactNode }>(child) &&\n    typeof child.props.children === 'string'\n  ) {\n    return child.props.children;\n  }\n\n  return undefined;\n}\n\nfunction withSeparators(\n  items: React.ReactNode[],\n  separator: React.ReactNode\n): React.ReactNode[] {\n  return items.flatMap((item, index) =>\n    index === 0\n      ? [item]\n      : [\n          <BreadcrumbSeparator key={`separator-${index}`}>\n            {separator}\n          </BreadcrumbSeparator>,\n          item,\n        ]\n  );\n}\n\n/**\n * Breadcrumb navigation for hierarchical paths.\n *\n * Use Breadcrumbs for file paths, nested categories, editor hierarchy depth,\n * or parent-route navigation. Mark the current page explicitly with\n * `isCurrent`.\n *\n * @example\n * ```tsx\n * <Breadcrumbs>\n *   <BreadcrumbItem href=\"/\">Home</BreadcrumbItem>\n *   <BreadcrumbItem href=\"/components\">Components</BreadcrumbItem>\n *   <BreadcrumbItem isCurrent>Button</BreadcrumbItem>\n * </Breadcrumbs>\n * ```\n */\nexport const Breadcrumbs = /*#__PURE__*/ React.memo<BreadcrumbsProps>(\n  ({\n    separator = <ArrowRightIcon size=\"sm\" decorative />,\n    maxItems = 0,\n    itemsBeforeCollapse = 1,\n    itemsAfterCollapse = 2,\n    expandable = true,\n    size = 'sm',\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const [expanded, setExpanded] = useState(false);\n\n    const renderedChildren = useMemo(() => {\n      const childArray = React.Children.toArray(children);\n      const hasExplicitSeparators = childArray.some(child =>\n        isComponentElement(\n          child,\n          BreadcrumbSeparator as React.ComponentType<unknown>\n        )\n      );\n\n      if (expanded || !maxItems || maxItems <= 0) {\n        return hasExplicitSeparators\n          ? childArray\n          : withSeparators(childArray, separator);\n      }\n\n      const breadcrumbItems = childArray.filter(child =>\n        isComponentElement(\n          child,\n          BreadcrumbItem as React.ComponentType<unknown>\n        )\n      );\n\n      if (breadcrumbItems.length <= maxItems) {\n        return hasExplicitSeparators\n          ? childArray\n          : withSeparators(childArray, separator);\n      }\n\n      const safeBefore = Math.max(0, itemsBeforeCollapse);\n      const safeAfter = Math.max(0, itemsAfterCollapse);\n      const visibleBefore = breadcrumbItems.slice(0, safeBefore);\n      const visibleAfter =\n        safeAfter > 0 ? breadcrumbItems.slice(-safeAfter) : [];\n      const collapsedItems = breadcrumbItems.slice(\n        safeBefore,\n        breadcrumbItems.length - safeAfter\n      );\n\n      const collapsedLabels = collapsedItems\n        .map(getItemLabel)\n        .filter((label): label is string => Boolean(label))\n        .join(' / ');\n\n      const collapsedTrail = [\n        ...visibleBefore,\n        <BreadcrumbEllipsis\n          key=\"breadcrumb-ellipsis\"\n          onClick={\n            expandable\n              ? () => {\n                  setExpanded(true);\n                }\n              : undefined\n          }\n          tooltip={collapsedLabels || undefined}\n        />,\n        ...visibleAfter,\n      ];\n\n      return withSeparators(collapsedTrail, separator);\n    }, [\n      children,\n      expandable,\n      expanded,\n      itemsAfterCollapse,\n      itemsBeforeCollapse,\n      maxItems,\n      separator,\n    ]);\n\n    return (\n      <nav\n        ref={ref}\n        className={cx(breadcrumbsRootRecipe({ size }), className)}\n        style={style}\n        data-testid={testId}\n        aria-label=\"Breadcrumb\"\n        {...rest}\n      >\n        <ol className={breadcrumbsListRecipe({ size })}>{renderedChildren}</ol>\n      </nav>\n    );\n  }\n);\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AAIE;AACF;AAEA;AACE;;AAIE;;AAGF;AACF;AAEA;AAIE;;AAGI;AACI;;AAID;AAET;AAEA;;;;;;;;;;;;;;;AAeG;AACI;;AAiBH;;AAEE;;AAQE;AACE;AACA;;AAGJ;AAOA;AACE;AACE;AACA;;;;;AAMJ;AAEA;;;;;AAUA;AACE;AACA;;;;;AAWA;;AAGF;AACF;;;;;;;;AAQC;;AAcH;AAGF;;"}

package/dist/esm/components/navigation/ContextMenu/ContextMenu.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
 import React from 'react';
-import { menuContentStyle } from '../Menu/Menu.css.js';
+import { menuPositionerStyle, menuContentStyle } from '../Menu/Menu.css.js';
 import { MenuGapContext, DEFAULT_MENU_GAP } from '../Menu/MenuGapContext.js';
 import { cx } from '../../../utils/cx.js';
 
@@ -38,7 +38,7 @@ const ContextMenuTrigger = ({ children, render, className, style, testId, ref, .
     // needed; otherwise wrap so the trigger is transparent to layout.
     style: render ? style : { display: 'contents', ...style }, "data-testid": testId, ...rest, children: render ? undefined : children }));
 ContextMenuTrigger.displayName = 'ContextMenu.Trigger';
-const ContextMenuContent = ({ children, className, testId, ref, ...rest }) => (jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { children: jsx(ContextMenu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
+const ContextMenuContent = ({ children, className, testId, ref, ...rest }) => (jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { className: menuPositionerStyle, children: jsx(ContextMenu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
 ContextMenuContent.displayName = 'ContextMenu.Content';
 /**
  * Compound ContextMenu API. Items reuse the shared `Menu.*` primitives.

package/dist/esm/components/navigation/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../../../../src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;;AAeE;AAaF;AACA;AAEA;;;AAeI;AAOJ;AAEA;AAoBA;AAEA;;AAEG;AACI;AACL;AACA;AACD;;"}
+{"version":3,"file":"ContextMenu.js","sources":["src/components/navigation/ContextMenu/ContextMenu.tsx"],"sourcesContent":["'use client';\n\nimport { ContextMenu as BaseContextMenu } from '@base-ui/react/context-menu';\nimport React from 'react';\n\nimport {\n  menuContentStyle,\n  menuPositionerStyle,\n} from '@/components/navigation/Menu/Menu.css';\nimport {\n  MenuGapContext,\n  DEFAULT_MENU_GAP,\n} from '@/components/navigation/Menu/MenuGapContext';\nimport { cx } from '@/utils/cx';\n\nimport type {\n  ContextMenuProps,\n  ContextMenuTriggerProps,\n  ContextMenuContentProps,\n} from './ContextMenu.types';\nimport type { MenuRootActions } from '@base-ui/react/menu';\n\n/**\n * Right-click context menu, built on `@base-ui/react` ContextMenu primitives.\n *\n * Compose the trigger area and content as children. Reuse the shared `Menu.*`\n * primitives for items, or pass a fully custom panel into\n * `ContextMenu.Content`. Define separate menus per area by giving each area its\n * own `ContextMenu`.\n *\n * @example\n * ```tsx\n * <ContextMenu>\n *   <ContextMenu.Trigger>\n *     <div className=\"viewport\">Right-click me</div>\n *   </ContextMenu.Trigger>\n *   <ContextMenu.Content>\n *     <Menu.Item icon={<CutIcon />} shortcut=\"⌘X\">Cut</Menu.Item>\n *     <Menu.Item icon={<CopyIcon />} shortcut=\"⌘C\">Copy</Menu.Item>\n *   </ContextMenu.Content>\n * </ContextMenu>\n * ```\n */\nconst ContextMenuRoot = ({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  disabled,\n  gap = DEFAULT_MENU_GAP,\n  ref,\n}: ContextMenuProps): React.ReactElement => {\n  const actionsRef = React.useRef<MenuRootActions | null>(null);\n  React.useImperativeHandle(\n    ref,\n    () => ({ close: () => actionsRef.current?.close() }),\n    []\n  );\n  return (\n    <MenuGapContext.Provider value={gap}>\n      <BaseContextMenu.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={disabled}\n        actionsRef={actionsRef}\n      >\n        {children}\n      </BaseContextMenu.Root>\n    </MenuGapContext.Provider>\n  );\n};\nContextMenuRoot.displayName = 'ContextMenu';\n\nconst ContextMenuTrigger = ({\n  children,\n  render,\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}: ContextMenuTriggerProps): React.ReactElement => (\n  <BaseContextMenu.Trigger\n    ref={ref}\n    render={render}\n    className={className}\n    // With `render`, the user's element is the trigger, so no wrapper is\n    // needed; otherwise wrap so the trigger is transparent to layout.\n    style={render ? style : { display: 'contents', ...style }}\n    data-testid={testId}\n    {...rest}\n  >\n    {render ? undefined : children}\n  </BaseContextMenu.Trigger>\n);\nContextMenuTrigger.displayName = 'ContextMenu.Trigger';\n\nconst ContextMenuContent = ({\n  children,\n  className,\n  testId,\n  ref,\n  ...rest\n}: ContextMenuContentProps): React.ReactElement => (\n  <BaseContextMenu.Portal>\n    <BaseContextMenu.Positioner className={menuPositionerStyle}>\n      <BaseContextMenu.Popup\n        ref={ref}\n        className={cx(menuContentStyle, className)}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </BaseContextMenu.Popup>\n    </BaseContextMenu.Positioner>\n  </BaseContextMenu.Portal>\n);\nContextMenuContent.displayName = 'ContextMenu.Content';\n\n/**\n * Compound ContextMenu API. Items reuse the shared `Menu.*` primitives.\n */\nexport const ContextMenu = /*#__PURE__*/ Object.assign(ContextMenuRoot, {\n  Trigger: ContextMenuTrigger,\n  Content: ContextMenuContent,\n});\n"],"names":[],"mappings":";;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;AAoBG;AACH;;;AAeE;AAaF;AACA;AAEA;;;AAeI;AAOJ;AAEA;AAoBA;AAEA;;AAEG;AACI;AACL;AACA;AACD;;"}

package/dist/esm/components/navigation/Menu/Menu.css.js

@@ -1,13 +1,14 @@
-import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-B5iVe5S2.css';
+import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-Bhh1L5yl.css';
 
-var groupLabelStyle = 'Menu_groupLabelStyle__1pkkb716';
-var itemEndSlotStyle = 'Menu_itemEndSlotStyle__1pkkb714';
-var itemLabelStyle = 'Menu_itemLabelStyle__1pkkb713';
-var itemStartSlotStyle = 'Menu_itemStartSlotStyle__1pkkb712';
-var menuContentStyle = 'Menu_menuContentStyle__1pkkb710';
-var menuItemStyle = 'Menu_menuItemStyle__1pkkb711';
-var separatorStyle = 'Menu_separatorStyle__1pkkb717';
-var shortcutStyle = 'Menu_shortcutStyle__1pkkb715';
+var groupLabelStyle = 'Menu_groupLabelStyle__1pkkb717';
+var itemEndSlotStyle = 'Menu_itemEndSlotStyle__1pkkb715';
+var itemLabelStyle = 'Menu_itemLabelStyle__1pkkb714';
+var itemStartSlotStyle = 'Menu_itemStartSlotStyle__1pkkb713';
+var menuContentStyle = 'Menu_menuContentStyle__1pkkb711';
+var menuItemStyle = 'Menu_menuItemStyle__1pkkb712';
+var menuPositionerStyle = 'Menu_menuPositionerStyle__1pkkb710';
+var separatorStyle = 'Menu_separatorStyle__1pkkb718';
+var shortcutStyle = 'Menu_shortcutStyle__1pkkb716';
 
-export { groupLabelStyle, itemEndSlotStyle, itemLabelStyle, itemStartSlotStyle, menuContentStyle, menuItemStyle, separatorStyle, shortcutStyle };
+export { groupLabelStyle, itemEndSlotStyle, itemLabelStyle, itemStartSlotStyle, menuContentStyle, menuItemStyle, menuPositionerStyle, separatorStyle, shortcutStyle };
 //# sourceMappingURL=Menu.css.js.map

package/dist/esm/components/navigation/Menu/Menu.css.js.map

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

package/dist/esm/components/navigation/Menu/Menu.js

@@ -8,7 +8,7 @@ import { CircleIcon } from '../../Icons/CircleIcon.js';
 import { Button } from '../../primitives/Button/Button.js';
 import { useLatest } from '../../../hooks/useLatest/useLatest.js';
 import { cx } from '../../../utils/cx.js';
-import { menuItemStyle, separatorStyle, itemStartSlotStyle, itemLabelStyle, itemEndSlotStyle, shortcutStyle, menuContentStyle, groupLabelStyle } from './Menu.css.js';
+import { menuItemStyle, separatorStyle, itemStartSlotStyle, itemLabelStyle, itemEndSlotStyle, shortcutStyle, menuPositionerStyle, menuContentStyle, groupLabelStyle } from './Menu.css.js';
 import { MenuGapContext, DEFAULT_MENU_GAP } from './MenuGapContext.js';
 
 /**
@@ -63,7 +63,7 @@ const MenuTrigger = ({ children, render, disabled, openOnHover, className, testI
 MenuTrigger.displayName = 'Menu.Trigger';
 const MenuContent = ({ children, className, side, align = 'start', sideOffset, alignOffset, testId, ref, ...rest }) => {
     const gap = React.useContext(MenuGapContext);
-    return (jsx(Menu$1.Portal, { children: jsx(Menu$1.Positioner, { side: side, align: align, sideOffset: sideOffset ?? gap, alignOffset: alignOffset, children: jsx(Menu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
+    return (jsx(Menu$1.Portal, { children: jsx(Menu$1.Positioner, { side: side, align: align, sideOffset: sideOffset ?? gap, alignOffset: alignOffset, className: menuPositionerStyle, children: jsx(Menu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), "data-testid": testId, ...rest, children: children }) }) }));
 };
 MenuContent.displayName = 'Menu.Content';
 const MenuItem = React.memo(({ children, icon, shortcut, endContent, disabled, closeOnClick = true, onClick, onSelect, className, testId, ref, ...rest }) => {

package/dist/esm/components/navigation/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../../../src/components/navigation/Menu/Menu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAuCA;;AAEG;AACH;AAuBA;;;;AAIG;AACH;;;;;AAWI;;AAIJ;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACH;;;AAgBE;AAcF;AACA;AAEA;AAoBA;AAEA;;;AA+BA;AACA;AAEA;;;AA+BE;AAEF;AAEA;AAgBA;AAEA;AASA;AAEA;AAoBA;AAEA;;AAiBI;AAwBF;AAEF;AAEA;;AAmBI;AA0BF;AAEF;AAEA;AAQA;AAEA;AAyBA;AAEA;;;;;AAKG;AACI;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"Menu.js","sources":["src/components/navigation/Menu/Menu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport React from 'react';\n\nimport { CheckIcon } from '@/components/Icons/CheckIcon';\nimport { ChevronRightIcon } from '@/components/Icons/ChevronRightIcon';\nimport { CircleIcon } from '@/components/Icons/CircleIcon';\nimport { Button } from '@/components/primitives/Button';\nimport { useLatest } from '@/hooks/useLatest';\nimport { cx } from '@/utils/cx';\n\nimport {\n  menuContentStyle,\n  menuPositionerStyle,\n  menuItemStyle,\n  itemStartSlotStyle,\n  itemLabelStyle,\n  itemEndSlotStyle,\n  shortcutStyle,\n  groupLabelStyle,\n  separatorStyle,\n} from './Menu.css';\nimport { MenuGapContext, DEFAULT_MENU_GAP } from './MenuGapContext';\n\nimport type {\n  MenuRootProps,\n  MenuTriggerProps,\n  MenuContentProps,\n  MenuItemProps,\n  MenuGroupProps,\n  MenuSeparatorProps,\n  MenuRadioGroupProps,\n  MenuRadioItemProps,\n  MenuCheckboxItemProps,\n  MenuSubProps,\n  MenuSubTriggerProps,\n} from './Menu.types';\nimport type { MenuRootActions } from '@base-ui/react/menu';\n\n/**\n * Internal three-slot row used by every interactive menu entry.\n */\nconst ItemLayout = ({\n  start,\n  children,\n  shortcut,\n  endContent,\n}: {\n  start?: React.ReactNode;\n  children?: React.ReactNode;\n  shortcut?: React.ReactNode;\n  endContent?: React.ReactNode;\n}): React.ReactElement => (\n  <>\n    {start != null && <span className={itemStartSlotStyle}>{start}</span>}\n    <span className={itemLabelStyle}>{children}</span>\n    {(shortcut != null || endContent != null) && (\n      <span className={itemEndSlotStyle}>\n        {shortcut != null && <span className={shortcutStyle}>{shortcut}</span>}\n        {endContent}\n      </span>\n    )}\n  </>\n);\n\n/**\n * Merge `onClick` and its `onSelect` alias into one stable handler so a new\n * function identity isn't handed to Base UI on every render. Returns\n * `undefined` when neither is set, so no listener is attached.\n */\nconst useActivate = (\n  onClick?: React.MouseEventHandler<HTMLElement>,\n  onSelect?: React.MouseEventHandler<HTMLElement>\n): React.MouseEventHandler<HTMLElement> | undefined => {\n  const handlersRef = useLatest({ onClick, onSelect });\n  const handleActivate = React.useCallback<\n    React.MouseEventHandler<HTMLElement>\n  >(\n    event => {\n      handlersRef.current.onClick?.(event);\n      handlersRef.current.onSelect?.(event);\n    },\n    [handlersRef]\n  );\n  return onClick || onSelect ? handleActivate : undefined;\n};\n\n/**\n * Composable menu for editor interfaces, built on `@base-ui/react` Menu\n * primitives. Compose the trigger, content and items as children — no config\n * object.\n *\n * @example\n * ```tsx\n * <Menu>\n *   <Menu.Trigger>File</Menu.Trigger>\n *   <Menu.Content>\n *     <Menu.Item icon={<SaveIcon />} shortcut=\"⌘S\" onClick={save}>\n *       Save\n *     </Menu.Item>\n *     <Menu.Separator />\n *     <Menu.Sub>\n *       <Menu.SubTrigger>Export</Menu.SubTrigger>\n *       <Menu.SubContent>\n *         <Menu.Item>PNG</Menu.Item>\n *         <Menu.Item>SVG</Menu.Item>\n *       </Menu.SubContent>\n *     </Menu.Sub>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nconst MenuRoot = ({\n  children,\n  open,\n  defaultOpen,\n  onOpenChange,\n  modal,\n  disabled,\n  gap = DEFAULT_MENU_GAP,\n  ref,\n}: MenuRootProps): React.ReactElement => {\n  const actionsRef = React.useRef<MenuRootActions | null>(null);\n  React.useImperativeHandle(\n    ref,\n    () => ({ close: () => actionsRef.current?.close() }),\n    []\n  );\n  return (\n    <MenuGapContext.Provider value={gap}>\n      <BaseMenu.Root\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        modal={modal}\n        disabled={disabled}\n        actionsRef={actionsRef}\n      >\n        {children}\n      </BaseMenu.Root>\n    </MenuGapContext.Provider>\n  );\n};\nMenuRoot.displayName = 'Menu';\n\nconst MenuTrigger = ({\n  children,\n  render,\n  disabled,\n  openOnHover,\n  className,\n  testId,\n  ...rest\n}: MenuTriggerProps): React.ReactElement => (\n  <BaseMenu.Trigger\n    render={render ?? <Button />}\n    disabled={disabled}\n    openOnHover={openOnHover}\n    className={className}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </BaseMenu.Trigger>\n);\nMenuTrigger.displayName = 'Menu.Trigger';\n\nconst MenuContent = ({\n  children,\n  className,\n  side,\n  align = 'start',\n  sideOffset,\n  alignOffset,\n  testId,\n  ref,\n  ...rest\n}: MenuContentProps): React.ReactElement => {\n  const gap = React.useContext(MenuGapContext);\n  return (\n    <BaseMenu.Portal>\n      <BaseMenu.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset ?? gap}\n        alignOffset={alignOffset}\n        className={menuPositionerStyle}\n      >\n        <BaseMenu.Popup\n          ref={ref}\n          className={cx(menuContentStyle, className)}\n          data-testid={testId}\n          {...rest}\n        >\n          {children}\n        </BaseMenu.Popup>\n      </BaseMenu.Positioner>\n    </BaseMenu.Portal>\n  );\n};\nMenuContent.displayName = 'Menu.Content';\n\nconst MenuItem = React.memo(\n  ({\n    children,\n    icon,\n    shortcut,\n    endContent,\n    disabled,\n    closeOnClick = true,\n    onClick,\n    onSelect,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuItemProps): React.ReactElement => {\n    const handleActivate = useActivate(onClick, onSelect);\n    return (\n      <BaseMenu.Item\n        ref={ref}\n        disabled={disabled}\n        closeOnClick={closeOnClick}\n        onClick={handleActivate}\n        className={cx(menuItemStyle, className)}\n        data-testid={testId}\n        {...rest}\n      >\n        <ItemLayout start={icon} shortcut={shortcut} endContent={endContent}>\n          {children}\n        </ItemLayout>\n      </BaseMenu.Item>\n    );\n  }\n);\nMenuItem.displayName = 'Menu.Item';\n\nconst MenuGroup = ({\n  children,\n  label,\n  className,\n  testId,\n  ...rest\n}: MenuGroupProps): React.ReactElement => (\n  <BaseMenu.Group className={className} data-testid={testId} {...rest}>\n    {label != null && (\n      <BaseMenu.GroupLabel className={groupLabelStyle}>\n        {label}\n      </BaseMenu.GroupLabel>\n    )}\n    {children}\n  </BaseMenu.Group>\n);\nMenuGroup.displayName = 'Menu.Group';\n\nconst MenuSeparator = React.memo(\n  ({ className, testId, ...rest }: MenuSeparatorProps): React.ReactElement => (\n    <BaseMenu.Separator\n      className={cx(separatorStyle, className)}\n      data-testid={testId}\n      {...rest}\n    />\n  )\n);\nMenuSeparator.displayName = 'Menu.Separator';\n\nconst MenuRadioGroup = ({\n  children,\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  testId,\n  ...rest\n}: MenuRadioGroupProps): React.ReactElement => (\n  <BaseMenu.RadioGroup\n    value={value}\n    defaultValue={defaultValue}\n    onValueChange={onValueChange}\n    className={className}\n    data-testid={testId}\n    {...rest}\n  >\n    {children}\n  </BaseMenu.RadioGroup>\n);\nMenuRadioGroup.displayName = 'Menu.RadioGroup';\n\nconst MenuRadioItem = React.memo(\n  ({\n    children,\n    value,\n    indicator = <CircleIcon size=\"sm\" />,\n    shortcut,\n    endContent,\n    disabled,\n    closeOnClick = false,\n    onClick,\n    onSelect,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuRadioItemProps): React.ReactElement => {\n    const handleActivate = useActivate(onClick, onSelect);\n    return (\n      <BaseMenu.RadioItem\n        ref={ref}\n        value={value}\n        disabled={disabled}\n        closeOnClick={closeOnClick}\n        onClick={handleActivate}\n        className={cx(menuItemStyle, className)}\n        data-testid={testId}\n        {...rest}\n      >\n        <ItemLayout\n          start={\n            <BaseMenu.RadioItemIndicator>\n              {indicator}\n            </BaseMenu.RadioItemIndicator>\n          }\n          shortcut={shortcut}\n          endContent={endContent}\n        >\n          {children}\n        </ItemLayout>\n      </BaseMenu.RadioItem>\n    );\n  }\n);\nMenuRadioItem.displayName = 'Menu.RadioItem';\n\nconst MenuCheckboxItem = React.memo(\n  ({\n    children,\n    checked,\n    defaultChecked,\n    onCheckedChange,\n    indicator = <CheckIcon size=\"sm\" />,\n    shortcut,\n    endContent,\n    disabled,\n    closeOnClick = false,\n    onClick,\n    onSelect,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuCheckboxItemProps): React.ReactElement => {\n    const handleActivate = useActivate(onClick, onSelect);\n    return (\n      <BaseMenu.CheckboxItem\n        ref={ref}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onCheckedChange={onCheckedChange}\n        disabled={disabled}\n        closeOnClick={closeOnClick}\n        onClick={handleActivate}\n        className={cx(menuItemStyle, className)}\n        data-testid={testId}\n        {...rest}\n      >\n        <ItemLayout\n          start={\n            <BaseMenu.CheckboxItemIndicator>\n              {indicator}\n            </BaseMenu.CheckboxItemIndicator>\n          }\n          shortcut={shortcut}\n          endContent={endContent}\n        >\n          {children}\n        </ItemLayout>\n      </BaseMenu.CheckboxItem>\n    );\n  }\n);\nMenuCheckboxItem.displayName = 'Menu.CheckboxItem';\n\nconst MenuSub = ({\n  children,\n  defaultOpen,\n}: MenuSubProps): React.ReactElement => (\n  <BaseMenu.SubmenuRoot defaultOpen={defaultOpen}>\n    {children}\n  </BaseMenu.SubmenuRoot>\n);\nMenuSub.displayName = 'Menu.Sub';\n\nconst MenuSubTrigger = React.memo(\n  ({\n    children,\n    icon,\n    disabled,\n    onClick,\n    className,\n    testId,\n    ref,\n    ...rest\n  }: MenuSubTriggerProps): React.ReactElement => (\n    <BaseMenu.SubmenuTrigger\n      ref={ref}\n      disabled={disabled}\n      onClick={onClick}\n      className={cx(menuItemStyle, className)}\n      data-testid={testId}\n      {...rest}\n    >\n      <ItemLayout start={icon} endContent={<ChevronRightIcon size=\"sm\" />}>\n        {children}\n      </ItemLayout>\n    </BaseMenu.SubmenuTrigger>\n  )\n);\nMenuSubTrigger.displayName = 'Menu.SubTrigger';\n\n/**\n * Compound Menu API.\n *\n * `Content` and `SubContent` are the same popup surface. The gap from the\n * anchor is set once on the `Menu` root (`gap` prop) and inherited by both.\n */\nexport const Menu = /*#__PURE__*/ Object.assign(MenuRoot, {\n  Trigger: MenuTrigger,\n  Content: MenuContent,\n  Item: MenuItem,\n  Group: MenuGroup,\n  Separator: MenuSeparator,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  CheckboxItem: MenuCheckboxItem,\n  Sub: MenuSub,\n  SubTrigger: MenuSubTrigger,\n  SubContent: MenuContent,\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwCA;;AAEG;AACH;AAuBA;;;;AAIG;AACH;;;;;AAWI;;AAIJ;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACH;;;AAgBE;AAcF;AACA;AAEA;AAoBA;AAEA;;AAYE;AAoBF;AACA;AAEA;;;AA+BE;AAEF;AAEA;AAgBA;AAEA;AASA;AAEA;AAoBA;AAEA;;AAiBI;AAwBF;AAEF;AAEA;;AAmBI;AA0BF;AAEF;AAEA;AAQA;AAEA;AAyBA;AAEA;;;;;AAKG;AACI;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/navigation/Menu/MenuGapContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuGapContext.js","sources":["../../../../../../src/components/navigation/Menu/MenuGapContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,MAAM,gBAAgB,GAAG;AAEhC;;;;;AAKG;MACU,cAAc;AACzB,cAAc,aAAa,CAAS,gBAAgB;;;;"}
+{"version":3,"file":"MenuGapContext.js","sources":["src/components/navigation/Menu/MenuGapContext.ts"],"sourcesContent":["import { createContext } from 'react';\n\n/**\n * Default gap, in px, between a menu (or submenu) popup and its anchor.\n * Mirrors the spacing scale (`vars.spacing.md`); floating-ui needs a number,\n * so it can't read the CSS token directly.\n */\nexport const DEFAULT_MENU_GAP = 8;\n\n/**\n * Menu-wide popup gap. Provided once by the `Menu` / `ContextMenu` root and\n * consumed by `Menu.Content` and `Menu.SubContent` as their default\n * `sideOffset`, so the spacing is defined for the whole menu rather than\n * per submenu.\n */\nexport const MenuGapContext =\n  /*#__PURE__*/ createContext<number>(DEFAULT_MENU_GAP);\n"],"names":[],"mappings":";;AAEA;;;;AAIG;AACI,MAAM,gBAAgB,GAAG;AAEhC;;;;;AAKG;MACU,cAAc;AACzB,cAAc,aAAa,CAAS,gBAAgB;;;;"}

package/dist/esm/components/navigation/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../../../src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AA6BA;;AAMI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;AAKI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAoBL;;AAMA;AACE;AACA;AACA;AACA;AACD;;AAGC;;;;;;;;;AASD;;AAIG;;AAEA;;;;AAGA;;;AAgBI;AACA;;;AAYA;;AAMQ;AACD;AASC;;AASV;AAIR;AAEA;;"}
+{"version":3,"file":"Pagination.js","sources":["src/components/navigation/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { ChevronLeftIcon } from '@/components/Icons/ChevronLeftIcon';\nimport { ChevronRightIcon } from '@/components/Icons/ChevronRightIcon';\nimport { FirstIcon } from '@/components/Icons/FirstIcon';\nimport { LastIcon } from '@/components/Icons/LastIcon';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cx } from '@/utils/cx';\n\nimport {\n  paginationButtonRecipe,\n  paginationEllipsisRecipe,\n  paginationIconStyle,\n  paginationItemStyle,\n  paginationListRecipe,\n  paginationRootStyle,\n} from './Pagination.css';\nimport { usePaginationItems } from './usePagination';\n\nimport type {\n  PaginationItem,\n  PaginationItemAriaLabelGetter,\n  PaginationItemType,\n  PaginationProps,\n  PaginationSize,\n} from './Pagination.types';\n\nconst defaultGetItemAriaLabel: PaginationItemAriaLabelGetter = (\n  type,\n  page,\n  selected\n) => {\n  switch (type) {\n    case 'first':\n      return 'Go to first page';\n    case 'last':\n      return 'Go to last page';\n    case 'previous':\n      return 'Go to previous page';\n    case 'next':\n      return 'Go to next page';\n    case 'ellipsis':\n      return 'More pages';\n    case 'page':\n    default:\n      return selected ? `page ${String(page)}` : `Go to page ${String(page)}`;\n  }\n};\n\nfunction renderItemContent(\n  type: PaginationItemType,\n  page: number | null\n): React.ReactNode {\n  switch (type) {\n    case 'first':\n      return <FirstIcon className={paginationIconStyle} />;\n    case 'last':\n      return <LastIcon className={paginationIconStyle} />;\n    case 'previous':\n      return <ChevronLeftIcon className={paginationIconStyle} />;\n    case 'next':\n      return <ChevronRightIcon className={paginationIconStyle} />;\n    case 'ellipsis':\n      return '…';\n    case 'page':\n    default:\n      return page;\n  }\n}\n\n/**\n * Page navigator with sibling/boundary ellipsis logic. Controlled when `page`\n * is set, otherwise uncontrolled with `defaultPage`. Pages are 1-based.\n *\n * @example\n * ```tsx\n * <Pagination count={20} defaultPage={1} onChange={(_, p) => setPage(p)} />\n *\n * // Compact: only prev/next + numbers\n * <Pagination count={20} siblingCount={0} boundaryCount={1} />\n *\n * // Full controls\n * <Pagination count={50} showFirstButton showLastButton />\n * ```\n */\nexport const Pagination: React.FC<PaginationProps> = ({\n  count,\n  page: pageProp,\n  defaultPage = 1,\n  onChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showFirstButton = false,\n  showLastButton = false,\n  hidePrevButton = false,\n  hideNextButton = false,\n  size = 'md',\n  disabled = false,\n  className,\n  style,\n  testId,\n  getItemAriaLabel = defaultGetItemAriaLabel,\n  ref,\n  ...rest\n}) => {\n  const safeCount = Math.max(0, Math.floor(count));\n  const clampedDefault = Math.min(\n    Math.max(1, defaultPage),\n    Math.max(1, safeCount)\n  );\n\n  const [page, setPage] = useControlledState<number>({\n    value: pageProp,\n    defaultValue: clampedDefault,\n    onChange: undefined,\n    fallback: 1,\n  });\n\n  const items = usePaginationItems({\n    count: safeCount,\n    page,\n    siblingCount: Math.max(0, siblingCount),\n    boundaryCount: Math.max(1, boundaryCount),\n    showFirstButton,\n    showLastButton,\n    hidePrevButton,\n    hideNextButton,\n    disabled,\n  });\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>, item: PaginationItem) => {\n      if (item.disabled || item.page === null || item.type === 'ellipsis')\n        return;\n      const next = item.page;\n      if (next === page) return;\n      setPage(next);\n      onChange?.(event, next);\n    },\n    [onChange, page, setPage]\n  );\n\n  return (\n    <nav\n      ref={ref}\n      aria-label=\"pagination\"\n      className={cx(paginationRootStyle, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <ul className={paginationListRecipe({ size })}>\n        {items.map((item, index) => {\n          const key = `${item.type}-${item.page ?? 'na'}-${String(index)}`;\n          if (item.type === 'ellipsis') {\n            return (\n              <li key={key} className={paginationItemStyle}>\n                <span\n                  className={paginationEllipsisRecipe({ size })}\n                  aria-hidden=\"true\"\n                >\n                  &#8230;\n                </span>\n              </li>\n            );\n          }\n          return (\n            <li key={key} className={paginationItemStyle}>\n              <button\n                type=\"button\"\n                className={paginationButtonRecipe({\n                  size,\n                  selected: item.selected || undefined,\n                })}\n                disabled={item.disabled}\n                aria-current={item.selected ? 'page' : undefined}\n                aria-label={getItemAriaLabel(\n                  item.type,\n                  item.page,\n                  item.selected\n                )}\n                onClick={event => {\n                  handleClick(event, item);\n                }}\n                data-page={item.page ?? undefined}\n                data-type={item.type}\n              >\n                {renderItemContent(item.type, item.page)}\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </nav>\n  );\n};\n\nPagination.displayName = 'Pagination';\n\nexport type { PaginationSize };\n"],"names":[],"mappings":";;;;;;;;;;;;AA6BA;;AAMI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;AAKI;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACE;AACF;AACA;AACE;;AAEN;AAEA;;;;;;;;;;;;;;AAcG;AACI;AAoBL;;AAMA;AACE;AACA;AACA;AACA;AACD;;AAGC;;;;;;;;;AASD;;AAIG;;AAEA;;;;AAGA;;;AAgBI;AACA;;;AAYA;;AAMQ;AACD;AASC;;AASV;AAIR;AAEA;;"}

package/dist/esm/components/navigation/Pagination/usePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","sources":["../../../../../../src/components/navigation/Pagination/usePagination.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAkBA;AACE;AACA;AACF;AAEA;;;AAGG;AACG;;;AAgBF;AACA;;;;AAIM;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAEH;;AAGF;;AAMA;AAQA;AACA;AAKA;;;AAGG;AACH;AACE;;AAEA;;AAEE;AACE;;AAEJ;AACA;;AAEE;AACE;;AAEJ;;;;;AAOE;AACA;AACA;AACA;AACD;;;;AAIC;;AAEA;AACA;AACD;;AAGH;;;AAGM;AACA;AACA;AACA;AACD;;;;AAGC;AACA;;;AAGD;;;;;AAMD;;AAEA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAGH;AACF;;;;;;;;;;AAUC;AACH;;"}
+{"version":3,"file":"usePagination.js","sources":["src/components/navigation/Pagination/usePagination.ts"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport type { PaginationItem } from './Pagination.types';\n\nexport interface UsePaginationOptions {\n  count: number;\n  page: number;\n  siblingCount: number;\n  boundaryCount: number;\n  showFirstButton: boolean;\n  showLastButton: boolean;\n  hidePrevButton: boolean;\n  hideNextButton: boolean;\n  disabled: boolean;\n}\n\nfunction range(start: number, end: number): number[] {\n  const length = Math.max(0, end - start + 1);\n  return Array.from({ length }, (_, i) => start + i);\n}\n\n/**\n * MUI-style pagination algorithm. Produces the list of items to render given\n * the total count, the current page, and the sibling/boundary counts.\n */\nexport function usePaginationItems(\n  options: UsePaginationOptions\n): PaginationItem[] {\n  const {\n    count,\n    page,\n    siblingCount,\n    boundaryCount,\n    showFirstButton,\n    showLastButton,\n    hidePrevButton,\n    hideNextButton,\n    disabled,\n  } = options;\n\n  return useMemo(() => {\n    const safeCount = Math.max(0, Math.floor(count));\n    if (safeCount === 0) {\n      const items: PaginationItem[] = [];\n      if (showFirstButton) {\n        items.push({\n          type: 'first',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      if (!hidePrevButton) {\n        items.push({\n          type: 'previous',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      if (!hideNextButton) {\n        items.push({\n          type: 'next',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      if (showLastButton) {\n        items.push({\n          type: 'last',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      }\n      return items;\n    }\n\n    const startBoundary = range(1, Math.min(boundaryCount, safeCount));\n    const endBoundary = range(\n      Math.max(safeCount - boundaryCount + 1, boundaryCount + 1),\n      safeCount\n    );\n\n    const siblingStart = Math.max(\n      Math.min(\n        page - siblingCount,\n        safeCount - boundaryCount - siblingCount * 2 - 1\n      ),\n      boundaryCount + 2\n    );\n\n    const firstEndBoundary = endBoundary[0];\n    const siblingEnd = Math.min(\n      Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n      firstEndBoundary !== undefined ? firstEndBoundary - 2 : safeCount - 1\n    );\n\n    /**\n     * Builds a sequence:\n     * [1, ..., boundaryCount] [start ellipsis] [siblings] [end ellipsis] [count - boundaryCount + 1, ..., count]\n     */\n    const itemList: (number | 'start-ellipsis' | 'end-ellipsis')[] = [\n      ...startBoundary,\n      // Start ellipsis or single page bridging the gap\n      ...(siblingStart > boundaryCount + 2\n        ? (['start-ellipsis'] as const)\n        : boundaryCount + 1 < safeCount - boundaryCount\n          ? [boundaryCount + 1]\n          : []),\n      ...range(siblingStart, siblingEnd),\n      ...(siblingEnd < safeCount - boundaryCount - 1\n        ? (['end-ellipsis'] as const)\n        : safeCount - boundaryCount > boundaryCount\n          ? [safeCount - boundaryCount]\n          : []),\n      ...endBoundary,\n    ];\n\n    const items: PaginationItem[] = [];\n\n    if (showFirstButton) {\n      items.push({\n        type: 'first',\n        page: 1,\n        selected: false,\n        disabled: disabled || page <= 1,\n      });\n    }\n    if (!hidePrevButton) {\n      items.push({\n        type: 'previous',\n        page: Math.max(1, page - 1),\n        selected: false,\n        disabled: disabled || page <= 1,\n      });\n    }\n\n    for (const it of itemList) {\n      if (it === 'start-ellipsis' || it === 'end-ellipsis') {\n        items.push({\n          type: 'ellipsis',\n          page: null,\n          selected: false,\n          disabled: true,\n        });\n      } else {\n        items.push({\n          type: 'page',\n          page: it,\n          selected: it === page,\n          disabled,\n        });\n      }\n    }\n\n    if (!hideNextButton) {\n      items.push({\n        type: 'next',\n        page: Math.min(safeCount, page + 1),\n        selected: false,\n        disabled: disabled || page >= safeCount,\n      });\n    }\n    if (showLastButton) {\n      items.push({\n        type: 'last',\n        page: safeCount,\n        selected: false,\n        disabled: disabled || page >= safeCount,\n      });\n    }\n\n    return items;\n  }, [\n    count,\n    page,\n    siblingCount,\n    boundaryCount,\n    showFirstButton,\n    showLastButton,\n    hidePrevButton,\n    hideNextButton,\n    disabled,\n  ]);\n}\n"],"names":[],"mappings":";;;AAkBA;AACE;AACA;AACF;AAEA;;;AAGG;AACG;;;AAgBF;AACA;;;;AAIM;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAEH;;AAGF;;AAMA;AAQA;AACA;AAKA;;;AAGG;AACH;AACE;;AAEA;;AAEE;AACE;;AAEJ;AACA;;AAEE;AACE;;AAEJ;;;;;AAOE;AACA;AACA;AACA;AACD;;;;AAIC;;AAEA;AACA;AACD;;AAGH;;;AAGM;AACA;AACA;AACA;AACD;;;;AAGC;AACA;;;AAGD;;;;;AAMD;;AAEA;AACA;AACD;;;;AAIC;AACA;AACA;AACA;AACD;;AAGH;AACF;;;;;;;;;;AAUC;AACH;;"}

package/dist/esm/components/navigation/PathBar/PathBar.js

@@ -88,6 +88,12 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
 import { Breadcrumbs } from '../Breadcrumbs/Breadcrumbs.js';
 import { BreadcrumbItem } from '../Breadcrumbs/BreadcrumbItem.js';
 import '../Breadcrumbs/BreadcrumbSeparator.js';
@@ -97,7 +103,7 @@ import { useControlledState } from '../../../hooks/useControlledState/useControl
 import { useLatest } from '../../../hooks/useLatest/useLatest.js';
 import '../../../hooks/useBreakpoint/useBreakpoint.js';
 import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
-import '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import '@vanilla-extract/css';
 import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
 import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
 import '../../../hooks/useNavigationHistory/useNavigationHistory.js';

package/dist/esm/components/navigation/PathBar/PathBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PathBar.js","sources":["../../../../../../src/components/navigation/PathBar/PathBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;;AAsBD;AAEA;;AAOM;;AAKN;AAGE;AACA;AACA;AACD;;;;AAKD;AACE;;;;;;AAMA;AACA;AACF;AAEA;;;AAGE;AACA;AACF;;;AAIE;AAEA;AAOQ;;;;AAoBV;;AAmBF;AAEA;;"}
+{"version":3,"file":"PathBar.js","sources":["src/components/navigation/PathBar/PathBar.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { ChevronRightIcon } from '@/components/Icons';\nimport {\n  Breadcrumbs,\n  BreadcrumbItem,\n} from '@/components/navigation/Breadcrumbs';\nimport { useControlledState, useLatest } from '@/hooks';\n\nimport { PathBarSiblingMenu } from './PathBarSiblingMenu';\nimport { normalizePath } from './pathUtils';\n\nimport type { PathBarProps } from './PathBar.types';\nimport type { ResolvedPathSegment } from './pathUtils';\n\n// Frozen so the shared fallback can never be mutated in place; every write path\n// builds a fresh array via slice/spread.\nconst EMPTY_SEGMENTS: readonly ResolvedPathSegment[] = Object.freeze([]);\n\n/**\n * File-path breadcrumbs, like the VS Code editor breadcrumb bar.\n *\n * PathBar specializes {@link Breadcrumbs}: give it a path — a delimited string\n * or a structured segment array — and it renders each segment as a crumb.\n * Folder crumbs navigate on click (`onNavigate`); the final segment is the\n * current location. Provide `getSiblings` to add a VS-Code-style dropdown that\n * swaps a segment for one of its siblings. Long paths reuse the Breadcrumbs\n * collapse / ellipsis machinery via `maxItems`.\n *\n * The current path is controllable: pass `value` to drive it, or `defaultValue`\n * to let PathBar track it (clicking an ancestor truncates the trail).\n *\n * @example\n * ```tsx\n * <PathBar\n *   defaultValue=\"src/components/Button/Button.tsx\"\n *   rootIcon={<HomeIcon size=\"sm\" decorative />}\n *   onNavigate={path => router.push(path)}\n * />\n * ```\n */\nexport const PathBar = ({\n  value,\n  defaultValue,\n  delimiter = '/',\n  onNavigate,\n  getSiblings,\n  rootIcon,\n  separator,\n  maxItems,\n  itemsBeforeCollapse,\n  itemsAfterCollapse,\n  expandable,\n  size = 'sm',\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}: PathBarProps): React.ReactElement => {\n  // Wrap the consumer callback so navigation handlers don't depend on its\n  // (typically inline, render-fresh) identity.\n  const onNavigateRef = useLatest(onNavigate);\n\n  const controlledSegments = useMemo(\n    () => (value !== undefined ? normalizePath(value, delimiter) : undefined),\n    [value, delimiter]\n  );\n  const defaultSegments = useMemo(\n    () =>\n      defaultValue !== undefined\n        ? normalizePath(defaultValue, delimiter)\n        : undefined,\n    [defaultValue, delimiter]\n  );\n\n  const [segments, setSegments] = useControlledState<\n    readonly ResolvedPathSegment[]\n  >({\n    value: controlledSegments,\n    defaultValue: defaultSegments,\n    fallback: EMPTY_SEGMENTS,\n  });\n\n  // Handlers are invoked only from the crumb-mapping below (recreated every\n  // render anyway), so they close over the current-render `segments` directly —\n  // no ref indirection needed, and the value is always live at click time.\n  const navigateToIndex = (index: number): void => {\n    const target = segments[index];\n    if (!target) {\n      return;\n    }\n    // Navigating to an ancestor drops everything below it (uncontrolled mode;\n    // a controlled `value` is left untouched and driven by the consumer).\n    setSegments(segments.slice(0, index + 1));\n    onNavigateRef.current?.(target.value, target, index);\n  };\n\n  const selectSibling = (index: number, sibling: ResolvedPathSegment): void => {\n    // A lateral move: keep the ancestors, swap this segment, drop anything\n    // deeper since the old subtree no longer applies.\n    setSegments([...segments.slice(0, index), sibling]);\n    onNavigateRef.current?.(sibling.value, sibling, index);\n  };\n\n  const items = segments.map((segment, index) => {\n    const isLast = index === segments.length - 1;\n    const icon = segment.icon ?? (index === 0 ? rootIcon : undefined);\n\n    return (\n      <BreadcrumbItem\n        key={`${index}-${segment.value}`}\n        icon={icon}\n        isCurrent={isLast}\n        onClick={\n          isLast\n            ? undefined\n            : () => {\n                navigateToIndex(index);\n              }\n        }\n        endContent={\n          getSiblings ? (\n            <PathBarSiblingMenu\n              segment={segment}\n              index={index}\n              getSiblings={getSiblings}\n              onSelect={selectSibling}\n              size={size}\n            />\n          ) : undefined\n        }\n      >\n        {segment.label}\n      </BreadcrumbItem>\n    );\n  });\n\n  return (\n    <Breadcrumbs\n      ref={ref}\n      separator={separator ?? <ChevronRightIcon size={size} decorative />}\n      maxItems={maxItems}\n      itemsBeforeCollapse={itemsBeforeCollapse}\n      itemsAfterCollapse={itemsAfterCollapse}\n      expandable={expandable}\n      size={size}\n      className={className}\n      style={style}\n      testId={testId}\n      {...rest}\n    >\n      {items}\n    </Breadcrumbs>\n  );\n};\n\nPathBar.displayName = 'PathBar';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA;AACA;AACA;AAEA;;;;;;;;;;;;;;;;;;;;;AAqBG;;;;AAsBD;AAEA;;AAOM;;AAKN;AAGE;AACA;AACA;AACD;;;;AAKD;AACE;;;;;;AAMA;AACA;AACF;AAEA;;;AAGE;AACA;AACF;;;AAIE;AAEA;AAOQ;;;;AAoBV;;AAmBF;AAEA;;"}

package/dist/esm/components/navigation/PathBar/PathBarSiblingMenu.js

@@ -87,6 +87,12 @@ import '../../Icons/GitBranchIcon.js';
 import '../../Icons/BugIcon.js';
 import '../../Icons/MinusIcon.js';
 import '../../Icons/PinIcon.js';
+import '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.js';
 import { Menu } from '../Menu/Menu.js';
 import '../../primitives/Avatar/Avatar.js';
 import '../../primitives/Avatar/AvatarGroup.js';

package/dist/esm/components/navigation/PathBar/PathBarSiblingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PathBarSiblingMenu.js","sources":["../../../../../../src/components/navigation/PathBar/PathBarSiblingMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;AAMG;AACI;AAOL;AACA;AACE;;AAGF;AAoBY;AACF;AAQZ;AAEA;;"}
+{"version":3,"file":"PathBarSiblingMenu.js","sources":["src/components/navigation/PathBar/PathBarSiblingMenu.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { ChevronDownIcon } from '@/components/Icons';\nimport { Menu } from '@/components/navigation/Menu';\nimport { IconButton } from '@/components/primitives';\n\nimport { pathBarSiblingTriggerStyle } from './PathBar.css';\nimport { resolveSiblings } from './pathUtils';\n\nimport type { PathBarSize, PathSegment } from './PathBar.types';\nimport type { ResolvedPathSegment } from './pathUtils';\n\ninterface PathBarSiblingMenuProps {\n  /** The resolved segment this dropdown hangs off — the sibling anchor. */\n  segment: ResolvedPathSegment;\n  /** Index of `segment` in the trail; forwarded to `onSelect`. */\n  index: number;\n  /** Returns the raw sibling entries for the segment. */\n  getSiblings: (\n    segment: PathSegment,\n    index: number\n  ) => ReadonlyArray<string | PathSegment>;\n  /** Called with the chosen sibling (already resolved to a concrete value). */\n  onSelect: (index: number, sibling: ResolvedPathSegment) => void;\n  /** Scale shared with the rest of the bar — sizes the caret button and icon. */\n  size: PathBarSize;\n}\n\n/**\n * Trailing caret + dropdown for a single crumb's siblings (the VS Code path-bar\n * affordance). Rendered as a crumb's `endContent`, so it mounts only for crumbs\n * Breadcrumbs actually renders — `getSiblings` runs lazily, never for segments\n * hidden behind the overflow ellipsis. Renders nothing when the segment has no\n * siblings.\n */\nexport const PathBarSiblingMenu = ({\n  segment,\n  index,\n  getSiblings,\n  onSelect,\n  size,\n}: PathBarSiblingMenuProps): React.ReactElement | null => {\n  const siblings = resolveSiblings(segment, getSiblings(segment, index));\n  if (siblings.length === 0) {\n    return null;\n  }\n\n  return (\n    <Menu>\n      <Menu.Trigger\n        render={\n          <IconButton\n            aria-label={`Browse ${segment.label} siblings`}\n            size={size}\n            radius=\"sm\"\n            className={pathBarSiblingTriggerStyle}\n          >\n            <ChevronDownIcon size={size} decorative />\n          </IconButton>\n        }\n      />\n      <Menu.Content>\n        {siblings.map((sibling, siblingIndex) => (\n          <Menu.Item\n            key={`${sibling.value}-${siblingIndex}`}\n            icon={sibling.icon}\n            onSelect={() => {\n              onSelect(index, sibling);\n            }}\n          >\n            {sibling.label}\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu>\n  );\n};\n\nPathBarSiblingMenu.displayName = 'PathBarSiblingMenu';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;AAMG;AACI;AAOL;AACA;AACE;;AAGF;AAoBY;AACF;AAQZ;AAEA;;"}