tldraw 3.16.0-canary.aa1aff3ffe55 → 3.16.0-canary.da3348c13973

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

@@ -0,0 +1,254 @@
+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, useContext, useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "../../../shapes/shared/usePrefersReducedMotion.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" })
+        ]
+      }
+    )
+  ] });
+}
+function TldrawUiTooltip({
+  children,
+  content,
+  side = "bottom",
+  sideOffset = 5,
+  disabled = false
+}) {
+  const editor = useMaybeEditor();
+  const tooltipId = useRef(uniqueId());
+  const hasProvider = useContext(TooltipSingletonContext);
+  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, children }),
+          /* @__PURE__ */ jsxs(
+            _Tooltip.Content,
+            {
+              className: "tlui-tooltip",
+              side,
+              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,
+      side,
+      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,
+      side,
+      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, useContext, useEffect, useRef, useState } from 'react'\nimport { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'\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 function TldrawUiTooltip({\n\tchildren,\n\tcontent,\n\tside = 'bottom',\n\tsideOffset = 5,\n\tdisabled = false,\n}: TldrawUiTooltipProps) {\n\tconst editor = useMaybeEditor()\n\tconst tooltipId = useRef<string>(uniqueId())\n\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\tif (disabled || !content) {\n\t\treturn <>{children}</>\n\t}\n\n\t// Fallback to old behavior if no provider\n\tif (!hasProvider) {\n\t\treturn (\n\t\t\t<_Tooltip.Root\n\t\t\t\tdelayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}\n\t\t\t\tdisableHoverableContent\n\t\t\t>\n\t\t\t\t<_Tooltip.Trigger asChild>{children}</_Tooltip.Trigger>\n\t\t\t\t<_Tooltip.Content\n\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\tside={side}\n\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\tavoidCollisions\n\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t</_Tooltip.Content>\n\t\t\t</_Tooltip.Root>\n\t\t)\n\t}\n\n\tconst child = React.Children.only(children)\n\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\tchild.props.onMouseEnter?.(event)\n\t\ttooltipManager.showTooltip(\n\t\t\ttooltipId.current,\n\t\t\tcontent,\n\t\t\tevent.currentTarget as HTMLElement,\n\t\t\tside,\n\t\t\tsideOffset\n\t\t)\n\t}\n\n\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\tchild.props.onMouseLeave?.(event)\n\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t}\n\n\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\tchild.props.onFocus?.(event)\n\t\ttooltipManager.showTooltip(\n\t\t\ttooltipId.current,\n\t\t\tcontent,\n\t\t\tevent.currentTarget as HTMLElement,\n\t\t\tside,\n\t\t\tsideOffset\n\t\t)\n\t}\n\n\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\tchild.props.onBlur?.(event)\n\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t}\n\n\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\tonMouseEnter: handleMouseEnter,\n\t\tonMouseLeave: handleMouseLeave,\n\t\tonFocus: handleFocus,\n\t\tonBlur: handleBlur,\n\t})\n\n\treturn childrenWithHandlers\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { Slot } from "radix-ui";
+import { forwardRef } from "react";
+const TldrawUiRow = forwardRef(
+  ({ asChild, className, ...props }, ref) => {
+    const Component = asChild ? Slot.Root : "div";
+    return /* @__PURE__ */ jsx(Component, { ref, className: classNames("tlui-row", className), ...props });
+  }
+);
+const TldrawUiGrid = forwardRef(
+  ({ asChild, className, ...props }, ref) => {
+    const Component = asChild ? Slot.Root : "div";
+    return /* @__PURE__ */ jsx(Component, { ref, className: classNames("tlui-grid", className), ...props });
+  }
+);
+export {
+  TldrawUiGrid,
+  TldrawUiRow
+};
+//# 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, forwardRef } from 'react'\n\n/** @public */\nexport interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {\n\tchildren: ReactNode\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, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot.Root : 'div'\n\t\treturn <Component ref={ref} className={classNames('tlui-row', className)} {...props} />\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, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot.Root : 'div'\n\t\treturn <Component ref={ref} className={classNames('tlui-grid', className)} {...props} />\n\t}\n)\n"],
+  "mappings": "AAkBS;AAlBT,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,SAAoC,kBAAkB;AAa/C,MAAM,cAAc;AAAA,EAC1B,CAAC,EAAE,SAAS,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,YAAY,UAAU,KAAK,OAAO;AACxC,WAAO,oBAAC,aAAU,KAAU,WAAW,WAAW,YAAY,SAAS,GAAI,GAAG,OAAO;AAAA,EACtF;AACD;AAOO,MAAM,eAAe;AAAA,EAC3B,CAAC,EAAE,SAAS,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC1C,UAAM,YAAY,UAAU,KAAK,OAAO;AACxC,WAAO,oBAAC,aAAU,KAAU,WAAW,WAAW,aAAa,SAAS,GAAI,GAAG,OAAO;AAAA,EACvF;AACD;",
+  "names": []
+}

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

@@ -1,7 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { exhaustiveSwitchError, preventDefault } from "@tldraw/editor";
+import {
+  exhaustiveSwitchError,
+  getPointerInfo,
+  preventDefault,
+  useEditor,
+  Vec
+} from "@tldraw/editor";
 import { ContextMenu as _ContextMenu } from "radix-ui";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { unwrapLabel } from "../../../context/actions.mjs";
 import { useReadonly } from "../../../hooks/useReadonly.mjs";
 import { useTranslation } from "../../../hooks/useTranslation/useTranslation.mjs";
@@ -13,6 +19,7 @@ import { TldrawUiButtonLabel } from "../Button/TldrawUiButtonLabel.mjs";
 import { TldrawUiDropdownMenuItem } from "../TldrawUiDropdownMenu.mjs";
 import { TldrawUiKbd } from "../TldrawUiKbd.mjs";
 import { TldrawUiToolbarButton } from "../TldrawUiToolbar.mjs";
+import { tooltipManager } from "../TldrawUiTooltip.mjs";
 import { useTldrawUiMenuContext } from "./TldrawUiMenuContext.mjs";
 function TldrawUiMenuItem({
   disabled = false,
@@ -25,7 +32,8 @@ function TldrawUiMenuItem({
   iconLeft,
   onSelect,
   noClose,
-  isSelected
+  isSelected,
+  onDragStart
 }) {
   const { type: menuType, sourceId } = useTldrawUiMenuContext();
   const msg = useTranslation();
@@ -139,6 +147,21 @@ function TldrawUiMenuItem({
       ] });
     }
     case "toolbar": {
+      if (onDragStart) {
+        return /* @__PURE__ */ jsx(
+          DraggableToolbarButton,
+          {
+            id,
+            icon,
+            onSelect,
+            onDragStart,
+            labelToUse,
+            titleStr,
+            disabled,
+            isSelected
+          }
+        );
+      }
       return /* @__PURE__ */ jsx(
         TldrawUiToolbarButton,
         {
@@ -159,13 +182,28 @@ function TldrawUiMenuItem({
       );
     }
     case "toolbar-overflow": {
+      if (onDragStart) {
+        return /* @__PURE__ */ jsx(
+          DraggableToolbarButton,
+          {
+            id,
+            icon,
+            onSelect,
+            onDragStart,
+            labelToUse,
+            titleStr,
+            disabled,
+            isSelected,
+            overflow: true
+          }
+        );
+      }
       return /* @__PURE__ */ jsx(
         TldrawUiToolbarButton,
         {
           "aria-label": labelStr,
           "aria-pressed": isSelected ? "true" : "false",
           isActive: isSelected,
-          className: "tlui-button-grid__button",
           "data-testid": `tools.more.${id}`,
           "data-value": id,
           disabled,
@@ -181,6 +219,124 @@ function TldrawUiMenuItem({
     }
   }
 }
+function useDraggableEvents(onDragStart, onSelect) {
+  const editor = useEditor();
+  const events = useMemo(() => {
+    let state = { name: "idle" };
+    function handlePointerDown(e) {
+      state = {
+        name: "pointing",
+        screenSpaceStart: { x: e.clientX, y: e.clientY }
+      };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    }
+    function handlePointerMove(e) {
+      if (e.isSpecialRedispatchedEvent) return;
+      if (state.name === "pointing") {
+        const distanceSq = Vec.Dist2(state.screenSpaceStart, { x: e.clientX, y: e.clientY });
+        if (distanceSq > (editor.getInstanceState().isCoarsePointer ? editor.options.coarseDragDistanceSquared : editor.options.dragDistanceSquared)) {
+          const screenSpaceStart = state.screenSpaceStart;
+          state = {
+            name: "dragging",
+            screenSpaceStart
+          };
+          editor.run(() => {
+            editor.dispatch({
+              type: "pointer",
+              target: "canvas",
+              name: "pointer_down",
+              ...getPointerInfo(e),
+              point: screenSpaceStart
+            });
+            editor.selectNone();
+            onDragStart?.("toolbar", {
+              type: "pointer",
+              target: "canvas",
+              name: "pointer_move",
+              ...getPointerInfo(e),
+              point: screenSpaceStart
+            });
+            tooltipManager.hideAllTooltips();
+          });
+        }
+      }
+    }
+    function handlePointerUp(e) {
+      if (e.isSpecialRedispatchedEvent) return;
+      e.currentTarget.releasePointerCapture(e.pointerId);
+      editor.dispatch({
+        type: "pointer",
+        target: "canvas",
+        name: "pointer_up",
+        ...getPointerInfo(e)
+      });
+    }
+    function handleClick() {
+      if (state.name === "dragging" || state.name === "dragged") {
+        state = { name: "idle" };
+        return true;
+      }
+      state = { name: "idle" };
+      onSelect?.("toolbar");
+    }
+    return {
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onClick: handleClick
+    };
+  }, [onDragStart, editor, onSelect]);
+  return events;
+}
+function DraggableToolbarButton({
+  id,
+  labelToUse,
+  titleStr,
+  disabled,
+  isSelected,
+  icon,
+  onSelect,
+  onDragStart,
+  overflow
+}) {
+  const events = useDraggableEvents(onDragStart, onSelect);
+  if (overflow) {
+    return /* @__PURE__ */ jsx(
+      TldrawUiToolbarButton,
+      {
+        "aria-label": labelToUse,
+        "aria-pressed": isSelected ? "true" : "false",
+        isActive: isSelected,
+        className: "tlui-button-grid__button",
+        "data-testid": `tools.more.${id}`,
+        "data-value": id,
+        disabled,
+        title: titleStr,
+        type: "icon",
+        ...events,
+        children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    TldrawUiToolbarButton,
+    {
+      "aria-label": labelToUse,
+      "aria-pressed": isSelected ? "true" : "false",
+      "data-testid": `tools.${id}`,
+      "data-value": id,
+      disabled,
+      onTouchStart: (e) => {
+        preventDefault(e);
+        onSelect("toolbar");
+      },
+      title: titleStr,
+      type: "tool",
+      ...events,
+      children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon })
+    }
+  );
+}
 export {
   TldrawUiMenuItem
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx"],
-  "sourcesContent": ["import { exhaustiveSwitchError, preventDefault } from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu } from 'radix-ui'\nimport { useState } from 'react'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../../kbd-utils'\nimport { Spinner } from '../../Spinner'\nimport { TldrawUiButton } from '../Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'\nimport { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'\nimport { TLUiIconJsx } from '../TldrawUiIcon'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { TldrawUiToolbarButton } from '../TldrawUiToolbar'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\tid: string\n\t/**\n\t * The icon to display on the item. Icons are only shown in certain menu types.\n\t */\n\ticon?: IconType | TLUiIconJsx\n\t/**\n\t * An icon to display to the left of the menu item.\n\t */\n\ticonLeft?: IconType | TLUiIconJsx\n\t/**\n\t * The keyboard shortcut to display on the item.\n\t */\n\tkbd?: 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\t/**\n\t * If the editor is in readonly mode and the item is not marked as readonlyok, it will not be rendered.\n\t */\n\treadonlyOk?: boolean\n\t/**\n\t * The function to call when the item is clicked.\n\t */\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\t/**\n\t * Whether this item should be disabled.\n\t */\n\tdisabled?: boolean\n\t/**\n\t * Prevent the menu from closing when the item is clicked\n\t */\n\tnoClose?: boolean\n\t/**\n\t * Whether to show a spinner on the item.\n\t */\n\tspinner?: boolean\n\t/**\n\t * Whether the item is selected.\n\t */\n\tisSelected?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiMenuItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tdisabled = false,\n\tspinner = false,\n\treadonlyOk = false,\n\tid,\n\tkbd,\n\tlabel,\n\ticon,\n\ticonLeft,\n\tonSelect,\n\tnoClose,\n\tisSelected,\n}: TLUiMenuItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\n\tconst msg = useTranslation()\n\n\tconst [disableClicks, setDisableClicks] = useState(false)\n\n\tconst isReadonlyMode = useReadonly()\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst kbdToUse = kbd ? kbdStr(kbd) : undefined\n\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\tconst titleStr = labelStr && kbdToUse ? `${labelStr} ${kbdToUse}` : labelStr\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\tif (noClose) {\n\t\t\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\t// Hide disabled context menu items\n\t\t\tif (disabled) return null\n\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.Item\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu\"\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tif (noClose) preventDefault(e)\n\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t</span>\n\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t{spinner && <Spinner />}\n\t\t\t\t</_ContextMenu.Item>\n\t\t\t)\n\t\t}\n\t\tcase 'panel': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t{spinner ? <Spinner /> : icon && <TldrawUiButtonIcon icon={icon} />}\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'small-icons':\n\t\tcase 'icons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} small />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'keyboard-shortcuts': {\n\t\t\tif (!kbd) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Menu item '${label}' isn't shown in the keyboard shortcuts dialog because it doesn't have a keyboard shortcut.`\n\t\t\t\t)\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair\" data-testid={`${sourceId}.${id}`}>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__key\">{labelStr}</div>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__value\">\n\t\t\t\t\t\t<TldrawUiKbd visibleOnMobileLayout>{kbd}</TldrawUiKbd>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'helper-buttons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton type=\"low\" onClick={() => onSelect(sourceId)}>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tdata-testid={`tools.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\tonTouchStart={(e) => {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\tonSelect('toolbar')\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar-overflow': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tisActive={isSelected}\n\t\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\tthrow exhaustiveSwitchError(menuType)\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\texhaustiveSwitchError,\n\tgetPointerInfo,\n\tpreventDefault,\n\tTLPointerEventInfo,\n\tuseEditor,\n\tVec,\n\tVecModel,\n} from '@tldraw/editor'\nimport { ContextMenu as _ContextMenu } from 'radix-ui'\nimport { useMemo, useState } from 'react'\nimport { unwrapLabel } from '../../../context/actions'\nimport { TLUiEventSource } from '../../../context/events'\nimport { useReadonly } from '../../../hooks/useReadonly'\nimport { TLUiToolItem } from '../../../hooks/useTools'\nimport { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../../hooks/useTranslation/useTranslation'\nimport { kbdStr } from '../../../kbd-utils'\nimport { Spinner } from '../../Spinner'\nimport { TldrawUiButton } from '../Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'\nimport { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'\nimport { TLUiIconJsx } from '../TldrawUiIcon'\nimport { TldrawUiKbd } from '../TldrawUiKbd'\nimport { TldrawUiToolbarButton } from '../TldrawUiToolbar'\nimport { tooltipManager } from '../TldrawUiTooltip'\nimport { useTldrawUiMenuContext } from './TldrawUiMenuContext'\n\n/** @public */\nexport interface TLUiMenuItemProps<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n> {\n\tid: string\n\t/**\n\t * The icon to display on the item. Icons are only shown in certain menu types.\n\t */\n\ticon?: IconType | TLUiIconJsx\n\t/**\n\t * An icon to display to the left of the menu item.\n\t */\n\ticonLeft?: IconType | TLUiIconJsx\n\t/**\n\t * The keyboard shortcut to display on the item.\n\t */\n\tkbd?: 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\t/**\n\t * If the editor is in readonly mode and the item is not marked as readonlyok, it will not be rendered.\n\t */\n\treadonlyOk?: boolean\n\t/**\n\t * The function to call when the item is clicked.\n\t */\n\tonSelect(source: TLUiEventSource): Promise<void> | void\n\t/**\n\t * Whether this item should be disabled.\n\t */\n\tdisabled?: boolean\n\t/**\n\t * Prevent the menu from closing when the item is clicked\n\t */\n\tnoClose?: boolean\n\t/**\n\t * Whether to show a spinner on the item.\n\t */\n\tspinner?: boolean\n\t/**\n\t * Whether the item is selected.\n\t */\n\tisSelected?: boolean\n\t/**\n\t * The function to call when the item is dragged. If this is provided, the item will be draggable.\n\t */\n\tonDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void\n}\n\n/** @public @react */\nexport function TldrawUiMenuItem<\n\tTranslationKey extends string = string,\n\tIconType extends string = string,\n>({\n\tdisabled = false,\n\tspinner = false,\n\treadonlyOk = false,\n\tid,\n\tkbd,\n\tlabel,\n\ticon,\n\ticonLeft,\n\tonSelect,\n\tnoClose,\n\tisSelected,\n\tonDragStart,\n}: TLUiMenuItemProps<TranslationKey, IconType>) {\n\tconst { type: menuType, sourceId } = useTldrawUiMenuContext()\n\n\tconst msg = useTranslation()\n\n\tconst [disableClicks, setDisableClicks] = useState(false)\n\n\tconst isReadonlyMode = useReadonly()\n\tif (isReadonlyMode && !readonlyOk) return null\n\n\tconst labelToUse = unwrapLabel(label, menuType)\n\tconst kbdToUse = kbd ? kbdStr(kbd) : undefined\n\n\tconst labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined\n\tconst titleStr = labelStr && kbdToUse ? `${labelStr} ${kbdToUse}` : labelStr\n\n\tswitch (menuType) {\n\t\tcase 'menu': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiDropdownMenuItem>\n\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\tif (noClose) {\n\t\t\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t</TldrawUiDropdownMenuItem>\n\t\t\t)\n\t\t}\n\t\tcase 'context-menu': {\n\t\t\t// Hide disabled context menu items\n\t\t\tif (disabled) return null\n\n\t\t\treturn (\n\t\t\t\t<_ContextMenu.Item\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdraggable={false}\n\t\t\t\t\tclassName=\"tlui-button tlui-button__menu\"\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\tif (noClose) preventDefault(e)\n\t\t\t\t\t\tif (disableClicks) {\n\t\t\t\t\t\t\tsetDisableClicks(false)\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonSelect(sourceId)\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"tlui-button__label\" draggable={false}>\n\t\t\t\t\t\t{labelStr}\n\t\t\t\t\t</span>\n\t\t\t\t\t{iconLeft && <TldrawUiButtonIcon icon={iconLeft} small />}\n\t\t\t\t\t{kbd && <TldrawUiKbd>{kbd}</TldrawUiKbd>}\n\t\t\t\t\t{spinner && <Spinner />}\n\t\t\t\t</_ContextMenu.Item>\n\t\t\t)\n\t\t}\n\t\tcase 'panel': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t\t{spinner ? <Spinner /> : icon && <TldrawUiButtonIcon icon={icon} />}\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'small-icons':\n\t\tcase 'icons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\tdata-testid={`${sourceId}.${id}`}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect(sourceId)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} small />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'keyboard-shortcuts': {\n\t\t\tif (!kbd) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t`Menu item '${label}' isn't shown in the keyboard shortcuts dialog because it doesn't have a keyboard shortcut.`\n\t\t\t\t)\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair\" data-testid={`${sourceId}.${id}`}>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__key\">{labelStr}</div>\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__value\">\n\t\t\t\t\t\t<TldrawUiKbd visibleOnMobileLayout>{kbd}</TldrawUiKbd>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t)\n\t\t}\n\t\tcase 'helper-buttons': {\n\t\t\treturn (\n\t\t\t\t<TldrawUiButton type=\"low\" onClick={() => onSelect(sourceId)}>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t\t<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>\n\t\t\t\t</TldrawUiButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar': {\n\t\t\tif (onDragStart) {\n\t\t\t\treturn (\n\t\t\t\t\t<DraggableToolbarButton\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\tlabelToUse={labelToUse}\n\t\t\t\t\t\ttitleStr={titleStr}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisSelected={isSelected}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tdata-testid={`tools.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\tonTouchStart={(e) => {\n\t\t\t\t\t\tpreventDefault(e)\n\t\t\t\t\t\tonSelect('toolbar')\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tcase 'toolbar-overflow': {\n\t\t\tif (onDragStart) {\n\t\t\t\treturn (\n\t\t\t\t\t<DraggableToolbarButton\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\tonDragStart={onDragStart}\n\t\t\t\t\t\tlabelToUse={labelToUse}\n\t\t\t\t\t\ttitleStr={titleStr}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisSelected={isSelected}\n\t\t\t\t\t\toverflow\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\taria-label={labelStr}\n\t\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\t\tisActive={isSelected}\n\t\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\t\tdata-value={id}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tonClick={() => onSelect('toolbar')}\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)\n\t\t}\n\t\tdefault: {\n\t\t\tthrow exhaustiveSwitchError(menuType)\n\t\t}\n\t}\n}\n\nfunction useDraggableEvents(\n\tonDragStart: TLUiToolItem['onDragStart'],\n\tonSelect: TLUiToolItem['onSelect']\n) {\n\tconst editor = useEditor()\n\tconst events = useMemo(() => {\n\t\tlet state = { name: 'idle' } as\n\t\t\t| {\n\t\t\t\t\tname: 'idle'\n\t\t\t  }\n\t\t\t| {\n\t\t\t\t\tname: 'pointing'\n\t\t\t\t\tscreenSpaceStart: VecModel\n\t\t\t  }\n\t\t\t| {\n\t\t\t\t\tname: 'dragging'\n\t\t\t\t\tscreenSpaceStart: VecModel\n\t\t\t  }\n\t\t\t| {\n\t\t\t\t\tname: 'dragged'\n\t\t\t  }\n\n\t\tfunction handlePointerDown(e: React.PointerEvent<HTMLButtonElement>) {\n\t\t\tstate = {\n\t\t\t\tname: 'pointing',\n\t\t\t\tscreenSpaceStart: { x: e.clientX, y: e.clientY },\n\t\t\t}\n\n\t\t\te.currentTarget.setPointerCapture(e.pointerId)\n\t\t}\n\n\t\tfunction handlePointerMove(e: React.PointerEvent<HTMLButtonElement>) {\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\tif (state.name === 'pointing') {\n\t\t\t\tconst distanceSq = Vec.Dist2(state.screenSpaceStart, { x: e.clientX, y: e.clientY })\n\t\t\t\tif (\n\t\t\t\t\tdistanceSq >\n\t\t\t\t\t(editor.getInstanceState().isCoarsePointer\n\t\t\t\t\t\t? editor.options.coarseDragDistanceSquared\n\t\t\t\t\t\t: editor.options.dragDistanceSquared)\n\t\t\t\t) {\n\t\t\t\t\tconst screenSpaceStart = state.screenSpaceStart\n\t\t\t\t\tstate = {\n\t\t\t\t\t\tname: 'dragging',\n\t\t\t\t\t\tscreenSpaceStart,\n\t\t\t\t\t}\n\n\t\t\t\t\teditor.run(() => {\n\t\t\t\t\t\t// Set origin point\n\t\t\t\t\t\teditor.dispatch({\n\t\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\t\t\tname: 'pointer_down',\n\t\t\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t\t\t\tpoint: screenSpaceStart,\n\t\t\t\t\t\t})\n\n\t\t\t\t\t\t// Pointer down potentially selects shapes, so we need to deselect them.\n\t\t\t\t\t\teditor.selectNone()\n\n\t\t\t\t\t\t// start drag\n\t\t\t\t\t\tonDragStart?.('toolbar', {\n\t\t\t\t\t\t\ttype: 'pointer',\n\t\t\t\t\t\t\ttarget: 'canvas',\n\t\t\t\t\t\t\tname: 'pointer_move',\n\t\t\t\t\t\t\t...getPointerInfo(e),\n\t\t\t\t\t\t\tpoint: screenSpaceStart,\n\t\t\t\t\t\t})\n\n\t\t\t\t\t\ttooltipManager.hideAllTooltips()\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction handlePointerUp(e: React.PointerEvent<HTMLButtonElement>) {\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\te.currentTarget.releasePointerCapture(e.pointerId)\n\n\t\t\teditor.dispatch({\n\t\t\t\ttype: 'pointer',\n\t\t\t\ttarget: 'canvas',\n\t\t\t\tname: 'pointer_up',\n\t\t\t\t...getPointerInfo(e),\n\t\t\t})\n\t\t}\n\n\t\tfunction handleClick() {\n\t\t\tif (state.name === 'dragging' || state.name === 'dragged') {\n\t\t\t\tstate = { name: 'idle' }\n\t\t\t\treturn true\n\t\t\t}\n\n\t\t\tstate = { name: 'idle' }\n\t\t\tonSelect?.('toolbar')\n\t\t}\n\n\t\treturn {\n\t\t\tonPointerDown: handlePointerDown,\n\t\t\tonPointerMove: handlePointerMove,\n\t\t\tonPointerUp: handlePointerUp,\n\t\t\tonClick: handleClick,\n\t\t}\n\t}, [onDragStart, editor, onSelect])\n\n\treturn events\n}\n\nfunction DraggableToolbarButton({\n\tid,\n\tlabelToUse,\n\ttitleStr,\n\tdisabled,\n\tisSelected,\n\ticon,\n\tonSelect,\n\tonDragStart,\n\toverflow,\n}: {\n\tid: string\n\tdisabled: boolean\n\tlabelToUse?: string\n\ttitleStr?: string\n\tisSelected?: boolean\n\ticon: TLUiMenuItemProps['icon']\n\tonSelect: TLUiMenuItemProps['onSelect']\n\tonDragStart: TLUiMenuItemProps['onDragStart']\n\toverflow?: boolean\n}) {\n\tconst events = useDraggableEvents(onDragStart, onSelect)\n\n\tif (overflow) {\n\t\treturn (\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\taria-label={labelToUse}\n\t\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\t\tisActive={isSelected}\n\t\t\t\tclassName=\"tlui-button-grid__button\"\n\t\t\t\tdata-testid={`tools.more.${id}`}\n\t\t\t\tdata-value={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\ttitle={titleStr}\n\t\t\t\ttype=\"icon\"\n\t\t\t\t{...events}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t\t</TldrawUiToolbarButton>\n\t\t)\n\t}\n\n\treturn (\n\t\t<TldrawUiToolbarButton\n\t\t\taria-label={labelToUse}\n\t\t\taria-pressed={isSelected ? 'true' : 'false'}\n\t\t\tdata-testid={`tools.${id}`}\n\t\t\tdata-value={id}\n\t\t\tdisabled={disabled}\n\t\t\tonTouchStart={(e) => {\n\t\t\t\tpreventDefault(e)\n\t\t\t\tonSelect('toolbar')\n\t\t\t}}\n\t\t\ttitle={titleStr}\n\t\t\ttype=\"tool\"\n\t\t\t{...events}\n\t\t>\n\t\t\t<TldrawUiButtonIcon icon={icon!} />\n\t\t</TldrawUiToolbarButton>\n\t)\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/context/TldrawUiContextProvider.mjs

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { defaultUserPreferences, track, useMaybeEditor } from "@tldraw/editor";
 import { useDefaultUiAssetUrlsWithOverrides } from "../assetUrls.mjs";
+import { TldrawUiTooltipProvider } from "../components/primitives/TldrawUiTooltip.mjs";
 import { ToolsProvider } from "../hooks/useTools.mjs";
 import { TldrawUiTranslationProvider } from "../hooks/useTranslation/useTranslation.mjs";
 import {
@@ -26,14 +27,14 @@ const TldrawUiContextProvider = track(function TldrawUiContextProvider2({
   children
 }) {
   const editor = useMaybeEditor();
-  return /* @__PURE__ */ jsx(MimeTypeContext.Provider, { value: mediaMimeTypes, children: /* @__PURE__ */ jsx(AssetUrlsProvider, { assetUrls: useDefaultUiAssetUrlsWithOverrides(assetUrls), children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(MimeTypeContext.Provider, { value: mediaMimeTypes, children: /* @__PURE__ */ jsx(TldrawUiTooltipProvider, { children: /* @__PURE__ */ jsx(AssetUrlsProvider, { assetUrls: useDefaultUiAssetUrlsWithOverrides(assetUrls), children: /* @__PURE__ */ jsx(
     TldrawUiTranslationProvider,
     {
       overrides: useMergedTranslationOverrides(overrides),
       locale: editor?.user.getLocale() ?? defaultUserPreferences.locale,
       children: /* @__PURE__ */ jsx(TldrawUiEventsProvider, { onEvent: onUiEvent, children: /* @__PURE__ */ jsx(TldrawUiToastsProvider, { children: /* @__PURE__ */ jsx(TldrawUiDialogsProvider, { context: "tla", children: /* @__PURE__ */ jsx(TldrawUiA11yProvider, { children: /* @__PURE__ */ jsx(BreakPointProvider, { forceMobile, children: /* @__PURE__ */ jsx(TldrawUiComponentsProvider, { overrides: components, children: /* @__PURE__ */ jsx(InternalProviders, { overrides, children }) }) }) }) }) }) })
     }
-  ) }) });
+  ) }) }) });
 });
 function InternalProviders({
   overrides,