dsh-image-gen 0.6.0 → 0.6.1

package/lib/client.js

@@ -48,6 +48,30 @@ window.__ModuleLoader__.load({
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let react = require("react");
 		react = __toESM(react, 1);
+		//#region lib/types/client/tl/css-supports-shim.js
+		/**
+		* CSS.supports shim for tldraw's module-scope environment probe (#40).
+		*
+		* @tldraw/editor's tlenv initialization runs at import time and calls
+		* CSS.supports("color", "color(display-p3 1 1 1)") guarded only by
+		* `typeof CSS !== "undefined"`. Environments that expose a `CSS` global
+		* without the `supports` method (embedded webviews with partial globals,
+		* browsers predating the API) therefore throw "CSS.supports is not a
+		* function" while DSH imports the client entry, which aborts the whole
+		* plugin load - the image tools and gallery die together with the canvas.
+		*
+		* This module must be the first import of the client entry so it evaluates
+		* before any tldraw code. It installs a conservative `supports()` returning
+		* false only when the method is genuinely missing; modern browsers are
+		* untouched (the probe already treats false as "no P3 / no backdrop filter",
+		* which only downgrades the canvas color space, not the plugin).
+		*/
+		/** Install a fallback `supports` on a CSS-like object when the method is missing. */
+		function ensureCssSupports(cssLike) {
+			if (typeof cssLike.supports !== "function") cssLike.supports = () => false;
+		}
+		if (typeof CSS !== "undefined") ensureCssSupports(CSS);
+		//#endregion
 		//#region lib/types/shared.js
 		/** Browser route used by the generated-image card. */
 		const IMAGE_ROUTE = "/plugins/dsh-image-gen/image";
@@ -906,6 +930,28 @@ window.__ModuleLoader__.load({
 		* This source code is licensed under the ISC license.
 		* See the LICENSE file in the root directory of this source tree.
 		*/
+		const Info = createLucideIcon("info", [
+			["circle", {
+				cx: "12",
+				cy: "12",
+				r: "10",
+				key: "1mglay"
+			}],
+			["path", {
+				d: "M12 16v-4",
+				key: "1dtifu"
+			}],
+			["path", {
+				d: "M12 8h.01",
+				key: "e9boi3"
+			}]
+		]);
+		/**
+		* @license lucide-react v1.38.0 - ISC
+		*
+		* This source code is licensed under the ISC license.
+		* See the LICENSE file in the root directory of this source tree.
+		*/
 		const LoaderCircle = createLucideIcon("loader-circle", [["path", {
 			d: "M21 12a9 9 0 1 1-6.219-8.56",
 			key: "13zald"
@@ -115467,6 +115513,84 @@ img.ProseMirror-separator {
 		//#region node_modules/.pnpm/tldraw@5.3.0_@floating-ui+d_6aac9d8fd21c97d7663c6dd43e72f388/node_modules/tldraw/dist-esm/index.mjs
 		registerTldrawLibraryVersion("tldraw", "5.3.0", "esm");
 		//#endregion
+		//#region lib/types/client/tl/tl-brand-tokens.js
+		/**
+		* Single source of truth for the brand colors used across the tldraw surface.
+		*
+		* Consumed by tl-theme-css.ts (DOM chrome via CSS variables) and
+		* tl-brand-theme.ts (canvas renderer via the runtime theme patch), so
+		* re-tinting the surface is a one-file change instead of a hex hunt across
+		* two files. Values mirror the workbench tokens in studio-style.ts
+		* (`--ig-blue` and friends).
+		*/
+		/** Brand blue, shared with studio-style.ts `--ig-blue`. */
+		const BRAND_BLUE = "#2f64f5";
+		/** Brand blue RGB components, for composing rgba() tints in one place. */
+		const BRAND_BLUE_RGB = "47, 100, 245";
+		/** Brand blue tuned for dark surfaces. */
+		const BRAND_BLUE_DARK = "#5b83f8";
+		/** Brand blue (dark) RGB components, for composing rgba() tints. */
+		const BRAND_BLUE_DARK_RGB = "91, 131, 248";
+		/** Cool ink from the workbench foreground family. */
+		const BRAND_INK = "#182033";
+		/** Flat canvas surface; also feeds export backgrounds, so it stays solid. */
+		const CANVAS_BG = "#e6ebf5";
+		/** Canvas gradient stops (top and bottom); the mid stop is CANVAS_BG. */
+		const CANVAS_BG_TOP = "#eef2fa";
+		const CANVAS_BG_BOTTOM = "#dfe6f4";
+		//#endregion
+		//#region lib/types/client/tl/tl-brand-theme.js
+		/** Re-tint the palette's "blue" family to the brand blue. */
+		function brandBluePalette(colors, dark) {
+			const blue = colors.blue;
+			if (typeof blue !== "object" || blue === null) return colors;
+			const solid = dark ? BRAND_BLUE_DARK : BRAND_BLUE;
+			return {
+				...colors,
+				blue: {
+					...blue,
+					solid,
+					fill: solid,
+					linedFill: dark ? blue.linedFill : "#5a82f7",
+					frameHeadingStroke: dark ? blue.frameHeadingStroke : "#6f8ff5",
+					frameHeadingFill: dark ? blue.frameHeadingFill : "#f7f9ff",
+					frameStroke: dark ? blue.frameStroke : "#6f8ff5",
+					frameFill: dark ? blue.frameFill : "#f7f9ff",
+					noteFill: dark ? blue.noteFill : "#91a9ff",
+					semi: dark ? blue.semi : "#e3e9fd",
+					pattern: dark ? blue.pattern : "#5a82f7"
+				}
+			};
+		}
+		/** Re-tint the special (string) theme colors: selection, marquee, ink, surface. */
+		function brandSpecials(colors, dark) {
+			const lightOnly = dark ? {} : {
+				text: BRAND_INK,
+				background: CANVAS_BG,
+				negativeSpace: CANVAS_BG
+			};
+			return {
+				...colors,
+				...lightOnly,
+				selectionStroke: dark ? BRAND_BLUE_DARK : BRAND_BLUE,
+				selectionFill: `rgba(${dark ? BRAND_BLUE_DARK_RGB : BRAND_BLUE_RGB}, ${dark ? "0.22" : "0.15"})`,
+				brushFill: dark ? "rgba(148, 163, 184, 0.12)" : "rgba(100, 116, 139, 0.1)",
+				brushStroke: dark ? "rgba(148, 163, 184, 0.3)" : "rgba(100, 116, 139, 0.28)"
+			};
+		}
+		/** Apply the brand theme patch to a freshly mounted tldraw editor. */
+		function applyBrandTheme(editor) {
+			const base = editor.getTheme("default");
+			if (base === void 0) return;
+			editor.updateTheme({
+				...base,
+				colors: {
+					light: brandBluePalette(brandSpecials(base.colors.light, false), false),
+					dark: brandBluePalette(brandSpecials(base.colors.dark, true), true)
+				}
+			});
+		}
+		//#endregion
 		//#region lib/types/client/tl/tl-canvas-bridge.js
 		const items = [];
 		const listeners = /* @__PURE__ */ new Set();
@@ -115772,6 +115896,15 @@ img.ProseMirror-separator {
 		const MAX_DISPLAY_SIDE = 380;
 		const GRID_GAP = 40;
 		const GRID_COLS = 3;
+		/**
+		* Dock the stock toolbar vertically along the left edge (Figma-style) instead
+		* of tldraw's signature bottom-center pill. It is still the same
+		* DefaultToolbar with the same tools and overflow handling — only the
+		* orientation changes, which is what makes the whole composition read as our
+		* own surface rather than stock tldraw. TL_THEME_CSS offsets it from the
+		* screen edge like the other floating cards.
+		*/
+		const StudioToolbar = () => (0, react_jsx_runtime.jsx)(DefaultToolbar, { orientation: "vertical" });
 		function tlAssetIdFor(galleryId) {
 			return `asset:ig-${galleryId.replace(/[^A-Za-z0-9_-]/g, "_")}`;
 		}
@@ -115941,16 +116074,21 @@ img.ProseMirror-separator {
 			(0, react.useEffect)(() => subscribeTlLandings(processQueue), [processQueue]);
 			return (0, react_jsx_runtime.jsx)("div", {
 				className: "dsh-ig-tl-canvas",
-				children: (0, react_jsx_runtime.jsx)(Tldraw, { onMount: (editor) => {
-					editorRef.current = editor;
-					console.info(`[dsh-image-gen] tldraw mounted (instance ${editor.id})`);
-					processQueue();
-					const stopSync = startCanvasSync(editor);
-					return () => {
-						stopSync();
-						editorRef.current = null;
-					};
-				} })
+				children: (0, react_jsx_runtime.jsx)(Tldraw, {
+					components: { Toolbar: StudioToolbar },
+					onMount: (editor) => {
+						editorRef.current = editor;
+						applyBrandTheme(editor);
+						editor.updateInstanceState({ isGridMode: true });
+						console.info(`[dsh-image-gen] tldraw mounted (instance ${editor.id})`);
+						processQueue();
+						const stopSync = startCanvasSync(editor);
+						return () => {
+							stopSync();
+							editorRef.current = null;
+						};
+					}
+				})
 			});
 		});
 		//#endregion
@@ -116057,7 +116195,8 @@ img.ProseMirror-separator {
 				collapseGenerate: "折叠生成面板",
 				expandGenerate: "展开生成面板",
 				generatePanel: "生成面板",
-				findInspiration: "找灵感"
+				findInspiration: "找灵感",
+				infiniteCanvasHint: "无限画布与侧边栏会话联动，才是完整功能。打开 DSH 右侧边栏的「图像工作台」即可解锁。"
 			},
 			en: {
 				title: "Cloud Image Studio",
@@ -116158,10 +116297,13 @@ img.ProseMirror-separator {
 				collapseGenerate: "Collapse generate panel",
 				expandGenerate: "Expand generate panel",
 				generatePanel: "Generate",
-				findInspiration: "Find inspiration"
+				findInspiration: "Find inspiration",
+				infiniteCanvasHint: "The infinite canvas is at its best when linked with the sidebar conversation. Open Image Studio from the DSH right sidebar to unlock the full experience."
 			}
 		};
-		const StudioView = ({ locale, workspace, initialPrompt, initialCanvasSurface, onInitialPromptApplied, onOpenInspiration }) => {
+		/** localStorage flag remembering that the one-time infinite-canvas hint was dismissed. */
+		const INFINITE_CANVAS_HINT_KEY = "dsh-ig-infinite-canvas-hint-dismissed";
+		const StudioView = ({ locale, workspace, initialPrompt, initialCanvasSurface, showInfiniteCanvasHint, onInitialPromptApplied, onOpenInspiration }) => {
 			const [lang, setLang] = (0, react.useState)(() => locale?.getSnapshot?.().active?.startsWith("en") ? "en" : "zh");
 			const [config, setConfig] = (0, react.useState)(null);
 			const [configLoading, setConfigLoading] = (0, react.useState)(true);
@@ -116169,8 +116311,9 @@ img.ProseMirror-separator {
 			const [items, setItems] = (0, react.useState)([]);
 			const [sidebarCollapsed, setSidebarCollapsed] = (0, react.useState)(false);
 			/** Manual-only collapse for the right generate form; the form stays put in
-			*  narrow seats because it is the primary generation surface. */
-			const [generateCollapsed, setGenerateCollapsed] = (0, react.useState)(false);
+			*  narrow seats because it is the primary generation surface. Starts folded
+			*  when the studio opens straight into the infinite canvas. */
+			const [generateCollapsed, setGenerateCollapsed] = (0, react.useState)(initialCanvasSurface === "infinite");
 			/** Workbench root, observed so a narrow column (right sidebar) can fold the recent rail. */
 			const workbenchRootRef = (0, react.useRef)(null);
 			/** Set once the user toggles the rail by hand; auto-folding then stands down for this mount. */
@@ -116203,11 +116346,29 @@ img.ProseMirror-separator {
 			const dragStartRef = (0, react.useRef)(null);
 			const hasDraggedRef = (0, react.useRef)(false);
 			const [canvasSurface, setCanvasSurface] = (0, react.useState)(initialCanvasSurface ?? "preview");
+			/** Generate-panel state from before the infinite canvas was opened, so the
+			*  panel is restored (not just forced open) when returning to preview. */
+			const generatePanelBeforeInfiniteRef = (0, react.useRef)(false);
 			/** Mirrors `canvasSurface` for async reads: a generation started on the
 			*  infinite canvas must land there even if the user flips back to preview
 			*  while the request is in flight. */
 			const canvasSurfaceRef = (0, react.useRef)(canvasSurface);
 			canvasSurfaceRef.current = canvasSurface;
+			/** One-time infinite-canvas entry hint, dismissed per-install (localStorage)
+			*  so it educates once instead of nagging on every visit. */
+			const [canvasHintDismissed, setCanvasHintDismissed] = (0, react.useState)(() => {
+				try {
+					return localStorage.getItem(INFINITE_CANVAS_HINT_KEY) === "true";
+				} catch {
+					return false;
+				}
+			});
+			const dismissCanvasHint = (0, react.useCallback)(() => {
+				setCanvasHintDismissed(true);
+				try {
+					localStorage.setItem(INFINITE_CANVAS_HINT_KEY, "true");
+				} catch {}
+			}, []);
 			const [dragging, setDragging] = (0, react.useState)(false);
 			const [lightboxOpen, setLightboxOpen] = (0, react.useState)(false);
 			const [showDeleteModal, setShowDeleteModal] = (0, react.useState)(false);
@@ -116905,7 +117066,6 @@ img.ProseMirror-separator {
 									}) : displayItems.map((item) => (0, react_jsx_runtime.jsx)(RecentItem, {
 										item,
 										active: selected?.id === item.id,
-										lang,
 										onClick: () => selectItem(item)
 									}, item.id)), items.length > visibleLimit && (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
@@ -116920,68 +117080,72 @@ img.ProseMirror-separator {
 								children: [
 									(0, react_jsx_runtime.jsxs)("div", {
 										className: "dsh-ig-canvas-toolbar",
-										children: [(0, react_jsx_runtime.jsxs)("div", {
-											className: "dsh-ig-canvas-toolbar-left",
-											children: [sidebarCollapsed && (0, react_jsx_runtime.jsxs)("button", {
-												type: "button",
-												onClick: () => {
-													railToggledByUserRef.current = true;
-													setSidebarCollapsed(false);
-												},
-												title: t("expandSidebar"),
-												children: [(0, react_jsx_runtime.jsx)(PanelLeft, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("recent") })]
-											}), (0, react_jsx_runtime.jsxs)("div", {
-												className: "dsh-ig-status-badge-wrap",
-												children: [(0, react_jsx_runtime.jsxs)("div", {
-													className: "dsh-ig-status-badge",
-													children: [
-														(0, react_jsx_runtime.jsx)("span", { className: `dsh-ig-status-dot ${configuredCount > 0 ? "is-ready" : "is-muted"}` }),
-														(0, react_jsx_runtime.jsx)("span", {
-															className: "dsh-ig-status-text",
-															children: configuredCount > 0 ? t("configuredCount", { count: String(configuredCount) }) : t("unconfiguredStatus")
-														}),
-														(0, react_jsx_runtime.jsx)(ChevronDown, {
-															size: 11,
-															className: "dsh-ig-status-arrow"
-														})
-													]
-												}), config !== null && (0, react_jsx_runtime.jsxs)("div", {
-													className: "dsh-ig-status-popover",
-													children: [(0, react_jsx_runtime.jsx)("div", {
-														className: "dsh-ig-status-popover-title",
-														children: t("providerStatus")
-													}), (0, react_jsx_runtime.jsx)("ul", {
-														className: "dsh-ig-status-list",
-														children: config.providers.map((p) => (0, react_jsx_runtime.jsxs)("li", {
-															className: p.configured ? "is-configured" : "is-missing",
-															children: [(0, react_jsx_runtime.jsxs)("div", {
-																className: "dsh-ig-status-item-name",
-																children: [(0, react_jsx_runtime.jsx)("strong", { children: p.label }), (0, react_jsx_runtime.jsx)("small", { children: p.model })]
-															}), (0, react_jsx_runtime.jsx)("span", {
-																className: "dsh-ig-status-item-tag",
-																children: p.configured ? t("configured") : t("unconfigured")
-															})]
-														}, p.provider))
+										children: [
+											(0, react_jsx_runtime.jsxs)("div", {
+												className: "dsh-ig-canvas-toolbar-left",
+												children: [sidebarCollapsed && (0, react_jsx_runtime.jsxs)("button", {
+													type: "button",
+													onClick: () => {
+														railToggledByUserRef.current = true;
+														setSidebarCollapsed(false);
+													},
+													title: t("expandSidebar"),
+													children: [(0, react_jsx_runtime.jsx)(PanelLeft, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("recent") })]
+												}), (0, react_jsx_runtime.jsxs)("div", {
+													className: "dsh-ig-status-badge-wrap",
+													children: [(0, react_jsx_runtime.jsxs)("div", {
+														className: "dsh-ig-status-badge",
+														children: [
+															(0, react_jsx_runtime.jsx)("span", { className: `dsh-ig-status-dot ${configuredCount > 0 ? "is-ready" : "is-muted"}` }),
+															(0, react_jsx_runtime.jsx)("span", {
+																className: "dsh-ig-status-text",
+																children: configuredCount > 0 ? t("configuredCount", { count: String(configuredCount) }) : t("unconfiguredStatus")
+															}),
+															(0, react_jsx_runtime.jsx)(ChevronDown, {
+																size: 11,
+																className: "dsh-ig-status-arrow"
+															})
+														]
+													}), config !== null && (0, react_jsx_runtime.jsxs)("div", {
+														className: "dsh-ig-status-popover",
+														children: [(0, react_jsx_runtime.jsx)("div", {
+															className: "dsh-ig-status-popover-title",
+															children: t("providerStatus")
+														}), (0, react_jsx_runtime.jsx)("ul", {
+															className: "dsh-ig-status-list",
+															children: config.providers.map((p) => (0, react_jsx_runtime.jsxs)("li", {
+																className: p.configured ? "is-configured" : "is-missing",
+																children: [(0, react_jsx_runtime.jsxs)("div", {
+																	className: "dsh-ig-status-item-name",
+																	children: [(0, react_jsx_runtime.jsx)("strong", { children: p.label }), (0, react_jsx_runtime.jsx)("small", { children: p.model })]
+																}), (0, react_jsx_runtime.jsx)("span", {
+																	className: "dsh-ig-status-item-tag",
+																	children: p.configured ? t("configured") : t("unconfigured")
+																})]
+															}, p.provider))
+														})]
 													})]
 												})]
-											})]
-										}), (0, react_jsx_runtime.jsxs)("div", {
-											className: "dsh-ig-canvas-toolbar-right",
-											children: [
-												selected !== null && (0, react_jsx_runtime.jsxs)("button", {
-													type: "button",
-													onClick: startNew,
-													title: t("newGeneration"),
-													children: [(0, react_jsx_runtime.jsx)(Plus, { size: 13 }), (0, react_jsx_runtime.jsx)("span", { children: t("newGeneration") })]
-												}),
-												(0, react_jsx_runtime.jsxs)("button", {
+											}),
+											(0, react_jsx_runtime.jsxs)("div", {
+												className: "dsh-ig-canvas-toolbar-center",
+												children: [(0, react_jsx_runtime.jsxs)("button", {
 													type: "button",
 													className: canvasSurface === "infinite" ? "is-active" : "",
-													onClick: () => setCanvasSurface((surface) => surface === "infinite" ? "preview" : "infinite"),
+													onClick: () => {
+														if (canvasSurface === "infinite") {
+															setGenerateCollapsed(generatePanelBeforeInfiniteRef.current);
+															setCanvasSurface("preview");
+															return;
+														}
+														generatePanelBeforeInfiniteRef.current = generateCollapsed;
+														setGenerateCollapsed(true);
+														setCanvasSurface("infinite");
+													},
 													title: t("infiniteCanvas"),
 													children: [(0, react_jsx_runtime.jsx)(Frame, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("infiniteCanvas") })]
-												}),
-												canvasSurface === "preview" && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+												}), canvasSurface === "preview" && (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+													(0, react_jsx_runtime.jsx)("span", { className: "dsh-ig-toolbar-divider" }),
 													(0, react_jsx_runtime.jsxs)("button", {
 														type: "button",
 														className: fit ? "is-active" : "",
@@ -117013,25 +117177,50 @@ img.ProseMirror-separator {
 														},
 														title: "Zoom in",
 														children: (0, react_jsx_runtime.jsx)(ZoomIn, { size: 16 })
+													})
+												] })]
+											}),
+											(0, react_jsx_runtime.jsxs)("div", {
+												className: "dsh-ig-canvas-toolbar-right",
+												children: [
+													canvasSurface === "preview" && selected !== null && (0, react_jsx_runtime.jsxs)("button", {
+														type: "button",
+														onClick: startNew,
+														title: t("newGeneration"),
+														children: [(0, react_jsx_runtime.jsx)(Plus, { size: 13 }), (0, react_jsx_runtime.jsx)("span", { children: t("newGeneration") })]
 													}),
-													(0, react_jsx_runtime.jsx)("button", {
+													canvasSurface === "preview" && (0, react_jsx_runtime.jsx)("button", {
 														type: "button",
 														onClick: () => setLightboxOpen(true),
 														title: t("fullscreen"),
 														disabled: selected === null,
 														children: (0, react_jsx_runtime.jsx)(Expand, { size: 16 })
+													}),
+													generateCollapsed && (0, react_jsx_runtime.jsxs)("button", {
+														type: "button",
+														onClick: () => {
+															setGenerateCollapsed(false);
+														},
+														title: t("expandGenerate"),
+														children: [(0, react_jsx_runtime.jsx)(PanelRight, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("generatePanel") })]
 													})
-												] }),
-												generateCollapsed && (0, react_jsx_runtime.jsxs)("button", {
-													type: "button",
-													onClick: () => {
-														setGenerateCollapsed(false);
-													},
-													title: t("expandGenerate"),
-													children: [(0, react_jsx_runtime.jsx)(PanelRight, { size: 14 }), (0, react_jsx_runtime.jsx)("span", { children: t("generatePanel") })]
-												})
-											]
-										})]
+												]
+											})
+										]
+									}),
+									canvasSurface === "infinite" && showInfiniteCanvasHint && !canvasHintDismissed && (0, react_jsx_runtime.jsxs)("div", {
+										className: "dsh-ig-canvas-hint",
+										children: [
+											(0, react_jsx_runtime.jsx)(Info, { size: 14 }),
+											(0, react_jsx_runtime.jsx)("span", { children: t("infiniteCanvasHint") }),
+											(0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												onClick: dismissCanvasHint,
+												title: t("close"),
+												"aria-label": t("close"),
+												children: (0, react_jsx_runtime.jsx)(X, { size: 13 })
+											})
+										]
 									}),
 									canvasSurface === "infinite" ? (0, react_jsx_runtime.jsx)(StudioTlCanvas, {}) : (0, react_jsx_runtime.jsx)("div", {
 										className: `dsh-ig-canvas ${isDragging ? "is-dragging" : ""}`,
@@ -117782,31 +117971,23 @@ img.ProseMirror-separator {
 				}
 			];
 		}
-		const RecentItem = ({ item, active, lang, onClick }) => {
+		const RecentItem = ({ item, active, onClick }) => {
 			const [setRef, inView] = useInView();
 			const image = useAttachmentImage(item.attachment, inView);
-			return (0, react_jsx_runtime.jsxs)("button", {
+			return (0, react_jsx_runtime.jsx)("button", {
 				ref: setRef,
 				type: "button",
 				className: `dsh-ig-recent-item ${active ? "is-active" : ""}`,
 				onClick,
-				children: [(0, react_jsx_runtime.jsx)("div", {
+				title: item.prompt,
+				children: (0, react_jsx_runtime.jsx)("div", {
 					className: "dsh-ig-recent-thumb",
 					children: image.url !== null ? (0, react_jsx_runtime.jsx)("img", {
 						src: image.url,
 						alt: "",
 						loading: "lazy"
 					}) : (0, react_jsx_runtime.jsx)(ImagePlus, { size: 18 })
-				}), (0, react_jsx_runtime.jsxs)("div", { children: [
-					(0, react_jsx_runtime.jsx)("strong", { children: item.prompt }),
-					(0, react_jsx_runtime.jsx)("span", { children: formatRelativeTime$1(item.createdAt, lang) }),
-					(0, react_jsx_runtime.jsxs)("small", { children: [
-						item.provider,
-						" · ",
-						item.model
-					] }),
-					(0, react_jsx_runtime.jsx)("small", { children: item.attachment.width && item.attachment.height ? `${item.attachment.width} × ${item.attachment.height}` : "—" })
-				] })]
+				})
 			});
 		};
 		function useInView() {
@@ -119975,6 +120156,7 @@ img.ProseMirror-separator {
 							workspace: activeWorkspace,
 							initialPrompt: studioDraft,
 							initialCanvasSurface,
+							showInfiniteCanvasHint: !inSidebar,
 							onInitialPromptApplied: clearStudioDraft,
 							onOpenInspiration: () => setActiveTab("inspiration")
 						})
@@ -120510,17 +120692,23 @@ img.ProseMirror-separator {
 .dsh-ig-count-badge{font-size:11px;min-width:22px;text-align:center;padding:2px 6px;border-radius:999px;background:var(--ig-soft);color:#7b8498;font-weight:500}
 .dsh-ig-collapse-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;background:transparent;color:#717b90;cursor:pointer;transition:all .15s}
 .dsh-ig-collapse-btn:hover{border-color:var(--ig-line);background:var(--ig-soft);color:var(--foreground,#182033)}
-.dsh-ig-recent-scroll{flex:1 1 0;height:0;padding:8px;overflow-x:hidden;overflow-y:auto;min-height:0}.dsh-ig-recent-empty{min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#929bad;text-align:center;font-size:12px}
-.dsh-ig-recent-item{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;width:100%;padding:8px;border:1px solid transparent;border-radius:9px;background:transparent;text-align:left;cursor:pointer;transition:background .16s,border-color .16s,transform .16s}.dsh-ig-recent-item:hover{background:var(--ig-soft);transform:translateY(-1px)}.dsh-ig-recent-item.is-active{border-color:#89a7ff;background:rgba(47,100,245,.075);box-shadow:inset 3px 0 0 var(--ig-blue)}.dsh-ig-recent-thumb{width:70px;height:70px;border-radius:7px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eef1f7;color:#929bad}.dsh-ig-recent-thumb img{width:100%;height:100%;object-fit:cover}.dsh-ig-recent-item>div:last-child{min-width:0;padding:1px 0}.dsh-ig-recent-item strong{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12.5px;line-height:19px;font-weight:630}.dsh-ig-recent-item span,.dsh-ig-recent-item small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:#828b9e;font-size:10.5px;line-height:16px}
-.dsh-ig-load-more{width:100%;height:32px;margin:8px 0;display:flex;align-items:center;justify-content:center;border:1px dashed var(--ig-line);border-radius:7px;background:transparent;font-size:11px;color:#6b758b;cursor:pointer;transition:background .15s,color .15s}.dsh-ig-load-more:hover{background:var(--ig-soft);color:var(--ig-blue);border-color:#a2b9f6}
+.dsh-ig-recent-scroll{flex:1 1 0;height:0;padding:8px;overflow-x:hidden;overflow-y:auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px;align-content:start}.dsh-ig-recent-empty{min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#929bad;text-align:center;font-size:12px;grid-column:1/-1}
+.dsh-ig-recent-item{position:relative;width:100%;aspect-ratio:1;align-self:start;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;cursor:pointer;transition:border-color .16s,box-shadow .16s}.dsh-ig-recent-item:hover{border-color:#b9ccfa;box-shadow:0 1px 4px rgba(30,42,76,.14)}.dsh-ig-recent-item.is-active{border-color:var(--ig-blue);box-shadow:0 0 0 2px rgba(47,100,245,.18)}.dsh-ig-recent-thumb{width:100%;height:100%;border-radius:7px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#eef1f7;color:#929bad}.dsh-ig-recent-thumb img{width:100%;height:100%;object-fit:cover}
+.dsh-ig-load-more{grid-column:1/-1;width:100%;height:32px;margin:4px 0 2px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--ig-line);border-radius:7px;background:transparent;font-size:11px;color:#6b758b;cursor:pointer;transition:background .15s,color .15s}.dsh-ig-load-more:hover{background:var(--ig-soft);color:var(--ig-blue);border-color:#a2b9f6}
 .dsh-ig-mini-btn{height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:3px;border:1px solid var(--ig-line);border-radius:5px;background:var(--background,#fff);font-size:10.5px;font-weight:500;color:var(--foreground,#242f44);cursor:pointer;transition:all .15s}.dsh-ig-mini-btn:hover{border-color:#9bb4f5;color:var(--ig-blue);background:rgba(47,100,245,.06)}
 .dsh-ig-canvas-column{min-width:0;min-height:0;height:100%;overflow:hidden;display:flex;flex-direction:column;background:color-mix(in srgb,var(--background,#fff) 97%,#e8edf7)}
-.dsh-ig-canvas-toolbar{height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;border-bottom:1px solid var(--ig-line)}
-.dsh-ig-canvas-toolbar-left,.dsh-ig-canvas-toolbar-right{display:flex;align-items:center;gap:6px}
+.dsh-ig-canvas-toolbar{height:46px;flex:0 0 46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--ig-line)}
+.dsh-ig-canvas-toolbar-left,.dsh-ig-canvas-toolbar-right{display:flex;align-items:center;gap:6px;min-width:0}
+.dsh-ig-canvas-toolbar-left{justify-self:start}
+.dsh-ig-canvas-toolbar-right{justify-self:end}
+.dsh-ig-canvas-toolbar-center{display:flex;align-items:center;justify-self:center;gap:6px;min-width:0}
+.dsh-ig-toolbar-divider{width:1px;height:16px;background:var(--ig-line);flex-shrink:0;margin:0 2px}
 .dsh-ig-canvas-toolbar button{height:30px;min-width:30px;padding:0 9px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--ig-line);border-radius:7px;background:var(--background,#fff);color:var(--foreground,#242f44);font-size:11.5px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
 .dsh-ig-canvas-toolbar button:hover{border-color:#9bb4f5;background:rgba(47,100,245,.05);color:var(--ig-blue)}
 .dsh-ig-canvas-toolbar button.is-active{border-color:#8ba8f8;background:rgba(47,100,245,.08);color:var(--ig-blue);font-weight:550}
+.dsh-ig-canvas-toolbar-center button.is-active{border-color:var(--ig-blue);background:rgba(47,100,245,.09);color:var(--ig-blue);font-weight:600;box-shadow:inset 0 0 0 1px rgba(47,100,245,.28)}
 .dsh-ig-zoom-display{font-size:11px;min-width:38px;text-align:center;color:#64748b;user-select:none;font-variant-numeric:tabular-nums}
+.dsh-ig-canvas-hint{flex:0 0 auto;display:flex;align-items:flex-start;gap:8px;padding:7px 12px;border-bottom:1px solid rgba(47,100,245,.14);background:rgba(47,100,245,.055);color:#3d4a66;font-size:11.5px;line-height:17px}.dsh-ig-canvas-hint>svg:first-child{flex-shrink:0;color:var(--ig-blue);margin-top:1px}.dsh-ig-canvas-hint>span{flex:1 1 0;min-width:0}.dsh-ig-canvas-hint>button{flex-shrink:0;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:5px;background:transparent;color:#8a94a8;cursor:pointer;transition:background .15s,color .15s}.dsh-ig-canvas-hint>button:hover{background:rgba(47,100,245,.1);color:var(--ig-blue)}
 .dsh-ig-status-badge-wrap{position:relative;display:inline-flex;align-items:center}
 .dsh-ig-status-badge{height:30px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--ig-line);border-radius:7px;background:var(--background,#fff);cursor:pointer;user-select:none;transition:border-color .15s,background .15s,box-shadow .15s}
 .dsh-ig-status-badge:hover{border-color:#9bb4f5;background:rgba(47,100,245,.04)}
@@ -120639,6 +120827,166 @@ img.ProseMirror-separator {
 		//#region lib/types/client/tl/tl-css.js
 		/** Bundled tldraw styles (tldraw 5.3.0, tldraw SDK license; the "Made with tldraw" watermark is part of the licensed default UI). Generated from tldraw/tldraw.css - do not edit by hand. */
 		const TL_CSS = "/* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ \n/* This file is created by the copy-css-files.mjs script in packages/tldraw. */\n/* It combines @tldraw/editor's editor.css and tldraw's ui.css */\n\n/* @tldraw/editor */\n\n.tl-container {\n	width: 100%;\n	height: 100%;\n	font-size: 12px;\n	/* Spacing */\n	--tl-space-1: 2px;\n	--tl-space-2: 4px;\n	--tl-space-3: 8px;\n	--tl-space-4: 12px;\n	--tl-space-5: 16px;\n	--tl-space-6: 20px;\n	--tl-space-7: 28px;\n	--tl-space-8: 32px;\n	--tl-space-9: 64px;\n	--tl-space-10: 72px;\n	/* Radius */\n	--tl-radius-0: 2px;\n	--tl-radius-1: 4px;\n	--tl-radius-2: 6px;\n	--tl-radius-3: 9px;\n	--tl-radius-4: 11px;\n\n	/*\n	 * Canvas z-index\n	 *\n	 * .tl-canvas has `contain: strict` which creates its own stacking context.\n	 * background, grid, shapes, overlays, and blocker are all children of .tl-canvas,\n	 * so their z-indices are relative to the canvas, not the container.\n	 *\n	 * collaborators, watermark, and canvas-in-front are siblings of .tl-canvas\n	 * (outside it), so they compete with the UI layer (.tlui-layout at z-index 300).\n	 * canvas-in-front must be below the UI layer (300) to sit between\n	 * the canvas and the UI; collaborator cursors sit above canvas content\n	 * (and layers that anchor to it, like comment pins) but below the\n	 * in-front content and the UI panels. The watermark (a licensing element)\n	 * sits above that content so it can't be occluded, but still below the\n	 * in-front content and the UI.\n	 */\n	--tl-layer-canvas-hidden: -999999;\n	--tl-layer-canvas-background: 100;\n	--tl-layer-canvas-grid: 150;\n	--tl-layer-collaborators: 245;\n	--tl-layer-watermark: 248;\n	--tl-layer-canvas-in-front: 250;\n	--tl-layer-canvas-shapes: 300;\n	--tl-layer-canvas-overlays: 500;\n	--tl-layer-canvas-blocker: 10000;\n\n	/* Canvas overlays z-index */\n	--tl-layer-overlays-collaborator-scribble: 10;\n	--tl-layer-overlays-collaborator-brush: 20;\n	--tl-layer-overlays-collaborator-shape-indicator: 30;\n	--tl-layer-overlays-user-scribble: 40;\n	--tl-layer-overlays-user-brush: 50;\n	--tl-layer-overlays-user-snapline: 90;\n	--tl-layer-overlays-selection-fg: 100;\n	/* User handles need to be above selection edges / corners, matters for sticky note clone handles */\n	--tl-layer-overlays-user-handles: 105;\n	--tl-layer-overlays-user-indicator-hint: 110;\n	--tl-layer-overlays-collaborator-cursor-hint: 120;\n	--tl-layer-overlays-collaborator-cursor: 130;\n\n	/* Text editor z-index */\n	--tl-layer-text-container: 1;\n	--tl-layer-text-content: 3;\n	--tl-layer-text-editor: 4;\n\n	/* Error fallback z-index */\n	--tl-layer-error-overlay: 1;\n	--tl-layer-error-canvas: 2;\n	--tl-layer-error-canvas-after: 3;\n	--tl-layer-error-content: 4;\n\n	/* Misc */\n	--tl-zoom: 1;\n	--tl-tab-size: 2;\n\n	/* Cursor SVGs */\n	--tl-cursor-none: none;\n	--tl-cursor-default:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>\")\n			12 8,\n		default;\n	--tl-cursor-pointer:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.3315 21.3799c-.284-.359-.629-1.093-1.243-1.984-.348-.504-1.211-1.453-1.468-1.935-.223-.426-.199-.617-.146-.97.094-.628.738-1.117 1.425-1.051.519.049.959.392 1.355.716.239.195.533.574.71.788.163.196.203.277.377.509.23.307.302.459.214.121-.071-.496-.187-1.343-.355-2.092-.128-.568-.159-.657-.281-1.093-.129-.464-.195-.789-.316-1.281-.084-.348-.235-1.059-.276-1.459-.057-.547-.087-1.439.264-1.849.275-.321.906-.418 1.297-.22.512.259.803 1.003.936 1.3.239.534.387 1.151.516 1.961.164 1.031.466 2.462.476 2.763.024-.369-.068-1.146-.004-1.5.058-.321.328-.694.666-.795.286-.085.621-.116.916-.055.313.064.643.288.766.499.362.624.369 1.899.384 1.831.086-.376.071-1.229.284-1.584.14-.234.497-.445.687-.479.294-.052.655-.068.964-.008.249.049.586.345.677.487.218.344.342 1.317.379 1.658.015.141.074-.392.293-.736.406-.639 1.843-.763 1.898.639.025.654.02.624.02 1.064 0 .517-.012.828-.04 1.202-.031.4-.117 1.304-.242 1.742-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.191 1.813-.118.562-.079.566-.102.965-.023.398.121.922.121.922s-.802.104-1.234.035c-.391-.063-.875-.841-1-1.079-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.031-3.139.02 0 0 .185-1.011-.227-1.358-.305-.259-.83-.784-1.144-1.06z' stroke-linejoin='round'/><path d='m21.5664 21.7344v-3.459'/><path d='m19.5508 21.7461-.016-3.473'/><path d='m17.5547 18.3047.021 3.426'/></g></g></svg>\")\n			14 10,\n		pointer;\n	--tl-cursor-cross:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>\")\n			16 16,\n		crosshair;\n	--tl-cursor-comment:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g filter='url(%23shadow)'><path d='M5 19.5 L5 11 A8 8 0 0 1 13 3 A8 8 0 0 1 21 11 A8 8 0 0 1 13 19 Z' fill='white' stroke='black' stroke-width='1' stroke-linejoin='round'/></g></svg>\")\n			5 19,\n		crosshair;\n	--tl-cursor-move:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>\")\n			16 16,\n		move;\n	--tl-cursor-grab:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' fill='white'/><g stroke='black' stroke-linecap='round' stroke-width='.75'><path d='m13.5557 17.5742c-.098-.375-.196-.847-.406-1.552-.167-.557-.342-.859-.47-1.233-.155-.455-.303-.721-.496-1.181-.139-.329-.364-1.048-.457-1.44-.119-.509.033-.924.244-1.206.253-.339.962-.49 1.357-.351.371.13.744.512.916.788.288.46.357.632.717 1.542.393.992.564 1.918.611 2.231l.085.452c-.001-.04-.043-1.122-.044-1.162-.035-1.029-.06-1.823-.038-2.939.002-.126.064-.587.084-.715.078-.5.305-.8.673-.979.412-.201.926-.215 1.401-.017.423.173.626.55.687 1.022.014.109.094.987.093 1.107-.013 1.025.006 1.641.015 2.174.004.231.003 1.625.017 1.469.061-.656.094-3.189.344-3.942.144-.433.405-.746.794-.929.431-.203 1.113-.07 1.404.243.285.305.446.692.482 1.153.032.405-.019.897-.02 1.245 0 .867-.021 1.324-.037 2.121-.001.038-.015.298.023.182.094-.28.188-.542.266-.745.049-.125.241-.614.359-.859.114-.234.211-.369.415-.688.2-.313.415-.448.668-.561.54-.235 1.109.112 1.301.591.086.215.009.713-.028 1.105-.061.647-.254 1.306-.352 1.648-.128.447-.274 1.235-.34 1.601-.072.394-.234 1.382-.359 1.82-.086.301-.371.978-.652 1.384 0 0-1.074 1.25-1.192 1.812-.117.563-.078.567-.101.965-.024.399.121.923.121.923s-.802.104-1.234.034c-.391-.062-.875-.841-1-1.078-.172-.328-.539-.265-.682-.023-.225.383-.709 1.07-1.051 1.113-.668.084-2.054.03-3.139.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.284-.36-.629-1.093-1.243-1.985-.348-.504-1.027-1.085-1.284-1.579-.223-.425-.331-.954-.19-1.325.225-.594.675-.897 1.362-.832.519.05.848.206 1.238.537.225.19.573.534.75.748.163.195.203.276.377.509.23.307.302.459.214.121' stroke-linejoin='round'/><path d='m20.5664 21.7344v-3.459'/><path d='m18.5508 21.7461-.016-3.473'/><path d='m16.5547 18.3047.021 3.426'/></g></g></svg>\")\n			16 16,\n		grab;\n	--tl-cursor-grabbing:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042' fill='white'/><g stroke='black' stroke-width='.75'><path d='m13.5732 12.0361c.48-.178 1.427-.069 1.677.473.213.462.396 1.241.406 1.075.024-.369-.024-1.167.137-1.584.117-.304.347-.59.686-.691.285-.086.62-.116.916-.055.313.064.642.287.765.499.362.623.368 1.899.385 1.831.064-.272.07-1.229.283-1.584.141-.235.497-.445.687-.479.294-.052.656-.068.964-.008.249.049.586.344.677.487.219.344.342 1.316.379 1.658.016.141.074-.393.293-.736.406-.639 1.844-.763 1.898.639.026.654.02.624.02 1.064 0 .516-.012.828-.04 1.202-.03.399-.116 1.304-.241 1.742-.086.301-.371.978-.653 1.384 0 0-1.074 1.25-1.191 1.812-.117.563-.078.567-.102.965-.023.399.121.923.121.923s-.801.104-1.234.034c-.391-.062-.875-.84-1-1.078-.172-.328-.539-.265-.682-.023-.224.383-.709 1.07-1.05 1.113-.669.084-2.055.03-3.14.02 0 0 .185-1.011-.227-1.358-.305-.26-.83-.784-1.144-1.06l-.832-.921c-.283-.36-1.002-.929-1.243-1.985-.213-.936-.192-1.395.037-1.77.232-.381.67-.589.854-.625.208-.042.692-.039.875.062.223.123.313.159.488.391.23.307.312.456.213.121-.076-.262-.322-.595-.434-.97-.109-.361-.401-.943-.38-1.526.008-.221.103-.771.832-1.042z' stroke-linejoin='round'/><path d='m20.5664 19.7344v-3.459' stroke-linecap='round'/><path d='m18.5508 19.7461-.016-3.473' stroke-linecap='round'/><path d='m16.5547 16.3047.021 3.426' stroke-linecap='round'/></g></g></svg>\")\n			16 16,\n		grabbing;\n	--tl-cursor-text:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path fill='white' d='M7.94 0a5.25 5.25 0 0 0-3.47 1.17A5.27 5.27 0 0 0 1 0H0v3h1c1.41 0 1.85.7 2 1v3.94H2v3h1v3c-.13.3-.57 1-2 1H0v3h1a5.27 5.27 0 0 0 3.47-1.17c.98.8 2.21 1.21 3.47 1.17h1v-3h-1c-1.41 0-1.85-.7-2-1v-3H7v-3H6V4c.13-.3.57-1 2-1h1V0H7.94z'/><path fill='black' d='M7.94 2V1a4 4 0 0 0-3.47 1.64A4 4 0 0 0 1 1v1c1.3-.17 2.56.6 3 1.84v5.1H3v1h1v4.16c-.45 1.24-1.7 2-3 1.84v1a4.05 4.05 0 0 0 3.47-1.63 4.05 4.05 0 0 0 3.47 1.63v-1A2.82 2.82 0 0 1 5 14.1V9.93h1v-1H5V3.85A2.81 2.81 0 0 1 7.94 2z'/></g></svg>\")\n			4 10,\n		text;\n	--tl-cursor-zoom-in:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 14h-2v-2h-2v2h-2v1.98h2v2.02h2v-2.02h2z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>\")\n			16 16,\n		zoom-in;\n	--tl-cursor-zoom-out:\n		url(\"data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5' fill='white'/><path d='m20.5 15c0 3.038-2.462 5.5-5.5 5.5s-5.5-2.462-5.5-5.5 2.462-5.5 5.5-5.5 5.5 2.462 5.5 5.5z' stroke='black'/><g fill='black'><path d='m18 16h-5.98v-1.98h5.98z'/><path d='m23.5859 25 1.414-1.414-5.449-5.449-1.414 1.414z'/></g></g></svg>\")\n			16 16,\n		zoom-out;\n\n	/* These cursor values get programmatically overridden */\n	/* They're just here to help your editor autocomplete */\n	--tl-cursor: var(--tl-cursor-default);\n	--tl-cursor-resize-edge: ew-resize;\n	--tl-cursor-resize-corner: nesw-resize;\n	--tl-cursor-ew-resize: ew-resize;\n	--tl-cursor-ns-resize: ns-resize;\n	--tl-cursor-nesw-resize: nesw-resize;\n	--tl-cursor-nwse-resize: nwse-resize;\n	--tl-cursor-rotate: pointer;\n	--tl-cursor-nwse-rotate: pointer;\n	--tl-cursor-nesw-rotate: pointer;\n	--tl-cursor-senw-rotate: pointer;\n	--tl-cursor-swne-rotate: pointer;\n	--tl-scale: calc(1 / var(--tl-zoom));\n	/* fonts */\n	--tl-font-draw: 'tldraw_draw', sans-serif;\n	--tl-font-sans: 'tldraw_sans', sans-serif;\n	--tl-font-serif: 'tldraw_serif', serif;\n	--tl-font-mono: 'tldraw_mono', monospace;\n	/* text outline */\n	--tl-text-outline-a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px);\n	--tl-text-outline-b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px);\n	--tl-text-outline-reference:\n		0 var(--tl-text-outline-b) 0 var(--tl-color-background),\n		0 var(--tl-text-outline-a) 0 var(--tl-color-background),\n		var(--tl-text-outline-b) var(--tl-text-outline-b) 0 var(--tl-color-background),\n		var(--tl-text-outline-a) var(--tl-text-outline-b) 0 var(--tl-color-background),\n		var(--tl-text-outline-a) var(--tl-text-outline-a) 0 var(--tl-color-background),\n		var(--tl-text-outline-b) var(--tl-text-outline-a) 0 var(--tl-color-background);\n	--tl-text-outline: var(--tl-text-outline-reference);\n	/* own properties */\n	position: relative;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	overflow: clip;\n	color: var(--tl-color-text);\n}\n\n.tl-theme__light {\n	/* Canvas */\n	--tl-color-selection-fill: hsl(210, 100%, 56%, 24%);\n	--tl-color-selection-stroke: hsl(214, 84%, 56%);\n	--tl-color-background: hsl(210, 20%, 98%);\n	/* if you ever update --tl-color-background, update the hardcoded values in theme-init.js and globals.css\n	they're there to make sure the background color matches the user's preference before the actual app loads*/\n	--tl-color-grid: hsl(0, 0%, 43%);\n	/* UI */\n	--tl-color-low: hsl(204, 16%, 94%);\n	--tl-color-low-border: hsl(204, 16%, 92%);\n	--tl-color-muted-none: hsl(0, 0%, 0%, 0%);\n	--tl-color-muted-0: hsl(0, 0%, 0%, 2%);\n	--tl-color-muted-1: hsl(0, 0%, 0%, 10%);\n	--tl-color-muted-2: hsl(0, 0%, 0%, 4.3%);\n	--tl-color-hint: hsl(0, 0%, 0%, 5.5%);\n	--tl-color-overlay: hsl(0, 0%, 0%, 20%);\n	--tl-color-divider: hsl(0, 0%, 91%);\n	--tl-color-panel: hsl(0, 0%, 99%);\n	--tl-color-panel-contrast: hsl(0, 0%, 100%);\n	--tl-color-panel-overlay: hsl(0, 0%, 100%, 82%);\n	--tl-color-panel-transparent: hsla(0, 0%, 99%, 0%);\n	--tl-color-selected: hsl(214, 84%, 56%);\n	--tl-color-selected-contrast: hsl(0, 0%, 100%);\n	--tl-color-focus: hsl(219, 65%, 50%);\n	--tl-color-tooltip: hsla(200, 14%, 4%, 1);\n	/* Text */\n	--tl-color-text: hsl(0, 0%, 0%);\n	--tl-color-text-0: hsl(0, 0%, 11%);\n	--tl-color-text-1: hsl(0, 0%, 18%);\n	--tl-color-text-3: hsl(204, 4%, 45%);\n	--tl-color-text-disabled: hsl(204, 4%, 55%);\n	--tl-color-text-shadow: hsl(0, 0%, 100%);\n	--tl-color-text-highlight: hsl(52, 100%, 50%);\n	--tl-color-text-highlight-p3: color(display-p3 0.972 0.8205 0.05);\n	/* Named */\n	--tl-color-primary: hsl(214, 84%, 56%);\n	--tl-color-success: hsl(123, 46%, 34%);\n	--tl-color-info: hsl(201, 98%, 41%);\n	--tl-color-warning: hsl(27, 98%, 47%);\n	--tl-color-danger: hsl(0, 90%, 43%);\n\n	/* Shadows */\n	--tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);\n	--tl-shadow-2:\n		0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%),\n		0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);\n	--tl-shadow-3:\n		0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%),\n		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);\n	--tl-shadow-4:\n		0px 0px 3px hsl(0, 0%, 0%, 19%), 0px 5px 4px hsl(0, 0%, 0%, 16%),\n		0px 2px 16px hsl(0, 0%, 0%, 6%), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);\n}\n\n.tl-theme__dark {\n	/* Canvas */\n	--tl-color-selection-fill: hsl(209, 100%, 57%, 20%);\n	--tl-color-selection-stroke: hsl(214, 84%, 56%);\n	--tl-color-background: hsl(240, 5%, 6.5%);\n	/* if you ever update --tl-color-background, update the hardcoded values in theme-init.js and globals.css\n	they're there to make sure the background color matches the user's preference before the actual app loads*/\n	--tl-color-grid: hsl(0, 0%, 40%);\n	/* UI */\n	--tl-color-low: hsl(260, 4.5%, 10.5%);\n	--tl-color-low-border: hsl(207, 10%, 10%);\n	--tl-color-muted-none: hsl(0, 0%, 100%, 0%);\n	--tl-color-muted-0: hsl(0, 0%, 100%, 2%);\n	--tl-color-muted-1: hsl(0, 0%, 100%, 10%);\n	--tl-color-muted-2: hsl(0, 0%, 100%, 5%);\n	--tl-color-hint: hsl(0, 0%, 100%, 7%);\n	--tl-color-overlay: hsl(0, 0%, 0%, 50%);\n	--tl-color-divider: hsl(240, 9%, 22%);\n	--tl-color-panel: hsl(235, 6.8%, 13.5%);\n	--tl-color-panel-contrast: hsl(245, 12%, 23%);\n	--tl-color-panel-overlay: hsl(210, 10%, 24%, 82%);\n	--tl-color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);\n	--tl-color-selected: hsl(217, 89%, 61%);\n	--tl-color-selected-contrast: hsl(0, 0%, 100%);\n	--tl-color-focus: hsl(217, 76%, 80%);\n	--tl-color-tooltip: hsla(0, 0%, 100%, 1);\n	/* Text */\n	--tl-color-text: hsl(210, 17%, 98%);\n	--tl-color-text-0: hsl(0, 9%, 94%);\n	--tl-color-text-1: hsl(0, 0%, 85%);\n	--tl-color-text-3: hsl(204, 4%, 75%);\n	--tl-color-text-disabled: hsl(204, 4%, 50%);\n	--tl-color-text-shadow: hsl(210, 13%, 18%);\n	--tl-color-text-highlight: hsl(52, 100%, 41%);\n	--tl-color-text-highlight-p3: color(display-p3 0.8078 0.6225 0.0312);\n	/* Named */\n	--tl-color-primary: hsl(214, 84%, 56%);\n	--tl-color-success: hsl(123, 38%, 57%);\n	--tl-color-info: hsl(199, 92%, 56%);\n	--tl-color-warning: hsl(36, 100%, 57%);\n	--tl-color-danger: hsl(0, 82%, 66%);\n\n	/* Shadows */\n	--tl-shadow-1:\n		0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),\n		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);\n	--tl-shadow-2:\n		0px 1px 3px hsl(0, 0%, 0%, 66.6%), 0px 2px 6px hsl(0, 0%, 0%, 33%),\n		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);\n	--tl-shadow-3:\n		0px 1px 3px hsl(0, 0%, 0%, 50%), 0px 2px 12px hsl(0, 0%, 0%, 50%),\n		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);\n}\n\n.tl-counter-scaled {\n	transform: scale(var(--tl-scale));\n	transform-origin: top left;\n	width: calc(100% * var(--tl-zoom));\n	height: calc(100% * var(--tl-zoom));\n}\n\n.tl-container,\n.tl-container * {\n	-webkit-touch-callout: none;\n	-webkit-tap-highlight-color: transparent;\n	scrollbar-highlight-color: transparent;\n	-webkit-user-select: none;\n	user-select: none;\n	box-sizing: border-box;\n	outline: none;\n}\n\n.tl-container a {\n	-webkit-touch-callout: initial;\n}\n\n.tl-container__focused {\n	outline: 1px solid var(--tl-color-low);\n}\n\n/* The host for <EditorPortal>, last among the container's children. It's a position in the DOM\n   rather than a box: `display: contents` keeps what it holds positioned against the container. */\n.tl-portal-host {\n	display: contents;\n}\n\ninput,\n*[contenteditable],\n*[contenteditable] * {\n	user-select: text;\n}\n\n/* --------------------- Canvas --------------------- */\n\n.tl-canvas {\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	color: var(--tl-color-text);\n	cursor: var(--tl-cursor);\n	overflow: clip;\n	content-visibility: auto;\n	touch-action: none;\n	contain: strict;\n}\n\n.tl-canvas__in-front {\n	position: absolute;\n	inset: 0;\n	pointer-events: none;\n	z-index: var(--tl-layer-canvas-in-front);\n}\n\n.tl-shapes {\n	position: relative;\n	z-index: var(--tl-layer-canvas-shapes);\n}\n\n.tl-svg-context {\n	position: absolute;\n	top: 0px;\n	left: 0px;\n	width: 100%;\n	height: 100%;\n	pointer-events: none;\n}\n\n/* ------------------- Background ------------------- */\n\n.tl-background__wrapper {\n	z-index: var(--tl-layer-canvas-background);\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n}\n\n.tl-background {\n	background-color: var(--tl-color-background);\n	width: 100%;\n	height: 100%;\n}\n\n/* --------------------- Grid Layer --------------------- */\n\n.tl-grid {\n	position: absolute;\n	inset: 0px;\n	width: 100%;\n	height: 100%;\n	touch-action: none;\n	pointer-events: none;\n	z-index: var(--tl-layer-canvas-grid);\n	contain: strict;\n}\n\n.tl-grid-dot {\n	fill: var(--tl-color-grid);\n}\n\n/* --------------------- Layers --------------------- */\n\n.tl-html-layer {\n	position: absolute;\n	top: 0px;\n	left: 0px;\n	width: 1px;\n	height: 1px;\n	contain: layout style size;\n}\n\n/* The collaborator cursor layer: a sibling of .tl-canvas, above all canvas content, below the\n   in-front layer (250) and the UI panels (300). Display-only — pointer events pass through. */\n.tl-collaborators {\n	position: absolute;\n	inset: 0px;\n	z-index: var(--tl-layer-collaborators);\n	pointer-events: none;\n	overflow: clip;\n	contain: layout style size;\n}\n\n.tl-collaborators__item {\n	position: absolute;\n	top: 0px;\n	left: 0px;\n	overflow: visible;\n	pointer-events: none;\n	transform-origin: top left;\n}\n\n.tl-cursor {\n	overflow: visible;\n}\n\n/* --------------- Overlay Stack --------------- */\n\n/* -------------- Selection foreground -------------- */\n\n.tl-selection__bg {\n	position: absolute;\n	top: 0px;\n	left: 0px;\n	transform-origin: top left;\n	background-color: transparent;\n	pointer-events: all;\n}\n\n.tl-transparent {\n	fill: transparent;\n	stroke: transparent;\n}\n\n.tl-hidden {\n	opacity: 0;\n	pointer-events: none;\n}\n\n/* -------------- Nametag / cursor chat ------------- */\n\n.tl-nametag {\n	position: absolute;\n	top: 16px;\n	left: 13px;\n	width: fit-content;\n	height: fit-content;\n	max-width: 120px;\n	padding: 3px 6px;\n	white-space: nowrap;\n	position: absolute;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	font-size: 12px;\n	border-radius: var(--tl-radius-2);\n	color: var(--tl-color-selected-contrast);\n}\n\n.tl-nametag-title {\n	position: absolute;\n	top: -2px;\n	left: 13px;\n	width: fit-content;\n	height: fit-content;\n	padding: 0px 6px;\n	max-width: 120px;\n	white-space: nowrap;\n	position: absolute;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	font-size: 12px;\n	text-shadow: var(--tl-text-outline);\n	color: var(--tl-color-selected-contrast);\n}\n\n.tl-nametag-chat {\n	position: absolute;\n	top: 16px;\n	left: 13px;\n	width: fit-content;\n	height: fit-content;\n	color: var(--tl-color-selected-contrast);\n	white-space: nowrap;\n	position: absolute;\n	padding: 3px 6px;\n	font-size: 12px;\n	opacity: 1;\n	border-radius: var(--tl-radius-2);\n}\n\n.tl-cursor-chat {\n	position: absolute;\n	color: var(--tl-color-selected-contrast);\n	white-space: nowrap;\n	padding: 3px 6px;\n	font-size: 12px;\n	pointer-events: none;\n	z-index: var(--tl-layer-cursor);\n	margin-top: 16px;\n	margin-left: 13px;\n	opacity: 1;\n	border: none;\n	user-select: text;\n	border-radius: var(--tl-radius-2);\n}\n\n.tl-cursor-chat .tl-cursor-chat__bubble {\n	padding-right: 12px;\n}\n\n.tl-cursor-chat::selection {\n	background: var(--tl-color-selected);\n	color: var(--tl-color-selected-contrast);\n	text-shadow: none;\n}\n\n.tl-cursor-chat::placeholder {\n	color: var(--tl-color-selected-contrast);\n	opacity: 0.7;\n}\n\n/* ---------------------- Text ---------------------- */\n\n.tl-text-shape-label {\n	position: relative;\n	font-weight: normal;\n	min-width: 1px;\n	padding: 0px;\n	margin: 0px;\n	border: none;\n	width: fit-content;\n	height: fit-content;\n	font-variant: normal;\n	font-style: normal;\n	pointer-events: all;\n	white-space: pre-wrap;\n	overflow-wrap: break-word;\n}\n\n.tl-plain-text-wrapper[data-isediting='true'] .tl-text-content {\n	opacity: 0;\n}\n\n.tl-rich-text-wrapper[data-isediting='true'] .tl-text-content {\n	display: none;\n}\n\n.tl-text {\n	/* remove overflow from textarea on windows */\n	margin: 0px;\n	padding: 0px;\n\n	appearance: auto;\n	background: none;\n	border-image: none;\n	border: 0px;\n	caret-color: var(--tl-color-text);\n	color: inherit;\n	column-count: initial !important;\n	display: inline-block;\n	font-family: inherit;\n	font-feature-settings: normal;\n	font-kerning: auto;\n	font-optical-sizing: auto;\n	font-size: inherit;\n	font-stretch: 100%;\n	font-style: inherit;\n	font-variant: inherit;\n	font-variation-settings: normal;\n	font-weight: inherit;\n	letter-spacing: inherit;\n	line-height: inherit;\n	outline: none;\n	overflow-wrap: break-word;\n	text-align: inherit;\n	text-indent: 0px;\n	text-rendering: auto;\n	text-shadow: inherit;\n	text-transform: none;\n	white-space: pre-wrap;\n	line-break: normal;\n	word-spacing: 0px;\n	word-wrap: break-word;\n	writing-mode: horizontal-tb !important;\n}\n\n.tl-text-measure {\n	z-index: var(--tl-layer-canvas-hidden);\n	opacity: 0;\n	visibility: hidden;\n\n	/* pointer-events: all; */\n	/* opacity: 1; */\n	/* z-index: 99999;  */\n\n	position: absolute;\n	top: 0px;\n	left: 0px;\n	width: max-content;\n	box-sizing: border-box;\n	pointer-events: none;\n	white-space: pre-wrap;\n	word-wrap: break-word;\n	overflow-wrap: break-word;\n	resize: none;\n	border: none;\n	user-select: none;\n	contain: layout style paint;\n	/* N.B. This property, while discouraged (\"intended for Document Type Definition (DTD) designers\") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */\n	unicode-bidi: plaintext;\n	-webkit-user-select: none;\n}\n\n.tl-text-input,\n.tl-text-content {\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	min-width: 1px;\n	min-height: 1px;\n	outline: none;\n}\n\n.tl-text-content__wrapper {\n	position: relative;\n	width: fit-content;\n	height: fit-content;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	pointer-events: none;\n	min-height: auto;\n}\n\n.tl-text-content {\n	overflow: visible;\n	pointer-events: none;\n}\n\n.tl-text-input {\n	resize: none;\n	user-select: all;\n	-webkit-user-select: text;\n	cursor: var(--tl-cursor-text);\n}\n\n.tl-text-input:not(.tl-rich-text) {\n	/*\n	 * Note: this `overflow: hidden` is key for scrollbars to not show up\n	 * plaintext/<textarea> editors.\n	 */\n	overflow: hidden;\n}\n\n.tl-text-input::selection {\n	background: var(--tl-color-selected);\n	color: var(--tl-color-selected-contrast);\n	text-shadow: none;\n}\n\n/* Text label */\n\n.tl-text-label {\n	display: flex;\n	justify-content: center;\n	align-items: center;\n	color: var(--tl-color-text);\n	line-height: inherit;\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n}\n\n.tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner {\n	width: 40px;\n	height: 40px;\n}\n\n.tl-text-label[data-hastext='true'][data-isediting='false'] .tl-text-content {\n	pointer-events: all;\n}\n\n.tl-text-label__inner > .tl-text-input.tl-rich-text {\n	display: none;\n	position: static;\n}\n\n.tl-text-wrapper[data-isediting='false'] .tl-text-input {\n	opacity: 0;\n	cursor: var(--tl-cursor-default);\n}\n\n.tl-rich-text[data-is-ready-for-editing='true'],\n.tl-text-wrapper[data-is-ready-for-editing='true'] .tl-text-input {\n	cursor: var(--tl-cursor-text);\n}\n\n.tl-text-label[data-textwrap='true'] > .tl-text-label__inner {\n	max-width: 100%;\n}\n\n.tl-text-label[data-isediting='true'] {\n	background-color: transparent;\n	min-height: auto;\n}\n\n.tl-text-wrapper .tl-text-content {\n	pointer-events: all;\n	z-index: var(--tl-layer-text-content);\n}\n\n.tl-text-label__inner > .tl-text-content {\n	position: relative;\n	top: 0px;\n	left: 0px;\n	padding: inherit;\n	height: fit-content;\n	width: fit-content;\n	border-radius: var(--tl-radius-1);\n	max-width: 100%;\n}\n\n.tl-text-label__inner > .tl-text-input {\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	padding: inherit;\n}\n\n.tl-text-wrapper[data-isselected='true'] .tl-text-input {\n	z-index: var(--tl-layer-text-editor);\n	pointer-events: all;\n}\n\n/* This part of the rule helps preserve the occlusion rules for the shapes so we\n * don't click on shapes that are behind other shapes.\n * One extra nuance is we don't use this behavior for:\n *  - arrows which have weird geometry and just gets in the way.\n *  - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield\n *  - shapes that are not filled\n */\n.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true'])\n	.tl-shape:not(\n		[data-shape-type='arrow'],\n		[data-shape-type='draw'],\n		[data-shape-type='line'],\n		[data-shape-type='highlight'],\n		[data-shape-is-filled='false']\n	) {\n	pointer-events: all;\n}\n\n.tl-rich-text .ProseMirror {\n	word-wrap: break-word;\n	overflow-wrap: break-word;\n	white-space: pre-wrap;\n\n	/**\n	 * Note: ProseMirror disables this in https://github.com/ProseMirror/prosemirror-view/commit/6b3b2205e2f3029cb8e8e86c55a190a22491df31\n	 * However, that was from 8 years ago and the browser caret issue\n	 * it mentions seems to be fixed. So, we're re-enabling it.\n	 * We'll tell ProseMirror maybe to get rid of this on their end.\n	 *\n	 */\n	-webkit-font-variant-ligatures: inherit;\n	font-variant-ligatures: inherit;\n	font-feature-settings: inherit;\n\n	/**\n	 * N.B. This following CSS Rule comes standard with the tiptap editor.\n	 * Combined with the above rule that it supersedes, it allows for\n	 * the auto-linking to work in text. Say, when typing example.com\n	 * this helps it automatically turn that bit of text into a link.\n	 *\n	 * However, specifically, the break-spaces features seems to cause\n	 * rendering differences when going in-and-out of edit mode. For example,\n	 * the statically rendered text 'the rain in spain falls mainly on the plain'\n	 * in a note shape will render differently when going in-and-out of edit mode.\n	 *\n	 * So, this is commented out to help make both the autolinking work (which now\n	 * relies on the white-space: pre-wrap to work and to make the static/edit-mode\n	 * rendering consistent.\n	 * In the future, we might consider just making the static rendering just use\n	 * white-space: break-spaces to make it consistent with the edit mode if need be.\n	 *\n	 * Also, the amount of ink I've spilt in my career writing comments explaining\n	 * white-space in contenteditable is incredible.\n	 *\n	/* white-space: break-spaces; */\n}\n\n.tl-rich-text {\n	tab-size: var(--tl-tab-size, 2);\n}\n\n.tl-rich-text p {\n	margin: 0;\n	/* Depending on the extensions, <p> tags can be empty, without a <br />. */\n	min-height: 1lh;\n}\n\n.tl-rich-text ul,\n.tl-rich-text ol {\n	text-align: left;\n	margin: 0;\n	padding-left: 1.625ch;\n	/* Some resets, like Tailwind, nix the list styling. */\n	list-style: revert;\n}\n\n.tl-rich-text ol:has(> li:nth-child(10)) {\n	padding-left: 2.625ch;\n}\n\n.tl-rich-text ol:has(> li:nth-child(100)) {\n	padding-left: 3.625ch;\n}\n\n.tl-rich-text h1,\n.tl-rich-text h2,\n.tl-rich-text h3,\n.tl-rich-text h4,\n.tl-rich-text h5,\n.tl-rich-text h6 {\n	margin-top: 5px;\n	margin-bottom: 10px;\n	/**\n	 * Headings render at a larger font-size than the body text (via the browser's\n	 * default h1–h6 sizing), so they can't inherit the container's resolved\n	 * whole-pixel line-height — that value is derived from the base font size and\n	 * would cram the taller lines together. Instead, scale line-height with each\n	 * heading's own font-size using tldraw's unitless line-height multiplier, which\n	 * the rich-text render/measure paths expose here. The 1.35 fallback mirrors the\n	 * default theme line-height (see defaultThemes.ts).\n	 */\n	line-height: var(--tl-rich-text-heading-line-height, 1.35);\n}\n\n.tl-rich-text a {\n	color: var(--tl-color-primary);\n	text-decoration: underline;\n}\n\n.tl-rich-text[data-is-select-tool-active='false'] a {\n	cursor: inherit;\n}\n\n.tl-rich-text code {\n	font-family: var(--tl-font-mono);\n}\n\n.tl-rich-text mark {\n	background-color: #fddd00;\n	color: currentColor;\n	border-radius: 2px;\n}\n\n.tl-theme__light .tl-rich-text mark {\n	text-shadow: none;\n}\n\n.tl-theme__dark .tl-rich-text mark {\n	background-color: var(--tl-color-text-highlight);\n	color: currentColor;\n	text-shadow: none;\n}\n\n@supports (color: color(display-p3 1 1 1)) {\n	@media (color-gamut: p3) {\n		.tl-container:not(.tl-theme__force-sRGB) .tl-rich-text mark {\n			background-color: var(--tl-color-text-highlight-p3);\n		}\n	}\n}\n\n.tl-text-wrapper[data-isediting='true'] .tl-rich-text {\n	display: block;\n}\n\n.tl-text__outline {\n	text-shadow: var(--tl-text-outline);\n}\n\n.tl-text__no-outline {\n	text-shadow: none;\n}\n\n/* --------------------- Loading -------------------- */\n\n.tl-loading {\n	background-color: var(--tl-color-background);\n	color: var(--tl-color-text-1);\n	height: 100%;\n	width: 100%;\n	display: flex;\n	flex-direction: column;\n	justify-content: center;\n	align-items: center;\n	gap: var(--tl-space-2);\n	font-size: 14px;\n	font-weight: 500;\n	opacity: 0;\n	animation: tl-fade-in 0.2s ease-in-out forwards;\n	animation-delay: 0.2s;\n	position: absolute;\n	inset: 0px;\n	z-index: var(--tl-layer-canvas-blocker);\n}\n\n@keyframes tl-fade-in {\n	0% {\n		opacity: 0;\n	}\n	100% {\n		opacity: 1;\n	}\n}\n\n.tl-spinner {\n	animation: tl-spin 1s linear infinite;\n}\n\n@keyframes tl-spin {\n	0% {\n		transform: rotate(0deg);\n	}\n	100% {\n		transform: rotate(360deg);\n	}\n}\n\n/* ---------------- Hyperlink Button ---------------- */\n\n.tl-hyperlink-button {\n	background: none;\n	margin: 0px;\n	position: absolute;\n	top: 0px;\n	right: 0px;\n	height: 44px;\n	width: 44px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	font-size: 12px;\n	font-weight: 400;\n	color: var(--tl-color-text-1);\n	padding: 13px;\n	cursor: var(--tl-cursor-pointer);\n	border: none;\n	outline: none;\n	pointer-events: all;\n	z-index: 1;\n}\n\n.tl-hyperlink-button::after {\n	content: '';\n	z-index: -1;\n	position: absolute;\n	right: 6px;\n	bottom: 6px;\n	display: block;\n	width: calc(100% - 12px);\n	height: calc(100% - 12px);\n	border-radius: var(--tl-radius-1);\n	background-color: var(--tl-color-background);\n	pointer-events: none;\n}\n\n.tl-hyperlink-button:focus-visible {\n	color: var(--tl-color-selected);\n}\n\n.tl-hyperlink__icon {\n	width: 15px;\n	height: 15px;\n	background-color: currentColor;\n	pointer-events: none;\n}\n\n.tl-hyperlink-button__hidden {\n	display: none;\n}\n\n/* ----------------- Shape indicator ---------------- */\n\n.tl-shape-indicator {\n	transform-origin: top left;\n	fill: none;\n	stroke-width: calc(1.5px * var(--tl-scale));\n	contain: size layout;\n}\n\n.tl-canvas-overlays {\n	position: absolute;\n	inset: 0;\n	pointer-events: none;\n	z-index: var(--tl-layer-canvas-overlays);\n}\n\n/* ---------------------- Shape --------------------- */\n\n.tl-shape {\n	position: absolute;\n	pointer-events: none;\n	overflow: visible;\n	transform-origin: top left;\n	contain: size layout;\n}\n\n/* ---------------- Shape Containers ---------------- */\n\n.tl-svg-container {\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	pointer-events: none;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	transform-origin: top left;\n	overflow: visible;\n}\n\n.tl-html-container {\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	pointer-events: none;\n	stroke-linecap: round;\n	stroke-linejoin: round;\n	/* content-visibility: auto; */\n	transform-origin: top left;\n	color: var(--tl-color-text-1);\n}\n\n.tl-content-slot {\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	pointer-events: none;\n	transform-origin: top left;\n}\n\n/* -------------------- Group shape ------------------ */\n\n.tl-group {\n	stroke: var(--tl-color-text);\n	stroke-width: calc(1px * var(--tl-scale));\n	opacity: 0.5;\n}\n\n/* --------------------- Arrow shape -------------------- */\n\n.tl-shape[data-shape-type='arrow'] .tl-text-label {\n	position: absolute;\n	top: -1px;\n	left: -1px;\n	width: 2px;\n	height: 2px;\n	padding: 0px;\n	display: flex;\n	justify-content: center;\n	align-items: center;\n	text-align: center;\n	color: var(--tl-color-text);\n}\n\n.tl-shape[data-shape-type='arrow'] .tl-text-label__inner {\n	border-radius: var(--tl-radius-1);\n	box-sizing: content-box;\n	height: max-content;\n	width: max-content;\n}\n\n.tl-shape[data-shape-type='arrow'] .tl-text {\n	height: max-content;\n}\n\n/* ------------------- Bookmark shape ------------------- */\n\n.tl-bookmark__container {\n	width: 100%;\n	height: 100%;\n	position: relative;\n	border: 1px solid var(--tl-color-panel-contrast);\n	background-color: var(--tl-color-panel);\n	border-radius: var(--tl-radius-2);\n	display: flex;\n	flex-direction: column;\n	overflow: hidden;\n}\n\n.tl-bookmark__container--safariExport {\n	border: 1px solid var(--tl-color-divider);\n}\n\n.tl-bookmark__image_container {\n	flex: 1 1 100%;\n	overflow: hidden;\n	border-top-left-radius: var(--tl-radius-1);\n	border-top-right-radius: var(--tl-radius-1);\n	width: 100%;\n	height: 100%;\n	display: flex;\n	justify-content: flex-end;\n	align-items: flex-start;\n	box-shadow: inset 0px 0px 0px 1px var(--tl-color-divider);\n}\n\n.tl-bookmark__image_container > .tl-hyperlink-button::after {\n	background-color: var(--tl-color-panel);\n}\n\n.tl-bookmark__placeholder {\n	width: 100%;\n	height: 100%;\n	background-color: var(--tl-color-muted-2);\n	border-bottom: 1px solid var(--tl-color-muted-2);\n}\n\n.tl-bookmark__image {\n	width: 100%;\n	height: 100%;\n	object-fit: cover;\n	object-position: center;\n	border-bottom: 1px solid var(--tl-color-muted-2);\n}\n\n.tl-bookmark__copy_container {\n	background-color: var(--tl-color-muted-0);\n	padding: var(--tl-space-4);\n	pointer-events: all;\n	display: flex;\n	flex-direction: column;\n	justify-content: space-between;\n	flex: 1;\n}\n\n.tl-bookmark__copy_container:has(.tl-bookmark__link:only-child) {\n	justify-content: center;\n}\n\n.tl-bookmark__heading,\n.tl-bookmark__description,\n.tl-bookmark__link {\n	margin: 0px;\n	width: 100%;\n	font-family: inherit;\n}\n\n.tl-bookmark__heading {\n	font-size: 16px;\n	line-height: 1.6;\n	font-weight: bold;\n	padding-bottom: var(--tl-space-2);\n	overflow: hidden;\n	max-height: calc((16px * 1.6) * 2);\n	-webkit-box-orient: vertical;\n	-webkit-line-clamp: 2;\n	line-clamp: 2;\n	text-overflow: ellipsis;\n	display: -webkit-box;\n}\n\n.tl-bookmark__description {\n	font-size: 12px;\n	line-height: 1.5;\n	overflow: hidden;\n	max-height: calc((12px * 1.5) * 3);\n	-webkit-box-orient: vertical;\n	-webkit-line-clamp: 3;\n	line-clamp: 3;\n	text-overflow: ellipsis;\n	display: -webkit-box;\n	color: var(--tl-color-text-1);\n	margin: var(--tl-space-2) 0px;\n}\n\n.tl-bookmark__heading + .tl-bookmark__link,\n.tl-bookmark__description + .tl-bookmark__link {\n	margin-top: var(--tl-space-3);\n}\n.tl-bookmark__link {\n	font-size: 12px;\n	pointer-events: all;\n	display: flex;\n	color: var(--tl-color-text-1);\n	align-items: center;\n	cursor: var(--tl-cursor-pointer);\n	width: fit-content;\n	max-width: 100%;\n	text-decoration: none;\n}\n\n.tl-bookmark__link > span {\n	flex-shrink: 0px;\n	white-space: nowrap;\n	overflow: hidden;\n	text-overflow: ellipsis;\n}\n\n.tl-bookmark__link > .tl-hyperlink__icon {\n	margin-right: 8px;\n	flex-shrink: 0;\n}\n\n.tl-bookmark__link > .tl-bookmark__favicon {\n	margin-right: 8px;\n	width: 16px;\n	height: 16px;\n	flex-shrink: 0;\n}\n\n/* -------------- Image and video shape ------------- */\n\n.tl-image,\n.tl-video {\n	object-fit: cover;\n	background-size: cover;\n	width: 100%;\n	height: 100%;\n}\n\n.tl-video-container,\n.tl-image-container,\n.tl-embed-container {\n	width: 100%;\n	height: 100%;\n	pointer-events: all;\n	/* background-color: var(--tl-color-background); */\n\n	display: flex;\n	justify-content: center;\n	align-items: center;\n}\n\n.tl-image-container {\n	position: relative;\n}\n\n.tl-image {\n	position: absolute;\n	inset: 0;\n}\n\n.tl-video.tl-video-is-fullscreen {\n	object-fit: contain;\n	background-size: contain;\n}\n\n/* -------------------- Note shape ------------------- */\n\n.tl-note__container {\n	position: relative;\n	width: 100%;\n	height: 100%;\n	pointer-events: all;\n	opacity: 1;\n	z-index: var(--tl-layer-text-container);\n	border-radius: 1px;\n}\n\n.tl-note__container > .tl-text-label {\n	color: currentColor;\n}\n\n.tl-note__attribution {\n	position: absolute;\n	bottom: calc(4px * var(--note-attribution-scale, 1));\n	right: calc(8px * var(--note-attribution-scale, 1));\n	font-family: var(--tl-font-sans);\n	pointer-events: auto;\n	white-space: nowrap;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	max-width: 60%;\n	z-index: 1;\n}\n\n/* ------------------- Frame shape ------------------- */\n\n.tl-frame__body {\n	stroke-width: calc(1px * var(--tl-scale));\n}\n\n.tl-frame__creating {\n	stroke: var(--tl-color-selected);\n	fill: none;\n}\n\n.tl-frame-heading {\n	--tl-frame-padding-x: 6px;\n	--tl-frame-height: 24px;\n	--tl-frame-minimum-width: 32px;\n	--tl-frame-offset-width: 16px;\n	display: flex;\n	align-items: center;\n	position: absolute;\n	transform-origin: 0% 100%;\n	overflow: hidden;\n	max-width: 100%;\n	min-width: var(--tl-frame-minimum-width);\n	height: auto;\n	font-size: 12px;\n	padding-bottom: 4px;\n	pointer-events: all;\n}\n\n.tl-frame-heading-hit-area {\n	pointer-events: all;\n	/* scale from bottom left corner so we can pin it to the top left corner of the frame */\n	transform-origin: 0% 100%;\n	display: flex;\n	height: var(--tl-frame-height);\n	width: 100%;\n	align-items: center;\n	border-radius: var(--tl-radius-1);\n}\n\n.tl-frame-label {\n	pointer-events: all;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	padding: 0px var(--tl-frame-padding-x);\n	border-radius: var(--tl-radius-1);\n	position: relative;\n	font-size: inherit;\n	white-space: pre;\n}\n\n.tl-frame-label__editing {\n	color: transparent;\n	white-space: pre;\n	width: auto;\n	min-width: var(--tl-frame-minimum-width);\n	height: 100%;\n	overflow: visible;\n	background-color: var(--tl-color-panel);\n	border-color: var(--tl-color-selected);\n	box-shadow: inset 0px 0px 0px 1.5px var(--tl-color-selected);\n}\n\n.tl-frame-name-input {\n	position: absolute;\n	border: none;\n	background: none;\n	outline: none;\n	padding: 0px var(--tl-frame-padding-x);\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	font-size: inherit;\n	font-family: inherit;\n	font-weight: inherit;\n	width: 100%;\n	color: var(--tl-color-text-1);\n	border-radius: var(--tl-radius-1);\n	user-select: all;\n	-webkit-user-select: text;\n	white-space: pre;\n	cursor: var(--tl-cursor-text);\n}\n\n/* ------------------- Embed Shape ------------------ */\n\n.tl-embed {\n	border: none;\n	border-radius: var(--tl-radius-2);\n}\n\n/* -------------- Shape error boundary -------------- */\n\n.tl-shape-error-boundary {\n	width: 100%;\n	height: 100%;\n	background-color: var(--tl-color-muted-1);\n	border-width: calc(1px * var(--tl-scale));\n	border-color: var(--tl-color-muted-1);\n	border-style: solid;\n	border-radius: calc(var(--tl-radius-1) * var(--tl-scale));\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: center;\n	text-align: left;\n	position: relative;\n	pointer-events: all;\n	overflow: hidden;\n	padding: var(--tl-space-2);\n}\n\n.tl-shape-error-boundary::before {\n	transform: scale(var(--tl-scale));\n	content: 'Error';\n	font-size: 12px;\n	font-family: inherit;\n	color: var(--tl-color-text-0);\n}\n\n/* ----------------- Error boundary ----------------- */\n\n.tl-error-boundary {\n	width: 100%;\n	height: 100%;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	padding: var(--tl-space-4);\n	background-color: var(--tl-color-background);\n	color: var(--tl-color-text-1);\n	position: absolute;\n}\n\n.tl-error-boundary__overlay {\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	z-index: var(--tl-layer-error-overlay);\n	background-color: var(--tl-color-overlay);\n}\n\n.tl-error-boundary__content * {\n	user-select: all;\n	-webkit-user-select: text;\n	pointer-events: all;\n}\n\n.tl-error-boundary__canvas {\n	pointer-events: none;\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	z-index: var(--tl-layer-error-canvas);\n}\n\n/* some browsers seem to have some weird interactions between stacking contexts\nand pointer-events. this ::after pseudo element covers the canvas and prevents\nit from receiving any pointer events or affecting the cursor. */\n.tl-error-boundary__canvas::after {\n	content: ' ';\n	display: block;\n	position: absolute;\n	inset: 0px;\n	height: 100%;\n	width: 100%;\n	z-index: var(--tl-layer-error-canvas-after);\n	pointer-events: all;\n}\n\n.tl-error-boundary__content {\n	width: fit-content;\n	height: fit-content;\n	max-width: 100%;\n	width: 400px;\n	max-height: 100%;\n	background-color: var(--tl-color-panel);\n	padding: 16px;\n	border-radius: 16px;\n	box-shadow: var(--tl-shadow-2);\n	font-size: 14px;\n	font-weight: 400;\n	display: flex;\n	flex-direction: column;\n	overflow: auto;\n	z-index: var(--tl-layer-error-content);\n	gap: 12px;\n}\n\n.tl-error-boundary__content__expanded {\n	width: 600px;\n}\n\n.tl-error-boundary__content h2 {\n	font-size: 16px;\n	margin: 0px;\n	font-weight: 500;\n}\n\n.tl-error-boundary__content h4 {\n	border: 1px solid var(--tl-color-low-border);\n	margin: -6px 0 0 0;\n	padding: var(--tl-space-5);\n	border-radius: var(--tl-radius-2);\n	font-weight: normal;\n}\n\n.tl-error-boundary__content p {\n	line-height: 1.5;\n	margin: 0px;\n}\n\n.tl-error-boundary__content pre {\n	background-color: var(--tl-color-muted-2);\n	margin-top: 0;\n	padding: var(--tl-space-5);\n	border-radius: var(--tl-radius-2);\n	overflow: auto;\n	font-size: 12px;\n	max-height: 320px;\n}\n\n.tl-error-boundary__content button {\n	background: none;\n	border: none;\n	font-family: inherit;\n	font-size: 14px;\n	font-weight: 500;\n	padding: var(--tl-space-4);\n	border-radius: var(--tl-radius-3);\n	cursor: var(--tl-cursor-pointer);\n	color: inherit;\n	background-color: transparent;\n}\n\n.tl-error-boundary__content a {\n	color: var(--tl-color-selected);\n	font-weight: 500;\n	text-decoration: none;\n}\n\n.tl-error-boundary__content__error {\n	position: relative;\n	margin: -6px 0 0 0;\n}\n\n.tl-error-boundary__content__error button {\n	position: absolute;\n	top: var(--tl-space-2);\n	right: var(--tl-space-2);\n	font-size: 12px;\n	padding: var(--tl-space-2) var(--tl-space-3);\n	background-color: var(--tl-color-panel);\n	border-radius: var(--tl-radius-1);\n}\n\n.tl-error-boundary__content__actions {\n	display: flex;\n	justify-content: space-between;\n	gap: var(--tl-space-4);\n	margin: 0px;\n	margin-left: -4px;\n}\n.tl-error-boundary__content__actions__group {\n	display: flex;\n	gap: var(--tl-space-4);\n}\n.tl-error-boundary__content .tl-error-boundary__reset {\n	color: var(--tl-color-danger);\n}\n.tl-error-boundary__content .tl-error-boundary__refresh {\n	background-color: var(--tl-color-primary);\n	color: var(--tl-color-selected-contrast);\n}\n.tl-container__focused:not(.tl-container__no-focus-ring)\n	.tlui-button.tl-error-boundary__refresh:focus-visible {\n	border-radius: 8px;\n	outline-offset: 0;\n}\n\n/* ---------------- Hit test blocker ---------------- */\n\n.tl-hit-test-blocker {\n	position: absolute;\n	z-index: var(--tl-layer-canvas-blocker);\n	inset: 0px;\n	width: 100%;\n	height: 100%;\n	pointer-events: all;\n}\n\n.tl-hit-test-blocker__hidden {\n	display: none;\n}\n\n/* --------------------- Hovers --------------------- */\n\n@media (hover: hover) {\n	.tl-handle__create:hover {\n		opacity: 1;\n	}\n\n	.tl-handle__bg:hover {\n		cursor: var(--tl-cursor-grab);\n		fill: var(--tl-color-selection-fill);\n	}\n\n	.tl-bookmark__link:hover {\n		color: var(--tl-color-selected);\n	}\n\n	.tl-hyperlink-button:hover {\n		color: var(--tl-color-selected);\n	}\n\n	.tl-error-boundary__content button:hover {\n		background-color: var(--tl-color-low);\n	}\n	.tl-error-boundary__content a:hover {\n		color: var(--tl-color-text-1);\n	}\n	.tl-error-boundary__content .tl-error-boundary__refresh:hover {\n		background-color: var(--tl-color-primary);\n		opacity: 0.9;\n	}\n\n	/* These three rules help preserve clicking into specific points in text areas *while*\n * already in edit mode when jumping from shape to shape. */\n	.tl-canvas[data-iseditinganything='true'] .tl-text-wrapper:hover .tl-text-input {\n		z-index: var(--tl-layer-text-editor);\n		pointer-events: all;\n	}\n}\n\n/* @tldraw/ui */\n\n.tl-container {\n	/*\n	 * UI z-index layers\n	 *\n	 * menu-click-capture and panels (.tlui-layout) participate in the\n	 * container-level stacking context alongside the canvas layers:\n	 *   watermark (200) < canvas-in-front (250) < menu-click-capture (250) < panels (300)\n	 *\n	 * menus, toasts, header-footer, etc. are children of .tlui-layout\n	 * (which creates its own stacking context at z-index 300), so their\n	 * z-indices are relative to the layout, not the container.\n	 *\n	 * cursor is rendered inside canvas-in-front (stacking context at\n	 * z-index 250), so their z-indices are relative to that context.\n	 */\n	--tl-layer-above: 1;\n	--tl-layer-focused-input: 10;\n	--tl-layer-menu-click-capture: 250;\n	--tl-layer-panels: 300;\n	--tl-layer-menus: 400;\n	--tl-layer-toasts: 650;\n	--tl-layer-cursor: 700;\n	--tl-layer-header-footer: 999;\n}\n\n/* Button */\n\n.tlui-button {\n	position: relative;\n	height: 40px;\n	min-width: 40px;\n	padding: 0px 12px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	background-color: transparent;\n	border: transparent;\n	color: currentColor;\n	cursor: pointer;\n	pointer-events: all;\n	font-weight: inherit;\n	font-family: inherit;\n	line-height: inherit;\n	text-rendering: optimizeLegibility;\n	font-size: 12px;\n	gap: 0px;\n	color: var(--tl-color-text-1);\n	z-index: 0;\n}\n\n.tlui-button:disabled,\n.tlui-button[data-disabled] {\n	color: var(--tl-color-text-disabled);\n	text-shadow: none;\n	cursor: default;\n}\n\n.tlui-button:disabled .tlui-kbd,\n.tlui-button[data-disabled] .tlui-kbd {\n	color: var(--tl-color-text-disabled);\n}\n\n.tlui-button > * {\n	position: relative;\n	z-index: var(--tl-layer-above);\n}\n\n.tlui-button__label {\n	font-size: 12px;\n	flex-grow: 2;\n	text-align: start;\n	min-width: 0;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n/*\n * We only want to show the focus ring if:\n * - the container is focused\n * - we're not using the mouse to interact (which is the .tl-container__no-focus-ring)\n */\n.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button:focus-visible {\n	border-radius: 10px;\n	outline: 2px solid var(--tl-color-focus);\n	outline-offset: -5px;\n}\n.tl-container__focused:not(.tl-container__no-focus-ring) .tlui-button__tool:focus-visible {\n	border-radius: 12px;\n}\n.tlui-slider__container:has(.tlui-slider__thumb:focus-visible) {\n	border-radius: 10px;\n	outline: 2px solid var(--tl-color-focus);\n	outline-offset: -5px;\n}\n\n.tlui-button::after {\n	display: block;\n	content: '';\n	position: absolute;\n	inset: 4px;\n	border-radius: var(--tl-radius-2);\n	background: var(--tl-color-muted-2);\n	opacity: 0;\n}\n\n.tlui-button__menu[data-highlighted]::after {\n	opacity: 1;\n}\n\n.tlui-button[data-isactive='true']::after,\n.tlui-button[data-isactive='true']:not(:disabled, [data-disabled], :focus-visible):active:after {\n	background: var(--tl-color-hint);\n	opacity: 1;\n}\n\n.tlui-button[aria-expanded='true'][data-direction='left'] {\n	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n	opacity: 1;\n}\n\n@media (hover: hover) {\n	.tlui-button[aria-expanded='true'][data-direction='left']:not(:hover)::after {\n		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n		opacity: 1;\n	}\n\n	.tlui-button:not(:disabled, [data-disabled]):hover {\n		z-index: 1;\n	}\n\n	.tlui-button:not(:disabled, [data-disabled]):hover::after {\n		opacity: 1;\n	}\n}\n\n.tlui-button__icon + .tlui-button__label {\n	margin-inline-start: var(--tl-space-2);\n}\n\n/* Low button  */\n\n.tlui-button__low {\n	border-radius: var(--tl-radius-3);\n	background-color: var(--tl-color-low);\n}\n\n.tlui-button__low::after {\n	background-color: var(--tl-color-muted-2);\n	opacity: 0;\n}\n\n@media (hover: hover) {\n	.tlui-button__low:hover::after {\n		opacity: 1;\n	}\n}\n\n/* Primary / danger buttons */\n\n.tlui-button__primary {\n	color: var(--tl-color-primary);\n}\n\n.tlui-button__danger {\n	color: var(--tl-color-danger);\n	text-shadow: none;\n}\n\n@media (hover: hover) {\n	.tlui-button__primary:not(:disabled, [data-disabled], :focus-visible):hover {\n		color: var(--tl-color-primary);\n	}\n\n	.tlui-button__danger:not(:disabled, [data-disabled], :focus-visible):hover {\n		color: var(--tl-color-danger);\n		text-shadow: none;\n	}\n}\n\n/* Menu button */\n\n.tlui-button__menu {\n	height: 40px;\n	min-height: 40px;\n	width: 100%;\n	gap: 8px;\n	margin-top: -4px;\n}\n\n.tlui-button__menu::after {\n	inset: 4px;\n	border-radius: var(--tl-radius-2);\n}\n\n.tlui-button__menu > .tlui-icon + .tlui-button__label {\n	margin-inline-start: 0px;\n}\n\n.tlui-button__menu:nth-child(1) {\n	margin-top: 0px;\n}\n\n.tlui-button__menu:nth-last-child(1) {\n	margin-bottom: 0px;\n}\n\n/* Menu checkbox button */\n\n.tlui-button__checkbox {\n	padding-left: 8px;\n}\n\n.tlui-button__checkbox__indicator {\n	width: 15px;\n	height: 15px;\n}\n\n/* Tool lock button */\n\n.tlui-main-toolbar__lock-button {\n	position: absolute;\n	pointer-events: all;\n	height: 40px;\n	width: 40px;\n	border-radius: var(--tl-radius-2);\n}\n\n.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {\n	top: 4px;\n	right: 0px;\n	min-width: 0px;\n}\n\n.tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {\n	bottom: 0px;\n	min-height: 0px;\n}\n\n.tlui-main-toolbar__lock-button::after {\n	top: 4px;\n	left: 8px;\n	inset: 4px;\n}\n\n/* Tool button  */\n\n.tlui-button__tool {\n	position: relative;\n	height: 48px;\n	width: 48px;\n}\n\n.tlui-button__tool::after {\n	inset: 4px;\n	border-radius: 8px;\n}\n\n.tlui-button__tool[aria-pressed='true'] {\n	color: var(--tl-color-selected-contrast);\n}\n\n.tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled], :focus-visible):active {\n	color: var(--tl-color-selected-contrast);\n}\n\n.tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled])::after {\n	background: var(--tl-color-selected);\n	opacity: 1;\n}\n\n.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {\n	height: 48px;\n	width: 43px;\n}\n\n.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {\n	height: 16px;\n	width: 16px;\n}\n\n/* Row layout */\n\n.tlui-row {\n	display: flex;\n	flex-direction: row;\n	padding: 0 2px;\n}\n.tlui-row > * {\n	margin-left: -2px;\n	margin-right: -2px;\n}\n\n/* Column layout */\n\n.tlui-column {\n	display: flex;\n	flex-direction: column;\n	padding: 2px 0;\n}\n.tlui-column > * {\n	margin-top: -2px;\n	margin-bottom: -2px;\n}\n\n/* Grid layout */\n\n.tlui-grid {\n	display: grid;\n	grid-template-columns: repeat(4, 1fr);\n	grid-auto-flow: row;\n	overflow: hidden;\n	padding: 2px;\n}\n.tlui-grid > * {\n	margin: -2px;\n}\n\n/* Zoom button */\n\n.tlui-zoom-menu__button {\n	width: 60px;\n	min-width: 60px;\n	text-align: center;\n}\n\n.tlui-zoom-menu__button[data-state='open']::after {\n	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n	opacity: 1;\n}\n\n/* --------------------- Layout --------------------- */\n\n.tlui-layout {\n	position: relative;\n	display: grid;\n	grid-template-columns: 1fr;\n	grid-template-rows: minmax(0px, 1fr) auto;\n	grid-auto-rows: auto;\n	height: 100%;\n	max-height: 100%;\n	overflow: clip;\n	pointer-events: none;\n	user-select: none;\n	contain: strict;\n	z-index: var(--tl-layer-panels);\n	transform: translate3d(0, 0, 0);\n	--tl-sab: env(safe-area-inset-bottom);\n	font-weight: 500;\n	line-height: 1.6;\n	-webkit-font-smoothing: antialiased;\n	-moz-osx-font-smoothing: grayscale;\n	font-smooth: antialiased;\n	text-rendering: optimizeLegibility;\n}\n\n.tlui-layout__top {\n	grid-column: 1;\n	grid-row: 1;\n	display: flex;\n	min-width: 0px;\n	justify-content: space-between;\n}\n\n.tlui-layout__top__left {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-start;\n	justify-content: flex-start;\n	width: 100%;\n	height: 100%;\n	flex: 0 1 0;\n}\n\n.tlui-layout__top__right {\n	display: flex;\n	flex-direction: column;\n	align-items: flex-end;\n	justify-content: flex-start;\n	height: 100%;\n	flex: 0 0 auto;\n	min-width: 0px;\n}\n\n.tlui-scrollable,\n.tlui-scrollable * {\n	pointer-events: all;\n	touch-action: auto;\n	overscroll-behavior: none;\n}\n\n/* ----------------- Helper Buttons ---------------- */\n\n.tlui-helper-buttons {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	justify-content: flex-start;\n	align-items: flex-start;\n	width: min-content;\n	gap: var(--tl-space-3);\n	margin: var(--tl-space-2) var(--tl-space-3);\n	white-space: nowrap;\n	pointer-events: none;\n	z-index: var(--tl-layer-panels);\n}\n\n/* ---------------------- Icon ---------------------- */\n\n.tlui-icon {\n	flex-shrink: 0;\n	width: 18px;\n	height: 18px;\n	background-color: currentColor;\n}\n\n.tlui-icon__placeholder {\n	flex-shrink: 0;\n	width: 18px;\n	height: 18px;\n	background-color: transparent;\n}\n\n.tlui-icon__small {\n	width: 15px;\n	height: 15px;\n}\n\n.tlui-icon__tiny {\n	width: 12px;\n	height: 12px;\n}\n\n/* --------------------- Slider --------------------- */\n\n.tlui-slider__container {\n	width: 100%;\n	padding: 0px var(--tl-space-4);\n}\n\n.tlui-slider {\n	position: relative;\n	display: flex;\n	align-items: center;\n	user-select: none;\n	touch-action: none;\n	width: 100%;\n}\n\n.tlui-slider__track {\n	position: relative;\n	flex-grow: 1;\n	height: 44px;\n	cursor: pointer;\n}\n\n.tlui-slider__track::after {\n	display: block;\n	position: absolute;\n	top: calc(50% - 2px);\n	content: '';\n	height: 3px;\n	width: 100%;\n	background-color: var(--tl-color-muted-1);\n	border-radius: 14px;\n}\n\n.tlui-slider__range {\n	position: absolute;\n	top: calc(50% - 2px);\n	left: 0px;\n	height: 3px;\n	background-color: var(--tl-color-selected);\n	border-radius: 14px;\n}\n\n.tlui-slider__thumb {\n	all: unset;\n	cursor: grab;\n	display: block;\n	width: 18px;\n	height: 18px;\n	position: relative;\n	top: -1px;\n	background-color: var(--tl-color-panel);\n	border-radius: 999px;\n	box-shadow: inset 0px 0px 0px 2px var(--tl-color-text-1);\n}\n\n.tlui-slider__thumb:active {\n	cursor: grabbing;\n	box-shadow:\n		inset 0px 0px 0px 2px var(--tl-color-text-1),\n		var(--tl-shadow-1);\n}\n\n/* ---------------------- Input --------------------- */\n\n.tlui-input {\n	background: none;\n	margin: 0px;\n	position: relative;\n	z-index: var(--tl-layer-above);\n	height: 40px;\n	max-height: 40px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	font-family: inherit;\n	font-size: 12px;\n	font-weight: inherit;\n	color: var(--tl-color-text-1);\n	padding: var(--tl-space-4);\n	padding-left: 0px;\n	border: none;\n	outline: none;\n	text-overflow: ellipsis;\n	width: 100%;\n	user-select: all;\n	text-rendering: optimizeLegibility;\n	-webkit-user-select: auto !important;\n}\n\n.tlui-input::placeholder {\n	color: var(--tl-color-text-3);\n}\n\n.tlui-input__wrapper {\n	width: 100%;\n	height: 44px;\n	display: flex;\n	align-items: center;\n	gap: var(--tl-space-4);\n	color: var(--tl-color-text);\n}\n\n.tlui-input__wrapper > .tlui-icon {\n	flex-shrink: 0;\n}\n\n/* The label is a fixed bit of chrome next to the input; it should never be squeezed. Without this,\n   an inherited `overflow-wrap: anywhere` (e.g. from .tlui-dialog__body) drops its min-content width\n   to a single character and short labels wrap mid-word, e.g. \"URL\" breaking after \"UR\". */\n.tlui-input__wrapper > label {\n	flex-shrink: 0;\n	overflow-wrap: normal;\n}\n\n/* If mobile use 16px as font size */\n/* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */\n/* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */\n@supports (-webkit-touch-callout: none) {\n	/* CSS specific to iOS devices */\n	.tlui-input {\n		font-size: 16px;\n	}\n}\n\n/* --------------------- Select --------------------- */\n\n/* Trigger extends .tlui-button with space-between layout */\n.tlui-select__trigger {\n	justify-content: space-between;\n	gap: var(--tl-space-3);\n}\n\n.tlui-select__trigger[data-state='open']::after {\n	opacity: 1;\n}\n\n.tlui-select__value {\n	display: flex;\n	align-items: center;\n	gap: var(--tl-space-2);\n}\n\n.tlui-select__chevron {\n	flex-shrink: 0;\n	color: var(--tl-color-text-2);\n}\n\n/* Content extends .tlui-menu with Radix-aware sizing */\n.tlui-select__content {\n	min-width: var(--radix-select-trigger-width);\n	max-height: var(--radix-select-content-available-height);\n}\n\n.tlui-select__viewport {\n	padding: 4px 0;\n}\n\n/* Item extends .tlui-button__checkbox with left-aligned text */\n.tlui-select__item {\n	justify-content: flex-start;\n}\n\n.tlui-select__item-indicator {\n	visibility: hidden;\n}\n\n.tlui-select__item[data-state='checked'] .tlui-select__item-indicator {\n	visibility: visible;\n}\n\n/* ----------------------- Kbd ---------------------- */\n\n.tlui-kbd {\n	font-family: inherit;\n	font-size: 11px;\n	line-height: 11px;\n	display: grid;\n	justify-items: center;\n	grid-auto-flow: column;\n	grid-template-columns: auto;\n	grid-auto-columns: minmax(1em, auto);\n	align-self: bottom;\n	color: currentColor;\n	margin-inline-start: var(--tl-space-4);\n}\n\n.tlui-kbd > span {\n	width: 100%;\n	text-align: center;\n	display: inline;\n	margin: 0px;\n	padding: 2px;\n	border-radius: 2px;\n}\n\n.tlui-kbd > span:last-child {\n	padding-inline-end: 0;\n}\n\n.tlui-kbd:not(:last-child) {\n	margin-inline-end: var(--tl-space-2);\n}\n\n/* Focus Mode Button */\n\n.tlui-focus-button {\n	z-index: var(--tl-layer-panels);\n	pointer-events: all;\n}\n\n/* ---------------------- Menu ---------------------- */\n\n.tlui-menu:empty {\n	display: none;\n}\n\n.tlui-menu {\n	z-index: var(--tl-layer-menus);\n	height: fit-content;\n	width: fit-content;\n	border-radius: var(--tl-radius-3);\n	pointer-events: all;\n	touch-action: auto;\n	overflow-y: auto;\n	overscroll-behavior: none;\n	background-color: var(--tl-color-panel);\n	box-shadow: var(--tl-shadow-3);\n}\n\n@media (max-height: 600px) {\n	.tlui-menu {\n		max-height: 70vh;\n	}\n}\n\n.tlui-menu::-webkit-scrollbar {\n	display: none;\n}\n\n/* Menu groups */\n\n.tlui-menu__group {\n	width: 100%;\n}\n\n.tlui-menu__group:empty {\n	display: none;\n}\n\n.tlui-menu__group {\n	border-bottom: 1px solid var(--tl-color-divider);\n}\n.tlui-menu__group:nth-last-of-type(1) {\n	border-bottom: none;\n}\n\n/* Submenu triggers */\n\n.tlui-menu__submenu__trigger {\n	--gradient-angle: 90deg;\n}\n\n.tlui-menu__submenu__trigger[data-direction='left'] {\n	--gradient-angle: 270deg;\n}\n\n.tlui-menu__submenu__trigger[data-state='open']::after {\n	opacity: 1;\n	background: linear-gradient(\n		var(--gradient-angle),\n		rgba(144, 144, 144, 0) 0%,\n		var(--tl-color-muted-2) 100%\n	);\n}\n\n@media (hover: hover) {\n	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {\n		opacity: 1;\n		background: linear-gradient(\n			var(--gradient-angle),\n			rgba(144, 144, 144, 0) 0%,\n			var(--tl-color-muted-2) 100%\n		);\n	}\n}\n\n/* Menu Sizes */\n\n.tlui-menu[data-size='large'] > .tlui-menu__group {\n	min-width: initial;\n}\n\n.tlui-menu[data-size='medium'] > .tlui-menu__group {\n	min-width: 144px;\n}\n\n.tlui-menu[data-size='small'] > .tlui-menu__group {\n	min-width: 96px;\n}\n\n.tlui-menu[data-size='tiny'] > .tlui-menu__group {\n	min-width: 0px;\n}\n\n.tlui-menu-click-capture {\n	position: fixed;\n	inset: 0;\n	z-index: var(--tl-layer-menu-click-capture);\n}\n\n/* --------------------- Popover -------------------- */\n\n.tlui-popover {\n	position: relative;\n	display: flex;\n	align-content: stretch;\n}\n\n.tlui-popover__content {\n	position: relative;\n	max-height: calc(var(--radix-popover-content-available-height) - 8px);\n	margin: 0px;\n	border: none;\n	border-radius: var(--tl-radius-3);\n	background-color: var(--tl-color-panel);\n	box-shadow: var(--tl-shadow-3);\n	z-index: var(--tl-layer-menus);\n	overflow: hidden;\n	overflow-y: auto;\n	touch-action: auto;\n	overscroll-behavior: none;\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n.tlui-hover-card__content {\n	position: relative;\n	margin: 0px;\n	border: none;\n	border-radius: var(--tl-radius-3);\n	background-color: var(--tl-color-panel);\n	box-shadow: var(--tl-shadow-3);\n	z-index: var(--tl-layer-menus);\n}\n\n/* -------------------- Menu Zone ------------------- */\n\n.tlui-menu-zone {\n	position: relative;\n	z-index: var(--tl-layer-panels);\n	width: fit-content;\n	border-right: 2px solid var(--tl-color-background);\n	border-bottom: 2px solid var(--tl-color-background);\n	border-bottom-right-radius: var(--tl-radius-4);\n	background-color: var(--tl-color-low);\n}\n\n.tlui-menu-zone *[data-state='open']::after {\n	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n	opacity: 1;\n}\n\n@media (hover: hover) {\n	.tlui-menu-zone *[data-state='open']:not(:hover)::after {\n		background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n		opacity: 1;\n	}\n}\n\n/* ------------------- Page Select ------------------ */\n\n.tlui-page-menu__wrapper {\n	display: flex;\n	flex-direction: column;\n	width: 220px;\n}\n\n.tlui-page-menu__trigger {\n	width: auto;\n}\n\n.tlui-page-menu__trigger[data-state='open']::after {\n	background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n	opacity: 1;\n}\n\n.tlui-page-menu__list {\n	flex: 0 0 auto;\n	overflow-x: hidden;\n	overflow-y: auto;\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n.tlui-page-menu__list::-webkit-scrollbar {\n	display: none;\n}\n\n.tlui-page-menu__list__content {\n	position: relative;\n	overflow: hidden;\n}\n\n.tlui-page-menu__resize-handle {\n	flex: 0 0 auto;\n	position: relative;\n	height: 1px;\n	cursor: ns-resize;\n	touch-action: none;\n	background: var(--tl-color-divider);\n	transition: background-color ease-in-out 150ms 80ms;\n	z-index: 999;\n}\n\n/* Hit test area */\n.tlui-page-menu__resize-handle::after {\n	content: '';\n	position: absolute;\n	inset: -4px 0;\n	background: none;\n	z-index: 2000;\n	pointer-events: all;\n}\n\n/* Thick blue indicator */\n.tlui-page-menu__resize-handle::before {\n	content: '';\n	position: absolute;\n	top: 0;\n	left: 0;\n	right: 0;\n	height: 1.5px;\n	background: transparent;\n	pointer-events: none;\n	z-index: 2001;\n}\n\n.tlui-page-menu__resize-handle[data-resizing='true']::before {\n	background: var(--tl-color-selected);\n	transition: none;\n}\n\n.tlui-page-menu__create-button {\n	flex: 0 0 auto;\n	margin: 0;\n}\n\n.tlui-page-menu__item__button {\n	flex: 1 1 auto;\n	min-width: 0px;\n}\n\n.tlui-page-menu__item__button::after,\n.tlui-page-menu__item__drag-handle::after {\n	content: none;\n}\n\n.tlui-page-menu__item__button > .tlui-button__label {\n	padding-inline-end: calc(40px - 12px);\n}\n\n.tlui-page-menu__item {\n	position: absolute;\n	top: 0px;\n	inset-inline-start: 0px;\n	width: 100%;\n	height: 40px;\n	display: flex;\n	flex-direction: row;\n	align-items: center;\n	overflow: hidden;\n	transition: transform 0.08s ease-out;\n}\n\n.tlui-page-menu__item::before {\n	content: '';\n	position: absolute;\n	inset: 4px;\n	border-radius: var(--tl-radius-2);\n	background: var(--tl-color-muted-2);\n	opacity: 0;\n	pointer-events: none;\n}\n\n.tlui-page-menu__item > * {\n	position: relative;\n	z-index: var(--tl-layer-above);\n}\n\n.tlui-page-menu__item[data-iscurrent='true']:not([data-editing='true'])::before {\n	background: var(--tl-color-hint);\n	opacity: 1;\n}\n\n.tlui-page-menu__item__title {\n	flex: 1;\n	height: 40px;\n	position: relative;\n}\n\n.tlui-page-menu__item__title::before {\n	content: '';\n	position: absolute;\n	inset: 4px;\n	border-radius: var(--tl-radius-2);\n	border: 1px solid var(--tl-color-primary);\n	pointer-events: none;\n}\n\n.tlui-page-menu__item__title > .tlui-input__wrapper {\n	height: 100%;\n}\n\n.tlui-page-menu__item[data-dragging='true'],\n.tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__button,\n.tlui-page-menu__item[data-dragging='true'] .tlui-page-menu__item__drag-handle {\n	cursor: grabbing;\n	transition: none;\n}\n\n.tlui-page-menu__item[data-dragging='true'] {\n	background: var(--tl-color-panel);\n	opacity: 1;\n}\n\n.tlui-page-menu__item__drag-handle {\n	flex: 0 0 32px;\n	min-width: 32px;\n	padding: 0px;\n	color: var(--tl-color-text-3);\n	cursor: grab;\n	touch-action: none;\n}\n\n.tlui-page-menu__item__drag-handle > .tlui-icon {\n	position: relative;\n	inset-inline-start: 1px;\n}\n\n.tlui-page-menu__item__drag-handle + .tlui-page-menu__item__button {\n	padding-inline-start: 0px;\n}\n\n.tlui-page-menu__item__input {\n	margin-inline-start: 12px;\n}\n\n.tlui-page-menu__item__submenu {\n	position: absolute;\n	inset-inline-end: 0px;\n	top: 0px;\n	height: 100%;\n	z-index: 10;\n}\n\n.tlui-page-menu__item__submenu > .tlui-button {\n	opacity: 0;\n	color: var(--tl-color-text-3);\n}\n\n.tlui-page-menu__item__submenu > .tlui-button::after {\n	content: none;\n}\n\n.tlui-page-menu__item:has(.tlui-button:focus-visible)\n	> .tlui-page-menu__item__submenu\n	> .tlui-button,\n.tlui-page-menu__item__submenu > .tlui-button[data-state='open'],\n.tlui-page-menu__item__submenu > .tlui-button:focus-visible {\n	opacity: 1;\n}\n\n/* Hide the kebab while any row is being dragged: :hover sticks during pointer */\n/* capture, which would otherwise leave the kebab visible mid-drag. */\n.tlui-page-menu__list__content[data-dragging='true']\n	.tlui-page-menu__item\n	> .tlui-page-menu__item__submenu\n	> .tlui-button {\n	opacity: 0;\n}\n\n.tl-container[data-coarse='true'] .tlui-page-menu__item__submenu > .tlui-button {\n	opacity: 1;\n}\n\n.tl-container[data-coarse='true'] .tlui-page-menu__item__button > .tlui-button__label {\n	padding-inline-end: calc(40px - 12px);\n}\n\n@media (hover: hover) {\n	.tlui-page-menu__resize-handle:hover::before {\n		background: var(--tl-color-selected);\n		height: 2px;\n		transition: background-color 150ms 80ms;\n	}\n\n	.tlui-page-menu__item:not([data-editing='true']):hover::before {\n		opacity: 1;\n	}\n\n	.tlui-page-menu__item:hover > .tlui-page-menu__item__submenu > .tlui-button {\n		opacity: 1;\n	}\n\n	.tlui-page-menu__item__button > .tlui-button__label {\n		padding-inline-end: 0px;\n	}\n\n	.tlui-page-menu__item:hover > .tlui-page-menu__item__button > .tlui-button__label {\n		padding-inline-end: calc(40px - 12px);\n	}\n\n	.tlui-page-menu__item__submenu > .tlui-button:hover {\n		color: var(--tl-color-text);\n	}\n}\n/* -------------- Skip to main content -------------- */\n\n.tl-skip-to-main-content {\n	position: fixed;\n	top: 48px;\n	left: -9999px;\n	padding: 8px 16px;\n	z-index: var(--tl-layer-toasts);\n}\n\n.tl-skip-to-main-content:focus {\n	left: 8px;\n}\n\n/*\n * focusing skip-to-main-content hide top ui buttons to make sure we avoid\n * z-index clashes on hover (see issue #8328)\n */\n.tl-skip-to-main-content:focus + .tlui-layout__top .tlui-helper-buttons {\n	display: none;\n}\n\n/* ---------------- Offline indicator --------------- */\n\n.tlui-offline-indicator {\n	display: flex;\n	color: var(--tl-color-background);\n	background-color: var(--tl-color-text);\n	border: none;\n	width: 32px;\n	height: 32px;\n	align-items: center;\n	justify-content: center;\n	border-radius: 99px;\n	cursor: default;\n	opacity: 0;\n	animation: tl-fade-in;\n	animation-duration: 0.12s;\n	animation-delay: 2s;\n	animation-fill-mode: forwards;\n}\n\n/* ------------------- Style panel ------------------ */\n\n.tlui-style-panel__wrapper {\n	box-shadow: var(--tl-shadow-2);\n	border-radius: var(--tl-radius-3);\n	pointer-events: all;\n	background-color: var(--tl-color-panel);\n	height: fit-content;\n	max-height: 100%;\n	margin: 8px;\n	margin-top: 4px;\n	touch-action: auto;\n	overscroll-behavior: none;\n	overflow-y: auto;\n	overflow-x: hidden;\n	color: var(--tl-color-text);\n}\n/* if the style panel is the only child (ie no share menu), increase the margin */\n.tlui-style-panel__wrapper:only-child {\n	margin-top: 8px;\n}\n\n.tlui-style-panel {\n	position: relative;\n	z-index: var(--tl-layer-panels);\n	pointer-events: all;\n	width: 148px;\n	max-width: 148px;\n}\n\n.tlui-style-panel[data-enhanced-a11y-mode='true'] .tlui-button[data-isactive='true'] {\n	border-radius: 10px;\n	outline: 2px solid var(--tl-color-text);\n	outline-offset: -5px;\n}\n\n.tlui-style-panel::-webkit-scrollbar {\n	display: none;\n}\n\n.tlui-style-panel .tlui-button.select {\n	width: 100%;\n}\n\n.tlui-style-panel__section {\n	display: flex;\n	position: relative;\n	flex-direction: column;\n}\n\n/*\nadd a border to the bottom of all but the last section. we have to handle empty sections too, which\nare hidden and shouldn't be counted\n*/\n.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {\n	border-bottom: 1px solid var(--tl-color-divider);\n}\n/*\nif a section ends with a slider and we're adding a border, we need some extra space for visual\nbalance. we need to handle empty sections as above. is this the most complex css selector in all of\ntldraw? probably.\n*/\n.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(\n		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))\n	) {\n	margin-bottom: 7px;\n}\n\n.tlui-style-panel__section:empty {\n	display: none;\n}\n\n/*\n * This is used in a couple places, like Align and Vertical Align.\n * It's because we have a toolbar with a Toggle Group but then an adjacent button\n * next to it that opens a popup.\n */\n.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {\n	flex-wrap: wrap;\n}\n\n.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {\n	margin-left: -2px;\n}\n\n.tlui-style-panel__section__common:not(:only-child) {\n	margin-bottom: 7px;\n	border-bottom: 1px solid var(--tl-color-divider);\n}\n\n.tlui-toolbar-toggle-group-item,\n.tlui-style-panel__dropdown-picker > .tlui-button__icon {\n	width: 40px;\n	padding: 0;\n}\n\n.tlui-style-panel__dropdown-picker:only-child {\n	flex: 1;\n}\n\n.tlui-style-panel__double-select-picker {\n	display: flex;\n	grid-template-columns: 1fr auto;\n	align-items: center;\n	padding-left: var(--tl-space-4);\n	color: var(--tl-color-text-1);\n	font-size: 12px;\n}\n\n.tlui-style-panel__double-select-picker-label {\n	text-overflow: ellipsis;\n	overflow: hidden;\n	white-space: nowrap;\n	flex-grow: 2;\n	max-width: 100%;\n}\n\n.tlui-style-panel .tlui-button[data-state='open']::after {\n	opacity: 1;\n	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n}\n\n@media (hover: hover) {\n	.tlui-style-panel .tlui-button[aria-expanded='true'] {\n		background: none;\n	}\n	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {\n		opacity: 1;\n		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n	}\n}\n\n/* Accessibility subheadings */\n\n.tlui-style-panel__section .tlui-style-panel__subheading,\n.tlui-style-panel__section__common .tlui-style-panel__subheading,\n.tlui-style-panel__subheading + .tlui-slider__container {\n	margin: 0;\n	padding: var(--tl-space-2) var(--tl-space-3) 0px var(--tl-space-4);\n	font-size: 12px;\n	font-weight: inherit;\n	line-height: inherit;\n}\n\n.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {\n	padding-top: var(--tl-space-3);\n}\n\n.tlui-style-panel__subheading + .tlui-slider__container {\n	padding-top: 0px;\n}\n\n/* --------------------- Bottom --------------------- */\n\n.tlui-layout__bottom {\n	grid-row: 2;\n	width: 100%;\n	min-width: 0px;\n}\n\n.tlui-layout__bottom__main {\n	width: 100%;\n	display: flex;\n	align-items: flex-end;\n	justify-content: center;\n}\n\n/* ------------------- Navigation ------------------- */\n\n.tlui-navigation-panel {\n	display: flex;\n	width: min-content;\n	flex-direction: column;\n	z-index: var(--tl-layer-panels);\n	pointer-events: all;\n	position: absolute;\n	left: 0px;\n}\n\n.tl-container[dir='rtl'] .tlui-navigation-panel {\n	left: auto;\n	right: 0px;\n}\n\n.tlui-navigation-panel::before {\n	content: '';\n	display: block;\n	position: absolute;\n	z-index: -1;\n	inset: -2px -2px 0px 0px;\n	border-radius: 0;\n	border-top: 2px solid var(--tl-color-background);\n	border-right: 2px solid var(--tl-color-background);\n	border-top-right-radius: var(--tl-radius-4);\n	background-color: var(--tl-color-low);\n}\n\n.tl-container[dir='rtl'] .tlui-navigation-panel::before {\n	inset: -2px 0px 0px -2px;\n	border-right: 0;\n	border-left: 2px solid var(--tl-color-background);\n	border-top-right-radius: 0;\n	border-top-left-radius: var(--tl-radius-4);\n}\n\n.tlui-navigation-panel[data-a11y='true']::before {\n	display: none;\n}\n\n/* Minimap */\n\n.tlui-minimap {\n	width: 100%;\n	height: 96px;\n	min-height: 96px;\n	overflow: hidden;\n	padding: var(--tl-space-3);\n	padding-top: 0px;\n}\n\n.tlui-minimap__canvas {\n	position: relative;\n	width: 100%;\n	height: 100%;\n}\n\n/* --------------------- Toolbar -------------------- */\n\n/* Wide container */\n.tlui-main-toolbar {\n	grid-column: 1 / span 3;\n	grid-row: 1;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	flex-grow: 2;\n}\n\n.tlui-main-toolbar--horizontal {\n	padding-bottom: calc(var(--tl-space-3) + var(--tl-sab));\n	max-width: 100%;\n}\n\n.tlui-main-toolbar--vertical {\n	position: absolute;\n	left: 0;\n	top: 90px; /* height of page menu + 'back to content' button */\n	bottom: 140px; /* height of expanded mini-map */\n	padding-left: calc(var(--tl-space-3) + var(--tl-sab));\n}\n\n[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {\n	bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */\n}\n\n/* Centered Content */\n.tlui-main-toolbar__inner {\n	position: relative;\n	width: fit-content;\n	display: flex;\n	gap: var(--tl-space-3);\n	align-items: flex-start;\n}\n\n.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {\n	flex-direction: column;\n}\n\n.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {\n	width: fit-content;\n}\n.tlui-main-toolbar--vertical .tlui-main-toolbar__left {\n	display: flex;\n	height: fit-content;\n}\n\n/* Row of controls + lock button */\n.tlui-main-toolbar__extras {\n	position: relative;\n	z-index: var(--tl-layer-above);\n	pointer-events: none;\n	align-self: stretch;\n}\n\n.tlui-main-toolbar__extras:empty {\n	display: none;\n}\n\n.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {\n	height: 48px;\n	top: 6px;\n}\n\n.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {\n	width: 48px;\n	order: 1;\n}\n\n.tlui-main-toolbar__extras__controls {\n	position: relative;\n	z-index: var(--tl-layer-above);\n	background-color: var(--tl-color-low);\n	border: 2px solid var(--tl-color-background);\n	pointer-events: all;\n}\n\n.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {\n	border-top-left-radius: var(--tl-radius-4);\n	border-top-right-radius: var(--tl-radius-4);\n	margin-left: 8px;\n	margin-right: 0px;\n	width: fit-content;\n}\n\n.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {\n	border-top-right-radius: var(--tl-radius-4);\n	border-bottom-right-radius: var(--tl-radius-4);\n	margin-top: 8px;\n	margin-left: -2px;\n	margin-bottom: 0px;\n	width: fit-content;\n}\n\n.tlui-main-toolbar__tools {\n	border-radius: var(--tl-radius-4);\n	z-index: var(--tl-layer-panels);\n	pointer-events: all;\n	position: relative;\n	background: var(--tl-color-panel);\n	box-shadow: var(--tl-shadow-2);\n	contain: layout style paint;\n}\n\n.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {\n	align-self: flex-end;\n}\n.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {\n	align-self: flex-start;\n}\n\n.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {\n	width: 40px;\n	margin-left: 2px;\n}\n.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {\n	height: 40px;\n	margin-top: 2px;\n}\n\n.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {\n	width: 32px;\n	padding: 0px;\n}\n\n.tlui-main-toolbar--horizontal *[data-state='open']::after {\n	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n	opacity: 1;\n}\n.tlui-main-toolbar--vertical *[data-state='open']::after {\n	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n	opacity: 1;\n}\n\n.tlui-main-toolbar__overflow-content {\n	touch-action: none;\n}\n\n.tlui-main-toolbar__tools [data-toolbar-visible='false'],\n.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {\n	display: none;\n}\n\n.tlui-main-toolbar__group:empty {\n	display: none;\n}\n.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {\n	border-right: 1px solid var(--tl-color-divider);\n	margin-right: 2px;\n}\n.tlui-column.tlui-main-toolbar__group:not(\n		:nth-last-child(-n + 1 of [data-toolbar-visible='true'])\n	) {\n	border-bottom: 1px solid var(--tl-color-divider);\n	margin-bottom: 2px;\n}\n.tlui-grid.tlui-main-toolbar__group {\n	grid-column: 1 / span 4;\n}\n.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {\n	border-bottom: 1px solid var(--tl-color-divider);\n	margin-bottom: 2px;\n}\n\n@media (hover: hover) {\n	.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {\n		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n		opacity: 1;\n	}\n	.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {\n		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);\n		opacity: 1;\n	}\n}\n\n/* ------------------- Tooltip -------------------- */\n\n.tlui-tooltip {\n	font-size: 12px;\n	padding: 2px 8px;\n	border-radius: 4px;\n	background-color: var(--tl-color-tooltip);\n	box-shadow: none;\n	color: var(--tl-color-text-shadow);\n	max-width: 400px;\n	width: fit-content;\n	text-align: center;\n	will-change: transform, opacity;\n	z-index: 2;\n}\n\n.tlui-tooltip__arrow {\n	fill: var(--tl-color-tooltip);\n	will-change: opacity;\n}\n\n[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {\n	z-index: var(--tl-layer-toasts) !important;\n	pointer-events: none;\n}\n\n/* ------------------- Debug panel ------------------ */\n\n.tlui-debug-panel {\n	background-color: var(--tl-color-low);\n	width: 100%;\n	display: grid;\n	align-items: center;\n	grid-template-columns: 1fr auto auto auto;\n	justify-content: space-between;\n	padding-inline-start: var(--tl-space-4);\n	border-top: 1px solid var(--tl-color-background);\n	font-size: 12px;\n	color: var(--tl-color-text-1);\n	z-index: var(--tl-layer-panels);\n	pointer-events: all;\n}\n\n.tlui-debug-panel__current-state {\n	overflow: hidden;\n	white-space: nowrap;\n	text-overflow: ellipsis;\n}\n\n.tlui-debug-panel__fps {\n	margin-right: 8px;\n}\n\n.tlui-debug-panel__fps__slow {\n	font-weight: bold;\n	color: var(--tl-color-danger);\n}\n\n.tlui-a11y-audit {\n	border-collapse: collapse;\n}\n\n.tlui-a11y-audit th,\n.tlui-a11y-audit td {\n	padding: 8px;\n	border: 1px solid var(--tl-color-low-border);\n}\n\n/* --------------------- Toasts --------------------- */\n\n.tlui-toast__viewport {\n	position: absolute;\n	inset: 0px;\n	margin: 0px;\n	display: flex;\n	align-items: flex-end;\n	justify-content: flex-end;\n	flex-direction: column;\n	gap: var(--tl-space-3);\n	pointer-events: none;\n	padding: 0px var(--tl-space-3) 64px 0px;\n	z-index: var(--tl-layer-toasts);\n}\n\n.tl-container[dir='rtl'] .tlui-toast__viewport {\n	padding: 0px 0px 64px var(--tl-space-3);\n}\n\n.tlui-toast__viewport > * {\n	pointer-events: all;\n}\n\n.tlui-toast__icon {\n	padding-top: 11px;\n	padding-inline-start: var(--tl-space-4);\n	color: var(--tl-color-text-1);\n}\n\n.tlui-toast__container {\n	min-width: 200px;\n	display: flex;\n	flex-direction: row;\n	background-color: var(--tl-color-panel);\n	box-shadow: var(--tl-shadow-2);\n	border-radius: var(--tl-radius-3);\n	font-size: 12px;\n}\n\n.tlui-toast__container[data-severity='success'] .tlui-icon {\n	color: var(--tl-color-success);\n}\n\n.tlui-toast__container[data-severity='info'] .tlui-icon {\n	color: var(--tl-color-info);\n}\n\n.tlui-toast__container[data-severity='warning'] .tlui-icon {\n	color: var(--tl-color-warning);\n}\n\n.tlui-toast__container[data-severity='error'] .tlui-icon {\n	color: var(--tl-color-danger);\n}\n\n.tlui-toast__main {\n	flex-grow: 2;\n	max-width: 280px;\n	min-width: 0;\n}\n\n.tlui-toast__content {\n	padding: var(--tl-space-4);\n	display: flex;\n	line-height: 1.4;\n	flex-direction: column;\n	gap: var(--tl-space-3);\n	min-width: 0;\n}\n\n.tlui-toast__main[data-actions='true'] .tlui-toast__content {\n	padding-bottom: var(--tl-space-2);\n}\n\n.tlui-toast__title {\n	font-weight: bold;\n	color: var(--tl-color-text-1);\n	/* this makes the default toast look better */\n	line-height: 16px;\n	overflow-wrap: anywhere;\n}\n\n.tlui-toast__description {\n	color: var(--tl-color-text-1);\n	padding: var(--tl-space-3);\n	margin: 0px;\n	padding: 0px;\n	overflow-wrap: anywhere;\n}\n\n.tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {\n	padding-left: 0px;\n}\n\n.tlui-toast__actions {\n	display: flex;\n	flex-direction: row;\n	justify-content: flex-start;\n	margin-left: 0;\n}\n\n.tlui-toast__close {\n	align-self: flex-end;\n	flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n	.tlui-toast__container[data-state='open'] {\n		animation: tlui-slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\n	}\n\n	.tlui-toast__container[data-state='closed'] {\n		animation: tlui-fade-out 100ms ease-in;\n	}\n\n	.tlui-toast__container[data-swipe='move'] {\n		transform: translateX(var(--radix-toast-swipe-move-x));\n	}\n\n	.tlui-toast__container[data-swipe='cancel'] {\n		transform: translateX(0);\n		transition: transform 200ms ease-out;\n	}\n\n	.tlui-toast__container[data-swipe='end'] {\n		animation: tlui-slide-out 100ms ease-out;\n	}\n\n	.tl-container[dir='rtl'] .tlui-toast__container[data-state='open'] {\n		animation: tlui-slide-in-rtl 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\n	}\n\n	.tl-container[dir='rtl'] .tlui-toast__container[data-state='closed'] {\n		animation: tlui-fade-out 100ms ease-in;\n	}\n\n	.tl-container[dir='rtl'] .tlui-toast__container[data-swipe='end'] {\n		animation: tlui-slide-out-rtl 100ms ease-out;\n	}\n}\n\n/* ---------------- Dialog ---------------- */\n\n.tlui-dialog__overlay {\n	position: absolute;\n	top: 0px;\n	left: 0px;\n	width: 100%;\n	height: 100%;\n	z-index: var(--tl-layer-canvas-overlays);\n	background-color: var(--tl-color-overlay);\n	animation: tl-fade-in 0.12s ease-out;\n}\n\n.tlui-dialog__positioner {\n	position: absolute;\n	top: 0px;\n	left: 0px;\n	width: 100%;\n	height: 100%;\n	z-index: var(--tl-layer-canvas-overlays);\n	pointer-events: all;\n	display: grid;\n	place-items: center;\n	overflow-y: auto;\n	padding: 0px var(--tl-space-3);\n}\n\n.tlui-dialog__content {\n	display: flex;\n	flex-direction: column;\n	position: relative;\n	cursor: default;\n	background-color: var(--tl-color-panel);\n	box-shadow: var(--tl-shadow-3);\n	border-radius: var(--tl-radius-3);\n	font-size: 12px;\n	overflow: hidden;\n	min-width: 300px;\n	max-width: 100%;\n	max-height: 80%;\n}\n\n.tlui-dialog__header {\n	position: relative;\n	display: flex;\n	align-items: center;\n	flex: 0;\n	z-index: var(--tl-layer-header-footer);\n	padding-inline-start: var(--tl-space-4);\n	color: var(--tl-color-text);\n	height: 40px;\n}\n\n.tlui-dialog__header__title {\n	flex: 1;\n	font-weight: inherit;\n	font-size: 12px;\n	margin: 0px;\n	color: var(--tl-color-text-1);\n}\n\n.tlui-dialog__header__close {\n	justify-self: flex-end;\n}\n\n.tlui-dialog__body {\n	padding: var(--tl-space-4) var(--tl-space-4);\n	flex: 0 1;\n	overflow-y: auto;\n	overflow-x: hidden;\n	color: var(--tl-color-text-1);\n	user-select: all;\n	-webkit-user-select: text;\n	overflow-wrap: anywhere;\n}\n.tlui-dialog__body a {\n	color: var(--tl-color-selected);\n}\n\n.tlui-dialog__body ul,\n.tlui-dialog__body ol {\n	padding-left: 16px;\n	display: flex;\n	flex-direction: column;\n	gap: var(--tl-space-2);\n}\n\n.tlui-dialog__footer {\n	position: relative;\n	min-height: 12px;\n	z-index: var(--tl-layer-header-footer);\n}\n\n.tlui-dialog__footer__actions {\n	display: flex;\n	align-items: center;\n	justify-content: flex-end;\n}\n\n.tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) {\n	margin-right: -4px;\n}\n\n/* --------------------- Dialogs -------------------- */\n\n/* Edit Link Dialog */\n\n.tlui-edit-link-dialog {\n	display: flex;\n	flex-direction: column;\n	gap: var(--tl-space-4);\n	color: var(--tl-color-text);\n}\n\n.tlui-edit-link-dialog__input {\n	background-color: var(--tl-color-muted-2);\n	flex-grow: 2;\n	border-radius: var(--tl-radius-2);\n	padding: 0px var(--tl-space-4);\n}\n\n/* Embed Dialog */\n\n.tlui-embed__spacer {\n	flex-grow: 2;\n	min-height: 0px;\n	margin-left: calc(-1 * var(--tl-space-4));\n	margin-top: calc(-1 * var(--tl-space-4));\n	pointer-events: none;\n}\n\n.tlui-embed-dialog__list {\n	display: flex;\n	flex-direction: column;\n	padding: 0px var(--tl-space-3) var(--tl-space-4) var(--tl-space-3);\n}\n\n.tlui-embed-dialog__item__image {\n	width: 24px;\n	height: 24px;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	background-size: contain;\n	background-repeat: no-repeat;\n	background-position: center center;\n	background-color: var(--tl-color-selected-contrast);\n	border-radius: var(--tl-radius-1);\n}\n\n.tlui-embed-dialog__enter {\n	display: flex;\n	flex-direction: column;\n	gap: var(--tl-space-4);\n	color: var(--tl-color-text-1);\n}\n\n.tlui-embed-dialog__input {\n	background-color: var(--tl-color-muted-2);\n	flex-grow: 2;\n	border-radius: var(--tl-radius-2);\n	padding: 0px var(--tl-space-4);\n}\n\n.tlui-embed-dialog__warning {\n	color: var(--tl-color-danger);\n	text-shadow: none;\n}\n\n.tlui-embed-dialog__instruction__link {\n	display: flex;\n	gap: var(--tl-space-1);\n	margin-top: var(--tl-space-4);\n}\n\n.tlui-embed-dialog__enter a {\n	color: var(--tl-color-text-1);\n}\n\n/* --------------- Keyboard shortcuts --------------- */\n\n.tlui-shortcuts-dialog__header {\n	border-bottom: 1px solid var(--tl-color-divider);\n}\n\n.tlui-shortcuts-dialog__body {\n	position: relative;\n	columns: 3;\n	column-gap: var(--tl-space-9);\n	pointer-events: all;\n	touch-action: auto;\n\n	/* Terrible fix to allow firefox users to scroll the dialog */\n	overflow-x: auto;\n\n	scrollbar-width: none;\n}\n\n.tlui-shortcuts-dialog__body::-webkit-scrollbar {\n	display: none;\n}\n\n.tlui-shortcuts-dialog__body__tablet {\n	columns: 2;\n}\n\n.tlui-shortcuts-dialog__body__mobile {\n	columns: 1;\n}\n\n.tlui-shortcuts-dialog__group {\n	break-inside: avoid-column;\n	padding-bottom: var(--tl-space-6);\n}\n\n.tlui-shortcuts-dialog__group__title {\n	font-size: inherit;\n	font-weight: inherit;\n	margin: 0px;\n	color: var(--tl-color-text-3);\n	height: 32px;\n	display: flex;\n	align-items: center;\n}\n\n.tlui-shortcuts-dialog__group__content {\n	display: flex;\n	flex-direction: column;\n	color: var(--tl-color-text-1);\n}\n\n.tlui-shortcuts-dialog__key-pair {\n	display: flex;\n	gap: var(--tl-space-4);\n	align-items: center;\n	justify-content: space-between;\n	height: 32px;\n}\n\n.tlui-shortcuts-dialog__key-pair__key {\n	flex: 1;\n	font-size: 12px;\n}\n\n/* ------------------ Language menu ----------------- */\n\n.tlui-language-menu {\n	max-height: 500px;\n}\n\n.tlui-language-menu::after {\n	content: '';\n	display: block;\n	position: absolute;\n	bottom: 0px;\n	left: 0px;\n	right: 0px;\n	height: 24px;\n	background: linear-gradient(\n		to bottom,\n		var(--tl-color-panel-transparent) 0%,\n		var(--tl-color-panel) 90%,\n		var(--tl-color-panel) 100%\n	);\n	border-bottom-left-radius: var(--tl-radius-3);\n	border-bottom-right-radius: var(--tl-radius-3);\n	pointer-events: none;\n}\n\n/* ------------------ Actions menu ------------------ */\n\n.tlui-actions-menu {\n	max-height: calc(100vh - 150px);\n}\n\n/* -------------------- Help menu ------------------- */\n\n.tlui-help-menu {\n	pointer-events: all;\n	position: absolute;\n	bottom: var(--tl-space-2);\n	right: var(--tl-space-2);\n	z-index: var(--tl-layer-panels);\n	border: 2px solid var(--tl-color-background);\n	border-radius: 100%;\n}\n\n/* ------------------- Da share zone ------------------ */\n\n.tlui-share-zone {\n	padding: 0px 0px 0px 0px;\n	display: flex;\n	flex-direction: row;\n	justify-content: flex-end;\n	z-index: var(--tl-layer-panels);\n	align-items: center;\n	padding-top: 2px;\n	padding-right: 4px;\n}\n\n/* ------------------- People Menu ------------------- */\n\n.tlui-people-menu__avatars-button {\n	display: flex;\n	align-items: center;\n	justify-content: flex-end;\n	background: none;\n	border: none;\n	cursor: pointer;\n	pointer-events: all;\n	border-radius: var(--tl-radius-1);\n	padding-right: 1px;\n	height: 100%;\n}\n\n.tlui-people-menu__avatars {\n	display: flex;\n	flex-direction: row;\n}\n\n.tlui-people-menu__avatar {\n	height: 24px;\n	width: 24px;\n	border: 2px solid var(--tl-color-background);\n	background-color: var(--tl-color-low);\n	border-radius: 100%;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	position: relative;\n	font-size: 10px;\n	font-weight: bold;\n	text-align: center;\n	color: var(--tl-color-selected-contrast);\n	z-index: 2;\n}\n\n.tlui-people-menu__avatar:nth-of-type(n + 2) {\n	margin-inline-start: -12px;\n}\n\n.tlui-people-menu__avatars-button[data-state='open'] {\n	opacity: 1;\n}\n\n@media (hover: hover) {\n	.tlui-people-menu__avatars-button:hover .tlui-people-menu__avatar {\n		border-color: var(--tl-color-low);\n	}\n}\n\n.tlui-people-menu__more {\n	min-width: 0px;\n	font-size: 11px;\n	font-weight: 600;\n	color: var(--tl-color-text-1);\n	font-family: inherit;\n	padding: 0px 4px;\n}\n.tlui-people-menu__more::after {\n	border-radius: var(--tl-radius-2);\n	inset: 0px;\n}\n\n.tlui-people-menu__wrapper {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	width: 220px;\n	height: fit-content;\n	max-height: 50vh;\n}\n\n.tlui-people-menu__section {\n	position: relative;\n	touch-action: auto;\n	flex-direction: column;\n	max-height: 100%;\n	overflow-x: hidden;\n	overflow-y: auto;\n	touch-action: auto;\n}\n\n.tlui-people-menu__section:first-child,\n.tlui-people-menu__section:last-child {\n	flex-shrink: 0;\n}\n\n.tlui-people-menu__section:not(:last-child) {\n	border-bottom: 1px solid var(--tl-color-divider);\n}\n\n.tlui-people-menu__user {\n	display: flex;\n	justify-content: flex-start;\n	align-items: center;\n}\n\n.tlui-people-menu__user__color {\n	flex-shrink: 0;\n}\n\n.tlui-people-menu__user__name {\n	text-align: start;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	font-size: 12px;\n	color: var(--tl-color-text-1);\n	max-width: 100%;\n	flex-grow: 1;\n	flex-shrink: 100;\n}\n\n.tlui-people-menu__user__label {\n	text-align: start;\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n	font-size: 12px;\n	color: var(--tl-color-text-3);\n	flex-grow: 100;\n	flex-shrink: 0;\n	margin-inline-start: 4px;\n}\n\n.tlui-people-menu__user__input {\n	flex-grow: 2;\n	height: 100%;\n	padding: 0px;\n	margin: 0px;\n}\n\n.tlui-people-menu__user > .tlui-input__wrapper {\n	width: auto;\n	display: flex;\n	align-items: auto;\n	flex-grow: 2;\n	gap: 8px;\n	height: 100%;\n	padding: 0px;\n}\n\n.tlui-people-menu__item {\n	position: relative;\n}\n\n.tlui-people-menu__item:last-of-type .tlui-button__menu {\n	margin-bottom: 0;\n}\n\n.tlui-people-menu__item__button {\n	padding: 0 11px;\n	overflow: hidden;\n}\n\n.tlui-people-menu__item > .tlui-button__menu {\n	width: auto;\n	display: flex;\n	align-items: auto;\n	justify-content: flex-start;\n	flex-grow: 2;\n	gap: 11px;\n}\n\n.tlui-people-menu__name {\n	text-align: start;\n	white-space: nowrap;\n	overflow: hidden;\n	text-overflow: ellipsis;\n}\n\n.tlui-people-menu__item__follow {\n	position: absolute;\n	top: 0px;\n	inset-inline-end: 0px;\n	max-width: 40px;\n	flex-shrink: 0;\n}\n\n.tlui-people-menu__item[data-follow='true'],\n.tlui-people-menu__item:has(.tlui-button:focus-visible) {\n	padding-inline-end: 36px;\n}\n\n.tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,\n.tlui-people-menu__item:has(.tlui-button:focus-visible) .tlui-people-menu__item__follow {\n	opacity: 1;\n}\n\n@media (hover: hover) {\n	.tlui-people-menu__item__follow {\n		opacity: 0;\n	}\n\n	.tlui-people-menu__item:hover {\n		padding-right: 36px;\n	}\n	.tlui-people-menu__item:hover .tlui-people-menu__item__follow {\n		opacity: 1;\n	}\n}\n\n/* --------------- Following indicator -------------- */\n\n.tlui-following-indicator {\n	display: block;\n	position: absolute;\n	inset: 0px;\n	border-width: 2px;\n	border-style: solid;\n	pointer-events: none;\n}\n\n/* --------------- Contextual toolbar --------------- */\n\n.tlui-contextual-toolbar {\n	position: absolute;\n}\n\n/**\n * N.B. We hide the toolbar while mousing down, so no need to turn these off.\n */\n.tlui-contextual-toolbar,\n.tlui-contextual-toolbar * {\n	pointer-events: all;\n}\n\n.tlui-contextual-toolbar [data-isactive='true']::after {\n	background-color: var(--tl-color-muted-2);\n	opacity: 1;\n}\n\n.tlui-contextual-toolbar {\n	opacity: 0;\n	transition: opacity 0.08s ease-in-out;\n}\n\n.tlui-contextual-toolbar,\n.tlui-contextual-toolbar * {\n	pointer-events: none;\n}\n\n.tlui-contextual-toolbar[data-visible='true'] {\n	opacity: 1;\n	z-index: var(--tl-layer-menus);\n}\n\n.tlui-contextual-toolbar[data-interactive='true'],\n.tlui-contextual-toolbar[data-interactive='true'] * {\n	pointer-events: all;\n}\n\n.tlui-rich-text__toolbar-link-input {\n	margin-left: 12px;\n	/*\n	 * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.\n	 * This is so the toolbar size stays stable going in and out of the link editor.\n	 */\n	width: 148px;\n}\n\n.tlui-media__toolbar-alt-text-input {\n	margin-left: 12px;\n	/*\n	 * Nice touch tweak: keep the link editor toolbar the same as the default toolbar.\n	 * This is so the toolbar size stays stable going in and out of the alt text editor.\n	 */\n	min-width: 200px;\n}\n\n.tlui-contextual-toolbar .tlui-input__wrapper {\n	height: 40px;\n}\n\n.tlui-image__toolbar .tlui-slider__container {\n	width: 125px;\n}\n\n.tlui-image__toolbar .tlui-slider {\n	height: 100%;\n}\n\n.tlui-image__toolbar .tlui-slider__track {\n	height: 32px;\n}\n\n.tlui-image__toolbar .tlui-slider__thumb {\n	width: 14px;\n	height: 14px;\n}\n\n/* ------------------- Animations ------------------- */\n@keyframes tlui-fade-out {\n	0% {\n		opacity: 1;\n	}\n	100% {\n		opacity: 0;\n	}\n}\n\n@keyframes tlui-slide-in {\n	from {\n		transform: translateX(calc(100% + var(--tl-space-3)));\n	}\n	to {\n		transform: translateX(0px);\n	}\n}\n\n@keyframes tlui-slide-out {\n	from {\n		transform: translateX(var(--radix-toast-swipe-end-x));\n	}\n	to {\n		transform: translateX(calc(100% + var(--tl-space-3)));\n	}\n}\n\n@keyframes tlui-slide-in-rtl {\n	from {\n		transform: translateX(calc(-100% - var(--tl-space-3)));\n	}\n	to {\n		transform: translateX(0px);\n	}\n}\n\n@keyframes tlui-slide-out-rtl {\n	from {\n		transform: translateX(var(--radix-toast-swipe-end-x));\n	}\n	to {\n		transform: translateX(calc(-100% - var(--tl-space-3)));\n	}\n}\n\n";
+		//#endregion
+		//#region lib/types/client/tl/tl-theme-css.js
+		/**
+		* DSH image-gen brand skin for the tldraw surface.
+		*
+		* Injected AFTER the bundled tldraw styles (tl-css.ts): it only re-declares
+		* tldraw's own CSS variables and restyles tldraw's own chrome classes, scoped
+		* to our canvas container, so upgrading tldraw never requires edits here. This
+		* layer owns the UI chrome (panels, toolbars, hover/active feedback, grid
+		* dots); colors painted onto the canvas itself (shape palette, selection
+		* handles, marquee) come from the runtime theme patch in tl-brand-theme.ts.
+		* Dark chrome keeps stock tldraw colors: the plugin lives in DSH's light shell.
+		*
+		* Beyond re-tinting, this pass reshapes tldraw's signature chrome so the
+		* surface no longer reads as "stock tldraw": the grey corner strips (top-left
+		* menu zone, bottom-left navigation) become floating white cards with hairline
+		* borders, matching the workbench card language.
+		*/
+		/** Hairline border used on every floating chrome card. */
+		const CARD_BORDER = "#d9e2f2";
+		/** Shadow used on every floating chrome card (workbench blue-grey family). */
+		const CARD_SHADOW = "0px 1px 2px rgba(30, 42, 76, 0.06), 0px 4px 12px rgba(30, 42, 76, 0.08)";
+		const TL_THEME_CSS = `
+/* DSH image-gen skin for the tldraw surface (light chrome only). */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light {
+	/* Canvas surface: a clearly cool blue-grey board, distinguishable from the
+	   pure-white floating cards at a glance. Same token feeds the runtime
+	   theme patch (CANVAS_BG in tl-brand-theme.ts). */
+	--tl-color-background: ${CANVAS_BG};
+	--tl-color-grid: rgba(88, 110, 158, 0.5);
+
+	/* Brand accents: selection outlines, active tool, chips, focus rings. */
+	--tl-color-selected: ${BRAND_BLUE};
+	--tl-color-primary: ${BRAND_BLUE};
+	--tl-color-focus: ${BRAND_BLUE};
+	--tl-color-selection-stroke: ${BRAND_BLUE};
+	--tl-color-selection-fill: rgba(${BRAND_BLUE_RGB}, 0.14);
+
+	/* Interaction feedback: hover chips and active-tool highlight are tinted
+	   brand blue instead of tldraw's neutral grey-black. */
+	--tl-color-hint: rgba(${BRAND_BLUE_RGB}, 0.14);
+	--tl-color-muted-1: rgba(${BRAND_BLUE_RGB}, 0.14);
+	--tl-color-muted-2: rgba(${BRAND_BLUE_RGB}, 0.07);
+
+	/* Chrome: panels, borders, and text aligned with the workbench tokens. */
+	--tl-color-panel: #ffffff;
+	--tl-color-panel-contrast: #ffffff;
+	--tl-color-low: #ffffff;
+	--tl-color-low-border: ${CARD_BORDER};
+	--tl-color-divider: #dfe6f3;
+	--tl-color-text: ${BRAND_INK};
+	--tl-color-text-0: ${BRAND_INK};
+	--tl-color-text-1: #242f44;
+	--tl-color-text-3: #6b7690;
+
+	/* Shadows: the workbench's cold blue-grey instead of tldraw's black. */
+	--tl-shadow-1: 0px 1px 2px rgba(30, 42, 76, 0.24), 0px 1px 3px rgba(30, 42, 76, 0.08);
+	--tl-shadow-2:
+		0px 0px 2px rgba(30, 42, 76, 0.14), 0px 2px 3px rgba(30, 42, 76, 0.2),
+		0px 2px 6px rgba(30, 42, 76, 0.08), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
+	--tl-shadow-3:
+		0px 1px 2px rgba(30, 42, 76, 0.24), 0px 2px 6px rgba(30, 42, 76, 0.12),
+		inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
+	--tl-shadow-4:
+		0px 0px 3px rgba(30, 42, 76, 0.16), 0px 5px 4px rgba(30, 42, 76, 0.13),
+		0px 2px 16px rgba(30, 42, 76, 0.05), inset 0px 0px 0px 1px var(--tl-color-panel-contrast);
+
+	/* Noticeably rounder chrome than tldraw's stock 4/6/9/11px. */
+	--tl-radius-1: 6px;
+	--tl-radius-2: 10px;
+	--tl-radius-3: 13px;
+	--tl-radius-4: 16px;
+}
+
+/* ---------------------------------------------------------------
+ * De-tldraw pass: reshape tldraw's signature corner strips and
+ * floating chrome into the workbench's card language.
+ * ------------------------------------------------------------- */
+
+/* Canvas backdrop: subtle vertical gradient (light at top, a touch deeper at
+   the bottom) for an airy, lit-from-above feel. Painted on the UI background
+   layer ONLY — --tl-color-background stays a flat color because tldraw reuses
+   it for export backgrounds and edge highlight lines, which must stay clean. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tl-background {
+	background-image: linear-gradient(180deg, ${CANVAS_BG_TOP} 0%, ${CANVAS_BG} 60%, ${CANVAS_BG_BOTTOM} 100%);
+}
+
+/* Top-left menu strip -> floating white card (Page menu + quick actions). */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-menu-zone {
+	margin: 10px;
+	background-color: #ffffff;
+	border: 1px solid ${CARD_BORDER};
+	border-radius: 12px;
+	box-shadow: ${CARD_SHADOW};
+}
+
+/* Bottom-left navigation strip -> floating white card (zoom, pages, minimap).
+   Offsets detach it from the screen corner; the ::before paints the card. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-navigation-panel {
+	left: 12px;
+	bottom: 12px;
+}
+.dsh-ig-tl-canvas .tl-container.tl-theme__light[dir='rtl'] .tlui-navigation-panel {
+	left: auto;
+	right: 12px;
+}
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-navigation-panel::before {
+	inset: -6px -6px -6px -6px;
+	background-color: #ffffff;
+	border: 1px solid ${CARD_BORDER};
+	border-radius: 12px;
+	box-shadow: ${CARD_SHADOW};
+}
+
+/* Bottom toolbar pill -> bordered card so it matches the other cards. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-main-toolbar__tools {
+	border: 1px solid ${CARD_BORDER};
+}
+
+/* Vertical left rail (Figma-style, set via components.Toolbar): float it off
+   the screen edge like the other cards. Stock offsets (top 90px / bottom
+   140px) already clear the top-left menu card and bottom-left minimap card. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-main-toolbar--vertical {
+	left: 12px;
+	padding-left: 0;
+}
+
+/* Compact rail buttons (40px instead of stock 48px) for an app-like density
+   that differs from tldraw's chunky mobile-sized chrome. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-main-toolbar--vertical .tlui-button__tool {
+	width: 40px;
+	height: 40px;
+}
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-main-toolbar--vertical .tlui-button__tool::after {
+	inset: 3px;
+	border-radius: 9px;
+}
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
+	width: 40px;
+}
+
+/* Right style panel -> bordered card. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-style-panel__wrapper {
+	border: 1px solid ${CARD_BORDER};
+}
+
+/* Dropdown menus and popovers -> hairline border for definition. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-menu,
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-popover__content {
+	border: 1px solid ${CARD_BORDER};
+}
+
+/* Active menu chips (e.g. style panel selections): brand tint instead of grey. */
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-button[data-isactive='true'] {
+	color: ${BRAND_BLUE};
+}
+.dsh-ig-tl-canvas .tl-container.tl-theme__light .tlui-button[data-isactive='true']::after {
+	background: rgba(${BRAND_BLUE_RGB}, 0.14);
+}
+`;
 		//#endregion
 		//#region lib/types/client/inspiration-style.js
 		const INSPIRATION_STYLE = `
@@ -120684,6 +121032,14 @@ img.ProseMirror-separator {
 				kind: IMAGE_RESULT_NODE_KIND,
 				target: "chat",
 				match: (event) => {
+					if (event.type === "tool/ptc-dispatch") {
+						const subCallId = event.data.subCallId;
+						if (typeof subCallId !== "string" || subCallId === "") return null;
+						return imageResultFromPtcDispatch(event) === void 0 ? null : {
+							id: `ptc:${subCallId}`,
+							role: "start"
+						};
+					}
 					const turn = eventTurn(event);
 					if (turn === void 0) return null;
 					if (event.type === "turn/start") return {
@@ -120705,6 +121061,14 @@ img.ProseMirror-separator {
 					return null;
 				},
 				start: (_context, match) => {
+					if (match.event.type === "tool/ptc-dispatch") {
+						const result = imageResultFromPtcDispatch(match.event);
+						if (result === void 0) throw new Error("dsh-image-result start requires a plugin image dispatch");
+						return { results: [{
+							...result,
+							seq: match.event.seq
+						}] };
+					}
 					const turn = eventTurn(match.event);
 					if (match.event.type !== "turn/start" || turn === void 0) throw new Error("dsh-image-result start requires turn/start");
 					return {
@@ -120721,17 +121085,14 @@ img.ProseMirror-separator {
 						...context.state,
 						answerSeq: match.event.seq
 					};
+					if (match.event.type === "tool/ptc-dispatch") {
+						const result = imageResultFromPtcDispatch(match.event);
+						return result === void 0 ? context.state : appendResult(context.state, result, match.event.seq);
+					}
 					if (match.event.type !== "tool/result") return context.state;
 					const result = imageResultFromMeta(match.event.data.meta);
 					if (result === void 0) return context.state;
-					if (context.state.results.some((candidate) => candidate.attachment.attachmentId === result.attachment.attachmentId)) return context.state;
-					return {
-						...context.state,
-						results: [...context.state.results, {
-							...result,
-							seq: match.event.seq
-						}]
-					};
+					return appendResult(context.state, result, match.event.seq);
 				},
 				buildViewNode: (context) => {
 					const state = context.state;
@@ -120747,13 +121108,24 @@ img.ProseMirror-separator {
 						location,
 						visibility: "visible",
 						data: {
-							turn: state.turn,
+							...state.turn !== void 0 ? { turn: state.turn } : {},
 							results: state.results.map(({ seq: _seq, ...result }) => result)
 						}
 					};
 				}
 			};
 		}
+		/** Append a parsed result unless its attachment is already collected. */
+		function appendResult(state, result, seq) {
+			if (state.results.some((candidate) => candidate.attachment.attachmentId === result.attachment.attachmentId)) return state;
+			return {
+				...state,
+				results: [...state.results, {
+					...result,
+					seq
+				}]
+			};
+		}
 		function compactTranscript(options) {
 			try {
 				return options.isCompactTranscript?.() ?? true;
@@ -120781,6 +121153,60 @@ img.ProseMirror-separator {
 			const turn = event.data.turn;
 			return typeof turn === "number" && Number.isSafeInteger(turn) && turn >= 0 ? turn : void 0;
 		}
+		/** Plugin tools whose PTC (run_code) dispatch results are image results. */
+		const PTC_IMAGE_TOOL_NAMES = /* @__PURE__ */ new Set(["generate_image", "edit_image"]);
+		/**
+		* Fixed summary text rendered by the tools' imageOutput(). PTC dispatch events
+		* carry no presentationMeta, so provider/model/output are recovered from this
+		* template rather than parsed out of natural language.
+		*/
+		const PTC_SUMMARY_PATTERN = /^(?:Generated|Edited) one image with ([^/\s]+)\/(\S+) \((.+)\)\. Attachment ID: /;
+		const PTC_SAVED_TO_PATTERN = / It was also saved to the workspace as (.+)\. (?:(?:Saving it to the workspace failed)|(?:It has no local file path)|(?:Respond to the user))/;
+		/**
+		* Parse a plugin image result from a tool/ptc-dispatch event (#38). PTC
+		* run_code sub-calls carry neither a turn nor presentationMeta, so the result
+		* is rebuilt from the dispatch payload itself: the image content block for the
+		* attachment, arguments for the prompt (and edit source ids), and the tool's
+		* fixed-format summary text for provider/model/output. Returns undefined for
+		* anything that is not a successful image result from our own image tools.
+		*/
+		function imageResultFromPtcDispatch(event) {
+			if (event.type !== "tool/ptc-dispatch") return void 0;
+			const data = event.data;
+			if (data.isError === true) return void 0;
+			if (typeof data.name !== "string" || !PTC_IMAGE_TOOL_NAMES.has(data.name)) return void 0;
+			const content = Array.isArray(data.content) ? data.content : [];
+			let attachment;
+			let summaryText = "";
+			for (const block of content) {
+				const candidate = record(block);
+				if (candidate === void 0) continue;
+				if (candidate.type === "image" && attachment === void 0) attachment = imageAttachment(candidate.attachment);
+				else if (candidate.type === "text" && summaryText === "" && typeof candidate.text === "string") summaryText = candidate.text;
+			}
+			if (attachment === void 0) return void 0;
+			const summary = PTC_SUMMARY_PATTERN.exec(summaryText);
+			const savedTo = PTC_SAVED_TO_PATTERN.exec(summaryText)?.[1];
+			const args = record(data.arguments);
+			const sourceIds = sourceAttachmentIds(args);
+			return {
+				attachment,
+				prompt: stringValue(args?.prompt, "Generated Image"),
+				provider: summary?.[1] ?? "",
+				model: summary?.[2] ?? "",
+				output: summary?.[3] ?? "",
+				...savedTo !== void 0 ? { savedTo } : {},
+				...sourceIds !== void 0 ? { sourceAttachmentIds: sourceIds } : {}
+			};
+		}
+		/** Collect edit_image source attachment ids (single or list form) from dispatch arguments. */
+		function sourceAttachmentIds(args) {
+			if (args === void 0) return void 0;
+			const single = typeof args.source_attachment_id === "string" ? [args.source_attachment_id] : void 0;
+			const list = Array.isArray(args.source_attachment_ids) ? args.source_attachment_ids.filter((id) => typeof id === "string") : void 0;
+			const ids = single ?? list;
+			return ids !== void 0 && ids.length > 0 ? ids : void 0;
+		}
 		function imageAttachment(value) {
 			const candidate = record(value);
 			if (candidate === void 0 || typeof candidate.attachmentId !== "string" || !isImageMediaType(candidate.mediaType) || !positiveInteger(candidate.bytes) || !positiveInteger(candidate.width) || !positiveInteger(candidate.height)) return void 0;
@@ -121219,7 +121645,7 @@ img.ProseMirror-separator {
 `;
 		//#endregion
 		//#region lib/types/client/index.js
-		console.info(`[dsh-image-gen] canvas bundle 2026-09-12T10:11:10.729Z`);
+		console.info(`[dsh-image-gen] canvas bundle 2026-09-12T16:41:18.261Z`);
 		/** Right-sidebar tab-type registration id (DSH 0.1.5 `sidebarRightTabs`). */
 		const SIDEBAR_STUDIO_TAB_ID = "dsh-image-gen/studio";
 		/** The tab kind: a page type opened by kind, recognizing no resource address. */
@@ -121730,7 +122156,7 @@ img.ProseMirror-separator {
 			ctx.effect(() => {
 				const style = document.createElement("style");
 				style.dataset.plugin = "dsh-image-gen";
-				style.textContent = `${STYLE}\n${STUDIO_STYLE}\n${INSPIRATION_STYLE}\n${PROVIDER_PILL_STYLE}\n${TL_CSS}`;
+				style.textContent = `${STYLE}\n${STUDIO_STYLE}\n${INSPIRATION_STYLE}\n${PROVIDER_PILL_STYLE}\n${TL_CSS}\n${TL_THEME_CSS}`;
 				document.head.appendChild(style);
 				return () => {
 					style.remove();