@keboola/design 11.0.0 → 11.0.1

package/dist/Workbench-BzE-Vvd9.js

@@ -0,0 +1,293 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { useControllableState } from "./useControllableState-M6494mCT.js";
+import { Collapsible } from "./Collapsible-BQXWEOBC.js";
+import { Slot } from "@radix-ui/react-slot";
+import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Workbench/constants.ts
+const DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM = 2.75;
+const DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX = 320;
+const MIN_WORKBENCH_PANEL_HEIGHT_IN_PX = 120;
+const WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO = .8;
+//#endregion
+//#region src/components/Workbench/context.ts
+const createWorkbenchActions = (setState) => ({
+	expand: () => setState((state) => state === "collapsed" ? "expanded" : state),
+	collapse: () => setState("collapsed"),
+	toggleExpanded: () => setState((state) => state === "collapsed" ? "expanded" : "collapsed"),
+	enterFullScreen: () => setState("full-screen"),
+	exitFullScreen: () => setState((state) => state === "full-screen" ? "expanded" : state),
+	toggleFullScreen: () => setState((state) => state === "full-screen" ? "expanded" : "full-screen")
+});
+const WorkbenchContext = createContext(null);
+/**
+* The parts sit at arbitrary depth under `<Workbench>` — a trigger lives inside the panel header,
+* three levels down — so the state travels by context rather than props.
+*/
+const useWorkbench = () => {
+	const context = use(WorkbenchContext);
+	if (context === null) throw new Error("Workbench compound components must be rendered inside <Workbench>.");
+	return context;
+};
+//#endregion
+//#region src/components/Workbench/WorkbenchBar/WorkbenchBarEnd.tsx
+const WorkbenchBarEnd = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-slot": "workbench-bar-end",
+	className: cn("tw:col-start-3", "tw:row-start-1", "tw:flex", "tw:items-center", "tw:justify-end", "tw:gap-2", className)
+});
+//#endregion
+//#region src/components/Workbench/WorkbenchBar/WorkbenchBarMiddle.tsx
+const WorkbenchBarMiddle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-slot": "workbench-bar-middle",
+	className: cn("tw:col-start-2", "tw:row-start-1", "tw:flex", "tw:items-center", "tw:justify-center", "tw:gap-2", className)
+});
+//#endregion
+//#region src/components/Workbench/WorkbenchBar/WorkbenchBarStart.tsx
+const WorkbenchBarStart = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-slot": "workbench-bar-start",
+	className: cn("tw:col-start-1", "tw:row-start-1", "tw:flex", "tw:items-center", "tw:gap-2", className)
+});
+//#endregion
+//#region src/components/Workbench/WorkbenchBar/WorkbenchBar.tsx
+const WorkbenchBar = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:grid", "tw:grid-cols-[auto_1fr_auto]", "tw:items-center", "tw:gap-x-2", "tw:h-(--workbench-bar-height)", "tw:shrink-0", "tw:pointer-events-auto", "tw:border-t", "tw:border-sidebar-border", "tw:bg-sidebar", "tw:px-3", "tw:text-xs", className),
+	...props,
+	children
+});
+WorkbenchBar.Start = WorkbenchBarStart;
+WorkbenchBar.Middle = WorkbenchBarMiddle;
+WorkbenchBar.End = WorkbenchBarEnd;
+//#endregion
+//#region src/components/Workbench/WorkbenchFullScreenTrigger.tsx
+const WorkbenchFullScreenTrigger = ({ asChild = false, onClick, ...props }) => {
+	const { state, toggleFullScreen } = useWorkbench();
+	const isFullScreen = state === "full-screen";
+	const Comp = asChild ? Slot : "button";
+	const handleClick = (event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) toggleFullScreen();
+	};
+	return /* @__PURE__ */ jsx(Comp, {
+		...asChild ? {} : { type: "button" },
+		...props,
+		"data-slot": "workbench-full-screen-trigger",
+		"data-state": isFullScreen ? "on" : "off",
+		onClick: handleClick
+	});
+};
+//#endregion
+//#region src/components/Workbench/WorkbenchPanel/WorkbenchPanelResizeHandle.tsx
+const getMaxHeight = (panel) => {
+	const hostTop = panel.offsetParent?.getBoundingClientRect().top ?? 0;
+	return Math.max(panel.getBoundingClientRect().bottom - hostTop, 120);
+};
+const clampHeight = (height, panel) => Math.min(Math.max(height, 120), getMaxHeight(panel));
+const WorkbenchPanelResizeHandle = ({ panelRef }) => {
+	const { state, panelHeight, setPanelHeight, isResizing, setIsResizing, enterFullScreen, exitFullScreen } = useWorkbench();
+	const grabOffsetRef = useRef(0);
+	const previousStateRef = useRef(state);
+	const isFullScreenRequestedRef = useRef(state === "full-screen");
+	const enteredFullScreenByDragRef = useRef(false);
+	const exitedFullScreenByDragRef = useRef(false);
+	useEffect(() => {
+		if (!isResizing) return;
+		const { body } = document;
+		const { cursor, userSelect } = body.style;
+		body.style.cursor = "ns-resize";
+		body.style.userSelect = "none";
+		return () => {
+			body.style.cursor = cursor;
+			body.style.userSelect = userSelect;
+		};
+	}, [isResizing]);
+	useEffect(() => {
+		const previous = previousStateRef.current;
+		const panel = panelRef.current;
+		previousStateRef.current = state;
+		isFullScreenRequestedRef.current = state === "full-screen";
+		if (previous !== "full-screen" || state !== "expanded" || !panel) return;
+		const draggedIntoFullScreen = enteredFullScreenByDragRef.current;
+		const draggedOutOfFullScreen = exitedFullScreenByDragRef.current;
+		enteredFullScreenByDragRef.current = false;
+		exitedFullScreenByDragRef.current = false;
+		if (!draggedIntoFullScreen || draggedOutOfFullScreen) return;
+		setPanelHeight(clampHeight(getMaxHeight(panel) * WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO, panel));
+	}, [
+		state,
+		panelRef,
+		setPanelHeight
+	]);
+	const applyHeight = (height, panel) => {
+		const isFullScreen = isFullScreenRequestedRef.current;
+		if (height >= getMaxHeight(panel)) {
+			if (!isFullScreen) {
+				isFullScreenRequestedRef.current = true;
+				enteredFullScreenByDragRef.current = true;
+				enterFullScreen();
+			}
+			return;
+		}
+		if (isFullScreen) {
+			isFullScreenRequestedRef.current = false;
+			exitedFullScreenByDragRef.current = true;
+			exitFullScreen();
+		}
+		setPanelHeight(Math.max(height, 120));
+	};
+	const handlePointerDown = (event) => {
+		const panel = panelRef.current;
+		if (event.button !== 0 || !panel) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		grabOffsetRef.current = panel.getBoundingClientRect().top - event.clientY;
+		setIsResizing(true);
+	};
+	const handlePointerMove = (event) => {
+		const panel = panelRef.current;
+		if (!panel || !event.currentTarget.hasPointerCapture(event.pointerId)) return;
+		const top = event.clientY + grabOffsetRef.current;
+		applyHeight(panel.getBoundingClientRect().bottom - top, panel);
+	};
+	const handleKeyDown = (event) => {
+		const panel = panelRef.current;
+		if (!panel) return;
+		const step = event.shiftKey ? 96 : 24;
+		const delta = event.key === "ArrowUp" ? step : event.key === "ArrowDown" ? -step : 0;
+		if (delta === 0) return;
+		event.preventDefault();
+		applyHeight((isFullScreenRequestedRef.current ? getMaxHeight(panel) : panelHeight) + delta, panel);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		"aria-label": "Resize panel",
+		"aria-valuenow": Math.round(panelHeight),
+		"aria-valuemin": 120,
+		tabIndex: 0,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onLostPointerCapture: () => setIsResizing(false),
+		onKeyDown: handleKeyDown,
+		className: cn("tw:group/workbench-resize", "tw:absolute", "tw:inset-x-0", "tw:top-0", "tw:z-10", "tw:h-2", "tw:flex", "tw:justify-center", "tw:cursor-ns-resize", "tw:touch-none", "tw:outline-none"),
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("tw:flex", "tw:h-3", "tw:w-16", "tw:items-end", "tw:justify-center"),
+			children: /* @__PURE__ */ jsx("span", { className: cn("tw:h-1.5", "tw:w-16", "tw:rounded-full", "tw:bg-input", "tw:transition-colors", "tw:group-hover/workbench-resize:bg-muted-foreground", "tw:group-focus-visible/workbench-resize:bg-muted-foreground", "tw:group-data-[workbench-resizing=true]/workbench:bg-muted-foreground") })
+		})
+	});
+};
+//#endregion
+//#region src/components/Workbench/WorkbenchPanel/WorkbenchPanel.tsx
+const clearRadixMeasurementTransitionBlock = (panel) => {
+	if (panel) panel.style.transitionDuration = "";
+};
+const WorkbenchPanel = ({ className, children, ...props }) => {
+	const panelRef = useRef(null);
+	useEffect(() => clearRadixMeasurementTransitionBlock(panelRef.current), []);
+	return /* @__PURE__ */ jsxs(Collapsible.Content, {
+		ref: panelRef,
+		style: { "--workbench-panel-shadow": "0 -8px 24px -6px rgb(0 0 0 / 0.08)" },
+		className: cn("tw:absolute", "tw:inset-x-0", "tw:bottom-(--workbench-bar-height)", "tw:pointer-events-auto", "tw:h-(--workbench-panel-height)", "tw:max-h-[calc(100%-var(--workbench-bar-height))]", "tw:group-data-[workbench-state=full-screen]/workbench:h-[calc(100%-var(--workbench-bar-height))]", "tw:transition-[height]", "tw:duration-200", "tw:ease-out", "tw:group-data-[workbench-resizing=true]/workbench:transition-none", "tw:border-x", "tw:border-t", "tw:border-border", "tw:overflow-hidden", "tw:group-not-data-[workbench-state=full-screen]/workbench:rounded-t-2xl", "tw:group-not-data-[workbench-state=full-screen]/workbench:shadow-(--workbench-panel-shadow)"),
+		children: [/* @__PURE__ */ jsx(WorkbenchPanelResizeHandle, { panelRef }), /* @__PURE__ */ jsx("div", {
+			className: cn("tw:flex", "tw:flex-col", "tw:h-full", "tw:bg-background", className),
+			...props,
+			children
+		})]
+	});
+};
+//#endregion
+//#region src/components/Workbench/WorkbenchPanel/WorkbenchPanelActions.tsx
+const WorkbenchPanelActions = ({ className, asChild = false, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		...props,
+		"data-slot": "workbench-panel-actions",
+		className: cn("tw:col-start-2", "tw:row-start-1", "tw:flex", "tw:items-center", "tw:gap-2", className)
+	});
+};
+//#endregion
+//#region src/components/Workbench/WorkbenchPanel/WorkbenchPanelContent.tsx
+const WorkbenchPanelContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:min-h-0", "tw:flex-1", "tw:overflow-auto", className),
+	...props,
+	children
+});
+//#endregion
+//#region src/components/Workbench/WorkbenchPanel/WorkbenchPanelHeader.tsx
+const WorkbenchPanelHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("tw:grid", "tw:grid-cols-[1fr_auto]", "tw:items-center", "tw:gap-x-2", "tw:shrink-0", "tw:bg-sidebar", "tw:px-3", "tw:py-2", "tw:text-xs", className),
+	...props,
+	children
+});
+//#endregion
+//#region src/components/Workbench/WorkbenchPanel/WorkbenchPanelTitle.tsx
+const WorkbenchPanelTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	"data-slot": "workbench-panel-title",
+	className: cn("tw:col-start-1", "tw:flex", "tw:items-center", "tw:text-sm", "tw:font-semibold", "tw:text-foreground", className)
+});
+//#endregion
+//#region src/components/Workbench/Workbench.tsx
+const Workbench = ({ className, children, state: stateProp, defaultState = "collapsed", onStateChange, barHeight = DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, panelHeight: panelHeightProp, defaultPanelHeight = 320, onPanelHeightChange }) => {
+	const [state, setState] = useControllableState({
+		prop: stateProp,
+		defaultProp: defaultState,
+		onChange: onStateChange
+	});
+	const [panelHeight, setPanelHeight] = useControllableState({
+		prop: panelHeightProp,
+		defaultProp: defaultPanelHeight,
+		onChange: onPanelHeightChange
+	});
+	const [isResizing, setIsResizing] = useState(false);
+	const actions = useMemo(() => createWorkbenchActions(setState), [setState]);
+	const value = useMemo(() => ({
+		state,
+		setState,
+		panelHeight,
+		setPanelHeight,
+		isResizing,
+		setIsResizing,
+		...actions
+	}), [
+		state,
+		setState,
+		panelHeight,
+		setPanelHeight,
+		isResizing,
+		actions
+	]);
+	const clampedBarHeight = Math.max(barHeight, 1);
+	const clampedPanelHeight = Math.max(panelHeight, 120);
+	return /* @__PURE__ */ jsx(WorkbenchContext, {
+		value,
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			open: state !== "collapsed",
+			onOpenChange: (open) => setState(open ? "expanded" : "collapsed"),
+			"data-workbench-state": state,
+			"data-workbench-resizing": isResizing ? "true" : void 0,
+			style: {
+				"--workbench-bar-height": `${clampedBarHeight}rem`,
+				"--workbench-panel-height": `${clampedPanelHeight}px`
+			},
+			className: cn("tailwindcss-preflight", "tw:group/workbench", "tw:z-[52]", "tw:shrink-0", className),
+			children
+		})
+	});
+};
+Workbench.Bar = WorkbenchBar;
+Workbench.BarStart = WorkbenchBarStart;
+Workbench.BarMiddle = WorkbenchBarMiddle;
+Workbench.BarEnd = WorkbenchBarEnd;
+Workbench.Panel = WorkbenchPanel;
+Workbench.PanelHeader = WorkbenchPanelHeader;
+Workbench.PanelTitle = WorkbenchPanelTitle;
+Workbench.PanelActions = WorkbenchPanelActions;
+Workbench.PanelContent = WorkbenchPanelContent;
+Workbench.Trigger = Collapsible.Trigger;
+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-BzE-Vvd9.js.map

package/dist/Workbench-BzE-Vvd9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workbench-BzE-Vvd9.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    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      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":";;;;;;;AAAA,MAAa,sCAAsC;AAInD,MAAa,uCAAuC;AAEpD,MAAa,mCAAmC;AAIhD,MAAa,yCAAyC;;;ACiBtD,MAAa,0BACX,cACsB;CAEtB,cAAc,UAAU,UAAW,UAAU,cAAc,aAAa,KAAM;CAC9E,gBAAgB,SAAS,WAAW;CACpC,sBAAsB,UAAU,UAAW,UAAU,cAAc,aAAa,WAAY;CAE5F,uBAAuB,SAAS,aAAa;CAE7C,sBAAsB,UAAU,UAAW,UAAU,gBAAgB,aAAa,KAAM;CACxF,wBACE,UAAU,UAAW,UAAU,gBAAgB,aAAa,aAAc;AAC9E;AAEA,MAAa,mBAAmB,cAA4C,IAAI;;;;;AAMhF,MAAa,qBAA4C;CACvD,MAAM,UAAU,IAAI,gBAAgB;CAEpC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,oEAAoE;CAGtF,OAAO;AACT;;;AClDA,MAAa,mBAAmB,EAAE,WAAW,GAAG,YAC9C,oBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GAET,kBACA,kBAGA,WACA,mBACA,kBACA,YAEA,SACF;AACD,CAAA;;;ACjBH,MAAa,sBAAsB,EAAE,WAAW,GAAG,YACjD,oBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GAET,kBACA,kBAGA,WACA,mBACA,qBACA,YAEA,SACF;AACD,CAAA;;;ACjBH,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAChD,oBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GAET,kBACA,kBAGA,WACA,mBACA,YAEA,SACF;AACD,CAAA;;;ACZH,MAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,YACrD,oBAAC,OAAD;CACE,WAAW,GAET,WACA,gCACA,mBACA,cAGA,iCACA,eACA,0BAGA,eACA,4BACA,iBAGA,WAGA,cAEA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAGP,aAAa,QAAQ;AACrB,aAAa,SAAS;AACtB,aAAa,MAAM;;;ACpCnB,MAAa,8BAA8B,EAAE,UAAU,OAAO,SAAS,GAAG,YAAmB;CAC3F,MAAM,EAAE,OAAO,qBAAqB,aAAa;CACjD,MAAM,eAAe,UAAU;CAC/B,MAAM,OAAO,UAAU,OAAO;CAE9B,MAAM,eAAe,UAAyC;EAC5D,UAAU,KAAK;EAEf,IAAI,CAAC,MAAM,kBACT,iBAAiB;CAErB;CAEA,OACE,oBAAC,MAAD;EACE,GAAK,UAAU,CAAC,IAAI,EAAE,MAAM,SAAkB;EAC9C,GAAI;EACJ,aAAU;EACV,cAAY,eAAe,OAAO;EAClC,SAAS;CACV,CAAA;AAEL;;;AChBA,MAAM,gBAAgB,UAA0B;CAC9C,MAAM,UAAU,MAAM,cAAc,sBAAsB,CAAC,CAAC,OAAO;CAEnE,OAAO,KAAK,IAAI,MAAM,sBAAsB,CAAC,CAAC,SAAS,SAAA,GAAyC;AAClG;AAEA,MAAM,eAAe,QAAgB,UACnC,KAAK,IAAI,KAAK,IAAI,QAAA,GAAwC,GAAG,aAAa,KAAK,CAAC;AAElF,MAAa,8BAA8B,EAAE,eAAsB;CACjE,MAAM,EACJ,OACA,aACA,gBACA,YACA,eACA,iBACA,mBACE,aAAa;CACjB,MAAM,gBAAgB,OAAO,CAAC;CAC9B,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,2BAA2B,OAAO,UAAU,aAAa;CAC/D,MAAM,6BAA6B,OAAO,KAAK;CAC/C,MAAM,4BAA4B,OAAO,KAAK;CAE9C,gBAAgB;EACd,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,SAAS;EACjB,MAAM,EAAE,QAAQ,eAAe,KAAK;EAEpC,KAAK,MAAM,SAAS;EACpB,KAAK,MAAM,aAAa;EAExB,aAAa;GACX,KAAK,MAAM,SAAS;GACpB,KAAK,MAAM,aAAa;EAC1B;CACF,GAAG,CAAC,UAAU,CAAC;CAEf,gBAAgB;EACd,MAAM,WAAW,iBAAiB;EAClC,MAAM,QAAQ,SAAS;EAEvB,iBAAiB,UAAU;EAC3B,yBAAyB,UAAU,UAAU;EAE7C,IAAI,aAAa,iBAAiB,UAAU,cAAc,CAAC,OAAO;EAElE,MAAM,wBAAwB,2BAA2B;EACzD,MAAM,yBAAyB,0BAA0B;EAEzD,2BAA2B,UAAU;EACrC,0BAA0B,UAAU;EAEpC,IAAI,CAAC,yBAAyB,wBAAwB;EAEtD,eACE,YAAY,aAAa,KAAK,IAAI,wCAAwC,KAAK,CACjF;CACF,GAAG;EAAC;EAAO;EAAU;CAAc,CAAC;CAEpC,MAAM,eAAe,QAAgB,UAA0B;EAC7D,MAAM,eAAe,yBAAyB;EAE9C,IAAI,UAAU,aAAa,KAAK,GAAG;GACjC,IAAI,CAAC,cAAc;IACjB,yBAAyB,UAAU;IACnC,2BAA2B,UAAU;IACrC,gBAAgB;GAClB;GAEA;EACF;EAEA,IAAI,cAAc;GAChB,yBAAyB,UAAU;GACnC,0BAA0B,UAAU;GACpC,eAAe;EACjB;EAEA,eAAe,KAAK,IAAI,QAAA,GAAwC,CAAC;CACnE;CAEA,MAAM,qBAAqB,UAAwC;EACjE,MAAM,QAAQ,SAAS;EAEvB,IAAI,MAAM,WAAW,KAAK,CAAC,OAAO;EAElC,MAAM,eAAe;EACrB,MAAM,cAAc,kBAAkB,MAAM,SAAS;EACrD,cAAc,UAAU,MAAM,sBAAsB,CAAC,CAAC,MAAM,MAAM;EAClE,cAAc,IAAI;CACpB;CAEA,MAAM,qBAAqB,UAAwC;EACjE,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,SAAS,CAAC,MAAM,cAAc,kBAAkB,MAAM,SAAS,GAAG;EAEvE,MAAM,MAAM,MAAM,UAAU,cAAc;EAE1C,YAAY,MAAM,sBAAsB,CAAC,CAAC,SAAS,KAAK,KAAK;CAC/D;CAEA,MAAM,iBAAiB,UAAyC;EAC9D,MAAM,QAAQ,SAAS;EAEvB,IAAI,CAAC,OAAO;EAEZ,MAAM,OAAO,MAAM,WAAA,KACqB;EAExC,MAAM,QAAQ,MAAM,QAAQ,YAAY,OAAO,MAAM,QAAQ,cAAc,CAAC,OAAO;EAEnF,IAAI,UAAU,GAAG;EAEjB,MAAM,eAAe;EACrB,aACG,yBAAyB,UAAU,aAAa,KAAK,IAAI,eAAe,OACzE,KACF;CACF;CAEA,OACE,oBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,cAAW;EACX,iBAAe,KAAK,MAAM,WAAW;EACrC,iBAAA;EACA,UAAU;EACV,eAAe;EACf,eAAe;EACf,4BAA4B,cAAc,KAAK;EAC/C,WAAW;EACX,WAAW,GAET,6BAGA,eACA,gBACA,YACA,WAGA,UAGA,WACA,qBAGA,uBACA,iBAGA,iBACF;EAEA,UAAA,oBAAC,QAAD;GACE,WAAW,GAGT,WACA,UACA,WACA,gBACA,mBACF;GAEA,UAAA,oBAAC,QAAD,EACE,WAAW,GAET,YACA,WAGA,mBACA,eACA,wBACA,uDACA,+DACA,uEACF,EACD,CAAA;EACG,CAAA;CACH,CAAA;AAET;;;ACnMA,MAAM,wCAAwC,UAAiC;CAC7E,IAAI,OAAO,MAAM,MAAM,qBAAqB;AAC9C;AAEA,MAAa,kBAAkB,EAAE,WAAW,UAAU,GAAG,YAAmB;CAC1E,MAAM,WAAW,OAAuB,IAAI;CAE5C,gBAAgB,qCAAqC,SAAS,OAAO,GAAG,CAAC,CAAC;CAE1E,OACE,qBAAC,YAAY,SAAb;EACE,KAAK;EACL,OAAO,EAAE,4BAA4B,qCAAqC;EAC1E,WAAW,GAET,eACA,gBACA,sCACA,0BAIA,mCACA,qDACA,oGAGA,0BACA,mBACA,eACA,qEAGA,eACA,eACA,oBAGA,sBAGA,2EACA,6FACF;EAjCF,UAAA,CAmCE,oBAAC,4BAAD,EAAsC,SAAW,CAAA,GAEjD,oBAAC,OAAD;GACE,WAAW,GAET,WACA,eACA,aAGA,oBAEA,SACF;GACA,GAAI;GAEH;EACE,CAAA,CACc;;AAEzB;;;AClEA,MAAa,yBAAyB,EAAE,WAAW,UAAU,OAAO,GAAG,YAAmB;CAGxF,OACE,oBAHW,UAAU,OAAO,OAG5B;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAET,kBACA,kBAGA,WACA,mBACA,YAEA,SACF;CACD,CAAA;AAEL;;;ACxBA,MAAa,yBAAyB,EAAE,WAAW,UAAU,GAAG,YAC9D,oBAAC,OAAD;CACE,WAAW,GAET,cACA,aACA,oBAEA,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;ACbP,MAAa,wBAAwB,EAAE,WAAW,UAAU,GAAG,YAC7D,oBAAC,OAAD;CACE,WAAW,GAET,WACA,2BACA,mBACA,cAGA,eAGA,iBAGA,WACA,WAGA,cAEA,SACF;CACA,GAAI;CAEH;AACE,CAAA;;;AC3BP,MAAa,uBAAuB,EAAE,WAAW,GAAG,YAClD,oBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GAET,kBAGA,WACA,mBAGA,cACA,oBACA,sBAEA,SACF;AACD,CAAA;;;ACiBH,MAAa,aAAa,EACxB,WACA,UACA,OAAO,WACP,eAAe,aACf,eACA,YAAY,qCACZ,aAAa,iBACb,qBAAA,KACA,0BACW;CACX,MAAM,CAAC,OAAO,YAAY,qBAAqC;EAC7D,MAAM;EACN,aAAa;EACb,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,aAAa,kBAAkB,qBAA6B;EACjE,MAAM;EACN,aAAa;EACb,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,UAAU,cAAc,uBAAuB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAC1E,MAAM,QAAQ,eACL;EACL;EACA;EACA;EACA;EACA;EACA;EACA,GAAG;CACL,IACA;EAAC;EAAO;EAAU;EAAa;EAAgB;EAAY;CAAO,CACpE;CAEA,MAAM,mBAAmB,KAAK,IAAI,WAAA,CAA0C;CAC5E,MAAM,qBAAqB,KAAK,IAAI,aAAA,GAA6C;CAEjF,OACE,oBAAC,kBAAD;EAAyB;EACvB,UAAA,oBAAC,aAAD;GACE,MAAM,UAAU;GAChB,eAAe,SAAS,SAAS,OAAO,aAAa,WAAW;GAChE,wBAAsB;GACtB,2BAAyB,aAAa,SAAS,KAAA;GAC/C,OACE;IACE,0BAA0B,GAAG,iBAAiB;IAC9C,4BAA4B,GAAG,mBAAmB;GACpD;GAEF,WAAW,GAET,yBAGA,sBAKA,aAGA,eAEA,SACF;GAEC;EACU,CAAA;CACG,CAAA;AAEtB;AAEA,UAAU,MAAM;AAChB,UAAU,WAAW;AACrB,UAAU,YAAY;AACtB,UAAU,SAAS;AAEnB,UAAU,QAAQ;AAClB,UAAU,cAAc;AACxB,UAAU,aAAa;AACvB,UAAU,eAAe;AACzB,UAAU,eAAe;AAEzB,UAAU,UAAU,YAAY;AAChC,UAAU,oBAAoB"}

package/dist/ZoomableSvg-DG9PnAm8.js

@@ -0,0 +1,248 @@
+import { cn } from "./classNames-BzrkDnOD.js";
+import { Tooltip } from "./utils-D0c5VAyF.js";
+import { Maximize2, Minimize2 } from "./icons-Cek151jC.js";
+import { Button } from "./Button-nzmDNS2q.js";
+import { ClipboardButton } from "./ClipboardButton-ez5V3fkk.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/ZoomableSvg.tsx
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const ZOOM_STEP = .1;
+const ZoomableSvg = ({ html, copyText, className, allowForeignObject, renderActions }) => {
+	const safeHtml = useMemo(() => DOMPurify.sanitize(html, {
+		USE_PROFILES: {
+			svg: true,
+			svgFilters: true
+		},
+		...allowForeignObject ? { ADD_TAGS: ["foreignObject"] } : {}
+	}), [html, allowForeignObject]);
+	const containerRef = useRef(null);
+	const [scale, setScale] = useState(1);
+	const [translate, setTranslate] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	useEffect(() => {
+		if (!isFullscreen) return;
+		const onKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.stopPropagation();
+				setIsFullscreen(false);
+			}
+		};
+		document.addEventListener("keydown", onKeyDown, { capture: true });
+		return () => document.removeEventListener("keydown", onKeyDown, { capture: true });
+	}, [isFullscreen]);
+	const dragRef = useRef(null);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const onWheel = (e) => {
+			if (!e.ctrlKey && !e.metaKey) return;
+			e.preventDefault();
+			const delta = e.deltaY > 0 ? -.1 : ZOOM_STEP;
+			setScale((s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s + delta)));
+		};
+		el.addEventListener("wheel", onWheel, { passive: false });
+		return () => el.removeEventListener("wheel", onWheel);
+	}, [isFullscreen]);
+	const didDragRef = useRef(false);
+	const handleMouseDown = useCallback((e) => {
+		if (e.button !== 0) return;
+		e.preventDefault();
+		didDragRef.current = false;
+		dragRef.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			startTx: translate.x,
+			startTy: translate.y
+		};
+	}, [translate]);
+	const handleMouseMove = useCallback((e) => {
+		if (!dragRef.current) return;
+		didDragRef.current = true;
+		setTranslate({
+			x: dragRef.current.startTx + e.clientX - dragRef.current.startX,
+			y: dragRef.current.startTy + e.clientY - dragRef.current.startY
+		});
+	}, []);
+	const handleMouseUp = useCallback(() => {
+		dragRef.current = null;
+	}, []);
+	const handleReset = useCallback(() => {
+		setScale(1);
+		setTranslate({
+			x: 0,
+			y: 0
+		});
+	}, []);
+	const isZoomed = Math.abs(scale - 1) > .001 || translate.x !== 0 || translate.y !== 0;
+	const handleClick = useCallback((e) => {
+		if (didDragRef.current) e.stopPropagation();
+	}, []);
+	const stopPropagation = useCallback((e) => {
+		e.stopPropagation();
+	}, []);
+	const diagramContent = /* @__PURE__ */ jsxs("div", {
+		role: "presentation",
+		className: cn("tw:group/zoom tw:relative", isFullscreen && "tw:h-full"),
+		onClick: handleClick,
+		children: [/* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			ref: containerRef,
+			className: cn("tw:overflow-hidden tw:cursor-grab tw:active:cursor-grabbing tw:p-3", isFullscreen && "tw:h-full"),
+			onMouseDown: handleMouseDown,
+			onMouseMove: handleMouseMove,
+			onMouseUp: handleMouseUp,
+			onMouseLeave: handleMouseUp,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn("tw:flex tw:justify-center tw:origin-center", isFullscreen && "tw:h-full tw:[&>svg]:h-full"),
+				style: { transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` },
+				dangerouslySetInnerHTML: { __html: safeHtml }
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			role: "presentation",
+			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",
+			onClick: stopPropagation,
+			children: [
+				isZoomed && /* @__PURE__ */ jsx(Tooltip, {
+					tooltip: "Reset zoom",
+					placement: "top",
+					triggerAsChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "small",
+						variant: "outline",
+						onClick: handleReset,
+						children: "Reset"
+					})
+				}),
+				copyText && /* @__PURE__ */ jsx(ClipboardButton, {
+					text: copyText,
+					tooltip: "Copy code",
+					size: "icon-sm",
+					variant: "outline"
+				}),
+				renderActions?.(safeHtml),
+				/* @__PURE__ */ jsx(Tooltip, {
+					tooltip: isFullscreen ? "Exit fullscreen" : "Fullscreen",
+					placement: "top",
+					triggerAsChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						size: "icon-sm",
+						variant: "outline",
+						"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
+						onClick: () => setIsFullscreen((f) => !f),
+						children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "tw:size-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "tw:size-4" })
+					})
+				})
+			]
+		})]
+	});
+	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
+	}), document.body);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("tw:overflow-hidden tw:rounded-md tw:border tw:border-border tw:bg-muted", className),
+		children: diagramContent
+	});
+};
+//#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-DG9PnAm8.js.map