@keboola/design 11.9.0 → 12.0.0

package/dist/{Workbench-UR2FBC7I.js.map → Workbench-DmZzpkj7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Workbench-UR2FBC7I.js","names":[],"sources":["../src/components/Workbench/constants.ts","../src/components/Workbench/context.ts","../src/components/Workbench/WorkbenchBar/WorkbenchBarEnd.tsx","../src/components/Workbench/WorkbenchBar/WorkbenchBarMiddle.tsx","../src/components/Workbench/WorkbenchBar/WorkbenchBarStart.tsx","../src/components/Workbench/WorkbenchBar/WorkbenchBar.tsx","../src/components/Workbench/WorkbenchFullScreenTrigger.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelResizeHandle.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanel.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelActions.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelContent.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelHeader.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelTitle.tsx","../src/components/Workbench/Workbench.tsx"],"sourcesContent":["export const DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM = 2.75;\n\nexport const MIN_WORKBENCH_BAR_HEIGHT_IN_REM = 1;\n\nexport const DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX = 320;\n\nexport const MIN_WORKBENCH_PANEL_HEIGHT_IN_PX = 120;\n\nexport const WORKBENCH_PANEL_RESIZE_STEP_IN_PX = 24;\n\nexport const WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO = 0.8;\n","import { createContext, use } from 'react';\nimport type { Dispatch, SetStateAction } from 'react';\n\n/**\n * Full screen is a mode of the open panel, not a flag beside it — as two booleans the fourth\n * combination (collapsed *and* full screen) is expressible but meaningless.\n */\nexport type WorkbenchState = 'collapsed' | 'expanded' | 'full-screen';\n\ntype WorkbenchActions = {\n  expand: () => void;\n  collapse: () => void;\n  toggleExpanded: () => void;\n  enterFullScreen: () => void;\n  exitFullScreen: () => void;\n  toggleFullScreen: () => void;\n};\n\ntype WorkbenchContextValue = WorkbenchActions & {\n  state: WorkbenchState;\n  setState: Dispatch<SetStateAction<WorkbenchState>>;\n  panelHeight: number;\n  setPanelHeight: Dispatch<SetStateAction<number>>;\n  isResizing: boolean;\n  setIsResizing: (isResizing: boolean) => void;\n};\n\nexport const createWorkbenchActions = (\n  setState: Dispatch<SetStateAction<WorkbenchState>>,\n): WorkbenchActions => ({\n  // Opening an already-open panel leaves full screen alone.\n  expand: () => setState((state) => (state === 'collapsed' ? 'expanded' : state)),\n  collapse: () => setState('collapsed'),\n  toggleExpanded: () => setState((state) => (state === 'collapsed' ? 'expanded' : 'collapsed')),\n\n  enterFullScreen: () => setState('full-screen'),\n  // Exiting returns to the open panel, never to a closed one — this is a restore, not a collapse.\n  exitFullScreen: () => setState((state) => (state === 'full-screen' ? 'expanded' : state)),\n  toggleFullScreen: () =>\n    setState((state) => (state === 'full-screen' ? 'expanded' : 'full-screen')),\n});\n\nexport const WorkbenchContext = createContext<WorkbenchContextValue | null>(null);\n\n/**\n * The parts sit at arbitrary depth under `<Workbench>` — a trigger lives inside the panel header,\n * three levels down — so the state travels by context rather than props.\n */\nexport const useWorkbench = (): WorkbenchContextValue => {\n  const context = use(WorkbenchContext);\n\n  if (context === null) {\n    throw new Error('Workbench compound components must be rendered inside <Workbench>.');\n  }\n\n  return context;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBarEnd = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-bar-end\"\n    className={cn(\n      // grid placement\n      'tw:col-start-3',\n      'tw:row-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-end',\n      'tw:gap-2',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBarMiddle = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-bar-middle\"\n    className={cn(\n      // grid placement\n      'tw:col-start-2',\n      'tw:row-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:gap-2',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBarStart = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-bar-start\"\n    className={cn(\n      // grid placement\n      'tw:col-start-1',\n      'tw:row-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-2',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\nimport { WorkbenchBarEnd } from './WorkbenchBarEnd';\nimport { WorkbenchBarMiddle } from './WorkbenchBarMiddle';\nimport { WorkbenchBarStart } from './WorkbenchBarStart';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBar = ({ className, children, ...props }: Props) => (\n  <div\n    // Marked so a floating surface (kbc-ui's Kai widget) can measure the dock; the root's rect is the bar alone.\n    data-workbench-slot=\"bar\"\n    className={cn(\n      // layout\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr_auto]',\n      'tw:items-center',\n      'tw:gap-x-2',\n\n      // sizing\n      'tw:h-(--workbench-bar-height)',\n      'tw:shrink-0',\n      'tw:pointer-events-auto',\n\n      // surface\n      'tw:border-t',\n      'tw:border-sidebar-border',\n      'tw:bg-sidebar',\n\n      // spacing\n      'tw:px-3',\n\n      // typography\n      'tw:text-xs',\n\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nWorkbenchBar.Start = WorkbenchBarStart;\nWorkbenchBar.Middle = WorkbenchBarMiddle;\nWorkbenchBar.End = WorkbenchBarEnd;\n","import type { ComponentProps, MouseEvent } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useWorkbench } from './context';\n\ntype Props = ComponentProps<'button'> & {\n  asChild?: boolean;\n};\n\nexport const WorkbenchFullScreenTrigger = ({ asChild = false, onClick, ...props }: Props) => {\n  const { state, toggleFullScreen } = useWorkbench();\n  const isFullScreen = state === 'full-screen';\n  const Comp = asChild ? Slot : 'button';\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented) {\n      toggleFullScreen();\n    }\n  };\n\n  return (\n    <Comp\n      {...(asChild ? {} : { type: 'button' as const })}\n      {...props}\n      data-slot=\"workbench-full-screen-trigger\"\n      data-state={isFullScreen ? 'on' : 'off'}\n      onClick={handleClick}\n    />\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { KeyboardEvent, PointerEvent, RefObject } from 'react';\n\nimport { cn } from '../../../utils';\nimport {\n  MIN_WORKBENCH_PANEL_HEIGHT_IN_PX,\n  WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO,\n  WORKBENCH_PANEL_RESIZE_STEP_IN_PX,\n} from '../constants';\nimport { useWorkbench } from '../context';\n\ntype Props = {\n  panelRef: RefObject<HTMLDivElement | null>;\n};\n\nconst getMaxHeight = (panel: HTMLDivElement) => {\n  const hostTop = panel.offsetParent?.getBoundingClientRect().top ?? 0;\n\n  return Math.max(panel.getBoundingClientRect().bottom - hostTop, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX);\n};\n\nconst clampHeight = (height: number, panel: HTMLDivElement) =>\n  Math.min(Math.max(height, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX), getMaxHeight(panel));\n\nexport const WorkbenchPanelResizeHandle = ({ panelRef }: Props) => {\n  const {\n    state,\n    panelHeight,\n    setPanelHeight,\n    isResizing,\n    setIsResizing,\n    enterFullScreen,\n    exitFullScreen,\n  } = useWorkbench();\n  const grabOffsetRef = useRef(0);\n  const previousStateRef = useRef(state);\n  const isFullScreenRequestedRef = useRef(state === 'full-screen');\n  const enteredFullScreenByDragRef = useRef(false);\n  const exitedFullScreenByDragRef = useRef(false);\n\n  useEffect(() => {\n    if (!isResizing) return;\n\n    const { body } = document;\n    const { cursor, userSelect } = body.style;\n\n    body.style.cursor = 'ns-resize';\n    body.style.userSelect = 'none';\n\n    return () => {\n      body.style.cursor = cursor;\n      body.style.userSelect = userSelect;\n    };\n  }, [isResizing]);\n\n  useEffect(() => {\n    const previous = previousStateRef.current;\n    const panel = panelRef.current;\n\n    previousStateRef.current = state;\n    isFullScreenRequestedRef.current = state === 'full-screen';\n\n    if (previous !== 'full-screen' || state !== 'expanded' || !panel) return;\n\n    const draggedIntoFullScreen = enteredFullScreenByDragRef.current;\n    const draggedOutOfFullScreen = exitedFullScreenByDragRef.current;\n\n    enteredFullScreenByDragRef.current = false;\n    exitedFullScreenByDragRef.current = false;\n\n    if (!draggedIntoFullScreen || draggedOutOfFullScreen) return;\n\n    setPanelHeight(\n      clampHeight(getMaxHeight(panel) * WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO, panel),\n    );\n  }, [state, panelRef, setPanelHeight]);\n\n  const applyHeight = (height: number, panel: HTMLDivElement) => {\n    const isFullScreen = isFullScreenRequestedRef.current;\n\n    if (height >= getMaxHeight(panel)) {\n      if (!isFullScreen) {\n        isFullScreenRequestedRef.current = true;\n        enteredFullScreenByDragRef.current = true;\n        enterFullScreen();\n      }\n\n      return;\n    }\n\n    if (isFullScreen) {\n      isFullScreenRequestedRef.current = false;\n      exitedFullScreenByDragRef.current = true;\n      exitFullScreen();\n    }\n\n    setPanelHeight(Math.max(height, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX));\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    const panel = panelRef.current;\n\n    if (event.button !== 0 || !panel) return;\n\n    event.preventDefault();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    grabOffsetRef.current = panel.getBoundingClientRect().top - event.clientY;\n    setIsResizing(true);\n  };\n\n  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const panel = panelRef.current;\n\n    if (!panel || !event.currentTarget.hasPointerCapture(event.pointerId)) return;\n\n    const top = event.clientY + grabOffsetRef.current;\n\n    applyHeight(panel.getBoundingClientRect().bottom - top, panel);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const panel = panelRef.current;\n\n    if (!panel) return;\n\n    const step = event.shiftKey\n      ? WORKBENCH_PANEL_RESIZE_STEP_IN_PX * 4\n      : WORKBENCH_PANEL_RESIZE_STEP_IN_PX;\n    const delta = event.key === 'ArrowUp' ? step : event.key === 'ArrowDown' ? -step : 0;\n\n    if (delta === 0) return;\n\n    event.preventDefault();\n    applyHeight(\n      (isFullScreenRequestedRef.current ? getMaxHeight(panel) : panelHeight) + delta,\n      panel,\n    );\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      aria-label=\"Resize panel\"\n      aria-valuenow={Math.round(panelHeight)}\n      aria-valuemin={MIN_WORKBENCH_PANEL_HEIGHT_IN_PX}\n      tabIndex={0}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onLostPointerCapture={() => setIsResizing(false)}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        // group\n        'tw:group/workbench-resize',\n\n        // positioning — the panel is the positioned ancestor\n        'tw:absolute',\n        'tw:inset-x-0',\n        'tw:top-0',\n        'tw:z-10',\n\n        // sizing\n        'tw:h-2',\n\n        // layout — the whole strip grabs, only the pill shows\n        'tw:flex',\n        'tw:justify-center',\n\n        // affordance\n        'tw:cursor-ns-resize',\n        'tw:touch-none',\n\n        // focus\n        'tw:outline-none',\n      )}\n    >\n      <span\n        className={cn(\n          // layout — hangs below the strip so the pill sits clear of the top edge, and\n          // grabs there too since the events bubble to the strip\n          'tw:flex',\n          'tw:h-3',\n          'tw:w-16',\n          'tw:items-end',\n          'tw:justify-center',\n        )}\n      >\n        <span\n          className={cn(\n            // sizing\n            'tw:h-1.5',\n            'tw:w-16',\n\n            // surface\n            'tw:rounded-full',\n            'tw:bg-input',\n            'tw:transition-colors',\n            'tw:group-hover/workbench-resize:bg-muted-foreground',\n            'tw:group-focus-visible/workbench-resize:bg-muted-foreground',\n            'tw:group-data-[workbench-resizing=true]/workbench:bg-muted-foreground',\n          )}\n        />\n      </span>\n    </div>\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, CSSProperties } from 'react';\n\nimport { cn } from '../../../utils';\nimport { Collapsible } from '../../Collapsible';\n\nimport { WorkbenchPanelResizeHandle } from './WorkbenchPanelResizeHandle';\n\ntype Props = ComponentProps<'div'>;\n\nconst clearRadixMeasurementTransitionBlock = (panel: HTMLDivElement | null) => {\n  if (panel) panel.style.transitionDuration = '';\n};\n\nexport const WorkbenchPanel = ({ className, children, ...props }: Props) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => clearRadixMeasurementTransitionBlock(panelRef.current), []);\n\n  return (\n    <Collapsible.Content\n      ref={panelRef}\n      // See `WorkbenchBar` — the other half of the dock's measurable area.\n      data-workbench-slot=\"panel\"\n      style={{ '--workbench-panel-shadow': '0 -8px 24px -6px rgb(0 0 0 / 0.08)' } as CSSProperties}\n      className={cn(\n        // positioning — against the host, which must be a positioned element\n        'tw:absolute',\n        'tw:inset-x-0',\n        'tw:bottom-(--workbench-bar-height)',\n        'tw:pointer-events-auto',\n\n        // height — the drag-controlled var, capped at the space above the bar so the panel\n        // never covers it, whatever height was dragged or restored\n        'tw:h-(--workbench-panel-height)',\n        'tw:max-h-[calc(100%-var(--workbench-bar-height))]',\n        'tw:group-data-[workbench-state=full-screen]/workbench:h-[calc(100%-var(--workbench-bar-height))]',\n\n        // height transition\n        'tw:transition-[height]',\n        'tw:duration-200',\n        'tw:ease-out',\n        'tw:group-data-[workbench-resizing=true]/workbench:transition-none',\n\n        // surface\n        'tw:border-x',\n        'tw:border-t',\n        'tw:border-border',\n\n        // clipping\n        'tw:overflow-hidden',\n\n        // raised edge\n        'tw:group-not-data-[workbench-state=full-screen]/workbench:rounded-t-2xl',\n        'tw:group-not-data-[workbench-state=full-screen]/workbench:shadow-(--workbench-panel-shadow)',\n      )}\n    >\n      <WorkbenchPanelResizeHandle panelRef={panelRef} />\n\n      <div\n        className={cn(\n          // layout\n          'tw:flex',\n          'tw:flex-col',\n          'tw:h-full',\n\n          // surface\n          'tw:bg-background',\n\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </Collapsible.Content>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport const WorkbenchPanelActions = ({ className, asChild = false, ...props }: Props) => {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      {...props}\n      data-slot=\"workbench-panel-actions\"\n      className={cn(\n        // grid placement\n        'tw:col-start-2',\n        'tw:row-start-1',\n\n        // layout\n        'tw:flex',\n        'tw:items-center',\n        'tw:gap-2',\n\n        className,\n      )}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchPanelContent = ({ className, children, ...props }: Props) => (\n  <div\n    className={cn(\n      // layout\n      'tw:min-h-0',\n      'tw:flex-1',\n      'tw:overflow-auto',\n\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchPanelHeader = ({ className, children, ...props }: Props) => (\n  <div\n    className={cn(\n      // layout\n      'tw:grid',\n      'tw:grid-cols-[1fr_auto]',\n      'tw:items-center',\n      'tw:gap-x-2',\n\n      // sizing\n      'tw:shrink-0',\n\n      // surface\n      'tw:bg-sidebar',\n\n      // spacing\n      'tw:px-3',\n      'tw:py-2',\n\n      // typography\n      'tw:text-xs',\n\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchPanelTitle = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-panel-title\"\n    className={cn(\n      // grid placement\n      'tw:col-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n\n      // typography\n      'tw:text-sm',\n      'tw:font-semibold',\n      'tw:text-foreground',\n\n      className,\n    )}\n  />\n);\n","import { useMemo, useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { cn } from '../../utils';\nimport { Collapsible } from '../Collapsible';\n\nimport {\n  DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM,\n  DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX,\n  MIN_WORKBENCH_BAR_HEIGHT_IN_REM,\n  MIN_WORKBENCH_PANEL_HEIGHT_IN_PX,\n} from './constants';\nimport type { WorkbenchState } from './context';\nimport { createWorkbenchActions, WorkbenchContext } from './context';\nimport {\n  WorkbenchBar,\n  WorkbenchBarEnd,\n  WorkbenchBarMiddle,\n  WorkbenchBarStart,\n} from './WorkbenchBar';\nimport { WorkbenchFullScreenTrigger } from './WorkbenchFullScreenTrigger';\nimport {\n  WorkbenchPanel,\n  WorkbenchPanelActions,\n  WorkbenchPanelContent,\n  WorkbenchPanelHeader,\n  WorkbenchPanelTitle,\n} from './WorkbenchPanel';\n\ntype Props = {\n  className?: string;\n  children: ReactNode;\n  state?: WorkbenchState;\n  defaultState?: WorkbenchState;\n  onStateChange?: (state: WorkbenchState) => void;\n  barHeight?: number;\n  panelHeight?: number;\n  defaultPanelHeight?: number;\n  onPanelHeightChange?: (panelHeight: number) => void;\n};\n\nexport const Workbench = ({\n  className,\n  children,\n  state: stateProp,\n  defaultState = 'collapsed',\n  onStateChange,\n  barHeight = DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM,\n  panelHeight: panelHeightProp,\n  defaultPanelHeight = DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX,\n  onPanelHeightChange,\n}: Props) => {\n  const [state, setState] = useControllableState<WorkbenchState>({\n    prop: stateProp,\n    defaultProp: defaultState,\n    onChange: onStateChange,\n  });\n  const [panelHeight, setPanelHeight] = useControllableState<number>({\n    prop: panelHeightProp,\n    defaultProp: defaultPanelHeight,\n    onChange: onPanelHeightChange,\n  });\n  const [isResizing, setIsResizing] = useState(false);\n\n  const actions = useMemo(() => createWorkbenchActions(setState), [setState]);\n  const value = useMemo(\n    () => ({\n      state,\n      setState,\n      panelHeight,\n      setPanelHeight,\n      isResizing,\n      setIsResizing,\n      ...actions,\n    }),\n    [state, setState, panelHeight, setPanelHeight, isResizing, actions],\n  );\n\n  const clampedBarHeight = Math.max(barHeight, MIN_WORKBENCH_BAR_HEIGHT_IN_REM);\n  const clampedPanelHeight = Math.max(panelHeight, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX);\n\n  return (\n    <WorkbenchContext value={value}>\n      <Collapsible\n        open={state !== 'collapsed'}\n        onOpenChange={(open) => setState(open ? 'expanded' : 'collapsed')}\n        data-workbench-state={state}\n        data-workbench-resizing={isResizing ? 'true' : undefined}\n        style={\n          {\n            '--workbench-bar-height': `${clampedBarHeight}rem`,\n            '--workbench-panel-height': `${clampedPanelHeight}px`,\n          } as CSSProperties\n        }\n        className={cn(\n          // reset\n          'tailwindcss-preflight',\n\n          // group\n          'tw:group/workbench',\n\n          // positioning — above the chrome layer (`z-50`) *and* above a `Sidebar` in\n          // `expand-on-hover`, which takes `z-51` to float over content; the dock outranks both.\n          // Overlays (Modal / Sheet / Popover / Tooltip) live at 1051+, so they still win.\n          'tw:z-[52]',\n\n          // layout\n          'tw:shrink-0',\n\n          className,\n        )}\n      >\n        {children}\n      </Collapsible>\n    </WorkbenchContext>\n  );\n};\n\nWorkbench.Bar = WorkbenchBar;\nWorkbench.BarStart = WorkbenchBarStart;\nWorkbench.BarMiddle = WorkbenchBarMiddle;\nWorkbench.BarEnd = WorkbenchBarEnd;\n\nWorkbench.Panel = WorkbenchPanel;\nWorkbench.PanelHeader = WorkbenchPanelHeader;\nWorkbench.PanelTitle = WorkbenchPanelTitle;\nWorkbench.PanelActions = WorkbenchPanelActions;\nWorkbench.PanelContent = WorkbenchPanelContent;\n\nWorkbench.Trigger = Collapsible.Trigger;\nWorkbench.FullScreenTrigger = WorkbenchFullScreenTrigger;\n"],"mappings":"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"}
+{"version":3,"file":"Workbench-DmZzpkj7.js","names":[],"sources":["../src/components/Workbench/constants.ts","../src/components/Workbench/context.ts","../src/components/Workbench/WorkbenchBar/WorkbenchBarEnd.tsx","../src/components/Workbench/WorkbenchBar/WorkbenchBarMiddle.tsx","../src/components/Workbench/WorkbenchBar/WorkbenchBarStart.tsx","../src/components/Workbench/WorkbenchBar/WorkbenchBar.tsx","../src/components/Workbench/WorkbenchFullScreenTrigger.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelResizeHandle.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanel.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelActions.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelContent.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelHeader.tsx","../src/components/Workbench/WorkbenchPanel/WorkbenchPanelTitle.tsx","../src/components/Workbench/Workbench.tsx"],"sourcesContent":["export const DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM = 2.75;\n\nexport const MIN_WORKBENCH_BAR_HEIGHT_IN_REM = 1;\n\nexport const DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX = 320;\n\nexport const MIN_WORKBENCH_PANEL_HEIGHT_IN_PX = 120;\n\nexport const WORKBENCH_PANEL_RESIZE_STEP_IN_PX = 24;\n\nexport const WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO = 0.8;\n","import { createContext, use } from 'react';\nimport type { Dispatch, SetStateAction } from 'react';\n\n/**\n * Full screen is a mode of the open panel, not a flag beside it — as two booleans the fourth\n * combination (collapsed *and* full screen) is expressible but meaningless.\n */\nexport type WorkbenchState = 'collapsed' | 'expanded' | 'full-screen';\n\ntype WorkbenchActions = {\n  expand: () => void;\n  collapse: () => void;\n  toggleExpanded: () => void;\n  enterFullScreen: () => void;\n  exitFullScreen: () => void;\n  toggleFullScreen: () => void;\n};\n\ntype WorkbenchContextValue = WorkbenchActions & {\n  state: WorkbenchState;\n  setState: Dispatch<SetStateAction<WorkbenchState>>;\n  panelHeight: number;\n  setPanelHeight: Dispatch<SetStateAction<number>>;\n  isResizing: boolean;\n  setIsResizing: (isResizing: boolean) => void;\n};\n\nexport const createWorkbenchActions = (\n  setState: Dispatch<SetStateAction<WorkbenchState>>,\n): WorkbenchActions => ({\n  // Opening an already-open panel leaves full screen alone.\n  expand: () => setState((state) => (state === 'collapsed' ? 'expanded' : state)),\n  collapse: () => setState('collapsed'),\n  toggleExpanded: () => setState((state) => (state === 'collapsed' ? 'expanded' : 'collapsed')),\n\n  enterFullScreen: () => setState('full-screen'),\n  // Exiting returns to the open panel, never to a closed one — this is a restore, not a collapse.\n  exitFullScreen: () => setState((state) => (state === 'full-screen' ? 'expanded' : state)),\n  toggleFullScreen: () =>\n    setState((state) => (state === 'full-screen' ? 'expanded' : 'full-screen')),\n});\n\nexport const WorkbenchContext = createContext<WorkbenchContextValue | null>(null);\n\n/**\n * The parts sit at arbitrary depth under `<Workbench>` — a trigger lives inside the panel header,\n * three levels down — so the state travels by context rather than props.\n */\nexport const useWorkbench = (): WorkbenchContextValue => {\n  const context = use(WorkbenchContext);\n\n  if (context === null) {\n    throw new Error('Workbench compound components must be rendered inside <Workbench>.');\n  }\n\n  return context;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBarEnd = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-bar-end\"\n    className={cn(\n      // grid placement\n      'tw:col-start-3',\n      'tw:row-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-end',\n      'tw:gap-2',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBarMiddle = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-bar-middle\"\n    className={cn(\n      // grid placement\n      'tw:col-start-2',\n      'tw:row-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:justify-center',\n      'tw:gap-2',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBarStart = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-bar-start\"\n    className={cn(\n      // grid placement\n      'tw:col-start-1',\n      'tw:row-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-2',\n\n      className,\n    )}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\nimport { WorkbenchBarEnd } from './WorkbenchBarEnd';\nimport { WorkbenchBarMiddle } from './WorkbenchBarMiddle';\nimport { WorkbenchBarStart } from './WorkbenchBarStart';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchBar = ({ className, children, ...props }: Props) => (\n  <div\n    // Marked so a floating surface (kbc-ui's Kai widget) can measure the dock; the root's rect is the bar alone.\n    data-workbench-slot=\"bar\"\n    className={cn(\n      // layout\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr_auto]',\n      'tw:items-center',\n      'tw:gap-x-2',\n\n      // sizing\n      'tw:h-(--workbench-bar-height)',\n      'tw:shrink-0',\n      'tw:pointer-events-auto',\n\n      // surface\n      'tw:border-t',\n      'tw:border-sidebar-border',\n      'tw:bg-sidebar',\n\n      // spacing\n      'tw:px-3',\n\n      // typography\n      'tw:text-xs',\n\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nWorkbenchBar.Start = WorkbenchBarStart;\nWorkbenchBar.Middle = WorkbenchBarMiddle;\nWorkbenchBar.End = WorkbenchBarEnd;\n","import type { ComponentProps, MouseEvent } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { useWorkbench } from './context';\n\ntype Props = ComponentProps<'button'> & {\n  asChild?: boolean;\n};\n\nexport const WorkbenchFullScreenTrigger = ({ asChild = false, onClick, ...props }: Props) => {\n  const { state, toggleFullScreen } = useWorkbench();\n  const isFullScreen = state === 'full-screen';\n  const Comp = asChild ? Slot : 'button';\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n\n    if (!event.defaultPrevented) {\n      toggleFullScreen();\n    }\n  };\n\n  return (\n    <Comp\n      {...(asChild ? {} : { type: 'button' as const })}\n      {...props}\n      data-slot=\"workbench-full-screen-trigger\"\n      data-state={isFullScreen ? 'on' : 'off'}\n      onClick={handleClick}\n    />\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { KeyboardEvent, PointerEvent, RefObject } from 'react';\n\nimport { cn } from '../../../utils';\nimport {\n  MIN_WORKBENCH_PANEL_HEIGHT_IN_PX,\n  WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO,\n  WORKBENCH_PANEL_RESIZE_STEP_IN_PX,\n} from '../constants';\nimport { useWorkbench } from '../context';\n\ntype Props = {\n  panelRef: RefObject<HTMLDivElement | null>;\n};\n\nconst getMaxHeight = (panel: HTMLDivElement) => {\n  const hostTop = panel.offsetParent?.getBoundingClientRect().top ?? 0;\n\n  return Math.max(panel.getBoundingClientRect().bottom - hostTop, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX);\n};\n\nconst clampHeight = (height: number, panel: HTMLDivElement) =>\n  Math.min(Math.max(height, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX), getMaxHeight(panel));\n\nexport const WorkbenchPanelResizeHandle = ({ panelRef }: Props) => {\n  const {\n    state,\n    panelHeight,\n    setPanelHeight,\n    isResizing,\n    setIsResizing,\n    enterFullScreen,\n    exitFullScreen,\n  } = useWorkbench();\n  const grabOffsetRef = useRef(0);\n  const previousStateRef = useRef(state);\n  const isFullScreenRequestedRef = useRef(state === 'full-screen');\n  const enteredFullScreenByDragRef = useRef(false);\n  const exitedFullScreenByDragRef = useRef(false);\n\n  useEffect(() => {\n    if (!isResizing) return;\n\n    const { body } = document;\n    const { cursor, userSelect } = body.style;\n\n    body.style.cursor = 'ns-resize';\n    body.style.userSelect = 'none';\n\n    return () => {\n      body.style.cursor = cursor;\n      body.style.userSelect = userSelect;\n    };\n  }, [isResizing]);\n\n  useEffect(() => {\n    const previous = previousStateRef.current;\n    const panel = panelRef.current;\n\n    previousStateRef.current = state;\n    isFullScreenRequestedRef.current = state === 'full-screen';\n\n    if (previous !== 'full-screen' || state !== 'expanded' || !panel) return;\n\n    const draggedIntoFullScreen = enteredFullScreenByDragRef.current;\n    const draggedOutOfFullScreen = exitedFullScreenByDragRef.current;\n\n    enteredFullScreenByDragRef.current = false;\n    exitedFullScreenByDragRef.current = false;\n\n    if (!draggedIntoFullScreen || draggedOutOfFullScreen) return;\n\n    setPanelHeight(\n      clampHeight(getMaxHeight(panel) * WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO, panel),\n    );\n  }, [state, panelRef, setPanelHeight]);\n\n  const applyHeight = (height: number, panel: HTMLDivElement) => {\n    const isFullScreen = isFullScreenRequestedRef.current;\n\n    if (height >= getMaxHeight(panel)) {\n      if (!isFullScreen) {\n        isFullScreenRequestedRef.current = true;\n        enteredFullScreenByDragRef.current = true;\n        enterFullScreen();\n      }\n\n      return;\n    }\n\n    if (isFullScreen) {\n      isFullScreenRequestedRef.current = false;\n      exitedFullScreenByDragRef.current = true;\n      exitFullScreen();\n    }\n\n    setPanelHeight(Math.max(height, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX));\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {\n    const panel = panelRef.current;\n\n    if (event.button !== 0 || !panel) return;\n\n    event.preventDefault();\n    event.currentTarget.setPointerCapture(event.pointerId);\n    grabOffsetRef.current = panel.getBoundingClientRect().top - event.clientY;\n    setIsResizing(true);\n  };\n\n  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const panel = panelRef.current;\n\n    if (!panel || !event.currentTarget.hasPointerCapture(event.pointerId)) return;\n\n    const top = event.clientY + grabOffsetRef.current;\n\n    applyHeight(panel.getBoundingClientRect().bottom - top, panel);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const panel = panelRef.current;\n\n    if (!panel) return;\n\n    const step = event.shiftKey\n      ? WORKBENCH_PANEL_RESIZE_STEP_IN_PX * 4\n      : WORKBENCH_PANEL_RESIZE_STEP_IN_PX;\n    const delta = event.key === 'ArrowUp' ? step : event.key === 'ArrowDown' ? -step : 0;\n\n    if (delta === 0) return;\n\n    event.preventDefault();\n    applyHeight(\n      (isFullScreenRequestedRef.current ? getMaxHeight(panel) : panelHeight) + delta,\n      panel,\n    );\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      aria-label=\"Resize panel\"\n      aria-valuenow={Math.round(panelHeight)}\n      aria-valuemin={MIN_WORKBENCH_PANEL_HEIGHT_IN_PX}\n      tabIndex={0}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onLostPointerCapture={() => setIsResizing(false)}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        // group\n        'tw:group/workbench-resize',\n\n        // positioning — the panel is the positioned ancestor\n        'tw:absolute',\n        'tw:inset-x-0',\n        'tw:top-0',\n        'tw:z-10',\n\n        // sizing\n        'tw:h-2',\n\n        // layout — the whole strip grabs, only the pill shows\n        'tw:flex',\n        'tw:justify-center',\n\n        // affordance\n        'tw:cursor-ns-resize',\n        'tw:touch-none',\n\n        // focus\n        'tw:outline-none',\n      )}\n    >\n      <span\n        className={cn(\n          // layout — hangs below the strip so the pill sits clear of the top edge, and\n          // grabs there too since the events bubble to the strip\n          'tw:flex',\n          'tw:h-3',\n          'tw:w-16',\n          'tw:items-end',\n          'tw:justify-center',\n        )}\n      >\n        <span\n          className={cn(\n            // sizing\n            'tw:h-1.5',\n            'tw:w-16',\n\n            // surface\n            'tw:rounded-full',\n            'tw:bg-input',\n            'tw:transition-colors',\n            'tw:group-hover/workbench-resize:bg-muted-foreground',\n            'tw:group-focus-visible/workbench-resize:bg-muted-foreground',\n            'tw:group-data-[workbench-resizing=true]/workbench:bg-muted-foreground',\n          )}\n        />\n      </span>\n    </div>\n  );\n};\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, CSSProperties } from 'react';\n\nimport { cn } from '../../../utils';\nimport { Collapsible } from '../../Collapsible';\n\nimport { WorkbenchPanelResizeHandle } from './WorkbenchPanelResizeHandle';\n\ntype Props = ComponentProps<'div'>;\n\nconst clearRadixMeasurementTransitionBlock = (panel: HTMLDivElement | null) => {\n  if (panel) panel.style.transitionDuration = '';\n};\n\nexport const WorkbenchPanel = ({ className, children, ...props }: Props) => {\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => clearRadixMeasurementTransitionBlock(panelRef.current), []);\n\n  return (\n    <Collapsible.Content\n      ref={panelRef}\n      // See `WorkbenchBar` — the other half of the dock's measurable area.\n      data-workbench-slot=\"panel\"\n      style={{ '--workbench-panel-shadow': '0 -8px 24px -6px rgb(0 0 0 / 0.08)' } as CSSProperties}\n      className={cn(\n        // positioning — against the host, which must be a positioned element\n        'tw:absolute',\n        'tw:inset-x-0',\n        'tw:bottom-(--workbench-bar-height)',\n        'tw:pointer-events-auto',\n\n        // height — the drag-controlled var, capped at the space above the bar so the panel\n        // never covers it, whatever height was dragged or restored\n        'tw:h-(--workbench-panel-height)',\n        'tw:max-h-[calc(100%-var(--workbench-bar-height))]',\n        'tw:group-data-[workbench-state=full-screen]/workbench:h-[calc(100%-var(--workbench-bar-height))]',\n\n        // height transition\n        'tw:transition-[height]',\n        'tw:duration-200',\n        'tw:ease-out',\n        'tw:group-data-[workbench-resizing=true]/workbench:transition-none',\n\n        // surface\n        'tw:border-x',\n        'tw:border-t',\n        'tw:border-border',\n\n        // clipping\n        'tw:overflow-hidden',\n\n        // raised edge\n        'tw:group-not-data-[workbench-state=full-screen]/workbench:rounded-t-2xl',\n        'tw:group-not-data-[workbench-state=full-screen]/workbench:shadow-(--workbench-panel-shadow)',\n      )}\n    >\n      <WorkbenchPanelResizeHandle panelRef={panelRef} />\n\n      <div\n        className={cn(\n          // layout\n          'tw:flex',\n          'tw:flex-col',\n          'tw:h-full',\n\n          // surface\n          'tw:bg-background',\n\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </Collapsible.Content>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'> & {\n  asChild?: boolean;\n};\n\nexport const WorkbenchPanelActions = ({ className, asChild = false, ...props }: Props) => {\n  const Comp = asChild ? Slot : 'div';\n\n  return (\n    <Comp\n      {...props}\n      data-slot=\"workbench-panel-actions\"\n      className={cn(\n        // grid placement\n        'tw:col-start-2',\n        'tw:row-start-1',\n\n        // layout\n        'tw:flex',\n        'tw:items-center',\n        'tw:gap-2',\n\n        className,\n      )}\n    />\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchPanelContent = ({ className, children, ...props }: Props) => (\n  <div\n    className={cn(\n      // layout\n      'tw:min-h-0',\n      'tw:flex-1',\n      'tw:overflow-auto',\n\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchPanelHeader = ({ className, children, ...props }: Props) => (\n  <div\n    className={cn(\n      // layout\n      'tw:grid',\n      'tw:grid-cols-[1fr_auto]',\n      'tw:items-center',\n      'tw:gap-x-2',\n\n      // sizing\n      'tw:shrink-0',\n\n      // surface\n      'tw:bg-sidebar',\n\n      // spacing\n      'tw:px-3',\n      'tw:py-2',\n\n      // typography\n      'tw:text-xs',\n\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const WorkbenchPanelTitle = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    data-slot=\"workbench-panel-title\"\n    className={cn(\n      // grid placement\n      'tw:col-start-1',\n\n      // layout\n      'tw:flex',\n      'tw:items-center',\n\n      // typography\n      'tw:text-sm',\n      'tw:font-semibold',\n      'tw:text-foreground',\n\n      className,\n    )}\n  />\n);\n","import { useMemo, useState } from 'react';\nimport type { CSSProperties, ReactNode } from 'react';\n\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { cn } from '../../utils';\nimport { Collapsible } from '../Collapsible';\n\nimport {\n  DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM,\n  DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX,\n  MIN_WORKBENCH_BAR_HEIGHT_IN_REM,\n  MIN_WORKBENCH_PANEL_HEIGHT_IN_PX,\n} from './constants';\nimport type { WorkbenchState } from './context';\nimport { createWorkbenchActions, WorkbenchContext } from './context';\nimport {\n  WorkbenchBar,\n  WorkbenchBarEnd,\n  WorkbenchBarMiddle,\n  WorkbenchBarStart,\n} from './WorkbenchBar';\nimport { WorkbenchFullScreenTrigger } from './WorkbenchFullScreenTrigger';\nimport {\n  WorkbenchPanel,\n  WorkbenchPanelActions,\n  WorkbenchPanelContent,\n  WorkbenchPanelHeader,\n  WorkbenchPanelTitle,\n} from './WorkbenchPanel';\n\ntype Props = {\n  className?: string;\n  children: ReactNode;\n  state?: WorkbenchState;\n  defaultState?: WorkbenchState;\n  onStateChange?: (state: WorkbenchState) => void;\n  barHeight?: number;\n  panelHeight?: number;\n  defaultPanelHeight?: number;\n  onPanelHeightChange?: (panelHeight: number) => void;\n};\n\nexport const Workbench = ({\n  className,\n  children,\n  state: stateProp,\n  defaultState = 'collapsed',\n  onStateChange,\n  barHeight = DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM,\n  panelHeight: panelHeightProp,\n  defaultPanelHeight = DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX,\n  onPanelHeightChange,\n}: Props) => {\n  const [state, setState] = useControllableState<WorkbenchState>({\n    prop: stateProp,\n    defaultProp: defaultState,\n    onChange: onStateChange,\n  });\n  const [panelHeight, setPanelHeight] = useControllableState<number>({\n    prop: panelHeightProp,\n    defaultProp: defaultPanelHeight,\n    onChange: onPanelHeightChange,\n  });\n  const [isResizing, setIsResizing] = useState(false);\n\n  const actions = useMemo(() => createWorkbenchActions(setState), [setState]);\n  const value = useMemo(\n    () => ({\n      state,\n      setState,\n      panelHeight,\n      setPanelHeight,\n      isResizing,\n      setIsResizing,\n      ...actions,\n    }),\n    [state, setState, panelHeight, setPanelHeight, isResizing, actions],\n  );\n\n  const clampedBarHeight = Math.max(barHeight, MIN_WORKBENCH_BAR_HEIGHT_IN_REM);\n  const clampedPanelHeight = Math.max(panelHeight, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX);\n\n  return (\n    <WorkbenchContext value={value}>\n      <Collapsible\n        open={state !== 'collapsed'}\n        onOpenChange={(open) => setState(open ? 'expanded' : 'collapsed')}\n        data-workbench-state={state}\n        data-workbench-resizing={isResizing ? 'true' : undefined}\n        style={\n          {\n            '--workbench-bar-height': `${clampedBarHeight}rem`,\n            '--workbench-panel-height': `${clampedPanelHeight}px`,\n          } as CSSProperties\n        }\n        className={cn(\n          // reset\n          'tailwindcss-preflight',\n\n          // group\n          'tw:group/workbench',\n\n          // positioning — above the chrome layer (`z-50`) *and* above a `Sidebar` in\n          // `expand-on-hover`, which takes `z-51` to float over content; the dock outranks both.\n          // Overlays (Modal / Sheet / Popover / Tooltip) live at 1051+, so they still win.\n          'tw:z-[52]',\n\n          // layout\n          'tw:shrink-0',\n\n          className,\n        )}\n      >\n        {children}\n      </Collapsible>\n    </WorkbenchContext>\n  );\n};\n\nWorkbench.Bar = WorkbenchBar;\nWorkbench.BarStart = WorkbenchBarStart;\nWorkbench.BarMiddle = WorkbenchBarMiddle;\nWorkbench.BarEnd = WorkbenchBarEnd;\n\nWorkbench.Panel = WorkbenchPanel;\nWorkbench.PanelHeader = WorkbenchPanelHeader;\nWorkbench.PanelTitle = WorkbenchPanelTitle;\nWorkbench.PanelActions = WorkbenchPanelActions;\nWorkbench.PanelContent = WorkbenchPanelContent;\n\nWorkbench.Trigger = Collapsible.Trigger;\nWorkbench.FullScreenTrigger = WorkbenchFullScreenTrigger;\n"],"mappings":"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"}

package/dist/{ZoomableSvg-BZlk3PFJ.js → ZoomableSvg-BzXVfgnI.js}

@@ -1,8 +1,8 @@
 import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip } from "./utils-BW4AE8VP.js";
-import { Maximize2, Minimize2 } from "./icons-Cek151jC.js";
-import { Button } from "./Button-DsRrU5F1.js";
-import { ClipboardButton } from "./ClipboardButton-KHQnPEh_.js";
+import { Tooltip } from "./utils-Bd28bWgm.js";
+import { Maximize2, Minimize2 } from "./icons-wcA70iQx.js";
+import { Button } from "./Button-Ca4Q3VJU.js";
+import { ClipboardButton } from "./ClipboardButton-DHa1trtI.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -145,20 +145,6 @@ const ZoomableSvg = ({ html, copyText, className, allowForeignObject, renderActi
 	if (isFullscreen) return createPortal(/* @__PURE__ */ jsx("div", {
 		role: "presentation",
 		"data-testid": "zoomable-svg-fullscreen",
-		/**
-		* Stacking contract for this overlay, which portals to `document.body`.
-		*
-		* - Sits at z-1051, the Modal/Sheet band: above page chrome.
-		* - Stays *below* the floating-panel layer (z-1055: DropdownMenu,
-		*   Popover, Select, Combobox), which portals to `document.body` too —
-		*   an overlay above it hides any menu opened from the toolbar.
-		* - `Tooltip` (z-1060) renders above, as it does over a Modal.
-		* - `SpotlightBackdrop` (z-1056) dims this overlay rather than sitting
-		*   under it — by design, since it deliberately covers the portalled
-		*   surface tier so a tour's dim can't be punched through.
-		* - An app may clamp poppers into this same band, making it a tie that
-		*   DOM order settles; Radix mounts its portal after this one.
-		*/
 		className: "tw:fixed tw:inset-0 tw:z-[1051] tw:bg-muted tw:p-4 tailwindcss-preflight",
 		onClick: stopPropagation,
 		children: diagramContent
@@ -245,4 +231,4 @@ const svgToPngBlob = async (svg, background) => {
 //#endregion
 export { ZoomableSvg, svgToPngBlob, toSvgFileContent };
 
-//# sourceMappingURL=ZoomableSvg-BZlk3PFJ.js.map
+//# sourceMappingURL=ZoomableSvg-BzXVfgnI.js.map

package/dist/ZoomableSvg-BzXVfgnI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomableSvg-BzXVfgnI.js","names":[],"sources":["../src/components/ZoomableSvg/ZoomableSvg.tsx","../src/components/ZoomableSvg/exportSvg.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport DOMPurify from 'dompurify';\n\nimport { ClipboardButton } from '../../blocks/ClipboardButton';\nimport { Maximize2, Minimize2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Tooltip } from '../Tooltip';\n\nconst MIN_SCALE = 0.5;\nconst MAX_SCALE = 3;\nconst ZOOM_STEP = 0.1;\n\ntype Props = {\n  /** Raw SVG markup; DOMPurify-sanitized (SVG profile), so user/LLM content is safe. */\n  html: string;\n  copyText?: string;\n  className?: string;\n  /** Keep `<foreignObject>` through sanitization; its HTML children are still stripped.\n   *  Enable only when each one is pre-flattened to bare text. */\n  allowForeignObject?: boolean;\n  /** Extra toolbar controls (e.g. `ExportMenu`) between copy and fullscreen; receives the\n   *  sanitized SVG. Injected so this lazy chunk carries no export dependencies. */\n  renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const ZoomableSvg = ({\n  html,\n  copyText,\n  className,\n  allowForeignObject,\n  renderActions,\n}: Props) => {\n  const safeHtml = useMemo(\n    () =>\n      DOMPurify.sanitize(html, {\n        USE_PROFILES: { svg: true, svgFilters: true },\n        ...(allowForeignObject ? { ADD_TAGS: ['foreignObject'] } : {}),\n      }),\n    [html, allowForeignObject],\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [scale, setScale] = useState(1);\n  const [translate, setTranslate] = useState({ x: 0, y: 0 });\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  useEffect(() => {\n    if (!isFullscreen) return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        setIsFullscreen(false);\n      }\n    };\n    document.addEventListener('keydown', onKeyDown, { capture: true });\n    return () => document.removeEventListener('keydown', onKeyDown, { capture: true });\n  }, [isFullscreen]);\n\n  const dragRef = useRef<{\n    startX: number;\n    startY: number;\n    startTx: number;\n    startTy: number;\n  } | null>(null);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    const onWheel = (e: WheelEvent) => {\n      if (!e.ctrlKey && !e.metaKey) return;\n      e.preventDefault();\n      const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;\n      setScale((s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s + delta)));\n    };\n\n    el.addEventListener('wheel', onWheel, { passive: false });\n    return () => el.removeEventListener('wheel', onWheel);\n    // Re-bind when toggling fullscreen: the portal/inline switch remounts the\n    // container element, so the listener must attach to the new node.\n  }, [isFullscreen]);\n\n  const didDragRef = useRef(false);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      if (e.button !== 0) return;\n      e.preventDefault();\n      didDragRef.current = false;\n      dragRef.current = {\n        startX: e.clientX,\n        startY: e.clientY,\n        startTx: translate.x,\n        startTy: translate.y,\n      };\n    },\n    [translate],\n  );\n\n  const handleMouseMove = useCallback((e: React.MouseEvent) => {\n    if (!dragRef.current) return;\n    didDragRef.current = true;\n    setTranslate({\n      x: dragRef.current.startTx + e.clientX - dragRef.current.startX,\n      y: dragRef.current.startTy + e.clientY - dragRef.current.startY,\n    });\n  }, []);\n\n  const handleMouseUp = useCallback(() => {\n    dragRef.current = null;\n  }, []);\n\n  const handleReset = useCallback(() => {\n    setScale(1);\n    setTranslate({ x: 0, y: 0 });\n  }, []);\n\n  const isZoomed = Math.abs(scale - 1) > 0.001 || translate.x !== 0 || translate.y !== 0;\n\n  const handleClick = useCallback((e: React.MouseEvent) => {\n    if (didDragRef.current) {\n      e.stopPropagation();\n    }\n  }, []);\n\n  const stopPropagation = useCallback((e: React.SyntheticEvent) => {\n    e.stopPropagation();\n  }, []);\n\n  const diagramContent = (\n    <div\n      role=\"presentation\"\n      className={cn('tw:group/zoom tw:relative', isFullscreen && 'tw:h-full')}\n      onClick={handleClick}\n    >\n      <div\n        role=\"presentation\"\n        ref={containerRef}\n        className={cn(\n          'tw:overflow-hidden tw:cursor-grab tw:active:cursor-grabbing tw:p-3',\n          isFullscreen && 'tw:h-full',\n        )}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleMouseUp}\n        onMouseLeave={handleMouseUp}\n      >\n        <div\n          className={cn(\n            'tw:flex tw:justify-center tw:origin-center',\n            isFullscreen && 'tw:h-full tw:[&>svg]:h-full',\n          )}\n          style={{ transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` }}\n          dangerouslySetInnerHTML={{ __html: safeHtml }}\n        />\n      </div>\n      <div\n        role=\"presentation\"\n        // `focus-within` too: the opacity-0 toolbar is still in the tab order.\n        className=\"tw:absolute tw:right-1 tw:top-1 tw:flex tw:gap-1 tw:opacity-0 tw:transition-opacity tw:focus-within:opacity-100 tw:group-hover/zoom:opacity-100\"\n        onClick={stopPropagation}\n      >\n        {isZoomed && (\n          <Tooltip tooltip=\"Reset zoom\" placement=\"top\" triggerAsChild>\n            <Button size=\"small\" variant=\"outline\" onClick={handleReset}>\n              Reset\n            </Button>\n          </Tooltip>\n        )}\n        {copyText && (\n          <ClipboardButton text={copyText} tooltip=\"Copy code\" size=\"icon-sm\" variant=\"outline\" />\n        )}\n        {renderActions?.(safeHtml)}\n        <Tooltip\n          tooltip={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n          placement=\"top\"\n          triggerAsChild\n        >\n          <Button\n            size=\"icon-sm\"\n            variant=\"outline\"\n            aria-label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}\n            onClick={() => setIsFullscreen((f) => !f)}\n          >\n            {isFullscreen ? (\n              <Minimize2 className=\"tw:size-4\" />\n            ) : (\n              <Maximize2 className=\"tw:size-4\" />\n            )}\n          </Button>\n        </Tooltip>\n      </div>\n    </div>\n  );\n\n  if (isFullscreen) {\n    return createPortal(\n      <div\n        role=\"presentation\"\n        data-testid=\"zoomable-svg-fullscreen\"\n        // z-1051 (Modal band): must stay below floating panels (z-1055) or toolbar menus hide.\n        // Tooltip (z-1060) and SpotlightBackdrop (z-1056) sit above it by design.\n        className=\"tw:fixed tw:inset-0 tw:z-[1051] tw:bg-muted tw:p-4 tailwindcss-preflight\"\n        onClick={stopPropagation}\n      >\n        {diagramContent}\n      </div>,\n      document.body,\n    );\n  }\n\n  return (\n    <div\n      className={cn(\n        'tw:overflow-hidden tw:rounded-md tw:border tw:border-border tw:bg-muted',\n        className,\n      )}\n    >\n      {diagramContent}\n    </div>\n  );\n};\n","const PNG_SCALE = 2;\n\n// The root `<svg …>` tag, so the namespace check looks only at its attributes.\n// A plain `includes('xmlns=')` would also match a nested element or body text,\n// and would miss `xmlns = \"…\"` — adding a second declaration, which parsers\n// reject outright with \"Attribute xmlns redefined\".\nconst ROOT_SVG_TAG = /^<svg\\b[^>]*>/i;\nconst HAS_DEFAULT_NAMESPACE = /\\bxmlns\\s*=/i;\n\n// A standalone SVG file needs the namespace declaration; mermaid's inline output\n// omits it because an inline <svg> inherits it from the host document.\n// Trim before matching: the anchored `^<svg` misses markup that arrives with a\n// leading newline or indentation, which would emit a standalone file with no\n// namespace — unopenable in an image viewer.\nconst withSvgNamespace = (svg: string) => {\n  const trimmed = svg.trim();\n  const rootTag = trimmed.match(ROOT_SVG_TAG)?.[0];\n\n  if (!rootTag || HAS_DEFAULT_NAMESPACE.test(rootTag)) return trimmed;\n\n  return trimmed.replace(/^<svg\\b/i, '<svg xmlns=\"http://www.w3.org/2000/svg\"');\n};\n\nexport const toSvgFileContent = (svg: string) =>\n  `<?xml version=\"1.0\" encoding=\"UTF-8\"?>\\n${withSvgNamespace(svg).trim()}\\n`;\n\n// A single decimal number: `12`, `12.5`, `.5`. Deliberately stricter than\n// `[\\d.]+`, which also matches `1.2.3` — and `parseFloat` truncates that to\n// `1.2` rather than rejecting it, so a malformed value would pass as a plausible\n// one.\nconst NUMBER = String.raw`\\d+(?:\\.\\d+)?|\\.\\d+`;\n\n// `parseFloat` happily reads a relative length as a number — `\"100%\"` becomes\n// `100`, `\"2em\"` becomes `2` — and `makeResponsive` sets `width=\"100%\"` on every\n// mermaid root, so an SVG with no usable viewBox would rasterize 100px wide with\n// no error. Accept only a unitless number or an explicit `px`.\nconst PIXEL_LENGTH = new RegExp(String.raw`^\\s*(?:${NUMBER})(?:px)?\\s*$`, 'i');\n\nconst parsePixelLength = (value: string | null): number | null => {\n  if (!PIXEL_LENGTH.test(value ?? '')) return null;\n\n  const parsed = Number.parseFloat(value ?? '');\n\n  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;\n};\n\nexport const parseSvgSize = (svg: string) => {\n  const doc = new DOMParser().parseFromString(withSvgNamespace(svg), 'image/svg+xml');\n  const element = doc.documentElement;\n\n  const viewBox = element\n    .getAttribute('viewBox')\n    ?.split(/[\\s,]+/)\n    .map(Number);\n  // `> 0`, not truthiness: a negative extent is accepted by a truthy check, and\n  // negative canvas dimensions silently fall back to the 300x150 default — an\n  // export at the wrong size with no error. Falling through to width/height is\n  // the better answer, since those are usually still valid.\n  if (viewBox?.length === 4 && viewBox.every((value) => Number.isFinite(value))) {\n    const [, , width, height] = viewBox;\n    if (width !== undefined && height !== undefined && width > 0 && height > 0) {\n      return { width, height };\n    }\n  }\n\n  const width = parsePixelLength(element.getAttribute('width'));\n  const height = parsePixelLength(element.getAttribute('height'));\n\n  return width !== null && height !== null ? { width, height } : null;\n};\n\n// Resolve the themed page background so the exported PNG follows the active\n// brand and color scheme instead of a frozen literal. Falls back to `white`\n// (a CSS keyword, not a brand-locked hex) when the token is unset.\n//\n// The token holds Tailwind's bare channel triplet (\"249 250 251\") so utilities\n// can add an alpha. Canvas `fillStyle` rejects that form *silently* and keeps\n// its previous value (black), so wrap it back into rgb() before use.\nconst CHANNEL_TRIPLET = new RegExp(String.raw`^(?:${NUMBER})\\s+(?:${NUMBER})\\s+(?:${NUMBER})$`);\n\nexport const toCanvasColor = (token: string) => {\n  const trimmed = token.trim();\n  if (!trimmed) return 'white';\n\n  // Only wrap a well-formed triplet. A malformed one (`1.2.3 4 5`) would produce\n  // an invalid `rgb()` that `fillStyle` rejects silently, painting the PNG on\n  // whatever colour was set before — passing it through unwrapped at least lets\n  // a genuine CSS color value work.\n  return CHANNEL_TRIPLET.test(trimmed) ? `rgb(${trimmed})` : trimmed;\n};\n\nconst resolveBackground = () =>\n  toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue('--color-background'));\n\n/**\n * Rasterize SVG markup to a PNG blob at 2x for legible text.\n *\n * The SVG is loaded as a data URL rather than a blob URL: an <img> loading SVG\n * is treated as a foreign resource, so a blob URL would taint the canvas and\n * make toBlob throw a SecurityError. A background is painted first because a\n * transparent PNG reads as unusable when pasted into a slide deck.\n */\nexport const svgToPngBlob = async (svg: string, background?: string): Promise<Blob> => {\n  const size = parseSvgSize(svg);\n  if (!size) throw new Error('Cannot determine diagram dimensions.');\n\n  const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(toSvgFileContent(svg))}`;\n\n  const image = new Image();\n  image.decoding = 'sync';\n  await new Promise<void>((resolve, reject) => {\n    image.onload = () => resolve();\n    image.onerror = () => reject(new Error('Failed to load the diagram for export.'));\n    image.src = encoded;\n  });\n\n  const canvas = document.createElement('canvas');\n  canvas.width = Math.round(size.width * PNG_SCALE);\n  canvas.height = Math.round(size.height * PNG_SCALE);\n\n  const context = canvas.getContext('2d');\n  if (!context) throw new Error('Canvas is unavailable in this browser.');\n\n  context.fillStyle = background ?? resolveBackground();\n  context.fillRect(0, 0, canvas.width, canvas.height);\n  context.drawImage(image, 0, 0, canvas.width, canvas.height);\n\n  return new Promise<Blob>((resolve, reject) => {\n    canvas.toBlob(\n      (blob) => (blob ? resolve(blob) : reject(new Error('Failed to encode the PNG.'))),\n      'image/png',\n    );\n  });\n};\n"],"mappings":"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"}

package/dist/charts.d.ts

@@ -4,24 +4,15 @@ import { Tooltip } from "recharts";
 /** A length that recharts' `<ResponsiveContainer>` accepts: px number or `"NN%"`. */
 type ChartDimension = number | `${number}%`;
 type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {
-  /**
-   * Height as a px number or percentage string. Charts have no intrinsic
-   * height, so a container needs one either here or from a sized ancestor.
-   * Defaults to 300.
-   */
+  /** Px number or percentage; charts have no intrinsic height. Defaults to 300. */
   height?: ChartDimension;
-  /** Width as a px number or percentage. Defaults to `"100%"` (fills parent). */
+  /** Px number or percentage. Defaults to `"100%"`. */
   width?: ChartDimension;
-  /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */
+  /** A single recharts chart element. */
   children: ReactElement;
 };
-/**
- * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'
- * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,
- * grid, cursor) through CSS so every chart inside inherits it. Sizing is
- * intrinsic: give it a `height` (default 300) and it fills the parent width.
- */
-declare const ChartContainer: ({ height, width, className, children, ...props }: ChartContainerProps) => import("react/jsx-runtime").JSX.Element;
+/** Responsive frame that themes the chart's axis, grid and cursor with semantic tokens via CSS. */
+declare const ChartContainer: ({ height, width, className, children, ...props }: ChartContainerProps) => import("react").JSX.Element;
 //#endregion
 //#region src/blocks/Charts/ChartTooltip.d.ts
 type TooltipPayloadEntry = {
@@ -43,7 +34,7 @@ type ChartTooltipContentProps = {
  * semantic tokens, and each series swatch reuses the recharts-provided series
  * `color` (already a `--chart-*` token from this package's charts).
  */
-declare const ChartTooltipContent: ({ active, label, payload, valueFormatter, className }: ChartTooltipContentProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltipContent: ({ active, label, payload, valueFormatter, className }: ChartTooltipContentProps) => import("react").JSX.Element | null;
 type ChartTooltipProps = ComponentProps<typeof Tooltip> & {
   valueFormatter?: (value: string | number, name: string) => string;
 };
@@ -51,15 +42,12 @@ type ChartTooltipProps = ComponentProps<typeof Tooltip> & {
  * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.
  * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.
  */
-declare const ChartTooltip: ({ valueFormatter, ...props }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChartTooltip: ({ valueFormatter, ...props }: ChartTooltipProps) => import("react").JSX.Element;
 //#endregion
 //#region src/blocks/Charts/theme.d.ts
 /** Number of the semantic chart token (`1`–`5`) a series maps to. */
 type ChartColorToken = 1 | 2 | 3 | 4 | 5;
-/**
- * The CSS color for a chart token. `index` is 0-based (series position); it
- * wraps around the five-slot palette so any number of series stays on-brand.
- */
+/** The CSS color for a 0-based series `index`, wrapping around the palette. */
 declare const chartTokenColor: (index: number) => string;
 //#endregion
 //#region src/blocks/Charts/types.d.ts
@@ -122,36 +110,18 @@ type CartesianChartProps = {
 //#region src/blocks/Charts/LineChart.d.ts
 type LineChartProps = CartesianChartProps & {
   /**
-   * `[min, max]` bounds for the value (y) axis — numbers, `'auto'`, or padded
-   * data extremes (`['dataMin - 500', 'dataMax + 500']`). Defaults to a zero
-   * baseline.
-   *
-   * Only the line chart takes this. A line encodes value by POSITION, so moving
-   * the baseline rescales it without misstating it; bars and areas encode by
-   * length and filled area from the baseline, and truncating those makes the
-   * geometry lie about the ratios. Use it to compare two series of similar
-   * magnitude far from zero — not for a single series whose magnitude the
-   * reader is meant to judge.
+   * Y-axis `[min, max]`; defaults to a zero baseline. Line-only: a truncated baseline misstates
+   * bar/area lengths. For comparing close series far from zero, not judging one magnitude.
    */
   yDomain?: ChartAxisDomain;
 };
 /**
- * A themed multi-series line chart. Each series' color comes from the semantic
- * `--chart-*` palette (by order, or pinned via `series[].color`), which
- * follows the active color scheme and the active brand's `colors.chart` when it
- * defines one. Wrap-free — mounts its own {@link ChartContainer}.
+ * A themed multi-series line chart.
  *
- * @example
- * <LineChart
- *   data={data}
- *   xKey="month"
- *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}
- * />
- *
- * @example Two close-but-high series, on a baseline that shows the gap
- * <LineChart data={data} xKey="month" series={series} yDomain={[7000, 9000]} />
+ * - Series colors come from the `--chart-*` palette (by order, or `series[].color`).
+ * - Mounts its own {@link ChartContainer}.
  */
-declare const LineChart: ({ data, xKey, series, height, width, className, ...chrome }: LineChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const LineChart: ({ data, xKey, series, height, width, className, ...chrome }: LineChartProps) => import("react").JSX.Element;
 //#endregion
 //#region src/blocks/Charts/BarChart.d.ts
 type BarChartProps = CartesianChartProps & {
@@ -167,7 +137,7 @@ type BarChartProps = CartesianChartProps & {
  * @example
  * <BarChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
  */
-declare const BarChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const BarChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: BarChartProps) => import("react").JSX.Element;
 //#endregion
 //#region src/blocks/Charts/AreaChart.d.ts
 type AreaChartProps = CartesianChartProps & {
@@ -175,16 +145,15 @@ type AreaChartProps = CartesianChartProps & {
   stacked?: boolean;
 };
 /**
- * A themed multi-series area chart. Each series is stroked and softly filled
- * from the semantic `--chart-*` palette (by order, or pinned via
- * `series[].color`), which follows the active color scheme and the active
- * brand's `colors.chart` when it defines one. Pass `stacked` to stack the
- * series cumulatively.
+ * Themed multi-series area chart.
+ *
+ * - Colors come from `--chart-*` by series order, or `series[].color`.
+ * - The palette follows the color scheme and the brand's `colors.chart`.
  *
  * @example
  * <AreaChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
  */
-declare const AreaChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: AreaChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const AreaChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: AreaChartProps) => import("react").JSX.Element;
 //#endregion
 //#region src/blocks/Charts/PieChart.d.ts
 type PieChartProps = {
@@ -217,7 +186,7 @@ type PieChartProps = {
  * @example
  * <PieChart data={data} nameKey="engine" dataKey="rows" innerRadius="60%" />
  */
-declare const PieChart: ({ data, nameKey, dataKey, innerRadius, height, width, className, showLegend, showTooltip, valueFormatter }: PieChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const PieChart: ({ data, nameKey, dataKey, innerRadius, height, width, className, showLegend, showTooltip, valueFormatter }: PieChartProps) => import("react").JSX.Element;
 //#endregion
 export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, type CartesianChartProps, type ChartAxisDomain, type ChartAxisLowerBound, type ChartAxisUpperBound, type ChartColorToken, ChartContainer, type ChartContainerProps, type ChartDatum, type ChartDimension, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipProps, LineChart, type LineChartProps, PieChart, type PieChartProps, chartTokenColor };
 //# sourceMappingURL=charts.d.ts.map

package/dist/charts.js

@@ -2,12 +2,7 @@ import { cn } from "./classNames-BzrkDnOD.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Area, AreaChart as AreaChart$1, Bar, BarChart as BarChart$1, CartesianGrid, Cell, Legend, Line, LineChart as LineChart$1, Pie, PieChart as PieChart$1, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/blocks/Charts/ChartContainer.tsx
-/**
-* Responsive, brand-themed frame for a chart. Wraps the chart in recharts'
-* `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,
-* grid, cursor) through CSS so every chart inside inherits it. Sizing is
-* intrinsic: give it a `height` (default 300) and it fills the parent width.
-*/
+/** Responsive frame that themes the chart's axis, grid and cursor with semantic tokens via CSS. */
 const ChartContainer = ({ height = 300, width = "100%", className, children, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("tw:text-xs", "tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground", "tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground", "tw:[&_.recharts-label]:fill-muted-foreground", "tw:[&_.recharts-legend-item-text]:!text-muted-foreground", "tw:[&_.recharts-cartesian-grid_line]:stroke-border/60", "tw:[&_.recharts-cartesian-axis-line]:stroke-border", "tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border", "tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border", "tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60", "tw:[&_.recharts-surface]:outline-hidden", className),
 	...props,
@@ -116,24 +111,14 @@ const cartesianChrome = ({ xKey, showGrid = true, showYAxis = true, showLegend =
 //#endregion
 //#region src/blocks/Charts/theme.ts
 /**
-* The design system ships a five-slot categorical chart palette as CSS
-* variables (`--chart-1` … `--chart-5`). Charts resolve their
-* series colors from these tokens only — never from inline hex or a primitive
-* scale — so they follow both the active color scheme (light/dark, via
-* `data-theme` in `styles.css`) and the active brand: a brand reskins charts
-* by defining `colors.chart` (and `colorsDark.chart`) in its
-* `@keboola/brand-registry` definition, which `ThemeProvider` emits as the
-* `--chart-*` variables.
+* Chart series colors, from the `--chart-1` … `--chart-5` CSS variables only.
 *
-* The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`
-* opacity modifiers), so they are wrapped in `rgb(...)` before handing them to
-* recharts as ordinary SVG `stroke` / `fill` strings.
+* - Never inline hex: the variables follow color scheme and brand (`colors.chart` in
+*   `@keboola/brand-registry`, emitted by `ThemeProvider`).
+* - The variables hold raw `R G B` channels, so they are wrapped in `rgb(...)` for recharts.
 */
 const CHART_TOKEN_COUNT = 5;
-/**
-* The CSS color for a chart token. `index` is 0-based (series position); it
-* wraps around the five-slot palette so any number of series stays on-brand.
-*/
+/** The CSS color for a 0-based series `index`, wrapping around the palette. */
 const chartTokenColor = (index) => {
 	return `rgb(var(--chart-${(index % CHART_TOKEN_COUNT + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT + 1}))`;
 };
@@ -142,20 +127,10 @@ const resolveSeriesColor = (index, token) => chartTokenColor(token ? token - 1 :
 //#endregion
 //#region src/blocks/Charts/LineChart.tsx
 /**
-* A themed multi-series line chart. Each series' color comes from the semantic
-* `--chart-*` palette (by order, or pinned via `series[].color`), which
-* follows the active color scheme and the active brand's `colors.chart` when it
-* defines one. Wrap-free — mounts its own {@link ChartContainer}.
-*
-* @example
-* <LineChart
-*   data={data}
-*   xKey="month"
-*   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}
-* />
+* A themed multi-series line chart.
 *
-* @example Two close-but-high series, on a baseline that shows the gap
-* <LineChart data={data} xKey="month" series={series} yDomain={[7000, 9000]} />
+* - Series colors come from the `--chart-*` palette (by order, or `series[].color`).
+* - Mounts its own {@link ChartContainer}.
 */
 const LineChart = ({ data, xKey, series, height, width, className, ...chrome }) => /* @__PURE__ */ jsx(ChartContainer, {
 	height,
@@ -235,11 +210,10 @@ const BarChart = ({ data, xKey, series, height, width, className, stacked = fals
 //#endregion
 //#region src/blocks/Charts/AreaChart.tsx
 /**
-* A themed multi-series area chart. Each series is stroked and softly filled
-* from the semantic `--chart-*` palette (by order, or pinned via
-* `series[].color`), which follows the active color scheme and the active
-* brand's `colors.chart` when it defines one. Pass `stacked` to stack the
-* series cumulatively.
+* Themed multi-series area chart.
+*
+* - Colors come from `--chart-*` by series order, or `series[].color`.
+* - The palette follows the color scheme and the brand's `colors.chart`.
 *
 * @example
 * <AreaChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />

package/dist/charts.js.map

@@ -1 +1 @@
-{"version":3,"file":"charts.js","names":["RechartsTooltip","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart"],"sources":["../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /**\n   * Height as a px number or percentage string. Charts have no intrinsic\n   * height, so a container needs one either here or from a sized ancestor.\n   * Defaults to 300.\n   */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"` (fills parent). */\n  width?: ChartDimension;\n  /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */\n  children: ReactElement;\n};\n\n/**\n * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'\n * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,\n * grid, cursor) through CSS so every chart inside inherits it. Sizing is\n * intrinsic: give it a `height` (default 300) and it fills the parent width.\n */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw:text-xs',\n      // Axis ticks and labels follow the muted foreground token.\n      'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-label]:fill-muted-foreground',\n      'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n      // Grid lines, axis lines and the hover cursor follow the border token.\n      'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n      'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n      'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n      'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n      'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n      'tw:[&_.recharts-surface]:outline-hidden',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n      <div className=\"tw:flex tw:flex-col tw:gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n            >\n              <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n                <span\n                  className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw:text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n  yDomain,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n> & { yDomain?: ChartAxisDomain }) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {/* A domain has to reach recharts through a mounted <YAxis>, so a chart that\n        hides its axis but sets one still gets the element — hidden, and taking\n        no layout width. Without a domain the hidden case renders nothing, as\n        before, and recharts falls back to its implicit axis. */}\n    {(showYAxis || yDomain !== undefined) && (\n      <YAxis\n        hide={!showYAxis}\n        domain={yDomain}\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * The design system ships a five-slot categorical chart palette as CSS\n * variables (`--chart-1` … `--chart-5`). Charts resolve their\n * series colors from these tokens only — never from inline hex or a primitive\n * scale — so they follow both the active color scheme (light/dark, via\n * `data-theme` in `styles.css`) and the active brand: a brand reskins charts\n * by defining `colors.chart` (and `colorsDark.chart`) in its\n * `@keboola/brand-registry` definition, which `ThemeProvider` emits as the\n * `--chart-*` variables.\n *\n * The CSS variables hold raw `R G B` channels (for Tailwind's `<alpha-value>`\n * opacity modifiers), so they are wrapped in `rgb(...)` before handing them to\n * recharts as ordinary SVG `stroke` / `fill` strings.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/**\n * The CSS color for a chart token. `index` is 0-based (series position); it\n * wraps around the five-slot palette so any number of series stays on-brand.\n */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo so negative indices still land in 1..CHART_TOKEN_COUNT\n  // (plain `%` would yield e.g. `--chart-0` for index -1).\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nexport type LineChartProps = CartesianChartProps & {\n  /**\n   * `[min, max]` bounds for the value (y) axis — numbers, `'auto'`, or padded\n   * data extremes (`['dataMin - 500', 'dataMax + 500']`). Defaults to a zero\n   * baseline.\n   *\n   * Only the line chart takes this. A line encodes value by POSITION, so moving\n   * the baseline rescales it without misstating it; bars and areas encode by\n   * length and filled area from the baseline, and truncating those makes the\n   * geometry lie about the ratios. Use it to compare two series of similar\n   * magnitude far from zero — not for a single series whose magnitude the\n   * reader is meant to judge.\n   */\n  yDomain?: ChartAxisDomain;\n};\n\n/**\n * A themed multi-series line chart. Each series' color comes from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Wrap-free — mounts its own {@link ChartContainer}.\n *\n * @example\n * <LineChart\n *   data={data}\n *   xKey=\"month\"\n *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}\n * />\n *\n * @example Two close-but-high series, on a baseline that shows the gap\n * <LineChart data={data} xKey=\"month\" series={series} yDomain={[7000, 9000]} />\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: LineChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series area chart. Each series is stroked and softly filled\n * from the semantic `--chart-*` palette (by order, or pinned via\n * `series[].color`), which follows the active color scheme and the active\n * brand's `colors.chart` when it defines one. Pass `stacked` to stack the\n * series cumulatively.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"],"mappings":"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"}
+{"version":3,"file":"charts.js","names":["RechartsTooltip","RechartsLineChart","RechartsBarChart","RechartsAreaChart","RechartsPieChart"],"sources":["../src/blocks/Charts/ChartContainer.tsx","../src/blocks/Charts/ChartTooltip.tsx","../src/blocks/Charts/format.ts","../src/blocks/Charts/cartesian.tsx","../src/blocks/Charts/theme.ts","../src/blocks/Charts/LineChart.tsx","../src/blocks/Charts/BarChart.tsx","../src/blocks/Charts/AreaChart.tsx","../src/blocks/Charts/PieChart.tsx"],"sourcesContent":["import { type ComponentProps, type ReactElement } from 'react';\nimport { ResponsiveContainer } from 'recharts';\n\nimport { cn } from '../../utils';\n\n/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `\"NN%\"`. */\nexport type ChartDimension = number | `${number}%`;\n\nexport type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {\n  /** Px number or percentage; charts have no intrinsic height. Defaults to 300. */\n  height?: ChartDimension;\n  /** Px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** A single recharts chart element. */\n  children: ReactElement;\n};\n\n/** Responsive frame that themes the chart's axis, grid and cursor with semantic tokens via CSS. */\nexport const ChartContainer = ({\n  height = 300,\n  width = '100%',\n  className,\n  children,\n  ...props\n}: ChartContainerProps) => (\n  <div\n    className={cn(\n      'tw:text-xs',\n      'tw:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-polar-angle-axis-tick_text]:fill-muted-foreground',\n      'tw:[&_.recharts-label]:fill-muted-foreground',\n      'tw:[&_.recharts-legend-item-text]:!text-muted-foreground',\n      'tw:[&_.recharts-cartesian-grid_line]:stroke-border/60',\n      'tw:[&_.recharts-cartesian-axis-line]:stroke-border',\n      'tw:[&_.recharts-cartesian-axis-tick-line]:stroke-border',\n      'tw:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',\n      'tw:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted/60',\n      'tw:[&_.recharts-surface]:outline-hidden',\n      className,\n    )}\n    {...props}\n  >\n    <ResponsiveContainer width={width} height={height}>\n      {children}\n    </ResponsiveContainer>\n  </div>\n);\n","import { type ComponentProps } from 'react';\nimport { Tooltip as RechartsTooltip } from 'recharts';\n\nimport { cn } from '../../utils';\n\ntype TooltipPayloadEntry = {\n  name?: string | number;\n  value?: string | number;\n  color?: string;\n  dataKey?: string | number;\n};\n\ntype ChartTooltipContentProps = {\n  active?: boolean;\n  label?: string | number;\n  payload?: TooltipPayloadEntry[];\n  /** Format a value for display (e.g. currency, percentage). */\n  valueFormatter?: (value: string | number, name: string) => string;\n  className?: string;\n};\n\n/**\n * Brand-themed tooltip body. Surfaces (background, border, text) resolve from\n * semantic tokens, and each series swatch reuses the recharts-provided series\n * `color` (already a `--chart-*` token from this package's charts).\n */\nexport const ChartTooltipContent = ({\n  active,\n  label,\n  payload,\n  valueFormatter,\n  className,\n}: ChartTooltipContentProps) => {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div\n      className={cn(\n        'tw:min-w-32 tw:rounded-md tw:border tw:border-border tw:bg-popover tw:px-2.5 tw:py-1.5 tw:text-xs tw:text-popover-foreground tw:shadow-md',\n        className,\n      )}\n    >\n      {label != null && <div className=\"tw:mb-1 tw:font-medium\">{label}</div>}\n      <div className=\"tw:flex tw:flex-col tw:gap-1\">\n        {payload.map((entry) => {\n          const name = String(entry.name ?? entry.dataKey ?? '');\n          const value = entry.value;\n          // Missing / non-numeric values render blank rather than \"NaN\"/\"0\";\n          // only well-formed numbers reach the formatter.\n          const hasNumber = value != null && value !== '' && Number.isFinite(Number(value));\n          const display = hasNumber\n            ? valueFormatter\n              ? valueFormatter(Number(value), name)\n              : String(Number(value))\n            : (value ?? '');\n          return (\n            <div\n              key={String(entry.dataKey ?? name)}\n              className=\"tw:flex tw:items-center tw:justify-between tw:gap-3\"\n            >\n              <span className=\"tw:flex tw:items-center tw:gap-1.5\">\n                <span\n                  className=\"tw:size-2 tw:shrink-0 tw:rounded-[2px]\"\n                  style={{ backgroundColor: entry.color }}\n                />\n                <span className=\"tw:text-muted-foreground\">{name}</span>\n              </span>\n              <span className=\"tw:font-medium tw:tabular-nums\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport type ChartTooltipProps = ComponentProps<typeof RechartsTooltip> & {\n  valueFormatter?: (value: string | number, name: string) => string;\n};\n\n/**\n * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.\n * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.\n */\nexport const ChartTooltip = ({ valueFormatter, ...props }: ChartTooltipProps) => (\n  <RechartsTooltip\n    cursor={{ strokeWidth: 1 }}\n    content={<ChartTooltipContent valueFormatter={valueFormatter} />}\n    {...props}\n  />\n);\n","/**\n * Apply a numeric `valueFormatter` safely. recharts hands axis ticks and\n * tooltip payload values as `string | number | null | undefined`, and partial\n * or streaming data can carry gaps. Coercing those straight through\n * `Number(value)` would render `$0` (empty string → 0) or `$NaN` (non-numeric),\n * so a missing / non-finite value is rendered as an empty string instead of\n * being fed to the formatter.\n */\nexport const formatValue = (\n  value: string | number | null | undefined,\n  valueFormatter?: (value: number) => string,\n): string => {\n  if (value == null || value === '') return '';\n  const num = Number(value);\n  if (!Number.isFinite(num)) return '';\n  return valueFormatter ? valueFormatter(num) : String(num);\n};\n","import { CartesianGrid, Legend, XAxis, YAxis } from 'recharts';\n\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nconst AXIS_PROPS = {\n  tickLine: false,\n  axisLine: false,\n  tick: { fontSize: 11 },\n} as const;\n\n/**\n * The grid + axes + tooltip + legend shared by the line, bar, and area charts.\n * Colors are applied via `ChartContainer`'s CSS chrome, not inline props, so\n * these stay brand-safe.\n */\nexport const cartesianChrome = ({\n  xKey,\n  showGrid = true,\n  showYAxis = true,\n  showLegend = false,\n  showTooltip = true,\n  valueFormatter,\n  yDomain,\n}: Pick<\n  CartesianChartProps,\n  'xKey' | 'showGrid' | 'showYAxis' | 'showLegend' | 'showTooltip' | 'valueFormatter'\n> & { yDomain?: ChartAxisDomain }) => (\n  <>\n    {showGrid && <CartesianGrid strokeDasharray=\"3 3\" vertical={false} />}\n    <XAxis dataKey={xKey} {...AXIS_PROPS} />\n    {/* A domain has to reach recharts through a mounted <YAxis>, so a chart that\n        hides its axis but sets one still gets the element — hidden, and taking\n        no layout width. Without a domain the hidden case renders nothing, as\n        before, and recharts falls back to its implicit axis. */}\n    {(showYAxis || yDomain !== undefined) && (\n      <YAxis\n        hide={!showYAxis}\n        domain={yDomain}\n        width={48}\n        {...AXIS_PROPS}\n        tickFormatter={\n          valueFormatter\n            ? (value: string | number) => formatValue(value, valueFormatter)\n            : undefined\n        }\n      />\n    )}\n    {showTooltip && (\n      <ChartTooltip\n        valueFormatter={valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined}\n      />\n    )}\n    {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n  </>\n);\n","/**\n * Chart series colors, from the `--chart-1` … `--chart-5` CSS variables only.\n *\n * - Never inline hex: the variables follow color scheme and brand (`colors.chart` in\n *   `@keboola/brand-registry`, emitted by `ThemeProvider`).\n * - The variables hold raw `R G B` channels, so they are wrapped in `rgb(...)` for recharts.\n */\nconst CHART_TOKEN_COUNT = 5;\n\n/** Number of the semantic chart token (`1`–`5`) a series maps to. */\nexport type ChartColorToken = 1 | 2 | 3 | 4 | 5;\n\n/** The CSS color for a 0-based series `index`, wrapping around the palette. */\nexport const chartTokenColor = (index: number): string => {\n  // Euclidean modulo: negative indices still land in 1..CHART_TOKEN_COUNT.\n  const slot = (((index % CHART_TOKEN_COUNT) + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT) + 1;\n  return `rgb(var(--chart-${slot}))`;\n};\n\n/** Resolve an explicit token (1–5) or fall back to the series position. */\nexport const resolveSeriesColor = (index: number, token?: ChartColorToken): string =>\n  chartTokenColor(token ? token - 1 : index);\n","import { Line, LineChart as RechartsLineChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps, type ChartAxisDomain } from './types';\n\nexport type LineChartProps = CartesianChartProps & {\n  /**\n   * Y-axis `[min, max]`; defaults to a zero baseline. Line-only: a truncated baseline misstates\n   * bar/area lengths. For comparing close series far from zero, not judging one magnitude.\n   */\n  yDomain?: ChartAxisDomain;\n};\n\n/**\n * A themed multi-series line chart.\n *\n * - Series colors come from the `--chart-*` palette (by order, or `series[].color`).\n * - Mounts its own {@link ChartContainer}.\n */\nexport const LineChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  ...chrome\n}: LineChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsLineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Line\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            strokeWidth={2}\n            dot={{ r: 3, fill: color, stroke: color }}\n            activeDot={{ r: 4 }}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsLineChart>\n  </ChartContainer>\n);\n","import { Bar, BarChart as RechartsBarChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type BarChartProps = CartesianChartProps & {\n  /** Stack the series into a single bar per category. Defaults to grouped. */\n  stacked?: boolean;\n};\n\n/**\n * A themed multi-series bar chart. Series colors come from the semantic\n * `--chart-*` palette (by order, or pinned via `series[].color`), which\n * follows the active color scheme and the active brand's `colors.chart` when it\n * defines one. Pass `stacked` to stack the series instead of grouping them.\n *\n * @example\n * <BarChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const BarChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: BarChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsBarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => (\n        <Bar\n          key={s.dataKey}\n          dataKey={s.dataKey}\n          name={s.name ?? s.dataKey}\n          fill={resolveSeriesColor(index, s.color)}\n          radius={stacked ? 0 : [4, 4, 0, 0]}\n          stackId={stacked ? 'stack' : undefined}\n          isAnimationActive={false}\n        />\n      ))}\n    </RechartsBarChart>\n  </ChartContainer>\n);\n","import { Area, AreaChart as RechartsAreaChart } from 'recharts';\n\nimport { cartesianChrome } from './cartesian';\nimport { ChartContainer } from './ChartContainer';\nimport { resolveSeriesColor } from './theme';\nimport { type CartesianChartProps } from './types';\n\nexport type AreaChartProps = CartesianChartProps & {\n  /** Stack the series into a cumulative area. Defaults to overlaid. */\n  stacked?: boolean;\n};\n\n/**\n * Themed multi-series area chart.\n *\n * - Colors come from `--chart-*` by series order, or `series[].color`.\n * - The palette follows the color scheme and the brand's `colors.chart`.\n *\n * @example\n * <AreaChart data={data} xKey=\"month\" series={[{ dataKey: 'revenue' }]} />\n */\nexport const AreaChart = ({\n  data,\n  xKey,\n  series,\n  height,\n  width,\n  className,\n  stacked = false,\n  ...chrome\n}: AreaChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsAreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>\n      {cartesianChrome({ xKey, ...chrome })}\n      {series.map((s, index) => {\n        const color = resolveSeriesColor(index, s.color);\n        return (\n          <Area\n            key={s.dataKey}\n            type=\"monotone\"\n            dataKey={s.dataKey}\n            name={s.name ?? s.dataKey}\n            stroke={color}\n            fill={color}\n            fillOpacity={0.15}\n            strokeWidth={2}\n            stackId={stacked ? 'stack' : undefined}\n            isAnimationActive={false}\n          />\n        );\n      })}\n    </RechartsAreaChart>\n  </ChartContainer>\n);\n","import { Cell, Legend, Pie, PieChart as RechartsPieChart } from 'recharts';\n\nimport { ChartContainer, type ChartDimension } from './ChartContainer';\nimport { ChartTooltip } from './ChartTooltip';\nimport { formatValue } from './format';\nimport { chartTokenColor } from './theme';\nimport { type ChartDatum } from './types';\n\nexport type PieChartProps = {\n  /** The rows to plot — one sector per row. */\n  data: ChartDatum[];\n  /** Key into each datum for the sector label. */\n  nameKey: string;\n  /** Key into each datum for the sector value. */\n  dataKey: string;\n  /** Render as a donut with a hole of this inner radius (px or %). */\n  innerRadius?: ChartDimension;\n  /** Height as a px number or percentage. Defaults to 300. */\n  height?: ChartDimension;\n  /** Width as a px number or percentage. Defaults to `\"100%\"`. */\n  width?: ChartDimension;\n  /** Show a legend below the chart. Defaults to `true`. */\n  showLegend?: boolean;\n  /** Show the hover tooltip. Defaults to `true`. */\n  showTooltip?: boolean;\n  /** Format a sector value for the tooltip. */\n  valueFormatter?: (value: number) => string;\n  className?: string;\n};\n\n/**\n * A themed pie / donut chart. Each sector cycles through the semantic\n * `--chart-*` palette, which follows the active color scheme and the\n * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make\n * a donut.\n *\n * @example\n * <PieChart data={data} nameKey=\"engine\" dataKey=\"rows\" innerRadius=\"60%\" />\n */\nexport const PieChart = ({\n  data,\n  nameKey,\n  dataKey,\n  innerRadius = 0,\n  height,\n  width,\n  className,\n  showLegend = true,\n  showTooltip = true,\n  valueFormatter,\n}: PieChartProps) => (\n  <ChartContainer height={height} width={width} className={className}>\n    <RechartsPieChart>\n      {showTooltip && (\n        <ChartTooltip\n          valueFormatter={\n            valueFormatter ? (value) => formatValue(value, valueFormatter) : undefined\n          }\n        />\n      )}\n      {showLegend && <Legend wrapperStyle={{ fontSize: 11 }} />}\n      <Pie\n        data={data}\n        nameKey={nameKey}\n        dataKey={dataKey}\n        innerRadius={innerRadius}\n        // Separate sectors with the brand surface color rather than recharts'\n        // hardcoded white default.\n        stroke=\"rgb(var(--background))\"\n        isAnimationActive={false}\n      >\n        {data.map((datum, index) => (\n          <Cell key={String(datum[nameKey] ?? index)} fill={chartTokenColor(index)} />\n        ))}\n      </Pie>\n    </RechartsPieChart>\n  </ChartContainer>\n);\n"],"mappings":"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"}

package/dist/{context-D7X470dy.js → context-U293r3v-.js}

@@ -15,19 +15,15 @@ const defaultContext = {
 const ThemeContext = createContext(defaultContext);
 const useTheme = () => use(ThemeContext);
 /**
-* TEMPORARY — kbc-ui-internal only.
+* TEMPORARY, kbc-ui-internal: whether the subtree renders the argo design language.
 *
-* Flags whether the subtree renders the argo design language. Defaults to argo
-* (`true`) — the modern default; legacy chrome is the exception. It exists
-* solely to bridge kbc-ui while its chrome is migrated off the legacy design
-* language: kbc-ui provides `false` for legacy brands/surfaces (see its
-* `AppThemeProvider`) and reads it via `useArgoDesign`. `ThemeProvider` does
-* not set it — argo is decoupled from the brand. Once every kbc-ui surface has
-* been migrated, this context and its hook can be deleted.
+* - kbc-ui provides `false` for legacy brands/surfaces (its `AppThemeProvider`).
+* - `ThemeProvider` never sets it — argo is independent of the brand.
+* - Delete it and `useArgoDesign` once kbc-ui's chrome is migrated.
 */
 const ArgoDesignContext = createContext(true);
 const useArgoDesign = () => use(ArgoDesignContext);
 //#endregion
 export { ArgoDesignContext, ThemeContext, useArgoDesign, useTheme };
 
-//# sourceMappingURL=context-D7X470dy.js.map
+//# sourceMappingURL=context-U293r3v-.js.map