tldraw 4.1.0-next.542f014c3fac → 4.1.0-next.74327a60f18a

package/dist-cjs/lib/ui/components/SharePanel/PeopleMenu.js

@@ -24,6 +24,8 @@ module.exports = __toCommonJS(PeopleMenu_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
+var import_constants = require("../../constants");
+var import_breakpoints = require("../../context/breakpoints");
 var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_PeopleMenuAvatar = require("./PeopleMenuAvatar");
@@ -38,10 +40,12 @@ function PeopleMenu({ children }) {
   const userColor = (0, import_editor.useValue)("user", () => editor.user.getColor(), [editor]);
   const userName = (0, import_editor.useValue)("user", () => editor.user.getName(), [editor]);
   const [isOpen, onOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)("people menu");
+  const breakpoint = (0, import_breakpoints.useBreakpoint)();
+  const maxAvatars = breakpoint <= import_constants.PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5;
   if (!userIds.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_radix_ui.Popover.Root, { onOpenChange, open: isOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Trigger, { dir: "ltr", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: "tlui-people-menu__avatars-button", title: msg("people-menu.title"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-people-menu__avatars", children: [
-      userIds.slice(-5).map((userId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuAvatar.PeopleMenuAvatar, { userId }, userId)),
+      userIds.slice(-maxAvatars).map((userId) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuAvatar.PeopleMenuAvatar, { userId }, userId)),
       userIds.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
@@ -52,7 +56,7 @@ function PeopleMenu({ children }) {
           children: userName?.[0] ?? ""
         }
       ),
-      userIds.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuMore.PeopleMenuMore, { count: userIds.length - 5 })
+      userIds.length > maxAvatars && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PeopleMenuMore.PeopleMenuMore, { count: userIds.length - maxAvatars })
     ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_radix_ui.Popover.Content,

package/dist-cjs/lib/ui/components/SharePanel/PeopleMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenu.tsx"],
-  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-5).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > 5 && <PeopleMenuMore count={userIds.length - 5} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCK;AAlCL,oBAA8D;AAC9D,sBAAoC;AAEpC,2BAA8B;AAC9B,4BAA+B;AAC/B,8BAAiC;AACjC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,UAAM,sCAAe;AAE3B,QAAM,gBAAY,4BAAa;AAC/B,QAAM,aAAS,yBAAU;AAEzB,QAAM,cAAU,0BAAW;AAC3B,QAAM,gBAAY,wBAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,eAAW,wBAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,QAAI,oCAAc,aAAa;AAE1D,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,6CAAC,gBAAAA,QAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,gDAAC,gBAAAA,QAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,sDAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,uDAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,EAAE,EAAE,IAAI,CAAC,WACvB,4CAAC,4CAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,KAAK,4CAAC,wCAAe,OAAO,QAAQ,SAAS,GAAG;AAAA,OACnE,GACD,GACD;AAAA,IACA,4CAAC,gBAAAA,QAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,gBAAAA,QAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,uDAAC,SAAI,WAAU,6BACd;AAAA,sDAAC,SAAI,WAAU,6BACd,sDAAC,gDAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,4CAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,4CAAC,wCAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport { ReactNode } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { PeopleMenuAvatar } from './PeopleMenuAvatar'\nimport { PeopleMenuItem } from './PeopleMenuItem'\nimport { PeopleMenuMore } from './PeopleMenuMore'\nimport { UserPresenceEditor } from './UserPresenceEditor'\n\n/** @public */\nexport interface PeopleMenuProps {\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport function PeopleMenu({ children }: PeopleMenuProps) {\n\tconst msg = useTranslation()\n\n\tconst container = useContainer()\n\tconst editor = useEditor()\n\n\tconst userIds = usePeerIds()\n\tconst userColor = useValue('user', () => editor.user.getColor(), [editor])\n\tconst userName = useValue('user', () => editor.user.getName(), [editor])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('people menu')\n\tconst breakpoint = useBreakpoint()\n\tconst maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5\n\n\tif (!userIds.length) return null\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<button className=\"tlui-people-menu__avatars-button\" title={msg('people-menu.title')}>\n\t\t\t\t\t<div className=\"tlui-people-menu__avatars\">\n\t\t\t\t\t\t{userIds.slice(-maxAvatars).map((userId) => (\n\t\t\t\t\t\t\t<PeopleMenuAvatar key={userId} userId={userId} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"tlui-people-menu__avatar\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackgroundColor: userColor,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{userName?.[0] ?? ''}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{userIds.length > maxAvatars && <PeopleMenuMore count={userIds.length - maxAvatars} />}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</_Popover.Trigger>\n\t\t\t<_Popover.Portal container={container}>\n\t\t\t\t<_Popover.Content\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={2}\n\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-people-menu__wrapper\">\n\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t<UserPresenceEditor />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{userIds.length > 0 && (\n\t\t\t\t\t\t\t<div className=\"tlui-people-menu__section\">\n\t\t\t\t\t\t\t\t{userIds.map((userId) => {\n\t\t\t\t\t\t\t\t\treturn <PeopleMenuItem key={userId + '_presence'} userId={userId} />\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCK;AAtCL,oBAA8D;AAC9D,sBAAoC;AAEpC,uBAAoC;AACpC,yBAA8B;AAC9B,2BAA8B;AAC9B,4BAA+B;AAC/B,8BAAiC;AACjC,4BAA+B;AAC/B,4BAA+B;AAC/B,gCAAmC;AAQ5B,SAAS,WAAW,EAAE,SAAS,GAAoB;AACzD,QAAM,UAAM,sCAAe;AAE3B,QAAM,gBAAY,4BAAa;AAC/B,QAAM,aAAS,yBAAU;AAEzB,QAAM,cAAU,0BAAW;AAC3B,QAAM,gBAAY,wBAAS,QAAQ,MAAM,OAAO,KAAK,SAAS,GAAG,CAAC,MAAM,CAAC;AACzE,QAAM,eAAW,wBAAS,QAAQ,MAAM,OAAO,KAAK,QAAQ,GAAG,CAAC,MAAM,CAAC;AAEvE,QAAM,CAAC,QAAQ,YAAY,QAAI,oCAAc,aAAa;AAC1D,QAAM,iBAAa,kCAAc;AACjC,QAAM,aAAa,cAAc,qCAAoB,YAAY,IAAI;AAErE,MAAI,CAAC,QAAQ,OAAQ,QAAO;AAE5B,SACC,6CAAC,gBAAAA,QAAS,MAAT,EAAc,cAA4B,MAAM,QAChD;AAAA,gDAAC,gBAAAA,QAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC,sDAAC,YAAO,WAAU,oCAAmC,OAAO,IAAI,mBAAmB,GAClF,uDAAC,SAAI,WAAU,6BACb;AAAA,cAAQ,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,WAChC,4CAAC,4CAA8B,UAAR,MAAwB,CAC/C;AAAA,MACA,QAAQ,SAAS,KACjB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,iBAAiB;AAAA,UAClB;AAAA,UAEC,qBAAW,CAAC,KAAK;AAAA;AAAA,MACnB;AAAA,MAEA,QAAQ,SAAS,cAAc,4CAAC,wCAAe,OAAO,QAAQ,SAAS,YAAY;AAAA,OACrF,GACD,GACD;AAAA,IACA,4CAAC,gBAAAA,QAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,gBAAAA,QAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,kBAAkB;AAAA,QAElB,uDAAC,SAAI,WAAU,6BACd;AAAA,sDAAC,SAAI,WAAU,6BACd,sDAAC,gDAAmB,GACrB;AAAA,UACC,QAAQ,SAAS,KACjB,4CAAC,SAAI,WAAU,6BACb,kBAAQ,IAAI,CAAC,WAAW;AACxB,mBAAO,4CAAC,wCAA0C,UAAtB,SAAS,WAA6B;AAAA,UACnE,CAAC,GACF;AAAA,UAEA;AAAA,WACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
   "names": ["_Popover"]
 }

package/dist-cjs/lib/ui/components/SharePanel/UserPresenceColorPicker.js

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(UserPresenceColorPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButton = require("../primitives/Button/TldrawUiButton");

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

@@ -33,7 +33,7 @@ __export(DefaultStylePanel_exports, {
 module.exports = __toCommonJS(DefaultStylePanel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_react = require("react");
 var import_useRelevantStyles = require("../../hooks/useRelevantStyles");
 var import_DefaultStylePanelContent = require("./DefaultStylePanelContent");

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

@@ -46,7 +46,7 @@ __export(DefaultStylePanelContent_exports, {
 module.exports = __toCommonJS(DefaultStylePanelContent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 var import_styles = require("../../../styles");
 var import_events = require("../../context/events");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");

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

@@ -33,7 +33,7 @@ __export(StylePanelDoubleDropdownPicker_exports, {
 module.exports = __toCommonJS(StylePanelDoubleDropdownPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var React = __toESM(require("react"));
+var React = __toESM(require("react"), 1);
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiPopover = require("../primitives/TldrawUiPopover");

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

@@ -33,7 +33,7 @@ __export(StylePanelDropdownPicker_exports, {
 module.exports = __toCommonJS(StylePanelDropdownPicker_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var React = __toESM(require("react"));
+var React = __toESM(require("react"), 1);
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButtonIcon = require("../primitives/Button/TldrawUiButtonIcon");
 var import_TldrawUiButtonLabel = require("../primitives/Button/TldrawUiButtonLabel");

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

@@ -33,7 +33,7 @@ __export(DefaultToolbar_exports, {
 module.exports = __toCommonJS(DefaultToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_react = require("react");
 var import_constants = require("../../constants");
 var import_breakpoints = require("../../context/breakpoints");

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

@@ -35,7 +35,7 @@ __export(OverflowingToolbar_exports, {
 module.exports = __toCommonJS(OverflowingToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_react = require("react");
 var import_constants = require("../../constants");
 var import_breakpoints = require("../../context/breakpoints");

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

@@ -33,7 +33,7 @@ __export(ToggleToolLockedButton_exports, {
 module.exports = __toCommonJS(ToggleToolLockedButton_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_constants = require("../../constants");
 var import_actions = require("../../context/actions");
 var import_breakpoints = require("../../context/breakpoints");

package/dist-cjs/lib/ui/components/primitives/Button/TldrawUiButton.js

@@ -32,8 +32,8 @@ __export(TldrawUiButton_exports, {
 });
 module.exports = __toCommonJS(TldrawUiButton_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_classnames = __toESM(require("classnames"));
-var React = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"), 1);
+var React = __toESM(require("react"), 1);
 const namedClassNamesSoThatICanGrepForThis = {
   normal: "tlui-button__normal",
   primary: "tlui-button__primary",

package/dist-cjs/lib/ui/components/primitives/TldrawUiContextualToolbar.js

@@ -36,7 +36,7 @@ __export(TldrawUiContextualToolbar_exports, {
 module.exports = __toCommonJS(TldrawUiContextualToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_TldrawUiToolbar = require("./TldrawUiToolbar");

package/dist-cjs/lib/ui/components/primitives/TldrawUiDialog.js

@@ -36,7 +36,7 @@ __export(TldrawUiDialog_exports, {
 });
 module.exports = __toCommonJS(TldrawUiDialog_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_radix_ui = require("radix-ui");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiButton = require("./Button/TldrawUiButton");

package/dist-cjs/lib/ui/components/primitives/TldrawUiDropdownMenu.js

@@ -42,7 +42,7 @@ __export(TldrawUiDropdownMenu_exports, {
 module.exports = __toCommonJS(TldrawUiDropdownMenu_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_radix_ui = require("radix-ui");
 var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");

package/dist-cjs/lib/ui/components/primitives/TldrawUiIcon.js

@@ -32,7 +32,7 @@ __export(TldrawUiIcon_exports, {
 });
 module.exports = __toCommonJS(TldrawUiIcon_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_react = require("react");
 var import_asset_urls = require("../../context/asset-urls");
 const TldrawUiIcon = (0, import_react.memo)(function TldrawUiIcon2({

package/dist-cjs/lib/ui/components/primitives/TldrawUiInput.js

@@ -33,8 +33,8 @@ __export(TldrawUiInput_exports, {
 module.exports = __toCommonJS(TldrawUiInput_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_classnames = __toESM(require("classnames"), 1);
+var React = __toESM(require("react"), 1);
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiIcon = require("./TldrawUiIcon");
 const TldrawUiInput = React.forwardRef(

package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js

@@ -35,9 +35,9 @@ __export(TldrawUiPopover_exports, {
 module.exports = __toCommonJS(TldrawUiPopover_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_radix_ui = require("radix-ui");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
 function TldrawUiPopover({ id, children, onOpenChange, open, className }) {
   const [isOpen, handleOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)(id, onOpenChange);

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js

@@ -34,7 +34,7 @@ module.exports = __toCommonJS(TldrawUiSlider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
 var import_TldrawUiTooltip = require("./TldrawUiTooltip");
 const TldrawUiSlider = import_react.default.forwardRef(function Slider({

package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js

@@ -35,9 +35,9 @@ __export(TldrawUiToolbar_exports, {
 });
 module.exports = __toCommonJS(TldrawUiToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_radix_ui = require("radix-ui");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 var import_layout = require("./layout");
 var import_TldrawUiTooltip = require("./TldrawUiTooltip");
 const LayoutByOrientation = {

package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(TldrawUiTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 var import_layout = require("./layout");
 const DEFAULT_TOOLTIP_DELAY_MS = 700;
 class TooltipManager {

package/dist-cjs/lib/ui/components/primitives/layout.js

@@ -36,7 +36,7 @@ __export(layout_exports, {
 });
 module.exports = __toCommonJS(layout_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_radix_ui = require("radix-ui");
 var import_react = require("react");
 const TldrawUiOrientationContext = (0, import_react.createContext)({

package/dist-cjs/lib/ui/components/primitives/menus/TldrawUiMenuGroup.js

@@ -32,7 +32,7 @@ __export(TldrawUiMenuGroup_exports, {
 });
 module.exports = __toCommonJS(TldrawUiMenuGroup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_classnames = __toESM(require("classnames"));
+var import_classnames = __toESM(require("classnames"), 1);
 var import_actions = require("../../../context/actions");
 var import_useTranslation = require("../../../hooks/useTranslation/useTranslation");
 var import_layout = require("../layout");

package/dist-cjs/lib/ui/context/actions.js

@@ -37,7 +37,7 @@ __export(actions_exports, {
 module.exports = __toCommonJS(actions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var React = __toESM(require("react"));
+var React = __toESM(require("react"), 1);
 var import_frames = require("../../utils/frames/frames");
 var import_A11y = require("../components/A11y");
 var import_EditLinkDialog = require("../components/EditLinkDialog");

package/dist-cjs/lib/ui/context/breakpoints.js

@@ -34,7 +34,7 @@ __export(breakpoints_exports, {
 module.exports = __toCommonJS(breakpoints_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 var import_constants = require("../constants");
 const BreakpointContext = import_react.default.createContext(null);
 function BreakPointProvider({ forceMobile = false, children }) {

package/dist-cjs/lib/ui/context/events.js

@@ -34,7 +34,7 @@ __export(events_exports, {
 });
 module.exports = __toCommonJS(events_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var React = __toESM(require("react"));
+var React = __toESM(require("react"), 1);
 const defaultEventHandler = () => void 0;
 const EventsContext = React.createContext(null);
 function TldrawUiEventsProvider({ onEvent, children }) {

package/dist-cjs/lib/ui/hooks/useClipboardEvents.js

@@ -34,7 +34,7 @@ __export(useClipboardEvents_exports, {
 });
 module.exports = __toCommonJS(useClipboardEvents_exports);
 var import_editor = require("@tldraw/editor");
-var import_lz_string = __toESM(require("lz-string"));
+var import_lz_string = __toESM(require("lz-string"), 1);
 var import_react = require("react");
 var import_clipboard = require("../../utils/clipboard");
 var import_events = require("../context/events");

package/dist-cjs/lib/ui/hooks/useKeyboardShortcuts.js

@@ -33,7 +33,7 @@ __export(useKeyboardShortcuts_exports, {
 });
 module.exports = __toCommonJS(useKeyboardShortcuts_exports);
 var import_editor = require("@tldraw/editor");
-var import_hotkeys_js = __toESM(require("hotkeys-js"));
+var import_hotkeys_js = __toESM(require("hotkeys-js"), 1);
 var import_react = require("react");
 var import_actions = require("../context/actions");
 var import_useReadonly = require("./useReadonly");

package/dist-cjs/lib/ui/hooks/useLocalStorageState.js

@@ -32,7 +32,7 @@ __export(useLocalStorageState_exports, {
 });
 module.exports = __toCommonJS(useLocalStorageState_exports);
 var import_editor = require("@tldraw/editor");
-var import_react = __toESM(require("react"));
+var import_react = __toESM(require("react"), 1);
 function useLocalStorageState(key, defaultValue) {
   const [state, setState] = import_react.default.useState(defaultValue);
   import_react.default.useLayoutEffect(() => {

package/dist-cjs/lib/ui/hooks/useTools.js

@@ -36,7 +36,7 @@ __export(useTools_exports, {
 module.exports = __toCommonJS(useTools_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
-var React = __toESM(require("react"));
+var React = __toESM(require("react"), 1);
 var import_EmbedDialog = require("../components/EmbedDialog");
 var import_a11y = require("../context/a11y");
 var import_events = require("../context/events");

package/dist-cjs/lib/ui/hooks/useTranslation/useTranslation.js

@@ -35,7 +35,7 @@ __export(useTranslation_exports, {
 });
 module.exports = __toCommonJS(useTranslation_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var React = __toESM(require("react"));
+var React = __toESM(require("react"), 1);
 var import_asset_urls = require("../../context/asset-urls");
 var import_defaultTranslation = require("./defaultTranslation");
 var import_translations = require("./translations");

package/dist-cjs/lib/ui/version.js

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "4.1.0-next.542f014c3fac";
+const version = "4.1.0-next.74327a60f18a";
 const publishDates = {
-  major: "2025-09-19T10:02:40.633Z",
-  minor: "2025-09-19T10:02:40.633Z",
-  patch: "2025-09-19T10:02:40.633Z"
+  major: "2025-09-18T14:39:22.803Z",
+  minor: "2025-10-15T10:52:21.047Z",
+  patch: "2025-10-15T10:52:21.047Z"
 };
 //# sourceMappingURL=version.js.map

package/dist-cjs/lib/ui/version.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-next.542f014c3fac'\nexport const publishDates = {\n\tmajor: '2025-09-19T10:02:40.633Z',\n\tminor: '2025-09-19T10:02:40.633Z',\n\tpatch: '2025-09-19T10:02:40.633Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-next.74327a60f18a'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-15T10:52:21.047Z',\n\tpatch: '2025-10-15T10:52:21.047Z',\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-cjs/lib/utils/text/richText.js

@@ -39,10 +39,10 @@ __export(richText_exports, {
 });
 module.exports = __toCommonJS(richText_exports);
 var import_core = require("@tiptap/core");
-var import_extension_code = __toESM(require("@tiptap/extension-code"));
-var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"));
-var import_extension_link = __toESM(require("@tiptap/extension-link"));
-var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
+var import_extension_code = __toESM(require("@tiptap/extension-code"), 1);
+var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"), 1);
+var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
 var import_editor = require("@tldraw/editor");
 var import_defaultFonts = require("../../shapes/shared/defaultFonts");
 var import_textDirection = require("./textDirection");

package/dist-esm/index.d.mts

@@ -312,6 +312,7 @@ export declare class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
     hideRotateHandle(): boolean;
     hideSelectionBoundsBg(): boolean;
     hideSelectionBoundsFg(): boolean;
+    hideInMinimap(): boolean;
     canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts): boolean;
     getFontFaces(shape: TLArrowShape): TLFontFace[];
     getDefaultProps(): TLArrowShape['props'];
@@ -636,6 +637,7 @@ export declare function DebugFlags(): JSX_2.Element | null;
 /** @public */
 export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly doesResize: true;
+    readonly embedOnPaste: false;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["beta.tldraw.com", "tldraw.com", "localhost:3000"];
@@ -650,6 +652,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["figma.com"];
@@ -659,6 +662,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["google.*"];
@@ -671,6 +675,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["val.town"];
@@ -682,6 +687,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["codesandbox.io"];
@@ -693,6 +699,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 400;
     readonly hostnames: readonly ["codepen.io"];
@@ -704,6 +711,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 520;
 }, {
     readonly doesResize: false;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 400;
     readonly hostnames: readonly ["scratch.mit.edu"];
@@ -713,6 +721,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 520;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 450;
     readonly hostnames: readonly ["*.youtube.com", "youtube.com", "youtu.be"];
@@ -727,6 +736,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 800;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["calendar.google.*"];
@@ -742,6 +752,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["docs.google.*"];
@@ -756,6 +767,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["gist.github.com"];
@@ -765,6 +777,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["replit.com"];
@@ -774,6 +787,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["felt.com"];
@@ -783,6 +797,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["open.spotify.com"];
@@ -794,6 +809,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 360;
     readonly hostnames: readonly ["vimeo.com", "player.vimeo.com"];
@@ -804,6 +820,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 640;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["excalidraw.com"];
@@ -815,6 +832,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
 }, {
     readonly backgroundColor: "#fff";
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 500;
     readonly hostnames: readonly ["observablehq.com"];
@@ -825,6 +843,7 @@ export declare const DEFAULT_EMBED_DEFINITIONS: readonly [{
     readonly width: 720;
 }, {
     readonly doesResize: true;
+    readonly embedOnPaste: true;
     readonly fromEmbedUrl: (url: string) => string | undefined;
     readonly height: 450;
     readonly hostnames: readonly ["desmos.com"];
@@ -1428,6 +1447,7 @@ export declare interface EmbedDefinition {
     readonly overridePermissions?: TLEmbedShapePermissions;
     readonly instructionLink?: string;
     readonly backgroundColor?: string;
+    readonly embedOnPaste?: boolean;
     readonly overrideOutlineRadius?: number;
     readonly toEmbedUrl: (url: string) => string | undefined;
     readonly fromEmbedUrl: (url: string) => string | undefined;
@@ -1969,6 +1989,7 @@ export declare class LineShapeUtil extends ShapeUtil<TLLineShape> {
     hideRotateHandle(): boolean;
     hideSelectionBoundsFg(): boolean;
     hideSelectionBoundsBg(): boolean;
+    hideInMinimap(): boolean;
     getDefaultProps(): TLLineShape['props'];
     getGeometry(shape: TLLineShape): PathBuilderGeometry2d;
     getHandles(shape: TLLineShape): TLHandle[];

package/dist-esm/index.mjs

@@ -529,7 +529,7 @@ import {
 } from "./lib/utils/tldr/file.mjs";
 registerTldrawLibraryVersion(
   "tldraw",
-  "4.1.0-next.542f014c3fac",
+  "4.1.0-next.74327a60f18a",
   "esm"
 );
 export {