@dxos/plugin-tldraw 0.10.0 → 0.11.0

package/dist/lib/TldrawPlugin.mjs

@@ -1,16 +1,15 @@
 import { Plugin } from "@dxos/app-framework";
 import { meta } from "#meta";
 import { AppActivationEvents, AppPlugin } from "@dxos/app-toolkit";
-import { SketchVariant, TldrawSettings } from "#capabilities";
+import { DrawingVariant, TldrawSettings } from "#capabilities";
 import { translations } from "#translations";
-import { Tldraw } from "#types";
 //#endregion
 //#region src/TldrawPlugin.tsx
 var TldrawPlugin = Plugin.define(meta).pipe(Plugin.addModule({
-	id: "sketch-variant",
+	id: "drawing-variant",
 	activatesOn: AppActivationEvents.SetupSchema,
-	activate: SketchVariant
-}), AppPlugin.addSchemaModule({ schema: [Tldraw.Canvas] }), AppPlugin.addSettingsModule({ activate: TldrawSettings }), AppPlugin.addTranslationsModule({ translations }), AppPlugin.addPluginAssetModule({ asset: {
+	activate: DrawingVariant
+}), AppPlugin.addSettingsModule({ activate: TldrawSettings }), AppPlugin.addTranslationsModule({ translations }), AppPlugin.addPluginAssetModule({ asset: {
 	pluginId: meta.profile.key,
 	path: "PLUGIN.mdl",
 	content: "---\nid: org.dxos.plugin.tldraw\nname: TldrawPlugin\nversion: 0.1.0\n---\n\nA collaborative whiteboard plugin for `DXOS` Composer — powered by tldraw, persisted in ECHO, and available as a first-class workspace object.\n\n## Extensions\n\nThe following extension dialects are used in this document.\nEach extension is defined in the Appendix or resolved via its URI.\n\n| Term        | URI                            |\n|-------------|--------------------------------|\n| `type`      | `org.dxos.mdl.type@1.0`        |\n| `feat`      | `org.dxos.mdl.feat@1.0`        |\n| `test`      | `org.dxos.mdl.test@1.0`        |\n| `component` | `org.dxos.mdl.component@1.0`   |\n| `op`        | `org.dxos.mdl.op@1.0`          |\n\n## Types\n\n```mdl\ntype Canvas\n  desc: Low-level drawing document backed by a tldraw store.\n  fields:\n    schema?: string              # external schema reference (default: tldraw.com/2)\n    content: Map<string, any>    # tldraw store snapshot — shapes, bindings, assets\n```\n\n```mdl\ntype Sketch\n  desc: User-facing whiteboard object that wraps a Canvas.\n  fields:\n    name?: string\n    canvas: Ref<Canvas>          # reference to the tldraw content store\n```\n\n```mdl\ntype SketchGrid\n  literals: mesh | dotted\n```\n\n```mdl\ntype Settings\n  fields:\n    showGrid?: boolean           # display a background grid on the canvas\n    gridType?: SketchGrid        # mesh or dotted pattern\n```\n\n```mdl\ntype Scene\n  desc: |\n    Backend-neutral scene DSL (src/model). A diagram is a set of world objects\n    (\"face\", \"hat\") composed of elements in object-local units; a compiler maps\n    the scene to tldraw records with identity stamped in record meta\n    ({ object, element, kind, scale, dialect }) so edits address shapes by id.\n  fields:\n    objects: WorldObject[]\n```\n\n```mdl\ntype WorldObject\n  fields:\n    id: string                   # semantic id (\"face\"); addressing key for edits\n    origin?: Point               # canvas px; derived from bbox top-left on read\n    scale?: number               # canvas px per local unit (default 1)\n    elements: Element[]          # rect | ellipse | circle | diamond | triangle |\n                                 # line | curve | arc | text | arrow\n```\n\n```mdl\ntype Command\n  desc: Scene edit commands (D2-Oracle-style, addressed by id).\n  literals: upsert-object | upsert-elements | remove-elements | remove-object | move-object\n```\n\n## Components\n\n```mdl\ncomponent SketchArticle\n  desc: Full-screen whiteboard surface for a Sketch object. Renders inside article, section, and slide roles.\n  props:\n    subject: Sketch\n    settings: Settings\n    attendableId: string\n    role: article | section | slide\n  state:\n    editor?: Editor              # tldraw Editor instance\n    hasAttention: boolean\n  slots:\n    toolbar?: ReactNode          # injected tldraw toolbar actions\n  actions:\n    createThread()               # opens a comment thread anchored to a selection\n  layout: |\n    ┌─────────────────────────────────┐\n    │ tldraw toolbar (when attended)  │\n    ├─────────────────────────────────┤\n    │                                 │\n    │   infinite canvas (tldraw)      │\n    │   shapes / freehand / text      │\n    │                                 │\n    │   [comment thread anchors]      │\n    │                                 │\n    └─────────────────────────────────┘\n```\n\n```mdl\ncomponent SketchSettings\n  desc: Settings panel for the Sketch plugin — controls grid visibility and type.\n  props:\n    settings: Settings\n    onSettingsChange?: (updater: (s: Settings) => Settings) => void\n```\n\n## Operations\n\n```mdl\nop createSketch\n  desc: Creates a new Sketch with an associated Canvas and adds it to the target space or collection.\n  input:\n    name?: string\n    schema?: string              # tldraw schema version (default: tldraw.com/2)\n    content?: Map<string, any>   # optional initial tldraw store snapshot\n  output: Sketch\n  effects: [echo:write]\n```\n\n```mdl\nop readSketch\n  desc: |\n    Returns the derived Scene (world objects with object-local coordinates) read\n    from the live canvas records, plus a count of unmanaged (hand-drawn) shapes.\n    Origins derive from bounding boxes, so the scene stays coherent after users\n    drag shapes. The agent calls this before editing an existing sketch.\n  input:\n    sketch: Ref<Sketch>\n  output: { scene: Scene, unmanaged: number }\n  requires: [Database]\n```\n\n```mdl\nop editSketch\n  desc: |\n    Applies scene commands atomically (one Obj.update): upsert/move/remove world\n    objects or individual elements by id. Returns the resulting scene so the\n    agent can maintain its mental model across turns.\n  input:\n    sketch: Ref<Sketch>\n    commands: Command[]\n  output: { scene: Scene, unmanaged: number, upserted: string[], removed: number }\n  effects: [echo:write]\n  requires: [Database]\n```\n\n## Features\n\n```mdl\nfeat F-1: Whiteboard Canvas\n\n  req F-1.1: Each Sketch owns exactly one Canvas; the Canvas holds the full tldraw store snapshot.\n  req F-1.2: Canvas content is stored as a plain record in ECHO — no binary blobs.\n  req F-1.3: All tldraw shape types (freehand, geometric, text, arrow, image) are supported.\n```\n\n```mdl\nfeat F-2: ECHO Persistence\n\n  req F-2.1:\n    when: user makes any edit in the whiteboard\n    then: Canvas.content is updated in ECHO within the debounce window\n\n  req F-2.2:\n    when: Sketch is opened after a page reload\n    then: tldraw store is hydrated from Canvas.content; no drawing is lost\n\n  req F-2.3: Canvas is a separate ECHO object from Sketch so it can be replicated independently.\n```\n\n```mdl\nfeat F-3: Real-time Collaboration\n\n  req F-3.1:\n    when: two or more peers open the same Sketch\n    then: edits by each peer appear on the other's canvas via ECHO replication\n\n  req F-3.2:\n    when: a peer is offline and makes edits\n    then: changes merge with remote state on reconnection using ECHO CRDT semantics\n```\n\n```mdl\nfeat F-4: Roles and Presentation\n\n  req F-4.1:\n    when: role is article\n    then: full tldraw toolbar shown when the sketch has attention; hidden otherwise\n\n  req F-4.2:\n    when: role is slide\n    then: canvas is read-only; zoom capped at 1.5×\n\n  req F-4.3:\n    when: role is section\n    then: canvas auto-zooms to fit content; no toolbar shown\n```\n\n```mdl\nfeat F-5: Comment Threads\n\n  req F-5.1:\n    when: user activates the thread tool in the toolbar\n    then: a new comment thread is created anchored to the current selection\n\n  req F-5.2: Thread anchor positions are stored alongside the drawing so they survive reloads.\n```\n\n```mdl\nfeat F-6: Grid Settings\n\n  req F-6.1:\n    when: Settings.showGrid is true\n    then: a background grid rendered beneath drawing content\n\n  req F-6.2:\n    when: Settings.gridType is mesh\n    then: a square-mesh grid is shown\n\n  req F-6.3:\n    when: Settings.gridType is dotted\n    then: a dotted grid is shown\n```\n\n```mdl\nfeat F-7: Create Sketch Operation\n\n  req F-7.1: Plugin contributes op:createSketch to the operation registry.\n  req F-7.2:\n    when: op:createSketch is invoked\n    then: a Sketch + Canvas pair is created and returned; the Sketch is added to the target collection\n```\n\n```mdl\nfeat F-8: Scene DSL and Agent Skill\n\n  req F-8.1: The scene model (src/model) is backend-neutral — no tldraw imports in scene.ts;\n    the tldraw compiler (render.ts/read.ts) is one backend, Excalidraw can be added later.\n  req F-8.2: Every DSL-generated tldraw record carries meta { object, element, kind, scale, dialect };\n    record ids are deterministic (shape:<object>/<element>) so re-rendering an element reuses its id.\n  req F-8.3:\n    when: op:editSketch upserts elements of an existing object\n    then: only records with matching element ids are replaced; sibling elements are untouched\n  req F-8.4:\n    when: a shape bound by an arrow is removed\n    then: its bindings are removed too; no dangling binding records remain\n  req F-8.5:\n    when: op:readSketch runs after a user drags shapes in the UI\n    then: the derived scene reflects the moved geometry (origin = bbox top-left)\n  req F-8.6: Plugin contributes the org.dxos.skill.sketch skill (create/read/edit tools +\n    DSL instructions: object-local units, semantic ids, read-before-edit workflow).\n  req F-8.7: A dialect registry (scene only for now) reserves the extension point for\n    mermaid / d2 / sequence / uml-class compilers that emit scene commands.\n```\n\n## Acceptance\n\n```mdl\ntest T-1: Create and open sketch\n  given: a Composer space is active\n  when: op:createSketch runs with name \"My Diagram\"\n  then:\n    - a Sketch object is created with name \"My Diagram\"\n    - Sketch.canvas references a new Canvas with empty content\n    - Sketch appears in the space object list\n```\n\n```mdl\ntest T-2: Drawing persists across reload\n  given: a Sketch is open and the user draws a freehand stroke\n  when: the page is reloaded and the Sketch is reopened\n  then:\n    - the stroke is visible on the canvas\n    - Canvas.content is non-empty\n```\n\n```mdl\ntest T-3: Collaborative edit\n  given: two peers have the same Sketch open\n  when: peer A draws a rectangle\n  then:\n    - peer B sees the rectangle appear within the ECHO sync window\n    - no data loss if both peers edit simultaneously\n```\n\n```mdl\ntest T-4: Read-only slide role\n  given: a Sketch is rendered in role slide\n  then:\n    - tldraw toolbar is not shown\n    - all drawing tools are disabled\n    - zoom is capped at 1.5×\n```\n\n```mdl\ntest T-5: Grid toggle\n  given: SketchSettings panel is open\n  when: user enables the grid and selects \"dotted\"\n  then:\n    - Settings.showGrid === true\n    - Settings.gridType === dotted\n    - dotted grid appears on the canvas immediately\n```\n\n```mdl\ntest T-6: Attention-aware toolbar\n  given: a Sketch is open in article role alongside other articles\n  when: user clicks on the sketch to give it attention\n  then: tldraw toolbar becomes visible\n  when: user clicks away, removing attention\n  then: tldraw toolbar is hidden\n```\n\n```mdl\ntest T-7: Scene DSL round-trip\n  given: an empty Sketch\n  when: editSketch upserts a \"face\" object (head/eyes/smile), then upserts a \"hat\" object and\n    replaces only the \"smile\" element, then removes the \"hat\"\n  then:\n    - readSketch returns the face with derived origin and all element ids\n    - the untouched face elements are byte-identical across the hat edit\n    - removing the hat removes exactly its records and no bindings dangle\n  # Covered by src/operations/operations.test.ts and src/model/scene.test.ts.\n```\n\n```mdl\ntest T-8: Conversational drawing (live AI)\n  given: the stories-assistant Sketch storybook (config.remote) with the sketch skill bound\n  when: the user prompts \"Draw a smiley face\", then \"Add a hat\"\n  then:\n    - the agent creates a \"face\" world object via editSketch\n    - the follow-up adds a \"hat\" object WITHOUT redrawing the face (mental-model test)\n  # Manual: stories/stories-assistant/Sketch → DrawAndUpdateTest / Reflection (tags: ['!test']).\n  # Verified live 2026-07-23 (remote EDGE, claude-opus-4-8): face drawn, hat composed on top,\n  # face records untouched.\n```\n\n---\n\n## Appendix: Extension Definitions\n\n```mdl\next type\n  uri: org.dxos.mdl.type@1.0\n  desc: A named data structure with typed fields and optional literals.\n  fields:\n    desc?: Prose\n    fields?: FieldMap\n    literals?: UnionList\n    extends?: TypeRef[]\n```\n\n```mdl\next feat\n  uri: org.dxos.mdl.feat@1.0\n  desc: A named feature grouping one or more requirements.\n  fields:\n    desc?: Prose\n    req: RequirementList\n  nesting: self\n```\n\n```mdl\next test\n  uri: org.dxos.mdl.test@1.0\n  desc: An acceptance scenario expressed as given / when / then steps.\n  fields:\n    given?: Step | Step[]\n    when?: Step | Step[]\n    then: Step | Step[]\n    tags?: TagList\n```\n\n```mdl\next component\n  uri: org.dxos.mdl.component@1.0\n  desc: A UI component with props, internal state, slots, actions, and events.\n  fields:\n    desc?: Prose\n    props?: FieldMap\n    state?: FieldMap\n    slots?: FieldMap\n    actions?: ActionMap\n    emits?: EventMap\n    layout?: CodeBlock\n```\n\n```mdl\next op\n  uri: org.dxos.mdl.op@1.0\n  desc: |\n    A named operation with typed inputs, outputs, and declared errors.\n    Pure ops have no effects or requires. Effectful ops declare both.\n  fields:\n    desc?: Prose\n    input?: FieldMap\n    output?: TypeExpr\n    errors?: ErrorMap\n    effects?: EffectList\n    requires?: ServiceList\n    note?: Prose\n```\n",

package/dist/lib/TldrawPlugin.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TldrawPlugin.mjs","names":[],"sources":["../../src/TldrawPlugin.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';\n\nimport { SketchVariant, TldrawSettings } from '#capabilities';\nimport { meta } from '#meta';\nimport { translations } from '#translations';\nimport { Tldraw } from '#types';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../PLUGIN.mdl?raw';\n\nexport const TldrawPlugin = Plugin.define(meta).pipe(\n  Plugin.addModule({\n    id: 'sketch-variant',\n    activatesOn: AppActivationEvents.SetupSchema,\n    activate: SketchVariant,\n  }),\n  AppPlugin.addSchemaModule({ schema: [Tldraw.Canvas] }),\n  AppPlugin.addSettingsModule({ activate: TldrawSettings }),\n  AppPlugin.addTranslationsModule({ translations }),\n  AppPlugin.addPluginAssetModule({\n    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },\n  }),\n  Plugin.make,\n);\n\nexport default TldrawPlugin;\n"],"mappings":";;;;;;;;AAeA,IAAa,eAAe,OAAO,OAAO,IAAI,CAAC,CAAC,KAC9C,OAAO,UAAU;CACf,IAAI;CACJ,aAAa,oBAAoB;CACjC,UAAU;AACZ,CAAC,GACD,UAAU,gBAAgB,EAAE,QAAQ,CAAC,OAAO,MAAM,EAAE,CAAC,GACrD,UAAU,kBAAkB,EAAE,UAAU,eAAe,CAAC,GACxD,UAAU,sBAAsB,EAAE,aAAa,CAAC,GAChD,UAAU,qBAAqB,EAC7B,OAAO;CAAE,UAAU,KAAK,QAAQ;CAAK,MAAM;CAAc,SAAS;CAAY,UAAU;AAAoB,EAC9G,CAAC,GACD,OAAO,IACT"}
+{"version":3,"file":"TldrawPlugin.mjs","names":[],"sources":["../../src/TldrawPlugin.tsx"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';\n\nimport { DrawingVariant, TldrawSettings } from '#capabilities';\nimport { meta } from '#meta';\nimport { translations } from '#translations';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../PLUGIN.mdl?raw';\n\nexport const TldrawPlugin = Plugin.define(meta).pipe(\n  Plugin.addModule({\n    id: 'drawing-variant',\n    activatesOn: AppActivationEvents.SetupSchema,\n    activate: DrawingVariant,\n  }),\n  AppPlugin.addSettingsModule({ activate: TldrawSettings }),\n  AppPlugin.addTranslationsModule({ translations }),\n  AppPlugin.addPluginAssetModule({\n    asset: { pluginId: meta.profile.key, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },\n  }),\n  Plugin.make,\n);\n\nexport default TldrawPlugin;\n"],"mappings":";;;;;;;AAcA,IAAa,eAAe,OAAO,OAAO,IAAI,CAAC,CAAC,KAC9C,OAAO,UAAU;CACf,IAAI;CACJ,aAAa,oBAAoB;CACjC,UAAU;AACZ,CAAC,GACD,UAAU,kBAAkB,EAAE,UAAU,eAAe,CAAC,GACxD,UAAU,sBAAsB,EAAE,aAAa,CAAC,GAChD,UAAU,qBAAqB,EAC7B,OAAO;CAAE,UAAU,KAAK,QAAQ;CAAK,MAAM;CAAc,SAAS;CAAY,UAAU;AAAoB,EAC9G,CAAC,GACD,OAAO,IACT"}

package/dist/lib/capabilities.mjs

@@ -1,8 +1,8 @@
 import { Capability } from "@dxos/app-framework";
 //#region src/capabilities/index.ts
-var SketchVariant = Capability.lazy("SketchVariant", () => import("./chunk-sketch-variant.mjs"));
+var DrawingVariant = Capability.lazy("DrawingVariant", () => import("./chunk-drawing-variant.mjs"));
 var TldrawSettings = Capability.lazy("TldrawSettings", () => import("./chunk-settings.mjs"));
 //#endregion
-export { SketchVariant, TldrawSettings };
+export { DrawingVariant, TldrawSettings };
 
 //# sourceMappingURL=capabilities.mjs.map

package/dist/lib/capabilities.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.mjs","names":[],"sources":["../../src/capabilities/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capability } from '@dxos/app-framework';\n\nexport const SketchVariant = Capability.lazy('SketchVariant', () => import('./sketch-variant'));\nexport const TldrawSettings = Capability.lazy('TldrawSettings', () => import('./settings'));\n"],"mappings":";;AAMA,IAAa,gBAAgB,WAAW,KAAK,uBAAuB,OAAO,6BAAmB;AAC9F,IAAa,iBAAiB,WAAW,KAAK,wBAAwB,OAAO,uBAAa"}
+{"version":3,"file":"capabilities.mjs","names":[],"sources":["../../src/capabilities/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capability } from '@dxos/app-framework';\n\nexport const DrawingVariant = Capability.lazy('DrawingVariant', () => import('./drawing-variant'));\nexport const TldrawSettings = Capability.lazy('TldrawSettings', () => import('./settings'));\n"],"mappings":";;AAMA,IAAa,iBAAiB,WAAW,KAAK,wBAAwB,OAAO,8BAAoB;AACjG,IAAa,iBAAiB,WAAW,KAAK,wBAAwB,OAAO,uBAAa"}

package/dist/lib/chunk-TldrawArticle.mjs

@@ -1,27 +1,28 @@
 import { isTauri } from "@dxos/util";
 import { invariant } from "@dxos/invariant";
-import { Obj } from "@dxos/echo";
-import { Tldraw, TldrawCapabilities } from "#types";
 import "react";
+import { Obj } from "@dxos/echo";
 import { Flex, Panel, composable, composableProps } from "@dxos/react-ui";
 import { jsx } from "react/jsx-runtime";
+import { TldrawCapabilities } from "#types";
+import { Drawing } from "@dxos/plugin-illustrator/types";
 import { useAtomCapability } from "@dxos/app-framework/ui";
 import { AppSurface, useAppGraph } from "@dxos/app-toolkit/ui";
-import { useActions } from "@dxos/plugin-graph";
+import { useActions } from "@dxos/plugin-graph/hooks";
 import { useAttention } from "@dxos/react-ui-attention";
 import { CanvasComponent } from "#components";
 //#region src/containers/TldrawArticle/TldrawArticle.tsx
-var __dxlog_file = "/Users/burdon/Code/dxos/dxos/.claude/worktrees/peaceful-allen-9b542f/packages/plugins/plugin-tldraw/src/containers/TldrawArticle/TldrawArticle.tsx";
-var TldrawArticle = ({ role, attendableId, sketch, canvas, extrinsic }) => {
-	invariant(Obj.instanceOf(Tldraw.Canvas, canvas), void 0, {
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-tldraw/src/containers/TldrawArticle/TldrawArticle.tsx";
+var TldrawArticle = ({ role, attendableId, drawing, canvas, extrinsic }) => {
+	invariant(Obj.instanceOf(Drawing.Canvas, canvas), void 0, {
 		"~LogMeta": "~LogMeta",
 		F: __dxlog_file,
-		L: 24,
+		L: 25,
 		S: void 0,
-		A: ["Obj.instanceOf(Tldraw.Canvas, canvas)", ""]
+		A: ["Obj.instanceOf(Drawing.Canvas, canvas)", ""]
 	});
 	const settings = useAtomCapability(TldrawCapabilities.Settings);
-	const id = Obj.getURI(sketch);
+	const id = Obj.getURI(drawing);
 	const { hasAttention } = useAttention(attendableId);
 	const section = role === AppSurface.Section.role;
 	const props = {

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

@@ -1 +1 @@
-{"version":3,"file":"chunk-TldrawArticle.mjs","names":[],"sources":["../../src/containers/TldrawArticle/TldrawArticle.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useAtomCapability } from '@dxos/app-framework/ui';\nimport { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';\nimport { Obj } from '@dxos/echo';\nimport { invariant } from '@dxos/invariant';\nimport { useActions } from '@dxos/plugin-graph';\nimport { type SketchVariantSurfaceProps } from '@dxos/plugin-illustrator/types';\nimport { Flex, Panel } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { isTauri } from '@dxos/util';\n\nimport { CanvasComponent } from '#components';\nimport { Tldraw, TldrawCapabilities } from '#types';\n\nexport type TldrawArticleProps = SketchVariantSurfaceProps;\n\nexport const TldrawArticle = ({ role, attendableId, sketch, canvas, extrinsic }: TldrawArticleProps) => {\n  invariant(Obj.instanceOf(Tldraw.Canvas, canvas));\n  const settings = useAtomCapability(TldrawCapabilities.Settings);\n  const id = Obj.getURI(sketch as Obj.Any);\n  const { hasAttention } = useAttention(attendableId);\n  const section = role === AppSurface.Section.role;\n\n  const props = {\n    readonly: role === AppSurface.Slide.role,\n    autoCenter: section ? true : undefined,\n  };\n\n  // TODO(wittjosiah): Genericize tldraw toolbar actions w/ graph.\n  const { graph } = useAppGraph();\n  const actions = useActions(graph, id);\n  const handleThreadCreate = actions.find((action) => action.id === `${id}/comment`)?.data;\n\n  const content = (\n    <CanvasComponent\n      // Force instance per canvas object. Otherwise, sketches share the same instance.\n      key={id}\n      classNames='dx-attention-surface'\n      canvas={canvas}\n      settings={settings}\n      // Section embeds render read-only (no controls/grid) until focused, on every platform; the\n      // isTauri allowance (always-on UI) applies only to the full article/slide roles.\n      // TODO(wittjosiah): Ensure attention works as expected on the mobile app.\n      hideUi={section ? !hasAttention : !hasAttention && !isTauri()}\n      onThreadCreate={handleThreadCreate}\n      {...props}\n    />\n  );\n\n  // An extrinsically-sized embed fills its (possibly non-square) box; otherwise it falls back to a\n  // square so the intrinsic embed has a sensible height.\n  return section ? <Container fill={extrinsic}>{content}</Container> : <Article>{content}</Article>;\n};\n\nconst Article = composable<HTMLDivElement, PropsWithChildren>((props, forwardedRef) => (\n  <Panel.Root {...composableProps(props, { classNames: 'aspect-square' })} ref={forwardedRef}>\n    <Panel.Content>{props.children}</Panel.Content>\n  </Panel.Root>\n));\n\nconst Container = composable<HTMLDivElement, PropsWithChildren<{ fill?: boolean }>>(\n  ({ fill, ...props }, forwardedRef) => (\n    <Flex\n      {...composableProps(props, { classNames: [fill ? 'h-full w-full' : 'aspect-square', 'overflow-hidden'] })}\n      ref={forwardedRef}\n    >\n      {props.children}\n    </Flex>\n  ),\n);\n\nTldrawArticle.displayName = 'TldrawArticle';\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAa,iBAAiB,EAAE,MAAM,cAAc,QAAQ,QAAQ,gBAAoC;CACtG,UAAU,IAAI,WAAW,OAAO,QAAQ,MAAM,GAAA,KAAA,GAAA;EAAA,YAAA;EAAA,GAAA;EAAA,GAAA;EAAA,GAAA,KAAA;EAAA,GAAA,CAAA,yCAAA,EAAA;CAAA,CAAC;CAC/C,MAAM,WAAW,kBAAkB,mBAAmB,QAAQ;CAC9D,MAAM,KAAK,IAAI,OAAO,MAAiB;CACvC,MAAM,EAAE,iBAAiB,aAAa,YAAY;CAClD,MAAM,UAAU,SAAS,WAAW,QAAQ;CAE5C,MAAM,QAAQ;EACZ,UAAU,SAAS,WAAW,MAAM;EACpC,YAAY,UAAU,OAAO,KAAA;CAC/B;CAGA,MAAM,EAAE,UAAU,YAAY;CAE9B,MAAM,qBADU,WAAW,OAAO,EACP,CAAA,CAAQ,MAAM,WAAW,OAAO,OAAO,GAAG,GAAG,SAAS,CAAC,EAAE;CAEpF,MAAM,UACJ,oBAAC,iBAAD;EAGE,YAAW;EACH;EACE;EAIV,QAAQ,UAAU,CAAC,eAAe,CAAC,gBAAgB,CAAC,QAAQ;EAC5D,gBAAgB;EAChB,GAAI;CACL,GAVM,EAUN;CAKH,OAAO,UAAU,oBAAC,WAAD;EAAW,MAAM;YAAY;CAAmB,CAAA,IAAI,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA;AAClG;AAEA,IAAM,UAAU,YAA+C,OAAO,iBACpE,oBAAC,MAAM,MAAP;CAAY,GAAI,gBAAgB,OAAO,EAAE,YAAY,gBAAgB,CAAC;CAAG,KAAK;WAC5E,oBAAC,MAAM,SAAP,EAAA,UAAgB,MAAM,SAAwB,CAAA;AACpC,CAAA,CACb;AAED,IAAM,YAAY,YACf,EAAE,MAAM,GAAG,SAAS,iBACnB,oBAAC,MAAD;CACE,GAAI,gBAAgB,OAAO,EAAE,YAAY,CAAC,OAAO,kBAAkB,iBAAiB,iBAAiB,EAAE,CAAC;CACxG,KAAK;WAEJ,MAAM;AACH,CAAA,CAEV;AAEA,cAAc,cAAc"}
+{"version":3,"file":"chunk-TldrawArticle.mjs","names":[],"sources":["../../src/containers/TldrawArticle/TldrawArticle.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useAtomCapability } from '@dxos/app-framework/ui';\nimport { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';\nimport { Obj } from '@dxos/echo';\nimport { invariant } from '@dxos/invariant';\nimport { useActions } from '@dxos/plugin-graph/hooks';\nimport { type DrawingVariantSurfaceProps } from '@dxos/plugin-illustrator/types';\nimport { Drawing } from '@dxos/plugin-illustrator/types';\nimport { Flex, Panel } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/react-ui';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport { isTauri } from '@dxos/util';\n\nimport { CanvasComponent } from '#components';\nimport { TldrawCapabilities } from '#types';\n\nexport type TldrawArticleProps = DrawingVariantSurfaceProps;\n\nexport const TldrawArticle = ({ role, attendableId, drawing, canvas, extrinsic }: TldrawArticleProps) => {\n  invariant(Obj.instanceOf(Drawing.Canvas, canvas));\n  const settings = useAtomCapability(TldrawCapabilities.Settings);\n  const id = Obj.getURI(drawing as Obj.Any);\n  const { hasAttention } = useAttention(attendableId);\n  const section = role === AppSurface.Section.role;\n\n  const props = {\n    readonly: role === AppSurface.Slide.role,\n    autoCenter: section ? true : undefined,\n  };\n\n  // TODO(wittjosiah): Genericize tldraw toolbar actions w/ graph.\n  const { graph } = useAppGraph();\n  const actions = useActions(graph, id);\n  const handleThreadCreate = actions.find((action) => action.id === `${id}/comment`)?.data;\n\n  const content = (\n    <CanvasComponent\n      // Force instance per canvas object. Otherwise, sketches share the same instance.\n      key={id}\n      classNames='dx-attention-surface'\n      canvas={canvas}\n      settings={settings}\n      // Section embeds render read-only (no controls/grid) until focused, on every platform; the\n      // isTauri allowance (always-on UI) applies only to the full article/slide roles.\n      // TODO(wittjosiah): Ensure attention works as expected on the mobile app.\n      hideUi={section ? !hasAttention : !hasAttention && !isTauri()}\n      onThreadCreate={handleThreadCreate}\n      {...props}\n    />\n  );\n\n  // An extrinsically-sized embed fills its (possibly non-square) box; otherwise it falls back to a\n  // square so the intrinsic embed has a sensible height.\n  return section ? <Container fill={extrinsic}>{content}</Container> : <Article>{content}</Article>;\n};\n\nconst Article = composable<HTMLDivElement, PropsWithChildren>((props, forwardedRef) => (\n  <Panel.Root {...composableProps(props, { classNames: 'aspect-square' })} ref={forwardedRef}>\n    <Panel.Content>{props.children}</Panel.Content>\n  </Panel.Root>\n));\n\nconst Container = composable<HTMLDivElement, PropsWithChildren<{ fill?: boolean }>>(\n  ({ fill, ...props }, forwardedRef) => (\n    <Flex\n      {...composableProps(props, { classNames: [fill ? 'h-full w-full' : 'aspect-square', 'overflow-hidden'] })}\n      ref={forwardedRef}\n    >\n      {props.children}\n    </Flex>\n  ),\n);\n\nTldrawArticle.displayName = 'TldrawArticle';\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,IAAa,iBAAiB,EAAE,MAAM,cAAc,SAAS,QAAQ,gBAAoC;CACvG,UAAU,IAAI,WAAW,QAAQ,QAAQ,MAAM,GAAA,KAAA,GAAA;EAAA,YAAA;EAAA,GAAA;EAAA,GAAA;EAAA,GAAA,KAAA;EAAA,GAAA,CAAA,0CAAA,EAAA;CAAA,CAAC;CAChD,MAAM,WAAW,kBAAkB,mBAAmB,QAAQ;CAC9D,MAAM,KAAK,IAAI,OAAO,OAAkB;CACxC,MAAM,EAAE,iBAAiB,aAAa,YAAY;CAClD,MAAM,UAAU,SAAS,WAAW,QAAQ;CAE5C,MAAM,QAAQ;EACZ,UAAU,SAAS,WAAW,MAAM;EACpC,YAAY,UAAU,OAAO,KAAA;CAC/B;CAGA,MAAM,EAAE,UAAU,YAAY;CAE9B,MAAM,qBADU,WAAW,OAAO,EACP,CAAA,CAAQ,MAAM,WAAW,OAAO,OAAO,GAAG,GAAG,SAAS,CAAC,EAAE;CAEpF,MAAM,UACJ,oBAAC,iBAAD;EAGE,YAAW;EACH;EACE;EAIV,QAAQ,UAAU,CAAC,eAAe,CAAC,gBAAgB,CAAC,QAAQ;EAC5D,gBAAgB;EAChB,GAAI;CACL,GAVM,EAUN;CAKH,OAAO,UAAU,oBAAC,WAAD;EAAW,MAAM;YAAY;CAAmB,CAAA,IAAI,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA;AAClG;AAEA,IAAM,UAAU,YAA+C,OAAO,iBACpE,oBAAC,MAAM,MAAP;CAAY,GAAI,gBAAgB,OAAO,EAAE,YAAY,gBAAgB,CAAC;CAAG,KAAK;WAC5E,oBAAC,MAAM,SAAP,EAAA,UAAgB,MAAM,SAAwB,CAAA;AACpC,CAAA,CACb;AAED,IAAM,YAAY,YACf,EAAE,MAAM,GAAG,SAAS,iBACnB,oBAAC,MAAD;CACE,GAAI,gBAAgB,OAAO,EAAE,YAAY,CAAC,OAAO,kBAAkB,iBAAiB,iBAAiB,EAAE,CAAC;CACxG,KAAK;WAEJ,MAAM;AACH,CAAA,CAEV;AAEA,cAAc,cAAc"}

package/dist/lib/chunk-TldrawCard.mjs

@@ -1,19 +1,19 @@
 import { invariant } from "@dxos/invariant";
-import { Obj } from "@dxos/echo";
-import { Tldraw } from "#types";
 import "react";
+import { Obj } from "@dxos/echo";
 import { Card } from "@dxos/react-ui";
 import { jsx } from "react/jsx-runtime";
+import { Drawing } from "@dxos/plugin-illustrator/types";
 import { CanvasComponent } from "#components";
 //#region src/containers/TldrawCard/TldrawCard.tsx
-var __dxlog_file = "/Users/burdon/Code/dxos/dxos/.claude/worktrees/peaceful-allen-9b542f/packages/plugins/plugin-tldraw/src/containers/TldrawCard/TldrawCard.tsx";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-tldraw/src/containers/TldrawCard/TldrawCard.tsx";
 var TldrawCard = ({ canvas, editable = false }) => {
-	invariant(Obj.instanceOf(Tldraw.Canvas, canvas), void 0, {
+	invariant(Obj.instanceOf(Drawing.Canvas, canvas), void 0, {
 		"~LogMeta": "~LogMeta",
 		F: __dxlog_file,
 		L: 18,
 		S: void 0,
-		A: ["Obj.instanceOf(Tldraw.Canvas, canvas)", ""]
+		A: ["Obj.instanceOf(Drawing.Canvas, canvas)", ""]
 	});
 	return /* @__PURE__ */ jsx(Card.Body, { children: /* @__PURE__ */ jsx(Card.Section, {
 		classNames: "aspect-square",

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

@@ -1 +1 @@
-{"version":3,"file":"chunk-TldrawCard.mjs","names":[],"sources":["../../src/containers/TldrawCard/TldrawCard.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { invariant } from '@dxos/invariant';\nimport { type SketchVariantSurfaceProps } from '@dxos/plugin-illustrator/types';\nimport { Card } from '@dxos/react-ui';\n\nimport { CanvasComponent } from '#components';\nimport { Tldraw } from '#types';\n\nexport type TldrawCardProps = SketchVariantSurfaceProps;\n\nexport const TldrawCard = ({ canvas, editable = false }: TldrawCardProps) => {\n  invariant(Obj.instanceOf(Tldraw.Canvas, canvas));\n  return (\n    <Card.Body>\n      <Card.Section classNames='aspect-square'>\n        <Card.Row fullWidth>\n          <CanvasComponent canvas={canvas} autoCenter readonly={!editable} hideUi={!editable} />\n        </Card.Row>\n      </Card.Section>\n    </Card.Body>\n  );\n};\n\nexport default TldrawCard;\n\nTldrawCard.displayName = 'TldrawCard';\n"],"mappings":";;;;;;;;;AAgBA,IAAa,cAAc,EAAE,QAAQ,WAAW,YAA6B;CAC3E,UAAU,IAAI,WAAW,OAAO,QAAQ,MAAM,GAAA,KAAA,GAAA;EAAA,YAAA;EAAA,GAAA;EAAA,GAAA;EAAA,GAAA,KAAA;EAAA,GAAA,CAAA,yCAAA,EAAA;CAAA,CAAC;CAC/C,OACE,oBAAC,KAAK,MAAN,EAAA,UACE,oBAAC,KAAK,SAAN;EAAc,YAAW;YACvB,oBAAC,KAAK,KAAN;GAAU,WAAA;aACR,oBAAC,iBAAD;IAAyB;IAAQ,YAAA;IAAW,UAAU,CAAC;IAAU,QAAQ,CAAC;GAAW,CAAA;EAC7E,CAAA;CACE,CAAA,EACL,CAAA;AAEf;AAIA,WAAW,cAAc"}
+{"version":3,"file":"chunk-TldrawCard.mjs","names":[],"sources":["../../src/containers/TldrawCard/TldrawCard.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport React from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { invariant } from '@dxos/invariant';\nimport { type DrawingVariantSurfaceProps } from '@dxos/plugin-illustrator/types';\nimport { Drawing } from '@dxos/plugin-illustrator/types';\nimport { Card } from '@dxos/react-ui';\n\nimport { CanvasComponent } from '#components';\n\nexport type TldrawCardProps = DrawingVariantSurfaceProps;\n\nexport const TldrawCard = ({ canvas, editable = false }: TldrawCardProps) => {\n  invariant(Obj.instanceOf(Drawing.Canvas, canvas));\n  return (\n    <Card.Body>\n      <Card.Section classNames='aspect-square'>\n        <Card.Row fullWidth>\n          <CanvasComponent canvas={canvas} autoCenter readonly={!editable} hideUi={!editable} />\n        </Card.Row>\n      </Card.Section>\n    </Card.Body>\n  );\n};\n\nexport default TldrawCard;\n\nTldrawCard.displayName = 'TldrawCard';\n"],"mappings":";;;;;;;;;AAgBA,IAAa,cAAc,EAAE,QAAQ,WAAW,YAA6B;CAC3E,UAAU,IAAI,WAAW,QAAQ,QAAQ,MAAM,GAAA,KAAA,GAAA;EAAA,YAAA;EAAA,GAAA;EAAA,GAAA;EAAA,GAAA,KAAA;EAAA,GAAA,CAAA,0CAAA,EAAA;CAAA,CAAC;CAChD,OACE,oBAAC,KAAK,MAAN,EAAA,UACE,oBAAC,KAAK,SAAN;EAAc,YAAW;YACvB,oBAAC,KAAK,KAAN;GAAU,WAAA;aACR,oBAAC,iBAAD;IAAyB;IAAQ,YAAA;IAAW,UAAU,CAAC;IAAU,QAAQ,CAAC;GAAW,CAAA;EAC7E,CAAA;CACE,CAAA,EACL,CAAA;AAEf;AAIA,WAAW,cAAc"}

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

@@ -0,0 +1,20 @@
+import { n as TLDRAW_SCHEMA } from "./chunk-types.mjs";
+import { Capability } from "@dxos/app-framework";
+import * as Effect from "effect/Effect";
+import { IllustratorCapabilities } from "@dxos/plugin-illustrator/types";
+import { TldrawArticle, TldrawCard } from "#containers";
+import { TldrawBuilder } from "#model";
+//#region src/capabilities/drawing-variant.ts
+var variant = {
+	id: TLDRAW_SCHEMA,
+	label: "tldraw",
+	icon: "ph--compass-tool--regular",
+	builder: TldrawBuilder,
+	card: TldrawCard,
+	article: TldrawArticle
+};
+var drawing_variant_default = Capability.makeModule(() => Effect.succeed(Capability.contributes(IllustratorCapabilities.VariantProvider, variant)));
+//#endregion
+export { drawing_variant_default as default };
+
+//# sourceMappingURL=chunk-drawing-variant.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-drawing-variant.mjs","names":[],"sources":["../../src/capabilities/drawing-variant.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability } from '@dxos/app-framework';\nimport { type DrawingVariant, IllustratorCapabilities } from '@dxos/plugin-illustrator/types';\n\nimport { TldrawArticle, TldrawCard } from '#containers';\nimport { TldrawBuilder } from '#model';\n\nimport { Tldraw } from '../types';\n\n// No `canvasType`/`createCanvas`: tldraw stores its records in the base `Drawing.Canvas`,\n// discriminated by `schema`.\nconst variant: DrawingVariant = {\n  id: Tldraw.TLDRAW_SCHEMA,\n  label: 'tldraw',\n  icon: 'ph--compass-tool--regular',\n  builder: TldrawBuilder,\n  card: TldrawCard,\n  article: TldrawArticle,\n};\n\nexport default Capability.makeModule(() =>\n  Effect.succeed(Capability.contributes(IllustratorCapabilities.VariantProvider, variant)),\n);\n"],"mappings":";;;;;;;AAgBA,IAAM,UAA0B;CAC9B,IAAI;CACJ,OAAO;CACP,MAAM;CACN,SAAS;CACT,MAAM;CACN,SAAS;AACX;AAEA,IAAA,0BAAe,WAAW,iBACxB,OAAO,QAAQ,WAAW,YAAY,wBAAwB,iBAAiB,OAAO,CAAC,CACzF"}

package/dist/lib/chunk-meta.mjs

@@ -29,6 +29,7 @@ var dx_config_default = Config2.make({ plugin: {
 		hue: "indigo"
 	},
 	spec: "PLUGIN.mdl",
+	tags: ["alpha"],
 	screenshots: [{ dark: "https://dxos.network/plugin-details-sketch-dark.png" }]
 } });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"chunk-meta.mjs","names":[],"sources":["../../dx.config.ts","../../src/meta.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Config2 } from '@dxos/app-framework/config';\nimport { trim } from '@dxos/util';\n\nexport default Config2.make({\n  plugin: {\n    key: 'org.dxos.plugin.tldraw',\n    name: 'tldraw',\n    author: 'DXOS',\n    description: trim`\n      tldraw is the canvas renderer that powers collaborative whiteboards in DXOS Composer,\n      giving every workspace a full-featured infinite canvas. Draw freehand strokes, place\n      geometric shapes, add text and arrows, and organise ideas visually — all within the same\n      local-first environment as the rest of your documents.\n\n      The plugin contributes a sketch variant to the Illustrator plugin: the base \\`Sketch\\`\n      object references a tldraw Canvas whose content is stored as a plain JSON record in ECHO,\n      so no binary blobs or external storage are required. Toolbar actions, grid settings, and\n      custom tools are wired through the Composer plugin system, and a builder maps the\n      Illustrator scene DSL onto tldraw records so agents can draw and edit diagrams.\n\n      Because Canvas data lives in ECHO, every edit is replicated peer-to-peer in real time.\n      Collaborators see each other's strokes as they draw, and changes made offline merge\n      automatically when connectivity is restored using ECHO's CRDT semantics.\n    `,\n    source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-tldraw',\n    dependsOn: ['org.dxos.plugin.illustrator'],\n    icon: { key: 'ph--compass-tool--regular', hue: 'indigo' },\n    spec: 'PLUGIN.mdl',\n    screenshots: [{ dark: 'https://dxos.network/plugin-details-sketch-dark.png' }],\n  },\n});\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\n\nimport config from '../dx.config';\n\nexport const meta = Plugin.getMetaFromConfig(config);\n"],"mappings":";;;;AAOA,IAAA,oBAAe,QAAQ,KAAK,EAC1B,QAAQ;CACN,KAAK;CACL,MAAM;CACN,QAAQ;CACR,aAAa,IAAI;;;;;;;;;;;;;;;;CAgBjB,QAAQ;CACR,WAAW,CAAC,6BAA6B;CACzC,MAAM;EAAE,KAAK;EAA6B,KAAK;CAAS;CACxD,MAAM;CACN,aAAa,CAAC,EAAE,MAAM,sDAAsD,CAAC;AAC/E,EACF,CAAC;;;AC1BD,IAAa,OAAO,OAAO,kBAAkB,iBAAM"}
+{"version":3,"file":"chunk-meta.mjs","names":[],"sources":["../../dx.config.ts","../../src/meta.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Config2 } from '@dxos/app-framework/config';\nimport { trim } from '@dxos/util';\n\nexport default Config2.make({\n  plugin: {\n    key: 'org.dxos.plugin.tldraw',\n    name: 'tldraw',\n    author: 'DXOS',\n    description: trim`\n      tldraw is the canvas renderer that powers collaborative whiteboards in DXOS Composer,\n      giving every workspace a full-featured infinite canvas. Draw freehand strokes, place\n      geometric shapes, add text and arrows, and organise ideas visually — all within the same\n      local-first environment as the rest of your documents.\n\n      The plugin contributes a sketch variant to the Illustrator plugin: the base \\`Sketch\\`\n      object references a tldraw Canvas whose content is stored as a plain JSON record in ECHO,\n      so no binary blobs or external storage are required. Toolbar actions, grid settings, and\n      custom tools are wired through the Composer plugin system, and a builder maps the\n      Illustrator scene DSL onto tldraw records so agents can draw and edit diagrams.\n\n      Because Canvas data lives in ECHO, every edit is replicated peer-to-peer in real time.\n      Collaborators see each other's strokes as they draw, and changes made offline merge\n      automatically when connectivity is restored using ECHO's CRDT semantics.\n    `,\n    source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-tldraw',\n    dependsOn: ['org.dxos.plugin.illustrator'],\n    icon: { key: 'ph--compass-tool--regular', hue: 'indigo' },\n    spec: 'PLUGIN.mdl',\n    tags: ['alpha'],\n    screenshots: [{ dark: 'https://dxos.network/plugin-details-sketch-dark.png' }],\n  },\n});\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\n\nimport config from '../dx.config';\n\nexport const meta = Plugin.getMetaFromConfig(config);\n"],"mappings":";;;;AAOA,IAAA,oBAAe,QAAQ,KAAK,EAC1B,QAAQ;CACN,KAAK;CACL,MAAM;CACN,QAAQ;CACR,aAAa,IAAI;;;;;;;;;;;;;;;;CAgBjB,QAAQ;CACR,WAAW,CAAC,6BAA6B;CACzC,MAAM;EAAE,KAAK;EAA6B,KAAK;CAAS;CACxD,MAAM;CACN,MAAM,CAAC,OAAO;CACd,aAAa,CAAC,EAAE,MAAM,sDAAsD,CAAC;AAC/E,EACF,CAAC;;;AC3BD,IAAa,OAAO,OAAO,kBAAkB,iBAAM"}

package/dist/lib/chunk-types.mjs

@@ -1,7 +1,5 @@
 import { Capability } from "@dxos/app-framework";
-import { DXN, Obj, Type } from "@dxos/echo";
 import * as Schema from "effect/Schema";
-import { HiddenAnnotation } from "@dxos/echo/Annotation";
 import { meta } from "#meta";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
@@ -33,41 +31,17 @@ var Settings$1 = Schema.mutable(Schema.Struct({
 }));
 //#endregion
 //#region src/types/Tldraw.ts
-var Tldraw_exports = /* @__PURE__ */ __exportAll({
-	Canvas: () => Canvas,
-	TLDRAW_SCHEMA: () => TLDRAW_SCHEMA,
-	isCanvas: () => isCanvas,
-	makeCanvas: () => makeCanvas
-});
-var TLDRAW_SCHEMA = "tldraw.com/2";
-/**
-* Persisted tldraw canvas: an opaque map of RecordId → TLRecord managed by the store adapter.
-* Referenced by the base `Sketch` (plugin-illustrator) as its renderer-specific canvas.
-* Keeps the pre-variant typename (`org.dxos.type.canvas`) so existing stored sketches load
-* without a data migration.
-*/
-var Canvas = class extends Type.makeObject(DXN.make("org.dxos.type.canvas", "0.1.0"))(Schema.Struct({
-	/** Fully qualified external schema reference. */
-	schema: Schema.String.pipe(Schema.optional),
-	content: Schema.Record({
-		key: Schema.String,
-		value: Schema.Any
-	})
-}).pipe(HiddenAnnotation.set(true))) {};
+var Tldraw_exports = /* @__PURE__ */ __exportAll({ TLDRAW_SCHEMA: () => TLDRAW_SCHEMA });
 /**
-* Creates an empty {@link Canvas}.
+* Renderer dialect stored on `Drawing.Canvas.schema`; how a canvas is matched to this variant.
+* The canvas type itself is the base `Drawing.Canvas` — tldraw adds no fields of its own.
 */
-var makeCanvas = ({ schema = TLDRAW_SCHEMA, content = {} } = {}) => Obj.make(Canvas, {
-	schema,
-	content
-});
-/** Type guard for {@link Canvas} objects. */
-var isCanvas = (object) => Obj.instanceOf(Canvas, object);
+var TLDRAW_SCHEMA = "tldraw.com/2";
 //#endregion
 //#region src/types/TldrawCapabilities.ts
 var TldrawCapabilities_exports = /* @__PURE__ */ __exportAll({ Settings: () => Settings });
 var Settings = Capability.make(`${meta.profile.key}.capability.settings`);
 //#endregion
-export { Settings_exports as a, makeCanvas as i, Canvas as n, __exportAll as o, Tldraw_exports as r, TldrawCapabilities_exports as t };
+export { __exportAll as a, Settings_exports as i, TLDRAW_SCHEMA as n, Tldraw_exports as r, TldrawCapabilities_exports as t };
 
 //# sourceMappingURL=chunk-types.mjs.map

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

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

package/dist/lib/components.mjs

@@ -1,11 +1,11 @@
 import { getDeep } from "@dxos/util";
-import { Obj } from "@dxos/echo";
 import "@tldraw/tldraw/tldraw.css";
 import { getAssetUrls } from "@tldraw/assets/selfHosted";
 import { ArrowDownToolbarItem, ArrowLeftToolbarItem, ArrowRightToolbarItem, ArrowToolbarItem, ArrowUpToolbarItem, AssetToolbarItem, CheckBoxToolbarItem, CloudToolbarItem, DefaultQuickActions, DefaultQuickActionsContent, DefaultStylePanelContent, DefaultToolbar, DiamondToolbarItem, DrawToolbarItem, EllipseToolbarItem, EraserToolbarItem, FrameToolbarItem, HandToolbarItem, HexagonToolbarItem, HighlightToolbarItem, LaserToolbarItem, LineToolbarItem, NoteToolbarItem, OvalToolbarItem, RectangleToolbarItem, RhombusToolbarItem, SelectToolbarItem, StarToolbarItem, TextToolbarItem, Tldraw, TldrawUiMenuItem, TriangleToolbarItem, XBoxToolbarItem, useActions, useDefaultColorTheme, useReadonly, useRelevantStyles, useTools } from "@tldraw/tldraw";
 import defaultsDeep from "lodash.defaultsdeep";
 import { memo, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
+import { Obj } from "@dxos/echo";
 import { useMergeRefs } from "@dxos/react-hooks";
 import { composable, composableProps } from "@dxos/react-ui";
 import { useStoreAdapter } from "#hooks";

package/dist/lib/components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components.mjs","names":[],"sources":["../../src/components/actions.ts","../../src/components/custom/CustomMenu.tsx","../../src/components/custom/CustomStylePanel.tsx","../../src/components/custom/CustomToolbar.tsx","../../src/components/custom/DottedGrid.tsx","../../src/components/custom/MeshGrid.tsx","../../src/components/Canvas/Canvas.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport type { TLRecord } from '@tldraw/tldraw';\nimport { isShape } from '@tldraw/tlschema';\n\nimport { Doc } from '@dxos/echo-doc';\nimport { getDeep } from '@dxos/util';\n\nimport type { Tldraw } from '#types';\n\n/**\n * Snap to grid.\n */\nexport const handleSnap = async (canvas: Tldraw.Canvas) => {\n  const snap = (value: number, tolerance = 40) => {\n    return Math.round(value / tolerance) * tolerance;\n  };\n\n  // TODO(burdon): Use context to access document.\n  const accessor = Doc.createAccessor(canvas, ['content']);\n  accessor.handle.change((doc) => {\n    const map = getDeep<Record<string, TLRecord>>(doc, accessor.path);\n    Object.entries(map ?? {}).forEach(([_id, item]) => {\n      if (isShape(item)) {\n        const { x, y, props } = item;\n        item.x = snap(x);\n        item.y = snap(y);\n        type Rect = { geo: string; w: number; h: number };\n        const { geo, w, h } = props as Rect;\n        switch (geo) {\n          case 'rectangle': {\n            const rect = props as Rect;\n            rect.w = snap(w);\n            rect.h = snap(h);\n          }\n        }\n      }\n    });\n  });\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  DefaultQuickActions,\n  DefaultQuickActionsContent,\n  TldrawUiMenuItem,\n  type TLUiStylePanelProps,\n  useActions,\n  useReadonly,\n} from '@tldraw/tldraw';\nimport React from 'react';\n\nexport const CustomMenu = ({ isMobile }: TLUiStylePanelProps) => {\n  const actions = useActions();\n  const isReadonlyMode = useReadonly();\n\n  return (\n    <div className='tlui-style-panel__wrapper'>\n      <div className='tlui-menu'>\n        <div className='tlui-buttons__horizontal' data-ismobile={isMobile}>\n          <DefaultQuickActions>\n            <DefaultQuickActionsContent />\n            <TldrawUiMenuItem {...actions.snap} disabled={isReadonlyMode} />\n          </DefaultQuickActions>\n        </div>\n      </div>\n    </div>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEditor } from '@tldraw/editor';\nimport { DefaultStylePanelContent, type TLUiStylePanelProps, useRelevantStyles } from '@tldraw/tldraw';\nimport React, { memo, useCallback } from 'react';\n\nimport { mx } from '@dxos/ui-theme';\n\nexport const CustomStylePanel = memo(({ isMobile }: TLUiStylePanelProps) => {\n  const editor = useEditor();\n  const styles = useRelevantStyles();\n  const handlePointerLeave = useCallback(() => {\n    if (!isMobile) {\n      editor.updateInstanceState({ isChangingStyle: false });\n    }\n  }, [editor, isMobile]);\n\n  if (!styles) {\n    return null;\n  }\n\n  // TODO(burdon): Currently the global STYLES (fonts, colors, etc.) are not pluggable.\n  // TODO(burdon): Implement custom style panel to replace fonts.\n  // https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx\n  return (\n    <div\n      className={mx('tlui-style-panel', !isMobile && 'tlui-style-panel__wrapper')}\n      data-ismobile={isMobile}\n      onPointerLeave={handlePointerLeave}\n    >\n      {/* <CommonStylePickerSet theme={theme} styles={styles} /> */}\n      {/* {!hideText && <TextStylePickerSet theme={theme} styles={styles} />} */}\n      <DefaultStylePanelContent styles={styles} />\n    </div>\n  );\n});\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  ArrowDownToolbarItem,\n  ArrowLeftToolbarItem,\n  ArrowRightToolbarItem,\n  ArrowToolbarItem,\n  ArrowUpToolbarItem,\n  AssetToolbarItem,\n  CheckBoxToolbarItem,\n  CloudToolbarItem,\n  DiamondToolbarItem,\n  DrawToolbarItem,\n  EllipseToolbarItem,\n  EraserToolbarItem,\n  FrameToolbarItem,\n  HandToolbarItem,\n  HexagonToolbarItem,\n  HighlightToolbarItem,\n  LaserToolbarItem,\n  LineToolbarItem,\n  NoteToolbarItem,\n  OvalToolbarItem,\n  RectangleToolbarItem,\n  RhombusToolbarItem,\n  SelectToolbarItem,\n  StarToolbarItem,\n  TextToolbarItem,\n  TldrawUiMenuItem,\n  TriangleToolbarItem,\n  XBoxToolbarItem,\n  useTools,\n} from '@tldraw/tldraw';\nimport React, { memo } from 'react';\n\ntype ToolSplice = { toolId: string; position: number };\n\nconst DefaultToolbarContent = memo(({ toolsToSplice }: { toolsToSplice: ToolSplice[] }) => {\n  const tools = useTools();\n\n  const toolNodes = [\n    <SelectToolbarItem key='select' />,\n    <HandToolbarItem key='hand' />,\n    <DrawToolbarItem key='draw' />,\n    <EraserToolbarItem key='eraser' />,\n    <ArrowToolbarItem key='arrow' />,\n    <TextToolbarItem key='text' />,\n    <NoteToolbarItem key='note' />,\n    <AssetToolbarItem key='asset' />,\n    <RectangleToolbarItem key='rectangle' />,\n    <EllipseToolbarItem key='ellipse' />,\n    <TriangleToolbarItem key='triangle' />,\n    <DiamondToolbarItem key='diamond' />,\n    <HexagonToolbarItem key='hexagon' />,\n    <OvalToolbarItem key='oval' />,\n    <RhombusToolbarItem key='rhombus' />,\n    <StarToolbarItem key='star' />,\n    <CloudToolbarItem key='cloud' />,\n    <XBoxToolbarItem key='xbox' />,\n    <CheckBoxToolbarItem key='checkbox' />,\n    <ArrowLeftToolbarItem key='arrowLeft' />,\n    <ArrowUpToolbarItem key='arrowUp' />,\n    <ArrowDownToolbarItem key='arrowDown' />,\n    <ArrowRightToolbarItem key='arrowRight' />,\n    <LineToolbarItem key='line' />,\n    <HighlightToolbarItem key='highlight' />,\n    <LaserToolbarItem key='laser' />,\n    <FrameToolbarItem key='frame' />,\n  ];\n\n  toolsToSplice.forEach((splice) => {\n    if (splice.position >= 0 && splice.position <= toolNodes.length) {\n      toolNodes.splice(\n        splice.position,\n        0,\n        <TldrawUiMenuItem key={splice.toolId} {...tools[splice.toolId as keyof typeof tools]} />,\n      );\n    }\n  });\n\n  return <>{toolNodes}</>;\n});\n\nDefaultToolbarContent.displayName = 'DefaultToolbarContent';\n\nexport { DefaultToolbarContent };\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type TLGridProps, useDefaultColorTheme } from '@tldraw/tldraw';\nimport { modulate } from '@tldraw/utils';\nimport React, { useId } from 'react';\n\nconst GRID_STEPS = [\n  { min: -1, mid: 0.15, step: 64 },\n  { min: 0.05, mid: 0.375, step: 16 },\n  { min: 0.15, mid: 1, step: 4 },\n  { min: 0.7, mid: 2.5, step: 1 },\n];\n\n// This is a modified version of the default grid from tldraw:\n// https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/components/default-components/DefaultGrid.tsx\n//\n// We're overriding it to work around a state coupling bug in tldraw where multiple grid instances\n// on the same page interfere with each other due to shared IDs. Our solution uses React.useId()\n// to generate unique IDs for each grid instance, preventing conflicts.\n//\n// TODO(Zan): Revert this to the default implementation once the issue has been fixed upstream in tldraw.\nexport const DottedGrid = ({ x, y, z, size }: TLGridProps) => {\n  const theme = useDefaultColorTheme();\n  const stroke = theme.grey.solid;\n  const id = useId();\n\n  return (\n    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>\n      <defs>\n        {GRID_STEPS.map(({ min, mid, step }) => {\n          const s = step * size * z;\n          const xo = 0.5 + x * z;\n          const yo = 0.5 + y * z;\n          const gxo = xo > 0 ? xo % s : s + (xo % s);\n          const gyo = yo > 0 ? yo % s : s + (yo % s);\n          const opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1;\n          const patternId = `${id}-step-${step}`;\n          return (\n            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>\n              <circle className='tl-grid-dot' cx={gxo} cy={gyo} r={1} opacity={opacity} fill={stroke} stroke={stroke} />\n            </pattern>\n          );\n        })}\n      </defs>\n      {GRID_STEPS.map(({ step }) => {\n        const patternId = `${id}-step-${step}`;\n        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;\n      })}\n    </svg>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type TLGridProps } from '@tldraw/editor';\nimport { useDefaultColorTheme } from '@tldraw/tldraw';\nimport { modulate } from '@tldraw/utils';\nimport React, { useId } from 'react';\n\nconst GRID_STEPS = [\n  { min: -1, mid: 0.15, step: 64 },\n  { min: 0.05, mid: 0.375, step: 16 },\n  { min: 0.15, mid: 1, step: 4 },\n  { min: 0.7, mid: 2.5, step: 1 },\n];\n\nexport const MeshGrid = ({ x, y, z, size }: TLGridProps) => {\n  const theme = useDefaultColorTheme();\n  const stroke = theme.grey.solid;\n  const id = useId();\n\n  return (\n    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>\n      <defs id={id}>\n        {GRID_STEPS.map(({ min, mid, step }, i) => {\n          const s = step * size * z;\n          const xo = 0.5 + x * z;\n          const yo = 0.5 + y * z;\n          const gxo = xo > 0 ? xo % s : s + (xo % s);\n          const gyo = yo > 0 ? yo % s : s + (yo % s);\n          const opacity = (z < mid ? modulate(z, [min, mid], [0, 1]) : 1) * 0.15;\n          const patternId = `${id}-step-${step}`;\n          return (\n            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>\n              <line style={{ stroke }} x1={gxo - s} y1={gyo} x2={gxo + s} y2={gyo} opacity={opacity} />\n              <line style={{ stroke }} x1={gxo} y1={gyo - s} x2={gxo} y2={gyo + s} opacity={opacity} />\n            </pattern>\n          );\n        })}\n      </defs>\n      {GRID_STEPS.map(({ step }) => {\n        const patternId = `${id}-step-${step}`;\n        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;\n      })}\n    </svg>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport '@tldraw/tldraw/tldraw.css';\nimport './theme.css';\n\nimport { getAssetUrls } from '@tldraw/assets/selfHosted';\nimport { type TLEventInfo, type TLGridProps, type TLInstance } from '@tldraw/editor';\nimport { DefaultToolbar, type Editor, Tldraw as TldrawEditor, type TLUiAssetUrlOverrides } from '@tldraw/tldraw';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type FC, useEffect, useMemo, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { Obj } from '@dxos/echo';\nimport { useMergeRefs } from '@dxos/react-hooks';\nimport { composable, composableProps } from '@dxos/react-ui';\n\nimport { useStoreAdapter } from '#hooks';\nimport { type Settings, type Tldraw } from '#types';\n\nimport { handleSnap } from '../actions';\nimport { CustomMenu, CustomStylePanel, DefaultToolbarContent, DottedGrid, MeshGrid } from '../custom';\n\nconst threadToolId = 'thread';\n\nconst gridComponents: Record<Settings.GridType, FC<TLGridProps>> = {\n  mesh: MeshGrid,\n  dotted: DottedGrid,\n};\n\nexport type CanvasProps = {\n  canvas: Tldraw.Canvas;\n  readonly?: boolean;\n  autoCenter?: boolean;\n  hideUi?: boolean;\n  assetsBaseUrl?: string | null;\n  settings?: Settings.Settings;\n  onThreadCreate?: () => void;\n};\n\nexport const CanvasComponent = composable<HTMLDivElement, CanvasProps>(\n  (\n    {\n      canvas,\n      readonly = false,\n      autoCenter = true,\n      hideUi = false,\n      assetsBaseUrl = '/assets/plugin-tldraw',\n      settings,\n      onThreadCreate,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const adapter = useStoreAdapter(canvas);\n    const [editor, setEditor] = useState<Editor>();\n\n    // Focus.\n    useEffect(() => {\n      hideUi ? editor?.blur() : editor?.focus();\n    }, [hideUi, editor]);\n\n    // Editor State.\n    useEffect(() => {\n      if (!settings) {\n        return;\n      }\n\n      const cleanup = editor?.store.listen(\n        ({ changes: { updated } }) => {\n          for (const [id, [from, to]] of Object.entries(updated)) {\n            if (id === 'instance:instance') {\n              const fromInstance = from as TLInstance;\n              const toInstance = to as TLInstance;\n              if (fromInstance.isGridMode !== toInstance.isGridMode) {\n                settings.showGrid = toInstance.isGridMode;\n              }\n            }\n          }\n        },\n        { source: 'user', scope: 'all' },\n      );\n\n      // TODO(burdon): Combine.\n      return () => cleanup?.();\n    }, [settings, editor]);\n\n    // Editor events.\n    useEffect(() => {\n      // https://tldraw.dev/examples/editor-api/canvas-events\n      const handleEvent = ({ type, name }: TLEventInfo) => {\n        if (type === 'pointer' && name === 'pointer_up') {\n          // Defer: the 'event' stream fires before the active tool commits its shape to the\n          // store, so an immediate save flushes one gesture behind (losing the final stroke).\n          setTimeout(() => adapter.save());\n        }\n      };\n\n      editor?.on('event', handleEvent);\n      return () => {\n        editor?.off('event', handleEvent);\n      };\n    }, [adapter, editor]);\n\n    // UI state.\n    useEffect(() => {\n      if (editor) {\n        editor.user.updateUserPreferences({\n          // TODO(burdon): Adjust snap threshold.\n          isSnapMode: true,\n        });\n        editor.updateInstanceState({\n          isGridMode: settings?.showGrid !== false && !hideUi,\n          isReadonly: readonly || hideUi,\n        });\n        if (readonly || hideUi) {\n          editor.setCurrentTool('hand');\n        }\n      }\n    }, [editor, settings, hideUi, readonly]);\n\n    // Zoom to fit.\n    const { ref: resizeRef, width = 0, height } = useResizeDetector();\n    const containerRef = useMergeRefs([forwardedRef, resizeRef]);\n    const [ready, setReady] = useState(!autoCenter);\n    useEffect(() => {\n      if (!editor || !adapter || width === undefined || height === undefined) {\n        return;\n      }\n\n      const isLocked = readonly || hideUi;\n\n      // Unlock to allow programmatic camera positioning.\n      editor.setCameraOptions({ isLocked: false });\n\n      // Set frame so that top left of grid is inset with our border (if no content).\n      editor.setCamera({ x: -1, y: -1, z: 1 }, { animation: { duration: 0 } });\n      editor.resetZoom();\n\n      setReady(true);\n      if (!autoCenter) {\n        editor.setCameraOptions({ isLocked: isLocked });\n        return;\n      }\n\n      const zoom = () => {\n        zoomToFit(editor, width, height, false);\n      };\n\n      zoom();\n      editor.setCameraOptions({ isLocked: isLocked });\n\n      let timer: ReturnType<typeof setTimeout> | undefined;\n      const onUpdate = () => {\n        clearTimeout(timer);\n        timer = setTimeout(() => {\n          editor.setCameraOptions({ isLocked: false });\n          zoom();\n          editor.setCameraOptions({ isLocked: isLocked });\n        }, 200);\n      };\n      const subscription = isLocked ? adapter.store?.listen(() => onUpdate(), { scope: 'document' }) : undefined;\n      return () => {\n        clearTimeout(timer);\n        subscription?.();\n      };\n    }, [editor, adapter, width, height, autoCenter, readonly, hideUi]);\n\n    // NOTE: Currently copying assets to composer-app public/assets/tldraw.\n    // https://tldraw.dev/installation#Self-hosting-static-assets\n    const assetUrls: TLUiAssetUrlOverrides = useMemo(() => {\n      if (!assetsBaseUrl) {\n        return undefined;\n      }\n\n      return defaultsDeep(\n        {\n          // Change default draw font.\n          // TODO(burdon): Change icon to match font.\n          fonts: { draw: `${assetsBaseUrl}/fonts/Montserrat-Regular.woff2` },\n          icons: {\n            'thread-icon': `${assetsBaseUrl}/icons/icon/chat-teardrop-text.svg`,\n          },\n        },\n        getAssetUrls({ baseUrl: assetsBaseUrl }),\n      );\n    }, [assetsBaseUrl]);\n\n    const overrides = useMemo(\n      () => ({\n        actions: (_editor: Editor, actions: any, _helpers: any) => ({\n          ...actions,\n          snap: {\n            id: 'grid-snap',\n            label: 'Snap',\n            kbd: 's',\n            icon: 'horizontal-align-middle',\n            onSelect: () => {\n              void handleSnap(canvas);\n            },\n          },\n        }),\n        tools: (_editor: Editor, tools: any) => {\n          const newTools = { ...tools };\n          newTools[threadToolId] = {\n            id: threadToolId,\n            icon: 'thread-icon',\n            label: 'Comment', // TODO(Zan): Use translation lookup here.\n            onSelect: () => onThreadCreate?.(),\n          };\n          return newTools;\n        },\n      }),\n      [canvas, onThreadCreate],\n    );\n\n    const components = useMemo(\n      () => ({\n        DebugPanel: null,\n        Grid: gridComponents[settings?.gridType ?? 'mesh'],\n        HelpMenu: null,\n        MenuPanel: CustomMenu,\n        NavigationPanel: null,\n        StylePanel: CustomStylePanel,\n        TopPanel: null,\n        ZoomMenu: null,\n        Toolbar: (props: any) => (\n          <DefaultToolbar {...props}>\n            <DefaultToolbarContent toolsToSplice={[{ toolId: 'thread', position: 8 }]} />\n          </DefaultToolbar>\n        ),\n      }),\n      [settings],\n    );\n\n    if (!adapter.store) {\n      return null;\n    }\n\n    return (\n      <div\n        {...composableProps(props, { classNames: 'dx-expander' })}\n        style={{ visibility: ready ? 'visible' : 'hidden' }}\n        ref={containerRef}\n      >\n        <TldrawEditor\n          // Rebind when the adapter recreates its store (e.g. an effect-churn reopen) — a stale\n          // binding draws into an orphaned store whose change listeners are gone, so saves no-op.\n          key={`${Obj.getURI(canvas)}:${adapter.store.id}`}\n          store={adapter.store}\n          hideUi={hideUi}\n          inferDarkMode\n          className='outline-hidden!'\n          maxAssetSize={1024 * 1024}\n          assetUrls={assetUrls}\n          overrides={overrides}\n          components={components}\n          onMount={setEditor}\n        />\n      </div>\n    );\n  },\n);\n\n/**\n * Fit content within the viewport and center it, zooming out for oversized content but never\n * magnifying past 100% (zoom is capped at 1).\n */\nconst zoomToFit = (editor: Editor, width: number, height: number, animate = true) => {\n  const commonBounds = editor.getCurrentPageBounds();\n  if (width && height && commonBounds?.width && commonBounds?.height) {\n    const padding = 60;\n    // Zoom out to fit oversized content; cap at 1 so small content is never zoomed in.\n    const zoom = Math.min(1, (width - padding) / commonBounds.width, (height - padding) / commonBounds.height);\n    const center = {\n      x: (width - commonBounds.width * zoom) / 2 / zoom - commonBounds.minX,\n      y: (height - commonBounds.height * zoom) / 2 / zoom - commonBounds.minY,\n      z: zoom,\n    };\n\n    editor.setCamera(center, animate ? { animation: { duration: 250 } } : undefined);\n  }\n};\n"],"mappings":"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"}
+{"version":3,"file":"components.mjs","names":[],"sources":["../../src/components/actions.ts","../../src/components/custom/CustomMenu.tsx","../../src/components/custom/CustomStylePanel.tsx","../../src/components/custom/CustomToolbar.tsx","../../src/components/custom/DottedGrid.tsx","../../src/components/custom/MeshGrid.tsx","../../src/components/Canvas/Canvas.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport type { TLRecord } from '@tldraw/tldraw';\nimport { isShape } from '@tldraw/tlschema';\n\nimport { Doc } from '@dxos/echo-doc';\nimport { Drawing } from '@dxos/plugin-illustrator/types';\nimport { getDeep } from '@dxos/util';\n\n/**\n * Snap to grid.\n */\nexport const handleSnap = async (canvas: Drawing.Canvas) => {\n  const snap = (value: number, tolerance = 40) => {\n    return Math.round(value / tolerance) * tolerance;\n  };\n\n  // TODO(burdon): Use context to access document.\n  const accessor = Doc.createAccessor(canvas, ['content']);\n  accessor.handle.change((doc) => {\n    const map = getDeep<Record<string, TLRecord>>(doc, accessor.path);\n    Object.entries(map ?? {}).forEach(([_id, item]) => {\n      if (isShape(item)) {\n        const { x, y, props } = item;\n        item.x = snap(x);\n        item.y = snap(y);\n        type Rect = { geo: string; w: number; h: number };\n        const { geo, w, h } = props as Rect;\n        switch (geo) {\n          case 'rectangle': {\n            const rect = props as Rect;\n            rect.w = snap(w);\n            rect.h = snap(h);\n          }\n        }\n      }\n    });\n  });\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  DefaultQuickActions,\n  DefaultQuickActionsContent,\n  TldrawUiMenuItem,\n  type TLUiStylePanelProps,\n  useActions,\n  useReadonly,\n} from '@tldraw/tldraw';\nimport React from 'react';\n\nexport const CustomMenu = ({ isMobile }: TLUiStylePanelProps) => {\n  const actions = useActions();\n  const isReadonlyMode = useReadonly();\n\n  return (\n    <div className='tlui-style-panel__wrapper'>\n      <div className='tlui-menu'>\n        <div className='tlui-buttons__horizontal' data-ismobile={isMobile}>\n          <DefaultQuickActions>\n            <DefaultQuickActionsContent />\n            <TldrawUiMenuItem {...actions.snap} disabled={isReadonlyMode} />\n          </DefaultQuickActions>\n        </div>\n      </div>\n    </div>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEditor } from '@tldraw/editor';\nimport { DefaultStylePanelContent, type TLUiStylePanelProps, useRelevantStyles } from '@tldraw/tldraw';\nimport React, { memo, useCallback } from 'react';\n\nimport { mx } from '@dxos/ui-theme';\n\nexport const CustomStylePanel = memo(({ isMobile }: TLUiStylePanelProps) => {\n  const editor = useEditor();\n  const styles = useRelevantStyles();\n  const handlePointerLeave = useCallback(() => {\n    if (!isMobile) {\n      editor.updateInstanceState({ isChangingStyle: false });\n    }\n  }, [editor, isMobile]);\n\n  if (!styles) {\n    return null;\n  }\n\n  // TODO(burdon): Currently the global STYLES (fonts, colors, etc.) are not pluggable.\n  // TODO(burdon): Implement custom style panel to replace fonts.\n  // https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/custom-style-panel/CustomStylePanelExample.tsx\n  return (\n    <div\n      className={mx('tlui-style-panel', !isMobile && 'tlui-style-panel__wrapper')}\n      data-ismobile={isMobile}\n      onPointerLeave={handlePointerLeave}\n    >\n      {/* <CommonStylePickerSet theme={theme} styles={styles} /> */}\n      {/* {!hideText && <TextStylePickerSet theme={theme} styles={styles} />} */}\n      <DefaultStylePanelContent styles={styles} />\n    </div>\n  );\n});\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport {\n  ArrowDownToolbarItem,\n  ArrowLeftToolbarItem,\n  ArrowRightToolbarItem,\n  ArrowToolbarItem,\n  ArrowUpToolbarItem,\n  AssetToolbarItem,\n  CheckBoxToolbarItem,\n  CloudToolbarItem,\n  DiamondToolbarItem,\n  DrawToolbarItem,\n  EllipseToolbarItem,\n  EraserToolbarItem,\n  FrameToolbarItem,\n  HandToolbarItem,\n  HexagonToolbarItem,\n  HighlightToolbarItem,\n  LaserToolbarItem,\n  LineToolbarItem,\n  NoteToolbarItem,\n  OvalToolbarItem,\n  RectangleToolbarItem,\n  RhombusToolbarItem,\n  SelectToolbarItem,\n  StarToolbarItem,\n  TextToolbarItem,\n  TldrawUiMenuItem,\n  TriangleToolbarItem,\n  XBoxToolbarItem,\n  useTools,\n} from '@tldraw/tldraw';\nimport React, { memo } from 'react';\n\ntype ToolSplice = { toolId: string; position: number };\n\nconst DefaultToolbarContent = memo(({ toolsToSplice }: { toolsToSplice: ToolSplice[] }) => {\n  const tools = useTools();\n\n  const toolNodes = [\n    <SelectToolbarItem key='select' />,\n    <HandToolbarItem key='hand' />,\n    <DrawToolbarItem key='draw' />,\n    <EraserToolbarItem key='eraser' />,\n    <ArrowToolbarItem key='arrow' />,\n    <TextToolbarItem key='text' />,\n    <NoteToolbarItem key='note' />,\n    <AssetToolbarItem key='asset' />,\n    <RectangleToolbarItem key='rectangle' />,\n    <EllipseToolbarItem key='ellipse' />,\n    <TriangleToolbarItem key='triangle' />,\n    <DiamondToolbarItem key='diamond' />,\n    <HexagonToolbarItem key='hexagon' />,\n    <OvalToolbarItem key='oval' />,\n    <RhombusToolbarItem key='rhombus' />,\n    <StarToolbarItem key='star' />,\n    <CloudToolbarItem key='cloud' />,\n    <XBoxToolbarItem key='xbox' />,\n    <CheckBoxToolbarItem key='checkbox' />,\n    <ArrowLeftToolbarItem key='arrowLeft' />,\n    <ArrowUpToolbarItem key='arrowUp' />,\n    <ArrowDownToolbarItem key='arrowDown' />,\n    <ArrowRightToolbarItem key='arrowRight' />,\n    <LineToolbarItem key='line' />,\n    <HighlightToolbarItem key='highlight' />,\n    <LaserToolbarItem key='laser' />,\n    <FrameToolbarItem key='frame' />,\n  ];\n\n  toolsToSplice.forEach((splice) => {\n    if (splice.position >= 0 && splice.position <= toolNodes.length) {\n      toolNodes.splice(\n        splice.position,\n        0,\n        <TldrawUiMenuItem key={splice.toolId} {...tools[splice.toolId as keyof typeof tools]} />,\n      );\n    }\n  });\n\n  return <>{toolNodes}</>;\n});\n\nDefaultToolbarContent.displayName = 'DefaultToolbarContent';\n\nexport { DefaultToolbarContent };\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type TLGridProps, useDefaultColorTheme } from '@tldraw/tldraw';\nimport { modulate } from '@tldraw/utils';\nimport React, { useId } from 'react';\n\nconst GRID_STEPS = [\n  { min: -1, mid: 0.15, step: 64 },\n  { min: 0.05, mid: 0.375, step: 16 },\n  { min: 0.15, mid: 1, step: 4 },\n  { min: 0.7, mid: 2.5, step: 1 },\n];\n\n// This is a modified version of the default grid from tldraw:\n// https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/components/default-components/DefaultGrid.tsx\n//\n// We're overriding it to work around a state coupling bug in tldraw where multiple grid instances\n// on the same page interfere with each other due to shared IDs. Our solution uses React.useId()\n// to generate unique IDs for each grid instance, preventing conflicts.\n//\n// TODO(Zan): Revert this to the default implementation once the issue has been fixed upstream in tldraw.\nexport const DottedGrid = ({ x, y, z, size }: TLGridProps) => {\n  const theme = useDefaultColorTheme();\n  const stroke = theme.grey.solid;\n  const id = useId();\n\n  return (\n    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>\n      <defs>\n        {GRID_STEPS.map(({ min, mid, step }) => {\n          const s = step * size * z;\n          const xo = 0.5 + x * z;\n          const yo = 0.5 + y * z;\n          const gxo = xo > 0 ? xo % s : s + (xo % s);\n          const gyo = yo > 0 ? yo % s : s + (yo % s);\n          const opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1;\n          const patternId = `${id}-step-${step}`;\n          return (\n            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>\n              <circle className='tl-grid-dot' cx={gxo} cy={gyo} r={1} opacity={opacity} fill={stroke} stroke={stroke} />\n            </pattern>\n          );\n        })}\n      </defs>\n      {GRID_STEPS.map(({ step }) => {\n        const patternId = `${id}-step-${step}`;\n        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;\n      })}\n    </svg>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport { type TLGridProps } from '@tldraw/editor';\nimport { useDefaultColorTheme } from '@tldraw/tldraw';\nimport { modulate } from '@tldraw/utils';\nimport React, { useId } from 'react';\n\nconst GRID_STEPS = [\n  { min: -1, mid: 0.15, step: 64 },\n  { min: 0.05, mid: 0.375, step: 16 },\n  { min: 0.15, mid: 1, step: 4 },\n  { min: 0.7, mid: 2.5, step: 1 },\n];\n\nexport const MeshGrid = ({ x, y, z, size }: TLGridProps) => {\n  const theme = useDefaultColorTheme();\n  const stroke = theme.grey.solid;\n  const id = useId();\n\n  return (\n    <svg id={id} className='tl-grid' version='1.1' xmlns='http://www.w3.org/2000/svg'>\n      <defs id={id}>\n        {GRID_STEPS.map(({ min, mid, step }, i) => {\n          const s = step * size * z;\n          const xo = 0.5 + x * z;\n          const yo = 0.5 + y * z;\n          const gxo = xo > 0 ? xo % s : s + (xo % s);\n          const gyo = yo > 0 ? yo % s : s + (yo % s);\n          const opacity = (z < mid ? modulate(z, [min, mid], [0, 1]) : 1) * 0.15;\n          const patternId = `${id}-step-${step}`;\n          return (\n            <pattern key={patternId} id={patternId} width={s} height={s} patternUnits='userSpaceOnUse'>\n              <line style={{ stroke }} x1={gxo - s} y1={gyo} x2={gxo + s} y2={gyo} opacity={opacity} />\n              <line style={{ stroke }} x1={gxo} y1={gyo - s} x2={gxo} y2={gyo + s} opacity={opacity} />\n            </pattern>\n          );\n        })}\n      </defs>\n      {GRID_STEPS.map(({ step }) => {\n        const patternId = `${id}-step-${step}`;\n        return <rect key={patternId} width='100%' height='100%' fill={`url(#${patternId})`} />;\n      })}\n    </svg>\n  );\n};\n","//\n// Copyright 2024 DXOS.org\n//\n\nimport '@tldraw/tldraw/tldraw.css';\nimport './theme.css';\n\nimport { getAssetUrls } from '@tldraw/assets/selfHosted';\nimport { type TLEventInfo, type TLGridProps, type TLInstance } from '@tldraw/editor';\nimport { DefaultToolbar, type Editor, Tldraw as TldrawEditor, type TLUiAssetUrlOverrides } from '@tldraw/tldraw';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport React, { type FC, useEffect, useMemo, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { Obj } from '@dxos/echo';\nimport { Drawing } from '@dxos/plugin-illustrator/types';\nimport { useMergeRefs } from '@dxos/react-hooks';\nimport { composable, composableProps } from '@dxos/react-ui';\n\nimport { useStoreAdapter } from '#hooks';\nimport { type Settings } from '#types';\n\nimport { handleSnap } from '../actions';\nimport { CustomMenu, CustomStylePanel, DefaultToolbarContent, DottedGrid, MeshGrid } from '../custom';\n\nconst threadToolId = 'thread';\n\nconst gridComponents: Record<Settings.GridType, FC<TLGridProps>> = {\n  mesh: MeshGrid,\n  dotted: DottedGrid,\n};\n\nexport type CanvasProps = {\n  canvas: Drawing.Canvas;\n  readonly?: boolean;\n  autoCenter?: boolean;\n  hideUi?: boolean;\n  assetsBaseUrl?: string | null;\n  settings?: Settings.Settings;\n  onThreadCreate?: () => void;\n};\n\nexport const CanvasComponent = composable<HTMLDivElement, CanvasProps>(\n  (\n    {\n      canvas,\n      readonly = false,\n      autoCenter = true,\n      hideUi = false,\n      assetsBaseUrl = '/assets/plugin-tldraw',\n      settings,\n      onThreadCreate,\n      ...props\n    },\n    forwardedRef,\n  ) => {\n    const adapter = useStoreAdapter(canvas);\n    const [editor, setEditor] = useState<Editor>();\n\n    // Focus.\n    useEffect(() => {\n      hideUi ? editor?.blur() : editor?.focus();\n    }, [hideUi, editor]);\n\n    // Editor State.\n    useEffect(() => {\n      if (!settings) {\n        return;\n      }\n\n      const cleanup = editor?.store.listen(\n        ({ changes: { updated } }) => {\n          for (const [id, [from, to]] of Object.entries(updated)) {\n            if (id === 'instance:instance') {\n              const fromInstance = from as TLInstance;\n              const toInstance = to as TLInstance;\n              if (fromInstance.isGridMode !== toInstance.isGridMode) {\n                settings.showGrid = toInstance.isGridMode;\n              }\n            }\n          }\n        },\n        { source: 'user', scope: 'all' },\n      );\n\n      // TODO(burdon): Combine.\n      return () => cleanup?.();\n    }, [settings, editor]);\n\n    // Editor events.\n    useEffect(() => {\n      // https://tldraw.dev/examples/editor-api/canvas-events\n      const handleEvent = ({ type, name }: TLEventInfo) => {\n        if (type === 'pointer' && name === 'pointer_up') {\n          // Defer: the 'event' stream fires before the active tool commits its shape to the\n          // store, so an immediate save flushes one gesture behind (losing the final stroke).\n          setTimeout(() => adapter.save());\n        }\n      };\n\n      editor?.on('event', handleEvent);\n      return () => {\n        editor?.off('event', handleEvent);\n      };\n    }, [adapter, editor]);\n\n    // UI state.\n    useEffect(() => {\n      if (editor) {\n        editor.user.updateUserPreferences({\n          // TODO(burdon): Adjust snap threshold.\n          isSnapMode: true,\n        });\n        editor.updateInstanceState({\n          isGridMode: settings?.showGrid !== false && !hideUi,\n          isReadonly: readonly || hideUi,\n        });\n        if (readonly || hideUi) {\n          editor.setCurrentTool('hand');\n        }\n      }\n    }, [editor, settings, hideUi, readonly]);\n\n    // Zoom to fit.\n    const { ref: resizeRef, width = 0, height } = useResizeDetector();\n    const containerRef = useMergeRefs([forwardedRef, resizeRef]);\n    const [ready, setReady] = useState(!autoCenter);\n    useEffect(() => {\n      if (!editor || !adapter || width === undefined || height === undefined) {\n        return;\n      }\n\n      const isLocked = readonly || hideUi;\n\n      // Unlock to allow programmatic camera positioning.\n      editor.setCameraOptions({ isLocked: false });\n\n      // Set frame so that top left of grid is inset with our border (if no content).\n      editor.setCamera({ x: -1, y: -1, z: 1 }, { animation: { duration: 0 } });\n      editor.resetZoom();\n\n      setReady(true);\n      if (!autoCenter) {\n        editor.setCameraOptions({ isLocked: isLocked });\n        return;\n      }\n\n      const zoom = () => {\n        zoomToFit(editor, width, height, false);\n      };\n\n      zoom();\n      editor.setCameraOptions({ isLocked: isLocked });\n\n      let timer: ReturnType<typeof setTimeout> | undefined;\n      const onUpdate = () => {\n        clearTimeout(timer);\n        timer = setTimeout(() => {\n          editor.setCameraOptions({ isLocked: false });\n          zoom();\n          editor.setCameraOptions({ isLocked: isLocked });\n        }, 200);\n      };\n      const subscription = isLocked ? adapter.store?.listen(() => onUpdate(), { scope: 'document' }) : undefined;\n      return () => {\n        clearTimeout(timer);\n        subscription?.();\n      };\n    }, [editor, adapter, width, height, autoCenter, readonly, hideUi]);\n\n    // NOTE: Currently copying assets to composer-app public/assets/tldraw.\n    // https://tldraw.dev/installation#Self-hosting-static-assets\n    const assetUrls: TLUiAssetUrlOverrides = useMemo(() => {\n      if (!assetsBaseUrl) {\n        return undefined;\n      }\n\n      return defaultsDeep(\n        {\n          // Change default draw font.\n          // TODO(burdon): Change icon to match font.\n          fonts: { draw: `${assetsBaseUrl}/fonts/Montserrat-Regular.woff2` },\n          icons: {\n            'thread-icon': `${assetsBaseUrl}/icons/icon/chat-teardrop-text.svg`,\n          },\n        },\n        getAssetUrls({ baseUrl: assetsBaseUrl }),\n      );\n    }, [assetsBaseUrl]);\n\n    const overrides = useMemo(\n      () => ({\n        actions: (_editor: Editor, actions: any, _helpers: any) => ({\n          ...actions,\n          snap: {\n            id: 'grid-snap',\n            label: 'Snap',\n            kbd: 's',\n            icon: 'horizontal-align-middle',\n            onSelect: () => {\n              void handleSnap(canvas);\n            },\n          },\n        }),\n        tools: (_editor: Editor, tools: any) => {\n          const newTools = { ...tools };\n          newTools[threadToolId] = {\n            id: threadToolId,\n            icon: 'thread-icon',\n            label: 'Comment', // TODO(Zan): Use translation lookup here.\n            onSelect: () => onThreadCreate?.(),\n          };\n          return newTools;\n        },\n      }),\n      [canvas, onThreadCreate],\n    );\n\n    const components = useMemo(\n      () => ({\n        DebugPanel: null,\n        Grid: gridComponents[settings?.gridType ?? 'mesh'],\n        HelpMenu: null,\n        MenuPanel: CustomMenu,\n        NavigationPanel: null,\n        StylePanel: CustomStylePanel,\n        TopPanel: null,\n        ZoomMenu: null,\n        Toolbar: (props: any) => (\n          <DefaultToolbar {...props}>\n            <DefaultToolbarContent toolsToSplice={[{ toolId: 'thread', position: 8 }]} />\n          </DefaultToolbar>\n        ),\n      }),\n      [settings],\n    );\n\n    if (!adapter.store) {\n      return null;\n    }\n\n    return (\n      <div\n        {...composableProps(props, { classNames: 'dx-expander' })}\n        style={{ visibility: ready ? 'visible' : 'hidden' }}\n        ref={containerRef}\n      >\n        <TldrawEditor\n          // Rebind when the adapter recreates its store (e.g. an effect-churn reopen) — a stale\n          // binding draws into an orphaned store whose change listeners are gone, so saves no-op.\n          key={`${Obj.getURI(canvas)}:${adapter.store.id}`}\n          store={adapter.store}\n          hideUi={hideUi}\n          inferDarkMode\n          className='outline-hidden!'\n          maxAssetSize={1024 * 1024}\n          assetUrls={assetUrls}\n          overrides={overrides}\n          components={components}\n          onMount={setEditor}\n        />\n      </div>\n    );\n  },\n);\n\n/**\n * Fit content within the viewport and center it, zooming out for oversized content but never\n * magnifying past 100% (zoom is capped at 1).\n */\nconst zoomToFit = (editor: Editor, width: number, height: number, animate = true) => {\n  const commonBounds = editor.getCurrentPageBounds();\n  if (width && height && commonBounds?.width && commonBounds?.height) {\n    const padding = 60;\n    // Zoom out to fit oversized content; cap at 1 so small content is never zoomed in.\n    const zoom = Math.min(1, (width - padding) / commonBounds.width, (height - padding) / commonBounds.height);\n    const center = {\n      x: (width - commonBounds.width * zoom) / 2 / zoom - commonBounds.minX,\n      y: (height - commonBounds.height * zoom) / 2 / zoom - commonBounds.minY,\n      z: zoom,\n    };\n\n    editor.setCamera(center, animate ? { animation: { duration: 250 } } : undefined);\n  }\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcA,IAAa,aAAa,OAAO,WAA2B;CAC1D,MAAM,QAAQ,OAAe,YAAY,OAAO;EAC9C,OAAO,KAAK,MAAM,QAAQ,SAAS,IAAI;CACzC;CAGA,MAAM,WAAW,IAAI,eAAe,QAAQ,CAAC,SAAS,CAAC;CACvD,SAAS,OAAO,QAAQ,QAAQ;EAC9B,MAAM,MAAM,QAAkC,KAAK,SAAS,IAAI;EAChE,OAAO,QAAQ,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,UAAU;GACjD,IAAI,QAAQ,IAAI,GAAG;IACjB,MAAM,EAAE,GAAG,GAAG,UAAU;IACxB,KAAK,IAAI,KAAK,CAAC;IACf,KAAK,IAAI,KAAK,CAAC;IAEf,MAAM,EAAE,KAAK,GAAG,MAAM;IACtB,QAAQ,KAAR;KACE,KAAK,aAAa;MAChB,MAAM,OAAO;MACb,KAAK,IAAI,KAAK,CAAC;MACf,KAAK,IAAI,KAAK,CAAC;KACjB;IACF;GACF;EACF,CAAC;CACH,CAAC;AACH;;;AC1BA,IAAa,cAAc,EAAE,eAAoC;CAC/D,MAAM,UAAU,WAAW;CAC3B,MAAM,iBAAiB,YAAY;CAEnC,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;IAA2B,iBAAe;cACvD,qBAAC,qBAAD,EAAA,UAAA,CACE,oBAAC,4BAAD,CAA6B,CAAA,GAC7B,oBAAC,kBAAD;KAAkB,GAAI,QAAQ;KAAM,UAAU;IAAiB,CAAA,CAC5C,EAAA,CAAA;GAClB,CAAA;EACF,CAAA;CACF,CAAA;AAET;;;ACpBA,IAAa,mBAAmB,MAAM,EAAE,eAAoC;CAC1E,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,kBAAkB;CACjC,MAAM,qBAAqB,kBAAkB;EAC3C,IAAI,CAAC,UACH,OAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;CAEzD,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,IAAI,CAAC,QACH,OAAO;CAMT,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,oBAAoB,CAAC,YAAY,2BAA2B;EAC1E,iBAAe;EACf,gBAAgB;YAIhB,oBAAC,0BAAD,EAAkC,OAAS,CAAA;CACxC,CAAA;AAET,CAAC;;;ACED,IAAM,wBAAwB,MAAM,EAAE,oBAAqD;CACzF,MAAM,QAAQ,SAAS;CAEvB,MAAM,YAAY;EAChB,oBAAC,mBAAD,CAAiC,GAAV,QAAU;EACjC,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,mBAAD,CAAiC,GAAV,QAAU;EACjC,oBAAC,kBAAD,CAA+B,GAAT,OAAS;EAC/B,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,kBAAD,CAA+B,GAAT,OAAS;EAC/B,oBAAC,sBAAD,CAAuC,GAAb,WAAa;EACvC,oBAAC,oBAAD,CAAmC,GAAX,SAAW;EACnC,oBAAC,qBAAD,CAAqC,GAAZ,UAAY;EACrC,oBAAC,oBAAD,CAAmC,GAAX,SAAW;EACnC,oBAAC,oBAAD,CAAmC,GAAX,SAAW;EACnC,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,oBAAD,CAAmC,GAAX,SAAW;EACnC,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,kBAAD,CAA+B,GAAT,OAAS;EAC/B,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,qBAAD,CAAqC,GAAZ,UAAY;EACrC,oBAAC,sBAAD,CAAuC,GAAb,WAAa;EACvC,oBAAC,oBAAD,CAAmC,GAAX,SAAW;EACnC,oBAAC,sBAAD,CAAuC,GAAb,WAAa;EACvC,oBAAC,uBAAD,CAAyC,GAAd,YAAc;EACzC,oBAAC,iBAAD,CAA6B,GAAR,MAAQ;EAC7B,oBAAC,sBAAD,CAAuC,GAAb,WAAa;EACvC,oBAAC,kBAAD,CAA+B,GAAT,OAAS;EAC/B,oBAAC,kBAAD,CAA+B,GAAT,OAAS;CACjC;CAEA,cAAc,SAAS,WAAW;EAChC,IAAI,OAAO,YAAY,KAAK,OAAO,YAAY,UAAU,QACvD,UAAU,OACR,OAAO,UACP,GACA,oBAAC,kBAAD,EAAsC,GAAI,MAAM,OAAO,QAAgC,GAAhE,OAAO,MAAyD,CACzF;CAEJ,CAAC;CAED,OAAO,oBAAA,UAAA,EAAA,UAAG,UAAY,CAAA;AACxB,CAAC;AAED,sBAAsB,cAAc;;;AC7EpC,IAAM,eAAa;CACjB;EAAE,KAAK;EAAI,KAAK;EAAM,MAAM;CAAG;CAC/B;EAAE,KAAK;EAAM,KAAK;EAAO,MAAM;CAAG;CAClC;EAAE,KAAK;EAAM,KAAK;EAAG,MAAM;CAAE;CAC7B;EAAE,KAAK;EAAK,KAAK;EAAK,MAAM;CAAE;AAChC;AAUA,IAAa,cAAc,EAAE,GAAG,GAAG,GAAG,WAAwB;CAE5D,MAAM,SADQ,qBACC,CAAA,CAAM,KAAK;CAC1B,MAAM,KAAK,MAAM;CAEjB,OACE,qBAAC,OAAD;EAAS;EAAI,WAAU;EAAU,SAAQ;EAAM,OAAM;YAArD,CACE,oBAAC,QAAD,EAAA,UACG,aAAW,KAAK,EAAE,KAAK,KAAK,WAAW;GACtC,MAAM,IAAI,OAAO,OAAO;GACxB,MAAM,KAAK,KAAM,IAAI;GACrB,MAAM,KAAK,KAAM,IAAI;GACrB,MAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;GACxC,MAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;GACxC,MAAM,UAAU,IAAI,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI;GAC5D,MAAM,YAAY,GAAG,GAAG,QAAQ;GAChC,OACE,oBAAC,WAAD;IAAyB,IAAI;IAAW,OAAO;IAAG,QAAQ;IAAG,cAAa;cACxE,oBAAC,UAAD;KAAQ,WAAU;KAAc,IAAI;KAAK,IAAI;KAAK,GAAG;KAAY;KAAS,MAAM;KAAgB;IAAS,CAAA;GAClG,GAFK,SAEL;EAEb,CAAC,EACG,CAAA,GACL,aAAW,KAAK,EAAE,WAAW;GAC5B,MAAM,YAAY,GAAG,GAAG,QAAQ;GAChC,OAAO,oBAAC,QAAD;IAAsB,OAAM;IAAO,QAAO;IAAO,MAAM,QAAQ,UAAU;GAAK,GAAnE,SAAmE;EACvF,CAAC,CACE;;AAET;;;AC3CA,IAAM,aAAa;CACjB;EAAE,KAAK;EAAI,KAAK;EAAM,MAAM;CAAG;CAC/B;EAAE,KAAK;EAAM,KAAK;EAAO,MAAM;CAAG;CAClC;EAAE,KAAK;EAAM,KAAK;EAAG,MAAM;CAAE;CAC7B;EAAE,KAAK;EAAK,KAAK;EAAK,MAAM;CAAE;AAChC;AAEA,IAAa,YAAY,EAAE,GAAG,GAAG,GAAG,WAAwB;CAE1D,MAAM,SADQ,qBACC,CAAA,CAAM,KAAK;CAC1B,MAAM,KAAK,MAAM;CAEjB,OACE,qBAAC,OAAD;EAAS;EAAI,WAAU;EAAU,SAAQ;EAAM,OAAM;YAArD,CACE,oBAAC,QAAD;GAAU;aACP,WAAW,KAAK,EAAE,KAAK,KAAK,QAAQ,MAAM;IACzC,MAAM,IAAI,OAAO,OAAO;IACxB,MAAM,KAAK,KAAM,IAAI;IACrB,MAAM,KAAK,KAAM,IAAI;IACrB,MAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;IACxC,MAAM,MAAM,KAAK,IAAI,KAAK,IAAI,IAAK,KAAK;IACxC,MAAM,WAAW,IAAI,MAAM,SAAS,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK;IAClE,MAAM,YAAY,GAAG,GAAG,QAAQ;IAChC,OACE,qBAAC,WAAD;KAAyB,IAAI;KAAW,OAAO;KAAG,QAAQ;KAAG,cAAa;eAA1E,CACE,oBAAC,QAAD;MAAM,OAAO,EAAE,OAAO;MAAG,IAAI,MAAM;MAAG,IAAI;MAAK,IAAI,MAAM;MAAG,IAAI;MAAc;KAAU,CAAA,GACxF,oBAAC,QAAD;MAAM,OAAO,EAAE,OAAO;MAAG,IAAI;MAAK,IAAI,MAAM;MAAG,IAAI;MAAK,IAAI,MAAM;MAAY;KAAU,CAAA,CACjF;OAHK,SAGL;GAEb,CAAC;EACG,CAAA,GACL,WAAW,KAAK,EAAE,WAAW;GAC5B,MAAM,YAAY,GAAG,GAAG,QAAQ;GAChC,OAAO,oBAAC,QAAD;IAAsB,OAAM;IAAO,QAAO;IAAO,MAAM,QAAQ,UAAU;GAAK,GAAnE,SAAmE;EACvF,CAAC,CACE;;AAET;;;ACrBA,IAAM,eAAe;AAErB,IAAM,iBAA6D;CACjE,MAAM;CACN,QAAQ;AACV;AAYA,IAAa,kBAAkB,YAE3B,EACE,QACA,WAAW,OACX,aAAa,MACb,SAAS,OACT,gBAAgB,yBAChB,UACA,gBACA,GAAG,SAEL,iBACG;CACH,MAAM,UAAU,gBAAgB,MAAM;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAiB;CAG7C,gBAAgB;EACd,SAAS,QAAQ,KAAK,IAAI,QAAQ,MAAM;CAC1C,GAAG,CAAC,QAAQ,MAAM,CAAC;CAGnB,gBAAgB;EACd,IAAI,CAAC,UACH;EAGF,MAAM,UAAU,QAAQ,MAAM,QAC3B,EAAE,SAAS,EAAE,gBAAgB;GAC5B,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,QAAQ,OAAO,QAAQ,OAAO,GACnD,IAAI,OAAO,qBAAqB;IAC9B,MAAM,eAAe;IACrB,MAAM,aAAa;IACnB,IAAI,aAAa,eAAe,WAAW,YACzC,SAAS,WAAW,WAAW;GAEnC;EAEJ,GACA;GAAE,QAAQ;GAAQ,OAAO;EAAM,CACjC;EAGA,aAAa,UAAU;CACzB,GAAG,CAAC,UAAU,MAAM,CAAC;CAGrB,gBAAgB;EAEd,MAAM,eAAe,EAAE,MAAM,WAAwB;GACnD,IAAI,SAAS,aAAa,SAAS,cAGjC,iBAAiB,QAAQ,KAAK,CAAC;EAEnC;EAEA,QAAQ,GAAG,SAAS,WAAW;EAC/B,aAAa;GACX,QAAQ,IAAI,SAAS,WAAW;EAClC;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAGpB,gBAAgB;EACd,IAAI,QAAQ;GACV,OAAO,KAAK,sBAAsB,EAEhC,YAAY,KACd,CAAC;GACD,OAAO,oBAAoB;IACzB,YAAY,UAAU,aAAa,SAAS,CAAC;IAC7C,YAAY,YAAY;GAC1B,CAAC;GACD,IAAI,YAAY,QACd,OAAO,eAAe,MAAM;EAEhC;CACF,GAAG;EAAC;EAAQ;EAAU;EAAQ;CAAQ,CAAC;CAGvC,MAAM,EAAE,KAAK,WAAW,QAAQ,GAAG,WAAW,kBAAkB;CAChE,MAAM,eAAe,aAAa,CAAC,cAAc,SAAS,CAAC;CAC3D,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC,UAAU;CAC9C,gBAAgB;EACd,IAAI,CAAC,UAAU,CAAC,WAAW,UAAU,KAAA,KAAa,WAAW,KAAA,GAC3D;EAGF,MAAM,WAAW,YAAY;EAG7B,OAAO,iBAAiB,EAAE,UAAU,MAAM,CAAC;EAG3C,OAAO,UAAU;GAAE,GAAG;GAAI,GAAG;GAAI,GAAG;EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,CAAC;EACvE,OAAO,UAAU;EAEjB,SAAS,IAAI;EACb,IAAI,CAAC,YAAY;GACf,OAAO,iBAAiB,EAAY,SAAS,CAAC;GAC9C;EACF;EAEA,MAAM,aAAa;GACjB,UAAU,QAAQ,OAAO,QAAQ,KAAK;EACxC;EAEA,KAAK;EACL,OAAO,iBAAiB,EAAY,SAAS,CAAC;EAE9C,IAAI;EACJ,MAAM,iBAAiB;GACrB,aAAa,KAAK;GAClB,QAAQ,iBAAiB;IACvB,OAAO,iBAAiB,EAAE,UAAU,MAAM,CAAC;IAC3C,KAAK;IACL,OAAO,iBAAiB,EAAY,SAAS,CAAC;GAChD,GAAG,GAAG;EACR;EACA,MAAM,eAAe,WAAW,QAAQ,OAAO,aAAa,SAAS,GAAG,EAAE,OAAO,WAAW,CAAC,IAAI,KAAA;EACjG,aAAa;GACX,aAAa,KAAK;GAClB,eAAe;EACjB;CACF,GAAG;EAAC;EAAQ;EAAS;EAAO;EAAQ;EAAY;EAAU;CAAM,CAAC;CAIjE,MAAM,YAAmC,cAAc;EACrD,IAAI,CAAC,eACH;EAGF,OAAO,aACL;GAGE,OAAO,EAAE,MAAM,GAAG,cAAc,iCAAiC;GACjE,OAAO,EACL,eAAe,GAAG,cAAc,oCAClC;EACF,GACA,aAAa,EAAE,SAAS,cAAc,CAAC,CACzC;CACF,GAAG,CAAC,aAAa,CAAC;CAElB,MAAM,YAAY,eACT;EACL,UAAU,SAAiB,SAAc,cAAmB;GAC1D,GAAG;GACH,MAAM;IACJ,IAAI;IACJ,OAAO;IACP,KAAK;IACL,MAAM;IACN,gBAAgB;KACd,WAAgB,MAAM;IACxB;GACF;EACF;EACA,QAAQ,SAAiB,UAAe;GACtC,MAAM,WAAW,EAAE,GAAG,MAAM;GAC5B,SAAS,gBAAgB;IACvB,IAAI;IACJ,MAAM;IACN,OAAO;IACP,gBAAgB,iBAAiB;GACnC;GACA,OAAO;EACT;CACF,IACA,CAAC,QAAQ,cAAc,CACzB;CAEA,MAAM,aAAa,eACV;EACL,YAAY;EACZ,MAAM,eAAe,UAAU,YAAY;EAC3C,UAAU;EACV,WAAW;EACX,iBAAiB;EACjB,YAAY;EACZ,UAAU;EACV,UAAU;EACV,UAAU,UACR,oBAAC,gBAAD;GAAgB,GAAI;aAClB,oBAAC,uBAAD,EAAuB,eAAe,CAAC;IAAE,QAAQ;IAAU,UAAU;GAAE,CAAC,EAAI,CAAA;EAC9D,CAAA;CAEpB,IACA,CAAC,QAAQ,CACX;CAEA,IAAI,CAAC,QAAQ,OACX,OAAO;CAGT,OACE,oBAAC,OAAD;EACE,GAAI,gBAAgB,OAAO,EAAE,YAAY,cAAc,CAAC;EACxD,OAAO,EAAE,YAAY,QAAQ,YAAY,SAAS;EAClD,KAAK;YAEL,oBAAC,QAAD;GAIE,OAAO,QAAQ;GACP;GACR,eAAA;GACA,WAAU;GACV,cAAc,OAAO;GACV;GACA;GACC;GACZ,SAAS;EACV,GAVM,GAAG,IAAI,OAAO,MAAM,EAAE,GAAG,QAAQ,MAAM,IAU7C;CACE,CAAA;AAET,CACF;;;;;AAMA,IAAM,aAAa,QAAgB,OAAe,QAAgB,UAAU,SAAS;CACnF,MAAM,eAAe,OAAO,qBAAqB;CACjD,IAAI,SAAS,UAAU,cAAc,SAAS,cAAc,QAAQ;EAClE,MAAM,UAAU;EAEhB,MAAM,OAAO,KAAK,IAAI,IAAI,QAAQ,WAAW,aAAa,QAAQ,SAAS,WAAW,aAAa,MAAM;EACzG,MAAM,SAAS;GACb,IAAI,QAAQ,aAAa,QAAQ,QAAQ,IAAI,OAAO,aAAa;GACjE,IAAI,SAAS,aAAa,SAAS,QAAQ,IAAI,OAAO,aAAa;GACnE,GAAG;EACL;EAEA,OAAO,UAAU,QAAQ,UAAU,EAAE,WAAW,EAAE,UAAU,IAAI,EAAE,IAAI,KAAA,CAAS;CACjF;AACF"}

package/dist/lib/hooks.mjs

@@ -1,13 +1,13 @@
 import { invariant } from "@dxos/invariant";
-import { Tldraw } from "#types";
 import { createTLStore, defaultShapeUtils } from "@tldraw/tldraw";
 import { useState } from "react";
 import { useAsyncEffect } from "@dxos/react-ui";
 import { AbstractStoreAdapter, Doc, Modified } from "@dxos/echo-doc";
 import { log } from "@dxos/log";
+import { Tldraw as Tldraw$1 } from "#types";
 import { transact } from "@tldraw/state";
 //#region src/hooks/adapter.ts
-var __dxlog_file$1 = "/Users/burdon/Code/dxos/dxos/.claude/worktrees/peaceful-allen-9b542f/packages/plugins/plugin-tldraw/src/hooks/adapter.ts";
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/plugins/plugin-tldraw/src/hooks/adapter.ts";
 /**
 * Ref:
 * - https://tldraw.dev/docs/persistence#Listening-for-changes
@@ -74,7 +74,7 @@ var TLDrawStoreAdapter = class extends AbstractStoreAdapter {
 };
 //#endregion
 //#region src/hooks/useStoreAdapter.ts
-var __dxlog_file = "/Users/burdon/Code/dxos/dxos/.claude/worktrees/peaceful-allen-9b542f/packages/plugins/plugin-tldraw/src/hooks/useStoreAdapter.ts";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-tldraw/src/hooks/useStoreAdapter.ts";
 /**
 * Hook that manages the TLDraw store adapter lifecycle for a canvas object.
 * Creates a doc accessor and opens the adapter.
@@ -87,11 +87,11 @@ var useStoreAdapter = (canvas) => {
 	const [_, forceUpdate] = useState({});
 	useAsyncEffect(async (controller) => {
 		if (!canvas) return;
-		if (canvas.schema !== Tldraw.TLDRAW_SCHEMA) {
+		if (canvas.schema !== Tldraw$1.TLDRAW_SCHEMA) {
 			log.warn("invalid schema", { schema: canvas.schema }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file,
-				L: 32,
+				L: 33,
 				S: void 0
 			});
 			return;

package/dist/lib/hooks.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.mjs","names":[],"sources":["../../src/hooks/adapter.ts","../../src/hooks/useStoreAdapter.ts"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { transact } from '@tldraw/state';\nimport { type TLRecord, createTLStore, defaultShapeUtils } from '@tldraw/tldraw';\nimport { type TLStore } from '@tldraw/tlschema';\n\nimport { AbstractStoreAdapter, type Batch, Modified } from '@dxos/echo-doc';\nimport { invariant } from '@dxos/invariant';\n\n/**\n * Ref:\n * - https://tldraw.dev/docs/persistence#Listening-for-changes\n * - https://github.com/tldraw/tldraw-yjs-example/blob/main/src/useYjsStore.ts\n * - https://github.com/LiangrunDa/tldraw-with-automerge/blob/main/src/App.tsx\n */\nconst SAVE_DEBOUNCE = 250;\n\nexport class TLDrawStoreAdapter extends AbstractStoreAdapter<TLRecord> {\n  private readonly _modified = new Modified<TLRecord>();\n  private _store?: TLStore;\n  private _saveTimeout?: ReturnType<typeof setTimeout>;\n\n  get store() {\n    return this._store;\n  }\n\n  override getElements(): TLRecord[] {\n    invariant(this._store);\n    return this._store.allRecords();\n  }\n\n  protected override onUpdate({ added = [], updated = [], deleted = [] }: Batch<TLRecord>): void {\n    // Replace the store records with the automerge doc records.\n    transact(() => {\n      invariant(this._store);\n      const elements = [...added, ...updated];\n      this._store.remove(deleted);\n      this._store.put(elements);\n    });\n  }\n\n  protected override onOpen(): () => void {\n    this._store = createTLStore({ shapeUtils: defaultShapeUtils });\n\n    // List for changes to the store.\n    // TODO(burdon): Upload images to WNFS.\n    const subscription = this._store.listen(\n      ({ changes: { added, updated, removed } }) => {\n        Object.values(added).forEach((record) => this._modified.added.set(record.id, record));\n        Object.values(updated).forEach(([_, record]) => this._modified.updated.set(record.id, record));\n        Object.values(removed).forEach((record) => this._modified.deleted.add(record.id));\n        // Debounced auto-save: tldraw batches listener notifications, so a save driven by\n        // pointer events can run before the final gesture is recorded and lose the last stroke.\n        clearTimeout(this._saveTimeout);\n        this._saveTimeout = setTimeout(() => this.save(), SAVE_DEBOUNCE);\n      },\n      // Only listen to local document changes.\n      {\n        scope: 'document',\n        source: 'user',\n      },\n    );\n\n    return () => {\n      clearTimeout(this._saveTimeout);\n      subscription();\n    };\n  }\n\n  protected override onClose(): void {\n    this._store = undefined;\n  }\n\n  save(): void {\n    if (!this.isOpen) {\n      return;\n    }\n    this.updateDatabase(this._modified.batch());\n    this._modified.clear();\n  }\n}\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { useState } from 'react';\n\nimport { Doc } from '@dxos/echo-doc';\nimport { log } from '@dxos/log';\nimport { useAsyncEffect } from '@dxos/react-ui';\n\nimport { Tldraw } from '#types';\n\nimport { TLDrawStoreAdapter } from './adapter';\n\n/**\n * Hook that manages the TLDraw store adapter lifecycle for a canvas object.\n * Creates a doc accessor and opens the adapter.\n *\n * @param canvas - Optional canvas whose content will be synced.\n * @returns The TLDrawStoreAdapter instance managing the tldraw store.\n */\nexport const useStoreAdapter = (canvas?: Tldraw.Canvas) => {\n  const [adapter] = useState(new TLDrawStoreAdapter());\n  const [_, forceUpdate] = useState({});\n  useAsyncEffect(\n    async (controller) => {\n      if (!canvas) {\n        return;\n      }\n\n      if (canvas.schema !== Tldraw.TLDRAW_SCHEMA) {\n        log.warn('invalid schema', { schema: canvas.schema });\n        return;\n      }\n\n      const accessor = Doc.createAccessor(canvas, ['content']);\n      await adapter.open(accessor);\n      if (controller.signal.aborted) {\n        void adapter.close();\n        return;\n      }\n\n      forceUpdate({});\n\n      return () => {\n        // Flush any gesture still pending from the deferred pointer_up save.\n        adapter.save();\n        void adapter.close();\n      };\n    },\n    [canvas],\n  );\n\n  return adapter;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAM,gBAAgB;AAEtB,IAAa,qBAAb,cAAwC,qBAA+B;CACrE,YAA6B,IAAI,SAAmB;CACpD;CACA;CAEA,IAAI,QAAQ;EACV,OAAO,KAAK;CACd;CAEA,cAAmC;EACjC,UAAU,KAAK,QAAK,KAAA,GAAA;GAAA,YAAA;GAAA,GAAA;GAAA,GAAA;GAAA,GAAA;GAAA,GAAA,CAAA,eAAA,EAAA;EAAA,CAAC;EACrB,OAAO,KAAK,OAAO,WAAW;CAChC;CAEA,SAA4B,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,GAAG,UAAU,CAAC,KAA4B;EAE7F,eAAe;GACb,UAAU,KAAK,QAAK,KAAA,GAAA;IAAA,YAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA,CAAA,eAAA,EAAA;GAAA,CAAC;GACrB,MAAM,WAAW,CAAC,GAAG,OAAO,GAAG,OAAO;GACtC,KAAK,OAAO,OAAO,OAAO;GAC1B,KAAK,OAAO,IAAI,QAAQ;EAC1B,CAAC;CACH;CAEA,SAAwC;EACtC,KAAK,SAAS,cAAc,EAAE,YAAY,kBAAkB,CAAC;EAI7D,MAAM,eAAe,KAAK,OAAO,QAC9B,EAAE,SAAS,EAAE,OAAO,SAAS,gBAAgB;GAC5C,OAAO,OAAO,KAAK,CAAC,CAAC,SAAS,WAAW,KAAK,UAAU,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC;GACpF,OAAO,OAAO,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,YAAY,KAAK,UAAU,QAAQ,IAAI,OAAO,IAAI,MAAM,CAAC;GAC7F,OAAO,OAAO,OAAO,CAAC,CAAC,SAAS,WAAW,KAAK,UAAU,QAAQ,IAAI,OAAO,EAAE,CAAC;GAGhF,aAAa,KAAK,YAAY;GAC9B,KAAK,eAAe,iBAAiB,KAAK,KAAK,GAAG,aAAa;EACjE,GAEA;GACE,OAAO;GACP,QAAQ;EACV,CACF;EAEA,aAAa;GACX,aAAa,KAAK,YAAY;GAC9B,aAAa;EACf;CACF;CAEA,UAAmC;EACjC,KAAK,SAAS,KAAA;CAChB;CAEA,OAAa;EACX,IAAI,CAAC,KAAK,QACR;EAEF,KAAK,eAAe,KAAK,UAAU,MAAM,CAAC;EAC1C,KAAK,UAAU,MAAM;CACvB;AACF;;;;;;;;;;;AC7DA,IAAa,mBAAmB,WAA2B;CACzD,MAAM,CAAC,WAAW,SAAS,IAAI,mBAAmB,CAAC;CACnD,MAAM,CAAC,GAAG,eAAe,SAAS,CAAC,CAAC;CACpC,eACE,OAAO,eAAe;EACpB,IAAI,CAAC,QACH;EAGF,IAAI,OAAO,WAAW,OAAO,eAAe;GAC1C,IAAI,KAAK,kBAAkB,EAAE,QAAQ,OAAO,OAAO,GAAA;IAAA,YAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA,KAAA;GAAA,CAAC;GACpD;EACF;EAEA,MAAM,WAAW,IAAI,eAAe,QAAQ,CAAC,SAAS,CAAC;EACvD,MAAM,QAAQ,KAAK,QAAQ;EAC3B,IAAI,WAAW,OAAO,SAAS;GAC7B,QAAa,MAAM;GACnB;EACF;EAEA,YAAY,CAAC,CAAC;EAEd,aAAa;GAEX,QAAQ,KAAK;GACb,QAAa,MAAM;EACrB;CACF,GACA,CAAC,MAAM,CACT;CAEA,OAAO;AACT"}
+{"version":3,"file":"hooks.mjs","names":[],"sources":["../../src/hooks/adapter.ts","../../src/hooks/useStoreAdapter.ts"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { transact } from '@tldraw/state';\nimport { type TLRecord, createTLStore, defaultShapeUtils } from '@tldraw/tldraw';\nimport { type TLStore } from '@tldraw/tlschema';\n\nimport { AbstractStoreAdapter, type Batch, Modified } from '@dxos/echo-doc';\nimport { invariant } from '@dxos/invariant';\n\n/**\n * Ref:\n * - https://tldraw.dev/docs/persistence#Listening-for-changes\n * - https://github.com/tldraw/tldraw-yjs-example/blob/main/src/useYjsStore.ts\n * - https://github.com/LiangrunDa/tldraw-with-automerge/blob/main/src/App.tsx\n */\nconst SAVE_DEBOUNCE = 250;\n\nexport class TLDrawStoreAdapter extends AbstractStoreAdapter<TLRecord> {\n  private readonly _modified = new Modified<TLRecord>();\n  private _store?: TLStore;\n  private _saveTimeout?: ReturnType<typeof setTimeout>;\n\n  get store() {\n    return this._store;\n  }\n\n  override getElements(): TLRecord[] {\n    invariant(this._store);\n    return this._store.allRecords();\n  }\n\n  protected override onUpdate({ added = [], updated = [], deleted = [] }: Batch<TLRecord>): void {\n    // Replace the store records with the automerge doc records.\n    transact(() => {\n      invariant(this._store);\n      const elements = [...added, ...updated];\n      this._store.remove(deleted);\n      this._store.put(elements);\n    });\n  }\n\n  protected override onOpen(): () => void {\n    this._store = createTLStore({ shapeUtils: defaultShapeUtils });\n\n    // List for changes to the store.\n    // TODO(burdon): Upload images to WNFS.\n    const subscription = this._store.listen(\n      ({ changes: { added, updated, removed } }) => {\n        Object.values(added).forEach((record) => this._modified.added.set(record.id, record));\n        Object.values(updated).forEach(([_, record]) => this._modified.updated.set(record.id, record));\n        Object.values(removed).forEach((record) => this._modified.deleted.add(record.id));\n        // Debounced auto-save: tldraw batches listener notifications, so a save driven by\n        // pointer events can run before the final gesture is recorded and lose the last stroke.\n        clearTimeout(this._saveTimeout);\n        this._saveTimeout = setTimeout(() => this.save(), SAVE_DEBOUNCE);\n      },\n      // Only listen to local document changes.\n      {\n        scope: 'document',\n        source: 'user',\n      },\n    );\n\n    return () => {\n      clearTimeout(this._saveTimeout);\n      subscription();\n    };\n  }\n\n  protected override onClose(): void {\n    this._store = undefined;\n  }\n\n  save(): void {\n    if (!this.isOpen) {\n      return;\n    }\n    this.updateDatabase(this._modified.batch());\n    this._modified.clear();\n  }\n}\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { useState } from 'react';\n\nimport { Doc } from '@dxos/echo-doc';\nimport { log } from '@dxos/log';\nimport { Drawing } from '@dxos/plugin-illustrator/types';\nimport { useAsyncEffect } from '@dxos/react-ui';\n\nimport { Tldraw } from '#types';\n\nimport { TLDrawStoreAdapter } from './adapter';\n\n/**\n * Hook that manages the TLDraw store adapter lifecycle for a canvas object.\n * Creates a doc accessor and opens the adapter.\n *\n * @param canvas - Optional canvas whose content will be synced.\n * @returns The TLDrawStoreAdapter instance managing the tldraw store.\n */\nexport const useStoreAdapter = (canvas?: Drawing.Canvas) => {\n  const [adapter] = useState(new TLDrawStoreAdapter());\n  const [_, forceUpdate] = useState({});\n  useAsyncEffect(\n    async (controller) => {\n      if (!canvas) {\n        return;\n      }\n\n      if (canvas.schema !== Tldraw.TLDRAW_SCHEMA) {\n        log.warn('invalid schema', { schema: canvas.schema });\n        return;\n      }\n\n      const accessor = Doc.createAccessor(canvas, ['content']);\n      await adapter.open(accessor);\n      if (controller.signal.aborted) {\n        void adapter.close();\n        return;\n      }\n\n      forceUpdate({});\n\n      return () => {\n        // Flush any gesture still pending from the deferred pointer_up save.\n        adapter.save();\n        void adapter.close();\n      };\n    },\n    [canvas],\n  );\n\n  return adapter;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAM,gBAAgB;AAEtB,IAAa,qBAAb,cAAwC,qBAA+B;CACrE,YAA6B,IAAI,SAAmB;CACpD;CACA;CAEA,IAAI,QAAQ;EACV,OAAO,KAAK;CACd;CAEA,cAAmC;EACjC,UAAU,KAAK,QAAK,KAAA,GAAA;GAAA,YAAA;GAAA,GAAA;GAAA,GAAA;GAAA,GAAA;GAAA,GAAA,CAAA,eAAA,EAAA;EAAA,CAAC;EACrB,OAAO,KAAK,OAAO,WAAW;CAChC;CAEA,SAA4B,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,GAAG,UAAU,CAAC,KAA4B;EAE7F,eAAe;GACb,UAAU,KAAK,QAAK,KAAA,GAAA;IAAA,YAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA,CAAA,eAAA,EAAA;GAAA,CAAC;GACrB,MAAM,WAAW,CAAC,GAAG,OAAO,GAAG,OAAO;GACtC,KAAK,OAAO,OAAO,OAAO;GAC1B,KAAK,OAAO,IAAI,QAAQ;EAC1B,CAAC;CACH;CAEA,SAAwC;EACtC,KAAK,SAAS,cAAc,EAAE,YAAY,kBAAkB,CAAC;EAI7D,MAAM,eAAe,KAAK,OAAO,QAC9B,EAAE,SAAS,EAAE,OAAO,SAAS,gBAAgB;GAC5C,OAAO,OAAO,KAAK,CAAC,CAAC,SAAS,WAAW,KAAK,UAAU,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC;GACpF,OAAO,OAAO,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,YAAY,KAAK,UAAU,QAAQ,IAAI,OAAO,IAAI,MAAM,CAAC;GAC7F,OAAO,OAAO,OAAO,CAAC,CAAC,SAAS,WAAW,KAAK,UAAU,QAAQ,IAAI,OAAO,EAAE,CAAC;GAGhF,aAAa,KAAK,YAAY;GAC9B,KAAK,eAAe,iBAAiB,KAAK,KAAK,GAAG,aAAa;EACjE,GAEA;GACE,OAAO;GACP,QAAQ;EACV,CACF;EAEA,aAAa;GACX,aAAa,KAAK,YAAY;GAC9B,aAAa;EACf;CACF;CAEA,UAAmC;EACjC,KAAK,SAAS,KAAA;CAChB;CAEA,OAAa;EACX,IAAI,CAAC,KAAK,QACR;EAEF,KAAK,eAAe,KAAK,UAAU,MAAM,CAAC;EAC1C,KAAK,UAAU,MAAM;CACvB;AACF;;;;;;;;;;;AC5DA,IAAa,mBAAmB,WAA4B;CAC1D,MAAM,CAAC,WAAW,SAAS,IAAI,mBAAmB,CAAC;CACnD,MAAM,CAAC,GAAG,eAAe,SAAS,CAAC,CAAC;CACpC,eACE,OAAO,eAAe;EACpB,IAAI,CAAC,QACH;EAGF,IAAI,OAAO,WAAW,SAAO,eAAe;GAC1C,IAAI,KAAK,kBAAkB,EAAE,QAAQ,OAAO,OAAO,GAAA;IAAA,YAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA,KAAA;GAAA,CAAC;GACpD;EACF;EAEA,MAAM,WAAW,IAAI,eAAe,QAAQ,CAAC,SAAS,CAAC;EACvD,MAAM,QAAQ,KAAK,QAAQ;EAC3B,IAAI,WAAW,OAAO,SAAS;GAC7B,QAAa,MAAM;GACnB;EACF;EAEA,YAAY,CAAC,CAAC;EAEd,aAAa;GAEX,QAAQ,KAAK;GACb,QAAa,MAAM;EACrB;CACF,GACA,CAAC,MAAM,CACT;CAEA,OAAO;AACT"}

package/dist/lib/index.mjs

@@ -1,4 +1,4 @@
-import { a as Settings_exports, r as Tldraw_exports, t as TldrawCapabilities_exports } from "./chunk-types.mjs";
+import { i as Settings_exports, r as Tldraw_exports, t as TldrawCapabilities_exports } from "./chunk-types.mjs";
 import { t as meta } from "./chunk-meta.mjs";
 import { t as model_exports } from "./model.mjs";
 export { Settings_exports as Settings, Tldraw_exports as Tldraw, TldrawCapabilities_exports as TldrawCapabilities, model_exports as TldrawModel, meta };