tldraw 3.16.0-canary.aa1aff3ffe55 → 3.16.0-canary.cf24aedcd577

package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tlmenus, useEditor } from "@tldraw/editor";
-import classNames from "classnames";
 import * as React from "react";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
@@ -34,26 +33,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__ */ jsxs(TldrawUiPopover, { id: popoverId, open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsxs(
-      TldrawUiToolbarButton,
-      {
-        type,
-        "data-testid": `style.${uiType}`,
-        "data-direction": "left",
-        title: titleStr,
-        children: [
-          labelStr && /* @__PURE__ */ jsx(TldrawUiButtonLabel, { children: labelStr }),
-          /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: icon ?? "mixed" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ jsx(
-      TldrawUiToolbar,
-      {
-        label: labelStr,
-        className: classNames("tlui-buttons__grid", `tlui-buttons__${stylePanelType}`),
-        children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
+  return /* @__PURE__ */ jsxs(
+    TldrawUiPopover,
+    {
+      id: popoverId,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      className: "tlui-style-panel__dropdown-picker",
+      children: [
+        /* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsxs(
+          TldrawUiToolbarButton,
+          {
+            type,
+            "data-testid": `style.${uiType}`,
+            "data-direction": "left",
+            title: titleStr,
+            children: [
+              labelStr && /* @__PURE__ */ jsx(TldrawUiButtonLabel, { children: labelStr }),
+              /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: icon ?? "mixed" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "left", align: "center", children: /* @__PURE__ */ jsx(TldrawUiToolbar, { orientation: "grid", label: labelStr, children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "icons", sourceId: "style-panel", children: items.map((item) => {
           return /* @__PURE__ */ jsx(
             TldrawUiToolbarButton,
             {
@@ -71,10 +72,10 @@ function DropdownPickerInner({
             },
             item.value
           );
-        }) })
-      }
-    ) })
-  ] });
+        }) }) }) })
+      ]
+    }
+  );
 }
 const DropdownPicker = React.memo(DropdownPickerInner);
 export {

package/dist-esm/lib/ui/components/StylePanel/DropdownPicker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DropdownPicker.tsx"],
-  "sourcesContent": ["import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'\nimport classNames from 'classnames'\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'\n\ninterface DropdownPickerProps<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>({\n\tid,\n\tlabel,\n\tuiType,\n\tstylePanelType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\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<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\tlabel={labelStr}\n\t\t\t\t\tclassName={classNames('tlui-buttons__grid', `tlui-buttons__${stylePanelType}`)}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\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}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\nexport const DropdownPicker = React.memo(DropdownPickerInner) as typeof DropdownPickerInner\n"],
-  "mappings": "AA6DI,SAMc,KANd;AA7DJ,SAAiC,SAAS,iBAAiB;AAC3D,OAAO,gBAAgB;AACvB,YAAY,WAAW;AAGvB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,mCAAmC;AAc5C,SAAS,oBAAsC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,UAAU;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,qBAAC,mBAAgB,IAAI,WAAW,MAAM,QAAQ,cAAc,WAC3D;AAAA,wBAAC,0BACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,eAAa,SAAS,MAAM;AAAA,QAC5B,kBAAe;AAAA,QACf,OAAO;AAAA,QAEN;AAAA,sBAAY,oBAAC,uBAAqB,oBAAS;AAAA,UAC5C,oBAAC,sBAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,IAC9D,GACD;AAAA,IACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UACzC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO;AAAA,QACP,WAAW,WAAW,sBAAsB,iBAAiB,cAAc,EAAE;AAAA,QAE7E,8BAAC,+BAA4B,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,uBAAO,yBAAyB,4BAA4B;AAC5D,8BAAc,OAAO,KAAK,KAAK;AAC/B,wBAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;AAGO,MAAM,iBAAiB,MAAM,KAAK,mBAAmB;",
+  "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'\n\ninterface DropdownPickerProps<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>({\n\tid,\n\tlabel,\n\tuiType,\n\tstylePanelType,\n\tstyle,\n\titems,\n\ttype,\n\tvalue,\n\tonValueChange,\n}: DropdownPickerProps<T>) {\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<TldrawUiPopover\n\t\t\tid={popoverId}\n\t\t\topen={isOpen}\n\t\t\tonOpenChange={setIsOpen}\n\t\t\tclassName=\"tlui-style-panel__dropdown-picker\"\n\t\t>\n\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\ttype={type}\n\t\t\t\t\tdata-testid={`style.${uiType}`}\n\t\t\t\t\tdata-direction=\"left\"\n\t\t\t\t\ttitle={titleStr}\n\t\t\t\t>\n\t\t\t\t\t{labelStr && <TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>}\n\t\t\t\t\t<TldrawUiButtonIcon icon={(icon as TLUiIconType) ?? 'mixed'} />\n\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t<TldrawUiPopoverContent side=\"left\" align=\"center\">\n\t\t\t\t<TldrawUiToolbar orientation=\"grid\" label={labelStr}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"icons\" sourceId=\"style-panel\">\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\tkey={item.value}\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid={`style.${uiType}.${item.value}`}\n\t\t\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\t\t\tstylePanelName +\n\t\t\t\t\t\t\t\t\t\t' \u2014 ' +\n\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}\n\t\t\t\t\t\t\t\t\tisActive={icon === item.icon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\teditor.markHistoryStoppingPoint('select style dropdown item')\n\t\t\t\t\t\t\t\t\t\tonValueChange(style, item.value)\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon={item.icon} />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiToolbar>\n\t\t\t</TldrawUiPopoverContent>\n\t\t</TldrawUiPopover>\n\t)\n}\n\n// need to export like this to get generics\nexport const DropdownPicker = React.memo(DropdownPickerInner) as typeof DropdownPickerInner\n"],
+  "mappings": "AAiEI,SAMc,KANd;AAjEJ,SAAiC,SAAS,iBAAiB;AAC3D,YAAY,WAAW;AAGvB,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,6BAA6B;AACvD,SAAS,mCAAmC;AAc5C,SAAS,oBAAsC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,MAAM,eAAe;AAC3B,QAAM,SAAS,UAAU;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;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,WAAU;AAAA,MAEV;AAAA,4BAAC,0BACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA,eAAa,SAAS,MAAM;AAAA,YAC5B,kBAAe;AAAA,YACf,OAAO;AAAA,YAEN;AAAA,0BAAY,oBAAC,uBAAqB,oBAAS;AAAA,cAC5C,oBAAC,sBAAmB,MAAO,QAAyB,SAAS;AAAA;AAAA;AAAA,QAC9D,GACD;AAAA,QACA,oBAAC,0BAAuB,MAAK,QAAO,OAAM,UACzC,8BAAC,mBAAgB,aAAY,QAAO,OAAO,UAC1C,8BAAC,+BAA4B,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,uBAAO,yBAAyB,4BAA4B;AAC5D,8BAAc,OAAO,KAAK,KAAK;AAC/B,wBAAQ,eAAe,WAAW,OAAO,SAAS;AAClD,0BAAU,KAAK;AAAA,cAChB;AAAA,cAEA,8BAAC,sBAAmB,MAAM,KAAK,MAAM;AAAA;AAAA,YAhBhC,KAAK;AAAA,UAiBX;AAAA,QAEF,CAAC,GACF,GACD,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAGO,MAAM,iBAAiB,MAAM,KAAK,mBAAmB;",
   "names": []
 }

package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEditor, usePassThroughWheelEvents, useValue } from "@tldraw/editor";
+import classNames from "classnames";
 import { memo, useRef } from "react";
 import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
 import { useBreakpoint } from "../../context/breakpoints.mjs";
@@ -7,11 +8,19 @@ import { useTldrawUiComponents } from "../../context/components.mjs";
 import { useReadonly } from "../../hooks/useReadonly.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { MobileStylePanel } from "../MobileStylePanel.mjs";
+import { TldrawUiOrientationProvider } from "../primitives/layout.mjs";
 import { TldrawUiToolbar } from "../primitives/TldrawUiToolbar.mjs";
 import { DefaultToolbarContent } from "./DefaultToolbarContent.mjs";
 import { OverflowingToolbar } from "./OverflowingToolbar.mjs";
 import { ToggleToolLockedButton } from "./ToggleToolLockedButton.mjs";
-const DefaultToolbar = memo(function DefaultToolbar2({ children }) {
+const DefaultToolbar = memo(function DefaultToolbar2({
+  children,
+  orientation = "horizontal",
+  minItems = 4,
+  minSizePx = 310,
+  maxItems = 8,
+  maxSizePx = 470
+}) {
   const editor = useEditor();
   const msg = useTranslation();
   const breakpoint = useBreakpoint();
@@ -21,26 +30,52 @@ const DefaultToolbar = memo(function DefaultToolbar2({ children }) {
   usePassThroughWheelEvents(ref);
   const { ActionsMenu, QuickActions } = useTldrawUiComponents();
   const showQuickActions = editor.options.actionShortcutsLocation === "menu" ? false : editor.options.actionShortcutsLocation === "toolbar" ? true : breakpoint < PORTRAIT_BREAKPOINT.TABLET;
-  return /* @__PURE__ */ jsx("div", { ref, className: "tlui-toolbar", children: /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__inner", children: [
-    /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__left", children: [
-      !isReadonlyMode && /* @__PURE__ */ jsxs("div", { className: "tlui-toolbar__extras", children: [
-        showQuickActions && /* @__PURE__ */ jsxs(
-          TldrawUiToolbar,
-          {
-            className: "tlui-toolbar__extras__controls tlui-buttons__horizontal",
-            label: msg("actions-menu.title"),
-            children: [
-              QuickActions && /* @__PURE__ */ jsx(QuickActions, {}),
-              ActionsMenu && /* @__PURE__ */ jsx(ActionsMenu, {})
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(ToggleToolLockedButton, { activeToolId })
-      ] }),
-      /* @__PURE__ */ jsx(OverflowingToolbar, { children: children ?? /* @__PURE__ */ jsx(DefaultToolbarContent, {}) })
-    ] }),
-    breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && /* @__PURE__ */ jsx("div", { className: "tlui-toolbar__tools", children: /* @__PURE__ */ jsx(MobileStylePanel, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    TldrawUiOrientationProvider,
+    {
+      orientation,
+      tooltipSide: orientation === "horizontal" ? "top" : "right",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: classNames("tlui-main-toolbar", `tlui-main-toolbar--${orientation}`),
+          children: /* @__PURE__ */ jsxs("div", { className: "tlui-main-toolbar__inner", children: [
+            /* @__PURE__ */ jsxs("div", { className: "tlui-main-toolbar__left", children: [
+              !isReadonlyMode && /* @__PURE__ */ jsxs("div", { className: "tlui-main-toolbar__extras", children: [
+                showQuickActions && /* @__PURE__ */ jsxs(
+                  TldrawUiToolbar,
+                  {
+                    orientation,
+                    className: "tlui-main-toolbar__extras__controls",
+                    label: msg("actions-menu.title"),
+                    children: [
+                      QuickActions && /* @__PURE__ */ jsx(QuickActions, {}),
+                      ActionsMenu && /* @__PURE__ */ jsx(ActionsMenu, {})
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(ToggleToolLockedButton, { activeToolId })
+              ] }),
+              /* @__PURE__ */ jsx(
+                OverflowingToolbar,
+                {
+                  orientation,
+                  sizingParentClassName: "tlui-main-toolbar",
+                  minItems,
+                  maxItems,
+                  minSizePx,
+                  maxSizePx,
+                  children: children ?? /* @__PURE__ */ jsx(DefaultToolbarContent, {})
+                }
+              )
+            ] }),
+            breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && /* @__PURE__ */ jsx("div", { className: "tlui-main-toolbar__tools tlui-main-toolbar__mobile-style-panel", children: /* @__PURE__ */ jsx(MobileStylePanel, {}) })
+          ] })
+        }
+      )
+    }
+  );
 });
 export {
   DefaultToolbar

package/dist-esm/lib/ui/components/Toolbar/DefaultToolbar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/DefaultToolbar.tsx"],
-  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { TldrawUiToolbar } from '../primitives/TldrawUiToolbar'\nimport { DefaultToolbarContent } from './DefaultToolbarContent'\nimport { OverflowingToolbar } from './OverflowingToolbar'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport interface DefaultToolbarProps {\n\tchildren?: ReactNode\n}\n\n/**\n * The default toolbar for the editor. `children` defaults to the `DefaultToolbarContent` component.\n * Depending on the screen size, the children will overflow into a drop-down menu, with the most\n * recently active item from the overflow being shown in the main toolbar.\n *\n * @public\n * @react\n */\nexport const DefaultToolbar = memo(function DefaultToolbar({ children }: DefaultToolbarProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst { ActionsMenu, QuickActions } = useTldrawUiComponents()\n\n\tconst showQuickActions =\n\t\teditor.options.actionShortcutsLocation === 'menu'\n\t\t\t? false\n\t\t\t: editor.options.actionShortcutsLocation === 'toolbar'\n\t\t\t\t? true\n\t\t\t\t: breakpoint < PORTRAIT_BREAKPOINT.TABLET\n\n\treturn (\n\t\t<div ref={ref} className=\"tlui-toolbar\">\n\t\t\t<div className=\"tlui-toolbar__inner\">\n\t\t\t\t<div className=\"tlui-toolbar__left\">\n\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t<div className=\"tlui-toolbar__extras\">\n\t\t\t\t\t\t\t{showQuickActions && (\n\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-toolbar__extras__controls tlui-buttons__horizontal\"\n\t\t\t\t\t\t\t\t\tlabel={msg('actions-menu.title')}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{QuickActions && <QuickActions />}\n\t\t\t\t\t\t\t\t\t{ActionsMenu && <ActionsMenu />}\n\t\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<OverflowingToolbar>{children ?? <DefaultToolbarContent />}</OverflowingToolbar>\n\t\t\t\t</div>\n\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (\n\t\t\t\t\t<div className=\"tlui-toolbar__tools\">\n\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAoDQ,SAIkB,KAJlB;AApDR,SAAS,WAAW,2BAA2B,gBAAgB;AAC/D,SAAoB,MAAM,cAAc;AACxC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAehC,MAAM,iBAAiB,KAAK,SAASA,gBAAe,EAAE,SAAS,GAAwB;AAC7F,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AACjC,QAAM,iBAAiB,YAAY;AACnC,QAAM,eAAe,SAAS,mBAAmB,MAAM,OAAO,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAE1F,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,EAAE,aAAa,aAAa,IAAI,sBAAsB;AAE5D,QAAM,mBACL,OAAO,QAAQ,4BAA4B,SACxC,QACA,OAAO,QAAQ,4BAA4B,YAC1C,OACA,aAAa,oBAAoB;AAEtC,SACC,oBAAC,SAAI,KAAU,WAAU,gBACxB,+BAAC,SAAI,WAAU,uBACd;AAAA,yBAAC,SAAI,WAAU,sBACb;AAAA,OAAC,kBACD,qBAAC,SAAI,WAAU,wBACb;AAAA,4BACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAO,IAAI,oBAAoB;AAAA,YAE9B;AAAA,8BAAgB,oBAAC,gBAAa;AAAA,cAC9B,eAAe,oBAAC,eAAY;AAAA;AAAA;AAAA,QAC9B;AAAA,QAED,oBAAC,0BAAuB,cAA4B;AAAA,SACrD;AAAA,MAED,oBAAC,sBAAoB,sBAAY,oBAAC,yBAAsB,GAAG;AAAA,OAC5D;AAAA,IACC,aAAa,oBAAoB,aAAa,CAAC,kBAC/C,oBAAC,SAAI,WAAU,uBACd,8BAAC,oBAAiB,GACnB;AAAA,KAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useRef } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { useTldrawUiComponents } from '../../context/components'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { MobileStylePanel } from '../MobileStylePanel'\nimport { TldrawUiOrientationProvider } from '../primitives/layout'\nimport { TldrawUiToolbar } from '../primitives/TldrawUiToolbar'\nimport { DefaultToolbarContent } from './DefaultToolbarContent'\nimport { OverflowingToolbar } from './OverflowingToolbar'\nimport { ToggleToolLockedButton } from './ToggleToolLockedButton'\n\n/** @public */\nexport interface DefaultToolbarProps {\n\tchildren?: ReactNode\n\torientation?: 'horizontal' | 'vertical'\n\tminItems?: number\n\tminSizePx?: number\n\tmaxItems?: number\n\tmaxSizePx?: number\n}\n\n/**\n * The default toolbar for the editor. `children` defaults to the `DefaultToolbarContent` component.\n * Depending on the screen size, the children will overflow into a drop-down menu, with the most\n * recently active item from the overflow being shown in the main toolbar.\n *\n * @public\n * @react\n */\nexport const DefaultToolbar = memo(function DefaultToolbar({\n\tchildren,\n\torientation = 'horizontal',\n\tminItems = 4,\n\tminSizePx = 310,\n\tmaxItems = 8,\n\tmaxSizePx = 470,\n}: DefaultToolbarProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonlyMode = useReadonly()\n\tconst activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst { ActionsMenu, QuickActions } = useTldrawUiComponents()\n\n\tconst showQuickActions =\n\t\teditor.options.actionShortcutsLocation === 'menu'\n\t\t\t? false\n\t\t\t: editor.options.actionShortcutsLocation === 'toolbar'\n\t\t\t\t? true\n\t\t\t\t: breakpoint < PORTRAIT_BREAKPOINT.TABLET\n\n\treturn (\n\t\t<TldrawUiOrientationProvider\n\t\t\torientation={orientation}\n\t\t\ttooltipSide={orientation === 'horizontal' ? 'top' : 'right'}\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={classNames('tlui-main-toolbar', `tlui-main-toolbar--${orientation}`)}\n\t\t\t>\n\t\t\t\t<div className=\"tlui-main-toolbar__inner\">\n\t\t\t\t\t<div className=\"tlui-main-toolbar__left\">\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<div className=\"tlui-main-toolbar__extras\">\n\t\t\t\t\t\t\t\t{showQuickActions && (\n\t\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\t\torientation={orientation}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-main-toolbar__extras__controls\"\n\t\t\t\t\t\t\t\t\t\tlabel={msg('actions-menu.title')}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{QuickActions && <QuickActions />}\n\t\t\t\t\t\t\t\t\t\t{ActionsMenu && <ActionsMenu />}\n\t\t\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<ToggleToolLockedButton activeToolId={activeToolId} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OverflowingToolbar\n\t\t\t\t\t\t\torientation={orientation}\n\t\t\t\t\t\t\tsizingParentClassName=\"tlui-main-toolbar\"\n\t\t\t\t\t\t\tminItems={minItems}\n\t\t\t\t\t\t\tmaxItems={maxItems}\n\t\t\t\t\t\t\tminSizePx={minSizePx}\n\t\t\t\t\t\t\tmaxSizePx={maxSizePx}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children ?? <DefaultToolbarContent />}\n\t\t\t\t\t\t</OverflowingToolbar>\n\t\t\t\t\t</div>\n\t\t\t\t\t{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (\n\t\t\t\t\t\t<div className=\"tlui-main-toolbar__tools tlui-main-toolbar__mobile-style-panel\">\n\t\t\t\t\t\t\t<MobileStylePanel />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</TldrawUiOrientationProvider>\n\t)\n})\n"],
+  "mappings": "AAyES,SAKkB,KALlB;AAzET,SAAS,WAAW,2BAA2B,gBAAgB;AAC/D,OAAO,gBAAgB;AACvB,SAAoB,MAAM,cAAc;AACxC,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mCAAmC;AAC5C,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAoBhC,MAAM,iBAAiB,KAAK,SAASA,gBAAe;AAAA,EAC1D;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AACb,GAAwB;AACvB,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AACjC,QAAM,iBAAiB,YAAY;AACnC,QAAM,eAAe,SAAS,mBAAmB,MAAM,OAAO,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAE1F,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,EAAE,aAAa,aAAa,IAAI,sBAAsB;AAE5D,QAAM,mBACL,OAAO,QAAQ,4BAA4B,SACxC,QACA,OAAO,QAAQ,4BAA4B,YAC1C,OACA,aAAa,oBAAoB;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,aAAa,gBAAgB,eAAe,QAAQ;AAAA,MAEpD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,WAAW,WAAW,qBAAqB,sBAAsB,WAAW,EAAE;AAAA,UAE9E,+BAAC,SAAI,WAAU,4BACd;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA,eAAC,kBACD,qBAAC,SAAI,WAAU,6BACb;AAAA,oCACA;AAAA,kBAAC;AAAA;AAAA,oBACA;AAAA,oBACA,WAAU;AAAA,oBACV,OAAO,IAAI,oBAAoB;AAAA,oBAE9B;AAAA,sCAAgB,oBAAC,gBAAa;AAAA,sBAC9B,eAAe,oBAAC,eAAY;AAAA;AAAA;AAAA,gBAC9B;AAAA,gBAED,oBAAC,0BAAuB,cAA4B;AAAA,iBACrD;AAAA,cAED;AAAA,gBAAC;AAAA;AAAA,kBACA;AAAA,kBACA,uBAAsB;AAAA,kBACtB;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,sBAAY,oBAAC,yBAAsB;AAAA;AAAA,cACrC;AAAA,eACD;AAAA,YACC,aAAa,oBAAoB,aAAa,CAAC,kBAC/C,oBAAC,SAAI,WAAU,kEACd,8BAAC,oBAAiB,GACnB;AAAA,aAEF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF,CAAC;",
   "names": ["DefaultToolbar"]
 }

package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs

@@ -1,6 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   activeElementShouldCaptureKeys,
+  assert,
+  modulate,
   preventDefault,
   tlmenus,
   useEditor,
@@ -8,7 +10,7 @@ import {
   useUniqueSafeId
 } from "@tldraw/editor";
 import classNames from "classnames";
-import { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { PORTRAIT_BREAKPOINT } from "../../constants.mjs";
 import { useBreakpoint } from "../../context/breakpoints.mjs";
 import { areShortcutsDisabled } from "../../hooks/useKeyboardShortcuts.mjs";
@@ -20,6 +22,7 @@ import {
   TldrawUiPopoverTrigger
 } from "../primitives/TldrawUiPopover.mjs";
 import { TldrawUiToolbar, TldrawUiToolbarButton } from "../primitives/TldrawUiToolbar.mjs";
+import { TldrawUiColumn, TldrawUiRow } from "../primitives/layout.mjs";
 import { TldrawUiMenuContextProvider } from "../primitives/menus/TldrawUiMenuContext.mjs";
 const IsInOverflowContext = createContext(false);
 const NUMBERED_SHORTCUT_KEYS = {
@@ -34,55 +37,130 @@ const NUMBERED_SHORTCUT_KEYS = {
   "9": 8,
   "0": 9
 };
-function OverflowingToolbar({ children }) {
+function OverflowingToolbar({
+  children,
+  orientation,
+  sizingParentClassName,
+  minItems,
+  minSizePx,
+  maxItems,
+  maxSizePx
+}) {
   const editor = useEditor();
   const id = useUniqueSafeId();
   const breakpoint = useBreakpoint();
   const msg = useTranslation();
   const rButtons = useRef([]);
   const [isOpen, setIsOpen] = useState(false);
-  const overflowIndex = Math.min(8, 5 + breakpoint);
-  const [totalItems, setTotalItems] = useState(0);
   const mainToolsRef = useRef(null);
+  const [overflowTools, setOverflowTools] = useState(null);
   const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState(null);
-  const css = useMemo(() => {
-    const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : "";
-    return `
-			#${id}_main > *:nth-child(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)})${activeCss} {
-				display: none;
-			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex}) {
-				display: none;
-			}
-			#${id}_more > *:nth-child(-n + ${overflowIndex + 4}) {
-				margin-top: 0;
-			}
-        `;
-  }, [lastActiveOverflowItem, id, overflowIndex]);
+  const [shouldShowOverflow, setShouldShowOverflow] = useState(false);
   const onDomUpdate = useEvent(() => {
     if (!mainToolsRef.current) return;
-    const children2 = Array.from(mainToolsRef.current.children);
-    setTotalItems(children2.length);
-    const lastActiveElementIdx = children2.findIndex(
-      (el) => el.getAttribute("data-value") === lastActiveOverflowItem
-    );
-    if (lastActiveElementIdx <= overflowIndex) {
-      setLastActiveOverflowItem(null);
+    const sizeProp = orientation === "horizontal" ? "offsetWidth" : "offsetHeight";
+    const mainItems = collectItems(mainToolsRef.current.children);
+    const overflowItems = overflowTools ? collectItems(overflowTools.children) : null;
+    function collectItems(collection) {
+      const items = [];
+      for (const child of collection) {
+        if (child.classList.contains("tlui-main-toolbar__group")) {
+          items.push({
+            type: "group",
+            items: collectItems(child.children),
+            element: child
+          });
+        } else {
+          items.push({ type: "item", element: child });
+        }
+      }
+      return items;
     }
-    const activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(
-      (el) => el.getAttribute("aria-pressed") === "true"
+    const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName);
+    const size = sizingParent[sizeProp];
+    const itemsToShow = Math.floor(
+      modulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)
     );
-    if (activeElementIdx === -1) return;
-    if (activeElementIdx >= overflowIndex) {
-      setLastActiveOverflowItem(children2[activeElementIdx].getAttribute("data-value"));
-    }
-    rButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(
-      (el) => {
-        if (!(el instanceof HTMLElement)) return false;
-        if (el.tagName.toLowerCase() !== "button") return false;
-        return !!(el.offsetWidth || el.offsetHeight);
+    let mainItemCount = 0;
+    let newActiveOverflowItem = null;
+    let shouldInvalidateLastActiveOverflowItem = false;
+    const numberedButtons = [];
+    function visitItems(mainItems2, overflowItems2) {
+      if (overflowItems2) assert(mainItems2.length === overflowItems2.length);
+      let didShowAnyInMain = false;
+      let didShowAnyInOverflow2 = false;
+      for (let i = 0; i < mainItems2.length; i++) {
+        const mainItem = mainItems2[i];
+        const overflowItem = overflowItems2?.[i];
+        if (mainItem.type === "item") {
+          const isLastActiveOverflowItem = mainItem.element.getAttribute("data-value") === lastActiveOverflowItem;
+          let shouldShowInMain;
+          if (lastActiveOverflowItem) {
+            shouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem;
+          } else {
+            shouldShowInMain = mainItemCount <= itemsToShow;
+          }
+          const shouldShowInOverflow = mainItemCount >= itemsToShow;
+          didShowAnyInMain ||= shouldShowInMain;
+          didShowAnyInOverflow2 ||= shouldShowInOverflow;
+          setAttribute(
+            mainItem.element,
+            "data-toolbar-visible",
+            shouldShowInMain ? "true" : "false"
+          );
+          if (overflowItem) {
+            assert(overflowItem.type === "item");
+            setAttribute(
+              overflowItem.element,
+              "data-toolbar-visible",
+              shouldShowInOverflow ? "true" : "false"
+            );
+          }
+          if (shouldShowInOverflow && mainItem.element.getAttribute("aria-pressed") === "true") {
+            newActiveOverflowItem = mainItem.element.getAttribute("data-value");
+          }
+          if (shouldShowInMain && mainItem.element.tagName === "BUTTON") {
+            numberedButtons.push(mainItem.element);
+          }
+          if (!shouldShowInOverflow && isLastActiveOverflowItem) {
+            shouldInvalidateLastActiveOverflowItem = true;
+          }
+          mainItemCount++;
+        } else {
+          let result, overflowGroup;
+          if (overflowItem) {
+            assert(overflowItem.type === "group");
+            overflowGroup = overflowItem;
+            result = visitItems(mainItem.items, overflowGroup.items);
+          } else {
+            result = visitItems(mainItem.items, null);
+          }
+          didShowAnyInMain ||= result.didShowAnyInMain;
+          didShowAnyInOverflow2 ||= result.didShowAnyInOverflow;
+          setAttribute(
+            mainItem.element,
+            "data-toolbar-visible",
+            result.didShowAnyInMain ? "true" : "false"
+          );
+          if (overflowGroup) {
+            setAttribute(
+              overflowGroup.element,
+              "data-toolbar-visible",
+              result.didShowAnyInOverflow ? "true" : "false"
+            );
+          }
+        }
       }
-    );
+      return { didShowAnyInMain, didShowAnyInOverflow: didShowAnyInOverflow2 };
+    }
+    const { didShowAnyInOverflow } = visitItems(mainItems, overflowItems);
+    setShouldShowOverflow(didShowAnyInOverflow);
+    if (newActiveOverflowItem) {
+      setLastActiveOverflowItem(newActiveOverflowItem);
+    } else if (shouldInvalidateLastActiveOverflowItem) {
+      setLastActiveOverflowItem(null);
+    }
+    rButtons.current = numberedButtons;
   });
   useLayoutEffect(() => {
     onDomUpdate();
@@ -93,20 +171,26 @@ function OverflowingToolbar({ children }) {
     mutationObserver.observe(mainToolsRef.current, {
       childList: true,
       subtree: true,
-      attributeFilter: ["data-value", "aria-pressed"]
+      attributes: true,
+      characterData: true
     });
+    const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName);
+    const resizeObserver = new ResizeObserver(onDomUpdate);
+    resizeObserver.observe(sizingParent);
     return () => {
       mutationObserver.disconnect();
+      resizeObserver.disconnect();
     };
-  }, [onDomUpdate]);
+  }, [onDomUpdate, sizingParentClassName]);
   useEffect(() => {
     if (!editor.options.enableToolbarKeyboardShortcuts) return;
     function handleKeyDown(event) {
       if (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(
         true
         /* allow buttons */
-      ))
+      )) {
         return;
+      }
       if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
       const index = NUMBERED_SHORTCUT_KEYS[event.key];
       if (typeof index === "number") {
@@ -120,51 +204,78 @@ function OverflowingToolbar({ children }) {
     };
   }, [editor]);
   const popoverId = "toolbar overflow";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { nonce: editor.options.nonce, children: css }),
-    /* @__PURE__ */ jsxs(
-      TldrawUiToolbar,
-      {
-        className: classNames("tlui-toolbar__tools", {
-          "tlui-toolbar__tools__mobile": breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM
-        }),
-        label: msg("tool-panel.title"),
-        children: [
-          /* @__PURE__ */ jsx("div", { id: `${id}_main`, ref: mainToolsRef, className: "tlui-toolbar__tools__list", children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "toolbar", sourceId: "toolbar", children }) }),
-          totalItems > overflowIndex + 1 && /* @__PURE__ */ jsx(IsInOverflowContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(TldrawUiPopover, { id: popoverId, open: isOpen, onOpenChange: setIsOpen, children: [
-            /* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
-              TldrawUiToolbarButton,
-              {
-                title: msg("tool-panel.more"),
-                type: "tool",
-                className: "tlui-toolbar__overflow",
-                "data-testid": "tools.more-button",
-                children: /* @__PURE__ */ jsx(TldrawUiButtonIcon, { icon: "chevron-up" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx(TldrawUiPopoverContent, { side: "top", align: "center", children: /* @__PURE__ */ jsx(
-              TldrawUiToolbar,
-              {
-                className: "tlui-buttons__grid",
-                "data-testid": "tools.more-content",
-                label: msg("tool-panel.more"),
-                id: `${id}_more`,
-                onClick: () => {
-                  tlmenus.deleteOpenMenu(popoverId, editor.contextId);
-                  setIsOpen(false);
-                },
-                children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "toolbar-overflow", sourceId: "toolbar", children })
-              }
-            ) })
-          ] }) })
-        ]
-      }
-    )
-  ] });
+  const Layout = orientation === "horizontal" ? TldrawUiRow : TldrawUiColumn;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    TldrawUiToolbar,
+    {
+      orientation,
+      className: classNames("tlui-main-toolbar__tools", {
+        "tlui-main-toolbar__tools__mobile": breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM
+      }),
+      label: msg("tool-panel.title"),
+      children: [
+        /* @__PURE__ */ jsx(Layout, { id: `${id}_main`, ref: mainToolsRef, children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "toolbar", sourceId: "toolbar", children }) }),
+        shouldShowOverflow && /* @__PURE__ */ jsx(IsInOverflowContext.Provider, { value: true, children: /* @__PURE__ */ jsxs(TldrawUiPopover, { id: popoverId, open: isOpen, onOpenChange: setIsOpen, children: [
+          /* @__PURE__ */ jsx(TldrawUiPopoverTrigger, { children: /* @__PURE__ */ jsx(
+            TldrawUiToolbarButton,
+            {
+              title: msg("tool-panel.more"),
+              type: "tool",
+              className: "tlui-main-toolbar__overflow",
+              "data-testid": "tools.more-button",
+              children: /* @__PURE__ */ jsx(
+                TldrawUiButtonIcon,
+                {
+                  icon: orientation === "horizontal" ? "chevron-up" : "chevron-right"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            TldrawUiPopoverContent,
+            {
+              side: orientation === "horizontal" ? "top" : "right",
+              align: orientation === "horizontal" ? "center" : "end",
+              children: /* @__PURE__ */ jsx(
+                TldrawUiToolbar,
+                {
+                  orientation: "grid",
+                  className: "tlui-main-toolbar__overflow-content",
+                  ref: setOverflowTools,
+                  "data-testid": "tools.more-content",
+                  label: msg("tool-panel.more"),
+                  id: `${id}_more`,
+                  onClick: () => {
+                    tlmenus.deleteOpenMenu(popoverId, editor.contextId);
+                    setIsOpen(false);
+                  },
+                  children: /* @__PURE__ */ jsx(TldrawUiMenuContextProvider, { type: "toolbar-overflow", sourceId: "toolbar", children })
+                }
+              )
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
 }
 const isActiveTLUiToolItem = (item, activeToolId, geoState) => {
   return item.meta?.geo ? activeToolId === "geo" && geoState === item.meta?.geo : activeToolId === item.id;
 };
+function findParentWithClassName(startingElement, className) {
+  let element = startingElement;
+  while (element) {
+    if (element.classList.contains(className)) {
+      return element;
+    }
+    element = element.parentElement;
+  }
+  throw new Error("Could not find parent with class name " + className);
+}
+function setAttribute(element, name, value) {
+  if (element.getAttribute(name) === value) return;
+  element.setAttribute(name, value);
+}
 export {
   IsInOverflowContext,
   OverflowingToolbar,