@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/overlays/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/react/core/overlays/Popover.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Popover & Menu Components\r\n * \r\n * General-purpose popover for dropdown menus, sort controls, action menus,\r\n * and contextual information. Portal-rendered with auto-positioning.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent with Dialog/Tooltip styling\r\n * - Focus trap for keyboard navigation\r\n * - Escape to close\r\n * - Click outside to close\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <Popover\r\n *   trigger={<Button variant=\"secondary\">Sort</Button>}\r\n *   placement=\"bottom-start\"\r\n * >\r\n *   <Menu>\r\n *     <Menu.Item onClick={...}>Sort by Time</Menu.Item>\r\n *     <Menu.Item onClick={...}>Sort by Name</Menu.Item>\r\n *     <Menu.Divider />\r\n *     <Menu.Item onClick={...} destructive>Clear All</Menu.Item>\r\n *   </Menu>\r\n * </Popover>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useRef, useEffect, useCallback, createContext, useContext } from 'react';\r\nimport { useTheme } from '../../theme';\r\n\r\n// ─── Popover ─────────────────────────────────────────────────────────────────\r\n\r\nexport type PopoverPlacement = \r\n  | 'top' | 'top-start' | 'top-end'\r\n  | 'bottom' | 'bottom-start' | 'bottom-end'\r\n  | 'left' | 'left-start' | 'left-end'\r\n  | 'right' | 'right-start' | 'right-end';\r\n\r\nexport interface PopoverProps {\r\n  /** Trigger element */\r\n  trigger: React.ReactElement;\r\n  /** Popover content */\r\n  children: React.ReactNode;\r\n  /** Placement relative to trigger */\r\n  placement?: PopoverPlacement;\r\n  /** Open on hover instead of click */\r\n  hover?: boolean;\r\n  /** Controlled open state */\r\n  open?: boolean;\r\n  /** Controlled open change */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /** Close on content click */\r\n  closeOnClick?: boolean;\r\n  /** Width: 'trigger' matches trigger width, number for px, 'auto' */\r\n  width?: 'trigger' | 'auto' | number;\r\n  /** Custom style for popover panel */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst PopoverContext = createContext<{ close: () => void }>({ close: () => {} });\r\n\r\nexport const Popover = memo(function Popover({\r\n  trigger,\r\n  children,\r\n  placement = 'bottom-start',\r\n  hover = false,\r\n  open: controlledOpen,\r\n  onOpenChange,\r\n  closeOnClick = true,\r\n  width = 'auto',\r\n  style,\r\n}: PopoverProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const [internalOpen, setInternalOpen] = useState(false);\r\n  const triggerRef = useRef<HTMLDivElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();\r\n  \r\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\r\n  \r\n  const setOpen = useCallback((val: boolean) => {\r\n    if (controlledOpen === undefined) setInternalOpen(val);\r\n    onOpenChange?.(val);\r\n  }, [controlledOpen, onOpenChange]);\r\n  \r\n  const close = useCallback(() => setOpen(false), [setOpen]);\r\n  \r\n  // Click outside\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: MouseEvent) => {\r\n      if (\r\n        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&\r\n        popoverRef.current && !popoverRef.current.contains(e.target as Node)\r\n      ) {\r\n        close();\r\n      }\r\n    };\r\n    document.addEventListener('mousedown', handler);\r\n    return () => document.removeEventListener('mousedown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  // Escape key + cleanup hoverTimeout on unmount\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') close();\r\n    };\r\n    document.addEventListener('keydown', handler);\r\n    return () => document.removeEventListener('keydown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  useEffect(() => {\r\n    return () => { clearTimeout(hoverTimeout.current); };\r\n  }, []);\r\n  \r\n  // Position calculation — `positioned` gates visibility so the panel is never\r\n  // painted in document flow before the first RAF resolves coordinates.\r\n  const [position, setPosition] = useState<React.CSSProperties>({});\r\n  const [positioned, setPositioned] = useState(false);\r\n\r\n  // Reset visibility guard whenever the popover closes so the next open starts\r\n  // hidden again rather than flashing the stale coordinates for one frame.\r\n  useEffect(() => {\r\n    if (!isOpen) setPositioned(false);\r\n  }, [isOpen]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen || !triggerRef.current) return;\r\n    const gap = 8;\r\n    const viewportPadding = 8;\r\n\r\n    const updatePosition = () => {\r\n      const rect = triggerRef.current?.getBoundingClientRect();\r\n      if (!rect) return;\r\n\r\n      const panelWidth = width === 'trigger'\r\n        ? rect.width\r\n        : typeof width === 'number'\r\n          ? width\r\n          : (popoverRef.current?.offsetWidth ?? 220);\r\n      const panelHeight = popoverRef.current?.offsetHeight ?? 220;\r\n\r\n      let left = rect.left;\r\n      let top = rect.bottom + gap;\r\n\r\n      if (placement.startsWith('top')) {\r\n        top = rect.top - panelHeight - gap;\r\n      } else if (placement.startsWith('bottom')) {\r\n        top = rect.bottom + gap;\r\n      } else if (placement.startsWith('left')) {\r\n        left = rect.left - panelWidth - gap;\r\n      } else if (placement.startsWith('right')) {\r\n        left = rect.right + gap;\r\n      }\r\n\r\n      if (placement.startsWith('top') || placement.startsWith('bottom')) {\r\n        if (placement.endsWith('-start')) {\r\n          left = rect.left;\r\n        } else if (placement.endsWith('-end')) {\r\n          left = rect.right - panelWidth;\r\n        } else {\r\n          left = rect.left + (rect.width - panelWidth) / 2;\r\n        }\r\n      } else {\r\n        if (placement.endsWith('-start')) {\r\n          top = rect.top;\r\n        } else if (placement.endsWith('-end')) {\r\n          top = rect.bottom - panelHeight;\r\n        } else {\r\n          top = rect.top + (rect.height - panelHeight) / 2;\r\n        }\r\n      }\r\n\r\n      left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));\r\n      top = Math.max(viewportPadding, Math.min(top, window.innerHeight - panelHeight - viewportPadding));\r\n\r\n      const pos: React.CSSProperties = {\r\n        position: 'fixed',\r\n        zIndex: 9990,\r\n        left,\r\n        top,\r\n      };\r\n\r\n      if (width === 'trigger') {\r\n        pos.width = rect.width;\r\n        pos.minWidth = rect.width;\r\n      } else if (typeof width === 'number') {\r\n        pos.width = width;\r\n      }\r\n\r\n      setPosition(pos);\r\n      setPositioned(true);\r\n    };\r\n\r\n    const raf = requestAnimationFrame(updatePosition);\r\n    window.addEventListener('resize', updatePosition);\r\n    window.addEventListener('scroll', updatePosition, true);\r\n    return () => {\r\n      cancelAnimationFrame(raf);\r\n      window.removeEventListener('resize', updatePosition);\r\n      window.removeEventListener('scroll', updatePosition, true);\r\n    };\r\n  }, [isOpen, placement, width]);\r\n  \r\n  const triggerProps: Record<string, (() => void) | undefined> = {};\r\n  if (hover) {\r\n    triggerProps.onMouseEnter = () => {\r\n      clearTimeout(hoverTimeout.current);\r\n      setOpen(true);\r\n    };\r\n    triggerProps.onMouseLeave = () => {\r\n      hoverTimeout.current = setTimeout(close, 150);\r\n    };\r\n  } else {\r\n    triggerProps.onClick = () => setOpen(!isOpen);\r\n  }\r\n  \r\n  const popoverHoverProps = hover ? {\r\n    onMouseEnter: () => clearTimeout(hoverTimeout.current),\r\n    onMouseLeave: () => { hoverTimeout.current = setTimeout(close, 150); },\r\n  } : {};\r\n  \r\n  return (\r\n    <PopoverContext.Provider value={{ close }}>\r\n      <div ref={triggerRef} style={{ display: 'inline-flex' }} aria-expanded={isOpen} aria-haspopup=\"true\" {...triggerProps}>\r\n        {trigger}\r\n      </div>\r\n      \r\n      {isOpen && (\r\n        <div\r\n          ref={popoverRef}\r\n          role=\"dialog\"\r\n          onClick={closeOnClick ? close : undefined}\r\n          {...popoverHoverProps}\r\n          style={{\r\n            ...position,\r\n            visibility: positioned ? 'visible' : 'hidden',\r\n            backgroundColor: isTransparentTheme\r\n              ? 'rgba(15, 12, 30, 0.85)'\r\n              : tokens.colors.background.elevated,\r\n            border: `1px solid ${tokens.colors.border.muted}`,\r\n            borderRadius: tokens.borderRadius.md,\r\n            boxShadow: tokens.shadows.lg,\r\n            padding: tokens.spacing.xs,\r\n            maxWidth: 'min(320px, calc(100vw - 16px))',\r\n            fontFamily: tokens.typography.fontFamily.primary,\r\n            animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,\r\n            ...(isTransparentTheme ? {\r\n              backdropFilter: 'blur(16px)',\r\n              WebkitBackdropFilter: 'blur(16px)',\r\n            } : {}),\r\n            ...style,\r\n          }}\r\n        >\r\n          {children}\r\n        </div>\r\n      )}\r\n      \r\n      <style>{`\r\n        @keyframes zendir-popover-enter {\r\n          from { opacity: 0; transform: translateY(-4px) scale(0.98); }\r\n          to { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n      `}</style>\r\n    </PopoverContext.Provider>\r\n  );\r\n});\r\n\r\n// ─── Menu ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuProps {\r\n  children: React.ReactNode;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst MenuRoot = memo(function Menu({ children, style }: MenuProps): React.ReactElement {\r\n  return (\r\n    <div role=\"menu\" style={{ minWidth: 'min(160px, calc(100vw - 32px))', ...style }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Menu.Item ───────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuItemProps {\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n  /** Icon (ReactNode or IconName string) */\r\n  icon?: React.ReactNode;\r\n  /** Label text */\r\n  children: React.ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Destructive action (red text) */\r\n  destructive?: boolean;\r\n  /** Keyboard shortcut hint */\r\n  shortcut?: string;\r\n}\r\n\r\nconst MenuItem = memo(function MenuItem({\r\n  onClick,\r\n  icon,\r\n  children,\r\n  disabled = false,\r\n  destructive = false,\r\n  shortcut,\r\n}: MenuItemProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { close } = useContext(PopoverContext);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  \r\n  const handleClick = useCallback(() => {\r\n    if (disabled) return;\r\n    onClick?.();\r\n    close();\r\n  }, [disabled, onClick, close]);\r\n  \r\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\r\n    const item = e.currentTarget;\r\n    const siblings = item.parentElement?.querySelectorAll('[role=\"menuitem\"]:not([disabled])');\r\n    if (!siblings) return;\r\n    const items = Array.from(siblings) as HTMLElement[];\r\n    const idx = items.indexOf(item as HTMLElement);\r\n    \r\n    if (e.key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      items[(idx + 1) % items.length]?.focus();\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      items[(idx - 1 + items.length) % items.length]?.focus();\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault();\r\n      items[0]?.focus();\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault();\r\n      items[items.length - 1]?.focus();\r\n    }\r\n  }, []);\r\n  \r\n  const color = destructive\r\n    ? tokens.colors.status.critical\r\n    : disabled\r\n      ? tokens.colors.text.tertiary\r\n      : tokens.colors.text.primary;\r\n  \r\n  return (\r\n    <button\r\n      role=\"menuitem\"\r\n      tabIndex={disabled ? -1 : 0}\r\n      onClick={handleClick}\r\n      onKeyDown={handleKeyDown}\r\n      disabled={disabled}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={() => setIsHovered(false)}\r\n      style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        gap: tokens.spacing.sm,\r\n        width: '100%',\r\n        padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,\r\n        minHeight: 44,\r\n        border: 'none',\r\n        background: isHovered && !disabled\r\n          ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12`\r\n          : 'transparent',\r\n        color,\r\n        fontSize: tokens.typography.fontSize.sm,\r\n        fontWeight: tokens.typography.fontWeight.normal,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        cursor: disabled ? 'not-allowed' : 'pointer',\r\n        borderRadius: tokens.borderRadius.sm,\r\n        textAlign: 'left',\r\n        transition: tokens.animation.fast,\r\n        opacity: disabled ? 0.5 : 1,\r\n        outline: 'none',\r\n      }}\r\n    >\r\n      {icon && <span style={{ flexShrink: 0, display: 'flex' }}>{icon}</span>}\r\n      <span style={{ flex: 1 }}>{children}</span>\r\n      {shortcut && (\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          color: tokens.colors.text.tertiary,\r\n          fontFamily: tokens.typography.fontFamily.mono,\r\n          flexShrink: 0,\r\n        }}>\r\n          {shortcut}\r\n        </span>\r\n      )}\r\n    </button>\r\n  );\r\n});\r\n\r\n// ─── Menu.Divider ────────────────────────────────────────────────────────────\r\n\r\nconst MenuDivider = memo(function MenuDivider(): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div\r\n      role=\"separator\"\r\n      style={{\r\n        height: '1px',\r\n        backgroundColor: tokens.colors.border.muted,\r\n        margin: `${tokens.spacing.xs} 0`,\r\n      }}\r\n    />\r\n  );\r\n});\r\n\r\n// ─── Menu.Label ──────────────────────────────────────────────────────────────\r\n\r\nconst MenuLabel = memo(function MenuLabel({ children }: { children: React.ReactNode }): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div style={{\r\n      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n      fontSize: tokens.typography.fontSize.xxs,\r\n      fontWeight: tokens.typography.fontWeight.bold,\r\n      color: tokens.colors.text.tertiary,\r\n      textTransform: 'uppercase',\r\n      letterSpacing: '0.06em',\r\n    }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype MenuComponent = typeof MenuRoot & {\r\n  Item: typeof MenuItem;\r\n  Divider: typeof MenuDivider;\r\n  Label: typeof MenuLabel;\r\n};\r\n\r\nexport const Menu: MenuComponent = Object.assign(MenuRoot, {\r\n  Item: MenuItem,\r\n  Divider: MenuDivider,\r\n  Label: MenuLabel,\r\n});\r\n\r\nexport default Popover;\r\n"],"names":["Popover","Menu","MenuItem","MenuDivider","MenuLabel"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../../src/react/core/overlays/Popover.tsx"],"sourcesContent":["/**\n * @zendir/ui - Popover & Menu Components\n *\n * General-purpose popover for dropdown menus, sort controls, action menus,\n * and contextual information. Portal-rendered with auto-positioning.\n *\n * Astro UX Compliance:\n * - Consistent with Dialog/Tooltip styling\n * - Focus trap for keyboard navigation\n * - Escape to close\n * - Click outside to close\n * - Reduced motion support\n *\n * @example\n * ```tsx\n * <Popover\n *   trigger={<Button variant=\"secondary\">Sort</Button>}\n *   placement=\"bottom-start\"\n * >\n *   <Menu>\n *     <Menu.Item onClick={...}>Sort by Time</Menu.Item>\n *     <Menu.Item onClick={...}>Sort by Name</Menu.Item>\n *     <Menu.Divider />\n *     <Menu.Item onClick={...} destructive>Clear All</Menu.Item>\n *   </Menu>\n * </Popover>\n * ```\n */\n\nimport React, {\n  memo,\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  createContext,\n  useContext,\n} from \"react\";\nimport { useTheme } from \"../../theme\";\n\n// ─── Popover ─────────────────────────────────────────────────────────────────\n\nexport type PopoverPlacement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\";\n\nexport interface PopoverProps {\n  /** Trigger element */\n  trigger: React.ReactElement;\n  /** Popover content */\n  children: React.ReactNode;\n  /** Placement relative to trigger */\n  placement?: PopoverPlacement;\n  /** Open on hover instead of click */\n  hover?: boolean;\n  /** Controlled open state */\n  open?: boolean;\n  /** Controlled open change */\n  onOpenChange?: (open: boolean) => void;\n  /** Close on content click */\n  closeOnClick?: boolean;\n  /** Width: 'trigger' matches trigger width, number for px, 'auto' */\n  width?: \"trigger\" | \"auto\" | number;\n  /** Custom style for popover panel */\n  style?: React.CSSProperties;\n}\n\nconst PopoverContext = createContext<{ close: () => void }>({\n  close: () => {},\n});\n\nexport const Popover = memo(function Popover({\n  trigger,\n  children,\n  placement = \"bottom-start\",\n  hover = false,\n  open: controlledOpen,\n  onOpenChange,\n  closeOnClick = true,\n  width = \"auto\",\n  style,\n}: PopoverProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  const [internalOpen, setInternalOpen] = useState(false);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();\n\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n  const setOpen = useCallback(\n    (val: boolean) => {\n      if (controlledOpen === undefined) setInternalOpen(val);\n      onOpenChange?.(val);\n    },\n    [controlledOpen, onOpenChange],\n  );\n\n  const close = useCallback(() => setOpen(false), [setOpen]);\n\n  // Click outside\n  useEffect(() => {\n    if (!isOpen) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        triggerRef.current &&\n        !triggerRef.current.contains(e.target as Node) &&\n        popoverRef.current &&\n        !popoverRef.current.contains(e.target as Node)\n      ) {\n        close();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [isOpen, close]);\n\n  // Escape key + cleanup hoverTimeout on unmount\n  useEffect(() => {\n    if (!isOpen) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close();\n    };\n    document.addEventListener(\"keydown\", handler);\n    return () => document.removeEventListener(\"keydown\", handler);\n  }, [isOpen, close]);\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(hoverTimeout.current);\n    };\n  }, []);\n\n  // Position calculation — `positioned` gates visibility so the panel is never\n  // painted in document flow before the first RAF resolves coordinates.\n  // Initializing with position: 'fixed' ensures that the hidden first-frame\n  // measurement doesn't get constrained by the trigger's parent container.\n  const [position, setPosition] = useState<React.CSSProperties>({\n    position: \"fixed\",\n    left: 0,\n    top: 0,\n  });\n  const [positioned, setPositioned] = useState(false);\n\n  // Reset visibility guard whenever the popover closes so the next open starts\n  // hidden again rather than flashing the stale coordinates for one frame.\n  useEffect(() => {\n    if (!isOpen) setPositioned(false);\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen || !triggerRef.current) return;\n    const gap = 8;\n    const viewportPadding = 8;\n\n    const updatePosition = () => {\n      const rect = triggerRef.current?.getBoundingClientRect();\n      if (!rect) return;\n\n      const panelWidth =\n        width === \"trigger\"\n          ? rect.width\n          : typeof width === \"number\"\n            ? width\n            : (popoverRef.current?.offsetWidth ?? 220);\n      const panelHeight = popoverRef.current?.offsetHeight ?? 220;\n\n      let left = rect.left;\n      let top = rect.bottom + gap;\n\n      if (placement.startsWith(\"top\")) {\n        top = rect.top - panelHeight - gap;\n      } else if (placement.startsWith(\"bottom\")) {\n        top = rect.bottom + gap;\n      } else if (placement.startsWith(\"left\")) {\n        left = rect.left - panelWidth - gap;\n      } else if (placement.startsWith(\"right\")) {\n        left = rect.right + gap;\n      }\n\n      if (placement.startsWith(\"top\") || placement.startsWith(\"bottom\")) {\n        if (placement.endsWith(\"-start\")) {\n          left = rect.left;\n        } else if (placement.endsWith(\"-end\")) {\n          left = rect.right - panelWidth;\n        } else {\n          left = rect.left + (rect.width - panelWidth) / 2;\n        }\n      } else {\n        if (placement.endsWith(\"-start\")) {\n          top = rect.top;\n        } else if (placement.endsWith(\"-end\")) {\n          top = rect.bottom - panelHeight;\n        } else {\n          top = rect.top + (rect.height - panelHeight) / 2;\n        }\n      }\n\n      left = Math.max(\n        viewportPadding,\n        Math.min(left, window.innerWidth - panelWidth - viewportPadding),\n      );\n      top = Math.max(\n        viewportPadding,\n        Math.min(top, window.innerHeight - panelHeight - viewportPadding),\n      );\n\n      const pos: React.CSSProperties = {\n        position: \"fixed\",\n        zIndex: 9990,\n        left,\n        top,\n      };\n\n      if (width === \"trigger\") {\n        pos.width = rect.width;\n        pos.minWidth = rect.width;\n      } else if (typeof width === \"number\") {\n        pos.width = width;\n      }\n\n      setPosition(pos);\n      setPositioned(true);\n    };\n\n    const raf = requestAnimationFrame(updatePosition);\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    return () => {\n      cancelAnimationFrame(raf);\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n    };\n  }, [isOpen, placement, width]);\n\n  const triggerProps: Record<string, (() => void) | undefined> = {};\n  if (hover) {\n    triggerProps.onMouseEnter = () => {\n      clearTimeout(hoverTimeout.current);\n      setOpen(true);\n    };\n    triggerProps.onMouseLeave = () => {\n      hoverTimeout.current = setTimeout(close, 150);\n    };\n  } else {\n    triggerProps.onClick = () => setOpen(!isOpen);\n  }\n\n  const popoverHoverProps = hover\n    ? {\n        onMouseEnter: () => clearTimeout(hoverTimeout.current),\n        onMouseLeave: () => {\n          hoverTimeout.current = setTimeout(close, 150);\n        },\n      }\n    : {};\n\n  return (\n    <PopoverContext.Provider value={{ close }}>\n      <div\n        ref={triggerRef}\n        style={{ display: \"inline-flex\" }}\n        aria-expanded={isOpen}\n        aria-haspopup=\"true\"\n        {...triggerProps}\n      >\n        {trigger}\n      </div>\n\n      {isOpen && (\n        <div\n          ref={popoverRef}\n          role=\"dialog\"\n          onClick={closeOnClick ? close : undefined}\n          {...popoverHoverProps}\n          style={{\n            ...position,\n            visibility: positioned ? \"visible\" : \"hidden\",\n            backgroundColor: isTransparentTheme\n              ? \"rgba(15, 12, 30, 0.85)\"\n              : tokens.colors.background.elevated,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.md,\n            boxShadow: tokens.shadows.lg,\n            padding: tokens.spacing.xs,\n            maxWidth: \"min(320px, calc(100vw - 16px))\",\n            fontFamily: tokens.typography.fontFamily.primary,\n            animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,\n            ...(isTransparentTheme\n              ? {\n                  backdropFilter: \"blur(16px)\",\n                  WebkitBackdropFilter: \"blur(16px)\",\n                }\n              : {}),\n            ...style,\n          }}\n        >\n          {children}\n        </div>\n      )}\n\n      <style>{`\n        @keyframes zendir-popover-enter {\n          from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n          to { opacity: 1; transform: translateY(0) scale(1); }\n        }\n      `}</style>\n    </PopoverContext.Provider>\n  );\n});\n\n// ─── Menu ────────────────────────────────────────────────────────────────────\n\nexport interface MenuProps {\n  children: React.ReactNode;\n  style?: React.CSSProperties;\n}\n\nconst MenuRoot = memo(function Menu({\n  children,\n  style,\n}: MenuProps): React.ReactElement {\n  return (\n    <div\n      role=\"menu\"\n      style={{ minWidth: \"min(160px, calc(100vw - 32px))\", ...style }}\n    >\n      {children}\n    </div>\n  );\n});\n\n// ─── Menu.Item ───────────────────────────────────────────────────────────────\n\nexport interface MenuItemProps {\n  /** Click handler */\n  onClick?: () => void;\n  /** Icon (ReactNode or IconName string) */\n  icon?: React.ReactNode;\n  /** Label text */\n  children: React.ReactNode;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Destructive action (red text) */\n  destructive?: boolean;\n  /** Keyboard shortcut hint */\n  shortcut?: string;\n}\n\nconst MenuItem = memo(function MenuItem({\n  onClick,\n  icon,\n  children,\n  disabled = false,\n  destructive = false,\n  shortcut,\n}: MenuItemProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { close } = useContext(PopoverContext);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    onClick?.();\n    close();\n  }, [disabled, onClick, close]);\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    const item = e.currentTarget;\n    const siblings = item.parentElement?.querySelectorAll(\n      '[role=\"menuitem\"]:not([disabled])',\n    );\n    if (!siblings) return;\n    const items = Array.from(siblings) as HTMLElement[];\n    const idx = items.indexOf(item as HTMLElement);\n\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      items[(idx + 1) % items.length]?.focus();\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      items[(idx - 1 + items.length) % items.length]?.focus();\n    } else if (e.key === \"Home\") {\n      e.preventDefault();\n      items[0]?.focus();\n    } else if (e.key === \"End\") {\n      e.preventDefault();\n      items[items.length - 1]?.focus();\n    }\n  }, []);\n\n  const color = destructive\n    ? tokens.colors.status.critical\n    : disabled\n      ? tokens.colors.text.tertiary\n      : tokens.colors.text.primary;\n\n  return (\n    <button\n      role=\"menuitem\"\n      tabIndex={disabled ? -1 : 0}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      disabled={disabled}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: tokens.spacing.sm,\n        width: \"100%\",\n        padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,\n        minHeight: 44,\n        border: \"none\",\n        background:\n          isHovered && !disabled\n            ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12`\n            : \"transparent\",\n        color,\n        fontSize: tokens.typography.fontSize.sm,\n        fontWeight: tokens.typography.fontWeight.normal,\n        fontFamily: tokens.typography.fontFamily.primary,\n        cursor: disabled ? \"not-allowed\" : \"pointer\",\n        borderRadius: tokens.borderRadius.sm,\n        textAlign: \"left\",\n        transition: tokens.animation.fast,\n        opacity: disabled ? 0.5 : 1,\n        outline: \"none\",\n      }}\n    >\n      {icon && <span style={{ flexShrink: 0, display: \"flex\" }}>{icon}</span>}\n      <span style={{ flex: 1 }}>{children}</span>\n      {shortcut && (\n        <span\n          style={{\n            fontSize: tokens.typography.fontSize.xxs,\n            color: tokens.colors.text.tertiary,\n            fontFamily: tokens.typography.fontFamily.mono,\n            flexShrink: 0,\n          }}\n        >\n          {shortcut}\n        </span>\n      )}\n    </button>\n  );\n});\n\n// ─── Menu.Divider ────────────────────────────────────────────────────────────\n\nconst MenuDivider = memo(function MenuDivider(): React.ReactElement {\n  const { tokens } = useTheme();\n  return (\n    <div\n      role=\"separator\"\n      style={{\n        height: \"1px\",\n        backgroundColor: tokens.colors.border.muted,\n        margin: `${tokens.spacing.xs} 0`,\n      }}\n    />\n  );\n});\n\n// ─── Menu.Label ──────────────────────────────────────────────────────────────\n\nconst MenuLabel = memo(function MenuLabel({\n  children,\n}: {\n  children: React.ReactNode;\n}): React.ReactElement {\n  const { tokens } = useTheme();\n  return (\n    <div\n      style={{\n        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n        fontSize: tokens.typography.fontSize.xxs,\n        fontWeight: tokens.typography.fontWeight.bold,\n        color: tokens.colors.text.tertiary,\n        textTransform: \"uppercase\",\n        letterSpacing: \"0.06em\",\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\n// ─── Compound Export ─────────────────────────────────────────────────────────\n\ntype MenuComponent = typeof MenuRoot & {\n  Item: typeof MenuItem;\n  Divider: typeof MenuDivider;\n  Label: typeof MenuLabel;\n};\n\nexport const Menu: MenuComponent = Object.assign(MenuRoot, {\n  Item: MenuItem,\n  Divider: MenuDivider,\n  Label: MenuLabel,\n});\n\nexport default Popover;\n"],"mappings":"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"}

package/dist/react/core/overlays/SidePanel.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type SidePanelPosition = 'left' | 'right';
+export type SidePanelPosition = "left" | "right";
 export interface SidePanelProps {
     /** Whether the panel is open */
     open: boolean;

package/dist/react/core/overlays/SidePanel.js

@@ -1,216 +1,221 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { memo, useRef, useState, useEffect, useCallback } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { classNames } from "../../utils/index.js";
 import { useBreakpoint } from "../layout/useBreakpoint.js";
-let sidePanelInstanceCount = 0;
-const SidePanel = memo(function SidePanel2({
-  open,
-  onClose,
-  title,
-  width = 380,
-  position = "right",
-  showCloseButton = true,
-  closeOnEscape = true,
-  overlay = false,
-  closeOnOverlayClick = true,
-  children,
-  headerActions,
-  headerLeading,
-  onHeaderClick,
-  headerStyle: headerStyleProp,
-  className = "",
-  style: styleProp
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const panelRef = useRef(null);
-  const [animState, setAnimState] = useState("closed");
-  useRef(++sidePanelInstanceCount);
-  const { isMobile } = useBreakpoint();
-  const resolvedWidth = isMobile ? "100%" : typeof width === "number" ? `${width}px` : width;
-  useEffect(() => {
-    if (open) {
-      setAnimState("opening");
-      const timer = setTimeout(() => setAnimState("open"), 30);
-      return () => clearTimeout(timer);
-    } else {
-      if (animState === "open" || animState === "opening") {
-        setAnimState("closing");
-        const timer = setTimeout(() => setAnimState("closed"), 550);
-        return () => clearTimeout(timer);
-      }
-    }
-  }, [open]);
-  const handleKeyDown = useCallback((e) => {
-    if (closeOnEscape && e.key === "Escape") {
-      onClose();
-    }
-  }, [closeOnEscape, onClose]);
-  useEffect(() => {
-    if (open) {
-      document.addEventListener("keydown", handleKeyDown);
-      return () => document.removeEventListener("keydown", handleKeyDown);
-    }
-  }, [open, handleKeyDown]);
-  if (animState === "closed") return null;
-  const isVisible = animState === "open";
-  const slideFrom = position === "right" ? "translateX(100%)" : "translateX(-100%)";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    overlay && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "zendir-sidepanel-overlay",
-        onClick: closeOnOverlayClick ? onClose : void 0,
-        style: {
-          position: "fixed",
-          inset: 0,
-          backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}4D` : `${tokens.colors.background.base}66`,
-          backdropFilter: isTransparentTheme ? "blur(2px)" : void 0,
-          WebkitBackdropFilter: isTransparentTheme ? "blur(2px)" : void 0,
-          zIndex: 999,
-          opacity: isVisible ? 1 : 0,
-          transition: "opacity 0.3s ease",
-          pointerEvents: isVisible ? "auto" : "none"
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: panelRef,
-        className: classNames("zendir-sidepanel", className),
-        style: {
-          width: isVisible ? resolvedWidth : "0px",
-          minWidth: isVisible ? resolvedWidth : "0px",
-          maxWidth: resolvedWidth,
-          height: "100%",
-          overflow: "hidden",
-          transition: "width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), min-width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)",
-          flexShrink: 0,
-          position: "relative",
-          zIndex: overlay ? 1e3 : "auto",
-          ...overlay && { position: "fixed", top: 0, [position]: 0 },
-          ...styleProp
-        },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              width: resolvedWidth,
-              height: "100%",
-              display: "flex",
-              flexDirection: "column",
-              backgroundColor: isTransparentTheme ? "rgba(15, 15, 35, 0.85)" : tokens.colors.background.surface,
-              ...isTransparentTheme && {
-                backdropFilter: "blur(16px)",
-                WebkitBackdropFilter: "blur(16px)"
-              },
-              borderLeft: position === "right" ? tokens.borders.divider : void 0,
-              borderRight: position === "left" ? tokens.borders.divider : void 0,
-              transform: isVisible ? "translateX(0)" : slideFrom,
-              transition: "transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)",
-              overflow: "hidden"
-            },
-            children: [
-              (title || showCloseButton || headerActions || headerLeading) && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  onClick: onHeaderClick,
-                  role: onHeaderClick ? "button" : void 0,
-                  tabIndex: onHeaderClick ? 0 : void 0,
-                  onKeyDown: onHeaderClick ? (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      onHeaderClick();
-                    }
-                  } : void 0,
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    padding: `${tokens.spacing.md} ${tokens.spacing.md}`,
-                    borderBottom: tokens.borders.divider,
-                    flexShrink: 0,
-                    gap: tokens.spacing.sm,
-                    ...onHeaderClick && { cursor: "pointer" },
-                    ...headerStyleProp
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.sm, flex: 1, minWidth: 0 }, children: [
-                      headerLeading,
-                      title && /* @__PURE__ */ jsx(
-                        "h3",
-                        {
-                          style: {
-                            margin: 0,
-                            fontSize: tokens.typography.fontSize.base,
-                            fontWeight: tokens.typography.fontWeight.semibold,
-                            color: tokens.colors.text.primary,
-                            whiteSpace: "nowrap",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis"
-                          },
-                          children: title
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: tokens.spacing.xs, flexShrink: 0 }, children: [
-                      headerActions,
-                      showCloseButton && /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: onClose,
-                          "aria-label": "Close panel",
-                          style: {
-                            padding: tokens.spacing.sm,
-                            minWidth: 44,
-                            minHeight: 44,
-                            backgroundColor: "transparent",
-                            border: "none",
-                            borderRadius: tokens.borderRadius.sm,
-                            cursor: "pointer",
-                            color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            transition: `color 0.15s ease, background-color 0.15s ease`
-                          },
-                          onMouseEnter: (e) => {
-                            e.currentTarget.style.color = tokens.colors.text.primary;
-                            e.currentTarget.style.backgroundColor = tokens.colors.background.base;
-                          },
-                          onMouseLeave: (e) => {
-                            e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;
-                            e.currentTarget.style.backgroundColor = "transparent";
-                          },
-                          children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    flex: 1,
-                    overflow: "auto",
-                    minHeight: 0
-                  },
-                  children
-                }
-              )
-            ]
-          }
-        )
-      }
-    )
-  ] });
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/overlays/SidePanel.tsx
+/**
+* @zendir/ui - SidePanel Component
+*
+* A sliding panel that pushes content instead of overlaying it.
+* Designed to be placed as a flex sibling so the parent layout
+* naturally adjusts when the panel opens/closes.
+*
+* Features:
+* - Push-content behavior (flex sibling, content adjusts automatically)
+* - Smooth slide-in/out animation
+* - Configurable width, position (left/right)
+* - Optional overlay backdrop (for modal-like behavior)
+* - Theme-integrated via useTheme()
+* - Accessible (focus trap, keyboard support)
+* - Close on escape key
+*
+* @example
+* ```tsx
+* // Push-content pattern: SidePanel as flex sibling
+* <div style={{ display: 'flex', height: '100vh' }}>
+*   <main style={{ flex: 1, transition: 'all 0.3s ease' }}>
+*     {children}
+*   </main>
+*   <SidePanel
+*     open={isChatOpen}
+*     onClose={() => setIsChatOpen(false)}
+*     title="Chat Assistant"
+*     width={380}
+*   >
+*     <ChatPanel messages={messages} onSend={handleSend} />
+*   </SidePanel>
+* </div>
+* ```
+*/
+var sidePanelInstanceCount = 0;
+var SidePanel = memo(function SidePanel({ open, onClose, title, width = 380, position = "right", showCloseButton = true, closeOnEscape = true, overlay = false, closeOnOverlayClick = true, children, headerActions, headerLeading, onHeaderClick, headerStyle: headerStyleProp, className = "", style: styleProp }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const panelRef = useRef(null);
+	const [animState, setAnimState] = useState("closed");
+	useRef(++sidePanelInstanceCount);
+	const { isMobile } = useBreakpoint();
+	const resolvedWidth = isMobile ? "100%" : typeof width === "number" ? `${width}px` : width;
+	useEffect(() => {
+		if (open) {
+			setAnimState("opening");
+			const timer = setTimeout(() => setAnimState("open"), 30);
+			return () => clearTimeout(timer);
+		} else if (animState === "open" || animState === "opening") {
+			setAnimState("closing");
+			const timer = setTimeout(() => setAnimState("closed"), 550);
+			return () => clearTimeout(timer);
+		}
+	}, [open]);
+	const handleKeyDown = useCallback((e) => {
+		if (closeOnEscape && e.key === "Escape") onClose();
+	}, [closeOnEscape, onClose]);
+	useEffect(() => {
+		if (open) {
+			document.addEventListener("keydown", handleKeyDown);
+			return () => document.removeEventListener("keydown", handleKeyDown);
+		}
+	}, [open, handleKeyDown]);
+	if (animState === "closed") return null;
+	const isVisible = animState === "open";
+	const slideFrom = position === "right" ? "translateX(100%)" : "translateX(-100%)";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [overlay && /* @__PURE__ */ jsx("div", {
+		className: "zendir-sidepanel-overlay",
+		onClick: closeOnOverlayClick ? onClose : void 0,
+		style: {
+			position: "fixed",
+			inset: 0,
+			backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}4D` : `${tokens.colors.background.base}66`,
+			backdropFilter: isTransparentTheme ? "blur(2px)" : void 0,
+			WebkitBackdropFilter: isTransparentTheme ? "blur(2px)" : void 0,
+			zIndex: 999,
+			opacity: isVisible ? 1 : 0,
+			transition: "opacity 0.3s ease",
+			pointerEvents: isVisible ? "auto" : "none"
+		}
+	}), /* @__PURE__ */ jsx("div", {
+		ref: panelRef,
+		className: classNames("zendir-sidepanel", className),
+		style: {
+			width: isVisible ? resolvedWidth : "0px",
+			minWidth: isVisible ? resolvedWidth : "0px",
+			maxWidth: resolvedWidth,
+			height: "100%",
+			overflow: "hidden",
+			transition: "width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), min-width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)",
+			flexShrink: 0,
+			position: "relative",
+			zIndex: overlay ? 1e3 : "auto",
+			...overlay && {
+				position: "fixed",
+				top: 0,
+				[position]: 0
+			},
+			...styleProp
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				width: resolvedWidth,
+				height: "100%",
+				display: "flex",
+				flexDirection: "column",
+				backgroundColor: isTransparentTheme ? "rgba(15, 15, 35, 0.85)" : tokens.colors.background.surface,
+				...isTransparentTheme && {
+					backdropFilter: "blur(16px)",
+					WebkitBackdropFilter: "blur(16px)"
+				},
+				borderLeft: position === "right" ? tokens.borders.divider : void 0,
+				borderRight: position === "left" ? tokens.borders.divider : void 0,
+				transform: isVisible ? "translateX(0)" : slideFrom,
+				transition: "transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)",
+				overflow: "hidden"
+			},
+			children: [(title || showCloseButton || headerActions || headerLeading) && /* @__PURE__ */ jsxs("div", {
+				onClick: onHeaderClick,
+				role: onHeaderClick ? "button" : void 0,
+				tabIndex: onHeaderClick ? 0 : void 0,
+				onKeyDown: onHeaderClick ? (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						onHeaderClick();
+					}
+				} : void 0,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					padding: `${tokens.spacing.md} ${tokens.spacing.md}`,
+					borderBottom: tokens.borders.divider,
+					flexShrink: 0,
+					gap: tokens.spacing.sm,
+					...onHeaderClick && { cursor: "pointer" },
+					...headerStyleProp
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.sm,
+						flex: 1,
+						minWidth: 0
+					},
+					children: [headerLeading, title && /* @__PURE__ */ jsx("h3", {
+						style: {
+							margin: 0,
+							fontSize: tokens.typography.fontSize.base,
+							fontWeight: tokens.typography.fontWeight.semibold,
+							color: tokens.colors.text.primary,
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis"
+						},
+						children: title
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.xs,
+						flexShrink: 0
+					},
+					children: [headerActions, showCloseButton && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: onClose,
+						"aria-label": "Close panel",
+						style: {
+							padding: tokens.spacing.sm,
+							minWidth: 44,
+							minHeight: 44,
+							backgroundColor: "transparent",
+							border: "none",
+							borderRadius: tokens.borderRadius.sm,
+							cursor: "pointer",
+							color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							transition: `color 0.15s ease, background-color 0.15s ease`
+						},
+						onMouseEnter: (e) => {
+							e.currentTarget.style.color = tokens.colors.text.primary;
+							e.currentTarget.style.backgroundColor = tokens.colors.background.base;
+						},
+						onMouseLeave: (e) => {
+							e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;
+							e.currentTarget.style.backgroundColor = "transparent";
+						},
+						children: /* @__PURE__ */ jsx("svg", {
+							width: "20",
+							height: "20",
+							viewBox: "0 0 24 24",
+							fill: "currentColor",
+							children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+						})
+					})]
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				style: {
+					flex: 1,
+					overflow: "auto",
+					minHeight: 0
+				},
+				children
+			})]
+		})
+	})] });
 });
-export {
-  SidePanel
-};
-//# sourceMappingURL=SidePanel.js.map
+//#endregion
+export { SidePanel, SidePanel as default };
+
+//# sourceMappingURL=SidePanel.js.map