@dxos/plugin-tldraw 0.10.0

package/dist/lib/chunk-sketch-variant.mjs

@@ -0,0 +1,23 @@
+import { i as makeCanvas, n as Canvas } from "./chunk-types.mjs";
+import { Capability } from "@dxos/app-framework";
+import { Type } from "@dxos/echo";
+import * as Effect from "effect/Effect";
+import { IllustratorCapabilities } from "@dxos/plugin-illustrator/types";
+import { TldrawArticle, TldrawCard } from "#containers";
+import { tldrawBuilder } from "#model";
+//#region src/capabilities/sketch-variant.ts
+var variant = {
+	id: Type.getTypename(Canvas),
+	label: "tldraw",
+	icon: "ph--compass-tool--regular",
+	canvasType: Canvas,
+	createCanvas: () => Effect.sync(() => makeCanvas()),
+	builder: tldrawBuilder,
+	card: TldrawCard,
+	article: TldrawArticle
+};
+var sketch_variant_default = Capability.makeModule(() => Effect.succeed(Capability.contributes(IllustratorCapabilities.VariantProvider, variant)));
+//#endregion
+export { sketch_variant_default as default };
+
+//# sourceMappingURL=chunk-sketch-variant.mjs.map

package/dist/lib/chunk-sketch-variant.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-sketch-variant.mjs","names":[],"sources":["../../src/capabilities/sketch-variant.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability } from '@dxos/app-framework';\nimport { Type } from '@dxos/echo';\nimport { IllustratorCapabilities, type SketchVariant } from '@dxos/plugin-illustrator/types';\n\nimport { TldrawArticle, TldrawCard } from '#containers';\nimport { tldrawBuilder } from '#model';\n\nimport { Tldraw } from '../types';\n\nconst variant: SketchVariant = {\n  id: Type.getTypename(Tldraw.Canvas),\n  label: 'tldraw',\n  icon: 'ph--compass-tool--regular',\n  canvasType: Tldraw.Canvas,\n  createCanvas: () => Effect.sync(() => Tldraw.makeCanvas()),\n  builder: tldrawBuilder,\n  card: TldrawCard,\n  article: TldrawArticle,\n};\n\nexport default Capability.makeModule(() =>\n  Effect.succeed(Capability.contributes(IllustratorCapabilities.VariantProvider, variant)),\n);\n"],"mappings":";;;;;;;;AAeA,IAAM,UAAyB;CAC7B,IAAI,KAAK,YAAY,MAAa;CAClC,OAAO;CACP,MAAM;CACN,YAAY;CACZ,oBAAoB,OAAO,WAAW,WAAkB,CAAC;CACzD,SAAS;CACT,MAAM;CACN,SAAS;AACX;AAEA,IAAA,yBAAe,WAAW,iBACxB,OAAO,QAAQ,WAAW,YAAY,wBAAwB,iBAAiB,OAAO,CAAC,CACzF"}

package/dist/lib/chunk-types.mjs

@@ -0,0 +1,73 @@
+import { Capability } from "@dxos/app-framework";
+import { DXN, Obj, Type } from "@dxos/echo";
+import * as Schema from "effect/Schema";
+import { HiddenAnnotation } from "@dxos/echo/Annotation";
+import { meta } from "#meta";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region src/types/Settings.ts
+var Settings_exports = /* @__PURE__ */ __exportAll({
+	GridSchema: () => GridSchema,
+	Settings: () => Settings$1
+});
+var GridSchema = Schema.Union(Schema.Literal("mesh").annotations({ title: "Mesh" }), Schema.Literal("dotted").annotations({ title: "Dotted" }));
+var Settings$1 = Schema.mutable(Schema.Struct({
+	showGrid: Schema.optional(Schema.Boolean.annotations({
+		title: "Show grid",
+		description: "Display a background grid on the sketch canvas."
+	})),
+	gridType: Schema.optional(GridSchema.annotations({
+		title: "Grid type",
+		description: "Choose between a mesh or dotted background grid."
+	}))
+}));
+//#endregion
+//#region src/types/Tldraw.ts
+var Tldraw_exports = /* @__PURE__ */ __exportAll({
+	Canvas: () => Canvas,
+	TLDRAW_SCHEMA: () => TLDRAW_SCHEMA,
+	isCanvas: () => isCanvas,
+	makeCanvas: () => makeCanvas
+});
+var TLDRAW_SCHEMA = "tldraw.com/2";
+/**
+* Persisted tldraw canvas: an opaque map of RecordId → TLRecord managed by the store adapter.
+* Referenced by the base `Sketch` (plugin-illustrator) as its renderer-specific canvas.
+* Keeps the pre-variant typename (`org.dxos.type.canvas`) so existing stored sketches load
+* without a data migration.
+*/
+var Canvas = class extends Type.makeObject(DXN.make("org.dxos.type.canvas", "0.1.0"))(Schema.Struct({
+	/** Fully qualified external schema reference. */
+	schema: Schema.String.pipe(Schema.optional),
+	content: Schema.Record({
+		key: Schema.String,
+		value: Schema.Any
+	})
+}).pipe(HiddenAnnotation.set(true))) {};
+/**
+* Creates an empty {@link Canvas}.
+*/
+var makeCanvas = ({ schema = TLDRAW_SCHEMA, content = {} } = {}) => Obj.make(Canvas, {
+	schema,
+	content
+});
+/** Type guard for {@link Canvas} objects. */
+var isCanvas = (object) => Obj.instanceOf(Canvas, object);
+//#endregion
+//#region src/types/TldrawCapabilities.ts
+var TldrawCapabilities_exports = /* @__PURE__ */ __exportAll({ Settings: () => Settings });
+var Settings = Capability.make(`${meta.profile.key}.capability.settings`);
+//#endregion
+export { Settings_exports as a, makeCanvas as i, Canvas as n, __exportAll as o, Tldraw_exports as r, TldrawCapabilities_exports as t };
+
+//# sourceMappingURL=chunk-types.mjs.map

package/dist/lib/chunk-types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-types.mjs","names":[],"sources":["../../src/types/Settings.ts","../../src/types/Tldraw.ts","../../src/types/TldrawCapabilities.ts"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\n// @import-as-namespace\n\nimport * as Schema from 'effect/Schema';\n\nexport const GridSchema = Schema.Union(\n  Schema.Literal('mesh').annotations({ title: 'Mesh' }),\n  Schema.Literal('dotted').annotations({ title: 'Dotted' }),\n);\nexport type GridType = Schema.Schema.Type<typeof GridSchema>;\n\nexport const Settings = Schema.mutable(\n  Schema.Struct({\n    showGrid: Schema.optional(\n      Schema.Boolean.annotations({\n        title: 'Show grid',\n        description: 'Display a background grid on the sketch canvas.',\n      }),\n    ),\n    gridType: Schema.optional(\n      GridSchema.annotations({\n        title: 'Grid type',\n        description: 'Choose between a mesh or dotted background grid.',\n      }),\n    ),\n  }),\n);\n\nexport interface Settings extends Schema.Schema.Type<typeof Settings> {}\n","//\n// Copyright 2024 DXOS.org\n//\n\n// @import-as-namespace\n\nimport * as Schema from 'effect/Schema';\n\nimport { DXN, Obj, Type } from '@dxos/echo';\nimport { HiddenAnnotation } from '@dxos/echo/Annotation';\n\nexport const TLDRAW_SCHEMA = 'tldraw.com/2';\n\n/**\n * Persisted tldraw canvas: an opaque map of RecordId → TLRecord managed by the store adapter.\n * Referenced by the base `Sketch` (plugin-illustrator) as its renderer-specific canvas.\n * Keeps the pre-variant typename (`org.dxos.type.canvas`) so existing stored sketches load\n * without a data migration.\n */\nexport class Canvas extends Type.makeObject<Canvas>(DXN.make('org.dxos.type.canvas', '0.1.0'))(\n  Schema.Struct({\n    /** Fully qualified external schema reference. */\n    // TODO(wittjosiah): Remove once the schema is fully internalized.\n    schema: Schema.String.pipe(Schema.optional),\n    content: Schema.Record({ key: Schema.String, value: Schema.Any }),\n  }).pipe(HiddenAnnotation.set(true)),\n) {}\n\nexport type MakeOptions = Partial<Obj.MakeProps<typeof Canvas>>;\n\n/**\n * Creates an empty {@link Canvas}.\n */\nexport const makeCanvas = ({ schema = TLDRAW_SCHEMA, content = {} }: MakeOptions = {}): Canvas =>\n  Obj.make(Canvas, { schema, content });\n\n/** Type guard for {@link Canvas} objects. */\nexport const isCanvas = (object: unknown): object is Canvas => Obj.instanceOf(Canvas, object);\n","//\n// Copyright 2025 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { type Atom } from '@effect-atom/atom-react';\n\nimport { Capability } from '@dxos/app-framework';\n\nimport { meta } from '#meta';\n\n// Inline import to avoid `Settings` namespace alias colliding with the\n// `Settings` capability export below.\nexport const Settings = Capability.make<Atom.Writable<import('./Settings').Settings>>(\n  `${meta.profile.key}.capability.settings`,\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQA,IAAa,aAAa,OAAO,MAC/B,OAAO,QAAQ,MAAM,CAAC,CAAC,YAAY,EAAE,OAAO,OAAO,CAAC,GACpD,OAAO,QAAQ,QAAQ,CAAC,CAAC,YAAY,EAAE,OAAO,SAAS,CAAC,CAC1D;AAGA,IAAa,aAAW,OAAO,QAC7B,OAAO,OAAO;CACZ,UAAU,OAAO,SACf,OAAO,QAAQ,YAAY;EACzB,OAAO;EACP,aAAa;CACf,CAAC,CACH;CACA,UAAU,OAAO,SACf,WAAW,YAAY;EACrB,OAAO;EACP,aAAa;CACf,CAAC,CACH;AACF,CAAC,CACH;;;;;;;;;AClBA,IAAa,gBAAgB;;;;;;;AAQ7B,IAAa,SAAb,cAA4B,KAAK,WAAmB,IAAI,KAAK,wBAAwB,OAAO,CAAC,CAAC,CAC5F,OAAO,OAAO;;CAGZ,QAAQ,OAAO,OAAO,KAAK,OAAO,QAAQ;CAC1C,SAAS,OAAO,OAAO;EAAE,KAAK,OAAO;EAAQ,OAAO,OAAO;CAAI,CAAC;AAClE,CAAC,CAAC,CAAC,KAAK,iBAAiB,IAAI,IAAI,CAAC,CACpC,CAAC,CAAC,CAAC;;;;AAOH,IAAa,cAAc,EAAE,SAAS,eAAe,UAAU,CAAC,MAAmB,CAAC,MAClF,IAAI,KAAK,QAAQ;CAAE;CAAQ;AAAQ,CAAC;;AAGtC,IAAa,YAAY,WAAsC,IAAI,WAAW,QAAQ,MAAM;;;;ACvB5F,IAAa,WAAW,WAAW,KACjC,GAAG,KAAK,QAAQ,IAAI,qBACtB"}

package/dist/lib/components.mjs

@@ -0,0 +1,443 @@
+import { getDeep } from "@dxos/util";
+import { Obj } from "@dxos/echo";
+import "@tldraw/tldraw/tldraw.css";
+import { getAssetUrls } from "@tldraw/assets/selfHosted";
+import { ArrowDownToolbarItem, ArrowLeftToolbarItem, ArrowRightToolbarItem, ArrowToolbarItem, ArrowUpToolbarItem, AssetToolbarItem, CheckBoxToolbarItem, CloudToolbarItem, DefaultQuickActions, DefaultQuickActionsContent, DefaultStylePanelContent, DefaultToolbar, DiamondToolbarItem, DrawToolbarItem, EllipseToolbarItem, EraserToolbarItem, FrameToolbarItem, HandToolbarItem, HexagonToolbarItem, HighlightToolbarItem, LaserToolbarItem, LineToolbarItem, NoteToolbarItem, OvalToolbarItem, RectangleToolbarItem, RhombusToolbarItem, SelectToolbarItem, StarToolbarItem, TextToolbarItem, Tldraw, TldrawUiMenuItem, TriangleToolbarItem, XBoxToolbarItem, useActions, useDefaultColorTheme, useReadonly, useRelevantStyles, useTools } from "@tldraw/tldraw";
+import defaultsDeep from "lodash.defaultsdeep";
+import { memo, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { useMergeRefs } from "@dxos/react-hooks";
+import { composable, composableProps } from "@dxos/react-ui";
+import { useStoreAdapter } from "#hooks";
+import { isShape } from "@tldraw/tlschema";
+import { Doc } from "@dxos/echo-doc";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditor } from "@tldraw/editor";
+import { mx } from "@dxos/ui-theme";
+import { modulate } from "@tldraw/utils";
+//#region src/components/actions.ts
+/**
+* Snap to grid.
+*/
+var handleSnap = async (canvas) => {
+	const snap = (value, tolerance = 40) => {
+		return Math.round(value / tolerance) * tolerance;
+	};
+	const accessor = Doc.createAccessor(canvas, ["content"]);
+	accessor.handle.change((doc) => {
+		const map = getDeep(doc, accessor.path);
+		Object.entries(map ?? {}).forEach(([_id, item]) => {
+			if (isShape(item)) {
+				const { x, y, props } = item;
+				item.x = snap(x);
+				item.y = snap(y);
+				const { geo, w, h } = props;
+				switch (geo) {
+					case "rectangle": {
+						const rect = props;
+						rect.w = snap(w);
+						rect.h = snap(h);
+					}
+				}
+			}
+		});
+	});
+};
+//#endregion
+//#region src/components/custom/CustomMenu.tsx
+var CustomMenu = ({ isMobile }) => {
+	const actions = useActions();
+	const isReadonlyMode = useReadonly();
+	return /* @__PURE__ */ jsx("div", {
+		className: "tlui-style-panel__wrapper",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tlui-menu",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "tlui-buttons__horizontal",
+				"data-ismobile": isMobile,
+				children: /* @__PURE__ */ jsxs(DefaultQuickActions, { children: [/* @__PURE__ */ jsx(DefaultQuickActionsContent, {}), /* @__PURE__ */ jsx(TldrawUiMenuItem, {
+					...actions.snap,
+					disabled: isReadonlyMode
+				})] })
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/custom/CustomStylePanel.tsx
+var CustomStylePanel = memo(({ isMobile }) => {
+	const editor = useEditor();
+	const styles = useRelevantStyles();
+	const handlePointerLeave = useCallback(() => {
+		if (!isMobile) editor.updateInstanceState({ isChangingStyle: false });
+	}, [editor, isMobile]);
+	if (!styles) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("tlui-style-panel", !isMobile && "tlui-style-panel__wrapper"),
+		"data-ismobile": isMobile,
+		onPointerLeave: handlePointerLeave,
+		children: /* @__PURE__ */ jsx(DefaultStylePanelContent, { styles })
+	});
+});
+//#endregion
+//#region src/components/custom/CustomToolbar.tsx
+var DefaultToolbarContent = memo(({ toolsToSplice }) => {
+	const tools = useTools();
+	const toolNodes = [
+		/* @__PURE__ */ jsx(SelectToolbarItem, {}, "select"),
+		/* @__PURE__ */ jsx(HandToolbarItem, {}, "hand"),
+		/* @__PURE__ */ jsx(DrawToolbarItem, {}, "draw"),
+		/* @__PURE__ */ jsx(EraserToolbarItem, {}, "eraser"),
+		/* @__PURE__ */ jsx(ArrowToolbarItem, {}, "arrow"),
+		/* @__PURE__ */ jsx(TextToolbarItem, {}, "text"),
+		/* @__PURE__ */ jsx(NoteToolbarItem, {}, "note"),
+		/* @__PURE__ */ jsx(AssetToolbarItem, {}, "asset"),
+		/* @__PURE__ */ jsx(RectangleToolbarItem, {}, "rectangle"),
+		/* @__PURE__ */ jsx(EllipseToolbarItem, {}, "ellipse"),
+		/* @__PURE__ */ jsx(TriangleToolbarItem, {}, "triangle"),
+		/* @__PURE__ */ jsx(DiamondToolbarItem, {}, "diamond"),
+		/* @__PURE__ */ jsx(HexagonToolbarItem, {}, "hexagon"),
+		/* @__PURE__ */ jsx(OvalToolbarItem, {}, "oval"),
+		/* @__PURE__ */ jsx(RhombusToolbarItem, {}, "rhombus"),
+		/* @__PURE__ */ jsx(StarToolbarItem, {}, "star"),
+		/* @__PURE__ */ jsx(CloudToolbarItem, {}, "cloud"),
+		/* @__PURE__ */ jsx(XBoxToolbarItem, {}, "xbox"),
+		/* @__PURE__ */ jsx(CheckBoxToolbarItem, {}, "checkbox"),
+		/* @__PURE__ */ jsx(ArrowLeftToolbarItem, {}, "arrowLeft"),
+		/* @__PURE__ */ jsx(ArrowUpToolbarItem, {}, "arrowUp"),
+		/* @__PURE__ */ jsx(ArrowDownToolbarItem, {}, "arrowDown"),
+		/* @__PURE__ */ jsx(ArrowRightToolbarItem, {}, "arrowRight"),
+		/* @__PURE__ */ jsx(LineToolbarItem, {}, "line"),
+		/* @__PURE__ */ jsx(HighlightToolbarItem, {}, "highlight"),
+		/* @__PURE__ */ jsx(LaserToolbarItem, {}, "laser"),
+		/* @__PURE__ */ jsx(FrameToolbarItem, {}, "frame")
+	];
+	toolsToSplice.forEach((splice) => {
+		if (splice.position >= 0 && splice.position <= toolNodes.length) toolNodes.splice(splice.position, 0, /* @__PURE__ */ jsx(TldrawUiMenuItem, { ...tools[splice.toolId] }, splice.toolId));
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: toolNodes });
+});
+DefaultToolbarContent.displayName = "DefaultToolbarContent";
+//#endregion
+//#region src/components/custom/DottedGrid.tsx
+var GRID_STEPS$1 = [
+	{
+		min: -1,
+		mid: .15,
+		step: 64
+	},
+	{
+		min: .05,
+		mid: .375,
+		step: 16
+	},
+	{
+		min: .15,
+		mid: 1,
+		step: 4
+	},
+	{
+		min: .7,
+		mid: 2.5,
+		step: 1
+	}
+];
+var DottedGrid = ({ x, y, z, size }) => {
+	const stroke = useDefaultColorTheme().grey.solid;
+	const id = useId();
+	return /* @__PURE__ */ jsxs("svg", {
+		id,
+		className: "tl-grid",
+		version: "1.1",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ jsx("defs", { children: GRID_STEPS$1.map(({ min, mid, step }) => {
+			const s = step * size * z;
+			const xo = .5 + x * z;
+			const yo = .5 + y * z;
+			const gxo = xo > 0 ? xo % s : s + xo % s;
+			const gyo = yo > 0 ? yo % s : s + yo % s;
+			const opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1;
+			const patternId = `${id}-step-${step}`;
+			return /* @__PURE__ */ jsx("pattern", {
+				id: patternId,
+				width: s,
+				height: s,
+				patternUnits: "userSpaceOnUse",
+				children: /* @__PURE__ */ jsx("circle", {
+					className: "tl-grid-dot",
+					cx: gxo,
+					cy: gyo,
+					r: 1,
+					opacity,
+					fill: stroke,
+					stroke
+				})
+			}, patternId);
+		}) }), GRID_STEPS$1.map(({ step }) => {
+			const patternId = `${id}-step-${step}`;
+			return /* @__PURE__ */ jsx("rect", {
+				width: "100%",
+				height: "100%",
+				fill: `url(#${patternId})`
+			}, patternId);
+		})]
+	});
+};
+//#endregion
+//#region src/components/custom/MeshGrid.tsx
+var GRID_STEPS = [
+	{
+		min: -1,
+		mid: .15,
+		step: 64
+	},
+	{
+		min: .05,
+		mid: .375,
+		step: 16
+	},
+	{
+		min: .15,
+		mid: 1,
+		step: 4
+	},
+	{
+		min: .7,
+		mid: 2.5,
+		step: 1
+	}
+];
+var MeshGrid = ({ x, y, z, size }) => {
+	const stroke = useDefaultColorTheme().grey.solid;
+	const id = useId();
+	return /* @__PURE__ */ jsxs("svg", {
+		id,
+		className: "tl-grid",
+		version: "1.1",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ jsx("defs", {
+			id,
+			children: GRID_STEPS.map(({ min, mid, step }, i) => {
+				const s = step * size * z;
+				const xo = .5 + x * z;
+				const yo = .5 + y * z;
+				const gxo = xo > 0 ? xo % s : s + xo % s;
+				const gyo = yo > 0 ? yo % s : s + yo % s;
+				const opacity = (z < mid ? modulate(z, [min, mid], [0, 1]) : 1) * .15;
+				const patternId = `${id}-step-${step}`;
+				return /* @__PURE__ */ jsxs("pattern", {
+					id: patternId,
+					width: s,
+					height: s,
+					patternUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ jsx("line", {
+						style: { stroke },
+						x1: gxo - s,
+						y1: gyo,
+						x2: gxo + s,
+						y2: gyo,
+						opacity
+					}), /* @__PURE__ */ jsx("line", {
+						style: { stroke },
+						x1: gxo,
+						y1: gyo - s,
+						x2: gxo,
+						y2: gyo + s,
+						opacity
+					})]
+				}, patternId);
+			})
+		}), GRID_STEPS.map(({ step }) => {
+			const patternId = `${id}-step-${step}`;
+			return /* @__PURE__ */ jsx("rect", {
+				width: "100%",
+				height: "100%",
+				fill: `url(#${patternId})`
+			}, patternId);
+		})]
+	});
+};
+//#endregion
+//#region src/components/Canvas/Canvas.tsx
+var threadToolId = "thread";
+var gridComponents = {
+	mesh: MeshGrid,
+	dotted: DottedGrid
+};
+var CanvasComponent = composable(({ canvas, readonly = false, autoCenter = true, hideUi = false, assetsBaseUrl = "/assets/plugin-tldraw", settings, onThreadCreate, ...props }, forwardedRef) => {
+	const adapter = useStoreAdapter(canvas);
+	const [editor, setEditor] = useState();
+	useEffect(() => {
+		hideUi ? editor?.blur() : editor?.focus();
+	}, [hideUi, editor]);
+	useEffect(() => {
+		if (!settings) return;
+		const cleanup = editor?.store.listen(({ changes: { updated } }) => {
+			for (const [id, [from, to]] of Object.entries(updated)) if (id === "instance:instance") {
+				const fromInstance = from;
+				const toInstance = to;
+				if (fromInstance.isGridMode !== toInstance.isGridMode) settings.showGrid = toInstance.isGridMode;
+			}
+		}, {
+			source: "user",
+			scope: "all"
+		});
+		return () => cleanup?.();
+	}, [settings, editor]);
+	useEffect(() => {
+		const handleEvent = ({ type, name }) => {
+			if (type === "pointer" && name === "pointer_up") setTimeout(() => adapter.save());
+		};
+		editor?.on("event", handleEvent);
+		return () => {
+			editor?.off("event", handleEvent);
+		};
+	}, [adapter, editor]);
+	useEffect(() => {
+		if (editor) {
+			editor.user.updateUserPreferences({ isSnapMode: true });
+			editor.updateInstanceState({
+				isGridMode: settings?.showGrid !== false && !hideUi,
+				isReadonly: readonly || hideUi
+			});
+			if (readonly || hideUi) editor.setCurrentTool("hand");
+		}
+	}, [
+		editor,
+		settings,
+		hideUi,
+		readonly
+	]);
+	const { ref: resizeRef, width = 0, height } = useResizeDetector();
+	const containerRef = useMergeRefs([forwardedRef, resizeRef]);
+	const [ready, setReady] = useState(!autoCenter);
+	useEffect(() => {
+		if (!editor || !adapter || width === void 0 || height === void 0) return;
+		const isLocked = readonly || hideUi;
+		editor.setCameraOptions({ isLocked: false });
+		editor.setCamera({
+			x: -1,
+			y: -1,
+			z: 1
+		}, { animation: { duration: 0 } });
+		editor.resetZoom();
+		setReady(true);
+		if (!autoCenter) {
+			editor.setCameraOptions({ isLocked });
+			return;
+		}
+		const zoom = () => {
+			zoomToFit(editor, width, height, false);
+		};
+		zoom();
+		editor.setCameraOptions({ isLocked });
+		let timer;
+		const onUpdate = () => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				editor.setCameraOptions({ isLocked: false });
+				zoom();
+				editor.setCameraOptions({ isLocked });
+			}, 200);
+		};
+		const subscription = isLocked ? adapter.store?.listen(() => onUpdate(), { scope: "document" }) : void 0;
+		return () => {
+			clearTimeout(timer);
+			subscription?.();
+		};
+	}, [
+		editor,
+		adapter,
+		width,
+		height,
+		autoCenter,
+		readonly,
+		hideUi
+	]);
+	const assetUrls = useMemo(() => {
+		if (!assetsBaseUrl) return;
+		return defaultsDeep({
+			fonts: { draw: `${assetsBaseUrl}/fonts/Montserrat-Regular.woff2` },
+			icons: { "thread-icon": `${assetsBaseUrl}/icons/icon/chat-teardrop-text.svg` }
+		}, getAssetUrls({ baseUrl: assetsBaseUrl }));
+	}, [assetsBaseUrl]);
+	const overrides = useMemo(() => ({
+		actions: (_editor, actions, _helpers) => ({
+			...actions,
+			snap: {
+				id: "grid-snap",
+				label: "Snap",
+				kbd: "s",
+				icon: "horizontal-align-middle",
+				onSelect: () => {
+					handleSnap(canvas);
+				}
+			}
+		}),
+		tools: (_editor, tools) => {
+			const newTools = { ...tools };
+			newTools[threadToolId] = {
+				id: threadToolId,
+				icon: "thread-icon",
+				label: "Comment",
+				onSelect: () => onThreadCreate?.()
+			};
+			return newTools;
+		}
+	}), [canvas, onThreadCreate]);
+	const components = useMemo(() => ({
+		DebugPanel: null,
+		Grid: gridComponents[settings?.gridType ?? "mesh"],
+		HelpMenu: null,
+		MenuPanel: CustomMenu,
+		NavigationPanel: null,
+		StylePanel: CustomStylePanel,
+		TopPanel: null,
+		ZoomMenu: null,
+		Toolbar: (props) => /* @__PURE__ */ jsx(DefaultToolbar, {
+			...props,
+			children: /* @__PURE__ */ jsx(DefaultToolbarContent, { toolsToSplice: [{
+				toolId: "thread",
+				position: 8
+			}] })
+		})
+	}), [settings]);
+	if (!adapter.store) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, { classNames: "dx-expander" }),
+		style: { visibility: ready ? "visible" : "hidden" },
+		ref: containerRef,
+		children: /* @__PURE__ */ jsx(Tldraw, {
+			store: adapter.store,
+			hideUi,
+			inferDarkMode: true,
+			className: "outline-hidden!",
+			maxAssetSize: 1024 * 1024,
+			assetUrls,
+			overrides,
+			components,
+			onMount: setEditor
+		}, `${Obj.getURI(canvas)}:${adapter.store.id}`)
+	});
+});
+/**
+* Fit content within the viewport and center it, zooming out for oversized content but never
+* magnifying past 100% (zoom is capped at 1).
+*/
+var zoomToFit = (editor, width, height, animate = true) => {
+	const commonBounds = editor.getCurrentPageBounds();
+	if (width && height && commonBounds?.width && commonBounds?.height) {
+		const padding = 60;
+		const zoom = Math.min(1, (width - padding) / commonBounds.width, (height - padding) / commonBounds.height);
+		const center = {
+			x: (width - commonBounds.width * zoom) / 2 / zoom - commonBounds.minX,
+			y: (height - commonBounds.height * zoom) / 2 / zoom - commonBounds.minY,
+			z: zoom
+		};
+		editor.setCamera(center, animate ? { animation: { duration: 250 } } : void 0);
+	}
+};
+//#endregion
+export { CanvasComponent };
+
+//# sourceMappingURL=components.mjs.map

package/dist/lib/components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.mjs","names":[],"sources":["../../src/components/actions.ts","../../src/components/custom/CustomMenu.tsx","../../src/components/custom/CustomStylePanel.tsx","../../src/components/custom/CustomToolbar.tsx","../../src/components/custom/DottedGrid.tsx","../../src/components/custom/MeshGrid.tsx","../../src/components/Canvas/Canvas.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport type { TLRecord } from '@tldraw/tldraw';\nimport { isShape } from '@tldraw/tlschema';\n\nimport { Doc } from '@dxos/echo-doc';\nimport { getDeep } from '@dxos/util';\n\nimport type { Tldraw } from '#types';\n\n/**\n * Snap to grid.\n */\nexport const handleSnap = async (canvas: Tldraw.Canvas) => {\n  const snap = (value: number, tolerance = 40) => {\n    return Math.round(value / tolerance) * tolerance;\n  };\n\n  // TODO(burdon): Use context to access document.\n  const accessor = Doc.createAccessor(canvas, ['content']);\n  accessor.handle.change((doc) => {\n    const map = getDeep<Record<string, TLRecord>>(doc, accessor.path);\n    Object.entries(map ?? {}).forEach(([_id, item]) => {\n      if (isShape(item)) {\n        const { x, y, props } = item;\n        item.x = snap(x);\n        item.y = snap(y);\n        type Rect = { geo: string; w: number; h: number };\n        const { geo, w, h } = props as Rect;\n        switch (geo) {\n          case 'rectangle': {\n            const rect = props as Rect;\n            rect.w = snap(w);\n            rect.h = snap(h);\n          }\n        }\n      }\n    });\n  });\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  DefaultQuickActions,\n  DefaultQuickActionsContent,\n  TldrawUiMenuItem,\n  type TLUiStylePanelProps,\n  useActions,\n  useReadonly,\n} from '@tldraw/tldraw';\nimport React from 'react';\n\nexport const CustomMenu = ({ isMobile }: TLUiStylePanelProps) => {\n  const actions = useActions();\n  const isReadonlyMode = useReadonly();\n\n  return (\n    <div className='tlui-style-panel__wrapper'>\n      <div className='tlui-menu'>\n        <div className='tlui-buttons__horizontal' data-ismobile={isMobile}>\n          <DefaultQuickActions>\n            <DefaultQuickActionsContent />\n            <TldrawUiMenuItem {...actions.snap} disabled={isReadonlyMode} />\n          </DefaultQuickActions>\n        </div>\n      </div>\n    </div>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEditor } from '@tldraw/editor';\nimport { DefaultStylePanelContent, type TLUiStylePanelProps, useRelevantStyles } from '@tldraw/tldraw';\nimport React, { memo, useCallback } from 'react';\n\nimport { mx } from '@dxos/ui-theme';\n\nexport const CustomStylePanel = memo(({ isMobile }: TLUiStylePanelProps) => {\n  const editor = useEditor();\n  const styles = useRelevantStyles();\n  const handlePointerLeave = useCallback(() => {\n    if (!isMobile) {\n      editor.updateInstanceState({ isChangingStyle: false });\n    }\n  }, [editor, isMobile]);\n\n  if (!styles) {\n    return null;\n  }\n\n  // TODO(burdon): Currently the global STYLES (fonts, colors, etc.) are not pluggable.\n  // TODO(burdon): Implement custom style panel to replace fonts.\n  // https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx\n  return (\n    <div\n      className={mx('tlui-style-panel', !isMobile && 'tlui-style-panel__wrapper')}\n      data-ismobile={isMobile}\n      onPointerLeave={handlePointerLeave}\n    >\n      {/* <CommonStylePickerSet theme={theme} styles={styles} /> */}\n      {/* {!hideText && <TextStylePickerSet theme={theme} styles={styles} />} */}\n      <DefaultStylePanelContent styles={styles} />\n    </div>\n  );\n});\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  ArrowDownToolbarItem,\n  ArrowLeftToolbarItem,\n  ArrowRightToolbarItem,\n  ArrowToolbarItem,\n  ArrowUpToolbarItem,\n  AssetToolbarItem,\n  CheckBoxToolbarItem,\n  CloudToolbarItem,\n  DiamondToolbarItem,\n  DrawToolbarItem,\n  EllipseToolbarItem,\n  EraserToolbarItem,\n  FrameToolbarItem,\n  HandToolbarItem,\n  HexagonToolbarItem,\n  HighlightToolbarItem,\n  LaserToolbarItem,\n  LineToolbarItem,\n  NoteToolbarItem,\n  OvalToolbarItem,\n  RectangleToolbarItem,\n  RhombusToolbarItem,\n  SelectToolbarItem,\n  StarToolbarItem,\n  TextToolbarItem,\n  TldrawUiMenuItem,\n  TriangleToolbarItem,\n  XBoxToolbarItem,\n  useTools,\n} from '@tldraw/tldraw';\nimport React, { memo } from 'react';\n\ntype ToolSplice = { toolId: string; position: number };\n\nconst DefaultToolbarContent = memo(({ toolsToSplice }: { toolsToSplice: ToolSplice[] }) => {\n  const tools = useTools();\n\n  const toolNodes = [\n    <SelectToolbarItem key='select' />,\n    <HandToolbarItem key='hand' />,\n    <DrawToolbarItem key='draw' />,\n    <EraserToolbarItem key='eraser' />,\n    <ArrowToolbarItem key='arrow' />,\n    <TextToolbarItem key='text' />,\n    <NoteToolbarItem key='note' />,\n    <AssetToolbarItem key='asset' />,\n    <RectangleToolbarItem key='rectangle' />,\n    <EllipseToolbarItem key='ellipse' />,\n    <TriangleToolbarItem key='triangle' />,\n    <DiamondToolbarItem key='diamond' />,\n    <HexagonToolbarItem key='hexagon' />,\n    <OvalToolbarItem key='oval' />,\n    <RhombusToolbarItem key='rhombus' />,\n    <StarToolbarItem key='star' />,\n    <CloudToolbarItem key='cloud' />,\n    <XBoxToolbarItem key='xbox' />,\n    <CheckBoxToolbarItem key='checkbox' />,\n    <ArrowLeftToolbarItem key='arrowLeft' />,\n    <ArrowUpToolbarItem key='arrowUp' />,\n    <ArrowDownToolbarItem key='arrowDown' />,\n    <ArrowRightToolbarItem key='arrowRight' />,\n    <LineToolbarItem key='line' />,\n    <HighlightToolbarItem key='highlight' />,\n    <LaserToolbarItem key='laser' />,\n    <FrameToolbarItem key='frame' />,\n  ];\n\n  toolsToSplice.forEach((splice) => {\n    if (splice.position >= 0 && splice.position <= toolNodes.length) {\n      toolNodes.splice(\n        splice.position,\n        0,\n        <TldrawUiMenuItem key={splice.toolId} {...tools[splice.toolId as keyof typeof tools]} />,\n      );\n    }\n  });\n\n  return <>{toolNodes}</>;\n});\n\nDefaultToolbarContent.displayName = 'DefaultToolbarContent';\n\nexport { DefaultToolbarContent };\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type TLGridProps, useDefaultColorTheme } from '@tldraw/tldraw';\nimport { modulate } from '@tldraw/utils';\nimport React, { useId } from 'react';\n\nconst GRID_STEPS = [\n  { min: -1, mid: 0.15, step: 64 },\n  { min: 0.05, mid: 0.375, step: 16 },\n  { min: 0.15, mid: 1, step: 4 },\n  { min: 0.7, mid: 2.5, step: 1 },\n];\n\n// This is a modified version of the default grid from tldraw:\n// https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/components/default-components/DefaultGrid.tsx\n//\n// We're overriding it to work around a state coupling bug in tldraw where multiple grid instances\n// on the same page interfere with each other due to shared IDs. Our solution uses React.useId()\n// to generate unique IDs for each grid instance, preventing conflicts.\n//\n// TODO(Zan): Revert this to the default implementation once the issue has been fixed upstream in tldraw.\nexport const DottedGrid = ({ x, y, z, size }: TLGridProps) => {\n  const theme = useDefaultColorTheme();\n  const stroke = theme.grey.solid;\n  const id = useId();\n\n  return (\n    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>\n      <defs>\n        {GRID_STEPS.map(({ min, mid, step }) => {\n          const s = step * size * z;\n          const xo = 0.5 + x * z;\n          const yo = 0.5 + y * z;\n          const gxo = xo > 0 ? xo % s : s + (xo % s);\n          const gyo = yo > 0 ? yo % s : s + (yo % s);\n          const opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1;\n          const patternId = `${id}-step-${step}`;\n          return (\n            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>\n              <circle className='tl-grid-dot' cx={gxo} cy={gyo} r={1} opacity={opacity} fill={stroke} stroke={stroke} />\n            </pattern>\n          );\n        })}\n      </defs>\n      {GRID_STEPS.map(({ step }) => {\n        const patternId = `${id}-step-${step}`;\n        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;\n      })}\n    </svg>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type TLGridProps } from '@tldraw/editor';\nimport { useDefaultColorTheme } from '@tldraw/tldraw';\nimport { modulate } from '@tldraw/utils';\nimport React, { useId } from 'react';\n\nconst GRID_STEPS = [\n  { min: -1, mid: 0.15, step: 64 },\n  { min: 0.05, mid: 0.375, step: 16 },\n  { min: 0.15, mid: 1, step: 4 },\n  { min: 0.7, mid: 2.5, step: 1 },\n];\n\nexport const MeshGrid = ({ x, y, z, size }: TLGridProps) => {\n  const theme = useDefaultColorTheme();\n  const stroke = theme.grey.solid;\n  const id = useId();\n\n  return (\n    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>\n      <defs id={id}>\n        {GRID_STEPS.map(({ min, mid, step }, i) => {\n          const s = step * size * z;\n          const xo = 0.5 + x * z;\n          const yo = 0.5 + y * z;\n          const gxo = xo > 0 ? xo % s : s + (xo % s);\n          const gyo = yo > 0 ? yo % s : s + (yo % s);\n          const opacity = (z < mid ? modulate(z, [min, mid], [0, 1]) : 1) * 0.15;\n          const patternId = `${id}-step-${step}`;\n          return (\n            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>\n              <line style={{ stroke }} x1={gxo - s} y1={gyo} x2={gxo + s} y2={gyo} opacity={opacity} />\n              <line style={{ stroke }} x1={gxo} y1={gyo - s} x2={gxo} y2={gyo + s} opacity={opacity} />\n            </pattern>\n          );\n        })}\n      </defs>\n      {GRID_STEPS.map(({ step }) => {\n        const patternId = `${id}-step-${step}`;\n        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;\n      })}\n    </svg>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport '@tldraw/tldraw/tldraw.css';\nimport './theme.css';\n\nimport { getAssetUrls } from '@tldraw/assets/selfHosted';\nimport { type TLEventInfo, type TLGridProps, type TLInstance } from '@tldraw/editor';\nimport { DefaultToolbar, type Editor, Tldraw as TldrawEditor, type TLUiAssetUrlOverrides } from '@tldraw/tldraw';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type FC, useEffect, useMemo, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { Obj } from '@dxos/echo';\nimport { useMergeRefs } from '@dxos/react-hooks';\nimport { composable, composableProps } from '@dxos/react-ui';\n\nimport { useStoreAdapter } from '#hooks';\nimport { type Settings, type Tldraw } from '#types';\n\nimport { handleSnap } from '../actions';\nimport { CustomMenu, CustomStylePanel, DefaultToolbarContent, DottedGrid, MeshGrid } from '../custom';\n\nconst threadToolId = 'thread';\n\nconst gridComponents: Record<Settings.GridType, FC<TLGridProps>> = {\n  mesh: MeshGrid,\n  dotted: DottedGrid,\n};\n\nexport type CanvasProps = {\n  canvas: Tldraw.Canvas;\n  readonly?: boolean;\n  autoCenter?: boolean;\n  hideUi?: boolean;\n  assetsBaseUrl?: string | null;\n  settings?: Settings.Settings;\n  onThreadCreate?: () => void;\n};\n\nexport const CanvasComponent = composable<HTMLDivElement, CanvasProps>(\n  (\n    {\n      canvas,\n      readonly = false,\n      autoCenter = true,\n      hideUi = false,\n      assetsBaseUrl = '/assets/plugin-tldraw',\n      settings,\n      onThreadCreate,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const adapter = useStoreAdapter(canvas);\n    const [editor, setEditor] = useState<Editor>();\n\n    // Focus.\n    useEffect(() => {\n      hideUi ? editor?.blur() : editor?.focus();\n    }, [hideUi, editor]);\n\n    // Editor State.\n    useEffect(() => {\n      if (!settings) {\n        return;\n      }\n\n      const cleanup = editor?.store.listen(\n        ({ changes: { updated } }) => {\n          for (const [id, [from, to]] of Object.entries(updated)) {\n            if (id === 'instance:instance') {\n              const fromInstance = from as TLInstance;\n              const toInstance = to as TLInstance;\n              if (fromInstance.isGridMode !== toInstance.isGridMode) {\n                settings.showGrid = toInstance.isGridMode;\n              }\n            }\n          }\n        },\n        { source: 'user', scope: 'all' },\n      );\n\n      // TODO(burdon): Combine.\n      return () => cleanup?.();\n    }, [settings, editor]);\n\n    // Editor events.\n    useEffect(() => {\n      // https://tldraw.dev/examples/editor-api/canvas-events\n      const handleEvent = ({ type, name }: TLEventInfo) => {\n        if (type === 'pointer' && name === 'pointer_up') {\n          // Defer: the 'event' stream fires before the active tool commits its shape to the\n          // store, so an immediate save flushes one gesture behind (losing the final stroke).\n          setTimeout(() => adapter.save());\n        }\n      };\n\n      editor?.on('event', handleEvent);\n      return () => {\n        editor?.off('event', handleEvent);\n      };\n    }, [adapter, editor]);\n\n    // UI state.\n    useEffect(() => {\n      if (editor) {\n        editor.user.updateUserPreferences({\n          // TODO(burdon): Adjust snap threshold.\n          isSnapMode: true,\n        });\n        editor.updateInstanceState({\n          isGridMode: settings?.showGrid !== false && !hideUi,\n          isReadonly: readonly || hideUi,\n        });\n        if (readonly || hideUi) {\n          editor.setCurrentTool('hand');\n        }\n      }\n    }, [editor, settings, hideUi, readonly]);\n\n    // Zoom to fit.\n    const { ref: resizeRef, width = 0, height } = useResizeDetector();\n    const containerRef = useMergeRefs([forwardedRef, resizeRef]);\n    const [ready, setReady] = useState(!autoCenter);\n    useEffect(() => {\n      if (!editor || !adapter || width === undefined || height === undefined) {\n        return;\n      }\n\n      const isLocked = readonly || hideUi;\n\n      // Unlock to allow programmatic camera positioning.\n      editor.setCameraOptions({ isLocked: false });\n\n      // Set frame so that top left of grid is inset with our border (if no content).\n      editor.setCamera({ x: -1, y: -1, z: 1 }, { animation: { duration: 0 } });\n      editor.resetZoom();\n\n      setReady(true);\n      if (!autoCenter) {\n        editor.setCameraOptions({ isLocked: isLocked });\n        return;\n      }\n\n      const zoom = () => {\n        zoomToFit(editor, width, height, false);\n      };\n\n      zoom();\n      editor.setCameraOptions({ isLocked: isLocked });\n\n      let timer: ReturnType<typeof setTimeout> | undefined;\n      const onUpdate = () => {\n        clearTimeout(timer);\n        timer = setTimeout(() => {\n          editor.setCameraOptions({ isLocked: false });\n          zoom();\n          editor.setCameraOptions({ isLocked: isLocked });\n        }, 200);\n      };\n      const subscription = isLocked ? adapter.store?.listen(() => onUpdate(), { scope: 'document' }) : undefined;\n      return () => {\n        clearTimeout(timer);\n        subscription?.();\n      };\n    }, [editor, adapter, width, height, autoCenter, readonly, hideUi]);\n\n    // NOTE: Currently copying assets to composer-app public/assets/tldraw.\n    // https://tldraw.dev/installation#Self-hosting-static-assets\n    const assetUrls: TLUiAssetUrlOverrides = useMemo(() => {\n      if (!assetsBaseUrl) {\n        return undefined;\n      }\n\n      return defaultsDeep(\n        {\n          // Change default draw font.\n          // TODO(burdon): Change icon to match font.\n          fonts: { draw: `${assetsBaseUrl}/fonts/Montserrat-Regular.woff2` },\n          icons: {\n            'thread-icon': `${assetsBaseUrl}/icons/icon/chat-teardrop-text.svg`,\n          },\n        },\n        getAssetUrls({ baseUrl: assetsBaseUrl }),\n      );\n    }, [assetsBaseUrl]);\n\n    const overrides = useMemo(\n      () => ({\n        actions: (_editor: Editor, actions: any, _helpers: any) => ({\n          ...actions,\n          snap: {\n            id: 'grid-snap',\n            label: 'Snap',\n            kbd: 's',\n            icon: 'horizontal-align-middle',\n            onSelect: () => {\n              void handleSnap(canvas);\n            },\n          },\n        }),\n        tools: (_editor: Editor, tools: any) => {\n          const newTools = { ...tools };\n          newTools[threadToolId] = {\n            id: threadToolId,\n            icon: 'thread-icon',\n            label: 'Comment', // TODO(Zan): Use translation lookup here.\n            onSelect: () => onThreadCreate?.(),\n          };\n          return newTools;\n        },\n      }),\n      [canvas, onThreadCreate],\n    );\n\n    const components = useMemo(\n      () => ({\n        DebugPanel: null,\n        Grid: gridComponents[settings?.gridType ?? 'mesh'],\n        HelpMenu: null,\n        MenuPanel: CustomMenu,\n        NavigationPanel: null,\n        StylePanel: CustomStylePanel,\n        TopPanel: null,\n        ZoomMenu: null,\n        Toolbar: (props: any) => (\n          <DefaultToolbar {...props}>\n            <DefaultToolbarContent toolsToSplice={[{ toolId: 'thread', position: 8 }]} />\n          </DefaultToolbar>\n        ),\n      }),\n      [settings],\n    );\n\n    if (!adapter.store) {\n      return null;\n    }\n\n    return (\n      <div\n        {...composableProps(props, { classNames: 'dx-expander' })}\n        style={{ visibility: ready ? 'visible' : 'hidden' }}\n        ref={containerRef}\n      >\n        <TldrawEditor\n          // Rebind when the adapter recreates its store (e.g. an effect-churn reopen) — a stale\n          // binding draws into an orphaned store whose change listeners are gone, so saves no-op.\n          key={`${Obj.getURI(canvas)}:${adapter.store.id}`}\n          store={adapter.store}\n          hideUi={hideUi}\n          inferDarkMode\n          className='outline-hidden!'\n          maxAssetSize={1024 * 1024}\n          assetUrls={assetUrls}\n          overrides={overrides}\n          components={components}\n          onMount={setEditor}\n        />\n      </div>\n    );\n  },\n);\n\n/**\n * Fit content within the viewport and center it, zooming out for oversized content but never\n * magnifying past 100% (zoom is capped at 1).\n */\nconst zoomToFit = (editor: Editor, width: number, height: number, animate = true) => {\n  const commonBounds = editor.getCurrentPageBounds();\n  if (width && height && commonBounds?.width && commonBounds?.height) {\n    const padding = 60;\n    // Zoom out to fit oversized content; cap at 1 so small content is never zoomed in.\n    const zoom = Math.min(1, (width - padding) / commonBounds.width, (height - padding) / commonBounds.height);\n    const center = {\n      x: (width - commonBounds.width * zoom) / 2 / zoom - commonBounds.minX,\n      y: (height - commonBounds.height * zoom) / 2 / zoom - commonBounds.minY,\n      z: zoom,\n    };\n\n    editor.setCamera(center, animate ? { animation: { duration: 250 } } : undefined);\n  }\n};\n"],"mappings":"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"}

package/dist/lib/containers.mjs

@@ -0,0 +1,8 @@
+import { lazy } from "react";
+//#region src/containers/index.ts
+var TldrawArticle = lazy(() => import("./chunk-TldrawArticle.mjs"));
+var TldrawCard = lazy(() => import("./chunk-TldrawCard.mjs"));
+//#endregion
+export { TldrawArticle, TldrawCard };
+
+//# sourceMappingURL=containers.mjs.map

package/dist/lib/containers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.mjs","names":[],"sources":["../../src/containers/index.ts"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type ComponentType, lazy } from 'react';\n\nexport const TldrawArticle: ComponentType<any> = lazy(() => import('./TldrawArticle'));\nexport const TldrawCard: ComponentType<any> = lazy(() => import('./TldrawCard'));\n"],"mappings":";;AAMA,IAAa,gBAAoC,WAAW,OAAO,4BAAkB;AACrF,IAAa,aAAiC,WAAW,OAAO,yBAAe"}