@tldraw/editor 5.3.0-next.4123e97459a9 → 5.3.0-next.5cb71bb7e8fe

package/dist-cjs/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.ts"],
-  "sourcesContent": ["import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'\nimport type { TLInstancePresence } from '@tldraw/tlschema'\nimport { maxBy } from '@tldraw/utils'\nimport type { Editor } from '../../Editor'\n\n/**\n * Tracks remote peers and exposes the collaborator-related queries used by the\n * editor and its overlays. Encapsulates the visibility clock that periodically\n * re-evaluates which collaborators should be visible based on activity.\n *\n * Accessed via {@link Editor.collaborators}.\n *\n * @public\n */\nexport class CollaboratorsManager {\n\tconstructor(private readonly editor: Editor) {}\n\n\tprivate _visibilityClockStarted = false\n\n\tprivate _startVisibilityClock() {\n\t\tif (this._visibilityClockStarted) return\n\t\tthis._visibilityClockStarted = true\n\n\t\t// Editor disposes `editor.timers` on its own teardown, so the interval is\n\t\t// automatically cleared when the editor is disposed.\n\t\tthis.editor.timers.setInterval(() => {\n\t\t\tthis._visibilityClock.set(Date.now())\n\t\t}, this.editor.options.collaboratorCheckIntervalMs)\n\t}\n\n\t/**\n\t * Drives reactive re-evaluation of {@link CollaboratorsManager.getVisibleCollaborators}.\n\t * Ticked on a fixed interval so callers don't need to manage their own activity timers.\n\t */\n\tprivate readonly _visibilityClock = atom('collaboratorVisibilityClock', Date.now())\n\n\t@computed\n\tprivate _getCollaboratorsQuery() {\n\t\treturn this.editor.store.query.records('instance_presence', () => ({\n\t\t\tuserId: { neq: this.editor.user.getRecordId() },\n\t\t}))\n\t}\n\n\t/**\n\t * Returns a list of presence records for all peer collaborators.\n\t * This will return the latest presence record for each connected user.\n\t */\n\t@computed\n\tgetCollaborators(): TLInstancePresence[] {\n\t\tconst allPresenceRecords = this._getCollaboratorsQuery().get()\n\t\tif (!allPresenceRecords.length) return EMPTY_ARRAY\n\t\tconst userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort()\n\t\treturn userIds.map((id) => {\n\t\t\tconst latestPresence = maxBy(\n\t\t\t\tallPresenceRecords.filter((c) => c.userId === id),\n\t\t\t\t(p) => p.lastActivityTimestamp ?? 0\n\t\t\t)\n\t\t\treturn latestPresence!\n\t\t})\n\t}\n\n\t/**\n\t * Returns a list of presence records for all peer collaborators on the current page.\n\t * This will return the latest presence record for each connected user.\n\t */\n\t@computed\n\tgetCollaboratorsOnCurrentPage(): TLInstancePresence[] {\n\t\tconst currentPageId = this.editor.getCurrentPageId()\n\t\treturn this.getCollaborators().filter((c) => c.currentPageId === currentPageId)\n\t}\n\n\t/**\n\t * Returns a list of presence records for peer collaborators who should currently be\n\t * shown in the UI. Filters {@link CollaboratorsManager.getCollaborators} by activity\n\t * state (active / idle / inactive) and visibility rules such as following and\n\t * highlighted users. Re-evaluates on the visibility clock, so callers don't need to\n\t * drive their own activity timer.\n\t */\n\t@computed\n\tgetVisibleCollaborators(): TLInstancePresence[] {\n\t\tconst { editor } = this\n\t\tconst { collaboratorInactiveTimeoutMs, collaboratorIdleTimeoutMs } = editor.options\n\n\t\tthis._startVisibilityClock()\n\t\tthis._visibilityClock.get()\n\t\tconst now = Date.now()\n\t\tconst collaborators = this.getCollaborators()\n\t\tif (!collaborators.length) return EMPTY_ARRAY\n\n\t\tconst { followingUserId, highlightedUserIds } = this.editor.getInstanceState()\n\t\tconst currentUserId = this.editor.user.getRecordId()\n\n\t\treturn collaborators.filter((presence) => {\n\t\t\tconst { lastActivityTimestamp, userId, chatMessage } = presence\n\n\t\t\t// Treat a missing or zero `lastActivityTimestamp` as \"active right now\"\n\t\t\t// (elapsed = 0) so newly-joined peers aren't immediately classified as\n\t\t\t// idle/inactive. The broadcast default for peers who haven't moved their\n\t\t\t// pointer yet is `0` (e.g. someone on a touch device who joins and just\n\t\t\t// watches), so a plain `?? now` would leave them hidden. See issue #9017.\n\t\t\tconst elapsed = lastActivityTimestamp ? Math.max(0, now - lastActivityTimestamp) : 0\n\n\t\t\tif (elapsed > collaboratorInactiveTimeoutMs) {\n\t\t\t\t// Inactive: If they're inactive, only show if we're following them or they're highlighted\n\t\t\t\treturn followingUserId === userId || highlightedUserIds.includes(userId)\n\t\t\t}\n\n\t\t\tif (elapsed > collaboratorIdleTimeoutMs) {\n\t\t\t\t// Idle: If they're idle and following us, hide them unless they have a chat message or are highlighted\n\t\t\t\tif (presence.followingUserId === currentUserId) {\n\t\t\t\t\treturn !!(chatMessage || highlightedUserIds.includes(userId))\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Active\n\t\t\treturn true\n\t\t})\n\t}\n\n\t/**\n\t * Returns a list of presence records for peer collaborators who should currently be\n\t * shown in the UI, filtered to those on the current page.\n\t */\n\t@computed\n\tgetVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[] {\n\t\tconst currentPageId = this.editor.getCurrentPageId()\n\t\treturn this.getVisibleCollaborators().filter((c) => c.currentPageId === currentPageId)\n\t}\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAE5C,mBAAsB;AAYf,MAAM,qBAAqB;AAAA,EACjC,YAA6B,QAAgB;AAAhB;AAAA,EAAiB;AAAA,EAAjB;AAAA,EAErB,0BAA0B;AAAA,EAE1B,wBAAwB;AAC/B,QAAI,KAAK,wBAAyB;AAClC,SAAK,0BAA0B;AAI/B,SAAK,OAAO,OAAO,YAAY,MAAM;AACpC,WAAK,iBAAiB,IAAI,KAAK,IAAI,CAAC;AAAA,IACrC,GAAG,KAAK,OAAO,QAAQ,2BAA2B;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMiB,uBAAmB,mBAAK,+BAA+B,KAAK,IAAI,CAAC;AAAA,EAG1E,yBAAyB;AAChC,WAAO,KAAK,OAAO,MAAM,MAAM,QAAQ,qBAAqB,OAAO;AAAA,MAClE,QAAQ,EAAE,KAAK,KAAK,OAAO,KAAK,YAAY,EAAE;AAAA,IAC/C,EAAE;AAAA,EACH;AAAA,EAOA,mBAAyC;AACxC,UAAM,qBAAqB,KAAK,uBAAuB,EAAE,IAAI;AAC7D,QAAI,CAAC,mBAAmB,OAAQ,QAAO;AACvC,UAAM,UAAU,CAAC,GAAG,IAAI,IAAI,mBAAmB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK;AAC3E,WAAO,QAAQ,IAAI,CAAC,OAAO;AAC1B,YAAM,qBAAiB;AAAA,QACtB,mBAAmB,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE;AAAA,QAChD,CAAC,MAAM,EAAE,yBAAyB;AAAA,MACnC;AACA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AAAA,EAOA,gCAAsD;AACrD,UAAM,gBAAgB,KAAK,OAAO,iBAAiB;AACnD,WAAO,KAAK,iBAAiB,EAAE,OAAO,CAAC,MAAM,EAAE,kBAAkB,aAAa;AAAA,EAC/E;AAAA,EAUA,0BAAgD;AAC/C,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,EAAE,+BAA+B,0BAA0B,IAAI,OAAO;AAE5E,SAAK,sBAAsB;AAC3B,SAAK,iBAAiB,IAAI;AAC1B,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,gBAAgB,KAAK,iBAAiB;AAC5C,QAAI,CAAC,cAAc,OAAQ,QAAO;AAElC,UAAM,EAAE,iBAAiB,mBAAmB,IAAI,KAAK,OAAO,iBAAiB;AAC7E,UAAM,gBAAgB,KAAK,OAAO,KAAK,YAAY;AAEnD,WAAO,cAAc,OAAO,CAAC,aAAa;AACzC,YAAM,EAAE,uBAAuB,QAAQ,YAAY,IAAI;AAOvD,YAAM,UAAU,wBAAwB,KAAK,IAAI,GAAG,MAAM,qBAAqB,IAAI;AAEnF,UAAI,UAAU,+BAA+B;AAE5C,eAAO,oBAAoB,UAAU,mBAAmB,SAAS,MAAM;AAAA,MACxE;AAEA,UAAI,UAAU,2BAA2B;AAExC,YAAI,SAAS,oBAAoB,eAAe;AAC/C,iBAAO,CAAC,EAAE,eAAe,mBAAmB,SAAS,MAAM;AAAA,QAC5D;AAAA,MACD;AAGA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AAAA,EAOA,uCAA6D;AAC5D,UAAM,gBAAgB,KAAK,OAAO,iBAAiB;AACnD,WAAO,KAAK,wBAAwB,EAAE,OAAO,CAAC,MAAM,EAAE,kBAAkB,aAAa;AAAA,EACtF;AACD;AA3FS;AAAA,EADP;AAAA,GAtBW,qBAuBJ;AAWR;AAAA,EADC;AAAA,GAjCW,qBAkCZ;AAkBA;AAAA,EADC;AAAA,GAnDW,qBAoDZ;AAaA;AAAA,EADC;AAAA,GAhEW,qBAiEZ;AA6CA;AAAA,EADC;AAAA,GA7GW,qBA8GZ;",
+  "sourcesContent": ["import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'\nimport type { TLInstancePresence } from '@tldraw/tlschema'\nimport { areArraysShallowEqual, maxBy } from '@tldraw/utils'\nimport type { Editor } from '../../Editor'\n\n/**\n * Tracks remote peers and exposes the collaborator-related queries used by the\n * editor and its overlays. Encapsulates the visibility clock that periodically\n * re-evaluates which collaborators should be visible based on activity.\n *\n * Accessed via {@link Editor.collaborators}.\n *\n * @public\n */\nexport class CollaboratorsManager {\n\tconstructor(private readonly editor: Editor) {}\n\n\tprivate _visibilityClockStarted = false\n\n\tprivate _startVisibilityClock() {\n\t\tif (this._visibilityClockStarted) return\n\t\tthis._visibilityClockStarted = true\n\n\t\t// Editor disposes `editor.timers` on its own teardown, so the interval is\n\t\t// automatically cleared when the editor is disposed.\n\t\tthis.editor.timers.setInterval(() => {\n\t\t\tthis._visibilityClock.set(Date.now())\n\t\t}, this.editor.options.collaboratorCheckIntervalMs)\n\t}\n\n\t/**\n\t * Drives reactive re-evaluation of {@link CollaboratorsManager.getVisibleCollaborators}.\n\t * Ticked on a fixed interval so callers don't need to manage their own activity timers.\n\t */\n\tprivate readonly _visibilityClock = atom('collaboratorVisibilityClock', Date.now())\n\n\t@computed\n\tprivate _getCollaboratorsQuery() {\n\t\treturn this.editor.store.query.records('instance_presence', () => ({\n\t\t\tuserId: { neq: this.editor.user.getRecordId() },\n\t\t}))\n\t}\n\n\t// These queries all derive fresh arrays with map/filter, so they compare results with\n\t// shallow (element-identity) equality: a presence update that leaves a derived list's\n\t// elements unchanged \u2014 e.g. a peer moving on another page \u2014 keeps the previous array's\n\t// identity and doesn't invalidate downstream subscribers such as the cursor layer.\n\n\t/**\n\t * Returns a list of presence records for all peer collaborators.\n\t * This will return the latest presence record for each connected user.\n\t */\n\t@computed({ isEqual: areArraysShallowEqual })\n\tgetCollaborators(): TLInstancePresence[] {\n\t\tconst allPresenceRecords = this._getCollaboratorsQuery().get()\n\t\tif (!allPresenceRecords.length) return EMPTY_ARRAY\n\t\tconst userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort()\n\t\treturn userIds.map((id) => {\n\t\t\tconst latestPresence = maxBy(\n\t\t\t\tallPresenceRecords.filter((c) => c.userId === id),\n\t\t\t\t(p) => p.lastActivityTimestamp ?? 0\n\t\t\t)\n\t\t\treturn latestPresence!\n\t\t})\n\t}\n\n\t/**\n\t * Returns a list of presence records for all peer collaborators on the current page.\n\t * This will return the latest presence record for each connected user.\n\t */\n\t@computed({ isEqual: areArraysShallowEqual })\n\tgetCollaboratorsOnCurrentPage(): TLInstancePresence[] {\n\t\tconst currentPageId = this.editor.getCurrentPageId()\n\t\treturn this.getCollaborators().filter((c) => c.currentPageId === currentPageId)\n\t}\n\n\t/**\n\t * Returns a list of presence records for peer collaborators who should currently be\n\t * shown in the UI. Filters {@link CollaboratorsManager.getCollaborators} by activity\n\t * state (active / idle / inactive) and visibility rules such as following and\n\t * highlighted users. Re-evaluates on the visibility clock, so callers don't need to\n\t * drive their own activity timer.\n\t */\n\t@computed({ isEqual: areArraysShallowEqual })\n\tgetVisibleCollaborators(): TLInstancePresence[] {\n\t\tconst { editor } = this\n\t\tconst { collaboratorInactiveTimeoutMs, collaboratorIdleTimeoutMs } = editor.options\n\n\t\tthis._startVisibilityClock()\n\t\tthis._visibilityClock.get()\n\t\tconst now = Date.now()\n\t\tconst collaborators = this.getCollaborators()\n\t\tif (!collaborators.length) return EMPTY_ARRAY\n\n\t\tconst { followingUserId, highlightedUserIds } = this.editor.getInstanceState()\n\t\tconst currentUserId = this.editor.user.getRecordId()\n\n\t\treturn collaborators.filter((presence) => {\n\t\t\tconst { lastActivityTimestamp, userId, chatMessage } = presence\n\n\t\t\t// Treat a missing or zero `lastActivityTimestamp` as \"active right now\"\n\t\t\t// (elapsed = 0) so newly-joined peers aren't immediately classified as\n\t\t\t// idle/inactive. The broadcast default for peers who haven't moved their\n\t\t\t// pointer yet is `0` (e.g. someone on a touch device who joins and just\n\t\t\t// watches), so a plain `?? now` would leave them hidden. See issue #9017.\n\t\t\tconst elapsed = lastActivityTimestamp ? Math.max(0, now - lastActivityTimestamp) : 0\n\n\t\t\tif (elapsed > collaboratorInactiveTimeoutMs) {\n\t\t\t\t// Inactive: If they're inactive, only show if we're following them or they're highlighted\n\t\t\t\treturn followingUserId === userId || highlightedUserIds.includes(userId)\n\t\t\t}\n\n\t\t\tif (elapsed > collaboratorIdleTimeoutMs) {\n\t\t\t\t// Idle: If they're idle and following us, hide them unless they have a chat message or are highlighted\n\t\t\t\tif (presence.followingUserId === currentUserId) {\n\t\t\t\t\treturn !!(chatMessage || highlightedUserIds.includes(userId))\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Active\n\t\t\treturn true\n\t\t})\n\t}\n\n\t/**\n\t * Returns a list of presence records for peer collaborators who should currently be\n\t * shown in the UI, filtered to those on the current page.\n\t */\n\t@computed({ isEqual: areArraysShallowEqual })\n\tgetVisibleCollaboratorsOnCurrentPage(): TLInstancePresence[] {\n\t\tconst currentPageId = this.editor.getCurrentPageId()\n\t\treturn this.getVisibleCollaborators().filter((c) => c.currentPageId === currentPageId)\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAE5C,mBAA6C;AAYtC,MAAM,qBAAqB;AAAA,EACjC,YAA6B,QAAgB;AAAhB;AAAA,EAAiB;AAAA,EAAjB;AAAA,EAErB,0BAA0B;AAAA,EAE1B,wBAAwB;AAC/B,QAAI,KAAK,wBAAyB;AAClC,SAAK,0BAA0B;AAI/B,SAAK,OAAO,OAAO,YAAY,MAAM;AACpC,WAAK,iBAAiB,IAAI,KAAK,IAAI,CAAC;AAAA,IACrC,GAAG,KAAK,OAAO,QAAQ,2BAA2B;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMiB,uBAAmB,mBAAK,+BAA+B,KAAK,IAAI,CAAC;AAAA,EAG1E,yBAAyB;AAChC,WAAO,KAAK,OAAO,MAAM,MAAM,QAAQ,qBAAqB,OAAO;AAAA,MAClE,QAAQ,EAAE,KAAK,KAAK,OAAO,KAAK,YAAY,EAAE;AAAA,IAC/C,EAAE;AAAA,EACH;AAAA,EAYA,mBAAyC;AACxC,UAAM,qBAAqB,KAAK,uBAAuB,EAAE,IAAI;AAC7D,QAAI,CAAC,mBAAmB,OAAQ,QAAO;AACvC,UAAM,UAAU,CAAC,GAAG,IAAI,IAAI,mBAAmB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK;AAC3E,WAAO,QAAQ,IAAI,CAAC,OAAO;AAC1B,YAAM,qBAAiB;AAAA,QACtB,mBAAmB,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE;AAAA,QAChD,CAAC,MAAM,EAAE,yBAAyB;AAAA,MACnC;AACA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AAAA,EAOA,gCAAsD;AACrD,UAAM,gBAAgB,KAAK,OAAO,iBAAiB;AACnD,WAAO,KAAK,iBAAiB,EAAE,OAAO,CAAC,MAAM,EAAE,kBAAkB,aAAa;AAAA,EAC/E;AAAA,EAUA,0BAAgD;AAC/C,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,EAAE,+BAA+B,0BAA0B,IAAI,OAAO;AAE5E,SAAK,sBAAsB;AAC3B,SAAK,iBAAiB,IAAI;AAC1B,UAAM,MAAM,KAAK,IAAI;AACrB,UAAM,gBAAgB,KAAK,iBAAiB;AAC5C,QAAI,CAAC,cAAc,OAAQ,QAAO;AAElC,UAAM,EAAE,iBAAiB,mBAAmB,IAAI,KAAK,OAAO,iBAAiB;AAC7E,UAAM,gBAAgB,KAAK,OAAO,KAAK,YAAY;AAEnD,WAAO,cAAc,OAAO,CAAC,aAAa;AACzC,YAAM,EAAE,uBAAuB,QAAQ,YAAY,IAAI;AAOvD,YAAM,UAAU,wBAAwB,KAAK,IAAI,GAAG,MAAM,qBAAqB,IAAI;AAEnF,UAAI,UAAU,+BAA+B;AAE5C,eAAO,oBAAoB,UAAU,mBAAmB,SAAS,MAAM;AAAA,MACxE;AAEA,UAAI,UAAU,2BAA2B;AAExC,YAAI,SAAS,oBAAoB,eAAe;AAC/C,iBAAO,CAAC,EAAE,eAAe,mBAAmB,SAAS,MAAM;AAAA,QAC5D;AAAA,MACD;AAGA,aAAO;AAAA,IACR,CAAC;AAAA,EACF;AAAA,EAOA,uCAA6D;AAC5D,UAAM,gBAAgB,KAAK,OAAO,iBAAiB;AACnD,WAAO,KAAK,wBAAwB,EAAE,OAAO,CAAC,MAAM,EAAE,kBAAkB,aAAa;AAAA,EACtF;AACD;AAhGS;AAAA,EADP;AAAA,GAtBW,qBAuBJ;AAgBR;AAAA,MADC,uBAAS,EAAE,SAAS,mCAAsB,CAAC;AAAA,GAtChC,qBAuCZ;AAkBA;AAAA,MADC,uBAAS,EAAE,SAAS,mCAAsB,CAAC;AAAA,GAxDhC,qBAyDZ;AAaA;AAAA,MADC,uBAAS,EAAE,SAAS,mCAAsB,CAAC;AAAA,GArEhC,qBAsEZ;AA6CA;AAAA,MADC,uBAAS,EAAE,SAAS,mCAAsB,CAAC;AAAA,GAlHhC,qBAmHZ;",
   "names": []
 }

package/dist-cjs/lib/editor/types/external-content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/types/external-content.ts"],
-  "sourcesContent": ["import { TLAssetId, TLShapeId } from '@tldraw/tlschema'\nimport { VecLike } from '../../primitives/Vec'\nimport { TLContent } from './clipboard-types'\n\n/** @public */\nexport interface TLTldrawExternalContentSource {\n\ttype: 'tldraw'\n\tdata: TLContent\n}\n\n/** @public */\nexport interface TLExcalidrawExternalContentSource {\n\ttype: 'excalidraw'\n\tdata: any\n}\n\n/** @public */\nexport interface TLTextExternalContentSource {\n\ttype: 'text'\n\tdata: string\n\tsubtype: 'json' | 'html' | 'text' | 'url'\n}\n\n/** @public */\nexport interface TLErrorExternalContentSource {\n\ttype: 'error'\n\tdata: string | null\n\treason: string\n}\n\n/** @public */\nexport type TLExternalContentSource =\n\t| TLTldrawExternalContentSource\n\t| TLExcalidrawExternalContentSource\n\t| TLTextExternalContentSource\n\t| TLErrorExternalContentSource\n\n/** @public */\nexport interface TLBaseExternalContent {\n\tsources?: TLExternalContentSource[]\n\tpoint?: VecLike\n}\n\n/** @public */\nexport interface TLTextExternalContent extends TLBaseExternalContent {\n\ttype: 'text'\n\ttext: string\n\thtml?: string\n}\n\n/** @public */\nexport interface TLFilesExternalContent extends TLBaseExternalContent {\n\ttype: 'files'\n\tfiles: File[]\n\tignoreParent?: boolean\n}\n\n/** @public */\nexport interface TLFileReplaceExternalContent extends TLBaseExternalContent {\n\ttype: 'file-replace'\n\tfile: File\n\tshapeId: TLShapeId\n\t/** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */\n\tisImage: boolean\n}\n\n/** @public */\nexport interface TLUrlExternalContent extends TLBaseExternalContent {\n\ttype: 'url'\n\turl: string\n}\n\n/** @public */\nexport interface TLSvgTextExternalContent extends TLBaseExternalContent {\n\ttype: 'svg-text'\n\ttext: string\n}\n\n/** @public */\nexport interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {\n\ttype: 'embed'\n\turl: string\n\tembed: EmbedDefinition\n}\n\n/** @public */\nexport interface TLTldrawExternalContent extends TLBaseExternalContent {\n\ttype: 'tldraw'\n\tcontent: TLContent\n}\n\n/** @public */\nexport interface TLExcalidrawExternalContent extends TLBaseExternalContent {\n\ttype: 'excalidraw'\n\tcontent: any\n}\n\n/** @public */\nexport type TLExternalContent<EmbedDefinition> =\n\t| TLTextExternalContent\n\t| TLFilesExternalContent\n\t| TLFileReplaceExternalContent\n\t| TLUrlExternalContent\n\t| TLSvgTextExternalContent\n\t| TLEmbedExternalContent<EmbedDefinition>\n\t| TLTldrawExternalContent\n\t| TLExcalidrawExternalContent\n\n/** @public */\nexport interface TLFileExternalAsset {\n\ttype: 'file'\n\tfile: File\n\tassetId?: TLAssetId\n}\n\n/** @public */\nexport interface TLUrlExternalAsset {\n\ttype: 'url'\n\turl: string\n}\n\n/** @public */\nexport type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset\n"],
+  "sourcesContent": ["import { TLAssetId, TLShapeId } from '@tldraw/tlschema'\nimport { VecLike } from '../../primitives/Vec'\nimport { TLContent } from './clipboard-types'\n\n/** @public */\nexport interface TLTldrawExternalContentSource {\n\ttype: 'tldraw'\n\tdata: TLContent\n}\n\n/** @public */\nexport interface TLExcalidrawExternalContentSource {\n\ttype: 'excalidraw'\n\tdata: any\n}\n\n/** @public */\nexport interface TLTextExternalContentSource {\n\ttype: 'text'\n\tdata: string\n\tsubtype: 'json' | 'html' | 'text' | 'url'\n}\n\n/** @public */\nexport interface TLErrorExternalContentSource {\n\ttype: 'error'\n\tdata: string | null\n\treason: string\n}\n\n/** @public */\nexport type TLExternalContentSource =\n\t| TLTldrawExternalContentSource\n\t| TLExcalidrawExternalContentSource\n\t| TLTextExternalContentSource\n\t| TLErrorExternalContentSource\n\n/** @public */\nexport interface TLBaseExternalContent {\n\t/**\n\t * The other content sources found on the clipboard alongside this content. For example, when\n\t * pasting an image copied together with HTML and plain text, the `files` content will have\n\t * text sources for the HTML and plain text parts.\n\t */\n\tsources?: TLExternalContentSource[]\n\tpoint?: VecLike\n}\n\n/** @public */\nexport interface TLTextExternalContent extends TLBaseExternalContent {\n\ttype: 'text'\n\ttext: string\n\thtml?: string\n}\n\n/** @public */\nexport interface TLFilesExternalContent extends TLBaseExternalContent {\n\ttype: 'files'\n\tfiles: File[]\n\tignoreParent?: boolean\n}\n\n/** @public */\nexport interface TLFileReplaceExternalContent extends TLBaseExternalContent {\n\ttype: 'file-replace'\n\tfile: File\n\tshapeId: TLShapeId\n\t/** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */\n\tisImage: boolean\n}\n\n/** @public */\nexport interface TLUrlExternalContent extends TLBaseExternalContent {\n\ttype: 'url'\n\turl: string\n}\n\n/** @public */\nexport interface TLSvgTextExternalContent extends TLBaseExternalContent {\n\ttype: 'svg-text'\n\ttext: string\n}\n\n/** @public */\nexport interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {\n\ttype: 'embed'\n\turl: string\n\tembed: EmbedDefinition\n}\n\n/** @public */\nexport interface TLTldrawExternalContent extends TLBaseExternalContent {\n\ttype: 'tldraw'\n\tcontent: TLContent\n}\n\n/** @public */\nexport interface TLExcalidrawExternalContent extends TLBaseExternalContent {\n\ttype: 'excalidraw'\n\tcontent: any\n}\n\n/** @public */\nexport type TLExternalContent<EmbedDefinition> =\n\t| TLTextExternalContent\n\t| TLFilesExternalContent\n\t| TLFileReplaceExternalContent\n\t| TLUrlExternalContent\n\t| TLSvgTextExternalContent\n\t| TLEmbedExternalContent<EmbedDefinition>\n\t| TLTldrawExternalContent\n\t| TLExcalidrawExternalContent\n\n/** @public */\nexport interface TLFileExternalAsset {\n\ttype: 'file'\n\tfile: File\n\tassetId?: TLAssetId\n}\n\n/** @public */\nexport interface TLUrlExternalAsset {\n\ttype: 'url'\n\turl: string\n}\n\n/** @public */\nexport type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist-cjs/lib/hooks/EditorComponentsContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/EditorComponentsContext.tsx"],
-  "sourcesContent": ["import { ComponentType, RefAttributes, createContext, useContext } from 'react'\nimport type { TLCanvasComponentProps } from '../components/default-components/DefaultCanvas'\nimport type { TLErrorFallbackComponent } from '../components/default-components/DefaultErrorFallback'\nimport type { TLGridProps } from '../components/default-components/DefaultGrid'\nimport type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'\nimport type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'\n\n/** @public */\nexport interface TLEditorComponents {\n\tBackground?: ComponentType | null\n\tCanvas?: ComponentType<TLCanvasComponentProps> | null\n\tGrid?: ComponentType<TLGridProps> | null\n\tInFrontOfTheCanvas?: ComponentType | null\n\tLoadingScreen?: ComponentType | null\n\tOnTheCanvas?: ComponentType | null\n\tShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null\n\tSpinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null\n\tSvgDefs?: ComponentType | null\n\n\t// These will always have defaults\n\tErrorFallback?: TLErrorFallbackComponent\n\tShapeErrorFallback?: TLShapeErrorFallbackComponent\n}\n\nexport const EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)\n\n/** @public */\nexport function useEditorComponents() {\n\tconst components = useContext(EditorComponentsContext)\n\tif (!components) {\n\t\tthrow new Error('useEditorComponents must be used inside of <EditorComponentsProvider />')\n\t}\n\treturn components\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwE;AAwBjE,MAAM,8BAA0B,4BAAmD,IAAI;AAGvF,SAAS,sBAAsB;AACrC,QAAM,iBAAa,yBAAW,uBAAuB;AACrD,MAAI,CAAC,YAAY;AAChB,UAAM,IAAI,MAAM,yEAAyE;AAAA,EAC1F;AACA,SAAO;AACR;",
+  "sourcesContent": ["import { ComponentType, RefAttributes, createContext, useContext } from 'react'\nimport type { TLCanvasComponentProps } from '../components/default-components/DefaultCanvas'\nimport type { TLCursorProps } from '../components/default-components/DefaultCursor'\nimport type { TLErrorFallbackComponent } from '../components/default-components/DefaultErrorFallback'\nimport type { TLGridProps } from '../components/default-components/DefaultGrid'\nimport type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'\nimport type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'\n\n/** @public */\nexport interface TLEditorComponents {\n\tBackground?: ComponentType | null\n\tCanvas?: ComponentType<TLCanvasComponentProps> | null\n\tCollaboratorCursor?: ComponentType<TLCursorProps> | null\n\tGrid?: ComponentType<TLGridProps> | null\n\tInFrontOfTheCanvas?: ComponentType | null\n\tLoadingScreen?: ComponentType | null\n\tOnTheCanvas?: ComponentType | null\n\tShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null\n\tSpinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null\n\tSvgDefs?: ComponentType | null\n\n\t// These will always have defaults\n\tErrorFallback?: TLErrorFallbackComponent\n\tShapeErrorFallback?: TLShapeErrorFallbackComponent\n}\n\nexport const EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)\n\n/** @public */\nexport function useEditorComponents() {\n\tconst components = useContext(EditorComponentsContext)\n\tif (!components) {\n\t\tthrow new Error('useEditorComponents must be used inside of <EditorComponentsProvider />')\n\t}\n\treturn components\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwE;AA0BjE,MAAM,8BAA0B,4BAAmD,IAAI;AAGvF,SAAS,sBAAsB;AACrC,QAAM,iBAAa,yBAAW,uBAAuB;AACrD,MAAI,CAAC,YAAY;AAChB,UAAM,IAAI,MAAM,yEAAyE;AAAA,EAC1F;AACA,SAAO;AACR;",
   "names": []
 }

package/dist-cjs/lib/hooks/useCursor.js

@@ -41,6 +41,7 @@ const STATIC_CURSORS = [
   "default",
   "pointer",
   "cross",
+  "comment",
   "move",
   "grab",
   "grabbing",

package/dist-cjs/lib/hooks/useCursor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useCursor.ts"],
-  "sourcesContent": ["import { useQuickReactor } from '@tldraw/state-react'\nimport { TLCursorType } from '@tldraw/tlschema'\nimport { PI, radiansToDegrees } from '../primitives/utils'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nconst CORNER_SVG = `<path d='m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z' fill='%23fff'/><path d='m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z' fill='%23000'/>`\nconst EDGE_SVG = `<path d='m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z' fill='%23fff'/><path d='m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z' fill='%23000'/>`\nconst ROTATE_CORNER_SVG = `<path d=\"M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z\" fill=\"white\"/>`\n\nfunction getCursorCss(\n\tsvg: string,\n\tr: number,\n\ttr: number,\n\tf: boolean,\n\tcolor: string,\n\thotspotX = 16,\n\thotspotY = 16\n) {\n\tconst a = (-tr - r) * (PI / 180)\n\tconst s = Math.sin(a)\n\tconst c = Math.cos(a)\n\tconst dx = 1 * c - 1 * s\n\tconst dy = 1 * s + 1 * c\n\n\treturn (\n\t\t`url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${color};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${\n\t\t\tr + tr\n\t\t} 16 16)${f ? ` scale(-1,-1) translate(0, -32)` : ''}' filter='url(%23shadow)'>` +\n\t\tsvg.replaceAll(`\"`, `'`) +\n\t\t`</g></svg>\") ${hotspotX} ${hotspotY}, pointer`\n\t)\n}\n\nconst STATIC_CURSORS = [\n\t'default',\n\t'pointer',\n\t'cross',\n\t'move',\n\t'grab',\n\t'grabbing',\n\t'text',\n\t'zoom-in',\n\t'zoom-out',\n]\n\ntype CursorFunction = (rotation: number, flip: boolean, color: string) => string\n\nconst CURSORS: Record<TLCursorType, CursorFunction> = {\n\tnone: () => 'none',\n\t'ew-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 0, f, c),\n\t'ns-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 90, f, c),\n\t'nesw-resize': (r, f, c) => getCursorCss(CORNER_SVG, r, 0, f, c),\n\t'nwse-resize': (r, f, c) => getCursorCss(CORNER_SVG, r, 90, f, c),\n\t'nwse-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 0, f, c),\n\t'nesw-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 90, f, c),\n\t'senw-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 180, f, c),\n\t'swne-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 270, f, c),\n}\n\n/** @public */\nexport function getCursor(cursor: TLCursorType, rotation = 0, color = 'black') {\n\treturn CURSORS[cursor](radiansToDegrees(rotation), false, color)\n}\n\nexport function useCursor() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tuseQuickReactor(\n\t\t'useCursor',\n\t\t() => {\n\t\t\tconst { type, rotation } = editor.getInstanceState().cursor\n\n\t\t\tif (STATIC_CURSORS.includes(type)) {\n\t\t\t\tcontainer.style.setProperty('--tl-cursor', `var(--tl-cursor-${type})`)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst { cursor } = editor.getCurrentTheme().colors[editor.getColorMode()]\n\t\t\tcontainer.style.setProperty('--tl-cursor', getCursor(type, rotation, cursor))\n\t\t},\n\t\t[editor, container]\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAgC;AAEhC,mBAAqC;AACrC,0BAA6B;AAC7B,uBAA0B;AAE1B,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,oBAAoB;AAE1B,SAAS,aACR,KACA,GACA,IACA,GACA,OACA,WAAW,IACX,WAAW,IACV;AACD,QAAM,KAAK,CAAC,KAAK,MAAM,kBAAK;AAC5B,QAAM,IAAI,KAAK,IAAI,CAAC;AACpB,QAAM,IAAI,KAAK,IAAI,CAAC;AACpB,QAAM,KAAK,IAAI,IAAI,IAAI;AACvB,QAAM,KAAK,IAAI,IAAI,IAAI;AAEvB,SACC,4HAA4H,KAAK,mIAAmI,EAAE,SAAS,EAAE,6FAChR,IAAI,EACL,UAAU,IAAI,oCAAoC,EAAE,+BACpD,IAAI,WAAW,KAAK,GAAG,IACvB,gBAAgB,QAAQ,IAAI,QAAQ;AAEtC;AAEA,MAAM,iBAAiB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAIA,MAAM,UAAgD;AAAA,EACrD,MAAM,MAAM;AAAA,EACZ,aAAa,CAAC,GAAG,GAAG,MAAM,aAAa,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,EAC3D,aAAa,CAAC,GAAG,GAAG,MAAM,aAAa,UAAU,GAAG,IAAI,GAAG,CAAC;AAAA,EAC5D,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,YAAY,GAAG,GAAG,GAAG,CAAC;AAAA,EAC/D,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,YAAY,GAAG,IAAI,GAAG,CAAC;AAAA,EAChE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,GAAG,GAAG,CAAC;AAAA,EACtE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,IAAI,GAAG,CAAC;AAAA,EACvE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,KAAK,GAAG,CAAC;AAAA,EACxE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,KAAK,GAAG,CAAC;AACzE;AAGO,SAAS,UAAU,QAAsB,WAAW,GAAG,QAAQ,SAAS;AAC9E,SAAO,QAAQ,MAAM,MAAE,+BAAiB,QAAQ,GAAG,OAAO,KAAK;AAChE;AAEO,SAAS,YAAY;AAC3B,QAAM,aAAS,4BAAU;AACzB,QAAM,gBAAY,kCAAa;AAE/B;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,EAAE,MAAM,SAAS,IAAI,OAAO,iBAAiB,EAAE;AAErD,UAAI,eAAe,SAAS,IAAI,GAAG;AAClC,kBAAU,MAAM,YAAY,eAAe,mBAAmB,IAAI,GAAG;AACrE;AAAA,MACD;AAEA,YAAM,EAAE,OAAO,IAAI,OAAO,gBAAgB,EAAE,OAAO,OAAO,aAAa,CAAC;AACxE,gBAAU,MAAM,YAAY,eAAe,UAAU,MAAM,UAAU,MAAM,CAAC;AAAA,IAC7E;AAAA,IACA,CAAC,QAAQ,SAAS;AAAA,EACnB;AACD;",
+  "sourcesContent": ["import { useQuickReactor } from '@tldraw/state-react'\nimport { TLCursorType } from '@tldraw/tlschema'\nimport { PI, radiansToDegrees } from '../primitives/utils'\nimport { useContainer } from './useContainer'\nimport { useEditor } from './useEditor'\n\nconst CORNER_SVG = `<path d='m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z' fill='%23fff'/><path d='m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z' fill='%23000'/>`\nconst EDGE_SVG = `<path d='m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z' fill='%23fff'/><path d='m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z' fill='%23000'/>`\nconst ROTATE_CORNER_SVG = `<path d=\"M22.4789 9.45728L25.9935 12.9942L22.4789 16.5283V14.1032C18.126 14.1502 14.6071 17.6737 14.5675 22.0283H17.05L13.513 25.543L9.97889 22.0283H12.5674C12.6071 16.5691 17.0214 12.1503 22.4789 12.1031L22.4789 9.45728Z\" fill=\"black\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.4789 7.03223L27.4035 12.9945L21.4789 18.9521V15.1868C18.4798 15.6549 16.1113 18.0273 15.649 21.0284H19.475L13.5128 26.953L7.55519 21.0284H11.6189C12.1243 15.8155 16.2679 11.6677 21.4789 11.1559L21.4789 7.03223ZM22.4789 12.1031C17.0214 12.1503 12.6071 16.5691 12.5674 22.0284H9.97889L13.513 25.543L17.05 22.0284H14.5675C14.5705 21.6896 14.5947 21.3558 14.6386 21.0284C15.1157 17.4741 17.9266 14.6592 21.4789 14.1761C21.8063 14.1316 22.1401 14.1069 22.4789 14.1032V16.5284L25.9935 12.9942L22.4789 9.45729L22.4789 12.1031Z\" fill=\"white\"/>`\n\nfunction getCursorCss(\n\tsvg: string,\n\tr: number,\n\ttr: number,\n\tf: boolean,\n\tcolor: string,\n\thotspotX = 16,\n\thotspotY = 16\n) {\n\tconst a = (-tr - r) * (PI / 180)\n\tconst s = Math.sin(a)\n\tconst c = Math.cos(a)\n\tconst dx = 1 * c - 1 * s\n\tconst dy = 1 * s + 1 * c\n\n\treturn (\n\t\t`url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${color};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${\n\t\t\tr + tr\n\t\t} 16 16)${f ? ` scale(-1,-1) translate(0, -32)` : ''}' filter='url(%23shadow)'>` +\n\t\tsvg.replaceAll(`\"`, `'`) +\n\t\t`</g></svg>\") ${hotspotX} ${hotspotY}, pointer`\n\t)\n}\n\nconst STATIC_CURSORS = [\n\t'default',\n\t'pointer',\n\t'cross',\n\t'comment',\n\t'move',\n\t'grab',\n\t'grabbing',\n\t'text',\n\t'zoom-in',\n\t'zoom-out',\n]\n\ntype CursorFunction = (rotation: number, flip: boolean, color: string) => string\n\nconst CURSORS: Record<TLCursorType, CursorFunction> = {\n\tnone: () => 'none',\n\t'ew-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 0, f, c),\n\t'ns-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 90, f, c),\n\t'nesw-resize': (r, f, c) => getCursorCss(CORNER_SVG, r, 0, f, c),\n\t'nwse-resize': (r, f, c) => getCursorCss(CORNER_SVG, r, 90, f, c),\n\t'nwse-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 0, f, c),\n\t'nesw-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 90, f, c),\n\t'senw-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 180, f, c),\n\t'swne-rotate': (r, f, c) => getCursorCss(ROTATE_CORNER_SVG, r, 270, f, c),\n}\n\n/** @public */\nexport function getCursor(cursor: TLCursorType, rotation = 0, color = 'black') {\n\treturn CURSORS[cursor](radiansToDegrees(rotation), false, color)\n}\n\nexport function useCursor() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\n\tuseQuickReactor(\n\t\t'useCursor',\n\t\t() => {\n\t\t\tconst { type, rotation } = editor.getInstanceState().cursor\n\n\t\t\tif (STATIC_CURSORS.includes(type)) {\n\t\t\t\tcontainer.style.setProperty('--tl-cursor', `var(--tl-cursor-${type})`)\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst { cursor } = editor.getCurrentTheme().colors[editor.getColorMode()]\n\t\t\tcontainer.style.setProperty('--tl-cursor', getCursor(type, rotation, cursor))\n\t\t},\n\t\t[editor, container]\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAgC;AAEhC,mBAAqC;AACrC,0BAA6B;AAC7B,uBAA0B;AAE1B,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,oBAAoB;AAE1B,SAAS,aACR,KACA,GACA,IACA,GACA,OACA,WAAW,IACX,WAAW,IACV;AACD,QAAM,KAAK,CAAC,KAAK,MAAM,kBAAK;AAC5B,QAAM,IAAI,KAAK,IAAI,CAAC;AACpB,QAAM,IAAI,KAAK,IAAI,CAAC;AACpB,QAAM,KAAK,IAAI,IAAI,IAAI;AACvB,QAAM,KAAK,IAAI,IAAI,IAAI;AAEvB,SACC,4HAA4H,KAAK,mIAAmI,EAAE,SAAS,EAAE,6FAChR,IAAI,EACL,UAAU,IAAI,oCAAoC,EAAE,+BACpD,IAAI,WAAW,KAAK,GAAG,IACvB,gBAAgB,QAAQ,IAAI,QAAQ;AAEtC;AAEA,MAAM,iBAAiB;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;AAIA,MAAM,UAAgD;AAAA,EACrD,MAAM,MAAM;AAAA,EACZ,aAAa,CAAC,GAAG,GAAG,MAAM,aAAa,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,EAC3D,aAAa,CAAC,GAAG,GAAG,MAAM,aAAa,UAAU,GAAG,IAAI,GAAG,CAAC;AAAA,EAC5D,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,YAAY,GAAG,GAAG,GAAG,CAAC;AAAA,EAC/D,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,YAAY,GAAG,IAAI,GAAG,CAAC;AAAA,EAChE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,GAAG,GAAG,CAAC;AAAA,EACtE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,IAAI,GAAG,CAAC;AAAA,EACvE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,KAAK,GAAG,CAAC;AAAA,EACxE,eAAe,CAAC,GAAG,GAAG,MAAM,aAAa,mBAAmB,GAAG,KAAK,GAAG,CAAC;AACzE;AAGO,SAAS,UAAU,QAAsB,WAAW,GAAG,QAAQ,SAAS;AAC9E,SAAO,QAAQ,MAAM,MAAE,+BAAiB,QAAQ,GAAG,OAAO,KAAK;AAChE;AAEO,SAAS,YAAY;AAC3B,QAAM,aAAS,4BAAU;AACzB,QAAM,gBAAY,kCAAa;AAE/B;AAAA,IACC;AAAA,IACA,MAAM;AACL,YAAM,EAAE,MAAM,SAAS,IAAI,OAAO,iBAAiB,EAAE;AAErD,UAAI,eAAe,SAAS,IAAI,GAAG;AAClC,kBAAU,MAAM,YAAY,eAAe,mBAAmB,IAAI,GAAG;AACrE;AAAA,MACD;AAEA,YAAM,EAAE,OAAO,IAAI,OAAO,gBAAgB,EAAE,OAAO,OAAO,aAAa,CAAC;AACxE,gBAAU,MAAM,YAAY,eAAe,UAAU,MAAM,UAAU,MAAM,CAAC;AAAA,IAC7E;AAAA,IACA,CAAC,QAAQ,SAAS;AAAA,EACnB;AACD;",
   "names": []
 }

package/dist-cjs/lib/hooks/useEditorComponents.js

@@ -26,6 +26,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_DefaultBackground = require("../components/default-components/DefaultBackground");
 var import_DefaultCanvas = require("../components/default-components/DefaultCanvas");
+var import_DefaultCursor = require("../components/default-components/DefaultCursor");
 var import_DefaultErrorFallback = require("../components/default-components/DefaultErrorFallback");
 var import_DefaultGrid = require("../components/default-components/DefaultGrid");
 var import_DefaultLoadingScreen = require("../components/default-components/DefaultLoadingScreen");
@@ -45,6 +46,7 @@ function EditorComponentsProvider({
     () => ({
       Background: import_DefaultBackground.DefaultBackground,
       Canvas: import_DefaultCanvas.DefaultCanvas,
+      CollaboratorCursor: import_DefaultCursor.DefaultCursor,
       Grid: import_DefaultGrid.DefaultGrid,
       InFrontOfTheCanvas: null,
       LoadingScreen: import_DefaultLoadingScreen.DefaultLoadingScreen,

package/dist-cjs/lib/hooks/useEditorComponents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/useEditorComponents.tsx"],
-  "sourcesContent": ["import { ReactNode, useMemo } from 'react'\nimport { DefaultBackground } from '../components/default-components/DefaultBackground'\nimport { DefaultCanvas } from '../components/default-components/DefaultCanvas'\nimport { DefaultErrorFallback } from '../components/default-components/DefaultErrorFallback'\nimport { DefaultGrid } from '../components/default-components/DefaultGrid'\nimport { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'\nimport { DefaultShapeErrorFallback } from '../components/default-components/DefaultShapeErrorFallback'\nimport { DefaultShapeWrapper } from '../components/default-components/DefaultShapeWrapper'\nimport { DefaultSpinner } from '../components/default-components/DefaultSpinner'\nimport { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'\nimport { EditorComponentsContext } from './EditorComponentsContext'\nimport type { TLEditorComponents } from './EditorComponentsContext'\nimport { useShallowObjectIdentity } from './useIdentity'\n\nexport { useEditorComponents } from './EditorComponentsContext'\nexport type { TLEditorComponents } from './EditorComponentsContext'\n\ninterface ComponentsContextProviderProps {\n\toverrides?: TLEditorComponents\n\tchildren: ReactNode\n}\n\nexport function EditorComponentsProvider({\n\toverrides = {},\n\tchildren,\n}: ComponentsContextProviderProps) {\n\tconst _overrides = useShallowObjectIdentity(overrides)\n\tconst value = useMemo(\n\t\t(): Required<TLEditorComponents> => ({\n\t\t\tBackground: DefaultBackground,\n\t\t\tCanvas: DefaultCanvas,\n\t\t\tGrid: DefaultGrid,\n\t\t\tInFrontOfTheCanvas: null,\n\t\t\tLoadingScreen: DefaultLoadingScreen,\n\t\t\tOnTheCanvas: null,\n\t\t\tShapeWrapper: DefaultShapeWrapper,\n\t\t\tSpinner: DefaultSpinner,\n\t\t\tSvgDefs: DefaultSvgDefs,\n\n\t\t\tErrorFallback: DefaultErrorFallback,\n\t\t\tShapeErrorFallback: DefaultShapeErrorFallback,\n\n\t\t\t..._overrides,\n\t\t}),\n\t\t[_overrides]\n\t)\n\n\treturn (\n\t\t<EditorComponentsContext.Provider value={value}>{children}</EditorComponentsContext.Provider>\n\t)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDE;AAhDF,mBAAmC;AACnC,+BAAkC;AAClC,2BAA8B;AAC9B,kCAAqC;AACrC,yBAA4B;AAC5B,kCAAqC;AACrC,uCAA0C;AAC1C,iCAAoC;AACpC,4BAA+B;AAC/B,4BAA+B;AAC/B,qCAAwC;AAExC,yBAAyC;AAEzC,IAAAA,kCAAoC;AAQ7B,SAAS,yBAAyB;AAAA,EACxC,YAAY,CAAC;AAAA,EACb;AACD,GAAmC;AAClC,QAAM,iBAAa,6CAAyB,SAAS;AACrD,QAAM,YAAQ;AAAA,IACb,OAAqC;AAAA,MACpC,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,SAAS;AAAA,MAET,eAAe;AAAA,MACf,oBAAoB;AAAA,MAEpB,GAAG;AAAA,IACJ;AAAA,IACA,CAAC,UAAU;AAAA,EACZ;AAEA,SACC,4CAAC,uDAAwB,UAAxB,EAAiC,OAAe,UAAS;AAE5D;",
+  "sourcesContent": ["import { ReactNode, useMemo } from 'react'\nimport { DefaultBackground } from '../components/default-components/DefaultBackground'\nimport { DefaultCanvas } from '../components/default-components/DefaultCanvas'\nimport { DefaultCursor } from '../components/default-components/DefaultCursor'\nimport { DefaultErrorFallback } from '../components/default-components/DefaultErrorFallback'\nimport { DefaultGrid } from '../components/default-components/DefaultGrid'\nimport { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'\nimport { DefaultShapeErrorFallback } from '../components/default-components/DefaultShapeErrorFallback'\nimport { DefaultShapeWrapper } from '../components/default-components/DefaultShapeWrapper'\nimport { DefaultSpinner } from '../components/default-components/DefaultSpinner'\nimport { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'\nimport { EditorComponentsContext } from './EditorComponentsContext'\nimport type { TLEditorComponents } from './EditorComponentsContext'\nimport { useShallowObjectIdentity } from './useIdentity'\n\nexport { useEditorComponents } from './EditorComponentsContext'\nexport type { TLEditorComponents } from './EditorComponentsContext'\n\ninterface ComponentsContextProviderProps {\n\toverrides?: TLEditorComponents\n\tchildren: ReactNode\n}\n\nexport function EditorComponentsProvider({\n\toverrides = {},\n\tchildren,\n}: ComponentsContextProviderProps) {\n\tconst _overrides = useShallowObjectIdentity(overrides)\n\tconst value = useMemo(\n\t\t(): Required<TLEditorComponents> => ({\n\t\t\tBackground: DefaultBackground,\n\t\t\tCanvas: DefaultCanvas,\n\t\t\tCollaboratorCursor: DefaultCursor,\n\t\t\tGrid: DefaultGrid,\n\t\t\tInFrontOfTheCanvas: null,\n\t\t\tLoadingScreen: DefaultLoadingScreen,\n\t\t\tOnTheCanvas: null,\n\t\t\tShapeWrapper: DefaultShapeWrapper,\n\t\t\tSpinner: DefaultSpinner,\n\t\t\tSvgDefs: DefaultSvgDefs,\n\n\t\t\tErrorFallback: DefaultErrorFallback,\n\t\t\tShapeErrorFallback: DefaultShapeErrorFallback,\n\n\t\t\t..._overrides,\n\t\t}),\n\t\t[_overrides]\n\t)\n\n\treturn (\n\t\t<EditorComponentsContext.Provider value={value}>{children}</EditorComponentsContext.Provider>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDE;AAlDF,mBAAmC;AACnC,+BAAkC;AAClC,2BAA8B;AAC9B,2BAA8B;AAC9B,kCAAqC;AACrC,yBAA4B;AAC5B,kCAAqC;AACrC,uCAA0C;AAC1C,iCAAoC;AACpC,4BAA+B;AAC/B,4BAA+B;AAC/B,qCAAwC;AAExC,yBAAyC;AAEzC,IAAAA,kCAAoC;AAQ7B,SAAS,yBAAyB;AAAA,EACxC,YAAY,CAAC;AAAA,EACb;AACD,GAAmC;AAClC,QAAM,iBAAa,6CAAyB,SAAS;AACrD,QAAM,YAAQ;AAAA,IACb,OAAqC;AAAA,MACpC,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,oBAAoB;AAAA,MACpB,MAAM;AAAA,MACN,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,MACT,SAAS;AAAA,MAET,eAAe;AAAA,MACf,oBAAoB;AAAA,MAEpB,GAAG;AAAA,IACJ;AAAA,IACA,CAAC,UAAU;AAAA,EACZ;AAEA,SACC,4CAAC,uDAAwB,UAAxB,EAAiC,OAAe,UAAS;AAE5D;",
   "names": ["import_EditorComponentsContext"]
 }

package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js

@@ -25,31 +25,62 @@ var import_react = require("react");
 var import_dom = require("../utils/dom");
 var import_useContainer = require("./useContainer");
 var import_useEditor = require("./useEditor");
+var import_useEvent = require("./useEvent");
+function isScrollableOverflow(overflow) {
+  return overflow === "auto" || overflow === "scroll" || overflow === "overlay";
+}
+function isScrollable(elm) {
+  const overflowsY = elm.scrollHeight > elm.clientHeight;
+  const overflowsX = elm.scrollWidth > elm.clientWidth;
+  if (!overflowsY && !overflowsX) return false;
+  const style = getComputedStyle(elm);
+  return overflowsY && isScrollableOverflow(style.overflowY) || overflowsX && isScrollableOverflow(style.overflowX);
+}
+function hasScrollableElement(target, root) {
+  if (!(target instanceof Node)) {
+    return isScrollable(root);
+  }
+  let elm = target instanceof Element ? target : target.parentElement;
+  while (elm) {
+    if (elm instanceof HTMLElement && isScrollable(elm)) {
+      return true;
+    }
+    if (elm === root) return false;
+    elm = elm.parentElement;
+  }
+  return false;
+}
 function usePassThroughWheelEvents(ref) {
   if (!ref) throw Error("usePassThroughWheelEvents must be passed a ref");
   const container = (0, import_useContainer.useContainer)();
   const editor = (0, import_useEditor.useMaybeEditor)();
-  (0, import_react.useEffect)(() => {
-    function onWheel(e) {
-      if (!editor?.getInstanceState().isFocused) return;
-      if (e.isSpecialRedispatchedEvent) return;
-      const elm2 = ref.current;
-      if (elm2 && elm2.scrollHeight > elm2.clientHeight) {
-        return;
-      }
-      (0, import_dom.preventDefault)(e);
-      const cvs = container.querySelector(".tl-canvas");
-      if (!cvs) return;
-      const newEvent = new WheelEvent("wheel", e);
-      newEvent.isSpecialRedispatchedEvent = true;
-      cvs.dispatchEvent(newEvent);
+  const onWheel = (0, import_useEvent.useEvent)((e) => {
+    if (!editor?.getInstanceState().isFocused) return;
+    if (e.isSpecialRedispatchedEvent) return;
+    const elm = ref.current;
+    if (elm && hasScrollableElement(e.target, elm)) {
+      return;
     }
+    (0, import_dom.preventDefault)(e);
+    const cvs = container.querySelector(".tl-canvas");
+    if (!cvs) return;
+    const newEvent = new WheelEvent("wheel", e);
+    newEvent.isSpecialRedispatchedEvent = true;
+    cvs.dispatchEvent(newEvent);
+  });
+  const attached = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
     const elm = ref.current;
-    if (!elm) return;
-    elm.addEventListener("wheel", onWheel, { passive: false });
+    if (elm === attached.current) return;
+    attached.current?.removeEventListener("wheel", onWheel);
+    attached.current = elm;
+    elm?.addEventListener("wheel", onWheel, { passive: false });
+  });
+  (0, import_react.useEffect)(() => {
     return () => {
-      elm.removeEventListener("wheel", onWheel);
+      attached.current?.removeEventListener("wheel", onWheel);
+      attached.current = null;
     };
-  }, [container, editor, ref]);
+  }, [onWheel]);
 }
 //# sourceMappingURL=usePassThroughWheelEvents.js.map

package/dist-cjs/lib/hooks/usePassThroughWheelEvents.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/hooks/usePassThroughWheelEvents.ts"],
-  "sourcesContent": ["import { RefObject, useEffect } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tuseEffect(() => {\n\t\tfunction onWheel(e: WheelEvent) {\n\t\t\t// Only pass through wheel events if the editor is focused\n\t\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t\t// if the element is scrollable, don't redispatch the event\n\t\t\tconst elm = ref.current\n\t\t\tif (elm && elm.scrollHeight > elm.clientHeight) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tpreventDefault(e)\n\t\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\t\tif (!cvs) return\n\t\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\t\tcvs.dispatchEvent(newEvent)\n\t\t}\n\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\n\t\telm.addEventListener('wheel', onWheel, { passive: false })\n\t\treturn () => {\n\t\t\telm.removeEventListener('wheel', onWheel)\n\t\t}\n\t}, [container, editor, ref])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AACrC,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAGxB,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,8BAAU,MAAM;AACf,aAAS,QAAQ,GAAe;AAE/B,UAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,UAAK,EAAU,2BAA4B;AAG3C,YAAMA,OAAM,IAAI;AAChB,UAAIA,QAAOA,KAAI,eAAeA,KAAI,cAAc;AAC/C;AAAA,MACD;AAEA,qCAAe,CAAC;AAChB,YAAM,MAAM,UAAU,cAAc,YAAY;AAChD,UAAI,CAAC,IAAK;AACV,YAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,MAAC,SAAiB,6BAA6B;AAChD,UAAI,cAAc,QAAQ;AAAA,IAC3B;AAEA,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AAEV,QAAI,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AACzD,WAAO,MAAM;AACZ,UAAI,oBAAoB,SAAS,OAAO;AAAA,IACzC;AAAA,EACD,GAAG,CAAC,WAAW,QAAQ,GAAG,CAAC;AAC5B;",
-  "names": ["elm"]
+  "sourcesContent": ["import { RefObject, useEffect, useRef } from 'react'\nimport { preventDefault } from '../utils/dom'\nimport { useContainer } from './useContainer'\nimport { useMaybeEditor } from './useEditor'\nimport { useEvent } from './useEvent'\n\nfunction isScrollableOverflow(overflow: string) {\n\treturn overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay'\n}\n\n// An element only consumes a wheel event when it's a real scroll container: its content overflows\n// AND its computed overflow is scrollable. Checking scrollHeight/scrollWidth alone is not enough \u2014\n// an `overflow: visible` element whose content merely overflows (e.g. a comment pin whose hover\n// `transform: scale()` inflates scrollHeight past clientHeight) never scrolls, so the wheel must\n// still pass through to the canvas.\nfunction isScrollable(elm: HTMLElement) {\n\t// Cheap first: if nothing overflows, it can't scroll \u2014 skip the getComputedStyle read. This runs\n\t// per ancestor on every wheel event, so avoid resolving styles for the common (non-overflowing) case.\n\tconst overflowsY = elm.scrollHeight > elm.clientHeight\n\tconst overflowsX = elm.scrollWidth > elm.clientWidth\n\tif (!overflowsY && !overflowsX) return false\n\n\tconst style = getComputedStyle(elm)\n\treturn (\n\t\t(overflowsY && isScrollableOverflow(style.overflowY)) ||\n\t\t(overflowsX && isScrollableOverflow(style.overflowX))\n\t)\n}\n\n// Walk from the wheeled element up to (and including) the pass-through root, looking for a scroll\n// container. If one is found, the wheel belongs to it \u2014 don't redispatch it to the canvas.\nfunction hasScrollableElement(target: EventTarget | null, root: HTMLElement) {\n\tif (!(target instanceof Node)) {\n\t\treturn isScrollable(root)\n\t}\n\n\tlet elm: Element | null = target instanceof Element ? target : target.parentElement\n\twhile (elm) {\n\t\tif (elm instanceof HTMLElement && isScrollable(elm)) {\n\t\t\treturn true\n\t\t}\n\t\tif (elm === root) return false\n\t\telm = elm.parentElement\n\t}\n\n\treturn false\n}\n\n/** @public */\nexport function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {\n\tif (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')\n\tconst container = useContainer()\n\tconst editor = useMaybeEditor()\n\n\tconst onWheel = useEvent((e: WheelEvent) => {\n\t\t// Only pass through wheel events if the editor is focused\n\t\tif (!editor?.getInstanceState().isFocused) return\n\n\t\tif ((e as any).isSpecialRedispatchedEvent) return\n\n\t\t// If the wheel is over a scrollable element, let it scroll instead of redispatching.\n\t\tconst elm = ref.current\n\t\tif (elm && hasScrollableElement(e.target, elm)) {\n\t\t\treturn\n\t\t}\n\n\t\tpreventDefault(e)\n\t\tconst cvs = container.querySelector('.tl-canvas')\n\t\tif (!cvs) return\n\t\tconst newEvent = new WheelEvent('wheel', e as any)\n\t\t;(newEvent as any).isSpecialRedispatchedEvent = true\n\t\tcvs.dispatchEvent(newEvent)\n\t})\n\n\t// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`\n\t// gives no notification when its element changes.\n\tconst attached = useRef<HTMLElement | null>(null)\n\n\t// Deliberately no dependency array \u2014 this re-checks the ref after every render of the component\n\t// that owns it, and re-attaches when the element has been swapped. A component that keeps the\n\t// hook mounted while unmounting and remounting the element it points at (a comment pin culled\n\t// while its anchor is off screen, say) would otherwise leave the listener on the discarded node\n\t// and silently lose pass-through once the element comes back.\n\tuseEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (elm === attached.current) return\n\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\tattached.current = elm\n\t\telm?.addEventListener('wheel', onWheel, { passive: false })\n\t})\n\n\t// Teardown is its own effect so the re-attach check above can skip returning a cleanup that\n\t// would tear the listener down and rebuild it on every render.\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tattached.current?.removeEventListener('wheel', onWheel)\n\t\t\tattached.current = null\n\t\t}\n\t}, [onWheel])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;AAC7C,iBAA+B;AAC/B,0BAA6B;AAC7B,uBAA+B;AAC/B,sBAAyB;AAEzB,SAAS,qBAAqB,UAAkB;AAC/C,SAAO,aAAa,UAAU,aAAa,YAAY,aAAa;AACrE;AAOA,SAAS,aAAa,KAAkB;AAGvC,QAAM,aAAa,IAAI,eAAe,IAAI;AAC1C,QAAM,aAAa,IAAI,cAAc,IAAI;AACzC,MAAI,CAAC,cAAc,CAAC,WAAY,QAAO;AAEvC,QAAM,QAAQ,iBAAiB,GAAG;AAClC,SACE,cAAc,qBAAqB,MAAM,SAAS,KAClD,cAAc,qBAAqB,MAAM,SAAS;AAErD;AAIA,SAAS,qBAAqB,QAA4B,MAAmB;AAC5E,MAAI,EAAE,kBAAkB,OAAO;AAC9B,WAAO,aAAa,IAAI;AAAA,EACzB;AAEA,MAAI,MAAsB,kBAAkB,UAAU,SAAS,OAAO;AACtE,SAAO,KAAK;AACX,QAAI,eAAe,eAAe,aAAa,GAAG,GAAG;AACpD,aAAO;AAAA,IACR;AACA,QAAI,QAAQ,KAAM,QAAO;AACzB,UAAM,IAAI;AAAA,EACX;AAEA,SAAO;AACR;AAGO,SAAS,0BAA0B,KAAoC;AAC7E,MAAI,CAAC,IAAK,OAAM,MAAM,gDAAgD;AACtE,QAAM,gBAAY,kCAAa;AAC/B,QAAM,aAAS,iCAAe;AAE9B,QAAM,cAAU,0BAAS,CAAC,MAAkB;AAE3C,QAAI,CAAC,QAAQ,iBAAiB,EAAE,UAAW;AAE3C,QAAK,EAAU,2BAA4B;AAG3C,UAAM,MAAM,IAAI;AAChB,QAAI,OAAO,qBAAqB,EAAE,QAAQ,GAAG,GAAG;AAC/C;AAAA,IACD;AAEA,mCAAe,CAAC;AAChB,UAAM,MAAM,UAAU,cAAc,YAAY;AAChD,QAAI,CAAC,IAAK;AACV,UAAM,WAAW,IAAI,WAAW,SAAS,CAAQ;AAChD,IAAC,SAAiB,6BAA6B;AAChD,QAAI,cAAc,QAAQ;AAAA,EAC3B,CAAC;AAID,QAAM,eAAW,qBAA2B,IAAI;AAOhD,8BAAU,MAAM;AACf,UAAM,MAAM,IAAI;AAChB,QAAI,QAAQ,SAAS,QAAS;AAC9B,aAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,aAAS,UAAU;AACnB,SAAK,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,CAAC;AAAA,EAC3D,CAAC;AAID,8BAAU,MAAM;AACf,WAAO,MAAM;AACZ,eAAS,SAAS,oBAAoB,SAAS,OAAO;AACtD,eAAS,UAAU;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,OAAO,CAAC;AACb;",
+  "names": []
 }

package/dist-cjs/lib/hooks/useTransform.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useTransform_exports = {};
+__export(useTransform_exports, {
+  useTransform: () => useTransform
+});
+module.exports = __toCommonJS(useTransform_exports);
+var import_react = require("react");
+function useTransform(ref, x, y, scale, rotate, additionalOffset) {
+  const additionalOffsetX = additionalOffset?.x;
+  const additionalOffsetY = additionalOffset?.y;
+  (0, import_react.useLayoutEffect)(() => {
+    const elm = ref.current;
+    if (!elm) return;
+    if (x === void 0) return;
+    let trans = `translate(${x}px, ${y}px)`;
+    if (scale !== void 0) {
+      trans += ` scale(${scale})`;
+    }
+    if (rotate !== void 0) {
+      trans += ` rotate(${rotate}rad)`;
+    }
+    if (additionalOffsetX !== void 0 && additionalOffsetY !== void 0) {
+      trans += ` translate(${additionalOffsetX}px, ${additionalOffsetY}px)`;
+    }
+    elm.style.transform = trans;
+  }, [additionalOffsetX, additionalOffsetY, ref, rotate, scale, x, y]);
+}
+//# sourceMappingURL=useTransform.js.map

package/dist-cjs/lib/hooks/useTransform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/hooks/useTransform.ts"],
+  "sourcesContent": ["import { useLayoutEffect } from 'react'\nimport { VecLike } from '../primitives/Vec'\n\n/**\n * Position an element by writing its `transform` directly, outside React's render output \u2014 the\n * cheap path for elements that move at pointer/presence frequency.\n * @public\n */\nexport function useTransform(\n\tref: React.RefObject<HTMLElement | SVGElement | null>,\n\tx?: number,\n\ty?: number,\n\tscale?: number,\n\trotate?: number,\n\tadditionalOffset?: VecLike\n) {\n\t// Read the offset into primitives so the effect can depend on them, not the object identity.\n\tconst additionalOffsetX = additionalOffset?.x\n\tconst additionalOffsetY = additionalOffset?.y\n\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\t\tif (x === undefined) return\n\n\t\tlet trans = `translate(${x}px, ${y}px)`\n\t\tif (scale !== undefined) {\n\t\t\ttrans += ` scale(${scale})`\n\t\t}\n\t\tif (rotate !== undefined) {\n\t\t\ttrans += ` rotate(${rotate}rad)`\n\t\t}\n\t\tif (additionalOffsetX !== undefined && additionalOffsetY !== undefined) {\n\t\t\ttrans += ` translate(${additionalOffsetX}px, ${additionalOffsetY}px)`\n\t\t}\n\t\telm.style.transform = trans\n\t}, [additionalOffsetX, additionalOffsetY, ref, rotate, scale, x, y])\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAQzB,SAAS,aACf,KACA,GACA,GACA,OACA,QACA,kBACC;AAED,QAAM,oBAAoB,kBAAkB;AAC5C,QAAM,oBAAoB,kBAAkB;AAE5C,oCAAgB,MAAM;AACrB,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,OAAW;AAErB,QAAI,QAAQ,aAAa,CAAC,OAAO,CAAC;AAClC,QAAI,UAAU,QAAW;AACxB,eAAS,UAAU,KAAK;AAAA,IACzB;AACA,QAAI,WAAW,QAAW;AACzB,eAAS,WAAW,MAAM;AAAA,IAC3B;AACA,QAAI,sBAAsB,UAAa,sBAAsB,QAAW;AACvE,eAAS,cAAc,iBAAiB,OAAO,iBAAiB;AAAA,IACjE;AACA,QAAI,MAAM,YAAY;AAAA,EACvB,GAAG,CAAC,mBAAmB,mBAAmB,KAAK,QAAQ,OAAO,GAAG,CAAC,CAAC;AACpE;",
+  "names": []
+}

package/dist-cjs/lib/license/LicenseManager.js

@@ -21,6 +21,7 @@ __export(LicenseManager_exports, {
   FLAGS: () => FLAGS,
   LicenseManager: () => LicenseManager,
   PROPERTIES: () => PROPERTIES,
+  getEnabledFeatures: () => getEnabledFeatures,
   getLicenseState: () => getLicenseState
 });
 module.exports = __toCommonJS(LicenseManager_exports);
@@ -44,7 +45,12 @@ const FLAGS = {
   EVALUATION_LICENSE: 1 << 4,
   // Native means the license is for native apps which switches
   // on special-case logic.
-  NATIVE_LICENSE: 1 << 5
+  NATIVE_LICENSE: 1 << 5,
+  // -- FEATURE FLAGS --
+  // Collaboration is the umbrella flag for collaboration features; it grants all sub-features.
+  FEAT_COLLABORATION: 1 << 6,
+  // Commenting is the first sub-feature of collaboration.
+  FEAT_COMMENTING: 1 << 7
 };
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS));
 const PROPERTIES = {
@@ -56,18 +62,32 @@ const PROPERTIES = {
 const NUMBER_OF_KNOWN_PROPERTIES = Object.keys(PROPERTIES).length;
 const LICENSE_EMAIL = "sales@tldraw.com";
 const WATERMARK_TRACK_SRC = `${(0, import_assets.getDefaultCdnBaseUrl)()}/watermarks/watermark-track.svg`;
+const NO_FEATURES = {
+  collaboration: false,
+  commenting: false
+};
+const ALL_FEATURES = {
+  collaboration: true,
+  commenting: true
+};
 class LicenseManager {
   publicKey = "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEHJh0uUfxHtCGyerXmmatE368Hd9rI6LH9oPDQihnaCryRFWEVeOvf9U/SPbyxX74LFyJs5tYeAHq5Nc0Ax25LQ";
   isDevelopment;
   isTest;
   isCryptoAvailable;
   state = (0, import_state.atom)("license state", "pending");
+  featureFlags = (0, import_state.atom)("license feature flags", {
+    ...NO_FEATURES
+  });
   verbose = true;
   constructor(licenseKey, testPublicKey) {
     this.isTest = process.env.NODE_ENV === "test";
     this.isDevelopment = this.getIsDevelopment();
     this.publicKey = testPublicKey || this.publicKey;
     this.isCryptoAvailable = !!crypto.subtle;
+    if (this.isDevelopment) {
+      this.featureFlags.set({ ...ALL_FEATURES });
+    }
     this.getLicenseFromKey(licenseKey).then((result) => {
       const licenseState = getLicenseState(
         result,
@@ -75,12 +95,22 @@ class LicenseManager {
         this.isDevelopment
       );
       this.maybeTrack(result, licenseState);
-      this.state.set(licenseState);
+      (0, import_state.transact)(() => {
+        this.state.set(licenseState);
+        this.featureFlags.set(getEnabledFeatures(result, licenseState, this.isDevelopment));
+      });
     }).catch((error) => {
       console.error("License validation failed:", error);
       this.state.set("unlicensed");
     });
   }
+  /**
+   * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
+   * recomputes when license validation resolves.
+   */
+  isFeatureEnabled(feature) {
+    return this.featureFlags.get()[feature];
+  }
   getIsDevelopment() {
     return !["https:", "vscode-webview:"].includes(window.location.protocol) || this.isLoopbackHost(window.location.hostname) || process.env.NODE_ENV !== "production";
   }
@@ -195,6 +225,8 @@ class LicenseManager {
       const isEvaluationLicense = this.isFlagEnabled(licenseInfo.flags, FLAGS.EVALUATION_LICENSE);
       const isAnnualLicenseExpired = isAnnualLicense && this.isAnnualLicenseExpired(expiryDate);
       const isPerpetualLicenseExpired = isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate);
+      const isCollaborationEnabled = this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COLLABORATION);
+      const isCommentingEnabled = isCollaborationEnabled || this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COMMENTING);
       const daysSinceExpiry = isPerpetualLicense && !isPerpetualLicenseExpired ? 0 : this.getDaysSinceExpiry(expiryDate);
       const result = {
         license: licenseInfo,
@@ -211,6 +243,8 @@ class LicenseManager {
         isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK),
         isEvaluationLicense,
         isEvaluationLicenseExpired: isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+        isCollaborationEnabled,
+        isCommentingEnabled,
         daysSinceExpiry
       };
       this.outputLicenseInfoIfNeeded(result);
@@ -336,6 +370,21 @@ class LicenseManager {
   }
   static className = "tl-watermark_SEE-LICENSE";
 }
+function getEnabledFeatures(result, licenseState, isDevelopment) {
+  if (isDevelopment) {
+    return { ...ALL_FEATURES };
+  }
+  if (!result.isLicenseParseable || licenseState !== "licensed" && licenseState !== "licensed-with-watermark") {
+    return { ...NO_FEATURES };
+  }
+  if (result.isEvaluationLicense) {
+    return { ...ALL_FEATURES };
+  }
+  return {
+    collaboration: result.isCollaborationEnabled,
+    commenting: result.isCommentingEnabled
+  };
+}
 function getLicenseState(result, outputMessages, isDevelopment) {
   if (!result.isLicenseParseable) {
     if (isDevelopment) {