entangle-ui 0.9.0 → 0.11.0

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
 import React, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
-import { cx } from '../../../utils/cx.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
 import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.js';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { dividerSizeVar, dividerRecipe, containerRecipe } from './SplitPane.css.js';
 
 // ---------------------------------------------------------------------------
@@ -201,24 +202,20 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
     // Which sizes array to use
     const isControlled = controlledSizes !== undefined;
     const sizes = isControlled ? controlledSizes : internalSizes;
-    // Stable reference to panelConfigs for use in effects/callbacks
+    // Stable reference to panelConfigs for use in effects/callbacks. The
+    // serialized key is the deliberate deep-equality dependency, so panelConfigs
+    // itself is intentionally absent from the array.
     const panelConfigsKey = JSON.stringify(panelConfigs);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const stablePanelConfigs = useMemo(() => panelConfigs, [panelConfigsKey]);
-    // Keep a ref so the ResizeObserver callback always reads latest values
-    const latestRef = useRef({
+    // Keep a ref so the ResizeObserver callback always reads latest values.
+    const latestRef = useLatest({
         panelCount,
         dividerSize,
         direction,
         isControlled,
         panelConfigs: stablePanelConfigs,
     });
-    latestRef.current = {
-        panelCount,
-        dividerSize,
-        direction,
-        isControlled,
-        panelConfigs: stablePanelConfigs,
-    };
     // -----------------------------------------------------------------------
     // Initial size calculation + ResizeObserver
     // -----------------------------------------------------------------------
@@ -246,7 +243,8 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
                 return reconcileSizesToAvailableSpace(computeInitialSizes(count, cfgs, availableSpace), cfgs, availableSpace, collapsed);
             });
         }
-    }, []);
+        // latestRef is a stable useLatest ref; listed to satisfy the rule.
+    }, [latestRef]);
     const getAvailableSpace = useCallback(() => {
         const container = containerRef.current;
         if (!container || panelCount < 2)
@@ -393,7 +391,7 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
     const handlePointerUp = useCallback((_dividerIndex, e) => {
         e.target.releasePointerCapture(e.pointerId);
         setDraggingIndex(null);
-        if (isControlled && controlledSizes) {
+        if (isControlled) {
             onResizeEnd?.(controlledSizes);
         }
         else {
@@ -533,12 +531,27 @@ const SplitPane = ({ direction = 'horizontal', panels: panelConfigs = [], sizes:
         if (i < panelCount - 1) {
             const leftSize = sizes[i] ?? 0;
             const leftCfg = panelConfigs[i];
-            elements.push(jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(leftSize), "aria-valuemin": leftCfg?.minSize ?? 0, "aria-valuemax": leftCfg?.maxSize ?? undefined, "aria-label": "Panel divider", "data-testid": testId ? `${testId}-divider-${i}` : undefined, className: dividerRecipe({
+            elements.push(
+            // Focusable window-splitter: a separator with aria-valuenow that the
+            // user can move with the keyboard is an interactive separator per the
+            // WAI-ARIA window splitter pattern, which jsx-a11y does not model.
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+            jsx("div", { role: "separator", 
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(leftSize), "aria-valuemin": leftCfg?.minSize ?? 0, "aria-valuemax": leftCfg?.maxSize ?? undefined, "aria-label": "Panel divider", "data-testid": testId ? `${testId}-divider-${i}` : undefined, className: dividerRecipe({
                     direction,
                     isDragging: draggingIndex === i || undefined,
                 }), style: assignInlineVars({
                     [dividerSizeVar]: `${dividerSize}px`,
-                }), onPointerDown: e => handlePointerDown(i, e), onPointerMove: e => handlePointerMove(i, e), onPointerUp: e => handlePointerUp(i, e), onKeyDown: e => handleKeyDown(i, e) }, `divider-${i}`));
+                }), onPointerDown: e => {
+                    handlePointerDown(i, e);
+                }, onPointerMove: e => {
+                    handlePointerMove(i, e);
+                }, onPointerUp: e => {
+                    handlePointerUp(i, e);
+                }, onKeyDown: e => {
+                    handleKeyDown(i, e);
+                } }, `divider-${i}`));
         }
     });
     return (jsx("div", { ref: setContainerRef, className: cx(containerRecipe({ direction }), className), "data-testid": testId, style: style, ...htmlProps, children: elements }));

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":";;;;;;;;AAmBA;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;;;;AAKA;;;;;;;AAQE;AACD;;;;;;AAMC;;;;;AAOF;AACE;;AAQA;;;AAGA;AAEA;;AAGE;;AAEE;;AAEE;AACA;AACE;;AAOF;AACA;;;AAUF;AAMF;;;AAIJ;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;;;;AAQC;AACE;;;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;AACJ;;AAEL;;;;;;;;AAaA;;;AAGE;;;;AAKF;;AAWA;;AAEE;AAEA;;AAeM;AACD;AAEC;;;AASV;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":";;;;;AAOA;;;;;;;;;;;;;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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cx } from '../../../utils/cx.js';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { cx } from '../../../utils/cx.js';
 import { gapVar, stackRecipe } from './Stack.css.js';
 
 /** Base spacing unit in px */

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

@@ -28,6 +28,10 @@ import '../../primitives/TextArea/TextArea.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
 import '../../primitives/VisuallyHidden/VisuallyHidden.js';
 import '../../primitives/canvas/CanvasContainer.js';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
 import { cx } from '../../../utils/cx.js';
 import { breadcrumbEllipsisButtonStyle, breadcrumbEllipsisTextStyle, breadcrumbEllipsisStyle } from './Breadcrumbs.css.js';
 

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;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

@@ -28,6 +28,10 @@ import '../../primitives/TextArea/TextArea.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
 import '../../primitives/VisuallyHidden/VisuallyHidden.js';
 import '../../primitives/canvas/CanvasContainer.js';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
 import { cx } from '../../../utils/cx.js';
 import { breadcrumbIconStyle, breadcrumbLabelStyle, breadcrumbContentRecipe, breadcrumbItemStyle } from './Breadcrumbs.css.js';
 
@@ -55,7 +59,7 @@ function getTruncatedLabel(children, maxLength) {
  * <BreadcrumbItem isCurrent>Button</BreadcrumbItem>
  * ```
  */
-const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = false, icon, maxLength, children, className, style, testId, ref, ...rest }) => {
+const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = false, icon, maxLength, endContent, children, className, style, testId, ref, ...rest }) => {
     const { label, fullLabel } = getTruncatedLabel(children, maxLength);
     const isInteractive = (href !== undefined || onClick !== undefined) && !isCurrent;
     const state = isCurrent ? 'current' : isInteractive ? 'link' : 'disabled';
@@ -82,7 +86,7 @@ const BreadcrumbItem = /*#__PURE__*/ React.memo(({ href, onClick, isCurrent = fa
     else {
         inner = (jsx("span", { className: breadcrumbContentRecipe({ state }), children: content }));
     }
-    return (jsx("li", { ref: ref, className: cx(breadcrumbItemStyle, className), style: style, "data-testid": testId, ...rest, children: fullLabel ? (jsx(Tooltip, { title: fullLabel, delay: 300, children: inner })) : (inner) }));
+    return (jsxs("li", { ref: ref, className: cx(breadcrumbItemStyle, className), style: style, "data-testid": testId, ...rest, children: [fullLabel ? (jsx(Tooltip, { title: fullLabel, delay: 300, children: inner })) : (inner), endContent] }));
 });
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA;;AAGI;AACA;;;AAKF;;;AAGE;;AAEJ;AAEA;;;;;;;;;;;AAWG;AACI;AAcH;AACA;AAEA;AAEA;AAEI;;;AAIA;;AAEE;;AAEJ;;AAWF;;AAGE;;;AASA;;;AAMA;;;AAYA;;;AAsBJ;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":";;;;;;AAOA;;;;;;;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

@@ -32,6 +32,7 @@ import '../../Icons/GridIcon.js';
 import '../../Icons/HeartIcon.js';
 import '../../Icons/HelpIcon.js';
 import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
 import '../../Icons/InfoIcon.js';
 import '../../Icons/LastIcon.js';
 import '../../Icons/LinkIcon.js';
@@ -87,11 +88,17 @@ 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';
-import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
 import { breadcrumbsListRecipe, breadcrumbsRootRecipe } from './Breadcrumbs.css.js';
+import { BreadcrumbSeparator } from './BreadcrumbSeparator.js';
 
 function isComponentElement(child, component) {
     return React.isValidElement(child) && child.type === component;
@@ -154,7 +161,11 @@ const Breadcrumbs = /*#__PURE__*/ React.memo(({ separator = jsx(ArrowRightIcon,
             .join(' / ');
         const collapsedTrail = [
             ...visibleBefore,
-            jsx(BreadcrumbEllipsis, { onClick: expandable ? () => setExpanded(true) : undefined, tooltip: collapsedLabels || undefined }, "breadcrumb-ellipsis"),
+            jsx(BreadcrumbEllipsis, { onClick: expandable
+                    ? () => {
+                        setExpanded(true);
+                    }
+                    : undefined, tooltip: collapsedLabels || undefined }, "breadcrumb-ellipsis"),
             ...visibleAfter,
         ];
         return withSeparators(collapsedTrail, separator);

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;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;;AAMA;;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

@@ -1,46 +1,52 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { ContextMenu as ContextMenu$1 } from '@base-ui/react/context-menu';
-import { CheckIcon } from '../../Icons/CheckIcon.js';
-import { CircleIcon } from '../../Icons/CircleIcon.js';
-import { Text } from '../../primitives/Text/Text.js';
+import React from 'react';
+import { menuContentStyle } from '../Menu/Menu.css.js';
+import { MenuGapContext, DEFAULT_MENU_GAP } from '../Menu/MenuGapContext.js';
 import { cx } from '../../../utils/cx.js';
-import { Menu } from '../Menu/Menu.js';
-import { useMenu, createItemClickHandler } from '../Menu/useMenu.js';
-import { renderItemWithSubmenu } from '../Menu/Menu.helpers.js';
-import { separatorStyle, menuContentStyle } from '../Menu/Menu.css.js';
-import { useContextMenuTarget } from './useContextMenuTarget.js';
 
-function ContextMenu({ config, selectedItems = {}, onChange, children, payload, checkboxIcon = jsx(CheckIcon, { size: "sm" }), radioIcon = jsx(CircleIcon, { size: "sm" }), disabled = false, className, style, testId, ref, ...rest }) {
-    const { handleItemClick, isItemSelected, toggleSubmenu } = useMenu(selectedItems, onChange);
-    const { context, onContextMenuCapture } = useContextMenuTarget(payload);
-    const resolvedConfig = useMemo(() => {
-        return typeof config === 'function' ? config(context) : config;
-    }, [config, context]);
-    const menuItems = useMemo(() => {
-        return resolvedConfig.groups.map((group, groupIndex) => {
-            const items = group.items.map(item => {
-                const isSelected = isItemSelected(group.id, item.id);
-                const clickHandler = createItemClickHandler(item, group, handleItemClick, toggleSubmenu);
-                return renderItemWithSubmenu(item, group, isSelected, checkboxIcon, radioIcon, selectedItems, clickHandler, onChange, Menu);
-            });
-            const showSeparator = groupIndex < resolvedConfig.groups.length - 1 &&
-                resolvedConfig.groups.length > 1;
-            return (jsxs(React.Fragment, { children: [jsxs(ContextMenu$1.Group, { children: [group.label && (jsx(ContextMenu$1.GroupLabel, { children: jsx(Text, { variant: "caption", color: "muted", weight: "semibold", children: group.label }) })), group.itemSelectionType === 'radio' ? (jsx(ContextMenu$1.RadioGroup, { value: selectedItems[group.id]?.[0] ?? '', children: items })) : (items)] }), showSeparator && (jsx(ContextMenu$1.Separator, { className: separatorStyle }))] }, group.id));
-        });
-    }, [
-        resolvedConfig,
-        isItemSelected,
-        handleItemClick,
-        toggleSubmenu,
-        checkboxIcon,
-        radioIcon,
-        selectedItems,
-        onChange,
-    ]);
-    return (jsxs(ContextMenu$1.Root, { disabled: disabled, children: [jsx(ContextMenu$1.Trigger, { onContextMenuCapture: onContextMenuCapture, style: { display: 'contents' }, children: children }), jsx(ContextMenu$1.Portal, { children: jsx(ContextMenu$1.Positioner, { children: jsx(ContextMenu$1.Popup, { ref: ref, className: cx(menuContentStyle, className), style: style, "data-testid": testId, ...rest, children: menuItems }) }) })] }));
-}
+/**
+ * Right-click context menu, built on `@base-ui/react` ContextMenu primitives.
+ *
+ * Compose the trigger area and content as children. Reuse the shared `Menu.*`
+ * primitives for items, or pass a fully custom panel into
+ * `ContextMenu.Content`. Define separate menus per area by giving each area its
+ * own `ContextMenu`.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenu.Trigger>
+ *     <div className="viewport">Right-click me</div>
+ *   </ContextMenu.Trigger>
+ *   <ContextMenu.Content>
+ *     <Menu.Item icon={<CutIcon />} shortcut="⌘X">Cut</Menu.Item>
+ *     <Menu.Item icon={<CopyIcon />} shortcut="⌘C">Copy</Menu.Item>
+ *   </ContextMenu.Content>
+ * </ContextMenu>
+ * ```
+ */
+const ContextMenuRoot = ({ children, open, defaultOpen, onOpenChange, disabled, gap = DEFAULT_MENU_GAP, ref, }) => {
+    const actionsRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => ({ close: () => actionsRef.current?.close() }), []);
+    return (jsx(MenuGapContext.Provider, { value: gap, children: jsx(ContextMenu$1.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, disabled: disabled, actionsRef: actionsRef, children: children }) }));
+};
+ContextMenuRoot.displayName = 'ContextMenu';
+const ContextMenuTrigger = ({ children, render, className, style, testId, ref, ...rest }) => (jsx(ContextMenu$1.Trigger, { ref: ref, render: render, className: className, 
+    // With `render`, the user's element is the trigger, so no wrapper is
+    // 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 }) }) }));
+ContextMenuContent.displayName = 'ContextMenu.Content';
+/**
+ * Compound ContextMenu API. Items reuse the shared `Menu.*` primitives.
+ */
+const ContextMenu = /*#__PURE__*/ Object.assign(ContextMenuRoot, {
+    Trigger: ContextMenuTrigger,
+    Content: ContextMenuContent,
+});
 
 export { ContextMenu };
 //# sourceMappingURL=ContextMenu.js.map

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":";;;;;;;;;;;;;;AAeM;AAeJ;;AAMA;AACE;AACF;AAEA;;;AAGM;AACA;;AAkBF;;AAIE;;AA2BJ;AACF;;;;;;;;;AASC;AAED;AAuBF;;"}
+{"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 { menuContentStyle } 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>\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":";;;;;;;;AAmBA;;;;;;;;;;;;;;;;;;;;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,16 +1,13 @@
-import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-DD0c5D10.css';
+import './../../../assets/src/components/navigation/Menu/Menu.css.ts.vanilla-B5iVe5S2.css';
 
-var checkboxItemStyle = 'Menu_interactiveItemBase__1pkkb711';
-var chevronIconStyle = 'Menu_chevronIconStyle__1pkkb717';
-var iconContainerStyle = 'Menu_iconContainerStyle__1pkkb714';
-var iconHiddenStyle = 'Menu_iconHiddenStyle__1pkkb716';
-var iconVisibleStyle = 'Menu_iconVisibleStyle__1pkkb715';
+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 menuItemContentStyle = 'Menu_menuItemContentStyle__1pkkb713';
-var menuItemDisabledStyle = 'Menu_menuItemDisabledStyle__1pkkb712';
-var menuItemStyle = 'Menu_interactiveItemBase__1pkkb711';
-var radioItemStyle = 'Menu_interactiveItemBase__1pkkb711';
-var separatorStyle = 'Menu_separatorStyle__1pkkb718';
+var menuItemStyle = 'Menu_menuItemStyle__1pkkb711';
+var separatorStyle = 'Menu_separatorStyle__1pkkb717';
+var shortcutStyle = 'Menu_shortcutStyle__1pkkb715';
 
-export { checkboxItemStyle, chevronIconStyle, iconContainerStyle, iconHiddenStyle, iconVisibleStyle, menuContentStyle, menuItemContentStyle, menuItemDisabledStyle, menuItemStyle, radioItemStyle, separatorStyle };
+export { groupLabelStyle, itemEndSlotStyle, itemLabelStyle, itemStartSlotStyle, menuContentStyle, menuItemStyle, 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":";;;;;;;;;;;;;"}