tldraw 3.16.0-canary.56eb315c11ae → 3.16.0-canary.614a556981b7

package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs

@@ -0,0 +1,261 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { assert, uniqueId, useMaybeEditor, Vec } from "@tldraw/editor";
+import { Tooltip as _Tooltip } from "radix-ui";
+import React, { createContext, forwardRef, useContext, useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "../../../shapes/shared/usePrefersReducedMotion.mjs";
+import { useTldrawUiOrientation } from "./layout.mjs";
+const DEFAULT_TOOLTIP_DELAY_MS = 700;
+class TooltipManager {
+  static instance = null;
+  currentTooltipId = null;
+  currentContent = "";
+  currentSide = "bottom";
+  currentSideOffset = 5;
+  destroyTimeoutId = null;
+  subscribers = /* @__PURE__ */ new Set();
+  activeElement = null;
+  editor = null;
+  static getInstance() {
+    if (!TooltipManager.instance) {
+      TooltipManager.instance = new TooltipManager();
+    }
+    return TooltipManager.instance;
+  }
+  setEditor(editor) {
+    this.editor = editor;
+  }
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    return () => this.subscribers.delete(callback);
+  }
+  notify() {
+    this.subscribers.forEach((callback) => callback());
+  }
+  showTooltip(tooltipId, content, element, side = "bottom", sideOffset = 5) {
+    if (this.destroyTimeoutId) {
+      clearTimeout(this.destroyTimeoutId);
+      this.destroyTimeoutId = null;
+    }
+    this.currentTooltipId = tooltipId;
+    this.currentContent = content;
+    this.currentSide = side;
+    this.currentSideOffset = sideOffset;
+    this.activeElement = element;
+    this.notify();
+  }
+  hideTooltip(tooltipId, instant = false) {
+    const hide = () => {
+      if (this.currentTooltipId === tooltipId) {
+        this.currentTooltipId = null;
+        this.currentContent = "";
+        this.activeElement = null;
+        this.destroyTimeoutId = null;
+        this.notify();
+      }
+    };
+    if (instant) {
+      hide();
+    } else if (this.editor) {
+      this.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300);
+    }
+  }
+  hideAllTooltips() {
+    this.currentTooltipId = null;
+    this.currentContent = "";
+    this.activeElement = null;
+    this.destroyTimeoutId = null;
+    this.notify();
+  }
+  getCurrentTooltipData() {
+    return {
+      id: this.currentTooltipId,
+      content: this.currentContent,
+      side: this.currentSide,
+      sideOffset: this.currentSideOffset,
+      element: this.activeElement
+    };
+  }
+}
+const tooltipManager = TooltipManager.getInstance();
+const TooltipSingletonContext = createContext(false);
+function TldrawUiTooltipProvider({ children }) {
+  return /* @__PURE__ */ jsx(_Tooltip.Provider, { skipDelayDuration: 700, children: /* @__PURE__ */ jsxs(TooltipSingletonContext.Provider, { value: true, children: [
+    children,
+    /* @__PURE__ */ jsx(TooltipSingleton, {})
+  ] }) });
+}
+function TooltipSingleton() {
+  const editor = useMaybeEditor();
+  const [, forceUpdate] = useState({});
+  const [isOpen, setIsOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const previousPositionRef = useRef(null);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+  const isFirstShowRef = useRef(true);
+  const showTimeoutRef = useRef(null);
+  useEffect(() => {
+    tooltipManager.setEditor(editor);
+  }, [editor]);
+  useEffect(() => {
+    const unsubscribe = tooltipManager.subscribe(() => {
+      forceUpdate({});
+    });
+    return unsubscribe;
+  }, []);
+  const tooltipData = tooltipManager.getCurrentTooltipData();
+  useEffect(() => {
+    const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element);
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = null;
+    }
+    if (shouldBeOpen && tooltipData.element && triggerRef.current) {
+      const activeRect = tooltipData.element.getBoundingClientRect();
+      const trigger = triggerRef.current;
+      const newPosition = {
+        x: activeRect.left + activeRect.width / 2,
+        y: activeRect.top + activeRect.height / 2
+      };
+      let shouldAnimateCheck = false;
+      if (previousPositionRef.current) {
+        const isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200);
+        shouldAnimateCheck = !prefersReducedMotion && isNearPrevious && Math.abs(newPosition.y - previousPositionRef.current.y) < 50;
+      }
+      setShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck);
+      previousPositionRef.current = newPosition;
+      trigger.style.position = "fixed";
+      trigger.style.left = `${activeRect.left}px`;
+      trigger.style.top = `${activeRect.top}px`;
+      trigger.style.width = `${activeRect.width}px`;
+      trigger.style.height = `${activeRect.height}px`;
+      trigger.style.pointerEvents = "none";
+      trigger.style.zIndex = "9999";
+      if (isFirstShowRef.current && editor) {
+        showTimeoutRef.current = editor.timers.setTimeout(() => {
+          setIsOpen(true);
+          isFirstShowRef.current = false;
+        }, editor.options.tooltipDelayMs);
+      } else {
+        setIsOpen(true);
+      }
+    } else if (!shouldBeOpen) {
+      setIsOpen(false);
+      previousPositionRef.current = null;
+      setShouldAnimate(false);
+      isFirstShowRef.current = true;
+    }
+  }, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion]);
+  if (!tooltipData.id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(_Tooltip.Root, { open: isOpen, delayDuration: 0, children: [
+    /* @__PURE__ */ jsx(_Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { ref: triggerRef }) }),
+    /* @__PURE__ */ jsxs(
+      _Tooltip.Content,
+      {
+        className: "tlui-tooltip",
+        "data-should-animate": shouldAnimate,
+        side: tooltipData.side,
+        sideOffset: tooltipData.sideOffset,
+        avoidCollisions: true,
+        collisionPadding: 8,
+        dir: "ltr",
+        children: [
+          tooltipData.content,
+          /* @__PURE__ */ jsx(_Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
+        ]
+      }
+    )
+  ] });
+}
+const TldrawUiTooltip = forwardRef(
+  ({ children, content, side, sideOffset = 5, disabled = false }, ref) => {
+    const editor = useMaybeEditor();
+    const tooltipId = useRef(uniqueId());
+    const hasProvider = useContext(TooltipSingletonContext);
+    const orientationCtx = useTldrawUiOrientation();
+    const sideToUse = side ?? orientationCtx.tooltipSide;
+    useEffect(() => {
+      const currentTooltipId = tooltipId.current;
+      return () => {
+        if (hasProvider) {
+          tooltipManager.hideTooltip(currentTooltipId, true);
+        }
+      };
+    }, [hasProvider]);
+    if (disabled || !content) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    if (!hasProvider) {
+      return /* @__PURE__ */ jsxs(
+        _Tooltip.Root,
+        {
+          delayDuration: editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS,
+          disableHoverableContent: true,
+          children: [
+            /* @__PURE__ */ jsx(_Tooltip.Trigger, { asChild: true, ref, children }),
+            /* @__PURE__ */ jsxs(
+              _Tooltip.Content,
+              {
+                className: "tlui-tooltip",
+                side: sideToUse,
+                sideOffset,
+                avoidCollisions: true,
+                collisionPadding: 8,
+                dir: "ltr",
+                children: [
+                  content,
+                  /* @__PURE__ */ jsx(_Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    const child = React.Children.only(children);
+    assert(React.isValidElement(child), "TldrawUiTooltip children must be a single element");
+    const handleMouseEnter = (event) => {
+      child.props.onMouseEnter?.(event);
+      tooltipManager.showTooltip(
+        tooltipId.current,
+        content,
+        event.currentTarget,
+        sideToUse,
+        sideOffset
+      );
+    };
+    const handleMouseLeave = (event) => {
+      child.props.onMouseLeave?.(event);
+      tooltipManager.hideTooltip(tooltipId.current);
+    };
+    const handleFocus = (event) => {
+      child.props.onFocus?.(event);
+      tooltipManager.showTooltip(
+        tooltipId.current,
+        content,
+        event.currentTarget,
+        sideToUse,
+        sideOffset
+      );
+    };
+    const handleBlur = (event) => {
+      child.props.onBlur?.(event);
+      tooltipManager.hideTooltip(tooltipId.current);
+    };
+    const childrenWithHandlers = React.cloneElement(children, {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    });
+    return childrenWithHandlers;
+  }
+);
+export {
+  TldrawUiTooltip,
+  TldrawUiTooltipProvider,
+  tooltipManager
+};
+//# sourceMappingURL=TldrawUiTooltip.mjs.map

package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
+  "sourcesContent": ["import { assert, Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, { createContext, forwardRef, useContext, useEffect, useRef, useState } from 'react'\nimport { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltipId: string | null = null\n\tprivate currentContent: string | React.ReactNode = ''\n\tprivate currentSide: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n\tprivate currentSideOffset: number = 5\n\tprivate destroyTimeoutId: number | null = null\n\tprivate subscribers: Set<() => void> = new Set()\n\tprivate activeElement: HTMLElement | null = null\n\tprivate editor: Editor | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tsetEditor(editor: Editor | null) {\n\t\tthis.editor = editor\n\t}\n\n\tsubscribe(callback: () => void): () => void {\n\t\tthis.subscribers.add(callback)\n\t\treturn () => this.subscribers.delete(callback)\n\t}\n\n\tprivate notify() {\n\t\tthis.subscribers.forEach((callback) => callback())\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\telement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left' = 'bottom',\n\t\tsideOffset: number = 5\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltipId = tooltipId\n\t\tthis.currentContent = content\n\t\tthis.currentSide = side\n\t\tthis.currentSideOffset = sideOffset\n\t\tthis.activeElement = element\n\n\t\tthis.notify()\n\t}\n\n\thideTooltip(tooltipId: string, instant: boolean = false) {\n\t\tconst hide = () => {\n\t\t\t// Only hide if this is the current tooltip\n\t\t\tif (this.currentTooltipId === tooltipId) {\n\t\t\t\tthis.currentTooltipId = null\n\t\t\t\tthis.currentContent = ''\n\t\t\t\tthis.activeElement = null\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t\tthis.notify()\n\t\t\t}\n\t\t}\n\n\t\tif (instant) {\n\t\t\thide()\n\t\t} else if (this.editor) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300)\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltipId = null\n\t\tthis.currentContent = ''\n\t\tthis.activeElement = null\n\t\tthis.destroyTimeoutId = null\n\t\tthis.notify()\n\t}\n\n\tgetCurrentTooltipData() {\n\t\treturn {\n\t\t\tid: this.currentTooltipId,\n\t\t\tcontent: this.currentContent,\n\t\t\tside: this.currentSide,\n\t\t\tsideOffset: this.currentSideOffset,\n\t\t\telement: this.activeElement,\n\t\t}\n\t}\n}\n\nexport const tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst editor = useMaybeEditor()\n\tconst [, forceUpdate] = useState({})\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst previousPositionRef = useRef<{ x: number; y: number } | null>(null)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst [shouldAnimate, setShouldAnimate] = useState(false)\n\tconst isFirstShowRef = useRef(true)\n\tconst showTimeoutRef = useRef<number | null>(null)\n\n\t// Set editor in tooltip manager\n\tuseEffect(() => {\n\t\ttooltipManager.setEditor(editor)\n\t}, [editor])\n\n\t// Subscribe to tooltip manager updates\n\tuseEffect(() => {\n\t\tconst unsubscribe = tooltipManager.subscribe(() => {\n\t\t\tforceUpdate({})\n\t\t})\n\t\treturn unsubscribe\n\t}, [])\n\n\tconst tooltipData = tooltipManager.getCurrentTooltipData()\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tconst shouldBeOpen = Boolean(tooltipData.id && tooltipData.element)\n\n\t\t// Clear any existing show timeout\n\t\tif (showTimeoutRef.current) {\n\t\t\tclearTimeout(showTimeoutRef.current)\n\t\t\tshowTimeoutRef.current = null\n\t\t}\n\n\t\tif (shouldBeOpen && tooltipData.element && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = tooltipData.element.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\tconst newPosition = {\n\t\t\t\tx: activeRect.left + activeRect.width / 2,\n\t\t\t\ty: activeRect.top + activeRect.height / 2,\n\t\t\t}\n\n\t\t\t// Determine if we should animate\n\t\t\tlet shouldAnimateCheck = false\n\t\t\tif (previousPositionRef.current) {\n\t\t\t\tconst isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200)\n\t\t\t\t// Only animate if the distance is less than 200px (nearby tooltips)\n\t\t\t\tshouldAnimateCheck =\n\t\t\t\t\t!prefersReducedMotion &&\n\t\t\t\t\tisNearPrevious &&\n\t\t\t\t\tMath.abs(newPosition.y - previousPositionRef.current.y) < 50\n\t\t\t}\n\t\t\t// Don't animate on initial show (previousPositionRef.current is null)\n\n\t\t\tsetShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck)\n\t\t\tpreviousPositionRef.current = newPosition\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current && editor) {\n\t\t\t\tshowTimeoutRef.current = editor.timers.setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, editor.options.tooltipDelayMs)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else if (!shouldBeOpen) {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset position tracking when tooltip closes\n\t\t\tpreviousPositionRef.current = null\n\t\t\tsetShouldAnimate(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\t}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion])\n\n\tif (!tooltipData.id) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tdata-should-animate={shouldAnimate}\n\t\t\t\tside={tooltipData.side}\n\t\t\t\tsideOffset={tooltipData.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{tooltipData.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t({ children, content, side, sideOffset = 5, disabled = false }, ref) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.hideTooltip(currentTooltipId, true)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [hasProvider])\n\n\t\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}\n\t\t\t\t\tdisableHoverableContent\n\t\t\t\t>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset\n\t\t\t)\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset\n\t\t\t)\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/lib/ui/components/primitives/layout.mjs

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Slot } from "radix-ui";
+import { createContext, forwardRef, useContext } from "react";
+const TldrawUiOrientationContext = createContext({
+  orientation: "horizontal",
+  tooltipSide: "bottom"
+});
+function TldrawUiOrientationProvider({
+  children,
+  orientation,
+  tooltipSide
+}) {
+  const prevContext = useTldrawUiOrientation();
+  const tooltipSideToUse = tooltipSide ?? (orientation === prevContext.orientation ? prevContext.tooltipSide : orientation === "horizontal" ? "bottom" : "right");
+  return /* @__PURE__ */ jsx(TldrawUiOrientationContext.Provider, { value: { orientation, tooltipSide: tooltipSideToUse }, children });
+}
+function useTldrawUiOrientation() {
+  return useContext(TldrawUiOrientationContext);
+}
+const TldrawUiRow = forwardRef(
+  ({ asChild, className, tooltipSide, ...props }, ref) => {
+    const Component = asChild ? Slot.Root : "div";
+    return /* @__PURE__ */ jsx(TldrawUiOrientationProvider, { orientation: "horizontal", tooltipSide, children: /* @__PURE__ */ jsx(Component, { ref, className: classNames("tlui-row", className), ...props }) });
+  }
+);
+const TldrawUiColumn = forwardRef(
+  ({ asChild, className, tooltipSide, ...props }, ref) => {
+    const Component = asChild ? Slot.Root : "div";
+    return /* @__PURE__ */ jsx(TldrawUiOrientationProvider, { orientation: "vertical", tooltipSide, children: /* @__PURE__ */ jsx(Component, { ref, className: classNames("tlui-column", className), ...props }) });
+  }
+);
+const TldrawUiGrid = forwardRef(
+  ({ asChild, className, tooltipSide, ...props }, ref) => {
+    const Component = asChild ? Slot.Root : "div";
+    return /* @__PURE__ */ jsx(TldrawUiOrientationProvider, { orientation: "horizontal", tooltipSide, children: /* @__PURE__ */ jsx(Component, { ref, className: classNames("tlui-grid", className), ...props }) });
+  }
+);
+export {
+  TldrawUiColumn,
+  TldrawUiGrid,
+  TldrawUiOrientationProvider,
+  TldrawUiRow,
+  useTldrawUiOrientation
+};
+//# sourceMappingURL=layout.mjs.map

package/dist-esm/lib/ui/components/primitives/layout.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/layout.tsx"],
+  "sourcesContent": ["import classNames from 'classnames'\nimport { Slot } from 'radix-ui'\nimport { HTMLAttributes, ReactNode, createContext, forwardRef, useContext } from 'react'\n\n/** @public */\nexport interface TldrawUiOrientationContext {\n\torientation: 'horizontal' | 'vertical'\n\ttooltipSide: 'top' | 'right' | 'bottom' | 'left'\n}\n\nconst TldrawUiOrientationContext = createContext<TldrawUiOrientationContext>({\n\torientation: 'horizontal',\n\ttooltipSide: 'bottom',\n})\n\n/** @public */\nexport interface TldrawUiOrientationProviderProps {\n\tchildren: ReactNode\n\torientation: 'horizontal' | 'vertical'\n\ttooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n}\n/** @public @react */\nexport function TldrawUiOrientationProvider({\n\tchildren,\n\torientation,\n\ttooltipSide,\n}: TldrawUiOrientationProviderProps) {\n\tconst prevContext = useTldrawUiOrientation()\n\t// generally, we want tooltip side to cascade down through the layout - apart from when the\n\t// orientation changes. If the tooltip side is \"bottom\", and then I include some vertical layout\n\t// elements, keeping the tooltip side as bottom will cause the tooltip to overlap elements\n\t// stacked on top of each other. In the absence of a tooltip side, we pick a default side based\n\t// on the orientation whenever the orientation changes.\n\tconst tooltipSideToUse =\n\t\ttooltipSide ??\n\t\t(orientation === prevContext.orientation\n\t\t\t? prevContext.tooltipSide\n\t\t\t: orientation === 'horizontal'\n\t\t\t\t? 'bottom'\n\t\t\t\t: 'right')\n\n\treturn (\n\t\t<TldrawUiOrientationContext.Provider value={{ orientation, tooltipSide: tooltipSideToUse }}>\n\t\t\t{children}\n\t\t</TldrawUiOrientationContext.Provider>\n\t)\n}\n\n/** @public */\nexport function useTldrawUiOrientation() {\n\treturn useContext(TldrawUiOrientationContext)\n}\n\n/** @public */\nexport interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {\n\tchildren: ReactNode\n\ttooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n\tasChild?: boolean\n}\n\n/**\n * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.\n *\n * @public @react\n */\nexport const TldrawUiRow = forwardRef<HTMLDivElement, TLUiLayoutProps>(\n\t({ asChild, className, tooltipSide, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot.Root : 'div'\n\t\treturn (\n\t\t\t<TldrawUiOrientationProvider orientation=\"horizontal\" tooltipSide={tooltipSide}>\n\t\t\t\t<Component ref={ref} className={classNames('tlui-row', className)} {...props} />\n\t\t\t</TldrawUiOrientationProvider>\n\t\t)\n\t}\n)\n\n/**\n * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.\n *\n * @public @react\n */\nexport const TldrawUiColumn = forwardRef<HTMLDivElement, TLUiLayoutProps>(\n\t({ asChild, className, tooltipSide, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot.Root : 'div'\n\t\treturn (\n\t\t\t<TldrawUiOrientationProvider orientation=\"vertical\" tooltipSide={tooltipSide}>\n\t\t\t\t<Component ref={ref} className={classNames('tlui-column', className)} {...props} />\n\t\t\t</TldrawUiOrientationProvider>\n\t\t)\n\t}\n)\n\n/**\n * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,\n * etc.\n *\n * @public @react */\nexport const TldrawUiGrid = forwardRef<HTMLDivElement, TLUiLayoutProps>(\n\t({ asChild, className, tooltipSide, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot.Root : 'div'\n\t\treturn (\n\t\t\t<TldrawUiOrientationProvider orientation=\"horizontal\" tooltipSide={tooltipSide}>\n\t\t\t\t<Component ref={ref} className={classNames('tlui-grid', className)} {...props} />\n\t\t\t</TldrawUiOrientationProvider>\n\t\t)\n\t}\n)\n"],
+  "mappings": "AA0CE;AA1CF,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,SAAoC,eAAe,YAAY,kBAAkB;AAQjF,MAAM,6BAA6B,cAA0C;AAAA,EAC5E,aAAa;AAAA,EACb,aAAa;AACd,CAAC;AASM,SAAS,4BAA4B;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AACD,GAAqC;AACpC,QAAM,cAAc,uBAAuB;AAM3C,QAAM,mBACL,gBACC,gBAAgB,YAAY,cAC1B,YAAY,cACZ,gBAAgB,eACf,WACA;AAEL,SACC,oBAAC,2BAA2B,UAA3B,EAAoC,OAAO,EAAE,aAAa,aAAa,iBAAiB,GACvF,UACF;AAEF;AAGO,SAAS,yBAAyB;AACxC,SAAO,WAAW,0BAA0B;AAC7C;AAcO,MAAM,cAAc;AAAA,EAC1B,CAAC,EAAE,SAAS,WAAW,aAAa,GAAG,MAAM,GAAG,QAAQ;AACvD,UAAM,YAAY,UAAU,KAAK,OAAO;AACxC,WACC,oBAAC,+BAA4B,aAAY,cAAa,aACrD,8BAAC,aAAU,KAAU,WAAW,WAAW,YAAY,SAAS,GAAI,GAAG,OAAO,GAC/E;AAAA,EAEF;AACD;AAOO,MAAM,iBAAiB;AAAA,EAC7B,CAAC,EAAE,SAAS,WAAW,aAAa,GAAG,MAAM,GAAG,QAAQ;AACvD,UAAM,YAAY,UAAU,KAAK,OAAO;AACxC,WACC,oBAAC,+BAA4B,aAAY,YAAW,aACnD,8BAAC,aAAU,KAAU,WAAW,WAAW,eAAe,SAAS,GAAI,GAAG,OAAO,GAClF;AAAA,EAEF;AACD;AAOO,MAAM,eAAe;AAAA,EAC3B,CAAC,EAAE,SAAS,WAAW,aAAa,GAAG,MAAM,GAAG,QAAQ;AACvD,UAAM,YAAY,UAAU,KAAK,OAAO;AACxC,WACC,oBAAC,+BAA4B,aAAY,cAAa,aACrD,8BAAC,aAAU,KAAU,WAAW,WAAW,aAAa,SAAS,GAAI,GAAG,OAAO,GAChF;AAAA,EAEF;AACD;",
+  "names": []
+}

package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs

@@ -2,26 +2,35 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import { unwrapLabel } from "../../../context/actions.mjs";
 import { useTranslation } from "../../../hooks/useTranslation/useTranslation.mjs";
+import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow, useTldrawUiOrientation } from "../layout.mjs";
 import { TldrawUiDropdownMenuGroup } from "../TldrawUiDropdownMenu.mjs";
 import { useTldrawUiMenuContext } from "./TldrawUiMenuContext.mjs";
 function TldrawUiMenuGroup({ id, label, className, children }) {
-  const { type: menuType, sourceId } = useTldrawUiMenuContext();
+  const menu = useTldrawUiMenuContext();
+  const { orientation } = useTldrawUiOrientation();
   const msg = useTranslation();
-  const labelToUse = unwrapLabel(label, menuType);
+  const labelToUse = unwrapLabel(label, menu.type);
   const labelStr = labelToUse ? msg(labelToUse) : void 0;
-  switch (menuType) {
+  switch (menu.type) {
     case "panel": {
       return /* @__PURE__ */ jsx(
         "div",
         {
           className: classNames("tlui-menu__group", className),
-          "data-testid": `${sourceId}-group.${id}`,
+          "data-testid": `${menu.sourceId}-group.${id}`,
           children
         }
       );
     }
     case "menu": {
-      return /* @__PURE__ */ jsx(TldrawUiDropdownMenuGroup, { className, "data-testid": `${sourceId}-group.${id}`, children });
+      return /* @__PURE__ */ jsx(
+        TldrawUiDropdownMenuGroup,
+        {
+          className,
+          "data-testid": `${menu.sourceId}-group.${id}`,
+          children
+        }
+      );
     }
     case "context-menu": {
       return /* @__PURE__ */ jsx(
@@ -29,17 +38,31 @@ function TldrawUiMenuGroup({ id, label, className, children }) {
         {
           dir: "ltr",
           className: classNames("tlui-menu__group", className),
-          "data-testid": `${sourceId}-group.${id}`,
+          "data-testid": `${menu.sourceId}-group.${id}`,
           children
         }
       );
     }
     case "keyboard-shortcuts": {
-      return /* @__PURE__ */ jsxs("div", { className: "tlui-shortcuts-dialog__group", "data-testid": `${sourceId}-group.${id}`, children: [
+      return /* @__PURE__ */ jsxs("div", { className: "tlui-shortcuts-dialog__group", "data-testid": `${menu.sourceId}-group.${id}`, children: [
         /* @__PURE__ */ jsx("h2", { className: "tlui-shortcuts-dialog__group__title", children: labelStr }),
         /* @__PURE__ */ jsx("div", { className: "tlui-shortcuts-dialog__group__content", children })
       ] });
     }
+    case "toolbar": {
+      const Layout = orientation === "horizontal" ? TldrawUiRow : TldrawUiColumn;
+      return /* @__PURE__ */ jsx(Layout, { className: "tlui-main-toolbar__group", "data-testid": `${menu.sourceId}-group.${id}`, children });
+    }
+    case "toolbar-overflow": {
+      return /* @__PURE__ */ jsx(
+        TldrawUiGrid,
+        {
+          className: "tlui-main-toolbar__group",
+          "data-testid": `${menu.sourceId}-group.${id}`,
+          children
+        }
+      );
+    }
     default: {
       return children;
     }

package/dist-esm/lib/ui/components/primitives/menus/TldrawUiMenuGroup.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx"],
-  "sourcesContent": ["import classNames from 'classnames'\nimport { ReactNode } from 'react'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuGroupProps<TranslationKey extends string = string> {\n\tid: string\n\t/**\n\t * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.\n\t */\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\tconst msg = useTranslation()\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\tswitch (menuType) {\n\t\tcase 'panel': {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames('tlui-menu__group', className)}\n\t\t\t\t\tdata-testid={`${sourceId}-group.${id}`}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiDropdownMenuGroup className={className} data-testid={`${sourceId}-group.${id}`}>\n\t\t\t\t\t{children}\n\t\t\t\t</TldrawUiDropdownMenuGroup>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName={classNames('tlui-menu__group', className)}\n\t\t\t\t\tdata-testid={`${sourceId}-group.${id}`}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'keyboard-shortcuts': {\n\t\t\t// todo: if groups need a label, let's give em a label\n\t\t\treturn (\n\t\t\t\t<div className=\"tlui-shortcuts-dialog__group\" data-testid={`${sourceId}-group.${id}`}>\n\t\t\t\t\t<h2 className=\"tlui-shortcuts-dialog__group__title\">{labelStr}</h2>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__group__content\">{children}</div>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\treturn children\n\t\t}\n\t}\n}\n"],
-  "mappings": "AA6BI,cA6BA,YA7BA;AA7BJ,OAAO,gBAAgB;AAEvB,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AAchC,SAAS,kBAAkB,EAAE,IAAI,OAAO,WAAW,SAAS,GAAuB;AACzF,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI,uBAAuB;AAC5D,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY,OAAO,QAAQ;AAC9C,QAAM,WAAW,aAAa,IAAI,UAAgC,IAAI;AAEtE,UAAQ,UAAU;AAAA,IACjB,KAAK,SAAS;AACb,aACC;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,oBAAoB,SAAS;AAAA,UACnD,eAAa,GAAG,QAAQ,UAAU,EAAE;AAAA,UAEnC;AAAA;AAAA,MACF;AAAA,IAEF;AAAA,IACA,KAAK,QAAQ;AACZ,aACC,oBAAC,6BAA0B,WAAsB,eAAa,GAAG,QAAQ,UAAU,EAAE,IACnF,UACF;AAAA,IAEF;AAAA,IACA,KAAK,gBAAgB;AACpB,aACC;AAAA,QAAC;AAAA;AAAA,UACA,KAAI;AAAA,UACJ,WAAW,WAAW,oBAAoB,SAAS;AAAA,UACnD,eAAa,GAAG,QAAQ,UAAU,EAAE;AAAA,UAEnC;AAAA;AAAA,MACF;AAAA,IAEF;AAAA,IACA,KAAK,sBAAsB;AAE1B,aACC,qBAAC,SAAI,WAAU,gCAA+B,eAAa,GAAG,QAAQ,UAAU,EAAE,IACjF;AAAA,4BAAC,QAAG,WAAU,uCAAuC,oBAAS;AAAA,QAC9D,oBAAC,SAAI,WAAU,yCAAyC,UAAS;AAAA,SAClE;AAAA,IAEF;AAAA,IACA,SAAS;AACR,aAAO;AAAA,IACR;AAAA,EACD;AACD;",
+  "sourcesContent": ["import classNames from 'classnames'\nimport { ReactNode } from 'react'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { TldrawUiColumn, TldrawUiGrid, TldrawUiRow, useTldrawUiOrientation } from '../layout'\nimport { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuGroupProps<TranslationKey extends string = string> {\n\tid: string\n\t/**\n\t * The label to display on the item. If it's a string, it will be translated. If it's an object, the keys will be used as the language keys and the values will be translated.\n\t */\n\tlabel?: TranslationKey | { [key: string]: TranslationKey }\n\tclassName?: string\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps) {\n\tconst menu = useTldrawUiMenuContext()\n\tconst { orientation } = useTldrawUiOrientation()\n\tconst msg = useTranslation()\n\tconst labelToUse = unwrapLabel(label, menu.type)\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\n\tswitch (menu.type) {\n\t\tcase 'panel': {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames('tlui-menu__group', className)}\n\t\t\t\t\tdata-testid={`${menu.sourceId}-group.${id}`}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiDropdownMenuGroup\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tdata-testid={`${menu.sourceId}-group.${id}`}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</TldrawUiDropdownMenuGroup>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName={classNames('tlui-menu__group', className)}\n\t\t\t\t\tdata-testid={`${menu.sourceId}-group.${id}`}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'keyboard-shortcuts': {\n\t\t\t// todo: if groups need a label, let's give em a label\n\t\t\treturn (\n\t\t\t\t<div className=\"tlui-shortcuts-dialog__group\" data-testid={`${menu.sourceId}-group.${id}`}>\n\t\t\t\t\t<h2 className=\"tlui-shortcuts-dialog__group__title\">{labelStr}</h2>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__group__content\">{children}</div>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar': {\n\t\t\tconst Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn\n\t\t\treturn (\n\t\t\t\t<Layout className=\"tlui-main-toolbar__group\" data-testid={`${menu.sourceId}-group.${id}`}>\n\t\t\t\t\t{children}\n\t\t\t\t</Layout>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar-overflow': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiGrid\n\t\t\t\t\tclassName=\"tlui-main-toolbar__group\"\n\t\t\t\t\tdata-testid={`${menu.sourceId}-group.${id}`}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</TldrawUiGrid>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\treturn children\n\t\t}\n\t}\n}\n"],
+  "mappings": "AA+BI,cAgCA,YAhCA;AA/BJ,OAAO,gBAAgB;AAEvB,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB,cAAc,aAAa,8BAA8B;AAClF,SAAS,iCAAiC;AAC1C,SAAS,8BAA8B;AAchC,SAAS,kBAAkB,EAAE,IAAI,OAAO,WAAW,SAAS,GAAuB;AACzF,QAAM,OAAO,uBAAuB;AACpC,QAAM,EAAE,YAAY,IAAI,uBAAuB;AAC/C,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY,OAAO,KAAK,IAAI;AAC/C,QAAM,WAAW,aAAa,IAAI,UAAgC,IAAI;AAEtE,UAAQ,KAAK,MAAM;AAAA,IAClB,KAAK,SAAS;AACb,aACC;AAAA,QAAC;AAAA;AAAA,UACA,WAAW,WAAW,oBAAoB,SAAS;AAAA,UACnD,eAAa,GAAG,KAAK,QAAQ,UAAU,EAAE;AAAA,UAExC;AAAA;AAAA,MACF;AAAA,IAEF;AAAA,IACA,KAAK,QAAQ;AACZ,aACC;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,eAAa,GAAG,KAAK,QAAQ,UAAU,EAAE;AAAA,UAExC;AAAA;AAAA,MACF;AAAA,IAEF;AAAA,IACA,KAAK,gBAAgB;AACpB,aACC;AAAA,QAAC;AAAA;AAAA,UACA,KAAI;AAAA,UACJ,WAAW,WAAW,oBAAoB,SAAS;AAAA,UACnD,eAAa,GAAG,KAAK,QAAQ,UAAU,EAAE;AAAA,UAExC;AAAA;AAAA,MACF;AAAA,IAEF;AAAA,IACA,KAAK,sBAAsB;AAE1B,aACC,qBAAC,SAAI,WAAU,gCAA+B,eAAa,GAAG,KAAK,QAAQ,UAAU,EAAE,IACtF;AAAA,4BAAC,QAAG,WAAU,uCAAuC,oBAAS;AAAA,QAC9D,oBAAC,SAAI,WAAU,yCAAyC,UAAS;AAAA,SAClE;AAAA,IAEF;AAAA,IACA,KAAK,WAAW;AACf,YAAM,SAAS,gBAAgB,eAAe,cAAc;AAC5D,aACC,oBAAC,UAAO,WAAU,4BAA2B,eAAa,GAAG,KAAK,QAAQ,UAAU,EAAE,IACpF,UACF;AAAA,IAEF;AAAA,IACA,KAAK,oBAAoB;AACxB,aACC;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,eAAa,GAAG,KAAK,QAAQ,UAAU,EAAE;AAAA,UAExC;AAAA;AAAA,MACF;AAAA,IAEF;AAAA,IACA,SAAS;AACR,aAAO;AAAA,IACR;AAAA,EACD;AACD;",
   "names": []
 }