@keboola/design 9.1.0 → 11.0.0

package/dist/chunk-F3FOFY2P.js

@@ -0,0 +1,124 @@
+import { useArgoDesign } from './chunk-WETKNYZX.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var cardClassnames = cva(
+  ["tw:flex", "tw:flex-col", "tw:rounded-lg", "tw:bg-card", "tw:text-card-foreground"],
+  {
+    defaultVariants: {
+      padding: "small"
+    },
+    variants: {
+      bordered: {
+        true: "tw:border tw:border-solid tw:border-neutral-200 tw:data-[argo=true]:border-border",
+        false: "tw:shadow-raised tw:data-[argo=true]:shadow-sm"
+      },
+      // `none` also drops the row gap: the slots own their own padding in that
+      // mode, so a gap would double-space a `Card.Header divider` against the
+      // content it is already ruled off from.
+      padding: {
+        none: "tw:p-0",
+        small: "tw:gap-4 tw:px-6 tw:py-4",
+        medium: "tw:gap-4 tw:p-7",
+        large: "tw:gap-4 tw:p-8"
+      }
+    }
+  }
+);
+var cardHeaderClassnames = cva("tw:flex", {
+  defaultVariants: {
+    divider: false,
+    layout: "row"
+  },
+  variants: {
+    // A divider only reads correctly full-bleed, which in turn only happens on an
+    // unpadded root — so it carries the header's own padding rather than relying
+    // on `Card padding`.
+    //
+    // No `border-solid` here, unlike the `bordered` root: that sets the style on
+    // all four sides, and with only `border-b` supplying a width the other three
+    // fall back to the CSS initial `medium` (3px) and draw a box round the header.
+    // `border-b` already sets its own side's style.
+    // `min-h-16` keeps the band a consistent height whether the header holds just a
+    // title or a title plus a button — with padding alone the height tracks the
+    // tallest child, so an action button made the band 9px taller than a bare title.
+    // Padding stays small enough that both cases land on the min rather than over it.
+    divider: {
+      true: "tw:min-h-16 tw:border-b tw:border-neutral-200 tw:px-6 tw:py-2 tw:data-[argo=true]:border-border",
+      false: ""
+    },
+    layout: {
+      row: "tw:items-center tw:justify-between tw:gap-4",
+      inline: "tw:items-center tw:gap-3",
+      stack: "tw:flex-col tw:gap-1.5"
+    }
+  }
+});
+var cardContentClassnames = cva("", {
+  defaultVariants: {
+    padded: false
+  },
+  variants: {
+    padded: {
+      true: "tw:px-6 tw:py-5",
+      false: ""
+    }
+  }
+});
+var cardTitleClassnames = cn(
+  "tw:m-0",
+  "tw:leading-6",
+  "tw:font-medium",
+  "tw:text-base",
+  "tw:text-card-foreground"
+);
+var CardContent = ({ children, className, padded = false, ...rest }) => (
+  // `|| undefined` so an unpadded, unstyled content slot stays attribute-free
+  // rather than rendering `class=""`.
+  /* @__PURE__ */ jsx("div", { ...rest, className: cardContentClassnames({ className, padded }) || void 0, children })
+);
+var CardHeader = ({
+  children,
+  className,
+  divider = false,
+  layout = "row",
+  ...rest
+}) => {
+  const renderArgo = useArgoDesign();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-argo": renderArgo,
+      className: cardHeaderClassnames({ className, divider, layout }),
+      children
+    }
+  );
+};
+var CardTitle = ({ children, className, as: Tag = "h3", ...rest }) => /* @__PURE__ */ jsx(Tag, { className: cn(cardTitleClassnames, className), ...rest, children });
+var Card = ({
+  children,
+  className,
+  bordered = false,
+  padding = "small",
+  ...rest
+}) => {
+  const renderArgo = useArgoDesign();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-argo": renderArgo,
+      className: cardClassnames({ className, bordered, padding }),
+      children
+    }
+  );
+};
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Title = CardTitle;
+
+export { Card };
+//# sourceMappingURL=chunk-F3FOFY2P.js.map
+//# sourceMappingURL=chunk-F3FOFY2P.js.map

package/dist/chunk-F3FOFY2P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/styles.ts","../src/components/Card/CardContent.tsx","../src/components/Card/CardHeader.tsx","../src/components/Card/CardTitle.tsx","../src/components/Card/Card.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-F3FOFY2P.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nexport const cardClassnames = cva(\n  ['tw:flex', 'tw:flex-col', 'tw:rounded-lg', 'tw:bg-card', 'tw:text-card-foreground'],\n  {\n    defaultVariants: {\n      padding: 'small',\n    },\n    variants: {\n      bordered: {\n        true: 'tw:border tw:border-solid tw:border-neutral-200 tw:data-[argo=true]:border-border',\n        false: 'tw:shadow-raised tw:data-[argo=true]:shadow-sm',\n      },\n      // `none` also drops the row gap: the slots own their own padding in that\n      // mode, so a gap would double-space a `Card.Header divider` against the\n      // content it is already ruled off from.\n      padding: {\n        none: 'tw:p-0',\n        small: 'tw:gap-4 tw:px-6 tw:py-4',\n        medium: 'tw:gap-4 tw:p-7',\n        large: 'tw:gap-4 tw:p-8',\n      },\n    },\n  },\n);\n\nexport const cardHeaderClassnames = cva('tw:flex', {\n  defaultVariants: {\n    divider: false,\n    layout: 'row',\n  },\n  variants: {\n    // A divider only reads correctly full-bleed, which in turn only happens on an\n    // unpadded root — so it carries the header's own padding rather than relying\n    // on `Card padding`.\n    //\n    // No `border-solid` here, unlike the `bordered` root: that sets the style on\n    // all four sides, and with only `border-b` supplying a width the other three\n    // fall back to the CSS initial `medium` (3px) and draw a box round the header.\n    // `border-b` already sets its own side's style.\n    // `min-h-16` keeps the band a consistent height whether the header holds just a\n    // title or a title plus a button — with padding alone the height tracks the\n    // tallest child, so an action button made the band 9px taller than a bare title.\n    // Padding stays small enough that both cases land on the min rather than over it.\n    divider: {\n      true: 'tw:min-h-16 tw:border-b tw:border-neutral-200 tw:px-6 tw:py-2 tw:data-[argo=true]:border-border',\n      false: '',\n    },\n    layout: {\n      row: 'tw:items-center tw:justify-between tw:gap-4',\n      inline: 'tw:items-center tw:gap-3',\n      stack: 'tw:flex-col tw:gap-1.5',\n    },\n  },\n});\n\nexport const cardContentClassnames = cva('', {\n  defaultVariants: {\n    padded: false,\n  },\n  variants: {\n    padded: {\n      true: 'tw:px-6 tw:py-5',\n      false: '',\n    },\n  },\n});\n\nexport const cardTitleClassnames = cn(\n  'tw:m-0',\n  'tw:leading-6',\n  'tw:font-medium',\n  'tw:text-base',\n  'tw:text-card-foreground',\n);\n","import type { HTMLAttributes } from 'react';\n\nimport { cardContentClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /** Applies the standard body padding. Use with `Card padding=\"none\"`, where the\n   *  root adds none — otherwise the padding is doubled. */\n  padded?: boolean;\n};\n\nexport const CardContent = ({ children, className, padded = false, ...rest }: Props) => (\n  // `|| undefined` so an unpadded, unstyled content slot stays attribute-free\n  // rather than rendering `class=\"\"`.\n  <div {...rest} className={cardContentClassnames({ className, padded }) || undefined}>\n    {children}\n  </div>\n);\n","import type { HTMLAttributes } from 'react';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { cardHeaderClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n  /** Adds a bottom rule, the header's own padding, and a 64px height floor so the\n   *  band stays the same height with or without an action button. The rule spans the\n   *  full card width — pair with `Card padding=\"none\"`; on a padded root it is inset. */\n  divider?: boolean;\n  /** How the header distributes its children. `row` (default) pushes them apart —\n   *  title left, actions right. `inline` keeps them together on one line, for a\n   *  title with an adornment such as an icon or badge. `stack` puts a description\n   *  under the title. */\n  layout?: 'row' | 'inline' | 'stack';\n};\n\nexport const CardHeader = ({\n  children,\n  className,\n  divider = false,\n  layout = 'row',\n  ...rest\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <div\n      {...rest}\n      data-argo={renderArgo}\n      className={cardHeaderClassnames({ className, divider, layout })}\n    >\n      {children}\n    </div>\n  );\n};\n","import type { HTMLAttributes } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { cardTitleClassnames } from './styles';\n\ntype HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\ntype Props = HTMLAttributes<HTMLHeadingElement> & {\n  /** Heading tag to render. Defaults to `h3`; set explicitly to avoid a heading-order skip\n   *  (e.g. `as=\"h2\"` when the Card sits directly under a page's `h1`). */\n  as?: HeadingLevel;\n};\n\nexport const CardTitle = ({ children, className, as: Tag = 'h3', ...rest }: Props) => (\n  <Tag className={cn(cardTitleClassnames, className)} {...rest}>\n    {children}\n  </Tag>\n);\n","import type { HTMLAttributes } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { CardContent } from './CardContent';\nimport { CardHeader } from './CardHeader';\nimport { CardTitle } from './CardTitle';\nimport { cardClassnames } from './styles';\n\ntype Props = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardClassnames>;\n\nexport const Card = ({\n  children,\n  className,\n  bordered = false,\n  padding = 'small',\n  ...rest\n}: Props) => {\n  const renderArgo = useArgoDesign();\n  return (\n    <div\n      {...rest}\n      data-argo={renderArgo}\n      className={cardClassnames({ className, bordered, padding })}\n    >\n      {children}\n    </div>\n  );\n};\n\nCard.Header = CardHeader;\nCard.Content = CardContent;\nCard.Title = CardTitle;\n"]}

package/dist/chunk-F6BTWFOC.js

@@ -0,0 +1,507 @@
+import { Collapsible } from './chunk-FVPGQ6UE.js';
+import { useControllableState } from './chunk-WKAUEL6I.js';
+import { cn } from './chunk-LXLIQ2D6.js';
+import { createContext, use, useState, useMemo, useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+
+// src/components/Workbench/constants.ts
+var DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM = 2.75;
+var MIN_WORKBENCH_BAR_HEIGHT_IN_REM = 1;
+var DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX = 320;
+var MIN_WORKBENCH_PANEL_HEIGHT_IN_PX = 120;
+var WORKBENCH_PANEL_RESIZE_STEP_IN_PX = 24;
+var WORKBENCH_PANEL_FULL_SCREEN_EXIT_RATIO = 0.8;
+var createWorkbenchActions = (setState) => ({
+  // Opening an already-open panel leaves full screen alone.
+  expand: () => setState((state) => state === "collapsed" ? "expanded" : state),
+  collapse: () => setState("collapsed"),
+  toggleExpanded: () => setState((state) => state === "collapsed" ? "expanded" : "collapsed"),
+  enterFullScreen: () => setState("full-screen"),
+  // Exiting returns to the open panel, never to a closed one — this is a restore, not a collapse.
+  exitFullScreen: () => setState((state) => state === "full-screen" ? "expanded" : state),
+  toggleFullScreen: () => setState((state) => state === "full-screen" ? "expanded" : "full-screen")
+});
+var WorkbenchContext = createContext(null);
+var useWorkbench = () => {
+  const context = use(WorkbenchContext);
+  if (context === null) {
+    throw new Error("Workbench compound components must be rendered inside <Workbench>.");
+  }
+  return context;
+};
+var WorkbenchBarEnd = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    "data-slot": "workbench-bar-end",
+    className: cn(
+      // grid placement
+      "tw:col-start-3",
+      "tw:row-start-1",
+      // layout
+      "tw:flex",
+      "tw:items-center",
+      "tw:justify-end",
+      "tw:gap-2",
+      className
+    )
+  }
+);
+var WorkbenchBarMiddle = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    "data-slot": "workbench-bar-middle",
+    className: cn(
+      // grid placement
+      "tw:col-start-2",
+      "tw:row-start-1",
+      // layout
+      "tw:flex",
+      "tw:items-center",
+      "tw:justify-center",
+      "tw:gap-2",
+      className
+    )
+  }
+);
+var WorkbenchBarStart = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    "data-slot": "workbench-bar-start",
+    className: cn(
+      // grid placement
+      "tw:col-start-1",
+      "tw:row-start-1",
+      // layout
+      "tw:flex",
+      "tw:items-center",
+      "tw:gap-2",
+      className
+    )
+  }
+);
+var WorkbenchBar = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      // layout
+      "tw:grid",
+      "tw:grid-cols-[auto_1fr_auto]",
+      "tw:items-center",
+      "tw:gap-x-2",
+      // sizing
+      "tw:h-(--workbench-bar-height)",
+      "tw:shrink-0",
+      "tw:pointer-events-auto",
+      // surface
+      "tw:border-t",
+      "tw:border-sidebar-border",
+      "tw:bg-sidebar",
+      // spacing
+      "tw:px-3",
+      // typography
+      "tw:text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+WorkbenchBar.Start = WorkbenchBarStart;
+WorkbenchBar.Middle = WorkbenchBarMiddle;
+WorkbenchBar.End = WorkbenchBarEnd;
+var 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
+    }
+  );
+};
+var getMaxHeight = (panel) => {
+  const hostTop = panel.offsetParent?.getBoundingClientRect().top ?? 0;
+  return Math.max(panel.getBoundingClientRect().bottom - hostTop, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX);
+};
+var clampHeight = (height, panel) => Math.min(Math.max(height, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX), getMaxHeight(panel));
+var 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, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX));
+  };
+  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 ? WORKBENCH_PANEL_RESIZE_STEP_IN_PX * 4 : WORKBENCH_PANEL_RESIZE_STEP_IN_PX;
+    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": MIN_WORKBENCH_PANEL_HEIGHT_IN_PX,
+      tabIndex: 0,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onLostPointerCapture: () => setIsResizing(false),
+      onKeyDown: handleKeyDown,
+      className: cn(
+        // group
+        "tw:group/workbench-resize",
+        // positioning — the panel is the positioned ancestor
+        "tw:absolute",
+        "tw:inset-x-0",
+        "tw:top-0",
+        "tw:z-10",
+        // sizing
+        "tw:h-2",
+        // layout — the whole strip grabs, only the pill shows
+        "tw:flex",
+        "tw:justify-center",
+        // affordance
+        "tw:cursor-ns-resize",
+        "tw:touch-none",
+        // focus
+        "tw:outline-none"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            // layout — hangs below the strip so the pill sits clear of the top edge, and
+            // grabs there too since the events bubble to the strip
+            "tw:flex",
+            "tw:h-3",
+            "tw:w-16",
+            "tw:items-end",
+            "tw:justify-center"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                // sizing
+                "tw:h-1.5",
+                "tw:w-16",
+                // surface
+                "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"
+              )
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var clearRadixMeasurementTransitionBlock = (panel) => {
+  if (panel) panel.style.transitionDuration = "";
+};
+var 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(
+        // positioning — against the host, which must be a positioned element
+        "tw:absolute",
+        "tw:inset-x-0",
+        "tw:bottom-(--workbench-bar-height)",
+        "tw:pointer-events-auto",
+        // height — the drag-controlled var, capped at the space above the bar so the panel
+        // never covers it, whatever height was dragged or restored
+        "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))]",
+        // height transition
+        "tw:transition-[height]",
+        "tw:duration-200",
+        "tw:ease-out",
+        "tw:group-data-[workbench-resizing=true]/workbench:transition-none",
+        // surface
+        "tw:border-x",
+        "tw:border-t",
+        "tw:border-border",
+        // clipping
+        "tw:overflow-hidden",
+        // raised edge
+        "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(
+              // layout
+              "tw:flex",
+              "tw:flex-col",
+              "tw:h-full",
+              // surface
+              "tw:bg-background",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+var WorkbenchPanelActions = ({ className, asChild = false, ...props }) => {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...props,
+      "data-slot": "workbench-panel-actions",
+      className: cn(
+        // grid placement
+        "tw:col-start-2",
+        "tw:row-start-1",
+        // layout
+        "tw:flex",
+        "tw:items-center",
+        "tw:gap-2",
+        className
+      )
+    }
+  );
+};
+var WorkbenchPanelContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      // layout
+      "tw:min-h-0",
+      "tw:flex-1",
+      "tw:overflow-auto",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var WorkbenchPanelHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      // layout
+      "tw:grid",
+      "tw:grid-cols-[1fr_auto]",
+      "tw:items-center",
+      "tw:gap-x-2",
+      // sizing
+      "tw:shrink-0",
+      // surface
+      "tw:bg-sidebar",
+      // spacing
+      "tw:px-3",
+      "tw:py-2",
+      // typography
+      "tw:text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var WorkbenchPanelTitle = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    "data-slot": "workbench-panel-title",
+    className: cn(
+      // grid placement
+      "tw:col-start-1",
+      // layout
+      "tw:flex",
+      "tw:items-center",
+      // typography
+      "tw:text-sm",
+      "tw:font-semibold",
+      "tw:text-foreground",
+      className
+    )
+  }
+);
+var Workbench = ({
+  className,
+  children,
+  state: stateProp,
+  defaultState = "collapsed",
+  onStateChange,
+  barHeight = DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM,
+  panelHeight: panelHeightProp,
+  defaultPanelHeight = DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX,
+  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, MIN_WORKBENCH_BAR_HEIGHT_IN_REM);
+  const clampedPanelHeight = Math.max(panelHeight, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX);
+  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(
+        // reset
+        "tailwindcss-preflight",
+        // group
+        "tw:group/workbench",
+        // positioning — above the chrome layer (`z-50`) *and* above a `Sidebar` in
+        // `expand-on-hover`, which takes `z-51` to float over content; the dock outranks both.
+        // Overlays (Modal / Sheet / Popover / Tooltip) live at 1051+, so they still win.
+        "tw:z-[52]",
+        // layout
+        "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;
+
+export { DEFAULT_WORKBENCH_BAR_HEIGHT_IN_REM, DEFAULT_WORKBENCH_PANEL_HEIGHT_IN_PX, MIN_WORKBENCH_PANEL_HEIGHT_IN_PX, Workbench, useWorkbench };
+//# sourceMappingURL=chunk-F6BTWFOC.js.map
+//# sourceMappingURL=chunk-F6BTWFOC.js.map