tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

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

@@ -1,245 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { assert, atom, uniqueId, useMaybeEditor, useValue } from "@tldraw/editor";
-import { Tooltip as _Tooltip } from "radix-ui";
-import React, {
-  createContext,
-  forwardRef,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { useTldrawUiOrientation } from "./layout.mjs";
-const DEFAULT_TOOLTIP_DELAY_MS = 700;
-class TooltipManager {
-  static instance = null;
-  currentTooltip = atom("current tooltip", null);
-  destroyTimeoutId = null;
-  static getInstance() {
-    if (!TooltipManager.instance) {
-      TooltipManager.instance = new TooltipManager();
-    }
-    return TooltipManager.instance;
-  }
-  showTooltip(tooltipId, content, targetElement, side, sideOffset, showOnMobile, delayDuration) {
-    if (this.destroyTimeoutId) {
-      clearTimeout(this.destroyTimeoutId);
-      this.destroyTimeoutId = null;
-    }
-    this.currentTooltip.set({
-      id: tooltipId,
-      content,
-      side,
-      sideOffset,
-      showOnMobile,
-      targetElement,
-      delayDuration
-    });
-  }
-  hideTooltip(editor, tooltipId, instant = false) {
-    const hide = () => {
-      if (this.currentTooltip.get()?.id === tooltipId) {
-        this.currentTooltip.set(null);
-        this.destroyTimeoutId = null;
-      }
-    };
-    if (editor && !instant) {
-      this.destroyTimeoutId = editor.timers.setTimeout(hide, 300);
-    } else {
-      hide();
-    }
-  }
-  hideAllTooltips() {
-    this.currentTooltip.set(null);
-    this.destroyTimeoutId = null;
-  }
-  getCurrentTooltipData() {
-    const currentTooltip = this.currentTooltip.get();
-    if (!currentTooltip) return null;
-    if (!this.supportsHover() && !currentTooltip.showOnMobile) return null;
-    return currentTooltip;
-  }
-  supportsHoverAtom = null;
-  supportsHover() {
-    if (!this.supportsHoverAtom) {
-      const mediaQuery = window.matchMedia("(hover: hover)");
-      const supportsHover = atom("has hover", mediaQuery.matches);
-      this.supportsHoverAtom = supportsHover;
-      mediaQuery.addEventListener("change", (e) => {
-        supportsHover.set(e.matches);
-      });
-    }
-    return this.supportsHoverAtom.get();
-  }
-}
-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 [isOpen, setIsOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const isFirstShowRef = useRef(true);
-  const showTimeoutRef = useRef(null);
-  const currentTooltip = useValue(
-    "current tooltip",
-    () => tooltipManager.getCurrentTooltipData(),
-    []
-  );
-  useEffect(() => {
-    if (showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
-    }
-    if (currentTooltip && triggerRef.current) {
-      const activeRect = currentTooltip.targetElement.getBoundingClientRect();
-      const trigger = triggerRef.current;
-      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;
-        }, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs);
-      } else {
-        setIsOpen(true);
-      }
-    } else {
-      setIsOpen(false);
-      isFirstShowRef.current = true;
-    }
-  }, [editor, currentTooltip]);
-  if (!currentTooltip) {
-    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",
-        side: currentTooltip.side,
-        sideOffset: currentTooltip.sideOffset,
-        avoidCollisions: true,
-        collisionPadding: 8,
-        dir: "ltr",
-        children: [
-          currentTooltip.content,
-          /* @__PURE__ */ jsx(_Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
-        ]
-      }
-    )
-  ] });
-}
-const TldrawUiTooltip = forwardRef(
-  ({
-    children,
-    content,
-    side,
-    sideOffset = 5,
-    disabled = false,
-    showOnMobile = false,
-    delayDuration
-  }, 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(editor, currentTooltipId, true);
-        }
-      };
-    }, [editor, hasProvider]);
-    if (disabled || !content) {
-      return /* @__PURE__ */ jsx(Fragment, { children });
-    }
-    if (!hasProvider) {
-      return /* @__PURE__ */ jsxs(
-        _Tooltip.Root,
-        {
-          delayDuration: 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,
-        showOnMobile,
-        delayDuration
-      );
-    };
-    const handleMouseLeave = (event) => {
-      child.props.onMouseLeave?.(event);
-      tooltipManager.hideTooltip(editor, tooltipId.current);
-    };
-    const handleFocus = (event) => {
-      child.props.onFocus?.(event);
-      tooltipManager.showTooltip(
-        tooltipId.current,
-        content,
-        event.currentTarget,
-        sideToUse,
-        sideOffset,
-        showOnMobile,
-        delayDuration
-      );
-    };
-    const handleBlur = (event) => {
-      child.props.onBlur?.(event);
-      tooltipManager.hideTooltip(editor, 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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
-  "sourcesContent": ["import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\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\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltip = atom<{\n\t\tid: string\n\t\tcontent: ReactNode\n\t\tside: 'top' | 'right' | 'bottom' | 'left'\n\t\tsideOffset: number\n\t\tshowOnMobile: boolean\n\t\ttargetElement: HTMLElement\n\t\tdelayDuration: number | undefined\n\t} | null>('current tooltip', null)\n\tprivate destroyTimeoutId: number | 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\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\ttargetElement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left',\n\t\tsideOffset: number,\n\t\tshowOnMobile: boolean,\n\t\tdelayDuration: number | undefined\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.currentTooltip.set({\n\t\t\tid: tooltipId,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset,\n\t\t\tshowOnMobile,\n\t\t\ttargetElement,\n\t\t\tdelayDuration,\n\t\t})\n\t}\n\n\thideTooltip(editor: Editor | null, 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.currentTooltip.get()?.id === tooltipId) {\n\t\t\t\tthis.currentTooltip.set(null)\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t}\n\t\t}\n\n\t\tif (editor && !instant) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = editor.timers.setTimeout(hide, 300)\n\t\t} else {\n\t\t\thide()\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltip.set(null)\n\t\tthis.destroyTimeoutId = null\n\t}\n\n\tgetCurrentTooltipData() {\n\t\tconst currentTooltip = this.currentTooltip.get()\n\t\tif (!currentTooltip) return null\n\t\tif (!this.supportsHover() && !currentTooltip.showOnMobile) return null\n\t\treturn currentTooltip\n\t}\n\n\tprivate supportsHoverAtom: Atom<boolean> | null = null\n\tsupportsHover() {\n\t\tif (!this.supportsHoverAtom) {\n\t\t\tconst mediaQuery = window.matchMedia('(hover: hover)')\n\t\t\tconst supportsHover = atom('has hover', mediaQuery.matches)\n\t\t\tthis.supportsHoverAtom = supportsHover\n\t\t\tmediaQuery.addEventListener('change', (e) => {\n\t\t\t\tsupportsHover.set(e.matches)\n\t\t\t})\n\t\t}\n\t\treturn this.supportsHoverAtom.get()\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 [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\tconst showTimeoutRef = useRef<number | null>(null)\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\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 (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\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}, currentTooltip.delayDuration ?? 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 {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\t}, [editor, currentTooltip])\n\n\tif (!currentTooltip) {\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\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.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{currentTooltip.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(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\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(editor, currentTooltipId, true)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, 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={\n\t\t\t\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\t\t\t\t\t}\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\tshowOnMobile,\n\t\t\t\tdelayDuration\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(editor, 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\tshowOnMobile,\n\t\t\t\tdelayDuration\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(editor, 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

@@ -1,46 +0,0 @@
-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

@@ -1,7 +0,0 @@
-{
-  "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/src/lib/ui/components/AccessibilityMenu.tsx

@@ -1,20 +0,0 @@
-import {
-	ToggleKeyboardShortcutsItem,
-	ToggleReduceMotionItem,
-	ToggleUiLabelsItem,
-} from './menu-items'
-import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
-import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
-
-/** @public @react */
-export function AccessibilityMenu() {
-	return (
-		<TldrawUiMenuSubmenu id="help menu accessibility" label="menu.accessibility">
-			<TldrawUiMenuGroup id="accessibility">
-				<ToggleReduceMotionItem />
-				<ToggleKeyboardShortcutsItem />
-				<ToggleUiLabelsItem />
-			</TldrawUiMenuGroup>
-		</TldrawUiMenuSubmenu>
-	)
-}

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -1,327 +0,0 @@
-import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
-import { Tooltip as _Tooltip } from 'radix-ui'
-import React, {
-	createContext,
-	forwardRef,
-	ReactNode,
-	useContext,
-	useEffect,
-	useRef,
-	useState,
-} from 'react'
-import { useTldrawUiOrientation } from './layout'
-
-const DEFAULT_TOOLTIP_DELAY_MS = 700
-
-/** @public */
-export interface TldrawUiTooltipProps {
-	children: React.ReactNode
-	content?: string | React.ReactNode
-	side?: 'top' | 'right' | 'bottom' | 'left'
-	sideOffset?: number
-	disabled?: boolean
-	showOnMobile?: boolean
-	delayDuration?: number
-}
-
-// Singleton tooltip manager
-class TooltipManager {
-	private static instance: TooltipManager | null = null
-	private currentTooltip = atom<{
-		id: string
-		content: ReactNode
-		side: 'top' | 'right' | 'bottom' | 'left'
-		sideOffset: number
-		showOnMobile: boolean
-		targetElement: HTMLElement
-		delayDuration: number | undefined
-	} | null>('current tooltip', null)
-	private destroyTimeoutId: number | null = null
-
-	static getInstance(): TooltipManager {
-		if (!TooltipManager.instance) {
-			TooltipManager.instance = new TooltipManager()
-		}
-		return TooltipManager.instance
-	}
-
-	showTooltip(
-		tooltipId: string,
-		content: string | React.ReactNode,
-		targetElement: HTMLElement,
-		side: 'top' | 'right' | 'bottom' | 'left',
-		sideOffset: number,
-		showOnMobile: boolean,
-		delayDuration: number | undefined
-	) {
-		// Clear any existing destroy timeout
-		if (this.destroyTimeoutId) {
-			clearTimeout(this.destroyTimeoutId)
-			this.destroyTimeoutId = null
-		}
-
-		// Update current tooltip
-		this.currentTooltip.set({
-			id: tooltipId,
-			content,
-			side,
-			sideOffset,
-			showOnMobile,
-			targetElement,
-			delayDuration,
-		})
-	}
-
-	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
-		const hide = () => {
-			// Only hide if this is the current tooltip
-			if (this.currentTooltip.get()?.id === tooltipId) {
-				this.currentTooltip.set(null)
-				this.destroyTimeoutId = null
-			}
-		}
-
-		if (editor && !instant) {
-			// Start destroy timeout (1 second)
-			this.destroyTimeoutId = editor.timers.setTimeout(hide, 300)
-		} else {
-			hide()
-		}
-	}
-
-	hideAllTooltips() {
-		this.currentTooltip.set(null)
-		this.destroyTimeoutId = null
-	}
-
-	getCurrentTooltipData() {
-		const currentTooltip = this.currentTooltip.get()
-		if (!currentTooltip) return null
-		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
-		return currentTooltip
-	}
-
-	private supportsHoverAtom: Atom<boolean> | null = null
-	supportsHover() {
-		if (!this.supportsHoverAtom) {
-			const mediaQuery = window.matchMedia('(hover: hover)')
-			const supportsHover = atom('has hover', mediaQuery.matches)
-			this.supportsHoverAtom = supportsHover
-			mediaQuery.addEventListener('change', (e) => {
-				supportsHover.set(e.matches)
-			})
-		}
-		return this.supportsHoverAtom.get()
-	}
-}
-
-export const tooltipManager = TooltipManager.getInstance()
-
-// Context for the tooltip singleton
-const TooltipSingletonContext = createContext<boolean>(false)
-
-/** @public */
-export interface TldrawUiTooltipProviderProps {
-	children: React.ReactNode
-}
-
-/** @public @react */
-export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {
-	return (
-		<_Tooltip.Provider skipDelayDuration={700}>
-			<TooltipSingletonContext.Provider value={true}>
-				{children}
-				<TooltipSingleton />
-			</TooltipSingletonContext.Provider>
-		</_Tooltip.Provider>
-	)
-}
-
-// The singleton tooltip component that renders once
-function TooltipSingleton() {
-	const editor = useMaybeEditor()
-	const [isOpen, setIsOpen] = useState(false)
-	const triggerRef = useRef<HTMLDivElement>(null)
-	const isFirstShowRef = useRef(true)
-	const showTimeoutRef = useRef<number | null>(null)
-
-	const currentTooltip = useValue(
-		'current tooltip',
-		() => tooltipManager.getCurrentTooltipData(),
-		[]
-	)
-
-	// Update open state and trigger position
-	useEffect(() => {
-		// Clear any existing show timeout
-		if (showTimeoutRef.current) {
-			clearTimeout(showTimeoutRef.current)
-			showTimeoutRef.current = null
-		}
-
-		if (currentTooltip && triggerRef.current) {
-			// Position the invisible trigger element over the active element
-			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
-			const trigger = triggerRef.current
-
-			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'
-
-			// Handle delay for first show
-			if (isFirstShowRef.current && editor) {
-				showTimeoutRef.current = editor.timers.setTimeout(() => {
-					setIsOpen(true)
-					isFirstShowRef.current = false
-				}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)
-			} else {
-				// Subsequent tooltips show immediately
-				setIsOpen(true)
-			}
-		} else {
-			// Hide tooltip immediately
-			setIsOpen(false)
-			// Reset first show state after tooltip is hidden
-			isFirstShowRef.current = true
-		}
-	}, [editor, currentTooltip])
-
-	if (!currentTooltip) {
-		return null
-	}
-
-	return (
-		<_Tooltip.Root open={isOpen} delayDuration={0}>
-			<_Tooltip.Trigger asChild>
-				<div ref={triggerRef} />
-			</_Tooltip.Trigger>
-			<_Tooltip.Content
-				className="tlui-tooltip"
-				side={currentTooltip.side}
-				sideOffset={currentTooltip.sideOffset}
-				avoidCollisions
-				collisionPadding={8}
-				dir="ltr"
-			>
-				{currentTooltip.content}
-				<_Tooltip.Arrow className="tlui-tooltip__arrow" />
-			</_Tooltip.Content>
-		</_Tooltip.Root>
-	)
-}
-
-/** @public @react */
-export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(
-	(
-		{
-			children,
-			content,
-			side,
-			sideOffset = 5,
-			disabled = false,
-			showOnMobile = false,
-			delayDuration,
-		},
-		ref
-	) => {
-		const editor = useMaybeEditor()
-		const tooltipId = useRef<string>(uniqueId())
-		const hasProvider = useContext(TooltipSingletonContext)
-
-		const orientationCtx = useTldrawUiOrientation()
-		const sideToUse = side ?? orientationCtx.tooltipSide
-
-		useEffect(() => {
-			const currentTooltipId = tooltipId.current
-			return () => {
-				if (hasProvider) {
-					tooltipManager.hideTooltip(editor, currentTooltipId, true)
-				}
-			}
-		}, [editor, hasProvider])
-
-		// Don't show tooltip if disabled, no content, or UI labels are disabled
-		if (disabled || !content) {
-			return <>{children}</>
-		}
-
-		// Fallback to old behavior if no provider
-		if (!hasProvider) {
-			return (
-				<_Tooltip.Root
-					delayDuration={
-						delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
-					}
-					disableHoverableContent
-				>
-					<_Tooltip.Trigger asChild ref={ref}>
-						{children}
-					</_Tooltip.Trigger>
-					<_Tooltip.Content
-						className="tlui-tooltip"
-						side={sideToUse}
-						sideOffset={sideOffset}
-						avoidCollisions
-						collisionPadding={8}
-						dir="ltr"
-					>
-						{content}
-						<_Tooltip.Arrow className="tlui-tooltip__arrow" />
-					</_Tooltip.Content>
-				</_Tooltip.Root>
-			)
-		}
-
-		const child = React.Children.only(children)
-		assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
-
-		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-			child.props.onMouseEnter?.(event)
-			tooltipManager.showTooltip(
-				tooltipId.current,
-				content,
-				event.currentTarget as HTMLElement,
-				sideToUse,
-				sideOffset,
-				showOnMobile,
-				delayDuration
-			)
-		}
-
-		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
-			child.props.onMouseLeave?.(event)
-			tooltipManager.hideTooltip(editor, tooltipId.current)
-		}
-
-		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
-			child.props.onFocus?.(event)
-			tooltipManager.showTooltip(
-				tooltipId.current,
-				content,
-				event.currentTarget as HTMLElement,
-				sideToUse,
-				sideOffset,
-				showOnMobile,
-				delayDuration
-			)
-		}
-
-		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
-			child.props.onBlur?.(event)
-			tooltipManager.hideTooltip(editor, tooltipId.current)
-		}
-
-		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
-			onMouseEnter: handleMouseEnter,
-			onMouseLeave: handleMouseLeave,
-			onFocus: handleFocus,
-			onBlur: handleBlur,
-		})
-
-		return childrenWithHandlers
-	}
-)