@tldraw/editor 3.15.0-canary.36a2aff82b67 → 3.15.0-canary.3aa231f41374

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist-cjs/index.d.ts +2 -2
  2. package/dist-cjs/index.js +1 -1
  3. package/dist-cjs/lib/components/default-components/DefaultSpinner.js +27 -15
  4. package/dist-cjs/lib/components/default-components/DefaultSpinner.js.map +3 -3
  5. package/dist-cjs/lib/hooks/useEditorComponents.js.map +1 -1
  6. package/dist-cjs/lib/license/Watermark.js +2 -2
  7. package/dist-cjs/lib/license/Watermark.js.map +2 -2
  8. package/dist-cjs/version.js +3 -3
  9. package/dist-cjs/version.js.map +1 -1
  10. package/dist-esm/index.d.mts +2 -2
  11. package/dist-esm/index.mjs +1 -1
  12. package/dist-esm/lib/components/default-components/DefaultSpinner.mjs +17 -15
  13. package/dist-esm/lib/components/default-components/DefaultSpinner.mjs.map +2 -2
  14. package/dist-esm/lib/hooks/useEditorComponents.mjs.map +1 -1
  15. package/dist-esm/lib/license/Watermark.mjs +2 -2
  16. package/dist-esm/lib/license/Watermark.mjs.map +2 -2
  17. package/dist-esm/version.mjs +3 -3
  18. package/dist-esm/version.mjs.map +1 -1
  19. package/editor.css +15 -2
  20. package/package.json +9 -8
  21. package/src/lib/components/default-components/DefaultSpinner.tsx +12 -12
  22. package/src/lib/hooks/useEditorComponents.tsx +1 -1
  23. package/src/lib/license/Watermark.tsx +2 -2
  24. package/src/version.ts +3 -3
package/dist-cjs/index.d.ts CHANGED
@@ -821,7 +821,7 @@ export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicat
821
821
  export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX_2.Element;
822
822
 
823
823
  /** @public @react */
824
- export declare function DefaultSpinner(): JSX_2.Element;
824
+ export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX_2.Element;
825
825
 
826
826
  /** @public @react */
827
827
  export declare const DefaultSvgDefs: () => null;
@@ -6424,7 +6424,7 @@ export declare interface TLEditorComponents {
6424
6424
  ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
6425
6425
  ShapeIndicators?: ComponentType | null;
6426
6426
  SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
6427
- Spinner?: ComponentType | null;
6427
+ Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
6428
6428
  SvgDefs?: ComponentType | null;
6429
6429
  ZoomBrush?: ComponentType<TLBrushProps> | null;
6430
6430
  ErrorFallback?: TLErrorFallbackComponent;
package/dist-cjs/index.js CHANGED
@@ -367,7 +367,7 @@ function debugEnableLicensing() {
367
367
  }
368
368
  (0, import_utils.registerTldrawLibraryVersion)(
369
369
  "@tldraw/editor",
370
- "3.15.0-canary.36a2aff82b67",
370
+ "3.15.0-canary.3aa231f41374",
371
371
  "cjs"
372
372
  );
373
373
  //# sourceMappingURL=index.js.map
package/dist-cjs/lib/components/default-components/DefaultSpinner.js CHANGED
@@ -1,7 +1,9 @@
1
1
  "use strict";
2
+ var __create = Object.create;
2
3
  var __defProp = Object.defineProperty;
3
4
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
5
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
8
  var __export = (target, all) => {
7
9
  for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
15
17
  }
16
18
  return to;
17
19
  };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
18
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
29
  var DefaultSpinner_exports = {};
20
30
  __export(DefaultSpinner_exports, {
@@ -22,20 +32,22 @@ __export(DefaultSpinner_exports, {
22
32
  });
23
33
  module.exports = __toCommonJS(DefaultSpinner_exports);
24
34
  var import_jsx_runtime = require("react/jsx-runtime");
25
- function DefaultSpinner() {
26
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 16 16", "aria-hidden": "false", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
27
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
28
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
29
- "animateTransform",
30
- {
31
- attributeName: "transform",
32
- type: "rotate",
33
- from: "0 8 8",
34
- to: "360 8 8",
35
- dur: "1s",
36
- repeatCount: "indefinite"
37
- }
38
- ) })
39
- ] }) });
35
+ var import_classnames = __toESM(require("classnames"));
36
+ function DefaultSpinner(props) {
37
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
38
+ "svg",
39
+ {
40
+ width: 16,
41
+ height: 16,
42
+ viewBox: "0 0 16 16",
43
+ "aria-hidden": "false",
44
+ ...props,
45
+ className: (0, import_classnames.default)("tl-spinner", props.className),
46
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
47
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
48
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor" })
49
+ ] })
50
+ }
51
+ );
40
52
  }
41
53
  //# sourceMappingURL=DefaultSpinner.js.map
package/dist-cjs/lib/components/default-components/DefaultSpinner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/components/default-components/DefaultSpinner.tsx"],
4
- "sourcesContent": ["/** @public @react */\nexport function DefaultSpinner() {\n\treturn (\n\t\t<svg width={16} height={16} viewBox=\"0 0 16 16\" aria-hidden=\"false\">\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\">\n\t\t\t\t\t<animateTransform\n\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\tfrom=\"0 8 8\"\n\t\t\t\t\t\tto=\"360 8 8\"\n\t\t\t\t\t\tdur=\"1s\"\n\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t/>\n\t\t\t\t</path>\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIG;AAHI,SAAS,iBAAiB;AAChC,SACC,4CAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAY,eAAY,SAC3D,uDAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,gDAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,IACvE,4CAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAC5D;AAAA,MAAC;AAAA;AAAA,QACA,eAAc;AAAA,QACd,MAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAG;AAAA,QACH,KAAI;AAAA,QACJ,aAAY;AAAA;AAAA,IACb,GACD;AAAA,KACD,GACD;AAEF;",
6
- "names": []
4
+ "sourcesContent": ["import classNames from 'classnames'\n\n/** @public @react */\nexport function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg\n\t\t\twidth={16}\n\t\t\theight={16}\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"false\"\n\t\t\t{...props}\n\t\t\tclassName={classNames('tl-spinner', props.className)}\n\t\t>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\" />\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaG;AAbH,wBAAuB;AAGhB,SAAS,eAAe,OAAsC;AACpE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,eAAY;AAAA,MACX,GAAG;AAAA,MACJ,eAAW,kBAAAA,SAAW,cAAc,MAAM,SAAS;AAAA,MAEnD,uDAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,oDAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,QACvE,4CAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAAe;AAAA,SAC7E;AAAA;AAAA,EACD;AAEF;",
6
+ "names": ["classNames"]
7
7
  }
package/dist-cjs/lib/hooks/useEditorComponents.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/lib/hooks/useEditorComponents.tsx"],
4
- "sourcesContent": ["import { ComponentType, ReactNode, createContext, useContext, useMemo } from 'react'\nimport { DefaultBackground } from '../components/default-components/DefaultBackground'\nimport { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'\nimport {\n\tDefaultCanvas,\n\tTLCanvasComponentProps,\n} from '../components/default-components/DefaultCanvas'\nimport {\n\tDefaultCollaboratorHint,\n\tTLCollaboratorHintProps,\n} from '../components/default-components/DefaultCollaboratorHint'\nimport { DefaultCursor, TLCursorProps } from '../components/default-components/DefaultCursor'\nimport {\n\tDefaultErrorFallback,\n\tTLErrorFallbackComponent,\n} from '../components/default-components/DefaultErrorFallback'\nimport { DefaultGrid, TLGridProps } from '../components/default-components/DefaultGrid'\nimport { DefaultHandle, TLHandleProps } from '../components/default-components/DefaultHandle'\nimport { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'\nimport { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'\nimport { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'\nimport { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'\nimport {\n\tDefaultSelectionForeground,\n\tTLSelectionForegroundProps,\n} from '../components/default-components/DefaultSelectionForeground'\nimport {\n\tDefaultShapeErrorFallback,\n\tTLShapeErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeErrorFallback'\nimport {\n\tDefaultShapeIndicator,\n\tTLShapeIndicatorProps,\n} from '../components/default-components/DefaultShapeIndicator'\nimport {\n\tDefaultShapeIndicatorErrorFallback,\n\tTLShapeIndicatorErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeIndicatorErrorFallback'\nimport { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'\nimport {\n\tDefaultSnapIndicator,\n\tTLSnapIndicatorProps,\n} from '../components/default-components/DefaultSnapIndictor'\nimport { DefaultSpinner } from '../components/default-components/DefaultSpinner'\nimport { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'\nimport { useShallowObjectIdentity } from './useIdentity'\n\n/** @public */\nexport interface TLEditorComponents {\n\tBackground?: ComponentType | null\n\tBrush?: ComponentType<TLBrushProps> | null\n\tCanvas?: ComponentType<TLCanvasComponentProps> | null\n\tCollaboratorBrush?: ComponentType<TLBrushProps> | null\n\tCollaboratorCursor?: ComponentType<TLCursorProps> | null\n\tCollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null\n\tCollaboratorScribble?: ComponentType<TLScribbleProps> | null\n\tCollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tCursor?: ComponentType<TLCursorProps> | null\n\tGrid?: ComponentType<TLGridProps> | null\n\tHandle?: ComponentType<TLHandleProps> | null\n\tHandles?: ComponentType<TLHandlesProps> | null\n\tInFrontOfTheCanvas?: ComponentType | null\n\tLoadingScreen?: ComponentType | null\n\tOnTheCanvas?: ComponentType | null\n\tOverlays?: ComponentType | null\n\tScribble?: ComponentType<TLScribbleProps> | null\n\tSelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null\n\tSelectionForeground?: ComponentType<TLSelectionForegroundProps> | null\n\tShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tShapeIndicators?: ComponentType | null\n\tSnapIndicator?: ComponentType<TLSnapIndicatorProps> | null\n\tSpinner?: ComponentType | null\n\tSvgDefs?: ComponentType | null\n\tZoomBrush?: ComponentType<TLBrushProps> | null\n\n\t// These will always have defaults\n\tErrorFallback?: TLErrorFallbackComponent\n\tShapeErrorFallback?: TLShapeErrorFallbackComponent\n\tShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent\n}\n\nconst EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)\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\tBrush: DefaultBrush,\n\t\t\tCanvas: DefaultCanvas,\n\t\t\tCollaboratorBrush: DefaultBrush,\n\t\t\tCollaboratorCursor: DefaultCursor,\n\t\t\tCollaboratorHint: DefaultCollaboratorHint,\n\t\t\tCollaboratorScribble: DefaultScribble,\n\t\t\tCollaboratorShapeIndicator: DefaultShapeIndicator,\n\t\t\tCursor: DefaultCursor,\n\t\t\tGrid: DefaultGrid,\n\t\t\tHandle: DefaultHandle,\n\t\t\tHandles: DefaultHandles,\n\t\t\tInFrontOfTheCanvas: null,\n\t\t\tLoadingScreen: DefaultLoadingScreen,\n\t\t\tOnTheCanvas: null,\n\t\t\tOverlays: null,\n\t\t\tScribble: DefaultScribble,\n\t\t\tSelectionBackground: null,\n\t\t\tSelectionForeground: DefaultSelectionForeground,\n\t\t\tShapeIndicator: DefaultShapeIndicator,\n\t\t\tShapeIndicators: DefaultShapeIndicators,\n\t\t\tSnapIndicator: DefaultSnapIndicator,\n\t\t\tSpinner: DefaultSpinner,\n\t\t\tSvgDefs: DefaultSvgDefs,\n\t\t\tZoomBrush: DefaultBrush,\n\n\t\t\tErrorFallback: DefaultErrorFallback,\n\t\t\tShapeErrorFallback: DefaultShapeErrorFallback,\n\t\t\tShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,\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\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"],
4
+ "sourcesContent": ["import { ComponentType, ReactNode, createContext, useContext, useMemo } from 'react'\nimport { DefaultBackground } from '../components/default-components/DefaultBackground'\nimport { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'\nimport {\n\tDefaultCanvas,\n\tTLCanvasComponentProps,\n} from '../components/default-components/DefaultCanvas'\nimport {\n\tDefaultCollaboratorHint,\n\tTLCollaboratorHintProps,\n} from '../components/default-components/DefaultCollaboratorHint'\nimport { DefaultCursor, TLCursorProps } from '../components/default-components/DefaultCursor'\nimport {\n\tDefaultErrorFallback,\n\tTLErrorFallbackComponent,\n} from '../components/default-components/DefaultErrorFallback'\nimport { DefaultGrid, TLGridProps } from '../components/default-components/DefaultGrid'\nimport { DefaultHandle, TLHandleProps } from '../components/default-components/DefaultHandle'\nimport { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'\nimport { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'\nimport { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'\nimport { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'\nimport {\n\tDefaultSelectionForeground,\n\tTLSelectionForegroundProps,\n} from '../components/default-components/DefaultSelectionForeground'\nimport {\n\tDefaultShapeErrorFallback,\n\tTLShapeErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeErrorFallback'\nimport {\n\tDefaultShapeIndicator,\n\tTLShapeIndicatorProps,\n} from '../components/default-components/DefaultShapeIndicator'\nimport {\n\tDefaultShapeIndicatorErrorFallback,\n\tTLShapeIndicatorErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeIndicatorErrorFallback'\nimport { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'\nimport {\n\tDefaultSnapIndicator,\n\tTLSnapIndicatorProps,\n} from '../components/default-components/DefaultSnapIndictor'\nimport { DefaultSpinner } from '../components/default-components/DefaultSpinner'\nimport { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'\nimport { useShallowObjectIdentity } from './useIdentity'\n\n/** @public */\nexport interface TLEditorComponents {\n\tBackground?: ComponentType | null\n\tBrush?: ComponentType<TLBrushProps> | null\n\tCanvas?: ComponentType<TLCanvasComponentProps> | null\n\tCollaboratorBrush?: ComponentType<TLBrushProps> | null\n\tCollaboratorCursor?: ComponentType<TLCursorProps> | null\n\tCollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null\n\tCollaboratorScribble?: ComponentType<TLScribbleProps> | null\n\tCollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tCursor?: ComponentType<TLCursorProps> | null\n\tGrid?: ComponentType<TLGridProps> | null\n\tHandle?: ComponentType<TLHandleProps> | null\n\tHandles?: ComponentType<TLHandlesProps> | null\n\tInFrontOfTheCanvas?: ComponentType | null\n\tLoadingScreen?: ComponentType | null\n\tOnTheCanvas?: ComponentType | null\n\tOverlays?: ComponentType | null\n\tScribble?: ComponentType<TLScribbleProps> | null\n\tSelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null\n\tSelectionForeground?: ComponentType<TLSelectionForegroundProps> | null\n\tShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tShapeIndicators?: ComponentType | null\n\tSnapIndicator?: ComponentType<TLSnapIndicatorProps> | null\n\tSpinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null\n\tSvgDefs?: ComponentType | null\n\tZoomBrush?: ComponentType<TLBrushProps> | null\n\n\t// These will always have defaults\n\tErrorFallback?: TLErrorFallbackComponent\n\tShapeErrorFallback?: TLShapeErrorFallbackComponent\n\tShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent\n}\n\nconst EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)\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\tBrush: DefaultBrush,\n\t\t\tCanvas: DefaultCanvas,\n\t\t\tCollaboratorBrush: DefaultBrush,\n\t\t\tCollaboratorCursor: DefaultCursor,\n\t\t\tCollaboratorHint: DefaultCollaboratorHint,\n\t\t\tCollaboratorScribble: DefaultScribble,\n\t\t\tCollaboratorShapeIndicator: DefaultShapeIndicator,\n\t\t\tCursor: DefaultCursor,\n\t\t\tGrid: DefaultGrid,\n\t\t\tHandle: DefaultHandle,\n\t\t\tHandles: DefaultHandles,\n\t\t\tInFrontOfTheCanvas: null,\n\t\t\tLoadingScreen: DefaultLoadingScreen,\n\t\t\tOnTheCanvas: null,\n\t\t\tOverlays: null,\n\t\t\tScribble: DefaultScribble,\n\t\t\tSelectionBackground: null,\n\t\t\tSelectionForeground: DefaultSelectionForeground,\n\t\t\tShapeIndicator: DefaultShapeIndicator,\n\t\t\tShapeIndicators: DefaultShapeIndicators,\n\t\t\tSnapIndicator: DefaultSnapIndicator,\n\t\t\tSpinner: DefaultSpinner,\n\t\t\tSvgDefs: DefaultSvgDefs,\n\t\t\tZoomBrush: DefaultBrush,\n\n\t\t\tErrorFallback: DefaultErrorFallback,\n\t\t\tShapeErrorFallback: DefaultShapeErrorFallback,\n\t\t\tShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,\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\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"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmIE;AAnIF,mBAA6E;AAC7E,+BAAkC;AAClC,0BAA2C;AAC3C,2BAGO;AACP,qCAGO;AACP,2BAA6C;AAC7C,kCAGO;AACP,yBAAyC;AACzC,2BAA6C;AAC7C,4BAA+C;AAC/C,kCAAqC;AACrC,6BAAiD;AAEjD,wCAGO;AACP,uCAGO;AACP,mCAGO;AACP,gDAGO;AACP,oCAAuC;AACvC,iCAGO;AACP,4BAA+B;AAC/B,4BAA+B;AAC/B,yBAAyC;AAoCzC,MAAM,8BAA0B,4BAAmD,IAAI;AAOhF,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,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB,sBAAsB;AAAA,MACtB,4BAA4B;AAAA,MAC5B,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MAEX,eAAe;AAAA,MACf,oBAAoB;AAAA,MACpB,6BAA6B;AAAA,MAE7B,GAAG;AAAA,IACJ;AAAA,IACA,CAAC,UAAU;AAAA,EACZ;AAEA,SACC,4CAAC,wBAAwB,UAAxB,EAAiC,OAAe,UAAS;AAE5D;AAGO,SAAS,sBAAsB;AACrC,QAAM,iBAAa,yBAAW,uBAAuB;AACrD,MAAI,CAAC,YAAY;AAChB,UAAM,IAAI,MAAM,yEAAyE;AAAA,EAC1F;AACA,SAAO;AACR;",
6
6
  "names": []
7
7
  }
package/dist-cjs/lib/license/Watermark.js CHANGED
@@ -156,7 +156,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
156
156
  }
157
157
 
158
158
  .${className}:hover > button {
159
- animation: delayed_link 0.2s forwards ease-in-out;
159
+ animation: ${className}_delayed_link 0.2s forwards ease-in-out;
160
160
  animation-delay: 0.32s;
161
161
  }
162
162
 
@@ -166,7 +166,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
166
166
  }
167
167
 
168
168
 
169
- @keyframes delayed_link {
169
+ @keyframes ${className}_delayed_link {
170
170
  0% {
171
171
  cursor: inherit;
172
172
  opacity: .38;
package/dist-cjs/lib/license/Watermark.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/lib/license/Watermark.tsx"],
4
- "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />\n\t\t</>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"made with tldraw\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n\t.${className} {\n\t\tposition: absolute;\n\t\tbottom: var(--space-2);\n\t\tright: var(--space-2);\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: var(--layer-watermark) !important;\n\t\tbackground-color: color-mix(in srgb, var(--color-background) 62%, transparent);\n\t\topacity: 1;\n\t\tborder-radius: 5px;\n\t\tpointer-events: all;\n\t\tpadding: 2px;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.${className} > button {\n\t\tposition: absolute;\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tpointer-events: all;\n\t\tcursor: inherit;\n\t\tcolor: var(--color-text);\n\t\topacity: .38;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground-color: currentColor;\n\t}\n\n\t.${className}[data-debug='true'] {\n\t\tbottom: 46px;\n\t}\n\n\t.${className}[data-mobile='true'] {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t\tright: -2px;\n\t\twidth: 8px;\n\t\theight: 48px;\n\t}\n\n\t.${className}[data-mobile='true'] > button {\n\t\twidth: 8px;\n\t\theight: 32px;\n\t}\n\n\t@media (hover: hover) {\n\t\t.${className} > button {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.${className}:hover {\n\t\t\tbackground-color: var(--color-background);\n\t\t\ttransition: background-color 0.2s ease-in-out;\n\t\t\ttransition-delay: 0.32s;\n\t\t}\n\n\t\t.${className}:hover > button {\n\t\t\tanimation: delayed_link 0.2s forwards ease-in-out;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\n\t\t.${className} > button:focus-visible {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\n\t@keyframes delayed_link {\n\t\t0% {\n\t\t\tcursor: inherit;\n\t\t\topacity: .38;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t100% {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: all;\n\t\t}\n\t}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />\n\t\t</>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"made with tldraw\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n\t.${className} {\n\t\tposition: absolute;\n\t\tbottom: var(--space-2);\n\t\tright: var(--space-2);\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: var(--layer-watermark) !important;\n\t\tbackground-color: color-mix(in srgb, var(--color-background) 62%, transparent);\n\t\topacity: 1;\n\t\tborder-radius: 5px;\n\t\tpointer-events: all;\n\t\tpadding: 2px;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.${className} > button {\n\t\tposition: absolute;\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tpointer-events: all;\n\t\tcursor: inherit;\n\t\tcolor: var(--color-text);\n\t\topacity: .38;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground-color: currentColor;\n\t}\n\n\t.${className}[data-debug='true'] {\n\t\tbottom: 46px;\n\t}\n\n\t.${className}[data-mobile='true'] {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t\tright: -2px;\n\t\twidth: 8px;\n\t\theight: 48px;\n\t}\n\n\t.${className}[data-mobile='true'] > button {\n\t\twidth: 8px;\n\t\theight: 32px;\n\t}\n\n\t@media (hover: hover) {\n\t\t.${className} > button {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.${className}:hover {\n\t\t\tbackground-color: var(--color-background);\n\t\t\ttransition: background-color 0.2s ease-in-out;\n\t\t\ttransition-delay: 0.32s;\n\t\t}\n\n\t\t.${className}:hover > button {\n\t\t\tanimation: ${className}_delayed_link 0.2s forwards ease-in-out;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\n\t\t.${className} > button:focus-visible {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\n\t@keyframes ${className}_delayed_link {\n\t\t0% {\n\t\t\tcursor: inherit;\n\t\t\topacity: .38;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t100% {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: all;\n\t\t}\n\t}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
5
+ "mappings": "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",
6
6
  "names": ["Watermark", "WatermarkInner", "LicenseStyles"]
7
7
  }
package/dist-cjs/version.js CHANGED
@@ -22,10 +22,10 @@ __export(version_exports, {
22
22
  version: () => version
23
23
  });
24
24
  module.exports = __toCommonJS(version_exports);
25
- const version = "3.15.0-canary.36a2aff82b67";
25
+ const version = "3.15.0-canary.3aa231f41374";
26
26
  const publishDates = {
27
27
  major: "2024-09-13T14:36:29.063Z",
28
- minor: "2025-07-15T15:00:46.932Z",
29
- patch: "2025-07-15T15:00:46.932Z"
28
+ minor: "2025-07-21T11:00:52.324Z",
29
+ patch: "2025-07-21T11:00:52.324Z"
30
30
  };
31
31
  //# sourceMappingURL=version.js.map
package/dist-cjs/version.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/version.ts"],
4
- "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.15.0-canary.36a2aff82b67'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-07-15T15:00:46.932Z',\n\tpatch: '2025-07-15T15:00:46.932Z',\n}\n"],
4
+ "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.15.0-canary.3aa231f41374'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-07-21T11:00:52.324Z',\n\tpatch: '2025-07-21T11:00:52.324Z',\n}\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
6
6
  "names": []
7
7
  }
package/dist-esm/index.d.mts CHANGED
@@ -821,7 +821,7 @@ export declare const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicat
821
821
  export declare function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX_2.Element;
822
822
 
823
823
  /** @public @react */
824
- export declare function DefaultSpinner(): JSX_2.Element;
824
+ export declare function DefaultSpinner(props: React.SVGProps<SVGSVGElement>): JSX_2.Element;
825
825
 
826
826
  /** @public @react */
827
827
  export declare const DefaultSvgDefs: () => null;
@@ -6424,7 +6424,7 @@ export declare interface TLEditorComponents {
6424
6424
  ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null;
6425
6425
  ShapeIndicators?: ComponentType | null;
6426
6426
  SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null;
6427
- Spinner?: ComponentType | null;
6427
+ Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
6428
6428
  SvgDefs?: ComponentType | null;
6429
6429
  ZoomBrush?: ComponentType<TLBrushProps> | null;
6430
6430
  ErrorFallback?: TLErrorFallbackComponent;
package/dist-esm/index.mjs CHANGED
@@ -299,7 +299,7 @@ function debugEnableLicensing() {
299
299
  }
300
300
  registerTldrawLibraryVersion(
301
301
  "@tldraw/editor",
302
- "3.15.0-canary.36a2aff82b67",
302
+ "3.15.0-canary.3aa231f41374",
303
303
  "esm"
304
304
  );
305
305
  export {
package/dist-esm/lib/components/default-components/DefaultSpinner.mjs CHANGED
@@ -1,19 +1,21 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- function DefaultSpinner() {
3
- return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", "aria-hidden": "false", children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
4
- /* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
5
- /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ jsx(
6
- "animateTransform",
7
- {
8
- attributeName: "transform",
9
- type: "rotate",
10
- from: "0 8 8",
11
- to: "360 8 8",
12
- dur: "1s",
13
- repeatCount: "indefinite"
14
- }
15
- ) })
16
- ] }) });
2
+ import classNames from "classnames";
3
+ function DefaultSpinner(props) {
4
+ return /* @__PURE__ */ jsx(
5
+ "svg",
6
+ {
7
+ width: 16,
8
+ height: 16,
9
+ viewBox: "0 0 16 16",
10
+ "aria-hidden": "false",
11
+ ...props,
12
+ className: classNames("tl-spinner", props.className),
13
+ children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
14
+ /* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
15
+ /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor" })
16
+ ] })
17
+ }
18
+ );
17
19
  }
18
20
  export {
19
21
  DefaultSpinner
package/dist-esm/lib/components/default-components/DefaultSpinner.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/lib/components/default-components/DefaultSpinner.tsx"],
4
- "sourcesContent": ["/** @public @react */\nexport function DefaultSpinner() {\n\treturn (\n\t\t<svg width={16} height={16} viewBox=\"0 0 16 16\" aria-hidden=\"false\">\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\">\n\t\t\t\t\t<animateTransform\n\t\t\t\t\t\tattributeName=\"transform\"\n\t\t\t\t\t\ttype=\"rotate\"\n\t\t\t\t\t\tfrom=\"0 8 8\"\n\t\t\t\t\t\tto=\"360 8 8\"\n\t\t\t\t\t\tdur=\"1s\"\n\t\t\t\t\t\trepeatCount=\"indefinite\"\n\t\t\t\t\t/>\n\t\t\t\t</path>\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
5
- "mappings": "AAIG,SACC,KADD;AAHI,SAAS,iBAAiB;AAChC,SACC,oBAAC,SAAI,OAAO,IAAI,QAAQ,IAAI,SAAQ,aAAY,eAAY,SAC3D,+BAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,wBAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,IACvE,oBAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAC5D;AAAA,MAAC;AAAA;AAAA,QACA,eAAc;AAAA,QACd,MAAK;AAAA,QACL,MAAK;AAAA,QACL,IAAG;AAAA,QACH,KAAI;AAAA,QACJ,aAAY;AAAA;AAAA,IACb,GACD;AAAA,KACD,GACD;AAEF;",
4
+ "sourcesContent": ["import classNames from 'classnames'\n\n/** @public @react */\nexport function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {\n\treturn (\n\t\t<svg\n\t\t\twidth={16}\n\t\t\theight={16}\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\taria-hidden=\"false\"\n\t\t\t{...props}\n\t\t\tclassName={classNames('tl-spinner', props.className)}\n\t\t>\n\t\t\t<g strokeWidth={2} fill=\"none\" fillRule=\"evenodd\">\n\t\t\t\t<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke=\"currentColor\" />\n\t\t\t\t<path strokeLinecap=\"round\" d=\"M15 8c0-4.5-4.5-7-7-7\" stroke=\"currentColor\" />\n\t\t\t</g>\n\t\t</svg>\n\t)\n}\n"],
5
+ "mappings": "AAaG,SACC,KADD;AAbH,OAAO,gBAAgB;AAGhB,SAAS,eAAe,OAAsC;AACpE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAQ;AAAA,MACR,eAAY;AAAA,MACX,GAAG;AAAA,MACJ,WAAW,WAAW,cAAc,MAAM,SAAS;AAAA,MAEnD,+BAAC,OAAE,aAAa,GAAG,MAAK,QAAO,UAAS,WACvC;AAAA,4BAAC,YAAO,eAAe,MAAM,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,QAAO,gBAAe;AAAA,QACvE,oBAAC,UAAK,eAAc,SAAQ,GAAE,yBAAwB,QAAO,gBAAe;AAAA,SAC7E;AAAA;AAAA,EACD;AAEF;",
6
6
  "names": []
7
7
  }
package/dist-esm/lib/hooks/useEditorComponents.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/lib/hooks/useEditorComponents.tsx"],
4
- "sourcesContent": ["import { ComponentType, ReactNode, createContext, useContext, useMemo } from 'react'\nimport { DefaultBackground } from '../components/default-components/DefaultBackground'\nimport { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'\nimport {\n\tDefaultCanvas,\n\tTLCanvasComponentProps,\n} from '../components/default-components/DefaultCanvas'\nimport {\n\tDefaultCollaboratorHint,\n\tTLCollaboratorHintProps,\n} from '../components/default-components/DefaultCollaboratorHint'\nimport { DefaultCursor, TLCursorProps } from '../components/default-components/DefaultCursor'\nimport {\n\tDefaultErrorFallback,\n\tTLErrorFallbackComponent,\n} from '../components/default-components/DefaultErrorFallback'\nimport { DefaultGrid, TLGridProps } from '../components/default-components/DefaultGrid'\nimport { DefaultHandle, TLHandleProps } from '../components/default-components/DefaultHandle'\nimport { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'\nimport { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'\nimport { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'\nimport { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'\nimport {\n\tDefaultSelectionForeground,\n\tTLSelectionForegroundProps,\n} from '../components/default-components/DefaultSelectionForeground'\nimport {\n\tDefaultShapeErrorFallback,\n\tTLShapeErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeErrorFallback'\nimport {\n\tDefaultShapeIndicator,\n\tTLShapeIndicatorProps,\n} from '../components/default-components/DefaultShapeIndicator'\nimport {\n\tDefaultShapeIndicatorErrorFallback,\n\tTLShapeIndicatorErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeIndicatorErrorFallback'\nimport { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'\nimport {\n\tDefaultSnapIndicator,\n\tTLSnapIndicatorProps,\n} from '../components/default-components/DefaultSnapIndictor'\nimport { DefaultSpinner } from '../components/default-components/DefaultSpinner'\nimport { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'\nimport { useShallowObjectIdentity } from './useIdentity'\n\n/** @public */\nexport interface TLEditorComponents {\n\tBackground?: ComponentType | null\n\tBrush?: ComponentType<TLBrushProps> | null\n\tCanvas?: ComponentType<TLCanvasComponentProps> | null\n\tCollaboratorBrush?: ComponentType<TLBrushProps> | null\n\tCollaboratorCursor?: ComponentType<TLCursorProps> | null\n\tCollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null\n\tCollaboratorScribble?: ComponentType<TLScribbleProps> | null\n\tCollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tCursor?: ComponentType<TLCursorProps> | null\n\tGrid?: ComponentType<TLGridProps> | null\n\tHandle?: ComponentType<TLHandleProps> | null\n\tHandles?: ComponentType<TLHandlesProps> | null\n\tInFrontOfTheCanvas?: ComponentType | null\n\tLoadingScreen?: ComponentType | null\n\tOnTheCanvas?: ComponentType | null\n\tOverlays?: ComponentType | null\n\tScribble?: ComponentType<TLScribbleProps> | null\n\tSelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null\n\tSelectionForeground?: ComponentType<TLSelectionForegroundProps> | null\n\tShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tShapeIndicators?: ComponentType | null\n\tSnapIndicator?: ComponentType<TLSnapIndicatorProps> | null\n\tSpinner?: ComponentType | null\n\tSvgDefs?: ComponentType | null\n\tZoomBrush?: ComponentType<TLBrushProps> | null\n\n\t// These will always have defaults\n\tErrorFallback?: TLErrorFallbackComponent\n\tShapeErrorFallback?: TLShapeErrorFallbackComponent\n\tShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent\n}\n\nconst EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)\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\tBrush: DefaultBrush,\n\t\t\tCanvas: DefaultCanvas,\n\t\t\tCollaboratorBrush: DefaultBrush,\n\t\t\tCollaboratorCursor: DefaultCursor,\n\t\t\tCollaboratorHint: DefaultCollaboratorHint,\n\t\t\tCollaboratorScribble: DefaultScribble,\n\t\t\tCollaboratorShapeIndicator: DefaultShapeIndicator,\n\t\t\tCursor: DefaultCursor,\n\t\t\tGrid: DefaultGrid,\n\t\t\tHandle: DefaultHandle,\n\t\t\tHandles: DefaultHandles,\n\t\t\tInFrontOfTheCanvas: null,\n\t\t\tLoadingScreen: DefaultLoadingScreen,\n\t\t\tOnTheCanvas: null,\n\t\t\tOverlays: null,\n\t\t\tScribble: DefaultScribble,\n\t\t\tSelectionBackground: null,\n\t\t\tSelectionForeground: DefaultSelectionForeground,\n\t\t\tShapeIndicator: DefaultShapeIndicator,\n\t\t\tShapeIndicators: DefaultShapeIndicators,\n\t\t\tSnapIndicator: DefaultSnapIndicator,\n\t\t\tSpinner: DefaultSpinner,\n\t\t\tSvgDefs: DefaultSvgDefs,\n\t\t\tZoomBrush: DefaultBrush,\n\n\t\t\tErrorFallback: DefaultErrorFallback,\n\t\t\tShapeErrorFallback: DefaultShapeErrorFallback,\n\t\t\tShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,\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\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"],
4
+ "sourcesContent": ["import { ComponentType, ReactNode, createContext, useContext, useMemo } from 'react'\nimport { DefaultBackground } from '../components/default-components/DefaultBackground'\nimport { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'\nimport {\n\tDefaultCanvas,\n\tTLCanvasComponentProps,\n} from '../components/default-components/DefaultCanvas'\nimport {\n\tDefaultCollaboratorHint,\n\tTLCollaboratorHintProps,\n} from '../components/default-components/DefaultCollaboratorHint'\nimport { DefaultCursor, TLCursorProps } from '../components/default-components/DefaultCursor'\nimport {\n\tDefaultErrorFallback,\n\tTLErrorFallbackComponent,\n} from '../components/default-components/DefaultErrorFallback'\nimport { DefaultGrid, TLGridProps } from '../components/default-components/DefaultGrid'\nimport { DefaultHandle, TLHandleProps } from '../components/default-components/DefaultHandle'\nimport { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'\nimport { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'\nimport { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'\nimport { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'\nimport {\n\tDefaultSelectionForeground,\n\tTLSelectionForegroundProps,\n} from '../components/default-components/DefaultSelectionForeground'\nimport {\n\tDefaultShapeErrorFallback,\n\tTLShapeErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeErrorFallback'\nimport {\n\tDefaultShapeIndicator,\n\tTLShapeIndicatorProps,\n} from '../components/default-components/DefaultShapeIndicator'\nimport {\n\tDefaultShapeIndicatorErrorFallback,\n\tTLShapeIndicatorErrorFallbackComponent,\n} from '../components/default-components/DefaultShapeIndicatorErrorFallback'\nimport { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'\nimport {\n\tDefaultSnapIndicator,\n\tTLSnapIndicatorProps,\n} from '../components/default-components/DefaultSnapIndictor'\nimport { DefaultSpinner } from '../components/default-components/DefaultSpinner'\nimport { DefaultSvgDefs } from '../components/default-components/DefaultSvgDefs'\nimport { useShallowObjectIdentity } from './useIdentity'\n\n/** @public */\nexport interface TLEditorComponents {\n\tBackground?: ComponentType | null\n\tBrush?: ComponentType<TLBrushProps> | null\n\tCanvas?: ComponentType<TLCanvasComponentProps> | null\n\tCollaboratorBrush?: ComponentType<TLBrushProps> | null\n\tCollaboratorCursor?: ComponentType<TLCursorProps> | null\n\tCollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null\n\tCollaboratorScribble?: ComponentType<TLScribbleProps> | null\n\tCollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tCursor?: ComponentType<TLCursorProps> | null\n\tGrid?: ComponentType<TLGridProps> | null\n\tHandle?: ComponentType<TLHandleProps> | null\n\tHandles?: ComponentType<TLHandlesProps> | null\n\tInFrontOfTheCanvas?: ComponentType | null\n\tLoadingScreen?: ComponentType | null\n\tOnTheCanvas?: ComponentType | null\n\tOverlays?: ComponentType | null\n\tScribble?: ComponentType<TLScribbleProps> | null\n\tSelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null\n\tSelectionForeground?: ComponentType<TLSelectionForegroundProps> | null\n\tShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null\n\tShapeIndicators?: ComponentType | null\n\tSnapIndicator?: ComponentType<TLSnapIndicatorProps> | null\n\tSpinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null\n\tSvgDefs?: ComponentType | null\n\tZoomBrush?: ComponentType<TLBrushProps> | null\n\n\t// These will always have defaults\n\tErrorFallback?: TLErrorFallbackComponent\n\tShapeErrorFallback?: TLShapeErrorFallbackComponent\n\tShapeIndicatorErrorFallback?: TLShapeIndicatorErrorFallbackComponent\n}\n\nconst EditorComponentsContext = createContext<null | Required<TLEditorComponents>>(null)\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\tBrush: DefaultBrush,\n\t\t\tCanvas: DefaultCanvas,\n\t\t\tCollaboratorBrush: DefaultBrush,\n\t\t\tCollaboratorCursor: DefaultCursor,\n\t\t\tCollaboratorHint: DefaultCollaboratorHint,\n\t\t\tCollaboratorScribble: DefaultScribble,\n\t\t\tCollaboratorShapeIndicator: DefaultShapeIndicator,\n\t\t\tCursor: DefaultCursor,\n\t\t\tGrid: DefaultGrid,\n\t\t\tHandle: DefaultHandle,\n\t\t\tHandles: DefaultHandles,\n\t\t\tInFrontOfTheCanvas: null,\n\t\t\tLoadingScreen: DefaultLoadingScreen,\n\t\t\tOnTheCanvas: null,\n\t\t\tOverlays: null,\n\t\t\tScribble: DefaultScribble,\n\t\t\tSelectionBackground: null,\n\t\t\tSelectionForeground: DefaultSelectionForeground,\n\t\t\tShapeIndicator: DefaultShapeIndicator,\n\t\t\tShapeIndicators: DefaultShapeIndicators,\n\t\t\tSnapIndicator: DefaultSnapIndicator,\n\t\t\tSpinner: DefaultSpinner,\n\t\t\tSvgDefs: DefaultSvgDefs,\n\t\t\tZoomBrush: DefaultBrush,\n\n\t\t\tErrorFallback: DefaultErrorFallback,\n\t\t\tShapeErrorFallback: DefaultShapeErrorFallback,\n\t\t\tShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,\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\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"],
5
5
  "mappings": "AAmIE;AAnIF,SAAmC,eAAe,YAAY,eAAe;AAC7E,SAAS,yBAAyB;AAClC,SAAS,oBAAkC;AAC3C;AAAA,EACC;AAAA,OAEM;AACP;AAAA,EACC;AAAA,OAEM;AACP,SAAS,qBAAoC;AAC7C;AAAA,EACC;AAAA,OAEM;AACP,SAAS,mBAAgC;AACzC,SAAS,qBAAoC;AAC7C,SAAS,sBAAsC;AAC/C,SAAS,4BAA4B;AACrC,SAAS,uBAAwC;AAEjD;AAAA,EACC;AAAA,OAEM;AACP;AAAA,EACC;AAAA,OAEM;AACP;AAAA,EACC;AAAA,OAEM;AACP;AAAA,EACC;AAAA,OAEM;AACP,SAAS,8BAA8B;AACvC;AAAA,EACC;AAAA,OAEM;AACP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAoCzC,MAAM,0BAA0B,cAAmD,IAAI;AAOhF,SAAS,yBAAyB;AAAA,EACxC,YAAY,CAAC;AAAA,EACb;AACD,GAAmC;AAClC,QAAM,aAAa,yBAAyB,SAAS;AACrD,QAAM,QAAQ;AAAA,IACb,OAAqC;AAAA,MACpC,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB,sBAAsB;AAAA,MACtB,4BAA4B;AAAA,MAC5B,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,eAAe;AAAA,MACf,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,qBAAqB;AAAA,MACrB,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,eAAe;AAAA,MACf,SAAS;AAAA,MACT,SAAS;AAAA,MACT,WAAW;AAAA,MAEX,eAAe;AAAA,MACf,oBAAoB;AAAA,MACpB,6BAA6B;AAAA,MAE7B,GAAG;AAAA,IACJ;AAAA,IACA,CAAC,UAAU;AAAA,EACZ;AAEA,SACC,oBAAC,wBAAwB,UAAxB,EAAiC,OAAe,UAAS;AAE5D;AAGO,SAAS,sBAAsB;AACrC,QAAM,aAAa,WAAW,uBAAuB;AACrD,MAAI,CAAC,YAAY;AAChB,UAAM,IAAI,MAAM,yEAAyE;AAAA,EAC1F;AACA,SAAO;AACR;",
6
6
  "names": []
7
7
  }
package/dist-esm/lib/license/Watermark.mjs CHANGED
@@ -133,7 +133,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
133
133
  }
134
134
 
135
135
  .${className}:hover > button {
136
- animation: delayed_link 0.2s forwards ease-in-out;
136
+ animation: ${className}_delayed_link 0.2s forwards ease-in-out;
137
137
  animation-delay: 0.32s;
138
138
  }
139
139
 
@@ -143,7 +143,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
143
143
  }
144
144
 
145
145
 
146
- @keyframes delayed_link {
146
+ @keyframes ${className}_delayed_link {
147
147
  0% {
148
148
  cursor: inherit;
149
149
  opacity: .38;
package/dist-esm/lib/license/Watermark.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/lib/license/Watermark.tsx"],
4
- "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />\n\t\t</>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"made with tldraw\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n\t.${className} {\n\t\tposition: absolute;\n\t\tbottom: var(--space-2);\n\t\tright: var(--space-2);\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: var(--layer-watermark) !important;\n\t\tbackground-color: color-mix(in srgb, var(--color-background) 62%, transparent);\n\t\topacity: 1;\n\t\tborder-radius: 5px;\n\t\tpointer-events: all;\n\t\tpadding: 2px;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.${className} > button {\n\t\tposition: absolute;\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tpointer-events: all;\n\t\tcursor: inherit;\n\t\tcolor: var(--color-text);\n\t\topacity: .38;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground-color: currentColor;\n\t}\n\n\t.${className}[data-debug='true'] {\n\t\tbottom: 46px;\n\t}\n\n\t.${className}[data-mobile='true'] {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t\tright: -2px;\n\t\twidth: 8px;\n\t\theight: 48px;\n\t}\n\n\t.${className}[data-mobile='true'] > button {\n\t\twidth: 8px;\n\t\theight: 32px;\n\t}\n\n\t@media (hover: hover) {\n\t\t.${className} > button {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.${className}:hover {\n\t\t\tbackground-color: var(--color-background);\n\t\t\ttransition: background-color 0.2s ease-in-out;\n\t\t\ttransition-delay: 0.32s;\n\t\t}\n\n\t\t.${className}:hover > button {\n\t\t\tanimation: delayed_link 0.2s forwards ease-in-out;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\n\t\t.${className} > button:focus-visible {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\n\t@keyframes delayed_link {\n\t\t0% {\n\t\t\tcursor: inherit;\n\t\t\topacity: .38;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t100% {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: all;\n\t\t}\n\t}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { memo, useRef } from 'react'\nimport { useCanvasEvents } from '../hooks/useCanvasEvents'\nimport { useEditor } from '../hooks/useEditor'\nimport { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'\nimport { preventDefault, stopEventPropagation } from '../utils/dom'\nimport { runtime } from '../utils/runtime'\nimport { watermarkDesktopSvg, watermarkMobileSvg } from '../watermarks'\nimport { LicenseManager } from './LicenseManager'\nimport { useLicenseContext } from './LicenseProvider'\nimport { useLicenseManagerState } from './useLicenseManagerState'\n\nconst WATERMARK_DESKTOP_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkDesktopSvg)}`\nconst WATERMARK_MOBILE_LOCAL_SRC = `data:image/svg+xml;utf8,${encodeURIComponent(watermarkMobileSvg)}`\n\n/** @internal */\nexport const Watermark = memo(function Watermark() {\n\tconst licenseManager = useLicenseContext()\n\tconst editor = useEditor()\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\n\tconst licenseManagerState = useLicenseManagerState(licenseManager)\n\n\tif (!['licensed-with-watermark', 'unlicensed'].includes(licenseManagerState)) return null\n\n\treturn (\n\t\t<>\n\t\t\t<LicenseStyles />\n\t\t\t<WatermarkInner src={isMobile ? WATERMARK_MOBILE_LOCAL_SRC : WATERMARK_DESKTOP_LOCAL_SRC} />\n\t\t</>\n\t)\n})\n\nconst WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {\n\tconst editor = useEditor()\n\tconst isDebugMode = useValue('debug mode', () => editor.getInstanceState().isDebugMode, [editor])\n\tconst isMobile = useValue('is mobile', () => editor.getViewportScreenBounds().width < 700, [\n\t\teditor,\n\t])\n\tconst events = useCanvasEvents()\n\n\tconst ref = useRef<HTMLDivElement>(null)\n\tusePassThroughWheelEvents(ref)\n\n\tconst maskCss = `url('${src}') center 100% / 100% no-repeat`\n\tconst url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={LicenseManager.className}\n\t\t\tdata-debug={isDebugMode}\n\t\t\tdata-mobile={isMobile}\n\t\t\tdraggable={false}\n\t\t\t{...events}\n\t\t>\n\t\t\t<button\n\t\t\t\tdraggable={false}\n\t\t\t\trole=\"button\"\n\t\t\t\tonPointerDown={(e) => {\n\t\t\t\t\tstopEventPropagation(e)\n\t\t\t\t\tpreventDefault(e)\n\t\t\t\t}}\n\t\t\t\ttitle=\"made with tldraw\"\n\t\t\t\tonClick={() => runtime.openWindow(url, '_blank')}\n\t\t\t\tstyle={{ mask: maskCss, WebkitMask: maskCss }}\n\t\t\t/>\n\t\t</div>\n\t)\n})\n\nconst LicenseStyles = memo(function LicenseStyles() {\n\tconst editor = useEditor()\n\tconst className = LicenseManager.className\n\n\tconst CSS = `/* ------------------- SEE LICENSE -------------------\nThe tldraw watermark is part of tldraw's license. It is shown for unlicensed\nor \"licensed-with-watermark\" users. By using this library, you agree to\npreserve the watermark's behavior, keeping it visible, unobscured, and\navailable to user-interaction.\n\nTo remove the watermark, please purchase a license at tldraw.dev.\n*/\n\n\t.${className} {\n\t\tposition: absolute;\n\t\tbottom: var(--space-2);\n\t\tright: var(--space-2);\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tz-index: var(--layer-watermark) !important;\n\t\tbackground-color: color-mix(in srgb, var(--color-background) 62%, transparent);\n\t\topacity: 1;\n\t\tborder-radius: 5px;\n\t\tpointer-events: all;\n\t\tpadding: 2px;\n\t\tbox-sizing: content-box;\n\t}\n\n\t.${className} > button {\n\t\tposition: absolute;\n\t\twidth: 96px;\n\t\theight: 32px;\n\t\tpointer-events: all;\n\t\tcursor: inherit;\n\t\tcolor: var(--color-text);\n\t\topacity: .38;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground-color: currentColor;\n\t}\n\n\t.${className}[data-debug='true'] {\n\t\tbottom: 46px;\n\t}\n\n\t.${className}[data-mobile='true'] {\n\t\tborder-radius: 4px 0px 0px 4px;\n\t\tright: -2px;\n\t\twidth: 8px;\n\t\theight: 48px;\n\t}\n\n\t.${className}[data-mobile='true'] > button {\n\t\twidth: 8px;\n\t\theight: 32px;\n\t}\n\n\t@media (hover: hover) {\n\t\t.${className} > button {\n\t\t\tpointer-events: none;\n\t\t}\n\n\t\t.${className}:hover {\n\t\t\tbackground-color: var(--color-background);\n\t\t\ttransition: background-color 0.2s ease-in-out;\n\t\t\ttransition-delay: 0.32s;\n\t\t}\n\n\t\t.${className}:hover > button {\n\t\t\tanimation: ${className}_delayed_link 0.2s forwards ease-in-out;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\n\t\t.${className} > button:focus-visible {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\n\t@keyframes ${className}_delayed_link {\n\t\t0% {\n\t\t\tcursor: inherit;\n\t\t\topacity: .38;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t100% {\n\t\t\tcursor: pointer;\n\t\t\topacity: 1;\n\t\t\tpointer-events: all;\n\t\t}\n\t}`\n\n\treturn <style nonce={editor.options.nonce}>{CSS}</style>\n})\n"],
5
+ "mappings": "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",
6
6
  "names": ["Watermark", "WatermarkInner", "LicenseStyles"]
7
7
  }
package/dist-esm/version.mjs CHANGED
@@ -1,8 +1,8 @@
1
- const version = "3.15.0-canary.36a2aff82b67";
1
+ const version = "3.15.0-canary.3aa231f41374";
2
2
  const publishDates = {
3
3
  major: "2024-09-13T14:36:29.063Z",
4
- minor: "2025-07-15T15:00:46.932Z",
5
- patch: "2025-07-15T15:00:46.932Z"
4
+ minor: "2025-07-21T11:00:52.324Z",
5
+ patch: "2025-07-21T11:00:52.324Z"
6
6
  };
7
7
  export {
8
8
  publishDates,
package/dist-esm/version.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/version.ts"],
4
- "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.15.0-canary.36a2aff82b67'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-07-15T15:00:46.932Z',\n\tpatch: '2025-07-15T15:00:46.932Z',\n}\n"],
4
+ "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.15.0-canary.3aa231f41374'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-07-21T11:00:52.324Z',\n\tpatch: '2025-07-21T11:00:52.324Z',\n}\n"],
5
5
  "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
6
6
  "names": []
7
7
  }
package/editor.css CHANGED
@@ -968,14 +968,14 @@ input,
968
968
  font-size: 14px;
969
969
  font-weight: 500;
970
970
  opacity: 0;
971
- animation: fade-in 0.2s ease-in-out forwards;
971
+ animation: tl-fade-in 0.2s ease-in-out forwards;
972
972
  animation-delay: 0.2s;
973
973
  position: absolute;
974
974
  inset: 0px;
975
975
  z-index: var(--layer-canvas-blocker);
976
976
  }
977
977
 
978
- @keyframes fade-in {
978
+ @keyframes tl-fade-in {
979
979
  0% {
980
980
  opacity: 0;
981
981
  }
@@ -984,6 +984,19 @@ input,
984
984
  }
985
985
  }
986
986
 
987
+ .tl-spinner {
988
+ animation: tl-spin 1s linear infinite;
989
+ }
990
+
991
+ @keyframes tl-spin {
992
+ 0% {
993
+ transform: rotate(0deg);
994
+ }
995
+ 100% {
996
+ transform: rotate(360deg);
997
+ }
998
+ }
999
+
987
1000
  /* ---------------------- Brush --------------------- */
988
1001
 
989
1002
  .tl-brush {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tldraw/editor",
3
- "description": "A tiny little drawing app (editor).",
4
- "version": "3.15.0-canary.36a2aff82b67",
3
+ "description": "tldraw infinite canvas SDK (editor).",
4
+ "version": "3.15.0-canary.3aa231f41374",
5
5
  "author": {
6
6
  "name": "tldraw Inc.",
7
7
  "email": "hello@tldraw.com"
@@ -17,6 +17,7 @@
17
17
  },
18
18
  "keywords": [
19
19
  "tldraw",
20
+ "sdk",
20
21
  "drawing",
21
22
  "app",
22
23
  "development",
@@ -48,12 +49,12 @@
48
49
  "@tiptap/core": "^2.9.1",
49
50
  "@tiptap/pm": "^2.9.1",
50
51
  "@tiptap/react": "^2.9.1",
51
- "@tldraw/state": "3.15.0-canary.36a2aff82b67",
52
- "@tldraw/state-react": "3.15.0-canary.36a2aff82b67",
53
- "@tldraw/store": "3.15.0-canary.36a2aff82b67",
54
- "@tldraw/tlschema": "3.15.0-canary.36a2aff82b67",
55
- "@tldraw/utils": "3.15.0-canary.36a2aff82b67",
56
- "@tldraw/validate": "3.15.0-canary.36a2aff82b67",
52
+ "@tldraw/state": "3.15.0-canary.3aa231f41374",
53
+ "@tldraw/state-react": "3.15.0-canary.3aa231f41374",
54
+ "@tldraw/store": "3.15.0-canary.3aa231f41374",
55
+ "@tldraw/tlschema": "3.15.0-canary.3aa231f41374",
56
+ "@tldraw/utils": "3.15.0-canary.3aa231f41374",
57
+ "@tldraw/validate": "3.15.0-canary.3aa231f41374",
57
58
  "@types/core-js": "^2.5.8",
58
59
  "@use-gesture/react": "^10.3.1",
59
60
  "classnames": "^2.5.1",
package/src/lib/components/default-components/DefaultSpinner.tsx CHANGED
@@ -1,19 +1,19 @@
1
+ import classNames from 'classnames'
2
+
1
3
  /** @public @react */
2
- export function DefaultSpinner() {
4
+ export function DefaultSpinner(props: React.SVGProps<SVGSVGElement>) {
3
5
  return (
4
- <svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
6
+ <svg
7
+ width={16}
8
+ height={16}
9
+ viewBox="0 0 16 16"
10
+ aria-hidden="false"
11
+ {...props}
12
+ className={classNames('tl-spinner', props.className)}
13
+ >
5
14
  <g strokeWidth={2} fill="none" fillRule="evenodd">
6
15
  <circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
7
- <path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
8
- <animateTransform
9
- attributeName="transform"
10
- type="rotate"
11
- from="0 8 8"
12
- to="360 8 8"
13
- dur="1s"
14
- repeatCount="indefinite"
15
- />
16
- </path>
16
+ <path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor" />
17
17
  </g>
18
18
  </svg>
19
19
  )
package/src/lib/hooks/useEditorComponents.tsx CHANGED
@@ -69,7 +69,7 @@ export interface TLEditorComponents {
69
69
  ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
70
70
  ShapeIndicators?: ComponentType | null
71
71
  SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
72
- Spinner?: ComponentType | null
72
+ Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
73
73
  SvgDefs?: ComponentType | null
74
74
  ZoomBrush?: ComponentType<TLBrushProps> | null
75
75
 
package/src/lib/license/Watermark.tsx CHANGED
@@ -143,7 +143,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
143
143
  }
144
144
 
145
145
  .${className}:hover > button {
146
- animation: delayed_link 0.2s forwards ease-in-out;
146
+ animation: ${className}_delayed_link 0.2s forwards ease-in-out;
147
147
  animation-delay: 0.32s;
148
148
  }
149
149
 
@@ -153,7 +153,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
153
153
  }
154
154
 
155
155
 
156
- @keyframes delayed_link {
156
+ @keyframes ${className}_delayed_link {
157
157
  0% {
158
158
  cursor: inherit;
159
159
  opacity: .38;
package/src/version.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  // This file is automatically generated by internal/scripts/refresh-assets.ts.
2
2
  // Do not edit manually. Or do, I'm a comment, not a cop.
3
3
 
4
- export const version = '3.15.0-canary.36a2aff82b67'
4
+ export const version = '3.15.0-canary.3aa231f41374'
5
5
  export const publishDates = {
6
6
  major: '2024-09-13T14:36:29.063Z',
7
- minor: '2025-07-15T15:00:46.932Z',
8
- patch: '2025-07-15T15:00:46.932Z',
7
+ minor: '2025-07-21T11:00:52.324Z',
8
+ patch: '2025-07-21T11:00:52.324Z',
9
9
  }