tldraw 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

package/dist-cjs/lib/ui/components/StylePanel/{DropdownPicker.js → StylePanelDropdownPicker.js}

@@ -26,14 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DropdownPicker_exports = {};
-__export(DropdownPicker_exports, {
-  DropdownPicker: () => DropdownPicker
+var StylePanelDropdownPicker_exports = {};
+__export(StylePanelDropdownPicker_exports, {
+  StylePanelDropdownPicker: () => StylePanelDropdownPicker
 });
-module.exports = __toCommonJS(DropdownPicker_exports);
+module.exports = __toCommonJS(StylePanelDropdownPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
 var React = __toESM(require("react"));
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
@@ -41,17 +40,20 @@ var import_TldrawUiButtonLabel = require("../primitives/Button/TldrawUiButtonLab
 var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");
 var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 var import_TldrawUiMenuContext = require("../primitives/menus/TldrawUiMenuContext");
-function DropdownPickerInner({
-  id,
-  label,
-  uiType,
-  stylePanelType,
-  style,
-  items,
-  type,
-  value,
-  onValueChange
-}) {
+var import_StylePanelContext = require("./StylePanelContext");
+function DropdownPickerInner(props) {
+  const ctx = (0, import_StylePanelContext.useStylePanelContext)();
+  const {
+    id,
+    label,
+    uiType,
+    stylePanelType,
+    style,
+    items,
+    type,
+    value,
+    onValueChange = ctx.onValueChange
+  } = props;
   const msg = (0, import_useTranslation.useTranslation)();
   const editor = (0, import_editor.useEditor)();
   const [isOpen, setIsOpen] = React.useState(false);
@@ -63,26 +65,28 @@ function DropdownPickerInner({
   const titleStr = value.type === "mixed" ? msg("style-panel.mixed") : stylePanelName + " \u2014 " + msg(`${uiType}-style.${value.value}`);
   const labelStr = label ? msg(label) : "";
   const popoverId = `style panel ${id}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiPopover.TldrawUiPopover, { id: popoverId, open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_TldrawUiToolbar.TldrawUiToolbarButton,
-      {
-        type,
-        "data-testid": `style.${uiType}`,
-        "data-direction": "left",
-        title: titleStr,
-        children: [
-          labelStr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonLabel.TldrawUiButtonLabel, { children: labelStr }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: icon ?? "mixed" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiToolbar.TldrawUiToolbar,
-      {
-        label: labelStr,
-        className: (0, import_classnames.default)("tlui-buttons__grid", `tlui-buttons__${stylePanelType}`),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { label: stylePanelName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_TldrawUiPopover.TldrawUiPopover,
+    {
+      id: popoverId,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      className: "tlui-style-panel__dropdown-picker",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_TldrawUiToolbar.TldrawUiToolbarButton,
+          {
+            type,
+            "data-testid": `style.${uiType}`,
+            "data-direction": "left",
+            title: titleStr,
+            children: [
+              labelStr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonLabel.TldrawUiButtonLabel, { children: labelStr }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: icon ?? "mixed" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiPopover.TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiToolbar.TldrawUiToolbar, { orientation: items.length > 4 ? "grid" : "horizontal", label: labelStr, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiMenuContext.TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_TldrawUiToolbar.TldrawUiToolbarButton,
             {
@@ -91,7 +95,7 @@ function DropdownPickerInner({
               title: stylePanelName + " \u2014 " + msg(`${uiType}-style.${item.value}`),
               isActive: icon === item.icon,
               onClick: () => {
-                editor.markHistoryStoppingPoint("select style dropdown item");
+                ctx.onHistoryMark("select style dropdown item");
                 onValueChange(style, item.value);
                 import_editor.tlmenus.deleteOpenMenu(popoverId, editor.contextId);
                 setIsOpen(false);
@@ -100,10 +104,10 @@ function DropdownPickerInner({
             },
             item.value
           );
-        }) })
-      }
-    ) })
-  ] });
+        }) }) }) })
+      ]
+    }
+  ) });
 }
-const DropdownPicker = React.memo(DropdownPickerInner);
-//# sourceMappingURL=DropdownPicker.js.map
+const StylePanelDropdownPicker = React.memo(DropdownPickerInner);
+//# sourceMappingURL=StylePanelDropdownPicker.js.map

package/dist-cjs/lib/ui/components/StylePanel/StylePanelDropdownPicker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelDropdownPicker.tsx"],
+  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport * as React from 'react'\nimport { StyleValuesForUi } from '../../../styles'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../../icon-types'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\nimport { useStylePanelContext } from './StylePanelContext'\n\n/** @public */\nexport interface StylePanelDropdownPickerProps<T extends string> {\n\tid: string\n\tlabel?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\tuiType: string\n\tstylePanelType: string\n\tstyle: StyleProp<T>\n\tvalue: SharedStyle<T>\n\titems: StyleValuesForUi<T>\n\ttype: 'icon' | 'tool' | 'menu'\n\tonValueChange?(style: StyleProp<T>, value: T): void\n}\n\nfunction DropdownPickerInner<T extends string>(props: StylePanelDropdownPickerProps<T>) {\n\tconst ctx = useStylePanelContext()\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tuiType,\n\t\tstylePanelType,\n\t\tstyle,\n\t\titems,\n\t\ttype,\n\t\tvalue,\n\t\tonValueChange = ctx.onValueChange,\n\t} = props\n\tconst msg = useTranslation()\n\tconst editor = useEditor()\n\tconst [isOpen, setIsOpen] = React.useState(false)\n\n\tconst icon = React.useMemo(\n\t\t() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,\n\t\t[items, value]\n\t)\n\n\tconst stylePanelName = msg(`style-panel.${stylePanelType}` as TLUiTranslationKey)\n\n\tconst titleStr =\n\t\tvalue.type === 'mixed'\n\t\t\t? msg('style-panel.mixed')\n\t\t\t: stylePanelName + ' \u2014 ' + msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)\n\tconst labelStr = label ? msg(label) : ''\n\n\tconst popoverId = `style panel ${id}`\n\treturn (\n\t\t<TldrawUiToolbar label={stylePanelName}>\n\t\t\t<TldrawUiPopover\n\t\t\t\tid={popoverId}\n\t\t\t\topen={isOpen}\n\t\t\t\tonOpenChange={setIsOpen}\n\t\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t\t>\n\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\ttype={type}\n\t\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\t\ttitle={titleStr}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t\t<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} label={labelStr}>\n\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\t\t\t\t\t\t\t\t\t\t\tmsg(`${uiType}-style.${item.value}` as TLUiTranslationKey)\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tctx.onHistoryMark('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\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\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t</TldrawUiPopover>\n\t\t</TldrawUiToolbar>\n\t)\n}\n\n// need to export like this to get generics\n/** @public @react */\nexport const StylePanelDropdownPicker = React.memo(DropdownPickerInner) as <T extends string>(\n\tprops: StylePanelDropdownPickerProps<T>\n) => React.JSX.Element\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEK;AAtEL,oBAA2D;AAC3D,YAAuB;AAGvB,4BAA+B;AAE/B,gCAAmC;AACnC,iCAAoC;AACpC,6BAIO;AACP,6BAAuD;AACvD,iCAA4C;AAC5C,+BAAqC;AAerC,SAAS,oBAAsC,OAAyC;AACvF,QAAM,UAAM,+CAAqB;AACjC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI;AAAA,EACrB,IAAI;AACJ,QAAM,UAAM,sCAAe;AAC3B,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAEhD,QAAM,OAAO,MAAM;AAAA,IAClB,MAAM,MAAM,KAAK,CAAC,SAAS,MAAM,SAAS,YAAY,KAAK,UAAU,MAAM,KAAK,GAAG;AAAA,IACnF,CAAC,OAAO,KAAK;AAAA,EACd;AAEA,QAAM,iBAAiB,IAAI,eAAe,cAAc,EAAwB;AAEhF,QAAM,WACL,MAAM,SAAS,UACZ,IAAI,mBAAmB,IACvB,iBAAiB,aAAQ,IAAI,GAAG,MAAM,UAAU,MAAM,KAAK,EAAwB;AACvF,QAAM,WAAW,QAAQ,IAAI,KAAK,IAAI;AAEtC,QAAM,YAAY,eAAe,EAAE;AACnC,SACC,4CAAC,0CAAgB,OAAO,gBACvB;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,oDAAC,iDACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,4CAAC,kDAAqB,oBAAS;AAAA,cAC5C,4CAAC,gDAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,4CAAC,iDAAuB,MAAK,QAAO,OAAM,UACzC,sDAAC,0CAAgB,aAAa,MAAM,SAAS,IAAI,SAAS,cAAc,OAAO,UAC9E,sDAAC,0DAA4B,MAAK,SAAQ,UAAS,eACjD,gBAAM,IAAI,CAAC,SAAS;AACpB,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,eAAa,SAAS,MAAM,IAAI,KAAK,KAAK;AAAA,cAC1C,OACC,iBACA,aACA,IAAI,GAAG,MAAM,UAAU,KAAK,KAAK,EAAwB;AAAA,cAE1D,UAAU,SAAS,KAAK;AAAA,cACxB,SAAS,MAAM;AACd,oBAAI,cAAc,4BAA4B;AAC9C,8BAAc,OAAO,KAAK,KAAK;AAC/B,sCAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,sDAAC,gDAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD,GACD;AAEF;AAIO,MAAM,2BAA2B,MAAM,KAAK,mBAAmB;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StylePanelSubheading_exports = {};
+__export(StylePanelSubheading_exports, {
+  StylePanelSubheading: () => StylePanelSubheading
+});
+module.exports = __toCommonJS(StylePanelSubheading_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function StylePanelSubheading({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "tlui-style-panel__subheading", children });
+}
+//# sourceMappingURL=StylePanelSubheading.js.map

package/dist-cjs/lib/ui/components/StylePanel/StylePanelSubheading.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/StylePanel/StylePanelSubheading.tsx"],
+  "sourcesContent": ["/** @public */\nexport interface StylePanelSubheadingProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function StylePanelSubheading({ children }: StylePanelSubheadingProps) {\n\treturn <h3 className=\"tlui-style-panel__subheading\">{children}</h3>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOQ;AADD,SAAS,qBAAqB,EAAE,SAAS,GAA8B;AAC7E,SAAO,4CAAC,QAAG,WAAU,gCAAgC,UAAS;AAC/D;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js

@@ -26,9 +26,9 @@ var import_editor = require("@tldraw/editor");
 var import_react = require("react");
 var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
-var import_TldrawUiButton = require("../primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiInput = require("../primitives/TldrawUiInput");
+var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 function AltTextEditor({ shapeId, onClose, source }) {
   const editor = (0, import_editor.useEditor)();
   const [altText, setAltText] = (0, import_react.useState)(() => {
@@ -86,9 +86,10 @@ function AltTextEditor({ shapeId, onClose, source }) {
       }
     ),
     !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiButton.TldrawUiButton,
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
       {
         title: msg("tool.media-alt-text-confirm"),
+        "data-testid": "tool.media-alt-text-confirm",
         type: "icon",
         onPointerDown: import_editor.preventDefault,
         onClick: handleConfirm,

package/dist-cjs/lib/ui/components/Toolbar/AltTextEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/AltTextEditor.tsx"],
-  "sourcesContent": ["import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\n\n/** @public */\nexport interface AltTextEditorProps {\n\tshapeId: TLShapeId\n\tonClose(): void\n\tsource: 'image-toolbar' | 'video-toolbar'\n}\n\n/** @public @react */\nexport function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps) {\n\tconst editor = useEditor()\n\tconst [altText, setAltText] = useState(() => {\n\t\tconst shape = editor.getShape<TLShape>(shapeId)\n\t\tif (!shape) return ''\n\t\tif (!('altText' in shape.props)) throw Error('Shape does not have altText property')\n\t\treturn shape.props.altText || ''\n\t})\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst handleValueChange = (value: string) => setAltText(value)\n\n\tconst handleComplete = () => {\n\t\ttrackEvent('set-alt-text', { source })\n\t\tconst shape = editor.getShape<TLShape & { props: { altText: string } }>(shapeId)\n\t\tif (!shape) return\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { altText },\n\t\t\t},\n\t\t])\n\t\tonClose()\n\t}\n\n\tconst handleConfirm = () => handleComplete()\n\tconst handleAltTextCancel = useCallback(() => onClose(), [onClose])\n\n\tuseEffect(() => {\n\t\tref.current?.select()\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\thandleAltTextCancel()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [handleAltTextCancel])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tclassName=\"tlui-media__toolbar-alt-text-input\"\n\t\t\t\tdata-testid=\"media-toolbar.alt-text-input\"\n\t\t\t\tvalue={altText}\n\t\t\t\tplaceholder={msg('tool.media-alt-text-desc')}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleComplete}\n\t\t\t\tonCancel={handleAltTextCancel}\n\t\t\t\tdisabled={isReadonly}\n\t\t\t/>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttitle={msg('tool.media-alt-text-confirm')}\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\t\tonClick={handleConfirm}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEE;AAjEF,oBAA8D;AAC9D,mBAAyD;AACzD,oBAA4B;AAC5B,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AACnC,2BAA8B;AAUvB,SAAS,cAAc,EAAE,SAAS,SAAS,OAAO,GAAuB;AAC/E,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,MAAM;AAC5C,UAAM,QAAQ,OAAO,SAAkB,OAAO;AAC9C,QAAI,CAAC,MAAO,QAAO;AACnB,QAAI,EAAE,aAAa,MAAM,OAAQ,OAAM,MAAM,sCAAsC;AACnF,WAAO,MAAM,MAAM,WAAW;AAAA,EAC/B,CAAC;AACD,QAAM,UAAM,sCAAe;AAC3B,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,iBAAa,2BAAY;AAC/B,QAAM,aAAa,OAAO,cAAc;AAExC,QAAM,oBAAoB,CAAC,UAAkB,WAAW,KAAK;AAE7D,QAAM,iBAAiB,MAAM;AAC5B,eAAW,gBAAgB,EAAE,OAAO,CAAC;AACrC,UAAM,QAAQ,OAAO,SAAmD,OAAO;AAC/E,QAAI,CAAC,MAAO;AACZ,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,QAAQ;AAAA,MAClB;AAAA,IACD,CAAC;AACD,YAAQ;AAAA,EACT;AAEA,QAAM,gBAAgB,MAAM,eAAe;AAC3C,QAAM,0BAAsB,0BAAY,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAElE,8BAAU,MAAM;AACf,QAAI,SAAS,OAAO;AAEpB,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,UAAU;AAC3B,cAAM,gBAAgB;AACtB,4BAAoB;AAAA,MACrB;AAAA,IACD;AAEA,aAAS,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACrE,WAAO,MAAM;AACZ,eAAS,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACzE;AAAA,EACD,GAAG,CAAC,mBAAmB,CAAC;AAExB,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,aAAa,IAAI,0BAA0B;AAAA,QAC3C,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA;AAAA,IACX;AAAA,IACC,CAAC,cACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,IAAI,6BAA6B;AAAA,QACxC,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,sDAAC,gDAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KAEF;AAEF;",
+  "sourcesContent": ["import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiInput } from '../primitives/TldrawUiInput'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface AltTextEditorProps {\n\tshapeId: TLShapeId\n\tonClose(): void\n\tsource: 'image-toolbar' | 'video-toolbar'\n}\n\n/** @public @react */\nexport function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps) {\n\tconst editor = useEditor()\n\tconst [altText, setAltText] = useState(() => {\n\t\tconst shape = editor.getShape<TLShape>(shapeId)\n\t\tif (!shape) return ''\n\t\tif (!('altText' in shape.props)) throw Error('Shape does not have altText property')\n\t\treturn shape.props.altText || ''\n\t})\n\tconst msg = useTranslation()\n\tconst ref = useRef<HTMLInputElement>(null)\n\tconst trackEvent = useUiEvents()\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst handleValueChange = (value: string) => setAltText(value)\n\n\tconst handleComplete = () => {\n\t\ttrackEvent('set-alt-text', { source })\n\t\tconst shape = editor.getShape<Extract<TLShape, { props: { altText: string } }>>(shapeId)\n\t\tif (!shape) return\n\t\teditor.updateShapes([\n\t\t\t{\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tprops: { altText },\n\t\t\t},\n\t\t])\n\t\tonClose()\n\t}\n\n\tconst handleConfirm = () => handleComplete()\n\tconst handleAltTextCancel = useCallback(() => onClose(), [onClose])\n\n\tuseEffect(() => {\n\t\tref.current?.select()\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\thandleAltTextCancel()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [handleAltTextCancel])\n\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiInput\n\t\t\t\tref={ref}\n\t\t\t\tclassName=\"tlui-media__toolbar-alt-text-input\"\n\t\t\t\tdata-testid=\"media-toolbar.alt-text-input\"\n\t\t\t\tvalue={altText}\n\t\t\t\tplaceholder={msg('tool.media-alt-text-desc')}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonComplete={handleComplete}\n\t\t\t\tonCancel={handleAltTextCancel}\n\t\t\t\tdisabled={isReadonly}\n\t\t\t/>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttitle={msg('tool.media-alt-text-confirm')}\n\t\t\t\t\tdata-testid=\"tool.media-alt-text-confirm\"\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonPointerDown={preventDefault}\n\t\t\t\t\tonClick={handleConfirm}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t</>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiEE;AAjEF,oBAA8D;AAC9D,mBAAyD;AACzD,oBAA4B;AAC5B,4BAA+B;AAC/B,gCAAmC;AACnC,2BAA8B;AAC9B,6BAAsC;AAU/B,SAAS,cAAc,EAAE,SAAS,SAAS,OAAO,GAAuB;AAC/E,QAAM,aAAS,yBAAU;AACzB,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,MAAM;AAC5C,UAAM,QAAQ,OAAO,SAAkB,OAAO;AAC9C,QAAI,CAAC,MAAO,QAAO;AACnB,QAAI,EAAE,aAAa,MAAM,OAAQ,OAAM,MAAM,sCAAsC;AACnF,WAAO,MAAM,MAAM,WAAW;AAAA,EAC/B,CAAC;AACD,QAAM,UAAM,sCAAe;AAC3B,QAAM,UAAM,qBAAyB,IAAI;AACzC,QAAM,iBAAa,2BAAY;AAC/B,QAAM,aAAa,OAAO,cAAc;AAExC,QAAM,oBAAoB,CAAC,UAAkB,WAAW,KAAK;AAE7D,QAAM,iBAAiB,MAAM;AAC5B,eAAW,gBAAgB,EAAE,OAAO,CAAC;AACrC,UAAM,QAAQ,OAAO,SAA2D,OAAO;AACvF,QAAI,CAAC,MAAO;AACZ,WAAO,aAAa;AAAA,MACnB;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,OAAO,EAAE,QAAQ;AAAA,MAClB;AAAA,IACD,CAAC;AACD,YAAQ;AAAA,EACT;AAEA,QAAM,gBAAgB,MAAM,eAAe;AAC3C,QAAM,0BAAsB,0BAAY,MAAM,QAAQ,GAAG,CAAC,OAAO,CAAC;AAElE,8BAAU,MAAM;AACf,QAAI,SAAS,OAAO;AAEpB,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,UAAU;AAC3B,cAAM,gBAAgB;AACtB,4BAAoB;AAAA,MACrB;AAAA,IACD;AAEA,aAAS,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACrE,WAAO,MAAM;AACZ,eAAS,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACzE;AAAA,EACD,GAAG,CAAC,mBAAmB,CAAC;AAExB,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO;AAAA,QACP,aAAa,IAAI,0BAA0B;AAAA,QAC3C,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,UAAU;AAAA;AAAA,IACX;AAAA,IACC,CAAC,cACD;AAAA,MAAC;AAAA;AAAA,QACA,OAAO,IAAI,6BAA6B;AAAA,QACxC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,eAAe;AAAA,QACf,SAAS;AAAA,QAET,sDAAC,gDAAmB,OAAK,MAAC,MAAK,SAAQ;AAAA;AAAA,IACxC;AAAA,KAEF;AAEF;",
   "names": []
 }

package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbar.js

@@ -28,9 +28,7 @@ var import_useTranslation = require("../../hooks/useTranslation/useTranslation")
 var import_TldrawUiContextualToolbar = require("../primitives/TldrawUiContextualToolbar");
 var import_AltTextEditor = require("./AltTextEditor");
 var import_DefaultImageToolbarContent = require("./DefaultImageToolbarContent");
-const DefaultImageToolbar = (0, import_editor.track)(function DefaultImageToolbar2({
-  children
-}) {
+function DefaultImageToolbar({ children }) {
   const editor = (0, import_editor.useEditor)();
   const imageShapeId = (0, import_editor.useValue)(
     "imageShape",
@@ -41,7 +39,11 @@ const DefaultImageToolbar = (0, import_editor.track)(function DefaultImageToolba
     },
     [editor]
   );
-  const showToolbar = editor.isInAny("select.idle", "select.pointing_shape", "select.crop");
+  const showToolbar = (0, import_editor.useValue)(
+    "showToolbar",
+    () => editor.isInAny("select.idle", "select.pointing_shape", "select.crop"),
+    [editor]
+  );
   const isLocked = (0, import_editor.useValue)(
     "locked",
     () => imageShapeId ? editor.getShape(imageShapeId)?.isLocked : false,
@@ -49,15 +51,24 @@ const DefaultImageToolbar = (0, import_editor.track)(function DefaultImageToolba
   );
   if (!imageShapeId || !showToolbar || isLocked) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextualToolbarInner, { imageShapeId, children }, imageShapeId);
-});
+}
 function ContextualToolbarInner({
   children,
   imageShapeId
 }) {
   const editor = (0, import_editor.useEditor)();
   const msg = (0, import_useTranslation.useTranslation)();
+  const isChangingCrop = (0, import_editor.useValue)(
+    "editor path",
+    () => editor.isInAny(
+      "select.crop.cropping",
+      "select.crop.pointing_crop_handle",
+      "select.crop.translating_crop"
+    ),
+    [editor]
+  );
+  const camera = (0, import_editor.useValue)("camera", () => editor.getCamera(), [editor]);
   const isInCropTool = (0, import_editor.useValue)("editor path", () => editor.isIn("select.crop."), [editor]);
-  const isCropping = (0, import_editor.useValue)("editor path", () => editor.isIn("select.crop.cropping"), [editor]);
   const previousSelectionBounds = (0, import_react.useRef)();
   const handleManipulatingEnd = (0, import_react.useCallback)(() => {
     editor.setCroppingShape(null);
@@ -70,6 +81,9 @@ function ContextualToolbarInner({
     [editor]
   );
   const onEditAltTextClose = (0, import_react.useCallback)(() => setIsEditingAltText(false), []);
+  (0, import_react.useEffect)(() => {
+    previousSelectionBounds.current = void 0;
+  }, [camera]);
   const getSelectionBounds = (0, import_react.useCallback)(() => {
     if (isInCropTool && previousSelectionBounds.current) {
       return previousSelectionBounds.current;
@@ -80,7 +94,7 @@ function ContextualToolbarInner({
     previousSelectionBounds.current = bounds;
     return bounds;
   }, [editor, isInCropTool]);
-  if (isCropping) {
+  if (isChangingCrop) {
     previousSelectionBounds.current = void 0;
     return null;
   }

package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx"],
-  "sourcesContent": ["import { Box, TLImageShape, track, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback, useRef, useState } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiContextualToolbar } from '../primitives/TldrawUiContextualToolbar'\nimport { AltTextEditor } from './AltTextEditor'\nimport { DefaultImageToolbarContent } from './DefaultImageToolbarContent'\n\n/** @public */\nexport interface TLUiImageToolbarProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport const DefaultImageToolbar = track(function DefaultImageToolbar({\n\tchildren,\n}: TLUiImageToolbarProps) {\n\tconst editor = useEditor()\n\tconst imageShapeId = useValue(\n\t\t'imageShape',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape || onlySelectedShape.type !== 'image') return null\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\tconst showToolbar = editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop')\n\tconst isLocked = useValue(\n\t\t'locked',\n\t\t() => (imageShapeId ? editor.getShape<TLImageShape>(imageShapeId)?.isLocked : false),\n\t\t[editor, imageShapeId]\n\t)\n\tif (!imageShapeId || !showToolbar || isLocked) return null\n\n\treturn (\n\t\t<ContextualToolbarInner key={imageShapeId} imageShapeId={imageShapeId}>\n\t\t\t{children}\n\t\t</ContextualToolbarInner>\n\t)\n})\n\nfunction ContextualToolbarInner({\n\tchildren,\n\timageShapeId,\n}: {\n\tchildren?: React.ReactNode\n\timageShapeId: TLImageShape['id']\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])\n\tconst isCropping = useValue('editor path', () => editor.isIn('select.crop.cropping'), [editor])\n\tconst previousSelectionBounds = useRef<Box | undefined>()\n\tconst handleManipulatingEnd = useCallback(() => {\n\t\teditor.setCroppingShape(null)\n\t\teditor.setCurrentTool('select.idle')\n\t}, [editor])\n\n\tconst [isEditingAltText, setIsEditingAltText] = useState(false)\n\tconst handleEditAltTextStart = useCallback(() => setIsEditingAltText(true), [])\n\tconst handleManipulatingStart = useCallback(\n\t\t() => editor.setCurrentTool('select.crop.idle'),\n\t\t[editor]\n\t)\n\tconst onEditAltTextClose = useCallback(() => setIsEditingAltText(false), [])\n\n\tconst getSelectionBounds = useCallback(() => {\n\t\tif (isInCropTool && previousSelectionBounds.current) {\n\t\t\t// If we're cropping we want to be able to keep the toolbar in the same position.\n\t\t\treturn previousSelectionBounds.current\n\t\t}\n\t\tconst fullBounds = editor.getSelectionScreenBounds()\n\t\tif (!fullBounds) return undefined\n\t\tconst bounds = new Box(fullBounds.x, fullBounds.y, fullBounds.width, 0)\n\t\tpreviousSelectionBounds.current = bounds\n\t\treturn bounds\n\t}, [editor, isInCropTool])\n\n\tif (isCropping) {\n\t\tpreviousSelectionBounds.current = undefined\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiContextualToolbar\n\t\t\tclassName=\"tlui-image__toolbar\"\n\t\t\tgetSelectionBounds={getSelectionBounds}\n\t\t\tlabel={msg('tool.image-toolbar-title')}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\tchildren\n\t\t\t) : isEditingAltText ? (\n\t\t\t\t<AltTextEditor shapeId={imageShapeId} onClose={onEditAltTextClose} source=\"image-toolbar\" />\n\t\t\t) : (\n\t\t\t\t<DefaultImageToolbarContent\n\t\t\t\t\timageShapeId={imageShapeId}\n\t\t\t\t\tisManipulating={isInCropTool}\n\t\t\t\t\tonEditAltTextStart={handleEditAltTextStart}\n\t\t\t\t\tonManipulatingStart={handleManipulatingStart}\n\t\t\t\t\tonManipulatingEnd={handleManipulatingEnd}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiContextualToolbar>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCE;AAnCF,oBAA8D;AAC9D,mBAA8C;AAC9C,4BAA+B;AAC/B,uCAA0C;AAC1C,2BAA8B;AAC9B,wCAA2C;AAQpC,MAAM,0BAAsB,qBAAM,SAASA,qBAAoB;AAAA,EACrE;AACD,GAA0B;AACzB,QAAM,aAAS,yBAAU;AACzB,QAAM,mBAAe;AAAA,IACpB;AAAA,IACA,MAAM;AACL,YAAM,oBAAoB,OAAO,qBAAqB;AACtD,UAAI,CAAC,qBAAqB,kBAAkB,SAAS,QAAS,QAAO;AACrE,aAAO,kBAAkB;AAAA,IAC1B;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AACA,QAAM,cAAc,OAAO,QAAQ,eAAe,yBAAyB,aAAa;AACxF,QAAM,eAAW;AAAA,IAChB;AAAA,IACA,MAAO,eAAe,OAAO,SAAuB,YAAY,GAAG,WAAW;AAAA,IAC9E,CAAC,QAAQ,YAAY;AAAA,EACtB;AACA,MAAI,CAAC,gBAAgB,CAAC,eAAe,SAAU,QAAO;AAEtD,SACC,4CAAC,0BAA0C,cACzC,YAD2B,YAE7B;AAEF,CAAC;AAED,SAAS,uBAAuB;AAAA,EAC/B;AAAA,EACA;AACD,GAGG;AACF,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,mBAAe,wBAAS,eAAe,MAAM,OAAO,KAAK,cAAc,GAAG,CAAC,MAAM,CAAC;AACxF,QAAM,iBAAa,wBAAS,eAAe,MAAM,OAAO,KAAK,sBAAsB,GAAG,CAAC,MAAM,CAAC;AAC9F,QAAM,8BAA0B,qBAAwB;AACxD,QAAM,4BAAwB,0BAAY,MAAM;AAC/C,WAAO,iBAAiB,IAAI;AAC5B,WAAO,eAAe,aAAa;AAAA,EACpC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAS,KAAK;AAC9D,QAAM,6BAAyB,0BAAY,MAAM,oBAAoB,IAAI,GAAG,CAAC,CAAC;AAC9E,QAAM,8BAA0B;AAAA,IAC/B,MAAM,OAAO,eAAe,kBAAkB;AAAA,IAC9C,CAAC,MAAM;AAAA,EACR;AACA,QAAM,yBAAqB,0BAAY,MAAM,oBAAoB,KAAK,GAAG,CAAC,CAAC;AAE3E,QAAM,yBAAqB,0BAAY,MAAM;AAC5C,QAAI,gBAAgB,wBAAwB,SAAS;AAEpD,aAAO,wBAAwB;AAAA,IAChC;AACA,UAAM,aAAa,OAAO,yBAAyB;AACnD,QAAI,CAAC,WAAY,QAAO;AACxB,UAAM,SAAS,IAAI,kBAAI,WAAW,GAAG,WAAW,GAAG,WAAW,OAAO,CAAC;AACtE,4BAAwB,UAAU;AAClC,WAAO;AAAA,EACR,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,MAAI,YAAY;AACf,4BAAwB,UAAU;AAClC,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA,OAAO,IAAI,0BAA0B;AAAA,MAEpC,qBACA,WACG,mBACH,4CAAC,sCAAc,SAAS,cAAc,SAAS,oBAAoB,QAAO,iBAAgB,IAE1F;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,gBAAgB;AAAA,UAChB,oBAAoB;AAAA,UACpB,qBAAqB;AAAA,UACrB,mBAAmB;AAAA;AAAA,MACpB;AAAA;AAAA,EAEF;AAEF;",
-  "names": ["DefaultImageToolbar"]
+  "sourcesContent": ["import { Box, TLImageShape, useEditor, useValue } from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiContextualToolbar } from '../primitives/TldrawUiContextualToolbar'\nimport { AltTextEditor } from './AltTextEditor'\nimport { DefaultImageToolbarContent } from './DefaultImageToolbarContent'\n\n/** @public */\nexport interface TLUiImageToolbarProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {\n\tconst editor = useEditor()\n\tconst imageShapeId = useValue(\n\t\t'imageShape',\n\t\t() => {\n\t\t\tconst onlySelectedShape = editor.getOnlySelectedShape()\n\t\t\tif (!onlySelectedShape || onlySelectedShape.type !== 'image') return null\n\t\t\treturn onlySelectedShape.id\n\t\t},\n\t\t[editor]\n\t)\n\tconst showToolbar = useValue(\n\t\t'showToolbar',\n\t\t() => editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop'),\n\t\t[editor]\n\t)\n\tconst isLocked = useValue(\n\t\t'locked',\n\t\t() => (imageShapeId ? editor.getShape<TLImageShape>(imageShapeId)?.isLocked : false),\n\t\t[editor, imageShapeId]\n\t)\n\tif (!imageShapeId || !showToolbar || isLocked) return null\n\n\treturn (\n\t\t<ContextualToolbarInner key={imageShapeId} imageShapeId={imageShapeId}>\n\t\t\t{children}\n\t\t</ContextualToolbarInner>\n\t)\n}\n\nfunction ContextualToolbarInner({\n\tchildren,\n\timageShapeId,\n}: {\n\tchildren?: React.ReactNode\n\timageShapeId: TLImageShape['id']\n}) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst isChangingCrop = useValue(\n\t\t'editor path',\n\t\t() =>\n\t\t\teditor.isInAny(\n\t\t\t\t'select.crop.cropping',\n\t\t\t\t'select.crop.pointing_crop_handle',\n\t\t\t\t'select.crop.translating_crop'\n\t\t\t),\n\t\t[editor]\n\t)\n\tconst camera = useValue('camera', () => editor.getCamera(), [editor])\n\tconst isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])\n\tconst previousSelectionBounds = useRef<Box | undefined>()\n\tconst handleManipulatingEnd = useCallback(() => {\n\t\teditor.setCroppingShape(null)\n\t\teditor.setCurrentTool('select.idle')\n\t}, [editor])\n\n\tconst [isEditingAltText, setIsEditingAltText] = useState(false)\n\tconst handleEditAltTextStart = useCallback(() => setIsEditingAltText(true), [])\n\tconst handleManipulatingStart = useCallback(\n\t\t() => editor.setCurrentTool('select.crop.idle'),\n\t\t[editor]\n\t)\n\tconst onEditAltTextClose = useCallback(() => setIsEditingAltText(false), [])\n\n\tuseEffect(() => {\n\t\tpreviousSelectionBounds.current = undefined\n\t}, [camera])\n\n\tconst getSelectionBounds = useCallback(() => {\n\t\tif (isInCropTool && previousSelectionBounds.current) {\n\t\t\t// If we're cropping we want to be able to keep the toolbar in the same position.\n\t\t\treturn previousSelectionBounds.current\n\t\t}\n\t\tconst fullBounds = editor.getSelectionScreenBounds()\n\t\tif (!fullBounds) return undefined\n\t\tconst bounds = new Box(fullBounds.x, fullBounds.y, fullBounds.width, 0)\n\t\tpreviousSelectionBounds.current = bounds\n\t\treturn bounds\n\t}, [editor, isInCropTool])\n\n\tif (isChangingCrop) {\n\t\tpreviousSelectionBounds.current = undefined\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<TldrawUiContextualToolbar\n\t\t\tclassName=\"tlui-image__toolbar\"\n\t\t\tgetSelectionBounds={getSelectionBounds}\n\t\t\tlabel={msg('tool.image-toolbar-title')}\n\t\t>\n\t\t\t{children ? (\n\t\t\t\tchildren\n\t\t\t) : isEditingAltText ? (\n\t\t\t\t<AltTextEditor shapeId={imageShapeId} onClose={onEditAltTextClose} source=\"image-toolbar\" />\n\t\t\t) : (\n\t\t\t\t<DefaultImageToolbarContent\n\t\t\t\t\timageShapeId={imageShapeId}\n\t\t\t\t\tisManipulating={isInCropTool}\n\t\t\t\t\tonEditAltTextStart={handleEditAltTextStart}\n\t\t\t\t\tonManipulatingStart={handleManipulatingStart}\n\t\t\t\t\tonManipulatingEnd={handleManipulatingEnd}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TldrawUiContextualToolbar>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": []
 }

package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js

@@ -28,11 +28,11 @@ var import_crop = require("../../../shapes/shared/crop");
 var import_actions = require("../../context/actions");
 var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
-var import_TldrawUiButton = require("../primitives/Button/TldrawUiButton");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiButtonLabel = require("../primitives/Button/TldrawUiButtonLabel");
 var import_TldrawUiDropdownMenu = require("../primitives/TldrawUiDropdownMenu");
 var import_TldrawUiSlider = require("../primitives/TldrawUiSlider");
+var import_TldrawUiToolbar = require("../primitives/TldrawUiToolbar");
 const DefaultImageToolbarContent = (0, import_editor.track)(function DefaultImageToolbarContent2({
   imageShapeId,
   isManipulating,
@@ -184,7 +184,15 @@ const DefaultImageToolbarContent = (0, import_editor.track)(function DefaultImag
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_TldrawUiDropdownMenu.TldrawUiDropdownMenuRoot, { id: "image-toolbar-aspect-ratio", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiDropdownMenu.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButton.TldrawUiButton, { title: msg("tool.aspect-ratio"), type: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "corners" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiDropdownMenu.TldrawUiDropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_TldrawUiToolbar.TldrawUiToolbarButton,
+          {
+            title: msg("tool.aspect-ratio"),
+            type: "icon",
+            "data-testid": "tool.image-aspect-ratio",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { icon: "corners" })
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiDropdownMenu.TldrawUiDropdownMenuContent, { side: "top", align: "center", children: import_crop.ASPECT_RATIO_OPTIONS.map((aspectRatio) => {
           let checked = false;
           if (isOriginalCrop) {
@@ -215,34 +223,55 @@ const DefaultImageToolbarContent = (0, import_editor.track)(function DefaultImag
         }) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_TldrawUiButton.TldrawUiButton,
+        import_TldrawUiToolbar.TldrawUiToolbarButton,
         {
           type: "icon",
           onClick: onManipulatingEnd,
-          "data-testid": "tool.image-confirm",
-          style: { borderLeft: "1px solid var(--color-divider)", marginLeft: "2px" },
+          "data-testid": "tool.image-crop-confirm",
+          style: { borderLeft: "1px solid var(--tl-color-divider)", marginLeft: "2px" },
+          title: msg("tool.image-crop-confirm"),
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "check" })
         }
       )
     ] });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButton.TldrawUiButton, { type: "icon", title: msg("tool.replace-media"), onClick: handleImageReplace, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "tool-media" }) }),
-    !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButton.TldrawUiButton, { type: "icon", title: msg("tool.image-crop"), onClick: onManipulatingStart, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "crop" }) }),
+    !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
+      {
+        type: "icon",
+        "data-testid": "tool.image-replace",
+        onClick: handleImageReplace,
+        title: msg("tool.replace-media"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "tool-media" })
+      }
+    ),
+    !isReadonly && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
+      {
+        type: "icon",
+        title: msg("tool.image-crop"),
+        onClick: onManipulatingStart,
+        "data-testid": "tool.image-crop",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "crop" })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiButton.TldrawUiButton,
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
       {
         type: "icon",
         title: msg("action.download-original"),
         onClick: handleImageDownload,
+        "data-testid": "tool.image-download",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiButtonIcon.TldrawUiButtonIcon, { small: true, icon: "download" })
       }
     ),
     (altText || !isReadonly) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_TldrawUiButton.TldrawUiButton,
+      import_TldrawUiToolbar.TldrawUiToolbarButton,
       {
-        type: "normal",
+        type: "icon",
         title: msg("tool.media-alt-text"),
+        "data-testid": "tool.image-alt-text",
         onClick: () => {
           trackEvent("alt-text-start", { source });
           onEditAltTextStart();

package/dist-cjs/lib/ui/components/Toolbar/DefaultImageToolbarContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx"],
-  "sourcesContent": ["import {\n\tapproximately,\n\tisEqual,\n\tkickoutOccludedShapes,\n\tmodulate,\n\tTLImageShape,\n\tTLShapePartial,\n\ttrack,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport {\n\tASPECT_RATIO_OPTION,\n\tASPECT_RATIO_OPTIONS,\n\tASPECT_RATIO_TO_VALUE,\n\tgetCroppedImageDataForAspectRatio,\n\tgetCroppedImageDataWhenZooming,\n\tgetDefaultCrop,\n\tMAX_ZOOM,\n} from '../../../shapes/shared/crop'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButton } from '../primitives/Button/TldrawUiButton'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDropdownMenuCheckboxItem,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n} from '../primitives/TldrawUiDropdownMenu'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\n\n/** @public */\nexport interface DefaultImageToolbarContentProps {\n\timageShapeId: TLImageShape['id']\n\tisManipulating: boolean\n\tonEditAltTextStart(): void\n\tonManipulatingStart(): void\n\tonManipulatingEnd(): void\n}\n\n/** @public @react */\nexport const DefaultImageToolbarContent = track(function DefaultImageToolbarContent({\n\timageShapeId,\n\tisManipulating,\n\tonEditAltTextStart,\n\tonManipulatingStart,\n\tonManipulatingEnd,\n}: DefaultImageToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'image-toolbar'\n\tconst sliderRef = useRef<HTMLDivElement>(null)\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst crop = useValue('crop', () => editor.getShape<TLImageShape>(imageShapeId)!.props.crop, [\n\t\teditor,\n\t\timageShapeId,\n\t])\n\tconst zoom = crop\n\t\t? Math.min(1 - (crop.bottomRight.x - crop.topLeft.x), 1 - (crop.bottomRight.y - crop.topLeft.y))\n\t\t: 0\n\tconst [maxZoom, setMaxZoom] = useState<number | undefined>(\n\t\tcrop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM\n\t)\n\tconst actions = useActions()\n\n\t// So, we set a maxZoom here in case there's been a manual crop applied.\n\t// Typically, you can zoom 3x into the image size (MAX_ZOOM's value).\n\t// If you go deeper than that zoom level, we need to set that as the new 100%\n\t// value on the zoom slider (otherwise you could zoom into infinity).\n\t// This balances usage of the zoom slider with manual cropping.\n\tuseEffect(() => {\n\t\tsetMaxZoom(crop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM)\n\t}, [crop, zoom, maxZoom])\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\t// Apply an easing function to smooth out the zoom curve,\n\t// otherwise the zoom slider has a cubic drag feel to it which feels off.\n\tconst easeZoom = useCallback((value: number, maxValue: number): number => {\n\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t// Use an easing function for a more natural zoom feel\n\t\treturn Math.pow(value / maxValue, maxRatioConversion) * maxValue\n\t}, [])\n\n\tconst displayValue =\n\t\tcrop && maxZoom\n\t\t\t? modulate(easeZoom(zoom, maxZoom), [0, maxZoom], [0, 100], true /* clamp */)\n\t\t\t: 0\n\n\tconst handleZoomChange = useCallback(\n\t\t(value: number) => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\t// Convert the eased slider value back to the actual zoom value\n\t\t\tconst sliderPercent = value / 100\n\n\t\t\t// Convert the slider position back into the \"zoom\" value expected by\n\t\t\t// getCroppedImageDataWhenZooming.\n\t\t\t// 1. Undo the easing: z_out = sliderPercent^(1/maxRatioConversion) * maxZoom\n\t\t\t// 2. Translate z_out into the function's input domain. The helper computes\n\t\t\t//    the *resulting* zoom (z_out) using:\n\t\t\t//        z_out = 2 * z_in / (1 + 2 * z_in)\n\t\t\t//    Solving for z_in gives:\n\t\t\t//        z_in = z_out / (2 * (1 - z_out))\n\t\t\tconst maxDimension = 1 - 1 / MAX_ZOOM\n\t\t\tconst clampedMaxZoom = Math.min(maxDimension, maxZoom ?? maxDimension)\n\t\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t\tconst zOut = Math.pow(sliderPercent, 1 / maxRatioConversion) * clampedMaxZoom\n\t\t\tconst zoom = zOut >= 1 ? 1 : zOut / (2 * (1 - zOut))\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\t\tif (!imageShape) return\n\n\t\t\tconst change = getCroppedImageDataWhenZooming(zoom, imageShape, maxZoom)\n\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\n\t\t\ttrackEvent('set-style', { source: 'image-toolbar', id: 'zoom', value })\n\t\t},\n\t\t[editor, trackEvent, imageShapeId, maxZoom]\n\t)\n\n\tconst handleImageReplace = useCallback(\n\t\t() => actions['image-replace'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleImageDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleAspectRatioChange = (aspectRatio: ASPECT_RATIO_OPTION) => {\n\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\tif (!imageShape) return\n\t\teditor.run(() => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\tconst change = getCroppedImageDataForAspectRatio(aspectRatio, imageShape)\n\t\t\teditor.markHistoryStoppingPoint('aspect ratio')\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShapeId,\n\t\t\t\ttype: 'image',\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\t\t\tkickoutOccludedShapes(editor, [imageShapeId])\n\t\t})\n\t}\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLImageShape>(imageShapeId)!.props.altText,\n\t\t[editor, imageShapeId]\n\t)\n\tconst shapeAspectRatio = useValue(\n\t\t'shapeAspectRatio',\n\t\t() => {\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)!\n\t\t\treturn imageShape.props.w / imageShape.props.h\n\t\t},\n\t\t[editor, imageShapeId]\n\t)\n\tconst isOriginalCrop = !crop || isEqual(crop, getDefaultCrop())\n\n\tuseEffect(() => {\n\t\tif (isManipulating) {\n\t\t\teditor.timers.setTimeout(() => sliderRef.current?.focus(), 0)\n\t\t}\n\t}, [editor, isManipulating])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\t\tif (isManipulating) {\n\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\teditor.cancel()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\teditor.complete()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst elm = sliderRef.current\n\t\tif (elm) {\n\t\t\telm.addEventListener('keydown', handleKeyDown)\n\t\t}\n\t\treturn () => {\n\t\t\tif (elm) {\n\t\t\t\telm.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [editor, isManipulating, onManipulatingEnd])\n\n\tif (isManipulating) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<TldrawUiSlider\n\t\t\t\t\tref={sliderRef}\n\t\t\t\t\tvalue={displayValue}\n\t\t\t\t\tlabel=\"tool.image-zoom\"\n\t\t\t\t\tonValueChange={handleZoomChange}\n\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tsteps={100}\n\t\t\t\t\tdata-testid=\"tool.image-zoom\"\n\t\t\t\t\ttitle={msg('tool.image-zoom')}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiDropdownMenuRoot id=\"image-toolbar-aspect-ratio\">\n\t\t\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t\t<TldrawUiButton title={msg('tool.aspect-ratio')} type=\"icon\">\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"corners\" />\n\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t<TldrawUiDropdownMenuContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {\n\t\t\t\t\t\t\tlet checked = false\n\t\t\t\t\t\t\tif (isOriginalCrop) {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = true\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'circle') {\n\t\t\t\t\t\t\t\t\tchecked = !!crop.isCircle\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'square') {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!crop?.isCircle &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.1)\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = false\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!isOriginalCrop &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.01)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiDropdownMenuCheckboxItem\n\t\t\t\t\t\t\t\t\tkey={aspectRatio}\n\t\t\t\t\t\t\t\t\tonSelect={() => handleAspectRatioChange(aspectRatio as ASPECT_RATIO_OPTION)}\n\t\t\t\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\t\t\t\ttitle={msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t{msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t\t</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t</TldrawUiDropdownMenuCheckboxItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiDropdownMenuContent>\n\t\t\t\t</TldrawUiDropdownMenuRoot>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonClick={onManipulatingEnd}\n\t\t\t\t\tdata-testid=\"tool.image-confirm\"\n\t\t\t\t\tstyle={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.replace-media')} onClick={handleImageReplace}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiButton type=\"icon\" title={msg('tool.image-crop')} onClick={onManipulatingStart}>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"crop\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleImageDownload}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n\tapproximately,\n\tisEqual,\n\tkickoutOccludedShapes,\n\tmodulate,\n\tTLImageShape,\n\tTLShapePartial,\n\ttrack,\n\tuseEditor,\n\tuseValue,\n} from '@tldraw/editor'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport {\n\tASPECT_RATIO_OPTION,\n\tASPECT_RATIO_OPTIONS,\n\tASPECT_RATIO_TO_VALUE,\n\tgetCroppedImageDataForAspectRatio,\n\tgetCroppedImageDataWhenZooming,\n\tgetDefaultCrop,\n\tMAX_ZOOM,\n} from '../../../shapes/shared/crop'\nimport { useActions } from '../../context/actions'\nimport { useUiEvents } from '../../context/events'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport { TldrawUiButtonLabel } from '../primitives/Button/TldrawUiButtonLabel'\nimport {\n\tTldrawUiDropdownMenuCheckboxItem,\n\tTldrawUiDropdownMenuContent,\n\tTldrawUiDropdownMenuRoot,\n\tTldrawUiDropdownMenuTrigger,\n} from '../primitives/TldrawUiDropdownMenu'\nimport { TldrawUiSlider } from '../primitives/TldrawUiSlider'\nimport { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\n\n/** @public */\nexport interface DefaultImageToolbarContentProps {\n\timageShapeId: TLImageShape['id']\n\tisManipulating: boolean\n\tonEditAltTextStart(): void\n\tonManipulatingStart(): void\n\tonManipulatingEnd(): void\n}\n\n/** @public @react */\nexport const DefaultImageToolbarContent = track(function DefaultImageToolbarContent({\n\timageShapeId,\n\tisManipulating,\n\tonEditAltTextStart,\n\tonManipulatingStart,\n\tonManipulatingEnd,\n}: DefaultImageToolbarContentProps) {\n\tconst editor = useEditor()\n\tconst trackEvent = useUiEvents()\n\tconst msg = useTranslation()\n\tconst source = 'image-toolbar'\n\tconst sliderRef = useRef<HTMLDivElement>(null)\n\tconst isReadonly = editor.getIsReadonly()\n\n\tconst crop = useValue('crop', () => editor.getShape<TLImageShape>(imageShapeId)!.props.crop, [\n\t\teditor,\n\t\timageShapeId,\n\t])\n\tconst zoom = crop\n\t\t? Math.min(1 - (crop.bottomRight.x - crop.topLeft.x), 1 - (crop.bottomRight.y - crop.topLeft.y))\n\t\t: 0\n\tconst [maxZoom, setMaxZoom] = useState<number | undefined>(\n\t\tcrop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM\n\t)\n\tconst actions = useActions()\n\n\t// So, we set a maxZoom here in case there's been a manual crop applied.\n\t// Typically, you can zoom 3x into the image size (MAX_ZOOM's value).\n\t// If you go deeper than that zoom level, we need to set that as the new 100%\n\t// value on the zoom slider (otherwise you could zoom into infinity).\n\t// This balances usage of the zoom slider with manual cropping.\n\tuseEffect(() => {\n\t\tsetMaxZoom(crop ? Math.max(zoom, 1 - 1 / MAX_ZOOM) : MAX_ZOOM)\n\t}, [crop, zoom, maxZoom])\n\n\tconst onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])\n\n\t// Apply an easing function to smooth out the zoom curve,\n\t// otherwise the zoom slider has a cubic drag feel to it which feels off.\n\tconst easeZoom = useCallback((value: number, maxValue: number): number => {\n\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t// Use an easing function for a more natural zoom feel\n\t\treturn Math.pow(value / maxValue, maxRatioConversion) * maxValue\n\t}, [])\n\n\tconst displayValue =\n\t\tcrop && maxZoom\n\t\t\t? modulate(easeZoom(zoom, maxZoom), [0, maxZoom], [0, 100], true /* clamp */)\n\t\t\t: 0\n\n\tconst handleZoomChange = useCallback(\n\t\t(value: number) => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\t// Convert the eased slider value back to the actual zoom value\n\t\t\tconst sliderPercent = value / 100\n\n\t\t\t// Convert the slider position back into the \"zoom\" value expected by\n\t\t\t// getCroppedImageDataWhenZooming.\n\t\t\t// 1. Undo the easing: z_out = sliderPercent^(1/maxRatioConversion) * maxZoom\n\t\t\t// 2. Translate z_out into the function's input domain. The helper computes\n\t\t\t//    the *resulting* zoom (z_out) using:\n\t\t\t//        z_out = 2 * z_in / (1 + 2 * z_in)\n\t\t\t//    Solving for z_in gives:\n\t\t\t//        z_in = z_out / (2 * (1 - z_out))\n\t\t\tconst maxDimension = 1 - 1 / MAX_ZOOM\n\t\t\tconst clampedMaxZoom = Math.min(maxDimension, maxZoom ?? maxDimension)\n\t\t\tconst maxRatioConversion = MAX_ZOOM / (MAX_ZOOM - 1)\n\t\t\tconst zOut = Math.pow(sliderPercent, 1 / maxRatioConversion) * clampedMaxZoom\n\t\t\tconst zoom = zOut >= 1 ? 1 : zOut / (2 * (1 - zOut))\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\t\tif (!imageShape) return\n\n\t\t\tconst change = getCroppedImageDataWhenZooming(zoom, imageShape, maxZoom)\n\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShape.id,\n\t\t\t\ttype: imageShape.type,\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\n\t\t\ttrackEvent('set-style', { source: 'image-toolbar', id: 'zoom', value })\n\t\t},\n\t\t[editor, trackEvent, imageShapeId, maxZoom]\n\t)\n\n\tconst handleImageReplace = useCallback(\n\t\t() => actions['image-replace'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleImageDownload = useCallback(\n\t\t() => actions['download-original'].onSelect('image-toolbar'),\n\t\t[actions]\n\t)\n\n\tconst handleAspectRatioChange = (aspectRatio: ASPECT_RATIO_OPTION) => {\n\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)\n\t\tif (!imageShape) return\n\t\teditor.run(() => {\n\t\t\teditor.setCurrentTool('select.crop.idle')\n\t\t\tconst change = getCroppedImageDataForAspectRatio(aspectRatio, imageShape)\n\t\t\teditor.markHistoryStoppingPoint('aspect ratio')\n\t\t\teditor.updateShape({\n\t\t\t\tid: imageShapeId,\n\t\t\t\ttype: 'image',\n\t\t\t\tx: change.x,\n\t\t\t\ty: change.y,\n\t\t\t\tprops: {\n\t\t\t\t\tcrop: change.crop,\n\t\t\t\t\tw: change.w,\n\t\t\t\t\th: change.h,\n\t\t\t\t},\n\t\t\t} as TLShapePartial)\n\t\t\tkickoutOccludedShapes(editor, [imageShapeId])\n\t\t})\n\t}\n\n\tconst altText = useValue(\n\t\t'altText',\n\t\t() => editor.getShape<TLImageShape>(imageShapeId)!.props.altText,\n\t\t[editor, imageShapeId]\n\t)\n\tconst shapeAspectRatio = useValue(\n\t\t'shapeAspectRatio',\n\t\t() => {\n\t\t\tconst imageShape = editor.getShape<TLImageShape>(imageShapeId)!\n\t\t\treturn imageShape.props.w / imageShape.props.h\n\t\t},\n\t\t[editor, imageShapeId]\n\t)\n\tconst isOriginalCrop = !crop || isEqual(crop, getDefaultCrop())\n\n\tuseEffect(() => {\n\t\tif (isManipulating) {\n\t\t\teditor.timers.setTimeout(() => sliderRef.current?.focus(), 0)\n\t\t}\n\t}, [editor, isManipulating])\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(e: KeyboardEvent) {\n\t\t\tif (isManipulating) {\n\t\t\t\tif (e.key === 'Escape') {\n\t\t\t\t\teditor.cancel()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\teditor.complete()\n\t\t\t\t\tonManipulatingEnd()\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\tconst elm = sliderRef.current\n\t\tif (elm) {\n\t\t\telm.addEventListener('keydown', handleKeyDown)\n\t\t}\n\t\treturn () => {\n\t\t\tif (elm) {\n\t\t\t\telm.removeEventListener('keydown', handleKeyDown)\n\t\t\t}\n\t\t}\n\t}, [editor, isManipulating, onManipulatingEnd])\n\n\tif (isManipulating) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<TldrawUiSlider\n\t\t\t\t\tref={sliderRef}\n\t\t\t\t\tvalue={displayValue}\n\t\t\t\t\tlabel=\"tool.image-zoom\"\n\t\t\t\t\tonValueChange={handleZoomChange}\n\t\t\t\t\tonHistoryMark={onHistoryMark}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tsteps={100}\n\t\t\t\t\tdata-testid=\"tool.image-zoom\"\n\t\t\t\t\ttitle={msg('tool.image-zoom')}\n\t\t\t\t/>\n\t\t\t\t<TldrawUiDropdownMenuRoot id=\"image-toolbar-aspect-ratio\">\n\t\t\t\t\t<TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\ttitle={msg('tool.aspect-ratio')}\n\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\tdata-testid=\"tool.image-aspect-ratio\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"corners\" />\n\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t</TldrawUiDropdownMenuTrigger>\n\t\t\t\t\t<TldrawUiDropdownMenuContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t{ASPECT_RATIO_OPTIONS.map((aspectRatio) => {\n\t\t\t\t\t\t\tlet checked = false\n\t\t\t\t\t\t\tif (isOriginalCrop) {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = true\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tif (aspectRatio === 'circle') {\n\t\t\t\t\t\t\t\t\tchecked = !!crop.isCircle\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'square') {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!crop?.isCircle &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.1)\n\t\t\t\t\t\t\t\t} else if (aspectRatio === 'original') {\n\t\t\t\t\t\t\t\t\tchecked = false\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tchecked =\n\t\t\t\t\t\t\t\t\t\t!isOriginalCrop &&\n\t\t\t\t\t\t\t\t\t\tapproximately(shapeAspectRatio, ASPECT_RATIO_TO_VALUE[aspectRatio], 0.01)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiDropdownMenuCheckboxItem\n\t\t\t\t\t\t\t\t\tkey={aspectRatio}\n\t\t\t\t\t\t\t\t\tonSelect={() => handleAspectRatioChange(aspectRatio as ASPECT_RATIO_OPTION)}\n\t\t\t\t\t\t\t\t\tchecked={checked}\n\t\t\t\t\t\t\t\t\ttitle={msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t\t\t{msg(`tool.aspect-ratio.${aspectRatio}`)}\n\t\t\t\t\t\t\t\t\t</TldrawUiButtonLabel>\n\t\t\t\t\t\t\t\t</TldrawUiDropdownMenuCheckboxItem>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiDropdownMenuContent>\n\t\t\t\t</TldrawUiDropdownMenuRoot>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tonClick={onManipulatingEnd}\n\t\t\t\t\tdata-testid=\"tool.image-crop-confirm\"\n\t\t\t\t\tstyle={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}\n\t\t\t\t\ttitle={msg('tool.image-crop-confirm')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"check\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</>\n\t\t)\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tdata-testid=\"tool.image-replace\"\n\t\t\t\t\tonClick={handleImageReplace}\n\t\t\t\t\ttitle={msg('tool.replace-media')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"tool-media\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t\t{!isReadonly && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('tool.image-crop')}\n\t\t\t\t\tonClick={onManipulatingStart}\n\t\t\t\t\tdata-testid=\"tool.image-crop\"\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"crop\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t\t<TldrawUiToolbarButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\ttitle={msg('action.download-original')}\n\t\t\t\tonClick={handleImageDownload}\n\t\t\t\tdata-testid=\"tool.image-download\"\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon small icon=\"download\" />\n\t\t\t</TldrawUiToolbarButton>\n\t\t\t{(altText || !isReadonly) && (\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\ttitle={msg('tool.media-alt-text')}\n\t\t\t\t\tdata-testid=\"tool.image-alt-text\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttrackEvent('alt-text-start', { source })\n\t\t\t\t\t\tonEditAltTextStart()\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon small icon=\"alt\" />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
   "names": ["DefaultImageToolbarContent", "zoom"]
 }