@acronis-platform/ui-react 4.0.0 → 5.0.0

package/dist/components/ui/app-shell-chat/app-shell-chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell-chat.js","sources":["../../../../src/components/ui/app-shell-chat/app-shell-chat.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AcronisIcon } from '@acronis-platform/icons-react/solid-mono';\n\nimport { cn } from '@/lib/utils';\nimport { useDocDir } from '@/lib/use-doc-dir';\nimport {\n  BREAKPOINT_XL,\n  BREAKPOINT_3XL,\n  getViewportWidth,\n} from '@/lib/breakpoints';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/components/ui/tooltip';\n\n// AppShellChat — a 3-section, horizontally resizable application scaffold:\n//\n//   SidebarRail (SidebarPrimary [+ SidebarSecondary]) | Content | Chat\n//\n// The Chat slot is optional — omit `AppShellChatChat` and the same scaffold\n// serves an ordinary two-column console screen. The rich sidebars are reused\n// verbatim from `../sidebar-primary` / `../sidebar-secondary`; this component\n// owns only the Content ↔ Chat split.\n//\n// Sizing model (requirement: sidebar interactions never resize Chat):\n//   • Content is `flex-1 min-w-0` — it absorbs every width change from the\n//     sidebars expanding/collapsing/resizing, and can shrink all the way to 0.\n//   • Chat has an explicit pixel width — driven LIVE by responsive Tailwind\n//     classes (`w-12 xl:w-md 3xl:w-lg`, reflowing on every browser resize)\n//     until the user drags/keyboard-resizes it, at which point an inline\n//     style override takes over and freezes it until double-click/Home\n//     reset — so it is unaffected by sidebar interactions either way. No\n//     percentage sizing anywhere — this is why we do NOT reuse the\n//     `Resizable` component (react-resizable-panels sizes panels as a\n//     percentage of their group, which would break this invariant since the\n//     sidebars sit outside that group).\n//\n// Chat is resize-ONLY (drag the handle on its START border, the shared\n// boundary with Content; double-click resets to the default width; arrow\n// keys nudge it). There is no separate expand/collapse or full-width toggle —\n// dragging past the floor width (`CHAT_MIN_WIDTH`) simply stops there (the\n// header switches to an icon-only rail at that width), and dragging the other\n// direction can take Chat all the way to full width: the max resize bound is\n// computed from the ACTUAL available row space (row width minus everything\n// except Content, which can shrink to 0), not a fixed constant — otherwise a\n// fixed cap would strand Content with a bogus \"minimum\" width once both\n// sidebars are collapsed and there's plenty of room to give Chat.\n//\n// All colors resolve to `--ui-*` tokens (bridged `bg-background`, white, for\n// the root/Chat surfaces; bridged `bg-muted` — `--ui-background-surface-secondary`,\n// the same token SidebarSecondary's container uses — for Content's canvas, so\n// Content reads as the same page surface as the secondary sidebar rather than a\n// separate white card. The Content/Chat boundary uses\n// `--ui-border-on-surface-divider`, the same divider token the design uses for\n// these seams — NOT the bridged `border-border`, which is a different token).\n// No hex, no invented tokens.\n\n// There is no design token for the chat width (this is a pure layout\n// composition — DESIGN: no `--ui-app-shell-chat-*` tokens exist), so these JS\n// constants drive the default/floor and the drag-resize clamping range,\n// mirroring `SIDEBAR_EXPANDED_WIDTH` in `sidebar-secondary.tsx`. They also\n// double as the pixel values baked into Chat's own responsive width classes\n// below (`w-12` — Tailwind's spacing scale, 3rem = 48px; `xl:w-md` /\n// `3xl:w-lg` — Tailwind's named container-scale width utilities, 28rem/32rem\n// = 448px/512px).\nconst CHAT_DEFAULT_WIDTH = 512; // widest tier AND the double-click/Home reset target\nconst CHAT_WIDTH_NARROW = 448; // 1280-1679 tier\nconst CHAT_MIN_WIDTH = 48; // floor while resizing, and the narrowest tier — matches the sidebars' collapsed rail width; below this the header would have no room for a label, so it shows the icon instead\n// Fallback ceiling used only when the available row width can't be measured\n// from the DOM yet (e.g. before first layout). In practice the resize handle\n// always computes the real ceiling — see `getResizeMaxWidth` — so Chat can\n// reach full width instead of being stranded below whatever this constant is.\nconst CHAT_MAX_WIDTH_FALLBACK = CHAT_DEFAULT_WIDTH * 2;\n\n// `BREAKPOINT_XL`/`BREAKPOINT_3XL` (imported above) are the SAME breakpoints\n// Chat's own `xl:`/`3xl:` width classes below use — see `@/lib/breakpoints`\n// for why they're plain JS constants instead of something read live from\n// CSS, and for the \"keep both files in sync\" note.\n\n// ---------------------------------------------------------------------------\n// useAppShellChatInitialLayout — breakpoint-derived INITIAL `defaultExpanded`\n// for the two sidebars, resolved ONCE from the viewport width at first render\n// and frozen after that — a later browser resize, or the user manually\n// toggling a sidebar, never re-derives it (design requirement: only the very\n// first paint is breakpoint-aware; Chat's own width, further below, is the\n// opposite — genuinely live — since it's a plain CSS width, not a child's\n// one-shot `defaultExpanded` prop).\n//\n// This can't use the \"SSR-safe default, then sync in an effect\" pattern\n// `useDocDir` (`src/lib/use-doc-dir.ts`) uses elsewhere in this package: that\n// pattern relies on a wrong value for one frame being harmless, corrected by\n// a re-render once an effect fires post-mount. Here the fields seed\n// SidebarPrimary/SidebarSecondary's `defaultExpanded` prop, which — exactly\n// like this hook's own `useState` below — is read ONLY on that component's\n// first render (`useControllableBoolean` in sidebar-primary.tsx); a prop\n// change after mount is silently ignored. So the value has to be right on\n// the very first render, which means reading `window.innerWidth`\n// synchronously via a lazy `useState` initializer — mirroring the same\n// \"read the default once, freeze it\" idiom `useControllableBoolean` already\n// uses — instead of deferring to an effect.\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatInitialLayout {\n  /** Initial `defaultExpanded` for SidebarPrimary. */\n  primaryExpanded: boolean;\n  /** Initial `defaultExpanded` for SidebarSecondary (when the screen has one). */\n  secondaryExpanded: boolean;\n}\n\nconst WIDE_SIDEBAR_LAYOUT: AppShellChatInitialLayout = {\n  primaryExpanded: true,\n  secondaryExpanded: true,\n};\nconst NARROW_SIDEBAR_LAYOUT: AppShellChatInitialLayout = {\n  primaryExpanded: false,\n  secondaryExpanded: true,\n};\n\n/**\n * Pure breakpoint → layout mapping, exported for direct unit testing (the\n * same convention `getResizeMaxWidth` above uses). `viewportWidth` of\n * `undefined` (no `window`, e.g. SSR) falls back to `WIDE_SIDEBAR_LAYOUT` —\n * the same value this component unconditionally hardcoded before this\n * feature existed. Below `BREAKPOINT_3XL` the output is always\n * `NARROW_SIDEBAR_LAYOUT` (primary closed), all the way down — the sidebars\n * have no tier cut at `BREAKPOINT_XL` the way Chat's own width does; there is\n * no separate floor tier either.\n */\nexport function getAppShellChatInitialLayout(\n  viewportWidth: number | undefined\n): AppShellChatInitialLayout {\n  if (viewportWidth === undefined || viewportWidth >= BREAKPOINT_3XL) {\n    return WIDE_SIDEBAR_LAYOUT;\n  }\n  return NARROW_SIDEBAR_LAYOUT;\n}\n\n/**\n * Reads the breakpoint-derived initial sidebar layout ONCE, at first render\n * — see the rationale above. Consumers wire the two fields into\n * `SidebarPrimary`/`SidebarSecondary`'s existing `defaultExpanded` prop.\n */\nexport function useAppShellChatInitialLayout(): AppShellChatInitialLayout {\n  const [layout] = React.useState(() =>\n    getAppShellChatInitialLayout(getViewportWidth())\n  );\n  return layout;\n}\n\n// ---------------------------------------------------------------------------\n// getLiveChatDefaultWidth / useLiveChatDefaultWidth — Chat's OWN width is\n// rendered by plain responsive Tailwind classes (`w-12 xl:w-md 3xl:w-lg`,\n// see `AppShellChatChat` below) — genuinely live, reflowing on every browser\n// resize, no JS involved in the visual result. This hook exists only for the\n// bookkeeping the CSS can't cover by itself: `compact` (the icon-only header)\n// is a structural render decision, not just a visual one, and the keyboard\n// resize handler needs a numeric starting point to nudge from — both need an\n// actual number, not a media query. It mirrors the CSS classes' three tiers\n// as plain numbers (duplicating 512/448/48 is unavoidable — those numbers\n// already exist twice, once in this file's JS constants above and once\n// baked into the Tailwind class names below; there's no single-sourcing\n// that further) but stays live via a `resize` listener, matching the design\n// requirement that Chat — unlike the sidebars above — is NOT frozen at mount.\n// ---------------------------------------------------------------------------\n\n/** Pure viewport → width mapping, exported for direct unit testing. */\nexport function getLiveChatDefaultWidth(viewportWidth: number | undefined): number {\n  if (viewportWidth === undefined || viewportWidth >= BREAKPOINT_3XL) {\n    return CHAT_DEFAULT_WIDTH;\n  }\n  if (viewportWidth >= BREAKPOINT_XL) return CHAT_WIDTH_NARROW;\n  return CHAT_MIN_WIDTH;\n}\n\nfunction useLiveChatDefaultWidth(): number {\n  const [width, setWidth] = React.useState(() =>\n    getLiveChatDefaultWidth(getViewportWidth())\n  );\n  React.useEffect(() => {\n    const onResize = () => setWidth(getLiveChatDefaultWidth(getViewportWidth()));\n    window.addEventListener('resize', onResize);\n    return () => window.removeEventListener('resize', onResize);\n  }, []);\n  return width;\n}\n\nconst defaultResizeTooltip = (\n  <>\n    <span className=\"font-semibold\">Resize:</span> Drag\n    <br />\n    <span className=\"font-semibold\">Reset size:</span> Double click\n  </>\n);\n\n// ---------------------------------------------------------------------------\n// AppShellChat — root\n// ---------------------------------------------------------------------------\n\nexport type AppShellChatProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst AppShellChat = React.forwardRef<HTMLDivElement, AppShellChatProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"app-shell-chat\"\n      className={cn('flex h-full w-full bg-background', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\nAppShellChat.displayName = 'AppShellChat';\n\n// ---------------------------------------------------------------------------\n// AppShellChatSidebar — layout wrapper for the reused sidebar rail\n// ---------------------------------------------------------------------------\n\nconst AppShellChatSidebar = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'aside'>\n>(({ className, ...props }, ref) => (\n  <aside\n    ref={ref}\n    data-slot=\"app-shell-chat-sidebar\"\n    className={cn('flex h-full shrink-0', className)}\n    {...props}\n  />\n));\nAppShellChatSidebar.displayName = 'AppShellChatSidebar';\n\n// ---------------------------------------------------------------------------\n// AppShellChatContent — the page column\n// ---------------------------------------------------------------------------\n\nconst AppShellChatContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-chat-content\"\n    className={cn('flex h-full min-w-0 flex-1 flex-col bg-muted', className)}\n    {...props}\n  />\n));\nAppShellChatContent.displayName = 'AppShellChatContent';\n\nconst AppShellChatContentHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-chat-content-header\"\n    className={cn(\n      'flex shrink-0 flex-col gap-3 border-b border-[var(--ui-border-on-surface-divider)] p-4',\n      className\n    )}\n    {...props}\n  />\n));\nAppShellChatContentHeader.displayName = 'AppShellChatContentHeader';\n\nconst AppShellChatContentBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-chat-content-body\"\n    className={cn('flex flex-1 flex-col overflow-auto p-4', className)}\n    {...props}\n  />\n));\nAppShellChatContentBody.displayName = 'AppShellChatContentBody';\n\n// ---------------------------------------------------------------------------\n// Chat-panel context — resize state, shared to the Chat parts and the\n// internal resize edge.\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatChatContextValue {\n  /** Derived from `width <= minWidth` — true at the resize floor, where the header shows the icon instead of the label. */\n  compact: boolean;\n  width: number;\n  setWidth: (width: number) => void;\n  /**\n   * Clears any drag/keyboard override and restores the LIVE, breakpoint-driven\n   * width (see `getLiveChatDefaultWidth` above) — the double-click/Home\n   * target. NOT the same as `setWidth(someFixedNumber)`: that would just\n   * swap one frozen override for another and permanently disable live\n   * viewport tracking, which is the whole point of \"reset\".\n   */\n  resetWidth: () => void;\n  minWidth: number;\n  /** Fallback ceiling — see `CHAT_MAX_WIDTH_FALLBACK`. The resize handle prefers a live DOM measurement. */\n  maxWidth: number;\n  resizeAriaLabel: string;\n  resizeTooltip: React.ReactNode;\n}\n\n// Exported (alongside the context value type above) so a test can drive\n// `AppShellChatResizeEdge` in isolation with a fully-controlled mock context,\n// instead of only indirectly through `AppShellChatChat`.\nconst AppShellChatChatContext =\n  React.createContext<AppShellChatChatContextValue | null>(null);\n\nfunction useAppShellChatChatContext(): AppShellChatChatContextValue {\n  return (\n    React.useContext(AppShellChatChatContext) ?? {\n      compact: false,\n      width: CHAT_DEFAULT_WIDTH,\n      setWidth: () => {},\n      resetWidth: () => {},\n      minWidth: CHAT_MIN_WIDTH,\n      maxWidth: CHAT_MAX_WIDTH_FALLBACK,\n      resizeAriaLabel: 'Resize chat',\n      resizeTooltip: defaultResizeTooltip,\n    }\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AppShellChatResizeEdge — internal drag/keyboard handle on Chat's START\n// border (the shared boundary with Content). Mirrors\n// `SidebarSecondaryResizeEdge`'s drag mechanics, flipped because Chat sits at\n// the END of the row: the handle is on `start-0`, the width grows as the\n// pointer moves toward the row's start, and the arrow keys are inverted.\n// UNLIKE SidebarSecondary's edge, there is no click-to-collapse /\n// double-click-to-expand toggle — Chat has no collapsed mode, only a resize\n// floor, so the only interactions are drag-to-resize and double-click-to-reset.\n// Exported (with its handlers below) for direct unit testing; consumers\n// should still compose Chat via `AppShellChatChat`, which renders it\n// automatically — it is not meant to be placed manually.\n// ---------------------------------------------------------------------------\n\n/**\n * The true resize ceiling: the row's total width minus everything in it\n * EXCEPT Content (which can always shrink to 0) and Chat itself. This lets\n * Chat reach full width — Content shrinking to 0 — instead of being capped by\n * a fixed constant that strands Content with a bogus minimum once both\n * sidebars are collapsed and the row has room to give. Exported for direct\n * testing; `handleResizePointerDown` / `handleResizeKeyDown` are the real\n * callers.\n */\nexport function getResizeMaxWidth(chatEl: HTMLElement, fallback: number): number {\n  const rowEl = chatEl.parentElement;\n  if (!rowEl) return fallback;\n  const rowRect = rowEl.getBoundingClientRect();\n  if (rowRect.width <= 0) return fallback;\n  let reserved = 0;\n  for (const sibling of Array.from(rowEl.children)) {\n    if (sibling === chatEl) continue;\n    if ((sibling as HTMLElement).dataset.slot === 'app-shell-chat-content')\n      continue;\n    reserved += (sibling as HTMLElement).getBoundingClientRect().width;\n  }\n  const available = rowRect.width - reserved;\n  return available > 0 ? available : fallback;\n}\n\n/** The subset of context `handleResizePointerDown` needs to drag-resize. */\nexport type ResizePointerDownContext = Pick<\n  AppShellChatChatContextValue,\n  'minWidth' | 'maxWidth' | 'setWidth'\n>;\n\n/**\n * Pointerdown handler for the Chat resize edge: captures the pointer,\n * disables the chat's width transition for the duration of the drag, and\n * clamps width between `ctx.minWidth` and the dynamically-measured ceiling\n * (`getResizeMaxWidth`) — NOT `ctx.maxWidth`, which is only the fallback used\n * when that measurement is unavailable. Chat's END edge is pinned against the\n * container's end, so dragging the pointer toward the row's start grows the\n * chat — the mirror image of `SidebarSecondaryResizeEdge` (whose START edge is\n * pinned). Exported for direct testing; `AppShellChatResizeEdge` is the real\n * caller (it supplies `onDragStart`/`onDragEnd` to drive its own `dragging`\n * state, e.g. to suppress the tooltip while dragging).\n *\n * `ctxRef` is a ref (not a plain snapshot): the drag's `pointermove`/`pointerup`\n * listeners live on `window` for the whole gesture, and `ctx.setWidth`'s\n * identity can change mid-drag from a re-render that has nothing to do with\n * the drag itself (e.g. a consumer's `onWidthChange` prop is a fresh inline\n * function every render, which changes `setWidth`'s `useCallback` identity).\n * Reading `ctxRef.current.setWidth` on every move — instead of destructuring\n * `setWidth` once up front — means the listeners always call whatever\n * `setWidth` is current, the same defensive pattern\n * `SidebarSecondaryResizeEdge` uses via its own `ctxRef`. `minWidth`/`maxWidth`\n * are still snapshotted once at drag-start (matching the frozen `chatRect`\n * they're paired with) since they're geometry, not a callback identity.\n *\n * Both `pointerup` and `pointercancel` end the drag (a cancelled gesture — a\n * touch-scroll takeover, palm rejection, losing focus mid-drag — never fires\n * `pointerup`, so relying on that alone leaks the listeners and leaves\n * `dragging` stuck `true` forever). `ev.pointerId` is checked against the\n * pointer that started the drag so a second, unrelated pointer (multi-touch on\n * the 17px handle) can't feed this drag's math or end it early.\n */\nexport function handleResizePointerDown(\n  e: React.PointerEvent<HTMLDivElement>,\n  ctxRef: { current: ResizePointerDownContext },\n  { onDragStart, onDragEnd }: { onDragStart?: () => void; onDragEnd?: () => void } = {}\n): void {\n  e.preventDefault();\n  const el = e.currentTarget;\n  const { pointerId } = e;\n  el.setPointerCapture(pointerId);\n  onDragStart?.();\n\n  // The chat panel is the nearest `[data-state]` ancestor of the handle.\n  const chatEl = el.closest('[data-state]') as HTMLElement | null;\n  if (!chatEl) {\n    onDragEnd?.();\n    el.releasePointerCapture(pointerId);\n    return;\n  }\n  // Disable the width transition while dragging so resize tracks the cursor\n  // without animation lag.\n  chatEl.style.transitionProperty = 'none';\n  const isRtl = getComputedStyle(chatEl).direction === 'rtl';\n  const chatRect = chatEl.getBoundingClientRect();\n\n  const { minWidth, maxWidth: fallbackMax } = ctxRef.current;\n  const maxWidth = getResizeMaxWidth(chatEl, fallbackMax);\n\n  const onPointerMove = (ev: PointerEvent) => {\n    if (ev.pointerId !== pointerId) return;\n    const newWidth = isRtl\n      ? ev.clientX - chatRect.left\n      : chatRect.right - ev.clientX;\n    ctxRef.current.setWidth(Math.min(Math.max(newWidth, minWidth), maxWidth));\n  };\n\n  const endDrag = (ev: PointerEvent) => {\n    if (ev.pointerId !== pointerId) return;\n    onDragEnd?.();\n    chatEl.style.transitionProperty = '';\n    window.removeEventListener('pointermove', onPointerMove);\n    window.removeEventListener('pointerup', endDrag);\n    window.removeEventListener('pointercancel', endDrag);\n  };\n\n  window.addEventListener('pointermove', onPointerMove);\n  window.addEventListener('pointerup', endDrag);\n  window.addEventListener('pointercancel', endDrag);\n}\n\n/** The subset of context `handleResizeKeyDown` needs to resize via keyboard. */\nexport type ResizeKeyDownContext = Pick<\n  AppShellChatChatContextValue,\n  'minWidth' | 'maxWidth' | 'width' | 'setWidth' | 'resetWidth'\n>;\n\n/**\n * Keydown handler for the Chat resize edge: ArrowLeft/ArrowRight resize by\n * 16px, clamped to `[ctx.minWidth, the dynamically-measured ceiling]` (see\n * `getResizeMaxWidth`) via the SAME `Math.min(Math.max(next, minWidth),\n * maxWidth)` order the pointer-drag handler uses. That order matters when the\n * row is narrow enough that the measured ceiling drops below `minWidth` (e.g.\n * both sidebars expanded on a small viewport): clamping the floor first and\n * the ceiling second means the ceiling always wins the degenerate case, so\n * grow/shrink can't fight each other into a value outside the valid range.\n * Growing Chat's width moves the boundary \"toward the row's start\", so the\n * grow key is the OPPOSITE of `SidebarSecondaryResizeEdge`'s: ArrowLeft in\n * LTR, ArrowRight in RTL.\n *\n * Home delegates to `ctx.resetWidth()` rather than computing a clamped\n * number itself — `resetWidth` restores the LIVE breakpoint-driven width\n * (see `AppShellChatChatContextValue.resetWidth`), which is always already\n * in range, so no clamp is needed here. Exported for direct testing;\n * `AppShellChatResizeEdge` is the real caller.\n */\nexport function handleResizeKeyDown(\n  e: React.KeyboardEvent<HTMLDivElement>,\n  ctx: ResizeKeyDownContext,\n  dir: 'ltr' | 'rtl'\n): void {\n  const { minWidth, maxWidth: fallbackMax, width: w, setWidth: sw, resetWidth } = ctx;\n  const step = 16;\n  const growKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n  const shrinkKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n  const chatEl = e.currentTarget.closest('[data-state]') as HTMLElement | null;\n  const maxWidth = chatEl ? getResizeMaxWidth(chatEl, fallbackMax) : fallbackMax;\n  const clamp = (next: number) => Math.min(Math.max(next, minWidth), maxWidth);\n  if (e.key === growKey) {\n    e.preventDefault();\n    sw(clamp(w + step));\n  } else if (e.key === shrinkKey) {\n    e.preventDefault();\n    sw(clamp(w - step));\n  } else if (e.key === 'Home') {\n    e.preventDefault();\n    resetWidth();\n  }\n}\n\n// Exported so a test can drive it in isolation (see `AppShellChatChatContext`\n// above) instead of only indirectly through `AppShellChatChat`, which is\n// otherwise the only real caller — the resize edge is rendered automatically\n// inside `AppShellChatChat` and is not meant to be composed by consumers.\nexport function AppShellChatResizeEdge() {\n  const ctx = useAppShellChatChatContext();\n  const dir = useDocDir();\n\n  // Kept in sync every render so a drag started earlier still calls the\n  // LATEST `setWidth` on every pointermove — see `handleResizePointerDown`'s\n  // doc comment for why a plain (non-ref) snapshot of `ctx` isn't safe here.\n  const ctxRef = React.useRef(ctx);\n  ctxRef.current = ctx;\n\n  // Hide the tooltip while dragging.\n  const [tooltipOpen, setTooltipOpen] = React.useState(false);\n  const [dragging, setDragging] = React.useState(false);\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    setTooltipOpen(false);\n    handleResizePointerDown(e, ctxRef, {\n      onDragStart: () => setDragging(true),\n      onDragEnd: () => setDragging(false),\n    });\n  };\n\n  const handleDoubleClick = () => {\n    ctx.resetWidth();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    handleResizeKeyDown(e, ctx, dir);\n  };\n\n  const handleTooltipOpenChange = (open: boolean) => {\n    if (dragging) return;\n    setTooltipOpen(open);\n  };\n\n  return (\n    <Tooltip\n      open={tooltipOpen}\n      onOpenChange={handleTooltipOpenChange}\n      trackCursorAxis=\"y\"\n    >\n      <TooltipTrigger\n        render={\n          <div\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label={ctx.resizeAriaLabel}\n            className={cn(\n              // 17px hit area on the inline-start edge. The chat's own border-s\n              // provides the visible 1px line; its color changes via :has() on\n              // hover/active/focus-visible (see AppShellChatChat).\n              'absolute start-0 top-0 h-full w-[17px] ltr:-translate-x-1/2 rtl:translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10',\n              // On focus: a 1px active-color line (after pseudo) + 3px ring.\n              'after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0 after:pointer-events-none',\n              'after:[border-inline-start-width:var(--ui-resizable-border-width,1px)] after:border-solid after:border-transparent',\n              'focus-visible:outline-none focus-visible:after:[border-inline-start-color:var(--ui-resizable-border-color-active)] focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)]'\n            )}\n            tabIndex={0}\n            onKeyDown={handleKeyDown}\n            onPointerDown={handlePointerDown}\n            onDoubleClick={handleDoubleClick}\n          />\n        }\n      />\n      {ctx.resizeTooltip != null && (\n        <TooltipContent side={dir === 'rtl' ? 'right' : 'left'} align=\"center\">\n          {ctx.resizeTooltip}\n        </TooltipContent>\n      )}\n    </Tooltip>\n  );\n}\nAppShellChatResizeEdge.displayName = 'AppShellChatResizeEdge';\n\n// ---------------------------------------------------------------------------\n// AppShellChatChat — the resizable panel\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatChatProps extends React.ComponentPropsWithoutRef<'aside'> {\n  /** Controlled width in px. */\n  width?: number;\n  /** Fires when the width changes due to a drag/keyboard interaction. */\n  onWidthChange?: (width: number) => void;\n  /** Accessible label for the resize edge (`role=\"separator\"`). Defaults to `'Resize chat'`. */\n  resizeAriaLabel?: string;\n  /** Tooltip content shown on the resize edge. Pass `null` to hide the tooltip entirely. */\n  resizeTooltip?: React.ReactNode;\n}\n\nconst AppShellChatChat = React.forwardRef<HTMLElement, AppShellChatChatProps>(\n  (\n    {\n      className,\n      width: widthProp,\n      onWidthChange,\n      resizeAriaLabel = 'Resize chat',\n      resizeTooltip = defaultResizeTooltip,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Uncontrolled width has two layers: `liveDefaultWidth` tracks the\n    // viewport LIVE (via `useLiveChatDefaultWidth`, mirroring the CSS\n    // classes below) until the user actually drags/keyboard-resizes —\n    // `override` captures that explicit choice and, once set, wins\n    // regardless of further viewport changes (matching the existing\n    // drag/double-click/Home mechanics, unchanged).\n    const liveDefaultWidth = useLiveChatDefaultWidth();\n    const [override, setOverrideState] = React.useState<number | undefined>(\n      undefined\n    );\n    const isWidthControlled = widthProp !== undefined;\n    const currentWidth = isWidthControlled\n      ? widthProp\n      : override ?? liveDefaultWidth;\n    const setWidth = React.useCallback(\n      (next: number) => {\n        if (!isWidthControlled) setOverrideState(next);\n        onWidthChange?.(next);\n      },\n      [isWidthControlled, onWidthChange]\n    );\n    // Reset means \"go back to the LIVE breakpoint-driven width\", not \"go\n    // back to a fixed number\" — clearing `override` (rather than setting it\n    // to some constant) is what lets viewport tracking resume afterward.\n    // `onWidthChange` still fires (even when controlled) so the consumer's\n    // width — controlled or not — reflects the same live value.\n    const resetWidth = React.useCallback(() => {\n      if (!isWidthControlled) setOverrideState(undefined);\n      onWidthChange?.(liveDefaultWidth);\n    }, [isWidthControlled, onWidthChange, liveDefaultWidth]);\n\n    const compact = currentWidth <= CHAT_MIN_WIDTH;\n\n    const context = React.useMemo<AppShellChatChatContextValue>(\n      () => ({\n        compact,\n        width: currentWidth,\n        setWidth,\n        resetWidth,\n        minWidth: CHAT_MIN_WIDTH,\n        maxWidth: CHAT_MAX_WIDTH_FALLBACK,\n        resizeAriaLabel,\n        resizeTooltip,\n      }),\n      [compact, currentWidth, setWidth, resetWidth, resizeAriaLabel, resizeTooltip]\n    );\n\n    // Apply inline width ONLY once the user has actually resized (or width\n    // is controlled) — otherwise the responsive Tailwind width classes\n    // drive it live, so brand overrides / viewport reflow are unaffected by\n    // JS. (There is no width design token, so the CSS default is the same\n    // JS constants expressed as Tailwind spacing-scale classes.)\n    const hasWidthOverride = isWidthControlled || override !== undefined;\n    const inlineStyle: React.CSSProperties | undefined = hasWidthOverride\n      ? { width: currentWidth }\n      : undefined;\n\n    return (\n      <AppShellChatChatContext.Provider value={context}>\n        <aside\n          ref={ref}\n          data-slot=\"app-shell-chat-chat\"\n          data-state={compact ? 'collapsed' : 'expanded'}\n          style={inlineStyle}\n          className={cn(\n            // Live, responsive width — no JS, reflows on every browser\n            // resize until `hasWidthOverride` (above) switches to the\n            // inline style. `w-12` is the spacing scale (3rem = 48px);\n            // `w-md`/`w-lg` are Tailwind's named container-scale width\n            // utilities (28rem/32rem = 448px/512px) — see the `CHAT_*`\n            // constants above for the same numbers.\n            'group/chat relative flex h-full shrink-0 flex-col border-s border-[var(--ui-border-on-surface-divider)] bg-background w-12 xl:w-md 3xl:w-lg transition-[width,border-color]',\n            // Resize-edge hover/active/focus recolors the START border line.\n            'has-[[role=separator]:hover]:[border-inline-start-color:var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:[border-inline-start-color:var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:[border-inline-start-color:var(--ui-resizable-border-color-active)]',\n            className\n          )}\n          {...props}\n        >\n          <AppShellChatResizeEdge />\n          {children}\n        </aside>\n      </AppShellChatChatContext.Provider>\n    );\n  }\n);\nAppShellChatChat.displayName = 'AppShellChatChat';\n\n// ---------------------------------------------------------------------------\n// AppShellChatChatHeader\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatChatHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Header title (or pass as children). */\n  label?: React.ReactNode;\n  /** Trailing header actions. Hidden while compact (icon-only rail). */\n  actions?: React.ReactNode;\n}\n\nconst AppShellChatChatHeader = React.forwardRef<\n  HTMLDivElement,\n  AppShellChatChatHeaderProps\n>(({ className, label, actions, children, ...props }, ref) => {\n  const { compact } = useAppShellChatChatContext();\n  const dir = useDocDir();\n  const resolvedLabel = label ?? children;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell-chat-chat-header\"\n      className={cn(\n        'flex shrink-0 items-center border-b border-[var(--ui-border-on-surface-divider)] p-4',\n        compact ? 'justify-center' : 'gap-3',\n        className\n      )}\n      {...props}\n    >\n      {compact ? (\n        // Collapsed rail: only the Acronis \"A\" mark, with the full label on\n        // hover. `size-8` keeps this row exactly as tall as the label row\n        // below (a 32px line height) — the icon alone is only 24px, so\n        // without an explicit size the header would be a few px shorter than\n        // Content's header. The accessible name comes from the `sr-only`\n        // span's actual DOM content (same pattern as\n        // `SidebarPrimaryMenuItem`'s collapsed rail), not a derived\n        // `aria-label` string — that works for ANY `resolvedLabel`\n        // (a plain string or a rich ReactNode via `children`), whereas a\n        // `typeof resolvedLabel === 'string'` check would silently leave\n        // the icon with no accessible name at all for non-string content.\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <span className=\"flex size-8 items-center justify-center\" />\n            }\n          >\n            <AcronisIcon size={24} aria-hidden=\"true\" />\n            <span className=\"sr-only\">{resolvedLabel}</span>\n          </TooltipTrigger>\n          <TooltipContent side={dir === 'rtl' ? 'left' : 'right'}>\n            {resolvedLabel}\n          </TooltipContent>\n        </Tooltip>\n      ) : (\n        <>\n          <span className=\"ui-typography-headings-title min-w-0 flex-1 truncate text-[var(--ui-text-on-surface-primary)]\">\n            {resolvedLabel}\n          </span>\n          {actions != null && (\n            <span className=\"flex shrink-0 items-center\">{actions}</span>\n          )}\n        </>\n      )}\n    </div>\n  );\n});\nAppShellChatChatHeader.displayName = 'AppShellChatChatHeader';\n\nconst AppShellChatChatBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => {\n  const { compact } = useAppShellChatChatContext();\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell-chat-chat-body\"\n      className={cn(\n        'flex flex-1 flex-col overflow-auto p-4',\n        compact && 'hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nAppShellChatChatBody.displayName = 'AppShellChatChatBody';\n\nexport {\n  AppShellChat,\n  AppShellChatSidebar,\n  AppShellChatContent,\n  AppShellChatContentHeader,\n  AppShellChatContentBody,\n  AppShellChatChat,\n  AppShellChatChatHeader,\n  AppShellChatChatBody,\n  AppShellChatChatContext,\n};\n"],"names":["CHAT_DEFAULT_WIDTH","CHAT_WIDTH_NARROW","CHAT_MIN_WIDTH","CHAT_MAX_WIDTH_FALLBACK","WIDE_SIDEBAR_LAYOUT","NARROW_SIDEBAR_LAYOUT","getAppShellChatInitialLayout","viewportWidth","BREAKPOINT_3XL","useAppShellChatInitialLayout","layout","React","getViewportWidth","getLiveChatDefaultWidth","BREAKPOINT_XL","useLiveChatDefaultWidth","width","setWidth","onResize","defaultResizeTooltip","jsxs","Fragment","jsx","AppShellChat","className","children","props","ref","cn","AppShellChatSidebar","AppShellChatContent","AppShellChatContentHeader","AppShellChatContentBody","AppShellChatChatContext","useAppShellChatChatContext","getResizeMaxWidth","chatEl","fallback","rowEl","rowRect","reserved","sibling","available","handleResizePointerDown","ctxRef","onDragStart","onDragEnd","el","pointerId","isRtl","chatRect","minWidth","fallbackMax","maxWidth","onPointerMove","ev","newWidth","endDrag","handleResizeKeyDown","ctx","dir","w","sw","resetWidth","step","growKey","shrinkKey","clamp","next","AppShellChatResizeEdge","useDocDir","tooltipOpen","setTooltipOpen","dragging","setDragging","handlePointerDown","e","handleDoubleClick","handleKeyDown","Tooltip","open","TooltipTrigger","TooltipContent","AppShellChatChat","widthProp","onWidthChange","resizeAriaLabel","resizeTooltip","liveDefaultWidth","override","setOverrideState","isWidthControlled","currentWidth","compact","context","inlineStyle","AppShellChatChatHeader","label","actions","resolvedLabel","AcronisIcon","AppShellChatChatBody"],"mappings":"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"}
+{"version":3,"file":"app-shell-chat.js","names":[],"sources":["../../../../src/components/ui/app-shell-chat/app-shell-chat.tsx"],"sourcesContent":["import * as React from 'react';\nimport { AcronisIcon } from '@acronis-platform/icons-react/solid-mono';\n\nimport { cn } from '@/lib/utils';\nimport { useDocDir } from '@/lib/use-doc-dir';\nimport {\n  BREAKPOINT_XL,\n  BREAKPOINT_3XL,\n  getViewportWidth,\n} from '@/lib/breakpoints';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/components/ui/tooltip';\n\n// AppShellChat — a 3-section, horizontally resizable application scaffold:\n//\n//   SidebarRail (SidebarPrimary [+ SidebarSecondary]) | Content | Chat\n//\n// The Chat slot is optional — omit `AppShellChatChat` and the same scaffold\n// serves an ordinary two-column console screen. The rich sidebars are reused\n// verbatim from `../sidebar-primary` / `../sidebar-secondary`; this component\n// owns only the Content ↔ Chat split.\n//\n// Sizing model (requirement: sidebar interactions never resize Chat):\n//   • Content is `flex-1 min-w-0` — it absorbs every width change from the\n//     sidebars expanding/collapsing/resizing, and can shrink all the way to 0.\n//   • Chat has an explicit pixel width — driven LIVE by responsive Tailwind\n//     classes (`w-12 xl:w-md 3xl:w-lg`, reflowing on every browser resize)\n//     until the user drags/keyboard-resizes it, at which point an inline\n//     style override takes over and freezes it until double-click/Home\n//     reset — so it is unaffected by sidebar interactions either way. No\n//     percentage sizing anywhere — this is why we do NOT reuse the\n//     `Resizable` component (react-resizable-panels sizes panels as a\n//     percentage of their group, which would break this invariant since the\n//     sidebars sit outside that group).\n//\n// Chat is resize-ONLY (drag the handle on its START border, the shared\n// boundary with Content; double-click resets to the default width; arrow\n// keys nudge it). There is no separate expand/collapse or full-width toggle —\n// dragging past the floor width (`CHAT_MIN_WIDTH`) simply stops there (the\n// header switches to an icon-only rail at that width), and dragging the other\n// direction can take Chat all the way to full width: the max resize bound is\n// computed from the ACTUAL available row space (row width minus everything\n// except Content, which can shrink to 0), not a fixed constant — otherwise a\n// fixed cap would strand Content with a bogus \"minimum\" width once both\n// sidebars are collapsed and there's plenty of room to give Chat.\n//\n// All colors resolve to `--ui-*` tokens (bridged `bg-background`, white, for\n// the root/Chat surfaces; bridged `bg-muted` — `--ui-background-surface-secondary`,\n// the same token SidebarSecondary's container uses — for Content's canvas, so\n// Content reads as the same page surface as the secondary sidebar rather than a\n// separate white card. The Content/Chat boundary uses\n// `--ui-border-on-surface-divider`, the same divider token the design uses for\n// these seams — NOT the bridged `border-border`, which is a different token).\n// No hex, no invented tokens.\n\n// There is no design token for the chat width (this is a pure layout\n// composition — DESIGN: no `--ui-app-shell-chat-*` tokens exist), so these JS\n// constants drive the default/floor and the drag-resize clamping range,\n// mirroring `SIDEBAR_EXPANDED_WIDTH` in `sidebar-secondary.tsx`. They also\n// double as the pixel values baked into Chat's own responsive width classes\n// below (`w-12` — Tailwind's spacing scale, 3rem = 48px; `xl:w-md` /\n// `3xl:w-lg` — Tailwind's named container-scale width utilities, 28rem/32rem\n// = 448px/512px).\nconst CHAT_DEFAULT_WIDTH = 512; // widest tier AND the double-click/Home reset target\nconst CHAT_WIDTH_NARROW = 448; // 1280-1679 tier\nconst CHAT_MIN_WIDTH = 48; // floor while resizing, and the narrowest tier — matches the sidebars' collapsed rail width; below this the header would have no room for a label, so it shows the icon instead\n// Fallback ceiling used only when the available row width can't be measured\n// from the DOM yet (e.g. before first layout). In practice the resize handle\n// always computes the real ceiling — see `getResizeMaxWidth` — so Chat can\n// reach full width instead of being stranded below whatever this constant is.\nconst CHAT_MAX_WIDTH_FALLBACK = CHAT_DEFAULT_WIDTH * 2;\n\n// `BREAKPOINT_XL`/`BREAKPOINT_3XL` (imported above) are the SAME breakpoints\n// Chat's own `xl:`/`3xl:` width classes below use — see `@/lib/breakpoints`\n// for why they're plain JS constants instead of something read live from\n// CSS, and for the \"keep both files in sync\" note.\n\n// ---------------------------------------------------------------------------\n// useAppShellChatInitialLayout — breakpoint-derived INITIAL `defaultExpanded`\n// for the two sidebars, resolved ONCE from the viewport width at first render\n// and frozen after that — a later browser resize, or the user manually\n// toggling a sidebar, never re-derives it (design requirement: only the very\n// first paint is breakpoint-aware; Chat's own width, further below, is the\n// opposite — genuinely live — since it's a plain CSS width, not a child's\n// one-shot `defaultExpanded` prop).\n//\n// This can't use the \"SSR-safe default, then sync in an effect\" pattern\n// `useDocDir` (`src/lib/use-doc-dir.ts`) uses elsewhere in this package: that\n// pattern relies on a wrong value for one frame being harmless, corrected by\n// a re-render once an effect fires post-mount. Here the fields seed\n// SidebarPrimary/SidebarSecondary's `defaultExpanded` prop, which — exactly\n// like this hook's own `useState` below — is read ONLY on that component's\n// first render (`useControllableBoolean` in sidebar-primary.tsx); a prop\n// change after mount is silently ignored. So the value has to be right on\n// the very first render, which means reading `window.innerWidth`\n// synchronously via a lazy `useState` initializer — mirroring the same\n// \"read the default once, freeze it\" idiom `useControllableBoolean` already\n// uses — instead of deferring to an effect.\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatInitialLayout {\n  /** Initial `defaultExpanded` for SidebarPrimary. */\n  primaryExpanded: boolean;\n  /** Initial `defaultExpanded` for SidebarSecondary (when the screen has one). */\n  secondaryExpanded: boolean;\n}\n\nconst WIDE_SIDEBAR_LAYOUT: AppShellChatInitialLayout = {\n  primaryExpanded: true,\n  secondaryExpanded: true,\n};\nconst NARROW_SIDEBAR_LAYOUT: AppShellChatInitialLayout = {\n  primaryExpanded: false,\n  secondaryExpanded: true,\n};\n\n/**\n * Pure breakpoint → layout mapping, exported for direct unit testing (the\n * same convention `getResizeMaxWidth` above uses). `viewportWidth` of\n * `undefined` (no `window`, e.g. SSR) falls back to `WIDE_SIDEBAR_LAYOUT` —\n * the same value this component unconditionally hardcoded before this\n * feature existed. Below `BREAKPOINT_3XL` the output is always\n * `NARROW_SIDEBAR_LAYOUT` (primary closed), all the way down — the sidebars\n * have no tier cut at `BREAKPOINT_XL` the way Chat's own width does; there is\n * no separate floor tier either.\n */\nexport function getAppShellChatInitialLayout(\n  viewportWidth: number | undefined\n): AppShellChatInitialLayout {\n  if (viewportWidth === undefined || viewportWidth >= BREAKPOINT_3XL) {\n    return WIDE_SIDEBAR_LAYOUT;\n  }\n  return NARROW_SIDEBAR_LAYOUT;\n}\n\n/**\n * Reads the breakpoint-derived initial sidebar layout ONCE, at first render\n * — see the rationale above. Consumers wire the two fields into\n * `SidebarPrimary`/`SidebarSecondary`'s existing `defaultExpanded` prop.\n */\nexport function useAppShellChatInitialLayout(): AppShellChatInitialLayout {\n  const [layout] = React.useState(() =>\n    getAppShellChatInitialLayout(getViewportWidth())\n  );\n  return layout;\n}\n\n// ---------------------------------------------------------------------------\n// getLiveChatDefaultWidth / useLiveChatDefaultWidth — Chat's OWN width is\n// rendered by plain responsive Tailwind classes (`w-12 xl:w-md 3xl:w-lg`,\n// see `AppShellChatChat` below) — genuinely live, reflowing on every browser\n// resize, no JS involved in the visual result. This hook exists only for the\n// bookkeeping the CSS can't cover by itself: `compact` (the icon-only header)\n// is a structural render decision, not just a visual one, and the keyboard\n// resize handler needs a numeric starting point to nudge from — both need an\n// actual number, not a media query. It mirrors the CSS classes' three tiers\n// as plain numbers (duplicating 512/448/48 is unavoidable — those numbers\n// already exist twice, once in this file's JS constants above and once\n// baked into the Tailwind class names below; there's no single-sourcing\n// that further) but stays live via a `resize` listener, matching the design\n// requirement that Chat — unlike the sidebars above — is NOT frozen at mount.\n// ---------------------------------------------------------------------------\n\n/** Pure viewport → width mapping, exported for direct unit testing. */\nexport function getLiveChatDefaultWidth(viewportWidth: number | undefined): number {\n  if (viewportWidth === undefined || viewportWidth >= BREAKPOINT_3XL) {\n    return CHAT_DEFAULT_WIDTH;\n  }\n  if (viewportWidth >= BREAKPOINT_XL) return CHAT_WIDTH_NARROW;\n  return CHAT_MIN_WIDTH;\n}\n\nfunction useLiveChatDefaultWidth(): number {\n  const [width, setWidth] = React.useState(() =>\n    getLiveChatDefaultWidth(getViewportWidth())\n  );\n  React.useEffect(() => {\n    const onResize = () => setWidth(getLiveChatDefaultWidth(getViewportWidth()));\n    window.addEventListener('resize', onResize);\n    return () => window.removeEventListener('resize', onResize);\n  }, []);\n  return width;\n}\n\nconst defaultResizeTooltip = (\n  <>\n    <span className=\"font-semibold\">Resize:</span> Drag\n    <br />\n    <span className=\"font-semibold\">Reset size:</span> Double click\n  </>\n);\n\n// ---------------------------------------------------------------------------\n// AppShellChat — root\n// ---------------------------------------------------------------------------\n\nexport type AppShellChatProps = React.ComponentPropsWithoutRef<'div'>;\n\nconst AppShellChat = React.forwardRef<HTMLDivElement, AppShellChatProps>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"app-shell-chat\"\n      className={cn('flex h-full w-full bg-background', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\nAppShellChat.displayName = 'AppShellChat';\n\n// ---------------------------------------------------------------------------\n// AppShellChatSidebar — layout wrapper for the reused sidebar rail\n// ---------------------------------------------------------------------------\n\nconst AppShellChatSidebar = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'aside'>\n>(({ className, ...props }, ref) => (\n  <aside\n    ref={ref}\n    data-slot=\"app-shell-chat-sidebar\"\n    className={cn('flex h-full shrink-0', className)}\n    {...props}\n  />\n));\nAppShellChatSidebar.displayName = 'AppShellChatSidebar';\n\n// ---------------------------------------------------------------------------\n// AppShellChatContent — the page column\n// ---------------------------------------------------------------------------\n\nconst AppShellChatContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-chat-content\"\n    className={cn('flex h-full min-w-0 flex-1 flex-col bg-muted', className)}\n    {...props}\n  />\n));\nAppShellChatContent.displayName = 'AppShellChatContent';\n\nconst AppShellChatContentHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-chat-content-header\"\n    className={cn(\n      'flex shrink-0 flex-col gap-3 border-b border-[var(--ui-border-on-surface-divider)] p-4',\n      className\n    )}\n    {...props}\n  />\n));\nAppShellChatContentHeader.displayName = 'AppShellChatContentHeader';\n\nconst AppShellChatContentBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-chat-content-body\"\n    className={cn('flex flex-1 flex-col overflow-auto p-4', className)}\n    {...props}\n  />\n));\nAppShellChatContentBody.displayName = 'AppShellChatContentBody';\n\n// ---------------------------------------------------------------------------\n// Chat-panel context — resize state, shared to the Chat parts and the\n// internal resize edge.\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatChatContextValue {\n  /** Derived from `width <= minWidth` — true at the resize floor, where the header shows the icon instead of the label. */\n  compact: boolean;\n  width: number;\n  setWidth: (width: number) => void;\n  /**\n   * Clears any drag/keyboard override and restores the LIVE, breakpoint-driven\n   * width (see `getLiveChatDefaultWidth` above) — the double-click/Home\n   * target. NOT the same as `setWidth(someFixedNumber)`: that would just\n   * swap one frozen override for another and permanently disable live\n   * viewport tracking, which is the whole point of \"reset\".\n   */\n  resetWidth: () => void;\n  minWidth: number;\n  /** Fallback ceiling — see `CHAT_MAX_WIDTH_FALLBACK`. The resize handle prefers a live DOM measurement. */\n  maxWidth: number;\n  resizeAriaLabel: string;\n  resizeTooltip: React.ReactNode;\n}\n\n// Exported (alongside the context value type above) so a test can drive\n// `AppShellChatResizeEdge` in isolation with a fully-controlled mock context,\n// instead of only indirectly through `AppShellChatChat`.\nconst AppShellChatChatContext =\n  React.createContext<AppShellChatChatContextValue | null>(null);\n\nfunction useAppShellChatChatContext(): AppShellChatChatContextValue {\n  return (\n    React.useContext(AppShellChatChatContext) ?? {\n      compact: false,\n      width: CHAT_DEFAULT_WIDTH,\n      setWidth: () => {},\n      resetWidth: () => {},\n      minWidth: CHAT_MIN_WIDTH,\n      maxWidth: CHAT_MAX_WIDTH_FALLBACK,\n      resizeAriaLabel: 'Resize chat',\n      resizeTooltip: defaultResizeTooltip,\n    }\n  );\n}\n\n// ---------------------------------------------------------------------------\n// AppShellChatResizeEdge — internal drag/keyboard handle on Chat's START\n// border (the shared boundary with Content). Mirrors\n// `SidebarSecondaryResizeEdge`'s drag mechanics, flipped because Chat sits at\n// the END of the row: the handle is on `start-0`, the width grows as the\n// pointer moves toward the row's start, and the arrow keys are inverted.\n// UNLIKE SidebarSecondary's edge, there is no click-to-collapse /\n// double-click-to-expand toggle — Chat has no collapsed mode, only a resize\n// floor, so the only interactions are drag-to-resize and double-click-to-reset.\n// Exported (with its handlers below) for direct unit testing; consumers\n// should still compose Chat via `AppShellChatChat`, which renders it\n// automatically — it is not meant to be placed manually.\n// ---------------------------------------------------------------------------\n\n/**\n * The true resize ceiling: the row's total width minus everything in it\n * EXCEPT Content (which can always shrink to 0) and Chat itself. This lets\n * Chat reach full width — Content shrinking to 0 — instead of being capped by\n * a fixed constant that strands Content with a bogus minimum once both\n * sidebars are collapsed and the row has room to give. Exported for direct\n * testing; `handleResizePointerDown` / `handleResizeKeyDown` are the real\n * callers.\n */\nexport function getResizeMaxWidth(chatEl: HTMLElement, fallback: number): number {\n  const rowEl = chatEl.parentElement;\n  if (!rowEl) return fallback;\n  const rowRect = rowEl.getBoundingClientRect();\n  if (rowRect.width <= 0) return fallback;\n  let reserved = 0;\n  for (const sibling of Array.from(rowEl.children)) {\n    if (sibling === chatEl) continue;\n    if ((sibling as HTMLElement).dataset.slot === 'app-shell-chat-content')\n      continue;\n    reserved += (sibling as HTMLElement).getBoundingClientRect().width;\n  }\n  const available = rowRect.width - reserved;\n  return available > 0 ? available : fallback;\n}\n\n/** The subset of context `handleResizePointerDown` needs to drag-resize. */\nexport type ResizePointerDownContext = Pick<\n  AppShellChatChatContextValue,\n  'minWidth' | 'maxWidth' | 'setWidth'\n>;\n\n/**\n * Pointerdown handler for the Chat resize edge: captures the pointer,\n * disables the chat's width transition for the duration of the drag, and\n * clamps width between `ctx.minWidth` and the dynamically-measured ceiling\n * (`getResizeMaxWidth`) — NOT `ctx.maxWidth`, which is only the fallback used\n * when that measurement is unavailable. Chat's END edge is pinned against the\n * container's end, so dragging the pointer toward the row's start grows the\n * chat — the mirror image of `SidebarSecondaryResizeEdge` (whose START edge is\n * pinned). Exported for direct testing; `AppShellChatResizeEdge` is the real\n * caller (it supplies `onDragStart`/`onDragEnd` to drive its own `dragging`\n * state, e.g. to suppress the tooltip while dragging).\n *\n * `ctxRef` is a ref (not a plain snapshot): the drag's `pointermove`/`pointerup`\n * listeners live on `window` for the whole gesture, and `ctx.setWidth`'s\n * identity can change mid-drag from a re-render that has nothing to do with\n * the drag itself (e.g. a consumer's `onWidthChange` prop is a fresh inline\n * function every render, which changes `setWidth`'s `useCallback` identity).\n * Reading `ctxRef.current.setWidth` on every move — instead of destructuring\n * `setWidth` once up front — means the listeners always call whatever\n * `setWidth` is current, the same defensive pattern\n * `SidebarSecondaryResizeEdge` uses via its own `ctxRef`. `minWidth`/`maxWidth`\n * are still snapshotted once at drag-start (matching the frozen `chatRect`\n * they're paired with) since they're geometry, not a callback identity.\n *\n * Both `pointerup` and `pointercancel` end the drag (a cancelled gesture — a\n * touch-scroll takeover, palm rejection, losing focus mid-drag — never fires\n * `pointerup`, so relying on that alone leaks the listeners and leaves\n * `dragging` stuck `true` forever). `ev.pointerId` is checked against the\n * pointer that started the drag so a second, unrelated pointer (multi-touch on\n * the 17px handle) can't feed this drag's math or end it early.\n */\nexport function handleResizePointerDown(\n  e: React.PointerEvent<HTMLDivElement>,\n  ctxRef: { current: ResizePointerDownContext },\n  { onDragStart, onDragEnd }: { onDragStart?: () => void; onDragEnd?: () => void } = {}\n): void {\n  e.preventDefault();\n  const el = e.currentTarget;\n  const { pointerId } = e;\n  el.setPointerCapture(pointerId);\n  onDragStart?.();\n\n  // The chat panel is the nearest `[data-state]` ancestor of the handle.\n  const chatEl = el.closest('[data-state]') as HTMLElement | null;\n  if (!chatEl) {\n    onDragEnd?.();\n    el.releasePointerCapture(pointerId);\n    return;\n  }\n  // Disable the width transition while dragging so resize tracks the cursor\n  // without animation lag.\n  chatEl.style.transitionProperty = 'none';\n  const isRtl = getComputedStyle(chatEl).direction === 'rtl';\n  const chatRect = chatEl.getBoundingClientRect();\n\n  const { minWidth, maxWidth: fallbackMax } = ctxRef.current;\n  const maxWidth = getResizeMaxWidth(chatEl, fallbackMax);\n\n  const onPointerMove = (ev: PointerEvent) => {\n    if (ev.pointerId !== pointerId) return;\n    const newWidth = isRtl\n      ? ev.clientX - chatRect.left\n      : chatRect.right - ev.clientX;\n    ctxRef.current.setWidth(Math.min(Math.max(newWidth, minWidth), maxWidth));\n  };\n\n  const endDrag = (ev: PointerEvent) => {\n    if (ev.pointerId !== pointerId) return;\n    onDragEnd?.();\n    chatEl.style.transitionProperty = '';\n    window.removeEventListener('pointermove', onPointerMove);\n    window.removeEventListener('pointerup', endDrag);\n    window.removeEventListener('pointercancel', endDrag);\n  };\n\n  window.addEventListener('pointermove', onPointerMove);\n  window.addEventListener('pointerup', endDrag);\n  window.addEventListener('pointercancel', endDrag);\n}\n\n/** The subset of context `handleResizeKeyDown` needs to resize via keyboard. */\nexport type ResizeKeyDownContext = Pick<\n  AppShellChatChatContextValue,\n  'minWidth' | 'maxWidth' | 'width' | 'setWidth' | 'resetWidth'\n>;\n\n/**\n * Keydown handler for the Chat resize edge: ArrowLeft/ArrowRight resize by\n * 16px, clamped to `[ctx.minWidth, the dynamically-measured ceiling]` (see\n * `getResizeMaxWidth`) via the SAME `Math.min(Math.max(next, minWidth),\n * maxWidth)` order the pointer-drag handler uses. That order matters when the\n * row is narrow enough that the measured ceiling drops below `minWidth` (e.g.\n * both sidebars expanded on a small viewport): clamping the floor first and\n * the ceiling second means the ceiling always wins the degenerate case, so\n * grow/shrink can't fight each other into a value outside the valid range.\n * Growing Chat's width moves the boundary \"toward the row's start\", so the\n * grow key is the OPPOSITE of `SidebarSecondaryResizeEdge`'s: ArrowLeft in\n * LTR, ArrowRight in RTL.\n *\n * Home delegates to `ctx.resetWidth()` rather than computing a clamped\n * number itself — `resetWidth` restores the LIVE breakpoint-driven width\n * (see `AppShellChatChatContextValue.resetWidth`), which is always already\n * in range, so no clamp is needed here. Exported for direct testing;\n * `AppShellChatResizeEdge` is the real caller.\n */\nexport function handleResizeKeyDown(\n  e: React.KeyboardEvent<HTMLDivElement>,\n  ctx: ResizeKeyDownContext,\n  dir: 'ltr' | 'rtl'\n): void {\n  const { minWidth, maxWidth: fallbackMax, width: w, setWidth: sw, resetWidth } = ctx;\n  const step = 16;\n  const growKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n  const shrinkKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n  const chatEl = e.currentTarget.closest('[data-state]') as HTMLElement | null;\n  const maxWidth = chatEl ? getResizeMaxWidth(chatEl, fallbackMax) : fallbackMax;\n  const clamp = (next: number) => Math.min(Math.max(next, minWidth), maxWidth);\n  if (e.key === growKey) {\n    e.preventDefault();\n    sw(clamp(w + step));\n  } else if (e.key === shrinkKey) {\n    e.preventDefault();\n    sw(clamp(w - step));\n  } else if (e.key === 'Home') {\n    e.preventDefault();\n    resetWidth();\n  }\n}\n\n// Exported so a test can drive it in isolation (see `AppShellChatChatContext`\n// above) instead of only indirectly through `AppShellChatChat`, which is\n// otherwise the only real caller — the resize edge is rendered automatically\n// inside `AppShellChatChat` and is not meant to be composed by consumers.\nexport function AppShellChatResizeEdge() {\n  const ctx = useAppShellChatChatContext();\n  const dir = useDocDir();\n\n  // Kept in sync every render so a drag started earlier still calls the\n  // LATEST `setWidth` on every pointermove — see `handleResizePointerDown`'s\n  // doc comment for why a plain (non-ref) snapshot of `ctx` isn't safe here.\n  const ctxRef = React.useRef(ctx);\n  ctxRef.current = ctx;\n\n  // Hide the tooltip while dragging.\n  const [tooltipOpen, setTooltipOpen] = React.useState(false);\n  const [dragging, setDragging] = React.useState(false);\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    setTooltipOpen(false);\n    handleResizePointerDown(e, ctxRef, {\n      onDragStart: () => setDragging(true),\n      onDragEnd: () => setDragging(false),\n    });\n  };\n\n  const handleDoubleClick = () => {\n    ctx.resetWidth();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    handleResizeKeyDown(e, ctx, dir);\n  };\n\n  const handleTooltipOpenChange = (open: boolean) => {\n    if (dragging) return;\n    setTooltipOpen(open);\n  };\n\n  return (\n    <Tooltip\n      open={tooltipOpen}\n      onOpenChange={handleTooltipOpenChange}\n      trackCursorAxis=\"y\"\n    >\n      <TooltipTrigger\n        render={\n          <div\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            aria-label={ctx.resizeAriaLabel}\n            className={cn(\n              // 17px hit area on the inline-start edge. The chat's own border-s\n              // provides the visible 1px line; its color changes via :has() on\n              // hover/active/focus-visible (see AppShellChatChat).\n              'absolute start-0 top-0 h-full w-[17px] ltr:-translate-x-1/2 rtl:translate-x-1/2 cursor-[var(--ui-resizable-cursor,ew-resize)] z-10',\n              // On focus: a 1px active-color line (after pseudo) + 3px ring.\n              'after:absolute after:inset-y-0 after:inset-x-0 after:mx-auto after:w-0 after:pointer-events-none',\n              'after:[border-inline-start-width:var(--ui-resizable-border-width,1px)] after:border-solid after:border-transparent',\n              'focus-visible:outline-none focus-visible:after:[border-inline-start-color:var(--ui-resizable-border-color-active)] focus-visible:after:[box-shadow:0_0_0_3px_var(--ui-focus-primary)]'\n            )}\n            tabIndex={0}\n            onKeyDown={handleKeyDown}\n            onPointerDown={handlePointerDown}\n            onDoubleClick={handleDoubleClick}\n          />\n        }\n      />\n      {ctx.resizeTooltip != null && (\n        <TooltipContent side={dir === 'rtl' ? 'right' : 'left'} align=\"center\">\n          {ctx.resizeTooltip}\n        </TooltipContent>\n      )}\n    </Tooltip>\n  );\n}\nAppShellChatResizeEdge.displayName = 'AppShellChatResizeEdge';\n\n// ---------------------------------------------------------------------------\n// AppShellChatChat — the resizable panel\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatChatProps extends React.ComponentPropsWithoutRef<'aside'> {\n  /** Controlled width in px. */\n  width?: number;\n  /** Fires when the width changes due to a drag/keyboard interaction. */\n  onWidthChange?: (width: number) => void;\n  /** Accessible label for the resize edge (`role=\"separator\"`). Defaults to `'Resize chat'`. */\n  resizeAriaLabel?: string;\n  /** Tooltip content shown on the resize edge. Pass `null` to hide the tooltip entirely. */\n  resizeTooltip?: React.ReactNode;\n}\n\nconst AppShellChatChat = React.forwardRef<HTMLElement, AppShellChatChatProps>(\n  (\n    {\n      className,\n      width: widthProp,\n      onWidthChange,\n      resizeAriaLabel = 'Resize chat',\n      resizeTooltip = defaultResizeTooltip,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Uncontrolled width has two layers: `liveDefaultWidth` tracks the\n    // viewport LIVE (via `useLiveChatDefaultWidth`, mirroring the CSS\n    // classes below) until the user actually drags/keyboard-resizes —\n    // `override` captures that explicit choice and, once set, wins\n    // regardless of further viewport changes (matching the existing\n    // drag/double-click/Home mechanics, unchanged).\n    const liveDefaultWidth = useLiveChatDefaultWidth();\n    const [override, setOverrideState] = React.useState<number | undefined>(\n      undefined\n    );\n    const isWidthControlled = widthProp !== undefined;\n    const currentWidth = isWidthControlled\n      ? widthProp\n      : override ?? liveDefaultWidth;\n    const setWidth = React.useCallback(\n      (next: number) => {\n        if (!isWidthControlled) setOverrideState(next);\n        onWidthChange?.(next);\n      },\n      [isWidthControlled, onWidthChange]\n    );\n    // Reset means \"go back to the LIVE breakpoint-driven width\", not \"go\n    // back to a fixed number\" — clearing `override` (rather than setting it\n    // to some constant) is what lets viewport tracking resume afterward.\n    // `onWidthChange` still fires (even when controlled) so the consumer's\n    // width — controlled or not — reflects the same live value.\n    const resetWidth = React.useCallback(() => {\n      if (!isWidthControlled) setOverrideState(undefined);\n      onWidthChange?.(liveDefaultWidth);\n    }, [isWidthControlled, onWidthChange, liveDefaultWidth]);\n\n    const compact = currentWidth <= CHAT_MIN_WIDTH;\n\n    const context = React.useMemo<AppShellChatChatContextValue>(\n      () => ({\n        compact,\n        width: currentWidth,\n        setWidth,\n        resetWidth,\n        minWidth: CHAT_MIN_WIDTH,\n        maxWidth: CHAT_MAX_WIDTH_FALLBACK,\n        resizeAriaLabel,\n        resizeTooltip,\n      }),\n      [compact, currentWidth, setWidth, resetWidth, resizeAriaLabel, resizeTooltip]\n    );\n\n    // Apply inline width ONLY once the user has actually resized (or width\n    // is controlled) — otherwise the responsive Tailwind width classes\n    // drive it live, so brand overrides / viewport reflow are unaffected by\n    // JS. (There is no width design token, so the CSS default is the same\n    // JS constants expressed as Tailwind spacing-scale classes.)\n    const hasWidthOverride = isWidthControlled || override !== undefined;\n    const inlineStyle: React.CSSProperties | undefined = hasWidthOverride\n      ? { width: currentWidth }\n      : undefined;\n\n    return (\n      <AppShellChatChatContext.Provider value={context}>\n        <aside\n          ref={ref}\n          data-slot=\"app-shell-chat-chat\"\n          data-state={compact ? 'collapsed' : 'expanded'}\n          style={inlineStyle}\n          className={cn(\n            // Live, responsive width — no JS, reflows on every browser\n            // resize until `hasWidthOverride` (above) switches to the\n            // inline style. `w-12` is the spacing scale (3rem = 48px);\n            // `w-md`/`w-lg` are Tailwind's named container-scale width\n            // utilities (28rem/32rem = 448px/512px) — see the `CHAT_*`\n            // constants above for the same numbers.\n            'group/chat relative flex h-full shrink-0 flex-col border-s border-[var(--ui-border-on-surface-divider)] bg-background w-12 xl:w-md 3xl:w-lg transition-[width,border-color]',\n            // Resize-edge hover/active/focus recolors the START border line.\n            'has-[[role=separator]:hover]:[border-inline-start-color:var(--ui-resizable-border-color-hover)] has-[[role=separator]:active]:[border-inline-start-color:var(--ui-resizable-border-color-active)] has-[[role=separator]:focus-visible]:[border-inline-start-color:var(--ui-resizable-border-color-active)]',\n            className\n          )}\n          {...props}\n        >\n          <AppShellChatResizeEdge />\n          {children}\n        </aside>\n      </AppShellChatChatContext.Provider>\n    );\n  }\n);\nAppShellChatChat.displayName = 'AppShellChatChat';\n\n// ---------------------------------------------------------------------------\n// AppShellChatChatHeader\n// ---------------------------------------------------------------------------\n\nexport interface AppShellChatChatHeaderProps extends React.ComponentPropsWithoutRef<'div'> {\n  /** Header title (or pass as children). */\n  label?: React.ReactNode;\n  /** Trailing header actions. Hidden while compact (icon-only rail). */\n  actions?: React.ReactNode;\n}\n\nconst AppShellChatChatHeader = React.forwardRef<\n  HTMLDivElement,\n  AppShellChatChatHeaderProps\n>(({ className, label, actions, children, ...props }, ref) => {\n  const { compact } = useAppShellChatChatContext();\n  const dir = useDocDir();\n  const resolvedLabel = label ?? children;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell-chat-chat-header\"\n      className={cn(\n        'flex shrink-0 items-center border-b border-[var(--ui-border-on-surface-divider)] p-4',\n        compact ? 'justify-center' : 'gap-3',\n        className\n      )}\n      {...props}\n    >\n      {compact ? (\n        // Collapsed rail: only the Acronis \"A\" mark, with the full label on\n        // hover. `size-8` keeps this row exactly as tall as the label row\n        // below (a 32px line height) — the icon alone is only 24px, so\n        // without an explicit size the header would be a few px shorter than\n        // Content's header. The accessible name comes from the `sr-only`\n        // span's actual DOM content (same pattern as\n        // `SidebarPrimaryMenuItem`'s collapsed rail), not a derived\n        // `aria-label` string — that works for ANY `resolvedLabel`\n        // (a plain string or a rich ReactNode via `children`), whereas a\n        // `typeof resolvedLabel === 'string'` check would silently leave\n        // the icon with no accessible name at all for non-string content.\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <span className=\"flex size-8 items-center justify-center\" />\n            }\n          >\n            <AcronisIcon size={24} aria-hidden=\"true\" />\n            <span className=\"sr-only\">{resolvedLabel}</span>\n          </TooltipTrigger>\n          <TooltipContent side={dir === 'rtl' ? 'left' : 'right'}>\n            {resolvedLabel}\n          </TooltipContent>\n        </Tooltip>\n      ) : (\n        <>\n          <span className=\"ui-typography-headings-title min-w-0 flex-1 truncate text-[var(--ui-text-on-surface-primary)]\">\n            {resolvedLabel}\n          </span>\n          {actions != null && (\n            <span className=\"flex shrink-0 items-center\">{actions}</span>\n          )}\n        </>\n      )}\n    </div>\n  );\n});\nAppShellChatChatHeader.displayName = 'AppShellChatChatHeader';\n\nconst AppShellChatChatBody = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => {\n  const { compact } = useAppShellChatChatContext();\n  return (\n    <div\n      ref={ref}\n      data-slot=\"app-shell-chat-chat-body\"\n      className={cn(\n        'flex flex-1 flex-col overflow-auto p-4',\n        compact && 'hidden',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nAppShellChatChatBody.displayName = 'AppShellChatChatBody';\n\nexport {\n  AppShellChat,\n  AppShellChatSidebar,\n  AppShellChatContent,\n  AppShellChatContentHeader,\n  AppShellChatContentBody,\n  AppShellChatChat,\n  AppShellChatChatHeader,\n  AppShellChatChatBody,\n  AppShellChatChatContext,\n};\n"],"mappings":"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"}

package/dist/components/ui/area-chart/area-chart.js

@@ -1,242 +1,157 @@
-import { jsx as r, jsxs as y } from "react/jsx-runtime";
-import * as $ from "react";
-import { cva as ue } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { AreaChart as ve, CartesianGrid as Le, XAxis as Ce, YAxis as Ae, Area as be, LabelList as Re, ReferenceLine as xe, Brush as Te } from "recharts";
-import { cn as $e } from "../../../lib/utils.js";
-import { resolveAnimation as ye, resolveCartesianLabelPosition as De, CHART_LABEL_MARGIN as Pe, resolveRotatedTickAnchor as ke, CHART_LABEL_FONT_SIZE as Fe, resolveLabelFillClass as Ne, toLabelFormatter as Oe, resolveChartReferenceValue as _e, resolveReferenceLineProps as Ge, resolveBrushProps as Ie, resolveXAxisTitle as we, resolveXAxisHeight as ze, resolveYAxisTitle as Be, resolveAxisDomain as He, toReferenceLineList as je } from "../chart/chart-format.js";
-import { ChartContainer as Ee, ChartTooltip as Ve, ChartTooltipContent as Xe, ChartLegend as Me, ChartLegendContent as We } from "../chart/chart.js";
-const Ye = ue("", {
-  variants: {
-    layout: {
-      single: "",
-      stacked: ""
-    },
-    fill: {
-      solid: "",
-      gradient: ""
-    }
-  },
-  defaultVariants: {
-    layout: "single",
-    fill: "gradient"
-  }
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o } from "../chart/chart.js";
+import { CHART_LABEL_MARGIN as ee, resolveAnimation as te, resolveAxisDomain as ne, resolveBrushProps as s, resolveCartesianLabelPosition as c, resolveChartReferenceValue as l, resolveLabelFillClass as u, resolveReferenceLineProps as d, resolveRotatedTickAnchor as f, resolveXAxisHeight as p, resolveXAxisTitle as m, resolveYAxisTitle as h, toLabelFormatter as g, toReferenceLineList as re } from "../chart/chart-format.js";
+import * as _ from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Area as ie, AreaChart as ae, Brush as oe, CartesianGrid as se, LabelList as ce, ReferenceLine as b, XAxis as x, YAxis as S } from "recharts";
+//#region src/components/ui/area-chart/area-chart.tsx
+var C = t("", {
+	variants: {
+		layout: {
+			single: "",
+			stacked: ""
+		},
+		fill: {
+			solid: "",
+			gradient: ""
+		}
+	},
+	defaultVariants: {
+		layout: "single",
+		fill: "gradient"
+	}
 });
-function Ke({
-  dataKeys: s,
-  gradientId: n,
-  colorFor: l
-}) {
-  return /* @__PURE__ */ r("defs", { children: s.map((a) => /* @__PURE__ */ y(
-    "linearGradient",
-    {
-      id: `${n}-${a}`,
-      x1: "0",
-      y1: "0",
-      x2: "0",
-      y2: "1",
-      children: [
-        /* @__PURE__ */ r("stop", { offset: "5%", stopColor: l(a), stopOpacity: 0.8 }),
-        /* @__PURE__ */ r("stop", { offset: "95%", stopColor: l(a), stopOpacity: 0.1 })
-      ]
-    },
-    a
-  )) });
+function w({ dataKeys: e, gradientId: t, colorFor: n }) {
+	return /* @__PURE__ */ v("defs", { children: e.map((e) => /* @__PURE__ */ y("linearGradient", {
+		id: `${t}-${e}`,
+		x1: "0",
+		y1: "0",
+		x2: "0",
+		y2: "1",
+		children: [/* @__PURE__ */ v("stop", {
+			offset: "5%",
+			stopColor: n(e),
+			stopOpacity: .8
+		}), /* @__PURE__ */ v("stop", {
+			offset: "95%",
+			stopColor: n(e),
+			stopOpacity: .1
+		})]
+	}, e)) });
 }
-const Ze = $.forwardRef(
-  ({
-    className: s,
-    config: n,
-    palette: l,
-    data: a,
-    dataKeys: c,
-    xKey: u,
-    xAxisLabel: v,
-    yAxisLabel: L,
-    yUnit: D,
-    layout: d = "single",
-    fill: f = "gradient",
-    curve: P = "monotone",
-    strokeWidth: k = 2,
-    fillOpacity: F = 0.4,
-    showDots: N = !1,
-    dotSize: O = 3,
-    showActiveDot: _,
-    connectNulls: G = !1,
-    areaSettings: t,
-    referenceLine: I,
-    showGrid: w = !0,
-    showTooltip: z = !0,
-    showLegend: B = !0,
-    showXAxis: H = !0,
-    showYAxis: j = !0,
-    xTickFormatter: C,
-    yTickFormatter: E,
-    xAxisAngle: h,
-    xAxisInterval: V,
-    yAxisTickCount: X,
-    yAxisDomain: M,
-    gridDashed: W,
-    gridHorizontal: Y,
-    gridVertical: K,
-    tooltipContent: Z,
-    animate: q,
-    animationDuration: J,
-    animationBegin: Q,
-    animationEasing: U,
-    showLabels: A = !1,
-    labelPosition: S,
-    labelFormatter: g,
-    showBrush: ee = !1,
-    brushHeight: oe,
-    brushAriaLabel: re,
-    ...ae
-  }, te) => {
-    const ie = ye({
-      animate: q,
-      animationDuration: J,
-      animationBegin: Q,
-      animationEasing: U
-    }), b = d === "stacked", le = De({
-      labelPosition: S,
-      isStacked: b
-    }), m = f === "gradient", se = je(I), p = (o) => {
-      var e;
-      return ((e = t == null ? void 0 : t[o]) == null ? void 0 : e.color) ?? `var(--color-${o})`;
-    }, ne = A || Object.values(t ?? {}).some((o) => o.showLabel), ce = we(v), de = Be(L), fe = He(M), he = ze(v, h), R = `area-gradient-${$.useId().replace(/:/g, "")}`;
-    return /* @__PURE__ */ r(
-      "div",
-      {
-        ref: te,
-        "data-layout": d,
-        "data-fill": f,
-        className: $e(Ye({ layout: d, fill: f }), s),
-        ...ae,
-        children: /* @__PURE__ */ r(
-          Ee,
-          {
-            config: n,
-            palette: l,
-            className: "size-full [&_.recharts-label]:fill-foreground",
-            children: /* @__PURE__ */ y(
-              ve,
-              {
-                data: a,
-                margin: ne ? Pe : void 0,
-                children: [
-                  m && /* @__PURE__ */ r(
-                    Ke,
-                    {
-                      dataKeys: c,
-                      gradientId: R,
-                      colorFor: p
-                    }
-                  ),
-                  w && /* @__PURE__ */ r(
-                    Le,
-                    {
-                      horizontal: Y ?? !0,
-                      vertical: K ?? !1,
-                      strokeDasharray: W ? "3 3" : void 0
-                    }
-                  ),
-                  /* @__PURE__ */ r(
-                    Ce,
-                    {
-                      dataKey: u,
-                      type: "category",
-                      hide: !H,
-                      tickLine: !1,
-                      axisLine: !1,
-                      tickMargin: 8,
-                      tickFormatter: C,
-                      angle: h,
-                      interval: V,
-                      textAnchor: ke(h),
-                      height: he,
-                      label: ce
-                    }
-                  ),
-                  /* @__PURE__ */ r(
-                    Ae,
-                    {
-                      type: "number",
-                      hide: !j,
-                      tickLine: !1,
-                      axisLine: !1,
-                      unit: D,
-                      tickFormatter: E,
-                      tickCount: X,
-                      domain: fe,
-                      width: L ? 72 : void 0,
-                      label: de
-                    }
-                  ),
-                  z && /* @__PURE__ */ r(Ve, { content: Z ?? /* @__PURE__ */ r(Xe, {}) }),
-                  B && /* @__PURE__ */ r(Me, { content: /* @__PURE__ */ r(We, {}) }),
-                  c.map((o) => {
-                    const e = t == null ? void 0 : t[o], i = (e == null ? void 0 : e.showDots) ?? N, x = (e == null ? void 0 : e.dotSize) ?? O, me = _ ?? i, pe = (e == null ? void 0 : e.showLabel) ?? A, T = (e == null ? void 0 : e.labelPosition) ?? le;
-                    return /* @__PURE__ */ r(
-                      be,
-                      {
-                        type: (e == null ? void 0 : e.curveType) ?? P ?? "monotone",
-                        dataKey: o,
-                        stackId: b ? "a" : void 0,
-                        stroke: p(o),
-                        strokeWidth: (e == null ? void 0 : e.strokeWidth) ?? k,
-                        strokeDasharray: e != null && e.dashed ? "5 5" : void 0,
-                        fill: m ? `url(#${R}-${o})` : p(o),
-                        fillOpacity: (e == null ? void 0 : e.fillOpacity) ?? (m ? 1 : F),
-                        dot: i ? { r: x } : !1,
-                        activeDot: me ? { r: x + 2 } : !1,
-                        connectNulls: G,
-                        ...ie,
-                        children: pe && /* @__PURE__ */ r(
-                          Re,
-                          {
-                            dataKey: o,
-                            position: T,
-                            formatter: Oe(g),
-                            className: Ne(T, {
-                              translucentSeries: !0
-                            }),
-                            fontSize: Fe
-                          }
-                        )
-                      },
-                      o
-                    );
-                  }),
-                  se.map((o, e) => {
-                    const i = _e(o, a, c);
-                    return i === void 0 ? null : /* @__PURE__ */ r(
-                      xe,
-                      {
-                        y: i,
-                        ...Ge(o.label, o.labelPosition)
-                      },
-                      `${o.label ?? "ref"}-${e}`
-                    );
-                  }),
-                  ee && /* @__PURE__ */ r(
-                    Te,
-                    {
-                      dataKey: u,
-                      tickFormatter: C,
-                      ...Ie({ brushHeight: oe, brushAriaLabel: re })
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-Ze.displayName = "AreaChart";
-export {
-  Ze as AreaChart,
-  Ye as areaChartVariants
-};
-//# sourceMappingURL=area-chart.js.map
+var T = _.forwardRef(({ className: t, config: T, palette: E, data: D, dataKeys: O, xKey: k, xAxisLabel: A, yAxisLabel: j, yUnit: M, layout: N = "single", fill: P = "gradient", curve: F = "monotone", strokeWidth: I = 2, fillOpacity: L = .4, showDots: R = !1, dotSize: z = 3, showActiveDot: B, connectNulls: V = !1, areaSettings: H, referenceLine: U, showGrid: W = !0, showTooltip: G = !0, showLegend: le = !0, showXAxis: ue = !0, showYAxis: de = !0, xTickFormatter: K, yTickFormatter: fe, xAxisAngle: q, xAxisInterval: pe, yAxisTickCount: me, yAxisDomain: he, gridDashed: ge, gridHorizontal: _e, gridVertical: ve, tooltipContent: ye, animate: be, animationDuration: xe, animationBegin: Se, animationEasing: Ce, showLabels: J = !1, labelPosition: we, labelFormatter: Te, showBrush: Ee = !1, brushHeight: De, brushAriaLabel: Oe, ...ke }, Ae) => {
+	let je = te({
+		animate: be,
+		animationDuration: xe,
+		animationBegin: Se,
+		animationEasing: Ce
+	}), Y = N === "stacked", Me = c({
+		labelPosition: we,
+		isStacked: Y
+	}), X = P === "gradient", Z = re(U), Q = (e) => H?.[e]?.color ?? `var(--color-${e})`, Ne = J || Object.values(H ?? {}).some((e) => e.showLabel), Pe = m(A), Fe = h(j), Ie = ne(he), Le = p(A, q), $ = `area-gradient-${_.useId().replace(/:/g, "")}`;
+	return /* @__PURE__ */ v("div", {
+		ref: Ae,
+		"data-layout": N,
+		"data-fill": P,
+		className: e(C({
+			layout: N,
+			fill: P
+		}), t),
+		...ke,
+		children: /* @__PURE__ */ v(n, {
+			config: T,
+			palette: E,
+			className: "size-full [&_.recharts-label]:fill-foreground",
+			children: /* @__PURE__ */ y(ae, {
+				data: D,
+				margin: Ne ? ee : void 0,
+				children: [
+					X && /* @__PURE__ */ v(w, {
+						dataKeys: O,
+						gradientId: $,
+						colorFor: Q
+					}),
+					W && /* @__PURE__ */ v(se, {
+						horizontal: _e ?? !0,
+						vertical: ve ?? !1,
+						strokeDasharray: ge ? "3 3" : void 0
+					}),
+					/* @__PURE__ */ v(x, {
+						dataKey: k,
+						type: "category",
+						hide: !ue,
+						tickLine: !1,
+						axisLine: !1,
+						tickMargin: 8,
+						tickFormatter: K,
+						angle: q,
+						interval: pe,
+						textAnchor: f(q),
+						height: Le,
+						label: Pe
+					}),
+					/* @__PURE__ */ v(S, {
+						type: "number",
+						hide: !de,
+						tickLine: !1,
+						axisLine: !1,
+						unit: M,
+						tickFormatter: fe,
+						tickCount: me,
+						domain: Ie,
+						width: j ? 72 : void 0,
+						label: Fe
+					}),
+					G && /* @__PURE__ */ v(a, { content: ye ?? /* @__PURE__ */ v(o, {}) }),
+					le && /* @__PURE__ */ v(r, { content: /* @__PURE__ */ v(i, {}) }),
+					O.map((e) => {
+						let t = H?.[e], n = t?.showDots ?? R, r = t?.dotSize ?? z, i = B ?? n, a = t?.showLabel ?? J, o = t?.labelPosition ?? Me;
+						return /* @__PURE__ */ v(ie, {
+							type: t?.curveType ?? F ?? "monotone",
+							dataKey: e,
+							stackId: Y ? "a" : void 0,
+							stroke: Q(e),
+							strokeWidth: t?.strokeWidth ?? I,
+							strokeDasharray: t?.dashed ? "5 5" : void 0,
+							fill: X ? `url(#${$}-${e})` : Q(e),
+							fillOpacity: t?.fillOpacity ?? (X ? 1 : L),
+							dot: n ? { r } : !1,
+							activeDot: i ? { r: r + 2 } : !1,
+							connectNulls: V,
+							...je,
+							children: a && /* @__PURE__ */ v(ce, {
+								dataKey: e,
+								position: o,
+								formatter: g(Te),
+								className: u(o, { translucentSeries: !0 }),
+								fontSize: 12
+							})
+						}, e);
+					}),
+					Z.map((e, t) => {
+						let n = l(e, D, O);
+						return n === void 0 ? null : /* @__PURE__ */ v(b, {
+							y: n,
+							...d(e.label, e.labelPosition)
+						}, `${e.label ?? "ref"}-${t}`);
+					}),
+					Ee && /* @__PURE__ */ v(oe, {
+						dataKey: k,
+						tickFormatter: K,
+						...s({
+							brushHeight: De,
+							brushAriaLabel: Oe
+						})
+					})
+				]
+			})
+		})
+	});
+});
+T.displayName = "AreaChart";
+//#endregion
+export { T as AreaChart, C as areaChartVariants };
+
+//# sourceMappingURL=area-chart.js.map