@mastra/playground-ui 37.0.1-alpha.2 → 37.1.0-alpha.4

package/dist/resize/collapsible-panel.cjs.js

@@ -0,0 +1,261 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const React = require('react');
+const reactResizablePanels = require('react-resizable-panels');
+const resize_panelEdgeIcon = require('./panel-edge-icon.cjs.js');
+const resize_panelIconButton = require('./panel-icon-button.cjs.js');
+const resize_useClampedElementCursor = require('./use-clamped-element-cursor.cjs.js');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+const icons_Icon = require('../icons/Icon.cjs.js');
+
+const PILL_EDGE_MARGIN = 22;
+const usePanelSizeTransitions = (elementRef) => {
+  const [booted, setBooted] = React.useState(false);
+  const bootedRef = React.useRef(false);
+  const bootScheduled = React.useRef(false);
+  const enableSizeTransitionsRef = React.useRef(() => {
+  });
+  const enableSizeTransitions = React.useCallback(() => {
+    enableSizeTransitionsRef.current();
+  }, []);
+  const boot = React.useCallback(() => {
+    if (bootScheduled.current) return;
+    bootScheduled.current = true;
+    requestAnimationFrame(() => {
+      bootedRef.current = true;
+      setBooted(true);
+      enableSizeTransitionsRef.current();
+    });
+  }, []);
+  React.useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const group = elementRef.current?.parentElement;
+    if (!group) return;
+    const panels = Array.from(group.children).filter(
+      (child) => child instanceof HTMLElement && child.hasAttribute("data-panel")
+    );
+    const separators = Array.from(group.children).filter(
+      (child) => child instanceof HTMLElement && child.hasAttribute("data-separator")
+    );
+    const enable = () => {
+      if (!bootedRef.current) return;
+      panels.forEach(
+        (panel) => panel.style.transition = "flex-grow 300ms var(--ease-out-custom, ease), flex-basis 300ms var(--ease-out-custom, ease)"
+      );
+    };
+    const disable = () => panels.forEach((panel) => panel.style.transition = "none");
+    enable();
+    enableSizeTransitionsRef.current = enable;
+    separators.forEach((separator) => separator.addEventListener("pointerdown", disable));
+    window.addEventListener("pointerup", enable);
+    window.addEventListener("pointercancel", enable);
+    return () => {
+      enableSizeTransitionsRef.current = () => {
+      };
+      separators.forEach((separator) => separator.removeEventListener("pointerdown", disable));
+      window.removeEventListener("pointerup", enable);
+      window.removeEventListener("pointercancel", enable);
+      panels.forEach((panel) => panel.style.transition = "");
+    };
+  }, [elementRef]);
+  return { booted, boot, enableSizeTransitions };
+};
+const useCollapsedEdgePill = ({
+  collapsed,
+  direction,
+  elementRef
+}) => {
+  const expandButtonRef = React.useRef(null);
+  const pillRef = React.useRef(null);
+  const {
+    beginTracking: beginPillTracking,
+    elementRef: stripRef,
+    endTracking: endPillTracking,
+    updateTracking: updatePillTracking
+  } = resize_useClampedElementCursor.useClampedElementCursor({
+    axis: "y",
+    margin: PILL_EDGE_MARGIN,
+    variableName: "--pill-y"
+  });
+  const setEdgeHovered = React.useCallback((hovered) => {
+    const expandButton = expandButtonRef.current;
+    const pill = pillRef.current;
+    if (expandButton) expandButton.dataset.edgeHovered = hovered ? "true" : "false";
+    if (pill) pill.dataset.edgeHovered = hovered ? "true" : "false";
+  }, []);
+  const spawnPill = React.useCallback(
+    (point) => {
+      const pill = pillRef.current;
+      if (!pill) return;
+      beginPillTracking(point);
+      pill.style.transitionProperty = "opacity, translate";
+      requestAnimationFrame(() => {
+        pill.style.transitionProperty = "";
+      });
+    },
+    [beginPillTracking]
+  );
+  const trackPillPosition = React.useCallback(
+    (point) => {
+      updatePillTracking(point);
+    },
+    [updatePillTracking]
+  );
+  React.useEffect(() => {
+    if (!collapsed) return;
+    const panelElement = elementRef.current;
+    const separator = direction === "left" ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;
+    if (!(separator instanceof HTMLElement) || !separator.hasAttribute("data-separator")) return;
+    const show = (event) => {
+      setEdgeHovered(true);
+      spawnPill(event);
+    };
+    const hide = () => {
+      setEdgeHovered(false);
+      endPillTracking();
+    };
+    const follow = (event) => trackPillPosition(event);
+    separator.addEventListener("pointerenter", show);
+    separator.addEventListener("pointerleave", hide);
+    separator.addEventListener("pointermove", follow);
+    return () => {
+      separator.removeEventListener("pointerenter", show);
+      separator.removeEventListener("pointerleave", hide);
+      separator.removeEventListener("pointermove", follow);
+      setEdgeHovered(false);
+      endPillTracking();
+    };
+  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);
+  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };
+};
+const CollapsiblePanel = ({
+  collapsedSize,
+  children,
+  direction,
+  className,
+  onResize,
+  style,
+  minSize,
+  ...props
+}) => {
+  const [collapsed, setCollapsed] = React.useState(false);
+  const panelRef = reactResizablePanels.usePanelRef();
+  const elementRef = React.useRef(null);
+  const { booted, boot, enableSizeTransitions } = usePanelSizeTransitions(elementRef);
+  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({
+    collapsed,
+    direction,
+    elementRef
+  });
+  const expand = React.useCallback(() => {
+    enableSizeTransitions();
+    if (!panelRef.current) return;
+    panelRef.current.expand();
+  }, [enableSizeTransitions, panelRef]);
+  const numericMinSize = typeof minSize === "number" ? minSize : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactResizablePanels.Panel,
+    {
+      panelRef,
+      elementRef,
+      collapsedSize,
+      minSize,
+      className: utils_cn.cn("relative", className),
+      style: {
+        overflow: collapsed ? "visible" : "hidden",
+        "--panel-min-w": numericMinSize ? `${numericMinSize}px` : void 0,
+        ...style
+      },
+      ...props,
+      onResize: (size, previousSize, panel) => {
+        onResize?.(size, previousSize, panel);
+        if (typeof collapsedSize !== "number") return;
+        setCollapsed(size.inPixels <= collapsedSize);
+        boot();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            inert: collapsed,
+            "data-state": collapsed ? "collapsed" : "open",
+            "data-direction": direction,
+            style: {
+              minWidth: "var(--panel-min-w)",
+              opacity: collapsed ? 0 : void 0,
+              translate: collapsed ? direction === "left" ? "-100% 0" : "100% 0" : void 0
+            },
+            className: utils_cn.cn(
+              "absolute inset-y-0 w-full overflow-hidden",
+              "transition-[opacity,translate] duration-300 ease-out-custom motion-reduce:transition-none",
+              "data-[direction=left]:left-0 data-[direction=right]:right-0",
+              "data-[state=collapsed]:z-10",
+              !booted && "transition-none"
+            ),
+            children
+          }
+        ),
+        collapsed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: expandButtonRef,
+              type: "button",
+              "aria-label": "Expand panel",
+              onClick: expand,
+              className: utils_cn.cn(
+                resize_panelIconButton.panelIconButtonClass,
+                "absolute top-2 z-10",
+                "transition-[color,background-color,opacity] duration-300 starting:opacity-0",
+                direction === "left" ? "left-2" : "right-2",
+                "data-[edge-hovered=true]:text-neutral6"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(resize_panelEdgeIcon.PanelEdgeIcon, { side: direction }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: stripRef,
+              type: "button",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              onClick: expand,
+              onPointerEnter: (event) => spawnPill(event),
+              onPointerLeave: endPillTracking,
+              onPointerMove: (event) => trackPillPosition(event),
+              style: { "--pill-y": "50%" },
+              className: utils_cn.cn(
+                "group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden",
+                direction === "left" ? "left-1" : "right-1"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  ref: pillRef,
+                  style: { top: "var(--pill-y)" },
+                  className: utils_cn.cn(
+                    "absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog",
+                    "pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none",
+                    direction === "left" ? "left-0.5 -translate-x-1" : "right-0.5 translate-x-1",
+                    "group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100",
+                    "group-active/expand:bg-neutral6/80",
+                    "data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100"
+                  ),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: direction === "left" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, {}) })
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+exports.CollapsiblePanel = CollapsiblePanel;
+//# sourceMappingURL=collapsible-panel.cjs.js.map

package/dist/resize/collapsible-panel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-panel.cjs.js","sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { useClampedElementCursor } from './use-clamped-element-cursor';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n}\n\n// The expand pill follows the pointer vertically along the edge, clamped so\n// it never bleeds past the strip's ends.\nconst PILL_EDGE_MARGIN = 22;\n\ntype PanelElementRef = RefObject<HTMLDivElement | null>;\n\nconst usePanelSizeTransitions = (elementRef: PanelElementRef) => {\n  const [booted, setBooted] = useState(false);\n  const bootedRef = useRef(false);\n  const bootScheduled = useRef(false);\n  const enableSizeTransitionsRef = useRef<() => void>(() => {});\n\n  const enableSizeTransitions = useCallback(() => {\n    enableSizeTransitionsRef.current();\n  }, []);\n\n  const boot = useCallback(() => {\n    if (bootScheduled.current) return;\n    bootScheduled.current = true;\n    requestAnimationFrame(() => {\n      bootedRef.current = true;\n      setBooted(true);\n      enableSizeTransitionsRef.current();\n    });\n  }, []);\n\n  useEffect(() => {\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n    const group = elementRef.current?.parentElement;\n    if (!group) return;\n    const panels = Array.from(group.children).filter(\n      (child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-panel'),\n    );\n    const separators = Array.from(group.children).filter(\n      (child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-separator'),\n    );\n\n    const enable = () => {\n      if (!bootedRef.current) return;\n      panels.forEach(\n        panel =>\n          (panel.style.transition =\n            'flex-grow 300ms var(--ease-out-custom, ease), flex-basis 300ms var(--ease-out-custom, ease)'),\n      );\n    };\n    const disable = () => panels.forEach(panel => (panel.style.transition = 'none'));\n\n    enable();\n    enableSizeTransitionsRef.current = enable;\n    separators.forEach(separator => separator.addEventListener('pointerdown', disable));\n    window.addEventListener('pointerup', enable);\n    window.addEventListener('pointercancel', enable);\n    return () => {\n      enableSizeTransitionsRef.current = () => {};\n      separators.forEach(separator => separator.removeEventListener('pointerdown', disable));\n      window.removeEventListener('pointerup', enable);\n      window.removeEventListener('pointercancel', enable);\n      panels.forEach(panel => (panel.style.transition = ''));\n    };\n  }, [elementRef]);\n\n  return { booted, boot, enableSizeTransitions };\n};\n\nconst useCollapsedEdgePill = ({\n  collapsed,\n  direction,\n  elementRef,\n}: {\n  collapsed: boolean;\n  direction: CollapsiblePanelProps['direction'];\n  elementRef: PanelElementRef;\n}) => {\n  const expandButtonRef = useRef<HTMLButtonElement | null>(null);\n  const pillRef = useRef<HTMLSpanElement | null>(null);\n  const {\n    beginTracking: beginPillTracking,\n    elementRef: stripRef,\n    endTracking: endPillTracking,\n    updateTracking: updatePillTracking,\n  } = useClampedElementCursor<HTMLButtonElement>({\n    axis: 'y',\n    margin: PILL_EDGE_MARGIN,\n    variableName: '--pill-y',\n  });\n\n  const setEdgeHovered = useCallback((hovered: boolean) => {\n    const expandButton = expandButtonRef.current;\n    const pill = pillRef.current;\n    if (expandButton) expandButton.dataset.edgeHovered = hovered ? 'true' : 'false';\n    if (pill) pill.dataset.edgeHovered = hovered ? 'true' : 'false';\n  }, []);\n\n  const spawnPill = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      const pill = pillRef.current;\n      if (!pill) return;\n      beginPillTracking(point);\n      pill.style.transitionProperty = 'opacity, translate';\n      requestAnimationFrame(() => {\n        pill.style.transitionProperty = '';\n      });\n    },\n    [beginPillTracking],\n  );\n\n  const trackPillPosition = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      updatePillTracking(point);\n    },\n    [updatePillTracking],\n  );\n\n  useEffect(() => {\n    if (!collapsed) return;\n    const panelElement = elementRef.current;\n    const separator = direction === 'left' ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;\n    if (!(separator instanceof HTMLElement) || !separator.hasAttribute('data-separator')) return;\n\n    const show = (event: PointerEvent) => {\n      setEdgeHovered(true);\n      spawnPill(event);\n    };\n    const hide = () => {\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n    const follow = (event: PointerEvent) => trackPillPosition(event);\n    separator.addEventListener('pointerenter', show);\n    separator.addEventListener('pointerleave', hide);\n    separator.addEventListener('pointermove', follow);\n    return () => {\n      separator.removeEventListener('pointerenter', show);\n      separator.removeEventListener('pointerleave', hide);\n      separator.removeEventListener('pointermove', follow);\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);\n\n  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };\n};\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  className,\n  onResize,\n  style,\n  minSize,\n  ...props\n}: CollapsiblePanelProps) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const panelRef = usePanelRef();\n  const elementRef = useRef<HTMLDivElement | null>(null);\n  const { booted, boot, enableSizeTransitions } = usePanelSizeTransitions(elementRef);\n  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({\n    collapsed,\n    direction,\n    elementRef,\n  });\n\n  const expand = useCallback(() => {\n    enableSizeTransitions();\n    if (!panelRef.current) return;\n    panelRef.current.expand();\n  }, [enableSizeTransitions, panelRef]);\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      elementRef={elementRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      className={cn('relative', className)}\n      style={\n        {\n          overflow: collapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, previousSize, panel) => {\n        onResize?.(size, previousSize, panel);\n        if (typeof collapsedSize !== 'number') return;\n        setCollapsed(size.inPixels <= collapsedSize);\n        boot();\n      }}\n    >\n      <div\n        inert={collapsed}\n        data-state={collapsed ? 'collapsed' : 'open'}\n        data-direction={direction}\n        style={{\n          minWidth: 'var(--panel-min-w)',\n          opacity: collapsed ? 0 : undefined,\n          translate: collapsed ? (direction === 'left' ? '-100% 0' : '100% 0') : undefined,\n        }}\n        className={cn(\n          'absolute inset-y-0 w-full overflow-hidden',\n          'transition-[opacity,translate] duration-300 ease-out-custom motion-reduce:transition-none',\n          'data-[direction=left]:left-0 data-[direction=right]:right-0',\n          'data-[state=collapsed]:z-10',\n          !booted && 'transition-none',\n        )}\n      >\n        {children}\n      </div>\n\n      {collapsed && (\n        <>\n          <button\n            ref={expandButtonRef}\n            type=\"button\"\n            aria-label=\"Expand panel\"\n            onClick={expand}\n            className={cn(\n              panelIconButtonClass,\n              'absolute top-2 z-10',\n              'transition-[color,background-color,opacity] duration-300 starting:opacity-0',\n              direction === 'left' ? 'left-2' : 'right-2',\n              'data-[edge-hovered=true]:text-neutral6',\n            )}\n          >\n            <Icon>\n              <PanelEdgeIcon side={direction} />\n            </Icon>\n          </button>\n\n          <button\n            ref={stripRef}\n            type=\"button\"\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            onClick={expand}\n            onPointerEnter={event => spawnPill(event)}\n            onPointerLeave={endPillTracking}\n            onPointerMove={event => trackPillPosition(event)}\n            style={{ '--pill-y': '50%' } as CSSProperties}\n            className={cn(\n              'group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden',\n              direction === 'left' ? 'left-1' : 'right-1',\n            )}\n          >\n            <span\n              ref={pillRef}\n              style={{ top: 'var(--pill-y)' }}\n              className={cn(\n                'absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog',\n                'pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none',\n                direction === 'left' ? 'left-0.5 -translate-x-1' : 'right-0.5 translate-x-1',\n                'group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100',\n                'group-active/expand:bg-neutral6/80',\n                'data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100',\n              )}\n            >\n              <Icon>{direction === 'left' ? <ChevronRight /> : <ChevronLeft />}</Icon>\n            </span>\n          </button>\n        </>\n      )}\n    </Panel>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","useClampedElementCursor","usePanelRef","jsxs","Panel","cn","jsx","Fragment","panelIconButtonClass","Icon","PanelEdgeIcon","ChevronRight","ChevronLeft"],"mappings":"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"}

package/dist/resize/collapsible-panel.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/lib/resize/collapsible-panel'
+export {}

package/dist/resize/collapsible-panel.es.js

@@ -0,0 +1,257 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { ChevronRight, ChevronLeft } from 'lucide-react';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { usePanelRef, Panel } from 'react-resizable-panels';
+import { PanelEdgeIcon } from './panel-edge-icon.es.js';
+import { panelIconButtonClass } from './panel-icon-button.es.js';
+import { useClampedElementCursor } from './use-clamped-element-cursor.es.js';
+import { c as cn } from '../cn-BakJzhuv.js';
+import { Icon } from '../icons/Icon.es.js';
+
+const PILL_EDGE_MARGIN = 22;
+const usePanelSizeTransitions = (elementRef) => {
+  const [booted, setBooted] = useState(false);
+  const bootedRef = useRef(false);
+  const bootScheduled = useRef(false);
+  const enableSizeTransitionsRef = useRef(() => {
+  });
+  const enableSizeTransitions = useCallback(() => {
+    enableSizeTransitionsRef.current();
+  }, []);
+  const boot = useCallback(() => {
+    if (bootScheduled.current) return;
+    bootScheduled.current = true;
+    requestAnimationFrame(() => {
+      bootedRef.current = true;
+      setBooted(true);
+      enableSizeTransitionsRef.current();
+    });
+  }, []);
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    const group = elementRef.current?.parentElement;
+    if (!group) return;
+    const panels = Array.from(group.children).filter(
+      (child) => child instanceof HTMLElement && child.hasAttribute("data-panel")
+    );
+    const separators = Array.from(group.children).filter(
+      (child) => child instanceof HTMLElement && child.hasAttribute("data-separator")
+    );
+    const enable = () => {
+      if (!bootedRef.current) return;
+      panels.forEach(
+        (panel) => panel.style.transition = "flex-grow 300ms var(--ease-out-custom, ease), flex-basis 300ms var(--ease-out-custom, ease)"
+      );
+    };
+    const disable = () => panels.forEach((panel) => panel.style.transition = "none");
+    enable();
+    enableSizeTransitionsRef.current = enable;
+    separators.forEach((separator) => separator.addEventListener("pointerdown", disable));
+    window.addEventListener("pointerup", enable);
+    window.addEventListener("pointercancel", enable);
+    return () => {
+      enableSizeTransitionsRef.current = () => {
+      };
+      separators.forEach((separator) => separator.removeEventListener("pointerdown", disable));
+      window.removeEventListener("pointerup", enable);
+      window.removeEventListener("pointercancel", enable);
+      panels.forEach((panel) => panel.style.transition = "");
+    };
+  }, [elementRef]);
+  return { booted, boot, enableSizeTransitions };
+};
+const useCollapsedEdgePill = ({
+  collapsed,
+  direction,
+  elementRef
+}) => {
+  const expandButtonRef = useRef(null);
+  const pillRef = useRef(null);
+  const {
+    beginTracking: beginPillTracking,
+    elementRef: stripRef,
+    endTracking: endPillTracking,
+    updateTracking: updatePillTracking
+  } = useClampedElementCursor({
+    axis: "y",
+    margin: PILL_EDGE_MARGIN,
+    variableName: "--pill-y"
+  });
+  const setEdgeHovered = useCallback((hovered) => {
+    const expandButton = expandButtonRef.current;
+    const pill = pillRef.current;
+    if (expandButton) expandButton.dataset.edgeHovered = hovered ? "true" : "false";
+    if (pill) pill.dataset.edgeHovered = hovered ? "true" : "false";
+  }, []);
+  const spawnPill = useCallback(
+    (point) => {
+      const pill = pillRef.current;
+      if (!pill) return;
+      beginPillTracking(point);
+      pill.style.transitionProperty = "opacity, translate";
+      requestAnimationFrame(() => {
+        pill.style.transitionProperty = "";
+      });
+    },
+    [beginPillTracking]
+  );
+  const trackPillPosition = useCallback(
+    (point) => {
+      updatePillTracking(point);
+    },
+    [updatePillTracking]
+  );
+  useEffect(() => {
+    if (!collapsed) return;
+    const panelElement = elementRef.current;
+    const separator = direction === "left" ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;
+    if (!(separator instanceof HTMLElement) || !separator.hasAttribute("data-separator")) return;
+    const show = (event) => {
+      setEdgeHovered(true);
+      spawnPill(event);
+    };
+    const hide = () => {
+      setEdgeHovered(false);
+      endPillTracking();
+    };
+    const follow = (event) => trackPillPosition(event);
+    separator.addEventListener("pointerenter", show);
+    separator.addEventListener("pointerleave", hide);
+    separator.addEventListener("pointermove", follow);
+    return () => {
+      separator.removeEventListener("pointerenter", show);
+      separator.removeEventListener("pointerleave", hide);
+      separator.removeEventListener("pointermove", follow);
+      setEdgeHovered(false);
+      endPillTracking();
+    };
+  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);
+  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };
+};
+const CollapsiblePanel = ({
+  collapsedSize,
+  children,
+  direction,
+  className,
+  onResize,
+  style,
+  minSize,
+  ...props
+}) => {
+  const [collapsed, setCollapsed] = useState(false);
+  const panelRef = usePanelRef();
+  const elementRef = useRef(null);
+  const { booted, boot, enableSizeTransitions } = usePanelSizeTransitions(elementRef);
+  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({
+    collapsed,
+    direction,
+    elementRef
+  });
+  const expand = useCallback(() => {
+    enableSizeTransitions();
+    if (!panelRef.current) return;
+    panelRef.current.expand();
+  }, [enableSizeTransitions, panelRef]);
+  const numericMinSize = typeof minSize === "number" ? minSize : null;
+  return /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      panelRef,
+      elementRef,
+      collapsedSize,
+      minSize,
+      className: cn("relative", className),
+      style: {
+        overflow: collapsed ? "visible" : "hidden",
+        "--panel-min-w": numericMinSize ? `${numericMinSize}px` : void 0,
+        ...style
+      },
+      ...props,
+      onResize: (size, previousSize, panel) => {
+        onResize?.(size, previousSize, panel);
+        if (typeof collapsedSize !== "number") return;
+        setCollapsed(size.inPixels <= collapsedSize);
+        boot();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            inert: collapsed,
+            "data-state": collapsed ? "collapsed" : "open",
+            "data-direction": direction,
+            style: {
+              minWidth: "var(--panel-min-w)",
+              opacity: collapsed ? 0 : void 0,
+              translate: collapsed ? direction === "left" ? "-100% 0" : "100% 0" : void 0
+            },
+            className: cn(
+              "absolute inset-y-0 w-full overflow-hidden",
+              "transition-[opacity,translate] duration-300 ease-out-custom motion-reduce:transition-none",
+              "data-[direction=left]:left-0 data-[direction=right]:right-0",
+              "data-[state=collapsed]:z-10",
+              !booted && "transition-none"
+            ),
+            children
+          }
+        ),
+        collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: expandButtonRef,
+              type: "button",
+              "aria-label": "Expand panel",
+              onClick: expand,
+              className: cn(
+                panelIconButtonClass,
+                "absolute top-2 z-10",
+                "transition-[color,background-color,opacity] duration-300 starting:opacity-0",
+                direction === "left" ? "left-2" : "right-2",
+                "data-[edge-hovered=true]:text-neutral6"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(PanelEdgeIcon, { side: direction }) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: stripRef,
+              type: "button",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              onClick: expand,
+              onPointerEnter: (event) => spawnPill(event),
+              onPointerLeave: endPillTracking,
+              onPointerMove: (event) => trackPillPosition(event),
+              style: { "--pill-y": "50%" },
+              className: cn(
+                "group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden",
+                direction === "left" ? "left-1" : "right-1"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ref: pillRef,
+                  style: { top: "var(--pill-y)" },
+                  className: cn(
+                    "absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog",
+                    "pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none",
+                    direction === "left" ? "left-0.5 -translate-x-1" : "right-0.5 translate-x-1",
+                    "group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100",
+                    "group-active/expand:bg-neutral6/80",
+                    "data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100"
+                  ),
+                  children: /* @__PURE__ */ jsx(Icon, { children: direction === "left" ? /* @__PURE__ */ jsx(ChevronRight, {}) : /* @__PURE__ */ jsx(ChevronLeft, {}) })
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+export { CollapsiblePanel };
+//# sourceMappingURL=collapsible-panel.es.js.map

package/dist/resize/collapsible-panel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-panel.es.js","sources":["../../src/lib/resize/collapsible-panel.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from 'lucide-react';\nimport type { CSSProperties, RefObject } from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport type { PanelProps } from 'react-resizable-panels';\nimport { Panel, usePanelRef } from 'react-resizable-panels';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport { useClampedElementCursor } from './use-clamped-element-cursor';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CollapsiblePanelProps extends PanelProps {\n  direction: 'left' | 'right';\n}\n\n// The expand pill follows the pointer vertically along the edge, clamped so\n// it never bleeds past the strip's ends.\nconst PILL_EDGE_MARGIN = 22;\n\ntype PanelElementRef = RefObject<HTMLDivElement | null>;\n\nconst usePanelSizeTransitions = (elementRef: PanelElementRef) => {\n  const [booted, setBooted] = useState(false);\n  const bootedRef = useRef(false);\n  const bootScheduled = useRef(false);\n  const enableSizeTransitionsRef = useRef<() => void>(() => {});\n\n  const enableSizeTransitions = useCallback(() => {\n    enableSizeTransitionsRef.current();\n  }, []);\n\n  const boot = useCallback(() => {\n    if (bootScheduled.current) return;\n    bootScheduled.current = true;\n    requestAnimationFrame(() => {\n      bootedRef.current = true;\n      setBooted(true);\n      enableSizeTransitionsRef.current();\n    });\n  }, []);\n\n  useEffect(() => {\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n    const group = elementRef.current?.parentElement;\n    if (!group) return;\n    const panels = Array.from(group.children).filter(\n      (child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-panel'),\n    );\n    const separators = Array.from(group.children).filter(\n      (child): child is HTMLElement => child instanceof HTMLElement && child.hasAttribute('data-separator'),\n    );\n\n    const enable = () => {\n      if (!bootedRef.current) return;\n      panels.forEach(\n        panel =>\n          (panel.style.transition =\n            'flex-grow 300ms var(--ease-out-custom, ease), flex-basis 300ms var(--ease-out-custom, ease)'),\n      );\n    };\n    const disable = () => panels.forEach(panel => (panel.style.transition = 'none'));\n\n    enable();\n    enableSizeTransitionsRef.current = enable;\n    separators.forEach(separator => separator.addEventListener('pointerdown', disable));\n    window.addEventListener('pointerup', enable);\n    window.addEventListener('pointercancel', enable);\n    return () => {\n      enableSizeTransitionsRef.current = () => {};\n      separators.forEach(separator => separator.removeEventListener('pointerdown', disable));\n      window.removeEventListener('pointerup', enable);\n      window.removeEventListener('pointercancel', enable);\n      panels.forEach(panel => (panel.style.transition = ''));\n    };\n  }, [elementRef]);\n\n  return { booted, boot, enableSizeTransitions };\n};\n\nconst useCollapsedEdgePill = ({\n  collapsed,\n  direction,\n  elementRef,\n}: {\n  collapsed: boolean;\n  direction: CollapsiblePanelProps['direction'];\n  elementRef: PanelElementRef;\n}) => {\n  const expandButtonRef = useRef<HTMLButtonElement | null>(null);\n  const pillRef = useRef<HTMLSpanElement | null>(null);\n  const {\n    beginTracking: beginPillTracking,\n    elementRef: stripRef,\n    endTracking: endPillTracking,\n    updateTracking: updatePillTracking,\n  } = useClampedElementCursor<HTMLButtonElement>({\n    axis: 'y',\n    margin: PILL_EDGE_MARGIN,\n    variableName: '--pill-y',\n  });\n\n  const setEdgeHovered = useCallback((hovered: boolean) => {\n    const expandButton = expandButtonRef.current;\n    const pill = pillRef.current;\n    if (expandButton) expandButton.dataset.edgeHovered = hovered ? 'true' : 'false';\n    if (pill) pill.dataset.edgeHovered = hovered ? 'true' : 'false';\n  }, []);\n\n  const spawnPill = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      const pill = pillRef.current;\n      if (!pill) return;\n      beginPillTracking(point);\n      pill.style.transitionProperty = 'opacity, translate';\n      requestAnimationFrame(() => {\n        pill.style.transitionProperty = '';\n      });\n    },\n    [beginPillTracking],\n  );\n\n  const trackPillPosition = useCallback(\n    (point: { clientX: number; clientY: number }) => {\n      updatePillTracking(point);\n    },\n    [updatePillTracking],\n  );\n\n  useEffect(() => {\n    if (!collapsed) return;\n    const panelElement = elementRef.current;\n    const separator = direction === 'left' ? panelElement?.nextElementSibling : panelElement?.previousElementSibling;\n    if (!(separator instanceof HTMLElement) || !separator.hasAttribute('data-separator')) return;\n\n    const show = (event: PointerEvent) => {\n      setEdgeHovered(true);\n      spawnPill(event);\n    };\n    const hide = () => {\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n    const follow = (event: PointerEvent) => trackPillPosition(event);\n    separator.addEventListener('pointerenter', show);\n    separator.addEventListener('pointerleave', hide);\n    separator.addEventListener('pointermove', follow);\n    return () => {\n      separator.removeEventListener('pointerenter', show);\n      separator.removeEventListener('pointerleave', hide);\n      separator.removeEventListener('pointermove', follow);\n      setEdgeHovered(false);\n      endPillTracking();\n    };\n  }, [collapsed, direction, elementRef, endPillTracking, setEdgeHovered, spawnPill, trackPillPosition]);\n\n  return { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition };\n};\n\nexport const CollapsiblePanel = ({\n  collapsedSize,\n  children,\n  direction,\n  className,\n  onResize,\n  style,\n  minSize,\n  ...props\n}: CollapsiblePanelProps) => {\n  const [collapsed, setCollapsed] = useState(false);\n  const panelRef = usePanelRef();\n  const elementRef = useRef<HTMLDivElement | null>(null);\n  const { booted, boot, enableSizeTransitions } = usePanelSizeTransitions(elementRef);\n  const { endPillTracking, expandButtonRef, stripRef, pillRef, spawnPill, trackPillPosition } = useCollapsedEdgePill({\n    collapsed,\n    direction,\n    elementRef,\n  });\n\n  const expand = useCallback(() => {\n    enableSizeTransitions();\n    if (!panelRef.current) return;\n    panelRef.current.expand();\n  }, [enableSizeTransitions, panelRef]);\n\n  const numericMinSize = typeof minSize === 'number' ? minSize : null;\n\n  return (\n    <Panel\n      panelRef={panelRef}\n      elementRef={elementRef}\n      collapsedSize={collapsedSize}\n      minSize={minSize}\n      className={cn('relative', className)}\n      style={\n        {\n          overflow: collapsed ? 'visible' : 'hidden',\n          '--panel-min-w': numericMinSize ? `${numericMinSize}px` : undefined,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n      onResize={(size, previousSize, panel) => {\n        onResize?.(size, previousSize, panel);\n        if (typeof collapsedSize !== 'number') return;\n        setCollapsed(size.inPixels <= collapsedSize);\n        boot();\n      }}\n    >\n      <div\n        inert={collapsed}\n        data-state={collapsed ? 'collapsed' : 'open'}\n        data-direction={direction}\n        style={{\n          minWidth: 'var(--panel-min-w)',\n          opacity: collapsed ? 0 : undefined,\n          translate: collapsed ? (direction === 'left' ? '-100% 0' : '100% 0') : undefined,\n        }}\n        className={cn(\n          'absolute inset-y-0 w-full overflow-hidden',\n          'transition-[opacity,translate] duration-300 ease-out-custom motion-reduce:transition-none',\n          'data-[direction=left]:left-0 data-[direction=right]:right-0',\n          'data-[state=collapsed]:z-10',\n          !booted && 'transition-none',\n        )}\n      >\n        {children}\n      </div>\n\n      {collapsed && (\n        <>\n          <button\n            ref={expandButtonRef}\n            type=\"button\"\n            aria-label=\"Expand panel\"\n            onClick={expand}\n            className={cn(\n              panelIconButtonClass,\n              'absolute top-2 z-10',\n              'transition-[color,background-color,opacity] duration-300 starting:opacity-0',\n              direction === 'left' ? 'left-2' : 'right-2',\n              'data-[edge-hovered=true]:text-neutral6',\n            )}\n          >\n            <Icon>\n              <PanelEdgeIcon side={direction} />\n            </Icon>\n          </button>\n\n          <button\n            ref={stripRef}\n            type=\"button\"\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            onClick={expand}\n            onPointerEnter={event => spawnPill(event)}\n            onPointerLeave={endPillTracking}\n            onPointerMove={event => trackPillPosition(event)}\n            style={{ '--pill-y': '50%' } as CSSProperties}\n            className={cn(\n              'group/expand absolute inset-y-0 z-10 w-4 cursor-pointer focus-visible:outline-hidden',\n              direction === 'left' ? 'left-1' : 'right-1',\n            )}\n          >\n            <span\n              ref={pillRef}\n              style={{ top: 'var(--pill-y)' }}\n              className={cn(\n                'absolute flex size-7 -translate-y-1/2 items-center justify-center rounded-full bg-neutral6 text-surface1 shadow-dialog',\n                'pointer-events-none opacity-0 transition-[opacity,translate,top] duration-150 ease-out-custom motion-reduce:transition-none',\n                direction === 'left' ? 'left-0.5 -translate-x-1' : 'right-0.5 translate-x-1',\n                'group-hover/expand:pointer-events-auto group-hover/expand:translate-x-0 group-hover/expand:opacity-100',\n                'group-active/expand:bg-neutral6/80',\n                'data-[edge-hovered=true]:pointer-events-auto data-[edge-hovered=true]:translate-x-0 data-[edge-hovered=true]:opacity-100',\n              )}\n            >\n              <Icon>{direction === 'left' ? <ChevronRight /> : <ChevronLeft />}</Icon>\n            </span>\n          </button>\n        </>\n      )}\n    </Panel>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/resize/panel-drawer.cjs.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const resize_panelEdgeIcon = require('./panel-edge-icon.cjs.js');
+const resize_panelIconButton = require('./panel-icon-button.cjs.js');
+const drawer = require('../drawer-xYzVLI5E.cjs');
+const utils_cn = require('../cn-vA5sWo9W.cjs');
+const icons_Icon = require('../icons/Icon.cjs.js');
+
+const PanelDrawer = ({ direction, label, children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(drawer.Drawer, { side: direction, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        className: utils_cn.cn(resize_panelIconButton.panelIconButtonClass, "absolute top-2 z-10", direction === "left" ? "left-2" : "right-2"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons_Icon.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(resize_panelEdgeIcon.PanelEdgeIcon, { side: direction }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerPortal, { keepMounted: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerBackdrop, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerViewport, { children: /* @__PURE__ */ jsxRuntime.jsxs(drawer.DrawerPopup, { className: "w-[calc(100vw-2.5rem)] max-w-[28rem]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(drawer.DrawerTitle, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ] }) })
+    ] })
+  ] });
+};
+
+exports.PanelDrawer = PanelDrawer;
+//# sourceMappingURL=panel-drawer.cjs.js.map

package/dist/resize/panel-drawer.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-drawer.cjs.js","sources":["../../src/lib/resize/panel-drawer.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { PanelEdgeIcon } from './panel-edge-icon';\nimport { panelIconButtonClass } from './panel-icon-button';\nimport {\n  Drawer,\n  DrawerBackdrop,\n  DrawerPopup,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n  DrawerViewport,\n} from '@/ds/components/Drawer';\nimport { Icon } from '@/ds/icons';\nimport { cn } from '@/lib/utils';\n\nexport interface PanelDrawerProps {\n  direction: 'left' | 'right';\n  /** Accessible name for the trigger button and the drawer. */\n  label: string;\n  children: ReactNode;\n}\n\nexport const PanelDrawer = ({ direction, label, children }: PanelDrawerProps) => {\n  return (\n    <Drawer side={direction}>\n      <DrawerTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={label}\n          className={cn(panelIconButtonClass, 'absolute top-2 z-10', direction === 'left' ? 'left-2' : 'right-2')}\n        >\n          <Icon>\n            <PanelEdgeIcon side={direction} />\n          </Icon>\n        </button>\n      </DrawerTrigger>\n\n      <DrawerPortal keepMounted>\n        <DrawerBackdrop />\n        <DrawerViewport>\n          <DrawerPopup className=\"w-[calc(100vw-2.5rem)] max-w-[28rem]\">\n            <DrawerTitle className=\"sr-only\">{label}</DrawerTitle>\n            <div className=\"flex min-h-0 flex-1 flex-col\">{children}</div>\n          </DrawerPopup>\n        </DrawerViewport>\n      </DrawerPortal>\n    </Drawer>\n  );\n};\n"],"names":["jsxs","Drawer","jsx","DrawerTrigger","cn","panelIconButtonClass","Icon","PanelEdgeIcon","DrawerPortal","DrawerBackdrop","DrawerViewport","DrawerPopup","DrawerTitle"],"mappings":";;;;;;;;;;;AAsBO,MAAM,cAAc,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,UAAS,KAAwB;AAC/E,EAAA,uBACEA,eAAA,CAACC,aAAA,EAAA,EAAO,IAAA,EAAM,SAAA,EACZ,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,oBAAA,EAAA,EAAc,SAAO,IAAA,EACpB,QAAA,kBAAAD,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAY,KAAA;AAAA,QACZ,WAAWE,WAAA,CAAGC,2CAAA,EAAsB,uBAAuB,SAAA,KAAc,MAAA,GAAS,WAAW,SAAS,CAAA;AAAA,QAEtG,yCAACC,eAAA,EAAA,EACC,QAAA,kBAAAJ,cAAA,CAACK,kCAAA,EAAA,EAAc,IAAA,EAAM,WAAW,CAAA,EAClC;AAAA;AAAA,KACF,EACF,CAAA;AAAA,oBAEAP,eAAA,CAACQ,mBAAA,EAAA,EAAa,WAAA,EAAW,IAAA,EACvB,QAAA,EAAA;AAAA,sBAAAN,cAAA,CAACO,qBAAA,EAAA,EAAe,CAAA;AAAA,sBAChBP,cAAA,CAACQ,qBAAA,EAAA,EACC,QAAA,kBAAAV,eAAA,CAACW,kBAAA,EAAA,EAAY,WAAU,sCAAA,EACrB,QAAA,EAAA;AAAA,wBAAAT,cAAA,CAACU,kBAAA,EAAA,EAAY,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACxCV,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAAgC,QAAA,EAAS;AAAA,OAAA,EAC1D,CAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/resize/panel-drawer.d.ts

@@ -0,0 +1,2 @@
+export * from '../src/lib/resize/panel-drawer'
+export {}