tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.71f83a8a571b

package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs

@@ -6,6 +6,7 @@ import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
 import { TldrawUiIcon } from "../primitives/TldrawUiIcon.mjs";
+import { TldrawUiRow } from "../primitives/layout.mjs";
 const PeopleMenuItem = track(function PeopleMenuItem2({ userId }) {
   const editor = useEditor();
   const msg = useTranslation();
@@ -24,9 +25,9 @@ const PeopleMenuItem = track(function PeopleMenuItem2({ userId }) {
   const youAreFollowingThem = editor.getInstanceState().followingUserId === userId;
   if (!presence) return null;
   return /* @__PURE__ */ jsxs(
-    "div",
+    TldrawUiRow,
     {
-      className: "tlui-people-menu__item tlui-buttons__horizontal",
+      className: "tlui-people-menu__item",
       "data-follow": youAreFollowingThem || theyAreFollowingYou,
       children: [
         /* @__PURE__ */ jsxs(

package/dist-esm/lib/ui/components/SharePanel/PeopleMenuItem.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/PeopleMenuItem.tsx"],
-  "sourcesContent": ["import { track, useEditor, usePresence } from '@tldraw/editor'\nimport { useCallback } 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 { TldrawUiIcon } from '../primitives/TldrawUiIcon'\n\nexport const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst presence = usePresence(userId)\n\n\tconst handleFollowClick = useCallback(() => {\n\t\tif (editor.getInstanceState().followingUserId === userId) {\n\t\t\teditor.stopFollowingUser()\n\t\t\ttrackEvent('stop-following', { source: 'people-menu' })\n\t\t} else {\n\t\t\teditor.startFollowingUser(userId)\n\t\t\ttrackEvent('start-following', { source: 'people-menu' })\n\t\t}\n\t}, [editor, userId, trackEvent])\n\n\tconst theyAreFollowingYou = presence?.followingUserId === editor.user.getId()\n\tconst youAreFollowingThem = editor.getInstanceState().followingUserId === userId\n\n\tif (!presence) return null\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"tlui-people-menu__item tlui-buttons__horizontal\"\n\t\t\tdata-follow={youAreFollowingThem || theyAreFollowingYou}\n\t\t>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"menu\"\n\t\t\t\tclassName=\"tlui-people-menu__item__button\"\n\t\t\t\tonClick={() => editor.zoomToUser(userId)}\n\t\t\t\tonDoubleClick={handleFollowClick}\n\t\t\t>\n\t\t\t\t<TldrawUiIcon label={msg('people-menu.avatar-color')} icon=\"color\" color={presence.color} />\n\t\t\t\t<div className=\"tlui-people-menu__name\">\n\t\t\t\t\t{presence.userName?.trim() || msg('people-menu.anonymous-user')}\n\t\t\t\t</div>\n\t\t\t</TldrawUiButton>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\tclassName=\"tlui-people-menu__item__follow\"\n\t\t\t\ttitle={\n\t\t\t\t\ttheyAreFollowingYou\n\t\t\t\t\t\t? msg('people-menu.leading')\n\t\t\t\t\t\t: youAreFollowingThem\n\t\t\t\t\t\t\t? msg('people-menu.following')\n\t\t\t\t\t\t\t: msg('people-menu.follow')\n\t\t\t\t}\n\t\t\t\tonClick={handleFollowClick}\n\t\t\t\tdisabled={theyAreFollowingYou}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\ticon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}\n\t\t\t\t/>\n\t\t\t</TldrawUiButton>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAmCG,SAMC,KAND;AAnCH,SAAS,OAAO,WAAW,mBAAmB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAEtB,MAAM,iBAAiB,MAAM,SAASA,gBAAe,EAAE,OAAO,GAAuB;AAC3F,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY;AAE/B,QAAM,WAAW,YAAY,MAAM;AAEnC,QAAM,oBAAoB,YAAY,MAAM;AAC3C,QAAI,OAAO,iBAAiB,EAAE,oBAAoB,QAAQ;AACzD,aAAO,kBAAkB;AACzB,iBAAW,kBAAkB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACvD,OAAO;AACN,aAAO,mBAAmB,MAAM;AAChC,iBAAW,mBAAmB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACxD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAE/B,QAAM,sBAAsB,UAAU,oBAAoB,OAAO,KAAK,MAAM;AAC5E,QAAM,sBAAsB,OAAO,iBAAiB,EAAE,oBAAoB;AAE1E,MAAI,CAAC,SAAU,QAAO;AAEtB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAa,uBAAuB;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,OAAO,WAAW,MAAM;AAAA,YACvC,eAAe;AAAA,YAEf;AAAA,kCAAC,gBAAa,OAAO,IAAI,0BAA0B,GAAG,MAAK,SAAQ,OAAO,SAAS,OAAO;AAAA,cAC1F,oBAAC,SAAI,WAAU,0BACb,mBAAS,UAAU,KAAK,KAAK,IAAI,4BAA4B,GAC/D;AAAA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OACC,sBACG,IAAI,qBAAqB,IACzB,sBACC,IAAI,uBAAuB,IAC3B,IAAI,oBAAoB;AAAA,YAE7B,SAAS;AAAA,YACT,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACA,MAAM,sBAAsB,YAAY,sBAAsB,cAAc;AAAA;AAAA,YAC7E;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF,CAAC;",
+  "sourcesContent": ["import { track, useEditor, usePresence } from '@tldraw/editor'\nimport { useCallback } 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 { TldrawUiIcon } from '../primitives/TldrawUiIcon'\nimport { TldrawUiRow } from '../primitives/layout'\n\nexport const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst presence = usePresence(userId)\n\n\tconst handleFollowClick = useCallback(() => {\n\t\tif (editor.getInstanceState().followingUserId === userId) {\n\t\t\teditor.stopFollowingUser()\n\t\t\ttrackEvent('stop-following', { source: 'people-menu' })\n\t\t} else {\n\t\t\teditor.startFollowingUser(userId)\n\t\t\ttrackEvent('start-following', { source: 'people-menu' })\n\t\t}\n\t}, [editor, userId, trackEvent])\n\n\tconst theyAreFollowingYou = presence?.followingUserId === editor.user.getId()\n\tconst youAreFollowingThem = editor.getInstanceState().followingUserId === userId\n\n\tif (!presence) return null\n\n\treturn (\n\t\t<TldrawUiRow\n\t\t\tclassName=\"tlui-people-menu__item\"\n\t\t\tdata-follow={youAreFollowingThem || theyAreFollowingYou}\n\t\t>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"menu\"\n\t\t\t\tclassName=\"tlui-people-menu__item__button\"\n\t\t\t\tonClick={() => editor.zoomToUser(userId)}\n\t\t\t\tonDoubleClick={handleFollowClick}\n\t\t\t>\n\t\t\t\t<TldrawUiIcon label={msg('people-menu.avatar-color')} icon=\"color\" color={presence.color} />\n\t\t\t\t<div className=\"tlui-people-menu__name\">\n\t\t\t\t\t{presence.userName?.trim() || msg('people-menu.anonymous-user')}\n\t\t\t\t</div>\n\t\t\t</TldrawUiButton>\n\t\t\t<TldrawUiButton\n\t\t\t\ttype=\"icon\"\n\t\t\t\tclassName=\"tlui-people-menu__item__follow\"\n\t\t\t\ttitle={\n\t\t\t\t\ttheyAreFollowingYou\n\t\t\t\t\t\t? msg('people-menu.leading')\n\t\t\t\t\t\t: youAreFollowingThem\n\t\t\t\t\t\t\t? msg('people-menu.following')\n\t\t\t\t\t\t\t: msg('people-menu.follow')\n\t\t\t\t}\n\t\t\t\tonClick={handleFollowClick}\n\t\t\t\tdisabled={theyAreFollowingYou}\n\t\t\t>\n\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\ticon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}\n\t\t\t\t/>\n\t\t\t</TldrawUiButton>\n\t\t</TldrawUiRow>\n\t)\n})\n"],
+  "mappings": "AAoCG,SAMC,KAND;AApCH,SAAS,OAAO,WAAW,mBAAmB;AAC9C,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAErB,MAAM,iBAAiB,MAAM,SAASA,gBAAe,EAAE,OAAO,GAAuB;AAC3F,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY;AAE/B,QAAM,WAAW,YAAY,MAAM;AAEnC,QAAM,oBAAoB,YAAY,MAAM;AAC3C,QAAI,OAAO,iBAAiB,EAAE,oBAAoB,QAAQ;AACzD,aAAO,kBAAkB;AACzB,iBAAW,kBAAkB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACvD,OAAO;AACN,aAAO,mBAAmB,MAAM;AAChC,iBAAW,mBAAmB,EAAE,QAAQ,cAAc,CAAC;AAAA,IACxD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,UAAU,CAAC;AAE/B,QAAM,sBAAsB,UAAU,oBAAoB,OAAO,KAAK,MAAM;AAC5E,QAAM,sBAAsB,OAAO,iBAAiB,EAAE,oBAAoB;AAE1E,MAAI,CAAC,SAAU,QAAO;AAEtB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,eAAa,uBAAuB;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAM,OAAO,WAAW,MAAM;AAAA,YACvC,eAAe;AAAA,YAEf;AAAA,kCAAC,gBAAa,OAAO,IAAI,0BAA0B,GAAG,MAAK,SAAQ,OAAO,SAAS,OAAO;AAAA,cAC1F,oBAAC,SAAI,WAAU,0BACb,mBAAS,UAAU,KAAK,KAAK,IAAI,4BAA4B,GAC/D;AAAA;AAAA;AAAA,QACD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OACC,sBACG,IAAI,qBAAqB,IACzB,sBACC,IAAI,uBAAuB,IAC3B,IAAI,oBAAoB;AAAA,YAE7B,SAAS;AAAA,YACT,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACA,MAAM,sBAAsB,YAAY,sBAAsB,cAAc;AAAA;AAAA,YAC7E;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF,CAAC;",
   "names": ["PeopleMenuItem"]
 }

package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs

@@ -6,6 +6,7 @@ import { useUiEvents } from "../../context/events.mjs";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
 import { TldrawUiButton } from "../primitives/Button/TldrawUiButton.mjs";
 import { TldrawUiButtonIcon } from "../primitives/Button/TldrawUiButtonIcon.mjs";
+import { TldrawUiGrid } from "../primitives/layout.mjs";
 const UserPresenceColorPicker = track(function UserPresenceColorPicker2() {
   const editor = useEditor();
   const container = useContainer();
@@ -84,7 +85,7 @@ const UserPresenceColorPicker = track(function UserPresenceColorPicker2() {
         align: "start",
         side: "left",
         sideOffset: 8,
-        children: /* @__PURE__ */ jsx("div", { className: "tlui-buttons__grid", children: USER_COLORS.map((item) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(TldrawUiGrid, { children: USER_COLORS.map((item) => /* @__PURE__ */ jsx(
           TldrawUiButton,
           {
             type: "icon",
@@ -93,7 +94,6 @@ const UserPresenceColorPicker = track(function UserPresenceColorPicker2() {
             "aria-label": item,
             isActive: value === item,
             title: item,
-            className: "tlui-button-grid__button",
             style: { color: item },
             onPointerEnter: handleButtonPointerEnter,
             onPointerDown: handleButtonPointerDown,

package/dist-esm/lib/ui/components/SharePanel/UserPresenceColorPicker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx"],
-  "sourcesContent": ["import { USER_COLORS, track, useContainer, useEditor } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport React, { useCallback, 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'\n\nexport const UserPresenceColorPicker = track(function UserPresenceColorPicker() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst rPointing = useRef(false)\n\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst handleOpenChange = useCallback((isOpen: boolean) => {\n\t\tsetIsOpen(isOpen)\n\t}, [])\n\n\tconst value = editor.user.getColor()\n\n\tconst onValueChange = useCallback(\n\t\t(item: string) => {\n\t\t\teditor.user.updateUserPreferences({ color: item })\n\t\t\ttrackEvent('set-color', { source: 'people-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = React.useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tif (value === id) return\n\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\n\t\t\tonValueChange(id)\n\n\t\t\trPointing.current = true\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [value, onValueChange])\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tclassName=\"tlui-people-menu__user__color\"\n\t\t\t\t\tstyle={{ color: editor.user.getColor() }}\n\t\t\t\t\ttitle={msg('people-menu.change-color')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t</TldrawUiButton>\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 tlui-people-menu__user__color-picker\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tside=\"left\"\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t>\n\t\t\t\t\t<div className={'tlui-buttons__grid'}>\n\t\t\t\t\t\t{USER_COLORS.map((item: string) => (\n\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tdata-id={item}\n\t\t\t\t\t\t\t\tdata-testid={item}\n\t\t\t\t\t\t\t\taria-label={item}\n\t\t\t\t\t\t\t\tisActive={value === item}\n\t\t\t\t\t\t\t\ttitle={item}\n\t\t\t\t\t\t\t\tclassName={'tlui-button-grid__button'}\n\t\t\t\t\t\t\t\tstyle={{ color: item }}\n\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t))}\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": "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",
+  "sourcesContent": ["import { USER_COLORS, track, useContainer, useEditor } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport React, { useCallback, 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 { TldrawUiGrid } from '../primitives/layout'\n\nexport const UserPresenceColorPicker = track(function UserPresenceColorPicker() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst trackEvent = useUiEvents()\n\n\tconst rPointing = useRef(false)\n\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst handleOpenChange = useCallback((isOpen: boolean) => {\n\t\tsetIsOpen(isOpen)\n\t}, [])\n\n\tconst value = editor.user.getColor()\n\n\tconst onValueChange = useCallback(\n\t\t(item: string) => {\n\t\t\teditor.user.updateUserPreferences({ color: item })\n\t\t\ttrackEvent('set-color', { source: 'people-menu' })\n\t\t},\n\t\t[editor, trackEvent]\n\t)\n\n\tconst {\n\t\thandleButtonClick,\n\t\thandleButtonPointerDown,\n\t\thandleButtonPointerEnter,\n\t\thandleButtonPointerUp,\n\t} = React.useMemo(() => {\n\t\tconst handlePointerUp = () => {\n\t\t\trPointing.current = false\n\t\t\twindow.removeEventListener('pointerup', handlePointerUp)\n\t\t}\n\n\t\tconst handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tif (value === id) return\n\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\n\t\t\tonValueChange(id)\n\n\t\t\trPointing.current = true\n\t\t\twindow.addEventListener('pointerup', handlePointerUp) // see TLD-658\n\t\t}\n\n\t\tconst handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tif (!rPointing.current) return\n\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\tconst handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { id } = e.currentTarget.dataset\n\t\t\tif (!id) return\n\t\t\tonValueChange(id)\n\t\t}\n\n\t\treturn {\n\t\t\thandleButtonClick,\n\t\t\thandleButtonPointerDown,\n\t\t\thandleButtonPointerEnter,\n\t\t\thandleButtonPointerUp,\n\t\t}\n\t}, [value, onValueChange])\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={isOpen}>\n\t\t\t<_Popover.Trigger dir=\"ltr\" asChild>\n\t\t\t\t<TldrawUiButton\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tclassName=\"tlui-people-menu__user__color\"\n\t\t\t\t\tstyle={{ color: editor.user.getColor() }}\n\t\t\t\t\ttitle={msg('people-menu.change-color')}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t</TldrawUiButton>\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 tlui-people-menu__user__color-picker\"\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\tside=\"left\"\n\t\t\t\t\tsideOffset={8}\n\t\t\t\t>\n\t\t\t\t\t<TldrawUiGrid>\n\t\t\t\t\t\t{USER_COLORS.map((item: string) => (\n\t\t\t\t\t\t\t<TldrawUiButton\n\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\tkey={item}\n\t\t\t\t\t\t\t\tdata-id={item}\n\t\t\t\t\t\t\t\tdata-testid={item}\n\t\t\t\t\t\t\t\taria-label={item}\n\t\t\t\t\t\t\t\tisActive={value === item}\n\t\t\t\t\t\t\t\ttitle={item}\n\t\t\t\t\t\t\t\tstyle={{ color: item }}\n\t\t\t\t\t\t\t\tonPointerEnter={handleButtonPointerEnter}\n\t\t\t\t\t\t\t\tonPointerDown={handleButtonPointerDown}\n\t\t\t\t\t\t\t\tonPointerUp={handleButtonPointerUp}\n\t\t\t\t\t\t\t\tonClick={handleButtonClick}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"color\" />\n\t\t\t\t\t\t\t</TldrawUiButton>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TldrawUiGrid>\n\t\t\t\t</_Popover.Content>\n\t\t\t</_Popover.Portal>\n\t\t</_Popover.Root>\n\t)\n})\n"],
+  "mappings": "AAoFE,SAQG,KARH;AApFF,SAAS,aAAa,OAAO,cAAc,iBAAiB;AAC5D,SAAS,WAAW,gBAAgB;AACpC,OAAO,SAAS,aAAa,QAAQ,gBAAgB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAEtB,MAAM,0BAA0B,MAAM,SAASA,2BAA0B;AAC/E,QAAM,SAAS,UAAU;AACzB,QAAM,YAAY,aAAa;AAC/B,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY;AAE/B,QAAM,YAAY,OAAO,KAAK;AAE9B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,mBAAmB,YAAY,CAACC,YAAoB;AACzD,cAAUA,OAAM;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,OAAO,KAAK,SAAS;AAEnC,QAAM,gBAAgB;AAAA,IACrB,CAAC,SAAiB;AACjB,aAAO,KAAK,sBAAsB,EAAE,OAAO,KAAK,CAAC;AACjD,iBAAW,aAAa,EAAE,QAAQ,cAAc,CAAC;AAAA,IAClD;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACpB;AAEA,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,MAAM,QAAQ,MAAM;AACvB,UAAM,kBAAkB,MAAM;AAC7B,gBAAU,UAAU;AACpB,aAAO,oBAAoB,aAAa,eAAe;AAAA,IACxD;AAEA,UAAMC,qBAAoB,CAAC,MAA6C;AACvE,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,CAAC,GAAI;AACT,UAAI,UAAU,GAAI;AAElB,oBAAc,EAAE;AAAA,IACjB;AAEA,UAAMC,2BAA0B,CAAC,MAA6C;AAC7E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,CAAC,GAAI;AAET,oBAAc,EAAE;AAEhB,gBAAU,UAAU;AACpB,aAAO,iBAAiB,aAAa,eAAe;AAAA,IACrD;AAEA,UAAMC,4BAA2B,CAAC,MAA6C;AAC9E,UAAI,CAAC,UAAU,QAAS;AAExB,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,CAAC,GAAI;AACT,oBAAc,EAAE;AAAA,IACjB;AAEA,UAAMC,yBAAwB,CAAC,MAA6C;AAC3E,YAAM,EAAE,GAAG,IAAI,EAAE,cAAc;AAC/B,UAAI,CAAC,GAAI;AACT,oBAAc,EAAE;AAAA,IACjB;AAEA,WAAO;AAAA,MACN,mBAAAH;AAAA,MACA,yBAAAC;AAAA,MACA,0BAAAC;AAAA,MACA,uBAAAC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,OAAO,aAAa,CAAC;AAEzB,SACC,qBAAC,SAAS,MAAT,EAAc,cAAc,kBAAkB,MAAM,QACpD;AAAA,wBAAC,SAAS,SAAT,EAAiB,KAAI,OAAM,SAAO,MAClC;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,OAAO,KAAK,SAAS,EAAE;AAAA,QACvC,OAAO,IAAI,0BAA0B;AAAA,QAErC,8BAAC,sBAAmB,MAAK,SAAQ;AAAA;AAAA,IAClC,GACD;AAAA,IACA,oBAAC,SAAS,QAAT,EAAgB,WAChB;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,OAAM;AAAA,QACN,MAAK;AAAA,QACL,YAAY;AAAA,QAEZ,8BAAC,gBACC,sBAAY,IAAI,CAAC,SACjB;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YAEL,WAAS;AAAA,YACT,eAAa;AAAA,YACb,cAAY;AAAA,YACZ,UAAU,UAAU;AAAA,YACpB,OAAO;AAAA,YACP,OAAO,EAAE,OAAO,KAAK;AAAA,YACrB,gBAAgB;AAAA,YAChB,eAAe;AAAA,YACf,aAAa;AAAA,YACb,SAAS;AAAA,YAET,8BAAC,sBAAmB,MAAK,SAAQ;AAAA;AAAA,UAZ5B;AAAA,QAaN,CACA,GACF;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF,CAAC;",
   "names": ["UserPresenceColorPicker", "isOpen", "handleButtonClick", "handleButtonPointerDown", "handleButtonPointerEnter", "handleButtonPointerUp"]
 }

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

@@ -1,24 +1,32 @@
 import { jsx } from "react/jsx-runtime";
-import { useEditor, usePassThroughWheelEvents, useValue } from "@tldraw/editor";
+import {
+  useEditor,
+  usePassThroughWheelEvents,
+  useValue
+} from "@tldraw/editor";
 import classNames from "classnames";
 import { memo, useCallback, useEffect, useRef } from "react";
 import { useRelevantStyles } from "../../hooks/useRelevantStyles.mjs";
 import { DefaultStylePanelContent } from "./DefaultStylePanelContent.mjs";
+import { StylePanelContextProvider } from "./StylePanelContext.mjs";
 const DefaultStylePanel = memo(function DefaultStylePanel2({
   isMobile,
+  styles,
   children
 }) {
   const editor = useEditor();
   const showUiLabels = useValue("showUiLabels", () => editor.user.getShowUiLabels(), [editor]);
   const ref = useRef(null);
   usePassThroughWheelEvents(ref);
-  const styles = useRelevantStyles();
   const handlePointerOut = useCallback(() => {
     if (!isMobile) {
       editor.updateInstanceState({ isChangingStyle: false });
     }
   }, [editor, isMobile]);
-  const content = children ?? /* @__PURE__ */ jsx(DefaultStylePanelContent, { styles });
+  const defaultStyles = useRelevantStyles();
+  if (styles === void 0) {
+    styles = defaultStyles;
+  }
   useEffect(() => {
     function handleKeyDown(event) {
       if (event.key === "Escape" && ref.current?.contains(document.activeElement)) {
@@ -32,15 +40,16 @@ const DefaultStylePanel = memo(function DefaultStylePanel2({
       stylePanelContainerEl?.removeEventListener("keydown", handleKeyDown, { capture: true });
     };
   }, [editor]);
-  return /* @__PURE__ */ jsx(
+  return styles && /* @__PURE__ */ jsx(
     "div",
     {
       ref,
+      "data-testid": "style.panel",
       className: classNames("tlui-style-panel", { "tlui-style-panel__wrapper": !isMobile }),
       "data-ismobile": isMobile,
       "data-show-ui-labels": showUiLabels,
       onPointerLeave: handlePointerOut,
-      children: content
+      children: /* @__PURE__ */ jsx(StylePanelContextProvider, { styles, children: children ?? /* @__PURE__ */ jsx(DefaultStylePanelContent, {}) })
     }
   );
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/StylePanel/DefaultStylePanel.tsx"],
-  "sourcesContent": ["import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useCallback, useEffect, useRef } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { DefaultStylePanelContent } from './DefaultStylePanelContent'\n\n/** @public */\nexport interface TLUiStylePanelProps {\n\tisMobile?: boolean\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultStylePanel = memo(function DefaultStylePanel({\n\tisMobile,\n\tchildren,\n}: TLUiStylePanelProps) {\n\tconst editor = useEditor()\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst styles = useRelevantStyles()\n\n\tconst handlePointerOut = useCallback(() => {\n\t\tif (!isMobile) {\n\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t}\n\t}, [editor, isMobile])\n\n\tconst content = children ?? <DefaultStylePanelContent styles={styles} />\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape' && ref.current?.contains(document.activeElement)) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t}\n\n\t\tconst stylePanelContainerEl = ref.current\n\t\tstylePanelContainerEl?.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tstylePanelContainerEl?.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [editor])\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}\n\t\t\tdata-ismobile={isMobile}\n\t\t\tdata-show-ui-labels={showUiLabels}\n\t\t\tonPointerLeave={handlePointerOut}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AA+B6B;AA/B7B,SAAS,WAAW,2BAA2B,gBAAgB;AAC/D,OAAO,gBAAgB;AACvB,SAAoB,MAAM,aAAa,WAAW,cAAc;AAChE,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AASlC,MAAM,oBAAoB,KAAK,SAASA,mBAAkB;AAAA,EAChE;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,SAAS,gBAAgB,MAAM,OAAO,KAAK,gBAAgB,GAAG,CAAC,MAAM,CAAC;AAE3F,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,SAAS,kBAAkB;AAEjC,QAAM,mBAAmB,YAAY,MAAM;AAC1C,QAAI,CAAC,UAAU;AACd,aAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,IACtD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,QAAM,UAAU,YAAY,oBAAC,4BAAyB,QAAgB;AAEtE,YAAU,MAAM;AACf,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,YAAY,IAAI,SAAS,SAAS,SAAS,aAAa,GAAG;AAC5E,cAAM,gBAAgB;AACtB,eAAO,aAAa,EAAE,MAAM;AAAA,MAC7B;AAAA,IACD;AAEA,UAAM,wBAAwB,IAAI;AAClC,2BAAuB,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACnF,WAAO,MAAM;AACZ,6BAAuB,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACvF;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAW,WAAW,oBAAoB,EAAE,6BAA6B,CAAC,SAAS,CAAC;AAAA,MACpF,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAEf;AAAA;AAAA,EACF;AAEF,CAAC;",
+  "sourcesContent": ["import {\n\tReadonlySharedStyleMap,\n\tuseEditor,\n\tusePassThroughWheelEvents,\n\tuseValue,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { ReactNode, memo, useCallback, useEffect, useRef } from 'react'\nimport { useRelevantStyles } from '../../hooks/useRelevantStyles'\nimport { DefaultStylePanelContent } from './DefaultStylePanelContent'\nimport { StylePanelContextProvider } from './StylePanelContext'\n\n/** @public */\nexport interface TLUiStylePanelProps {\n\tisMobile?: boolean\n\tstyles?: ReadonlySharedStyleMap | null\n\tchildren?: ReactNode\n}\n\n/** @public @react */\nexport const DefaultStylePanel = memo(function DefaultStylePanel({\n\tisMobile,\n\tstyles,\n\tchildren,\n}: TLUiStylePanelProps) {\n\tconst editor = useEditor()\n\tconst showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst handlePointerOut = useCallback(() => {\n\t\tif (!isMobile) {\n\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t}\n\t}, [editor, isMobile])\n\n\tconst defaultStyles = useRelevantStyles()\n\tif (styles === undefined) {\n\t\tstyles = defaultStyles\n\t}\n\n\tuseEffect(() => {\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (event.key === 'Escape' && ref.current?.contains(document.activeElement)) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\teditor.getContainer().focus()\n\t\t\t}\n\t\t}\n\n\t\tconst stylePanelContainerEl = ref.current\n\t\tstylePanelContainerEl?.addEventListener('keydown', handleKeyDown, { capture: true })\n\t\treturn () => {\n\t\t\tstylePanelContainerEl?.removeEventListener('keydown', handleKeyDown, { capture: true })\n\t\t}\n\t}, [editor])\n\n\treturn (\n\t\tstyles && (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tdata-testid=\"style.panel\"\n\t\t\t\tclassName={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}\n\t\t\t\tdata-ismobile={isMobile}\n\t\t\t\tdata-show-ui-labels={showUiLabels}\n\t\t\t\tonPointerLeave={handlePointerOut}\n\t\t\t>\n\t\t\t\t<StylePanelContextProvider styles={styles}>\n\t\t\t\t\t{children ?? <DefaultStylePanelContent />}\n\t\t\t\t</StylePanelContextProvider>\n\t\t\t</div>\n\t\t)\n\t)\n})\n"],
+  "mappings": "AAoEkB;AApElB;AAAA,EAEC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,OAAO,gBAAgB;AACvB,SAAoB,MAAM,aAAa,WAAW,cAAc;AAChE,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,SAAS,iCAAiC;AAUnC,MAAM,oBAAoB,KAAK,SAASA,mBAAkB;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AACD,GAAwB;AACvB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,SAAS,gBAAgB,MAAM,OAAO,KAAK,gBAAgB,GAAG,CAAC,MAAM,CAAC;AAE3F,QAAM,MAAM,OAAuB,IAAI;AACvC,4BAA0B,GAAG;AAE7B,QAAM,mBAAmB,YAAY,MAAM;AAC1C,QAAI,CAAC,UAAU;AACd,aAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,IACtD;AAAA,EACD,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,QAAM,gBAAgB,kBAAkB;AACxC,MAAI,WAAW,QAAW;AACzB,aAAS;AAAA,EACV;AAEA,YAAU,MAAM;AACf,aAAS,cAAc,OAAsB;AAC5C,UAAI,MAAM,QAAQ,YAAY,IAAI,SAAS,SAAS,SAAS,aAAa,GAAG;AAC5E,cAAM,gBAAgB;AACtB,eAAO,aAAa,EAAE,MAAM;AAAA,MAC7B;AAAA,IACD;AAEA,UAAM,wBAAwB,IAAI;AAClC,2BAAuB,iBAAiB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AACnF,WAAO,MAAM;AACZ,6BAAuB,oBAAoB,WAAW,eAAe,EAAE,SAAS,KAAK,CAAC;AAAA,IACvF;AAAA,EACD,GAAG,CAAC,MAAM,CAAC;AAEX,SACC,UACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY;AAAA,MACZ,WAAW,WAAW,oBAAoB,EAAE,6BAA6B,CAAC,SAAS,CAAC;AAAA,MACpF,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAEhB,8BAAC,6BAA0B,QACzB,sBAAY,oBAAC,4BAAyB,GACxC;AAAA;AAAA,EACD;AAGH,CAAC;",
   "names": ["DefaultStylePanel"]
 }