@keboola/design 13.1.3 → 14.0.0

package/dist/{ToggleGroup-Cy_10Mvu.js → ToggleGroup-BOz1yyz6.js}

@@ -1,4 +1,4 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
@@ -20,7 +20,7 @@ const rootVariants = cva([
 		large: ["tw:h-10"]
 	} }
 });
-const itemClasses = cn("tailwindcss-preflight", "tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:gap-2", "tw:shrink-0", "tw:whitespace-nowrap", "tw:h-full", "tw:rounded-md", "tw:px-2", "tw:py-1", "tw:bg-transparent", "tw:text-muted-foreground", "tw:text-sm", "tw:font-medium", "tw:transition-colors", "tw:disabled:cursor-not-allowed", "tw:disabled:opacity-50", "tw:!outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:not-disabled:[&[data-state=off]]:hover:bg-background/60", "tw:not-disabled:[&[data-state=off]]:hover:text-foreground", "tw:data-[state=on]:bg-background", "tw:data-[state=on]:text-foreground", "tw:data-[state=on]:shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]", "tw:[[data-theme=dark]_&]:data-[state=on]:bg-secondary", "tw:[[data-theme=dark]_&]:data-[state=on]:shadow-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:pointer-events-none", "tw:[&_svg:not([class*='tw:size-'])]:size-4");
+const itemClasses = cn("tailwindcss-preflight", "tw:inline-flex", "tw:items-center", "tw:justify-center", "tw:gap-2", "tw:shrink-0", "tw:whitespace-nowrap", "tw:h-full", "tw:rounded-md", "tw:px-2", "tw:py-1", "tw:bg-transparent", "tw:text-muted-foreground", "tw:text-sm", "tw:font-medium", "tw:transition-colors", "tw:disabled:cursor-not-allowed", "tw:disabled:opacity-disabled", "tw:!outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-ring/50", "tw:not-disabled:[&[data-state=off]]:hover:bg-background/60", "tw:not-disabled:[&[data-state=off]]:hover:text-foreground", "tw:data-[state=on]:bg-background", "tw:data-[state=on]:text-foreground", "tw:data-[state=on]:shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]", "tw:[[data-theme=dark]_&]:data-[state=on]:bg-secondary", "tw:[[data-theme=dark]_&]:data-[state=on]:shadow-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:pointer-events-none", "tw:[&_svg:not([class*='tw:size-'])]:size-4");
 /**
 * Segmented row of mutually-exclusive (or multi-select) options. Built on `@radix-ui/react-toggle-group`.
 * For `type="single"`, `onValueChange` receives `""` when the user deselects the active item.
@@ -44,4 +44,4 @@ Item });
 //#endregion
 export { ToggleGroup };
 
-//# sourceMappingURL=ToggleGroup-Cy_10Mvu.js.map
+//# sourceMappingURL=ToggleGroup-BOz1yyz6.js.map

package/dist/ToggleGroup-BOz1yyz6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup-BOz1yyz6.js","names":[],"sources":["../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst rootVariants = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:inline-flex',\n    'tw:items-center',\n    'tw:shrink-0',\n    'tw:bg-muted',\n    'tw:rounded-lg',\n    'tw:p-[3px]',\n    'tw:gap-0',\n  ],\n  {\n    defaultVariants: { size: 'medium' },\n    variants: {\n      size: {\n        small: ['tw:h-8'],\n        medium: ['tw:h-9'],\n        large: ['tw:h-10'],\n      },\n    },\n  },\n);\n\nconst itemClasses = cn(\n  'tailwindcss-preflight',\n  'tw:inline-flex',\n  'tw:items-center',\n  'tw:justify-center',\n  'tw:gap-2',\n  'tw:shrink-0',\n  'tw:whitespace-nowrap',\n\n  'tw:h-full',\n  'tw:rounded-md',\n  'tw:px-2',\n  'tw:py-1',\n\n  'tw:bg-transparent',\n  // Off-state copy is muted so the pressed segment reads as pressed from the label\n  // alone — the fill alone is a near-invisible step on either scheme's track.\n  'tw:text-muted-foreground',\n  'tw:text-sm',\n  'tw:font-medium',\n\n  'tw:transition-colors',\n\n  'tw:disabled:cursor-not-allowed',\n  'tw:disabled:opacity-disabled',\n\n  'tw:!outline-hidden',\n  'tw:focus-visible:ring-2',\n  'tw:focus-visible:ring-ring/50',\n\n  // hover on non-pressed\n  'tw:not-disabled:[&[data-state=off]]:hover:bg-background/60',\n  'tw:not-disabled:[&[data-state=off]]:hover:text-foreground',\n\n  // pressed\n  'tw:data-[state=on]:bg-background',\n  'tw:data-[state=on]:text-foreground',\n  'tw:data-[state=on]:shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]',\n\n  // Dark scheme inverts the lift: `background` is darker than the `muted` track, so the\n  // pressed segment reads as a hole and the black drop shadow renders nothing on it.\n  // `secondary` is the step above the track.\n  'tw:[[data-theme=dark]_&]:data-[state=on]:bg-secondary',\n  'tw:[[data-theme=dark]_&]:data-[state=on]:shadow-none',\n\n  'tw:[&_svg]:shrink-0',\n  'tw:[&_svg]:pointer-events-none',\n  \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n);\n\ntype RootProps = ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof rootVariants>;\n\n/**\n * Segmented row of mutually-exclusive (or multi-select) options. Built on `@radix-ui/react-toggle-group`.\n * For `type=\"single\"`, `onValueChange` receives `\"\"` when the user deselects the active item.\n */\nconst Root = ({ ref, className, size = 'medium', ...props }: RootProps) => (\n  <ToggleGroupPrimitive.Root\n    ref={ref}\n    {...props}\n    className={cn(rootVariants({ size, className }))}\n  />\n);\n\ntype ItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>;\n\nconst Item = ({ ref, className, ...props }: ItemProps) => (\n  <ToggleGroupPrimitive.Item ref={ref} {...props} className={cn(itemClasses, className)} />\n);\n\nexport const ToggleGroup = Object.assign(Root, {\n  /** Individual segment inside a `ToggleGroup`. `value` is required and must be unique within the group. */\n  Item,\n});\n"],"mappings":";;;;;AAMA,MAAM,eAAe,IACnB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,MAAM,SAAS;CAClC,UAAU,EACR,MAAM;EACJ,OAAO,CAAC,QAAQ;EAChB,QAAQ,CAAC,QAAQ;EACjB,OAAO,CAAC,SAAS;CACnB,EACF;AACF,CACF;AAEA,MAAM,cAAc,GAClB,yBACA,kBACA,mBACA,qBACA,YACA,eACA,wBAEA,aACA,iBACA,WACA,WAEA,qBAGA,4BACA,cACA,kBAEA,wBAEA,kCACA,gCAEA,sBACA,2BACA,iCAGA,8DACA,6DAGA,oCACA,sCACA,oFAKA,yDACA,wDAEA,uBACA,kCACA,4CACF;;;;;AASA,MAAM,QAAQ,EAAE,KAAK,WAAW,OAAO,UAAU,GAAG,YAClD,oBAAC,qBAAqB,MAAtB;CACO;CACL,GAAI;CACJ,WAAW,GAAG,aAAa;EAAE;EAAM;CAAU,CAAC,CAAC;AAChD,CAAA;AAKH,MAAM,QAAQ,EAAE,KAAK,WAAW,GAAG,YACjC,oBAAC,qBAAqB,MAAtB;CAAgC;CAAK,GAAI;CAAO,WAAW,GAAG,aAAa,SAAS;AAAI,CAAA;AAG1F,MAAa,cAAc,OAAO,OAAO,MAAM;;AAE7C,KACF,CAAC"}

package/dist/{Workbench-DmZzpkj7.js → Workbench-CxgNCs3I.js}

@@ -1,8 +1,8 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useControllableState } from "./useControllableState-CUYXMsfz.js";
-import { Collapsible } from "./Collapsible-BQXWEOBC.js";
-import { Slot } from "@radix-ui/react-slot";
+import { Collapsible } from "./Collapsible-DD4xTL75.js";
 import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Workbench/constants.ts
 const DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM = 2.75;
@@ -292,4 +292,4 @@ Workbench.FullScreenTrigger = WorkbenchFullScreenTrigger;
 //#endregion
 export { DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Workbench, useWorkbench };
 
-//# sourceMappingURL=Workbench-DmZzpkj7.js.map
+//# sourceMappingURL=Workbench-CxgNCs3I.js.map

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"Workbench-CxgNCs3I.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-C65nta_r.js → ZoomableSvg-Dh1OstPN.js}

@@ -1,24 +1,102 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip } from "./utils-Bd28bWgm.js";
-import { Maximize2, Minimize2 } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
-import { ClipboardButton } from "./ClipboardButton-srUgWgwH.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip } from "./utils-LQ4jJA-9.js";
+import { Maximize2, Minimize2 } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { ClipboardButton } from "./ClipboardButton-DxvZG_H0.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
+//#region src/components/ZoomableSvg/exportSvg.ts
+const PNG_SCALE = 2;
+const ROOT_SVG_TAG = /^<svg\b[^>]*>/i;
+const HAS_DEFAULT_NAMESPACE = /\bxmlns\s*=/i;
+const withSvgNamespace = (svg) => {
+	const trimmed = svg.trim();
+	const rootTag = trimmed.match(ROOT_SVG_TAG)?.[0];
+	if (!rootTag || HAS_DEFAULT_NAMESPACE.test(rootTag)) return trimmed;
+	return trimmed.replace(/^<svg\b/i, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
+};
+const toSvgFileContent = (svg) => `<?xml version="1.0" encoding="UTF-8"?>\n${withSvgNamespace(svg).trim()}\n`;
+const NUMBER = String.raw`\d+(?:\.\d+)?|\.\d+`;
+const PIXEL_LENGTH = new RegExp(String.raw`^\s*(?:${NUMBER})(?:px)?\s*$`, "i");
+const parsePixelLength = (value) => {
+	if (!PIXEL_LENGTH.test(value ?? "")) return null;
+	const parsed = Number.parseFloat(value ?? "");
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+};
+const parseSvgSize = (svg) => {
+	const element = new DOMParser().parseFromString(withSvgNamespace(svg), "image/svg+xml").documentElement;
+	const viewBox = element.getAttribute("viewBox")?.split(/[\s,]+/).map(Number);
+	if (viewBox?.length === 4 && viewBox.every((value) => Number.isFinite(value))) {
+		const [, , width, height] = viewBox;
+		if (width !== void 0 && height !== void 0 && width > 0 && height > 0) return {
+			width,
+			height
+		};
+	}
+	const width = parsePixelLength(element.getAttribute("width"));
+	const height = parsePixelLength(element.getAttribute("height"));
+	return width !== null && height !== null ? {
+		width,
+		height
+	} : null;
+};
+const CHANNEL_TRIPLET = new RegExp(String.raw`^(?:${NUMBER})\s+(?:${NUMBER})\s+(?:${NUMBER})$`);
+const toCanvasColor = (token) => {
+	const trimmed = token.trim();
+	if (!trimmed) return "white";
+	return CHANNEL_TRIPLET.test(trimmed) ? `rgb(${trimmed})` : trimmed;
+};
+const resolveBackground = () => toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue("--color-background"));
+/**
+* Rasterize SVG markup to a PNG blob at 2x for legible text.
+*
+* The SVG is loaded as a data URL rather than a blob URL: an <img> loading SVG
+* is treated as a foreign resource, so a blob URL would taint the canvas and
+* make toBlob throw a SecurityError. A background is painted first because a
+* transparent PNG reads as unusable when pasted into a slide deck.
+*/
+const svgToPngBlob = async (svg, background) => {
+	const size = parseSvgSize(svg);
+	if (!size) throw new Error("Cannot determine diagram dimensions.");
+	const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(toSvgFileContent(svg))}`;
+	const image = new Image();
+	image.decoding = "sync";
+	await new Promise((resolve, reject) => {
+		image.onload = () => resolve();
+		image.onerror = () => reject(/* @__PURE__ */ new Error("Failed to load the diagram for export."));
+		image.src = encoded;
+	});
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.round(size.width * PNG_SCALE);
+	canvas.height = Math.round(size.height * PNG_SCALE);
+	const context = canvas.getContext("2d");
+	if (!context) throw new Error("Canvas is unavailable in this browser.");
+	context.fillStyle = background ?? resolveBackground();
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.drawImage(image, 0, 0, canvas.width, canvas.height);
+	return new Promise((resolve, reject) => {
+		canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("Failed to encode the PNG.")), "image/png");
+	});
+};
+//#endregion
 //#region src/components/ZoomableSvg/ZoomableSvg.tsx
 const MIN_SCALE = .5;
 const MAX_SCALE = 3;
 const ZOOM_STEP = .1;
-const ZoomableSvg = ({ html, copyText, className, allowForeignObject, renderActions }) => {
+const ZoomableSvg = ({ html, copyText, className, allowForeignObject, allowUse, renderActions }) => {
 	const safeHtml = useMemo(() => DOMPurify.sanitize(html, {
 		USE_PROFILES: {
 			svg: true,
 			svgFilters: true
 		},
-		...allowForeignObject ? { ADD_TAGS: ["foreignObject"] } : {}
-	}), [html, allowForeignObject]);
+		ADD_TAGS: [...allowForeignObject ? ["foreignObject"] : [], ...allowUse ? ["use"] : []]
+	}), [
+		html,
+		allowForeignObject,
+		allowUse
+	]);
 	const containerRef = useRef(null);
 	const [scale, setScale] = useState(1);
 	const [translate, setTranslate] = useState({
@@ -155,80 +233,6 @@ const ZoomableSvg = ({ html, copyText, className, allowForeignObject, renderActi
 	});
 };
 //#endregion
-//#region src/components/ZoomableSvg/exportSvg.ts
-const PNG_SCALE = 2;
-const ROOT_SVG_TAG = /^<svg\b[^>]*>/i;
-const HAS_DEFAULT_NAMESPACE = /\bxmlns\s*=/i;
-const withSvgNamespace = (svg) => {
-	const trimmed = svg.trim();
-	const rootTag = trimmed.match(ROOT_SVG_TAG)?.[0];
-	if (!rootTag || HAS_DEFAULT_NAMESPACE.test(rootTag)) return trimmed;
-	return trimmed.replace(/^<svg\b/i, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
-};
-const toSvgFileContent = (svg) => `<?xml version="1.0" encoding="UTF-8"?>\n${withSvgNamespace(svg).trim()}\n`;
-const NUMBER = String.raw`\d+(?:\.\d+)?|\.\d+`;
-const PIXEL_LENGTH = new RegExp(String.raw`^\s*(?:${NUMBER})(?:px)?\s*$`, "i");
-const parsePixelLength = (value) => {
-	if (!PIXEL_LENGTH.test(value ?? "")) return null;
-	const parsed = Number.parseFloat(value ?? "");
-	return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
-};
-const parseSvgSize = (svg) => {
-	const element = new DOMParser().parseFromString(withSvgNamespace(svg), "image/svg+xml").documentElement;
-	const viewBox = element.getAttribute("viewBox")?.split(/[\s,]+/).map(Number);
-	if (viewBox?.length === 4 && viewBox.every((value) => Number.isFinite(value))) {
-		const [, , width, height] = viewBox;
-		if (width !== void 0 && height !== void 0 && width > 0 && height > 0) return {
-			width,
-			height
-		};
-	}
-	const width = parsePixelLength(element.getAttribute("width"));
-	const height = parsePixelLength(element.getAttribute("height"));
-	return width !== null && height !== null ? {
-		width,
-		height
-	} : null;
-};
-const CHANNEL_TRIPLET = new RegExp(String.raw`^(?:${NUMBER})\s+(?:${NUMBER})\s+(?:${NUMBER})$`);
-const toCanvasColor = (token) => {
-	const trimmed = token.trim();
-	if (!trimmed) return "white";
-	return CHANNEL_TRIPLET.test(trimmed) ? `rgb(${trimmed})` : trimmed;
-};
-const resolveBackground = () => toCanvasColor(getComputedStyle(document.documentElement).getPropertyValue("--color-background"));
-/**
-* Rasterize SVG markup to a PNG blob at 2x for legible text.
-*
-* The SVG is loaded as a data URL rather than a blob URL: an <img> loading SVG
-* is treated as a foreign resource, so a blob URL would taint the canvas and
-* make toBlob throw a SecurityError. A background is painted first because a
-* transparent PNG reads as unusable when pasted into a slide deck.
-*/
-const svgToPngBlob = async (svg, background) => {
-	const size = parseSvgSize(svg);
-	if (!size) throw new Error("Cannot determine diagram dimensions.");
-	const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(toSvgFileContent(svg))}`;
-	const image = new Image();
-	image.decoding = "sync";
-	await new Promise((resolve, reject) => {
-		image.onload = () => resolve();
-		image.onerror = () => reject(/* @__PURE__ */ new Error("Failed to load the diagram for export."));
-		image.src = encoded;
-	});
-	const canvas = document.createElement("canvas");
-	canvas.width = Math.round(size.width * PNG_SCALE);
-	canvas.height = Math.round(size.height * PNG_SCALE);
-	const context = canvas.getContext("2d");
-	if (!context) throw new Error("Canvas is unavailable in this browser.");
-	context.fillStyle = background ?? resolveBackground();
-	context.fillRect(0, 0, canvas.width, canvas.height);
-	context.drawImage(image, 0, 0, canvas.width, canvas.height);
-	return new Promise((resolve, reject) => {
-		canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("Failed to encode the PNG.")), "image/png");
-	});
-};
-//#endregion
 export { ZoomableSvg, svgToPngBlob, toSvgFileContent };
 
-//# sourceMappingURL=ZoomableSvg-C65nta_r.js.map
+//# sourceMappingURL=ZoomableSvg-Dh1OstPN.js.map

package/dist/ZoomableSvg-Dh1OstPN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZoomableSvg-Dh1OstPN.js","names":[],"sources":["../src/components/ZoomableSvg/exportSvg.ts","../src/components/ZoomableSvg/ZoomableSvg.tsx"],"sourcesContent":["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; inline diagram output may\n// omit 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// diagram 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","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  /** Keep `<use>` through sanitization. Enable only when every `href` is already a `#` reference. */\n  allowUse?: 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  allowUse,\n  renderActions,\n}: Props) => {\n  const safeHtml = useMemo(\n    () =>\n      DOMPurify.sanitize(html, {\n        USE_PROFILES: { svg: true, svgFilters: true },\n        ADD_TAGS: [...(allowForeignObject ? ['foreignObject'] : []), ...(allowUse ? ['use'] : [])],\n      }),\n    [html, allowForeignObject, allowUse],\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"],"mappings":"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"}

package/dist/charts.js

@@ -1,4 +1,4 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.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

package/dist/classNames-DcGnTh2N.js

@@ -0,0 +1,21 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/utils/classNames.ts
+const twMerge = extendTailwindMerge({
+	prefix: "tw",
+	extend: {
+		theme: { radius: [
+			"card",
+			"popover",
+			"modal",
+			"sheet",
+			"toast"
+		] },
+		classGroups: { opacity: [{ opacity: ["disabled"] }] }
+	}
+});
+const cn = (...classes) => twMerge(clsx(...classes));
+//#endregion
+export { cn };
+
+//# sourceMappingURL=classNames-DcGnTh2N.js.map

package/dist/classNames-DcGnTh2N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"classNames-DcGnTh2N.js","names":[],"sources":["../src/utils/classNames.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\n// tailwind-merge v3 (Tailwind v4): the prefix drops the trailing separator —\n// `tw:` → `tw` (the `:` separator is implied).\n// `extend` registers the package's own scale names, so a caller's `className` replaces them.\nconst twMerge = extendTailwindMerge({\n  prefix: 'tw',\n  extend: {\n    theme: { radius: ['card', 'popover', 'modal', 'sheet', 'toast'] },\n    classGroups: { opacity: [{ opacity: ['disabled'] }] },\n  },\n});\n\nexport const cn = (...classes: ClassValue[]) => twMerge(clsx(...classes));\n"],"mappings":";;;AAMA,MAAM,UAAU,oBAAoB;CAClC,QAAQ;CACR,QAAQ;EACN,OAAO,EAAE,QAAQ;GAAC;GAAQ;GAAW;GAAS;GAAS;EAAO,EAAE;EAChE,aAAa,EAAE,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,EAAE,CAAC,EAAE;CACtD;AACF,CAAC;AAED,MAAa,MAAM,GAAG,YAA0B,QAAQ,KAAK,GAAG,OAAO,CAAC"}

package/dist/editors.js

@@ -1,11 +1,11 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { ChevronsLeft, ChevronsRight, X } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { ChevronsLeft, ChevronsRight, X } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { FieldItem, useFieldContext } from "./FieldItem-BHViBJS3.js";
+import { FieldItem, useFieldContext } from "./FieldItem-CYvJyjiI.js";
 import { CHANGE_CLASS } from "./internal/components/MergeEditor/constants.js";
-import { resolveToken } from "./themeTokens-7DEab0kp.js";
-import { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion } from "./CodeEditor-Df7VVx08.js";
+import { resolveToken } from "./themeTokens-l2Fsfcs7.js";
+import { CodeEditor, LANGUAGE_MODES, buildBaseThemeStyles, buildBasicSetup, buildCanvasChrome, buildChromeStyles, buildCustomTheme, buildDiffWash, isLanguageMode, searchExtension, updateSearch, useThemedExtension, useTooltipsExtension, useVariableCompletion } from "./CodeEditor-BfRSCKEs.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Decoration, EditorView, GutterMarker, ViewPlugin, gutter, gutterLineClass } from "@codemirror/view";

package/dist/flint.js

@@ -1,40 +1,14 @@
-import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
-import { DiagramSource } from "./DiagramSource-C5_d8Gdj.js";
 import { useThemeAttributes } from "./useThemeAttributes-B199Regy.js";
-import { ZoomableSvg } from "./ZoomableSvg-C65nta_r.js";
-import { SERIES_TOKENS, createVegaColorResolver, vegaRgb, vegaTheme } from "./vegaTheme-VQMWTlBw.js";
-import { makeResponsive } from "./svgTransforms-Dw2hRA-i.js";
+import { DiagramSkeleton } from "./internal/blocks/DiagramShared/DiagramSkeleton.js";
+import { DiagramSource, makeResponsive } from "./svgTransforms-Hnvev3Vs.js";
+import { ZoomableSvg } from "./ZoomableSvg-Dh1OstPN.js";
+import { SERIES_TOKENS, createVegaColorResolver, tierTwoColour } from "./vegaTokens-Ce07C0DH.js";
+import { vegaTheme } from "./vegaTheme-BrmVoPEz.js";
+import { createSvgCache, diagramCacheKey } from "./svgCache-Dhmbe-7i.js";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/blocks/FlintChart/flintTheme.ts
 /**
-* How the second palette tier (series 6-10) is derived from the core hues.
-*
-* - Each hue moves *away* from its surface: darker on light, lighter on dark.
-*   Darkening on dark would drop contrast from ~6.7:1 to ~3.7:1.
-* - `amount` is the fraction of the distance travelled toward `towards`.
-*/
-const TIER_TWO_SHIFT = {
-	light: {
-		towards: 0,
-		amount: .38
-	},
-	dark: {
-		towards: 255,
-		amount: .35
-	}
-};
-/**
-* Move an `rgb()` string's channels a fraction of the way toward `towards`
-* (0 = black, 255 = white). Returns the input unchanged if it is not that shape.
-*/
-const shiftChannels = (colour, towards, amount) => {
-	const channels = colour.match(/\d+/g);
-	if (!channels || channels.length < 3) return colour;
-	const shifted = channels.slice(0, 3).map((c) => Math.round(Number(c) + (towards - Number(c)) * amount));
-	return vegaRgb(shifted.join(" "));
-};
-/**
 * Put the design system's `--chart-1..5` palette on a Flint input.
 *
 * - Flint resolves series colours during assembly, so they ride `theme_spec`, not `vegaTheme`.
@@ -63,7 +37,7 @@ const withFlintSeriesPalette = (input, scheme, from) => {
 			},
 			series: {
 				categorical,
-				categoricalExtended: [...categorical, ...categorical.map((colour) => shiftChannels(colour, TIER_TWO_SHIFT[scheme].towards, TIER_TWO_SHIFT[scheme].amount))],
+				categoricalExtended: [...categorical, ...categorical.map((colour) => tierTwoColour(colour, scheme))],
 				overflow: token("muted-foreground"),
 				sequential: {
 					stops: [token("accent"), token("chart-1")],
@@ -201,20 +175,11 @@ const getFlintRuntime = () => {
 };
 const RENDER_DEBOUNCE_MS = 300;
 const MAX_SOURCE_CHARS = 2e5;
-const MAX_CACHED_CHARTS = 24;
-const svgCache = /* @__PURE__ */ new Map();
-const cacheSvg = (key, svg) => {
-	if (!svgCache.has(key) && svgCache.size >= MAX_CACHED_CHARTS) {
-		const oldest = svgCache.keys().next();
-		if (!oldest.done) svgCache.delete(oldest.value);
-	}
-	svgCache.set(key, svg);
-};
-const chartCacheKey = (code, themeKey) => `${themeKey}\n${code}`;
+const svgCache = createSvgCache();
 const prevThemeKeyOf = (key) => key.slice(0, key.indexOf("\n"));
 const FlintChart = ({ code, renderActions }) => {
 	const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();
-	const cacheKey = chartCacheKey(code, themeKey);
+	const cacheKey = diagramCacheKey(code, themeKey);
 	const [svg, setSvg] = useState(() => svgCache.get(cacheKey) ?? null);
 	const [renderFailed, setRenderFailed] = useState(false);
 	const [prevKey, setPrevKey] = useState(cacheKey);
@@ -254,7 +219,7 @@ const FlintChart = ({ code, renderActions }) => {
 				if (cancelled) return;
 				const svgOutput = makeResponsive(await renderFlintSvg(runtime, withFlintSeriesPalette(input, scheme, scope), vegaTheme(scheme, scope)));
 				if (cancelled) return;
-				cacheSvg(cacheKey, svgOutput);
+				svgCache.set(cacheKey, svgOutput);
 				setSvg(svgOutput);
 				setRenderFailed(false);
 			}).catch((err) => {