npm - tldraw - Versions diffs - 4.3.0-canary.b19495d1a0fa → 4.3.0-canary.b2e9b1218a6b - Mend

tldraw 4.3.0-canary.b19495d1a0fa → 4.3.0-canary.b2e9b1218a6b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/dist-esm/lib/shapes/video/VideoShapeUtil.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/shapes/video/VideoShapeUtil.tsx"],
-  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tMediaHelpers,\n\tSvgExportContext,\n\tTLAsset,\n\tTLVideoShape,\n\tWeakCache,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseEditorComponents,\n\tuseIsEditing,\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactEventHandler, memo, useCallback, useEffect, useRef, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nconst videoSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport interface VideoShapeOptions {\n\t/**\n\t * Should videos play automatically?\n\t */\n\tautoplay: boolean\n}\n\n/** @public */\nexport class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {\n\tstatic override type = 'video' as const\n\tstatic override props = videoShapeProps\n\tstatic override migrations = videoShapeMigrations\n\n\toverride options: VideoShapeOptions = {\n\t\tautoplay: true,\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLVideoShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tautoplay: this.options.autoplay,\n\t\t\turl: '',\n\t\t\taltText: '',\n\t\t\t// Not used, but once upon a time were used to sync video state between users\n\t\t\ttime: 0,\n\t\t\tplaying: true,\n\t\t}\n\t}\n\n\toverride getAriaDescriptor(shape: TLVideoShape) {\n\t\treturn shape.props.altText\n\t}\n\n\tcomponent(shape: TLVideoShape) {\n\t\treturn <VideoShape shape={shape} />\n\t}\n\n\tindicator(shape: TLVideoShape) {\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLVideoShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset<TLAsset>(props.assetId)\n\t\tif (!asset) return null\n\n\t\tconst src = await videoSvgExportCache.get(asset, async () => {\n\t\t\tconst assetUrl = await ctx.resolveAssetUrl(asset.id, props.w)\n\t\t\tif (!assetUrl) return null\n\t\t\tconst video = await MediaHelpers.loadVideo(assetUrl)\n\t\t\treturn await MediaHelpers.getVideoFrameAsDataUrl(video, 0)\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <image href={src} width={props.w} height={props.h} aria-label={shape.props.altText} />\n\t}\n}\n\nconst VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) {\n\tconst editor = useEditor()\n\tconst showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110\n\tconst isEditing = useIsEditing(shape.id)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst { Spinner } = useEditorComponents()\n\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: shape.props.w,\n\t})\n\n\tconst rVideo = useRef<HTMLVideoElement>(null!)\n\n\tconst [isLoaded, setIsLoaded] = useState(false)\n\n\tconst handleLoadedData = useCallback<ReactEventHandler<HTMLVideoElement>>((e) => {\n\t\tconst video = e.currentTarget\n\t\tif (!video) return\n\t\tsetIsLoaded(true)\n\t}, [])\n\n\tconst [isFullscreen, setIsFullscreen] = useState(false)\n\n\tuseEffect(() => {\n\t\tconst fullscreenChange = () => setIsFullscreen(document.fullscreenElement === rVideo.current)\n\t\tdocument.addEventListener('fullscreenchange', fullscreenChange)\n\n\t\treturn () => document.removeEventListener('fullscreenchange', fullscreenChange)\n\t})\n\n\t// Focus the video when editing\n\tuseEffect(() => {\n\t\tconst video = rVideo.current\n\t\tif (!video) return\n\n\t\tif (isEditing) {\n\t\t\tif (document.activeElement !== video) {\n\t\t\t\tvideo.focus()\n\t\t\t}\n\t\t}\n\t}, [isEditing, isLoaded])\n\n\treturn (\n\t\t<>\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'var(--tl-color-text-3)',\n\t\t\t\t\tbackgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',\n\t\t\t\t\tborder: asset ? 'none' : '1px solid var(--tl-color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"tl-counter-scaled\">\n\t\t\t\t\t<div className=\"tl-video-container\">\n\t\t\t\t\t\t{!asset ? (\n\t\t\t\t\t\t\t<BrokenAssetIcon />\n\t\t\t\t\t\t) : Spinner && !asset.props.src ? (\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t) : url ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<video\n\t\t\t\t\t\t\t\t\tkey={url}\n\t\t\t\t\t\t\t\t\tref={rVideo}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tisEditing\n\t\t\t\t\t\t\t\t\t\t\t? { pointerEvents: 'all' }\n\t\t\t\t\t\t\t\t\t\t\t: !isLoaded\n\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'none' }\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={classNames('tl-video', `tl-video-shape-${shape.id.split(':')[1]}`, {\n\t\t\t\t\t\t\t\t\t\t'tl-video-is-fullscreen': isFullscreen,\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\t\t\tautoPlay={shape.props.autoplay && !prefersReducedMotion}\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\t\t\tdisableRemotePlayback\n\t\t\t\t\t\t\t\t\tdisablePictureInPicture\n\t\t\t\t\t\t\t\t\tcontrols={isEditing && showControls}\n\t\t\t\t\t\t\t\t\tonLoadedData={handleLoadedData}\n\t\t\t\t\t\t\t\t\thidden={!isLoaded}\n\t\t\t\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<source src={url} />\n\t\t\t\t\t\t\t\t</video>\n\t\t\t\t\t\t\t\t{!isLoaded && Spinner && <Spinner />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t</>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tBaseBoxShapeUtil,\n\tHTMLContainer,\n\tMediaHelpers,\n\tSvgExportContext,\n\tTLAsset,\n\tTLVideoShape,\n\tWeakCache,\n\ttoDomPrecision,\n\tuseEditor,\n\tuseEditorComponents,\n\tuseIsEditing,\n\tvideoShapeMigrations,\n\tvideoShapeProps,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactEventHandler, memo, useCallback, useEffect, useRef, useState } from 'react'\nimport { BrokenAssetIcon } from '../shared/BrokenAssetIcon'\nimport { HyperlinkButton } from '../shared/HyperlinkButton'\nimport { useImageOrVideoAsset } from '../shared/useImageOrVideoAsset'\nimport { usePrefersReducedMotion } from '../shared/usePrefersReducedMotion'\n\nconst videoSvgExportCache = new WeakCache<TLAsset, Promise<string | null>>()\n\n/** @public */\nexport interface VideoShapeOptions {\n\t/**\n\t * Should videos play automatically?\n\t */\n\tautoplay: boolean\n}\n\n/** @public */\nexport class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {\n\tstatic override type = 'video' as const\n\tstatic override props = videoShapeProps\n\tstatic override migrations = videoShapeMigrations\n\n\toverride options: VideoShapeOptions = {\n\t\tautoplay: true,\n\t}\n\n\toverride canEdit() {\n\t\treturn true\n\t}\n\toverride isAspectRatioLocked() {\n\t\treturn true\n\t}\n\n\toverride getDefaultProps(): TLVideoShape['props'] {\n\t\treturn {\n\t\t\tw: 100,\n\t\t\th: 100,\n\t\t\tassetId: null,\n\t\t\tautoplay: this.options.autoplay,\n\t\t\turl: '',\n\t\t\taltText: '',\n\t\t\t// Not used, but once upon a time were used to sync video state between users\n\t\t\ttime: 0,\n\t\t\tplaying: true,\n\t\t}\n\t}\n\n\toverride getAriaDescriptor(shape: TLVideoShape) {\n\t\treturn shape.props.altText\n\t}\n\n\tcomponent(shape: TLVideoShape) {\n\t\treturn <VideoShape shape={shape} />\n\t}\n\n\tindicator(shape: TLVideoShape) {\n\t\treturn <rect width={toDomPrecision(shape.props.w)} height={toDomPrecision(shape.props.h)} />\n\t}\n\n\toverride async toSvg(shape: TLVideoShape, ctx: SvgExportContext) {\n\t\tconst props = shape.props\n\t\tif (!props.assetId) return null\n\n\t\tconst asset = this.editor.getAsset<TLAsset>(props.assetId)\n\t\tif (!asset) return null\n\n\t\tconst src = await videoSvgExportCache.get(asset, async () => {\n\t\t\tconst assetUrl = await ctx.resolveAssetUrl(asset.id, props.w)\n\t\t\tif (!assetUrl) return null\n\t\t\tconst video = await MediaHelpers.loadVideo(assetUrl)\n\t\t\treturn await MediaHelpers.getVideoFrameAsDataUrl(video, 0)\n\t\t})\n\n\t\tif (!src) return null\n\n\t\treturn <image href={src} width={props.w} height={props.h} aria-label={shape.props.altText} />\n\t}\n}\n\nconst VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) {\n\tconst editor = useEditor()\n\tconst showControls =\n\t\teditor.getShapeGeometry(shape).bounds.w * editor.getEfficientZoomLevel() >= 110\n\tconst isEditing = useIsEditing(shape.id)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst { Spinner } = useEditorComponents()\n\n\tconst { asset, url } = useImageOrVideoAsset({\n\t\tshapeId: shape.id,\n\t\tassetId: shape.props.assetId,\n\t\twidth: shape.props.w,\n\t})\n\n\tconst rVideo = useRef<HTMLVideoElement>(null!)\n\n\tconst [isLoaded, setIsLoaded] = useState(false)\n\n\tconst handleLoadedData = useCallback<ReactEventHandler<HTMLVideoElement>>((e) => {\n\t\tconst video = e.currentTarget\n\t\tif (!video) return\n\t\tsetIsLoaded(true)\n\t}, [])\n\n\tconst [isFullscreen, setIsFullscreen] = useState(false)\n\n\tuseEffect(() => {\n\t\tconst fullscreenChange = () => setIsFullscreen(document.fullscreenElement === rVideo.current)\n\t\tdocument.addEventListener('fullscreenchange', fullscreenChange)\n\n\t\treturn () => document.removeEventListener('fullscreenchange', fullscreenChange)\n\t})\n\n\t// Focus the video when editing\n\tuseEffect(() => {\n\t\tconst video = rVideo.current\n\t\tif (!video) return\n\n\t\tif (isEditing) {\n\t\t\tif (document.activeElement !== video) {\n\t\t\t\tvideo.focus()\n\t\t\t}\n\t\t}\n\t}, [isEditing, isLoaded])\n\n\treturn (\n\t\t<>\n\t\t\t<HTMLContainer\n\t\t\t\tid={shape.id}\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: 'var(--tl-color-text-3)',\n\t\t\t\t\tbackgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',\n\t\t\t\t\tborder: asset ? 'none' : '1px solid var(--tl-color-low-border)',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"tl-counter-scaled\">\n\t\t\t\t\t<div className=\"tl-video-container\">\n\t\t\t\t\t\t{!asset ? (\n\t\t\t\t\t\t\t<BrokenAssetIcon />\n\t\t\t\t\t\t) : Spinner && !asset.props.src ? (\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t) : url ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<video\n\t\t\t\t\t\t\t\t\tkey={url}\n\t\t\t\t\t\t\t\t\tref={rVideo}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tisEditing\n\t\t\t\t\t\t\t\t\t\t\t? { pointerEvents: 'all' }\n\t\t\t\t\t\t\t\t\t\t\t: !isLoaded\n\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'none' }\n\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tclassName={classNames('tl-video', `tl-video-shape-${shape.id.split(':')[1]}`, {\n\t\t\t\t\t\t\t\t\t\t'tl-video-is-fullscreen': isFullscreen,\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\t\tdraggable={false}\n\t\t\t\t\t\t\t\t\tplaysInline\n\t\t\t\t\t\t\t\t\tautoPlay={shape.props.autoplay && !prefersReducedMotion}\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tloop\n\t\t\t\t\t\t\t\t\tdisableRemotePlayback\n\t\t\t\t\t\t\t\t\tdisablePictureInPicture\n\t\t\t\t\t\t\t\t\tcontrols={isEditing && showControls}\n\t\t\t\t\t\t\t\t\tonLoadedData={handleLoadedData}\n\t\t\t\t\t\t\t\t\thidden={!isLoaded}\n\t\t\t\t\t\t\t\t\taria-label={shape.props.altText}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<source src={url} />\n\t\t\t\t\t\t\t\t</video>\n\t\t\t\t\t\t\t\t{!isLoaded && Spinner && <Spinner />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</HTMLContainer>\n\t\t\t{'url' in shape.props && shape.props.url && <HyperlinkButton url={shape.props.url} />}\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["VideoShape"]
 }

package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEditor, useValue } from "@tldraw/editor";
 import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
 import { useBreakpoint } from "../../context/breakpoints.mjs";
 import {
@@ -10,6 +9,7 @@ import {
   useThreeStackableItems,
   useUnlockedSelectedShapesCount
 } from "../../hooks/menu-hooks.mjs";
+import { ZoomTo100MenuItem } from "../menu-items.mjs";
 import { TldrawUiMenuActionItem } from "../primitives/menus/TldrawUiMenuActionItem.mjs";
 function DefaultActionsMenuContent() {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -71,11 +71,6 @@ function ZoomOrRotateMenuItem() {
   const breakpoint = useBreakpoint();
   return breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? /* @__PURE__ */ jsx(ZoomTo100MenuItem, {}) : /* @__PURE__ */ jsx(RotateCCWMenuItem, {});
 }
-function ZoomTo100MenuItem() {
-  const editor = useEditor();
-  const isZoomedTo100 = useValue("zoom is 1", () => editor.getZoomLevel() === 1, [editor]);
-  return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "zoom-to-100", disabled: isZoomedTo100 });
-}
 function RotateCCWMenuItem() {
   const oneSelected = useUnlockedSelectedShapesCount(1);
   const isInSelectState = useIsInSelectState();
@@ -120,7 +115,6 @@ export {
   RotateCWMenuItem,
   StackMenuItems,
   UngroupMenuItem,
-  ZoomOrRotateMenuItem,
-  ZoomTo100MenuItem
+  ZoomOrRotateMenuItem
 };
 //# sourceMappingURL=DefaultActionsMenuContent.mjs.map

package/dist-esm/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/ActionsMenu/DefaultActionsMenuContent.tsx"],
-  "sourcesContent": ["import { useEditor, useValue } from '@tldraw/editor'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport {\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseHasLinkShapeSelected,\n\tuseIsInSelectState,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../../hooks/menu-hooks'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\n\n/** @public @react */\nexport function DefaultActionsMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<AlignMenuItems />\n\t\t\t<DistributeMenuItems />\n\t\t\t<StackMenuItems />\n\t\t\t<ReorderMenuItems />\n\t\t\t<ZoomOrRotateMenuItem />\n\t\t\t<RotateCWMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<GroupOrUngroupMenuItem />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function AlignMenuItems() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function DistributeMenuItems() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StackMenuItems() {\n\tconst threeStackableItems = useThreeStackableItems()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeStackableItems && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuItems() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\n\nexport function ZoomOrRotateMenuItem() {\n\tconst breakpoint = useBreakpoint()\n\treturn breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? <ZoomTo100MenuItem /> : <RotateCCWMenuItem />\n}\n/** @public @react */\n\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoom is 1', () => editor.getZoomLevel() === 1, [editor])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" disabled={isZoomedTo100} />\n}\n/** @public @react */\n\nexport function RotateCCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-ccw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function RotateCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-cw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function EditLinkMenuItem() {\n\tconst showEditLink = useHasLinkShapeSelected()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = showEditLink && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function GroupOrUngroupMenuItem() {\n\tconst allowGroup = useAllowGroup()\n\tconst allowUngroup = useAllowUngroup()\n\treturn allowGroup ? <GroupMenuItem /> : allowUngroup ? <UngroupMenuItem /> : <GroupMenuItem />\n}\n/** @public @react */\n\nexport function GroupMenuItem() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function UngroupMenuItem() {\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport {\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseHasLinkShapeSelected,\n\tuseIsInSelectState,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../../hooks/menu-hooks'\nimport { ZoomTo100MenuItem } from '../menu-items'\nimport { TldrawUiMenuActionItem } from '../primitives/menus/TldrawUiMenuActionItem'\n\n/** @public @react */\nexport function DefaultActionsMenuContent() {\n\treturn (\n\t\t<>\n\t\t\t<AlignMenuItems />\n\t\t\t<DistributeMenuItems />\n\t\t\t<StackMenuItems />\n\t\t\t<ReorderMenuItems />\n\t\t\t<ZoomOrRotateMenuItem />\n\t\t\t<RotateCWMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<GroupOrUngroupMenuItem />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function AlignMenuItems() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function DistributeMenuItems() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function StackMenuItems() {\n\tconst threeStackableItems = useThreeStackableItems()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = threeStackableItems && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-horizontal\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"stack-vertical\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuItems() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" disabled={!enabled} />\n\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" disabled={!enabled} />\n\t\t</>\n\t)\n}\n\n/** @public @react */\n\nexport function ZoomOrRotateMenuItem() {\n\tconst breakpoint = useBreakpoint()\n\treturn breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM ? <ZoomTo100MenuItem /> : <RotateCCWMenuItem />\n}\n/** @public @react */\n\nexport function RotateCCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-ccw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function RotateCWMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = oneSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"rotate-cw\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function EditLinkMenuItem() {\n\tconst showEditLink = useHasLinkShapeSelected()\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = showEditLink && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function GroupOrUngroupMenuItem() {\n\tconst allowGroup = useAllowGroup()\n\tconst allowUngroup = useAllowUngroup()\n\treturn allowGroup ? <GroupMenuItem /> : allowUngroup ? <UngroupMenuItem /> : <GroupMenuItem />\n}\n/** @public @react */\n\nexport function GroupMenuItem() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst isInSelectState = useIsInSelectState()\n\tconst enabled = twoSelected && isInSelectState\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" disabled={!enabled} />\n}\n/** @public @react */\n\nexport function UngroupMenuItem() {\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/components/ZoomMenu/DefaultZoomMenu.mjs CHANGED Viewed

@@ -32,7 +32,7 @@ const DefaultZoomMenu = memo(function DefaultZoomMenu2({ children }) {
 const ZoomTriggerButton = () => {
   const editor = useEditor();
   const breakpoint = useBreakpoint();
-  const zoom = useValue("zoom", () => editor.getZoomLevel(), [editor]);
+  const zoom = useValue("zoom", () => editor.getEfficientZoomLevel(), [editor]);
   const msg = useTranslation();
   const handleDoubleClick = useCallback(() => {
     editor.resetZoom(editor.getViewportScreenCenter(), {

package/dist-esm/lib/ui/components/ZoomMenu/DefaultZoomMenu.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/ZoomMenu/DefaultZoomMenu.tsx"],
-  "sourcesContent": ["import { useContainer, useEditor, useValue } from '@tldraw/editor'\nimport { DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { ReactNode, memo, useCallback } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultZoomMenuContent } from './DefaultZoomMenuContent'\n\n/** @public */\nexport interface TLUiZoomMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZoomMenuProps) {\n\tconst container = useContainer()\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('zoom menu')\n\n\t// Get the zoom menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\tconst content = children ?? <DefaultZoomMenuContent />\n\n\treturn (\n\t\t<_DropdownMenu.Root dir=\"ltr\" open={isOpen} onOpenChange={onOpenChange} modal={false}>\n\t\t\t<ZoomTriggerButton />\n\t\t\t<_DropdownMenu.Portal container={container}>\n\t\t\t\t<_DropdownMenu.Content\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"top\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\talignOffset={0}\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"zoom-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</_DropdownMenu.Content>\n\t\t\t</_DropdownMenu.Portal>\n\t\t</_DropdownMenu.Root>\n\t)\n})\n\nconst ZoomTriggerButton = () => {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst zoom = useValue('zoom', () => editor.getZoomLevel(), [editor])\n\tconst msg = useTranslation()\n\n\tconst handleDoubleClick = useCallback(() => {\n\t\teditor.resetZoom(editor.getViewportScreenCenter(), {\n\t\t\tanimation: { duration: editor.options.animationMediumMs },\n\t\t})\n\t}, [editor])\n\n\tconst value = `${Math.floor(zoom * 100)}%`\n\treturn (\n\t\t<TldrawUiToolbarButton\n\t\t\tasChild\n\t\t\ttype=\"icon\"\n\t\t\taria-label={`${msg('navigation-zone.zoom')} \u2014 ${value}`}\n\t\t\ttitle={`${msg('navigation-zone.zoom')} \u2014 ${value}`}\n\t\t\tdata-testid=\"minimap.zoom-menu-button\"\n\t\t\tclassName=\"tlui-zoom-menu__button\"\n\t\t\tonDoubleClick={handleDoubleClick}\n\t\t>\n\t\t\t<_DropdownMenu.Trigger dir=\"ltr\">\n\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.MOBILE ? null : (\n\t\t\t\t\t<span style={{ flexGrow: 0, textAlign: 'center' }}>{value}</span>\n\t\t\t\t)}\n\t\t\t</_DropdownMenu.Trigger>\n\t\t</TldrawUiToolbarButton>\n\t)\n}\n"],
-  "mappings": "AAwB6B,cAG3B,YAH2B;AAxB7B,SAAS,cAAc,WAAW,gBAAgB;AAClD,SAAS,gBAAgB,qBAAqB;AAC9C,SAAoB,MAAM,mBAAmB;AAC7C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAQhC,MAAM,kBAAkB,KAAK,SAASA,iBAAgB,EAAE,SAAS,GAAsB;AAC7F,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,WAAW;AAKxD,QAAM,UAAU,YAAY,oBAAC,0BAAuB;AAEpD,SACC,qBAAC,cAAc,MAAd,EAAmB,KAAI,OAAM,MAAM,QAAQ,cAA4B,OAAO,OAC9E;AAAA,wBAAC,qBAAkB;AAAA,IACnB,oBAAC,cAAc,QAAd,EAAqB,WACrB;AAAA,MAAC,cAAc;AAAA,MAAd;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,8BAAC,+BAA4B,MAAK,QAAO,UAAS,aAChD,mBACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF,CAAC;AAED,MAAM,oBAAoB,MAAM;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,cAAc;AACjC,QAAM,OAAO,SAAS,QAAQ,MAAM,OAAO,aAAa,GAAG,CAAC,MAAM,CAAC;AACnE,QAAM,MAAM,eAAe;AAE3B,QAAM,oBAAoB,YAAY,MAAM;AAC3C,WAAO,UAAU,OAAO,wBAAwB,GAAG;AAAA,MAClD,WAAW,EAAE,UAAU,OAAO,QAAQ,kBAAkB;AAAA,IACzD,CAAC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ,GAAG,KAAK,MAAM,OAAO,GAAG,CAAC;AACvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAO;AAAA,MACP,MAAK;AAAA,MACL,cAAY,GAAG,IAAI,sBAAsB,CAAC,WAAM,KAAK;AAAA,MACrD,OAAO,GAAG,IAAI,sBAAsB,CAAC,WAAM,KAAK;AAAA,MAChD,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,eAAe;AAAA,MAEf,8BAAC,cAAc,SAAd,EAAsB,KAAI,OACzB,uBAAa,oBAAoB,SAAS,OAC1C,oBAAC,UAAK,OAAO,EAAE,UAAU,GAAG,WAAW,SAAS,GAAI,iBAAM,GAE5D;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["import { useContainer, useEditor, useValue } from '@tldraw/editor'\nimport { DropdownMenu as _DropdownMenu } from 'radix-ui'\nimport { ReactNode, memo, useCallback } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { DefaultZoomMenuContent } from './DefaultZoomMenuContent'\n\n/** @public */\nexport interface TLUiZoomMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultZoomMenu = memo(function DefaultZoomMenu({ children }: TLUiZoomMenuProps) {\n\tconst container = useContainer()\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('zoom menu')\n\n\t// Get the zoom menu content, either the default component or the user's\n\t// override. If there's no menu content, then the user has set it to null,\n\t// so skip rendering the menu.\n\tconst content = children ?? <DefaultZoomMenuContent />\n\n\treturn (\n\t\t<_DropdownMenu.Root dir=\"ltr\" open={isOpen} onOpenChange={onOpenChange} modal={false}>\n\t\t\t<ZoomTriggerButton />\n\t\t\t<_DropdownMenu.Portal container={container}>\n\t\t\t\t<_DropdownMenu.Content\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"top\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\talignOffset={0}\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"menu\" sourceId=\"zoom-menu\">\n\t\t\t\t\t\t{content}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</_DropdownMenu.Content>\n\t\t\t</_DropdownMenu.Portal>\n\t\t</_DropdownMenu.Root>\n\t)\n})\n\nconst ZoomTriggerButton = () => {\n\tconst editor = useEditor()\n\tconst breakpoint = useBreakpoint()\n\tconst zoom = useValue('zoom', () => editor.getEfficientZoomLevel(), [editor])\n\tconst msg = useTranslation()\n\n\tconst handleDoubleClick = useCallback(() => {\n\t\teditor.resetZoom(editor.getViewportScreenCenter(), {\n\t\t\tanimation: { duration: editor.options.animationMediumMs },\n\t\t})\n\t}, [editor])\n\n\tconst value = `${Math.floor(zoom * 100)}%`\n\treturn (\n\t\t<TldrawUiToolbarButton\n\t\t\tasChild\n\t\t\ttype=\"icon\"\n\t\t\taria-label={`${msg('navigation-zone.zoom')} \u2014 ${value}`}\n\t\t\ttitle={`${msg('navigation-zone.zoom')} \u2014 ${value}`}\n\t\t\tdata-testid=\"minimap.zoom-menu-button\"\n\t\t\tclassName=\"tlui-zoom-menu__button\"\n\t\t\tonDoubleClick={handleDoubleClick}\n\t\t>\n\t\t\t<_DropdownMenu.Trigger dir=\"ltr\">\n\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.MOBILE ? null : (\n\t\t\t\t\t<span style={{ flexGrow: 0, textAlign: 'center' }}>{value}</span>\n\t\t\t\t)}\n\t\t\t</_DropdownMenu.Trigger>\n\t\t</TldrawUiToolbarButton>\n\t)\n}\n"],
+  "mappings": "AAwB6B,cAG3B,YAH2B;AAxB7B,SAAS,cAAc,WAAW,gBAAgB;AAClD,SAAS,gBAAgB,qBAAqB;AAC9C,SAAoB,MAAM,mBAAmB;AAC7C,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAQhC,MAAM,kBAAkB,KAAK,SAASA,iBAAgB,EAAE,SAAS,GAAsB;AAC7F,QAAM,YAAY,aAAa;AAC/B,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,WAAW;AAKxD,QAAM,UAAU,YAAY,oBAAC,0BAAuB;AAEpD,SACC,qBAAC,cAAc,MAAd,EAAmB,KAAI,OAAM,MAAM,QAAQ,cAA4B,OAAO,OAC9E;AAAA,wBAAC,qBAAkB;AAAA,IACnB,oBAAC,cAAc,QAAd,EAAqB,WACrB;AAAA,MAAC,cAAc;AAAA,MAAd;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,OAAM;AAAA,QACN,aAAa;AAAA,QACb,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,8BAAC,+BAA4B,MAAK,QAAO,UAAS,aAChD,mBACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF,CAAC;AAED,MAAM,oBAAoB,MAAM;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,aAAa,cAAc;AACjC,QAAM,OAAO,SAAS,QAAQ,MAAM,OAAO,sBAAsB,GAAG,CAAC,MAAM,CAAC;AAC5E,QAAM,MAAM,eAAe;AAE3B,QAAM,oBAAoB,YAAY,MAAM;AAC3C,WAAO,UAAU,OAAO,wBAAwB,GAAG;AAAA,MAClD,WAAW,EAAE,UAAU,OAAO,QAAQ,kBAAkB;AAAA,IACzD,CAAC;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ,GAAG,KAAK,MAAM,OAAO,GAAG,CAAC;AACvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,SAAO;AAAA,MACP,MAAK;AAAA,MACL,cAAY,GAAG,IAAI,sBAAsB,CAAC,WAAM,KAAK;AAAA,MACrD,OAAO,GAAG,IAAI,sBAAsB,CAAC,WAAM,KAAK;AAAA,MAChD,eAAY;AAAA,MACZ,WAAU;AAAA,MACV,eAAe;AAAA,MAEf,8BAAC,cAAc,SAAd,EAAsB,KAAI,OACzB,uBAAa,oBAAoB,SAAS,OAC1C,oBAAC,UAAK,OAAO,EAAE,UAAU,GAAG,WAAW,SAAS,GAAI,iBAAM,GAE5D;AAAA;AAAA,EACD;AAEF;",
   "names": ["DefaultZoomMenu"]
 }

package/dist-esm/lib/ui/components/menu-items.mjs CHANGED Viewed

@@ -139,7 +139,9 @@ function UnlockAllMenuItem() {
 }
 function ZoomTo100MenuItem() {
   const editor = useEditor();
-  const isZoomedTo100 = useValue("zoomed to 100", () => editor.getZoomLevel() === 1, [editor]);
+  const isZoomedTo100 = useValue("zoomed to 100", () => editor.getEfficientZoomLevel() === 1, [
+    editor
+  ]);
   return /* @__PURE__ */ jsx(TldrawUiMenuActionItem, { actionId: "zoom-to-100", noClose: true, disabled: isZoomedTo100 });
 }
 function ZoomToFitMenuItem() {

package/dist-esm/lib/ui/components/menu-items.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/ui/components/menu-items.tsx"],
-  "sourcesContent": ["import { TLPageId, useEditor, useValue } from '@tldraw/editor'\nimport { supportsDownloadingOriginal } from '../context/actions'\nimport { useUiEvents } from '../context/events'\nimport { useToasts } from '../context/toasts'\nimport {\n\tshowMenuPaste,\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseAnySelectedShapesCount,\n\tuseHasLinkShapeSelected,\n\tuseOnlyFlippableShape,\n\tuseShowAutoSizeToggle,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../hooks/menu-hooks'\nimport { useGetEmbedDefinition } from '../hooks/useGetEmbedDefinition'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TldrawUiMenuActionCheckboxItem } from './primitives/menus/TldrawUiMenuActionCheckboxItem'\nimport { TldrawUiMenuActionItem } from './primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/* -------------------- Selection ------------------- */\n\n/** @public @react */\nexport function ToggleAutoSizeMenuItem() {\n\tconst shouldDisplay = useShowAutoSizeToggle()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-auto-size\" />\n}\n\n/** @public @react */\nexport function EditLinkMenuItem() {\n\tconst shouldDisplay = useHasLinkShapeSelected()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" />\n}\n\n/** @public @react */\nexport function DuplicateMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"duplicate\" />\n}\n\n/** @public @react */\nexport function FlattenMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display flatten option',\n\t\t() => {\n\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\tif (selectedShapeIds.length === 0) return false\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'image')) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"flatten-to-image\" />\n}\n\n/** @public @react */\nexport function DownloadOriginalMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display download original option',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.some((shape) => supportsDownloadingOriginal(shape, editor))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"download-original\" />\n}\n\n/** @public @react */\nexport function GroupMenuItem() {\n\tconst shouldDisplay = useAllowGroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" />\n}\n\n/** @public @react */\nexport function UngroupMenuItem() {\n\tconst shouldDisplay = useAllowUngroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n\n/** @public @react */\nexport function RemoveFrameMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow unframe',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"remove-frame\" />\n}\n\n/** @public @react */\nexport function FitFrameToContentMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow fit frame to content',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn (\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'frame') &&\n\t\t\t\teditor.getSortedChildIdsForParent(onlySelectedShape).length > 0\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"fit-frame-to-content\" />\n}\n\n/** @public @react */\nexport function ToggleLockMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('selected shapes', () => editor.getSelectedShapes().length > 0, [\n\t\teditor,\n\t])\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-lock\" />\n}\n\n/** @public @react */\nexport function ToggleTransparentBgMenuItem() {\n\tconst editor = useEditor()\n\tconst isTransparentBg = useValue(\n\t\t'isTransparentBg',\n\t\t() => !editor.getInstanceState().exportBackground,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-transparent\"\n\t\t\tchecked={isTransparentBg}\n\t\t\ttoggle\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function UnlockAllMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('any shapes', () => editor.getCurrentPageShapeIds().size > 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"unlock-all\" disabled={!shouldDisplay} />\n}\n\n/* ---------------------- Zoom ---------------------- */\n\n/** @public @react */\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" noClose disabled={isZoomedTo100} />\n}\n\n/** @public @react */\nexport function ZoomToFitMenuItem() {\n\tconst editor = useEditor()\n\tconst hasShapes = useValue('has shapes', () => editor.getCurrentPageShapeIds().size > 0, [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-fit\"\n\t\t\tdisabled={!hasShapes}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-fit\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ZoomToSelectionMenuItem() {\n\tconst editor = useEditor()\n\tconst hasSelected = useValue('has shapes', () => editor.getSelectedShapeIds().length > 0, [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-selection\"\n\t\t\tdisabled={!hasSelected}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-selection\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/* -------------------- Clipboard ------------------- */\n\n/** @public @react */\nexport function ClipboardMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"clipboard\">\n\t\t\t<CutMenuItem />\n\t\t\t<CopyMenuItem />\n\t\t\t<PasteMenuItem />\n\t\t\t<DuplicateMenuItem />\n\t\t\t<DeleteMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function CopyAsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu\n\t\t\tid=\"copy-as\"\n\t\t\tlabel=\"context-menu.copy-as\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={!atLeastOneShapeOnPage}\n\t\t>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-svg\" />\n\t\t\t\t{Boolean(window.navigator.clipboard?.write) && (\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-png\" />\n\t\t\t\t)}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function CutMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"cut\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function CopyMenuItem() {\n\tconst shouldDisplay = useAnySelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"copy\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function PasteMenuItem() {\n\tconst shouldDisplay = showMenuPaste\n\n\treturn <TldrawUiMenuActionItem actionId=\"paste\" disabled={!shouldDisplay} />\n}\n\n/* ------------------- Conversions ------------------ */\n\n/** @public @react */\nexport function ConversionsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\tif (!atLeastOneShapeOnPage) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"conversions\">\n\t\t\t<CopyAsMenuGroup />\n\t\t\t<TldrawUiMenuSubmenu id=\"export-as\" label=\"context-menu.export-as\" size=\"small\">\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-group\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-svg\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-png\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-bg\">\n\t\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<DownloadOriginalMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/* ------------------ Set Selection ----------------- */\n/** @public @react */\nexport function SelectAllMenuItem() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn <TldrawUiMenuActionItem actionId=\"select-all\" disabled={!atLeastOneShapeOnPage} />\n}\n\n/* ------------------ Delete Group ------------------ */\n\n/** @public @react */\nexport function DeleteMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"delete\" disabled={!oneSelected} />\n}\n\n/* --------------------- Modify --------------------- */\n\n/** @public @react */\nexport function EditMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tif (!useAnySelectedShapesCount(1)) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"context-menu.edit\" size=\"small\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<ToggleLockMenuItem />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ArrangeMenuSubmenu() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst onlyFlippableShapeSelected = useOnlyFlippableShape()\n\tconst isReadonlyMode = useReadonly()\n\n\tif (isReadonlyMode) return null\n\tif (!(twoSelected || onlyFlippableShapeSelected)) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"arrange\" label=\"context-menu.arrange\" size=\"small\">\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"align\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<DistributeMenuGroup />\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"stretch\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t{(twoSelected || onlyFlippableShapeSelected) && (\n\t\t\t\t<TldrawUiMenuGroup id=\"flip\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<OrderMenuGroup />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\nfunction DistributeMenuGroup() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tif (!threeSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"distribute\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\nfunction OrderMenuGroup() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst threeStackableItems = useThreeStackableItems()\n\tif (!twoSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"order\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"pack\" />\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-horizontal\" />}\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-vertical\" />}\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tif (isReadonlyMode) return null\n\tif (!oneSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"reorder\" label=\"context-menu.reorder\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"reorder\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MoveToPageMenu() {\n\tconst editor = useEditor()\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPageId = useValue('current page id', () => editor.getCurrentPageId(), [editor])\n\tconst { addToast } = useToasts()\n\tconst trackEvent = useUiEvents()\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\tif (!oneSelected) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"move-to-page\" label=\"context-menu.move-to-page\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"pages\">\n\t\t\t\t{pages.map((page) => (\n\t\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\tdisabled={currentPageId === page.id}\n\t\t\t\t\t\tlabel={page.name.length > 30 ? `${page.name.slice(0, 30)}\u2026` : page.name}\n\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('move_shapes_to_page')\n\t\t\t\t\t\t\teditor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)\n\n\t\t\t\t\t\t\tconst toPage = editor.getPage(page.id)\n\n\t\t\t\t\t\t\tif (toPage) {\n\t\t\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\t\t\ttitle: 'Changed page',\n\t\t\t\t\t\t\t\t\tdescription: `Moved to ${toPage.name}.`,\n\t\t\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Go back',\n\t\t\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('change-page')\n\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(currentPageId)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttrackEvent('move-to-page', { source: 'context-menu' })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"new-page\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"move-to-new-page\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ConvertToBookmarkMenuItem() {\n\tconst editor = useEditor()\n\n\tconst oneEmbedSelected = useValue(\n\t\t'oneEmbedSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'embed') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbedSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-bookmark\" />\n}\n\n/** @public @react */\nexport function ConvertToEmbedMenuItem() {\n\tconst editor = useEditor()\n\tconst getEmbedDefinition = useGetEmbedDefinition()\n\n\tconst oneEmbeddableBookmarkSelected = useValue(\n\t\t'oneEmbeddableBookmarkSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'bookmark') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\tgetEmbedDefinition(onlySelectedShape.props.url) &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbeddableBookmarkSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-embed\" />\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function ToggleSnapModeItem() {\n\tconst editor = useEditor()\n\tconst isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-snap-mode\" checked={isSnapMode} />\n}\n\n/** @public @react */\nexport function ToggleToolLockItem() {\n\tconst editor = useEditor()\n\tconst isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-tool-lock\" checked={isToolLock} />\n}\n\n/** @public @react */\nexport function ToggleGridItem() {\n\tconst editor = useEditor()\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-grid\" checked={isGridMode} />\n}\n\n/** @public @react */\nexport function ToggleWrapModeItem() {\n\tconst editor = useEditor()\n\tconst isWrapMode = useValue('isWrapMode', () => editor.user.getIsWrapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-wrap-mode\" checked={isWrapMode} />\n}\n\n/** @public @react */\nexport function ToggleDarkModeItem() {\n\tconst editor = useEditor()\n\tconst isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-dark-mode\" checked={isDarkMode} />\n}\n\n/** @public @react */\nexport function ToggleFocusModeItem() {\n\tconst editor = useEditor()\n\tconst isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-focus-mode\" checked={isFocusMode} />\n}\n\n/** @public @react */\nexport function ToggleEdgeScrollingItem() {\n\tconst editor = useEditor()\n\tconst edgeScrollSpeed = useValue('edgeScrollSpeed', () => editor.user.getEdgeScrollSpeed(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-edge-scrolling\"\n\t\t\tchecked={edgeScrollSpeed === 1}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleReduceMotionItem() {\n\tconst editor = useEditor()\n\tconst animationSpeed = useValue('animationSpeed', () => editor.user.getAnimationSpeed(), [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-reduce-motion\"\n\t\t\tchecked={animationSpeed === 0}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleKeyboardShortcutsItem() {\n\tconst editor = useEditor()\n\tconst keyboardShortcuts = useValue(\n\t\t'keyboardShortcuts',\n\t\t() => editor.user.getAreKeyboardShortcutsEnabled(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-keyboard-shortcuts\"\n\t\t\tchecked={keyboardShortcuts}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleEnhancedA11yModeItem() {\n\tconst editor = useEditor()\n\tconst enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"enhanced-a11y-mode\" checked={enhancedA11yMode} />\n}\n\n/** @public @react */\nexport function ToggleDebugModeItem() {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor])\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-debug-mode\" checked={isDebugMode} />\n}\n\n/** @public @react */\nexport function ToggleDynamicSizeModeItem() {\n\tconst editor = useEditor()\n\tconst isDynamicResizeMode = useValue(\n\t\t'dynamic resize',\n\t\t() => editor.user.getIsDynamicResizeMode(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-dynamic-size-mode\"\n\t\t\tchecked={isDynamicResizeMode}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function TogglePasteAtCursorItem() {\n\tconst editor = useEditor()\n\tconst pasteAtCursor = useValue('paste at cursor', () => editor.user.getIsPasteAtCursorMode(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem actionId=\"toggle-paste-at-cursor\" checked={pasteAtCursor} />\n\t)\n}\n\n/* ---------------------- Print --------------------- */\n\n/** @public @react */\nexport function PrintItem() {\n\tconst editor = useEditor()\n\tconst emptyPage = useValue('emptyPage', () => editor.getCurrentPageShapeIds().size === 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"print\" disabled={emptyPage} />\n}\n\n/* ---------------------- Multiplayer --------------------- */\n\n/** @public @react */\nexport function CursorChatItem() {\n\tconst editor = useEditor()\n\tconst shouldShow = useValue(\n\t\t'show cursor chat',\n\t\t() => editor.getCurrentToolId() === 'select' && !editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\tif (!shouldShow) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TLPageId, useEditor, useValue } from '@tldraw/editor'\nimport { supportsDownloadingOriginal } from '../context/actions'\nimport { useUiEvents } from '../context/events'\nimport { useToasts } from '../context/toasts'\nimport {\n\tshowMenuPaste,\n\tuseAllowGroup,\n\tuseAllowUngroup,\n\tuseAnySelectedShapesCount,\n\tuseHasLinkShapeSelected,\n\tuseOnlyFlippableShape,\n\tuseShowAutoSizeToggle,\n\tuseThreeStackableItems,\n\tuseUnlockedSelectedShapesCount,\n} from '../hooks/menu-hooks'\nimport { useGetEmbedDefinition } from '../hooks/useGetEmbedDefinition'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TldrawUiMenuActionCheckboxItem } from './primitives/menus/TldrawUiMenuActionCheckboxItem'\nimport { TldrawUiMenuActionItem } from './primitives/menus/TldrawUiMenuActionItem'\nimport { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'\nimport { TldrawUiMenuItem } from './primitives/menus/TldrawUiMenuItem'\nimport { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'\n\n/* -------------------- Selection ------------------- */\n\n/** @public @react */\nexport function ToggleAutoSizeMenuItem() {\n\tconst shouldDisplay = useShowAutoSizeToggle()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-auto-size\" />\n}\n\n/** @public @react */\nexport function EditLinkMenuItem() {\n\tconst shouldDisplay = useHasLinkShapeSelected()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"edit-link\" />\n}\n\n/** @public @react */\nexport function DuplicateMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"duplicate\" />\n}\n\n/** @public @react */\nexport function FlattenMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display flatten option',\n\t\t() => {\n\t\t\tconst selectedShapeIds = editor.getSelectedShapeIds()\n\t\t\tif (selectedShapeIds.length === 0) return false\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'image')) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"flatten-to-image\" />\n}\n\n/** @public @react */\nexport function DownloadOriginalMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'should display download original option',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.some((shape) => supportsDownloadingOriginal(shape, editor))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"download-original\" />\n}\n\n/** @public @react */\nexport function GroupMenuItem() {\n\tconst shouldDisplay = useAllowGroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"group\" />\n}\n\n/** @public @react */\nexport function UngroupMenuItem() {\n\tconst shouldDisplay = useAllowUngroup()\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"ungroup\" />\n}\n\n/** @public @react */\nexport function RemoveFrameMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow unframe',\n\t\t() => {\n\t\t\tconst selectedShapes = editor.getSelectedShapes()\n\t\t\tif (selectedShapes.length === 0) return false\n\t\t\treturn selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"remove-frame\" />\n}\n\n/** @public @react */\nexport function FitFrameToContentMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue(\n\t\t'allow fit frame to content',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn (\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'frame') &&\n\t\t\t\teditor.getSortedChildIdsForParent(onlySelectedShape).length > 0\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"fit-frame-to-content\" />\n}\n\n/** @public @react */\nexport function ToggleLockMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('selected shapes', () => editor.getSelectedShapes().length > 0, [\n\t\teditor,\n\t])\n\tif (!shouldDisplay) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"toggle-lock\" />\n}\n\n/** @public @react */\nexport function ToggleTransparentBgMenuItem() {\n\tconst editor = useEditor()\n\tconst isTransparentBg = useValue(\n\t\t'isTransparentBg',\n\t\t() => !editor.getInstanceState().exportBackground,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-transparent\"\n\t\t\tchecked={isTransparentBg}\n\t\t\ttoggle\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function UnlockAllMenuItem() {\n\tconst editor = useEditor()\n\tconst shouldDisplay = useValue('any shapes', () => editor.getCurrentPageShapeIds().size > 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"unlock-all\" disabled={!shouldDisplay} />\n}\n\n/* ---------------------- Zoom ---------------------- */\n\n/** @public @react */\nexport function ZoomTo100MenuItem() {\n\tconst editor = useEditor()\n\tconst isZoomedTo100 = useValue('zoomed to 100', () => editor.getEfficientZoomLevel() === 1, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"zoom-to-100\" noClose disabled={isZoomedTo100} />\n}\n\n/** @public @react */\nexport function ZoomToFitMenuItem() {\n\tconst editor = useEditor()\n\tconst hasShapes = useValue('has shapes', () => editor.getCurrentPageShapeIds().size > 0, [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-fit\"\n\t\t\tdisabled={!hasShapes}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-fit\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ZoomToSelectionMenuItem() {\n\tconst editor = useEditor()\n\tconst hasSelected = useValue('has shapes', () => editor.getSelectedShapeIds().length > 0, [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionItem\n\t\t\tactionId=\"zoom-to-selection\"\n\t\t\tdisabled={!hasSelected}\n\t\t\tdata-testid=\"minimap.zoom-menu.zoom-to-selection\"\n\t\t\tnoClose\n\t\t/>\n\t)\n}\n\n/* -------------------- Clipboard ------------------- */\n\n/** @public @react */\nexport function ClipboardMenuGroup() {\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"clipboard\">\n\t\t\t<CutMenuItem />\n\t\t\t<CopyMenuItem />\n\t\t\t<PasteMenuItem />\n\t\t\t<DuplicateMenuItem />\n\t\t\t<DeleteMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function CopyAsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu\n\t\t\tid=\"copy-as\"\n\t\t\tlabel=\"context-menu.copy-as\"\n\t\t\tsize=\"small\"\n\t\t\tdisabled={!atLeastOneShapeOnPage}\n\t\t>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-group\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-svg\" />\n\t\t\t\t{Boolean(window.navigator.clipboard?.write) && (\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"copy-as-png\" />\n\t\t\t\t)}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"copy-as-bg\">\n\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function CutMenuItem() {\n\tconst shouldDisplay = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"cut\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function CopyMenuItem() {\n\tconst shouldDisplay = useAnySelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"copy\" disabled={!shouldDisplay} />\n}\n\n/** @public @react */\nexport function PasteMenuItem() {\n\tconst shouldDisplay = showMenuPaste\n\n\treturn <TldrawUiMenuActionItem actionId=\"paste\" disabled={!shouldDisplay} />\n}\n\n/* ------------------- Conversions ------------------ */\n\n/** @public @react */\nexport function ConversionsMenuGroup() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\tif (!atLeastOneShapeOnPage) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"conversions\">\n\t\t\t<CopyAsMenuGroup />\n\t\t\t<TldrawUiMenuSubmenu id=\"export-as\" label=\"context-menu.export-as\" size=\"small\">\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-group\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-svg\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"export-as-png\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t\t<TldrawUiMenuGroup id=\"export-as-bg\">\n\t\t\t\t\t<ToggleTransparentBgMenuItem />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t</TldrawUiMenuSubmenu>\n\t\t\t<DownloadOriginalMenuItem />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/* ------------------ Set Selection ----------------- */\n/** @public @react */\nexport function SelectAllMenuItem() {\n\tconst editor = useEditor()\n\tconst atLeastOneShapeOnPage = useValue(\n\t\t'atLeastOneShapeOnPage',\n\t\t() => editor.getCurrentPageShapeIds().size > 0,\n\t\t[editor]\n\t)\n\n\treturn <TldrawUiMenuActionItem actionId=\"select-all\" disabled={!atLeastOneShapeOnPage} />\n}\n\n/* ------------------ Delete Group ------------------ */\n\n/** @public @react */\nexport function DeleteMenuItem() {\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\treturn <TldrawUiMenuActionItem actionId=\"delete\" disabled={!oneSelected} />\n}\n\n/* --------------------- Modify --------------------- */\n\n/** @public @react */\nexport function EditMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tif (!useAnySelectedShapesCount(1)) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"edit\" label=\"context-menu.edit\" size=\"small\">\n\t\t\t<GroupMenuItem />\n\t\t\t<UngroupMenuItem />\n\t\t\t<FlattenMenuItem />\n\t\t\t<EditLinkMenuItem />\n\t\t\t<FitFrameToContentMenuItem />\n\t\t\t<RemoveFrameMenuItem />\n\t\t\t<ConvertToEmbedMenuItem />\n\t\t\t<ConvertToBookmarkMenuItem />\n\t\t\t<ToggleAutoSizeMenuItem />\n\t\t\t<ToggleLockMenuItem />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ArrangeMenuSubmenu() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst onlyFlippableShapeSelected = useOnlyFlippableShape()\n\tconst isReadonlyMode = useReadonly()\n\n\tif (isReadonlyMode) return null\n\tif (!(twoSelected || onlyFlippableShapeSelected)) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"arrange\" label=\"context-menu.arrange\" size=\"small\">\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"align\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-left\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-right\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-top\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-center-vertical\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"align-bottom\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<DistributeMenuGroup />\n\t\t\t{twoSelected && (\n\t\t\t\t<TldrawUiMenuGroup id=\"stretch\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"stretch-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t{(twoSelected || onlyFlippableShapeSelected) && (\n\t\t\t\t<TldrawUiMenuGroup id=\"flip\">\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-horizontal\" />\n\t\t\t\t\t<TldrawUiMenuActionItem actionId=\"flip-vertical\" />\n\t\t\t\t</TldrawUiMenuGroup>\n\t\t\t)}\n\t\t\t<OrderMenuGroup />\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\nfunction DistributeMenuGroup() {\n\tconst threeSelected = useUnlockedSelectedShapesCount(3)\n\tif (!threeSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"distribute\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-horizontal\" />\n\t\t\t<TldrawUiMenuActionItem actionId=\"distribute-vertical\" />\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\nfunction OrderMenuGroup() {\n\tconst twoSelected = useUnlockedSelectedShapesCount(2)\n\tconst threeStackableItems = useThreeStackableItems()\n\tif (!twoSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuGroup id=\"order\">\n\t\t\t<TldrawUiMenuActionItem actionId=\"pack\" />\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-horizontal\" />}\n\t\t\t{threeStackableItems && <TldrawUiMenuActionItem actionId=\"stack-vertical\" />}\n\t\t</TldrawUiMenuGroup>\n\t)\n}\n\n/** @public @react */\nexport function ReorderMenuSubmenu() {\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\tif (isReadonlyMode) return null\n\tif (!oneSelected) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"reorder\" label=\"context-menu.reorder\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"reorder\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-to-front\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"bring-forward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-backward\" />\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"send-to-back\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function MoveToPageMenu() {\n\tconst editor = useEditor()\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPageId = useValue('current page id', () => editor.getCurrentPageId(), [editor])\n\tconst { addToast } = useToasts()\n\tconst trackEvent = useUiEvents()\n\tconst isReadonlyMode = useReadonly()\n\tconst oneSelected = useUnlockedSelectedShapesCount(1)\n\n\tif (!oneSelected) return null\n\tif (isReadonlyMode) return null\n\n\treturn (\n\t\t<TldrawUiMenuSubmenu id=\"move-to-page\" label=\"context-menu.move-to-page\" size=\"small\">\n\t\t\t<TldrawUiMenuGroup id=\"pages\">\n\t\t\t\t{pages.map((page) => (\n\t\t\t\t\t<TldrawUiMenuItem\n\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\tdisabled={currentPageId === page.id}\n\t\t\t\t\t\tlabel={page.name.length > 30 ? `${page.name.slice(0, 30)}\u2026` : page.name}\n\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('move_shapes_to_page')\n\t\t\t\t\t\t\teditor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)\n\n\t\t\t\t\t\t\tconst toPage = editor.getPage(page.id)\n\n\t\t\t\t\t\t\tif (toPage) {\n\t\t\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\t\t\ttitle: 'Changed page',\n\t\t\t\t\t\t\t\t\tdescription: `Moved to ${toPage.name}.`,\n\t\t\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Go back',\n\t\t\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('change-page')\n\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(currentPageId)\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ttrackEvent('move-to-page', { source: 'context-menu' })\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</TldrawUiMenuGroup>\n\t\t\t<TldrawUiMenuGroup id=\"new-page\">\n\t\t\t\t<TldrawUiMenuActionItem actionId=\"move-to-new-page\" />\n\t\t\t</TldrawUiMenuGroup>\n\t\t</TldrawUiMenuSubmenu>\n\t)\n}\n\n/** @public @react */\nexport function ConvertToBookmarkMenuItem() {\n\tconst editor = useEditor()\n\n\tconst oneEmbedSelected = useValue(\n\t\t'oneEmbedSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'embed') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbedSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-bookmark\" />\n}\n\n/** @public @react */\nexport function ConvertToEmbedMenuItem() {\n\tconst editor = useEditor()\n\tconst getEmbedDefinition = useGetEmbedDefinition()\n\n\tconst oneEmbeddableBookmarkSelected = useValue(\n\t\t'oneEmbeddableBookmarkSelected',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape) return false\n\t\t\treturn !!(\n\t\t\t\teditor.isShapeOfType(onlySelectedShape, 'bookmark') &&\n\t\t\t\tonlySelectedShape.props.url &&\n\t\t\t\tgetEmbedDefinition(onlySelectedShape.props.url) &&\n\t\t\t\t!editor.isShapeOrAncestorLocked(onlySelectedShape)\n\t\t\t)\n\t\t},\n\t\t[editor]\n\t)\n\n\tif (!oneEmbeddableBookmarkSelected) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"convert-to-embed\" />\n}\n\n/* ------------------- Preferences ------------------ */\n\n/** @public @react */\nexport function ToggleSnapModeItem() {\n\tconst editor = useEditor()\n\tconst isSnapMode = useValue('isSnapMode', () => editor.user.getIsSnapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-snap-mode\" checked={isSnapMode} />\n}\n\n/** @public @react */\nexport function ToggleToolLockItem() {\n\tconst editor = useEditor()\n\tconst isToolLock = useValue('isToolLock', () => editor.getInstanceState().isToolLocked, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-tool-lock\" checked={isToolLock} />\n}\n\n/** @public @react */\nexport function ToggleGridItem() {\n\tconst editor = useEditor()\n\tconst isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-grid\" checked={isGridMode} />\n}\n\n/** @public @react */\nexport function ToggleWrapModeItem() {\n\tconst editor = useEditor()\n\tconst isWrapMode = useValue('isWrapMode', () => editor.user.getIsWrapMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-wrap-mode\" checked={isWrapMode} />\n}\n\n/** @public @react */\nexport function ToggleDarkModeItem() {\n\tconst editor = useEditor()\n\tconst isDarkMode = useValue('isDarkMode', () => editor.user.getIsDarkMode(), [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-dark-mode\" checked={isDarkMode} />\n}\n\n/** @public @react */\nexport function ToggleFocusModeItem() {\n\tconst editor = useEditor()\n\tconst isFocusMode = useValue('isFocusMode', () => editor.getInstanceState().isFocusMode, [editor])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-focus-mode\" checked={isFocusMode} />\n}\n\n/** @public @react */\nexport function ToggleEdgeScrollingItem() {\n\tconst editor = useEditor()\n\tconst edgeScrollSpeed = useValue('edgeScrollSpeed', () => editor.user.getEdgeScrollSpeed(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-edge-scrolling\"\n\t\t\tchecked={edgeScrollSpeed === 1}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleReduceMotionItem() {\n\tconst editor = useEditor()\n\tconst animationSpeed = useValue('animationSpeed', () => editor.user.getAnimationSpeed(), [editor])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-reduce-motion\"\n\t\t\tchecked={animationSpeed === 0}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleKeyboardShortcutsItem() {\n\tconst editor = useEditor()\n\tconst keyboardShortcuts = useValue(\n\t\t'keyboardShortcuts',\n\t\t() => editor.user.getAreKeyboardShortcutsEnabled(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-keyboard-shortcuts\"\n\t\t\tchecked={keyboardShortcuts}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function ToggleEnhancedA11yModeItem() {\n\tconst editor = useEditor()\n\tconst enhancedA11yMode = useValue('enhancedA11yMode', () => editor.user.getEnhancedA11yMode(), [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"enhanced-a11y-mode\" checked={enhancedA11yMode} />\n}\n\n/** @public @react */\nexport function ToggleDebugModeItem() {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('isDebugMode', () => editor.getInstanceState().isDebugMode, [editor])\n\treturn <TldrawUiMenuActionCheckboxItem actionId=\"toggle-debug-mode\" checked={isDebugMode} />\n}\n\n/** @public @react */\nexport function ToggleDynamicSizeModeItem() {\n\tconst editor = useEditor()\n\tconst isDynamicResizeMode = useValue(\n\t\t'dynamic resize',\n\t\t() => editor.user.getIsDynamicResizeMode(),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem\n\t\t\tactionId=\"toggle-dynamic-size-mode\"\n\t\t\tchecked={isDynamicResizeMode}\n\t\t/>\n\t)\n}\n\n/** @public @react */\nexport function TogglePasteAtCursorItem() {\n\tconst editor = useEditor()\n\tconst pasteAtCursor = useValue('paste at cursor', () => editor.user.getIsPasteAtCursorMode(), [\n\t\teditor,\n\t])\n\n\treturn (\n\t\t<TldrawUiMenuActionCheckboxItem actionId=\"toggle-paste-at-cursor\" checked={pasteAtCursor} />\n\t)\n}\n\n/* ---------------------- Print --------------------- */\n\n/** @public @react */\nexport function PrintItem() {\n\tconst editor = useEditor()\n\tconst emptyPage = useValue('emptyPage', () => editor.getCurrentPageShapeIds().size === 0, [\n\t\teditor,\n\t])\n\n\treturn <TldrawUiMenuActionItem actionId=\"print\" disabled={emptyPage} />\n}\n\n/* ---------------------- Multiplayer --------------------- */\n\n/** @public @react */\nexport function CursorChatItem() {\n\tconst editor = useEditor()\n\tconst shouldShow = useValue(\n\t\t'show cursor chat',\n\t\t() => editor.getCurrentToolId() === 'select' && !editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\tif (!shouldShow) return null\n\n\treturn <TldrawUiMenuActionItem actionId=\"open-cursor-chat\" />\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { tltime } from "@tldraw/editor";
 import { Slider as _Slider } from "radix-ui";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
-import { TldrawUiTooltip, tooltipManager } from "./TldrawUiTooltip.mjs";
+import { hideAllTooltips, TldrawUiTooltip } from "./TldrawUiTooltip.mjs";
 const TldrawUiSlider = React.forwardRef(function Slider({
   onHistoryMark,
   title,
@@ -28,7 +28,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
     [onValueChange]
   );
   const handlePointerDown = useCallback(() => {
-    tooltipManager.hideAllTooltips();
+    hideAllTooltips();
     onHistoryMark?.("click slider");
   }, [onHistoryMark]);
   useEffect(() => {

package/dist-esm/lib/ui/components/primitives/TldrawUiSlider.mjs.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { tltime } from '@tldraw/editor'\nimport { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark?(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst [titleAndLabel, setTitleAndLabel] = useState('')\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\ttooltipManager.hideAllTooltips()\n\t\tonHistoryMark?.('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. This is a bit silly. The Radix slider auto-focuses which\n\t// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,\n\t// which in turn makes the tooltip display prematurely.\n\t// This makes it wait until we've focused to show the tooltip.\n\tuseEffect(() => {\n\t\tconst timeout = tltime.setTimeout(\n\t\t\t'set title and label',\n\t\t\t() => {\n\t\t\t\tsetTitleAndLabel(title + ' \u2014 ' + msg(label as TLUiTranslationKey))\n\t\t\t},\n\t\t\t0\n\t\t)\n\t\treturn () => clearTimeout(timeout)\n\t}, [label, msg, title])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<TldrawUiTooltip content={titleAndLabel}>\n\t\t\t\t<_Slider.Root\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tmin={min ?? 0}\n\t\t\t\t\tmax={steps}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\t>\n\t\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t\t</_Slider.Track>\n\t\t\t\t\t{value !== null && (\n\t\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\t\taria-label={titleAndLabel}\n\t\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</_Slider.Root>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAsFI,SAcqB,KAdrB;AAtFJ,SAAS,cAAc;AACvB,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,sBAAsB;AAgBzC,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AAKrD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,mBAAe,gBAAgB;AAC/B,oBAAgB,cAAc;AAAA,EAC/B,GAAG,CAAC,aAAa,CAAC;AAMlB,YAAU,MAAM;AACf,UAAM,UAAU,OAAO;AAAA,MACtB;AAAA,MACA,MAAM;AACL,yBAAiB,QAAQ,aAAQ,IAAI,KAA2B,CAAC;AAAA,MAClE;AAAA,MACA;AAAA,IACD;AACA,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC;AAMtB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd,8BAAC,mBAAgB,SAAS,eACzB;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAEhB;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { tltime } from '@tldraw/editor'\nimport { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { hideAllTooltips, TldrawUiTooltip } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark?(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst [titleAndLabel, setTitleAndLabel] = useState('')\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\thideAllTooltips()\n\t\tonHistoryMark?.('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. This is a bit silly. The Radix slider auto-focuses which\n\t// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,\n\t// which in turn makes the tooltip display prematurely.\n\t// This makes it wait until we've focused to show the tooltip.\n\tuseEffect(() => {\n\t\tconst timeout = tltime.setTimeout(\n\t\t\t'set title and label',\n\t\t\t() => {\n\t\t\t\tsetTitleAndLabel(title + ' \u2014 ' + msg(label as TLUiTranslationKey))\n\t\t\t},\n\t\t\t0\n\t\t)\n\t\treturn () => clearTimeout(timeout)\n\t}, [label, msg, title])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<TldrawUiTooltip content={titleAndLabel}>\n\t\t\t\t<_Slider.Root\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tmin={min ?? 0}\n\t\t\t\t\tmax={steps}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\t>\n\t\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t\t</_Slider.Track>\n\t\t\t\t\t{value !== null && (\n\t\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\t\taria-label={titleAndLabel}\n\t\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</_Slider.Root>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAsFI,SAcqB,KAdrB;AAtFJ,SAAS,cAAc;AACvB,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,uBAAuB;AAgB1C,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AAKrD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,oBAAgB;AAChB,oBAAgB,cAAc;AAAA,EAC/B,GAAG,CAAC,aAAa,CAAC;AAMlB,YAAU,MAAM;AACf,UAAM,UAAU,OAAO;AAAA,MACtB;AAAA,MACA,MAAM;AACL,yBAAiB,QAAQ,aAAQ,IAAI,KAA2B,CAAC;AAAA,MAClE;AAAA,MACA;AAAA,IACD;AACA,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC;AAMtB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd,8BAAC,mBAAgB,SAAS,eACzB;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAEhB;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD,GACD;AAEF,CAAC;",
   "names": ["value"]
 }