@dxos/plugin-tldraw 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/PLUGIN.mdl

@@ -15,9 +15,10 @@ Each extension is defined in the Appendix or resolved via its URI.
 |-------------|--------------------------------|
 | `type`      | `org.dxos.mdl.type@1.0`        |
 | `feat`      | `org.dxos.mdl.feat@1.0`        |
-| `test`      | `org.dxos.mdl.test@1.0`        |
+| `scenario`  | `org.dxos.mdl.scenario@1.0`    |
 | `component` | `org.dxos.mdl.component@1.0`   |
-| `op`        | `org.dxos.mdl.op@1.0`          |
+| `op`        | `org.dxos.mdl.op@1.1`          |
+| `test`      | `org.dxos.mdl.test@1.0`        |
 
 ## Types
 
@@ -116,38 +117,55 @@ component SketchSettings
 
 ## Operations
 
+> **Architecture has moved since this section was written.** `plugin-tldraw` no longer owns a
+> `Sketch`/`Canvas` type or a `createSketch`/`readSketch`/`editSketch` operation — there is no
+> `operations/` directory and no `Sketch` class in `src/` at all. Tldraw is now a **render/create
+> variant** contributed to `plugin-illustrator`'s `Drawing` type
+> (`src/capabilities/drawing-variant.ts`, `IllustratorCapabilities.VariantProvider`, id
+> `tldraw.com/2`) — `TldrawArticle`/`TldrawCard` render a `Drawing.Canvas` whose `schema` is
+> `tldraw.com/2`, and the Scene DSL create/read/edit operations documented below actually live in
+> `@dxos/plugin-illustrator` (`org.dxos.operation.illustrator.{create,read,edit}`), invoked with
+> `variant: 'tldraw.com/2'` to select this plugin's renderer. The type/component sections above
+> (`Canvas`, `Sketch`, `Scene`, `WorldObject`, `Command`) and F-7/F-8 below describe the DSL
+> correctly in spirit but attribute it to the wrong plugin; QA-1/QA-2 below invoke the real keys.
+
 ```mdl
 op createSketch
-  desc: Creates a new Sketch with an associated Canvas and adds it to the target space or collection.
+  key: org.dxos.operation.illustrator.create
+  desc: |
+    Owned by plugin-illustrator, not this plugin (see note above). Creates a Drawing with an
+    associated Canvas and adds it to the target space or collection; `variant: 'tldraw.com/2'`
+    selects the tldraw renderer instead of another registered DrawingVariant.
   input:
     name?: string
-    schema?: string              # tldraw schema version (default: tldraw.com/2)
-    content?: Map<string, any>   # optional initial tldraw store snapshot
-  output: Sketch
+    variant?: string              # canvas typename; here 'tldraw.com/2' — defaults to the first registered variant
+  output: { object: Drawing }
   effects: [echo:write]
 ```
 
 ```mdl
 op readSketch
+  key: org.dxos.operation.illustrator.read
   desc: |
-    Returns the derived Scene (world objects with object-local coordinates) read
-    from the live canvas records, plus a count of unmanaged (hand-drawn) shapes.
-    Origins derive from bounding boxes, so the scene stays coherent after users
-    drag shapes. The agent calls this before editing an existing sketch.
+    Owned by plugin-illustrator (see note above). Returns the derived Scene (world objects with
+    object-local coordinates) read from the live canvas records, plus a count of unmanaged
+    (hand-drawn) shapes. Origins derive from bounding boxes, so the scene stays coherent after
+    users drag shapes. The agent calls this before editing an existing sketch.
   input:
-    sketch: Ref<Sketch>
+    drawing: Ref<Drawing>
   output: { scene: Scene, unmanaged: number }
   requires: [Database]
 ```
 
 ```mdl
 op editSketch
+  key: org.dxos.operation.illustrator.edit
   desc: |
-    Applies scene commands atomically (one Obj.update): upsert/move/remove world
-    objects or individual elements by id. Returns the resulting scene so the
-    agent can maintain its mental model across turns.
+    Owned by plugin-illustrator (see note above). Applies scene commands atomically (one
+    Obj.update): upsert/move/remove world objects or individual elements by id. Returns the
+    resulting scene so the agent can maintain its mental model across turns.
   input:
-    sketch: Ref<Sketch>
+    drawing: Ref<Drawing>
     commands: Command[]
   output: { scene: Scene, unmanaged: number, upserted: string[], removed: number }
   effects: [echo:write]
@@ -266,7 +284,7 @@ feat F-8: Scene DSL and Agent Skill
 ## Acceptance
 
 ```mdl
-test T-1: Create and open sketch
+scenario T-1: Create and open sketch
   given: a Composer space is active
   when: op:createSketch runs with name "My Diagram"
   then:
@@ -276,7 +294,7 @@ test T-1: Create and open sketch
 ```
 
 ```mdl
-test T-2: Drawing persists across reload
+scenario T-2: Drawing persists across reload
   given: a Sketch is open and the user draws a freehand stroke
   when: the page is reloaded and the Sketch is reopened
   then:
@@ -285,7 +303,7 @@ test T-2: Drawing persists across reload
 ```
 
 ```mdl
-test T-3: Collaborative edit
+scenario T-3: Collaborative edit
   given: two peers have the same Sketch open
   when: peer A draws a rectangle
   then:
@@ -294,7 +312,7 @@ test T-3: Collaborative edit
 ```
 
 ```mdl
-test T-4: Read-only slide role
+scenario T-4: Read-only slide role
   given: a Sketch is rendered in role slide
   then:
     - tldraw toolbar is not shown
@@ -303,7 +321,7 @@ test T-4: Read-only slide role
 ```
 
 ```mdl
-test T-5: Grid toggle
+scenario T-5: Grid toggle
   given: SketchSettings panel is open
   when: user enables the grid and selects "dotted"
   then:
@@ -313,7 +331,7 @@ test T-5: Grid toggle
 ```
 
 ```mdl
-test T-6: Attention-aware toolbar
+scenario T-6: Attention-aware toolbar
   given: a Sketch is open in article role alongside other articles
   when: user clicks on the sketch to give it attention
   then: tldraw toolbar becomes visible
@@ -322,7 +340,7 @@ test T-6: Attention-aware toolbar
 ```
 
 ```mdl
-test T-7: Scene DSL round-trip
+scenario T-7: Scene DSL round-trip
   given: an empty Sketch
   when: editSketch upserts a "face" object (head/eyes/smile), then upserts a "hat" object and
     replaces only the "smile" element, then removes the "hat"
@@ -334,7 +352,7 @@ test T-7: Scene DSL round-trip
 ```
 
 ```mdl
-test T-8: Conversational drawing (live AI)
+scenario T-8: Conversational drawing (live AI)
   given: the stories-assistant Sketch storybook (config.remote) with the sketch skill bound
   when: the user prompts "Draw a smiley face", then "Add a hat"
   then:
@@ -347,6 +365,107 @@ test T-8: Conversational drawing (live AI)
 
 ---
 
+## QA
+
+Executable tests. Each step carries a human instruction (`do`) and, where the step maps to an
+invocable operation, an agent binding (`invoke`). Report failures by test and step number.
+Tldraw is enabled by default in every environment (`plugin-defs.tsx` `getDefaults`).
+
+```mdl
+test QA-1: Create a tldraw sketch and draw on it
+  desc: The core whiteboard round-trip — create a Drawing bound to the tldraw variant, draw, reload.
+  actors: both
+  covers: [F-1.1, F-1.2, F-2.1, F-2.2, T-1, T-2]
+  status: unverified
+  given:
+    - an identity exists
+    - space: a space is open
+    - collection: a collection in that space, to create into
+    - no Drawing named "QA Sketch" exists — ABORT rather than deleting one this test did not create
+  steps:
+    - name: Create the sketch
+      do: In the navtree, click + on a collection and choose Sketch (tldraw). Name it "QA Sketch".
+      invoke: [op:createSketch] { name: "QA Sketch", variant: "tldraw.com/2" }
+      capture: created
+      expect: a Drawing named "QA Sketch" opens in TldrawArticle with an empty canvas
+      assert: return !!$created.object
+    - name: Place it in the collection
+      do: (no separate gesture — the navtree create action places it)
+      invoke: org.dxos.operation.space.addObject { object: $created.object, target: $given.collection }
+      expect: "QA Sketch" appears as a row under the collection
+    - name: Draw a shape
+      do: With the sketch open and focused (attention), select the rectangle tool and draw a rectangle on the canvas.
+      expect: the rectangle appears on the canvas
+      note: |
+        NO `invoke` — freehand drawing is a pointer gesture inside the tldraw canvas, with no
+        operation behind it; the DSL ops (`op:editSketch`) address semantic world objects, not
+        raw hand-drawn shapes. This step is human-only.
+  after:
+    - name: Delete the sketch
+      do: Right-click "QA Sketch" in the navtree and choose Delete.
+      invoke: org.dxos.operation.space.removeObjects { objects: [$created.object], target: $given.collection }
+      expect: the row leaves the navtree and its plank closes if it was open
+```
+
+```mdl
+test QA-2: Scene DSL round-trip — draw a face, then add a hat without redrawing it
+  desc: |
+    The agent-facing DSL path (F-8 / T-7): create, read, and edit a scene addressed by semantic
+    object ids, verifying an edit to one world object leaves siblings untouched.
+  actors: agent
+  covers: [F-7.1, F-7.2, F-8.2, F-8.3, T-7]
+  status: unverified
+  given:
+    - an identity exists
+    - space: a space is open
+    - collection: a collection in that space, to create into
+    - no Drawing named "QA Face" exists — ABORT rather than deleting one this test did not create
+  steps:
+    - name: Create the sketch
+      do: (agent-only step — DSL editing has no human equivalent gesture; a human would draw freehand instead)
+      invoke: [op:createSketch] { name: "QA Face", variant: "tldraw.com/2" }
+      capture: created
+      expect: an empty Drawing named "QA Face" is created
+      assert: return !!$created.object
+    - name: Place it in the collection
+      do: (no separate gesture)
+      invoke: org.dxos.operation.space.addObject { object: $created.object, target: $given.collection }
+      expect: "QA Face" appears as a row under the collection
+    - name: Draw a face
+      do: (no human gesture — this is the DSL path)
+      invoke: |
+        org.dxos.operation.illustrator.edit {
+          drawing: $created.object,
+          commands: [{ kind: "upsert-object", id: "face", elements: [
+            { id: "head", type: "circle" },
+            { id: "smile", type: "arc" }
+          ] }]
+        }
+      capture: withFace
+      expect: the canvas renders a circle ("head") and an arc ("smile"); reading the scene returns
+        a "face" object with both element ids
+      assert: return $result.upserted.includes('face')
+    - name: Add a hat without touching the face
+      do: (no human gesture — this is the DSL path)
+      invoke: |
+        org.dxos.operation.illustrator.edit {
+          drawing: $created.object,
+          commands: [{ kind: "upsert-object", id: "hat", elements: [{ id: "brim", type: "triangle" }] }]
+        }
+      expect: the canvas now also renders the hat; the face's "head" and "smile" records are
+        byte-identical to the previous step's — the edit touched only the "hat" object
+      assert: return $result.upserted.includes('hat') && !$result.upserted.includes('face')
+      note: |
+        This is the mental-model regression T-8 describes for live AI conversation — asserting on
+        `upserted` (which object ids the edit actually touched) is the falsifiable form of "the
+        face was not redrawn," per Rule 5.
+  after:
+    - name: Delete the sketch
+      do: Right-click "QA Face" in the navtree and choose Delete.
+      invoke: org.dxos.operation.space.removeObjects { objects: [$created.object], target: $given.collection }
+      expect: the row leaves the navtree and its plank closes if it was open
+```
+
 ## Appendix: Extension Definitions
 
 ```mdl
@@ -371,8 +490,8 @@ ext feat
 ```
 
 ```mdl
-ext test
-  uri: org.dxos.mdl.test@1.0
+ext scenario
+  uri: org.dxos.mdl.scenario@1.0
   desc: An acceptance scenario expressed as given / when / then steps.
   fields:
     given?: Step | Step[]

package/dist/lib/TldrawCapabilities.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TldrawCapabilities.mjs","names":[],"sources":["../../src/types/TldrawCapabilities.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\n// @import-as-namespace\n\nimport type * as Atom from 'effect/unstable/reactivity/Atom';\n\nimport * as Capability from '@dxos/app-framework/Capability';\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.makeSingleton<Atom.Writable<import('./Settings').Settings>>()(\n  `${meta.profile.key}.capability.settings`,\n);\n"],"mappings":";;;;;AAcA,IAAa,WAAW,WAAW,cAA4D,CAAC,CAC9F,GAAG,KAAK,QAAQ,IAAI,qBACtB"}
+{"version":3,"file":"TldrawCapabilities.mjs","names":[],"sources":["../../src/types/TldrawCapabilities.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\n// @import-as-namespace\n\nimport type * as Atom from 'effect/reactivity/Atom';\n\nimport * as Capability from '@dxos/app-framework/Capability';\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.makeSingleton<Atom.Writable<import('./Settings.ts').Settings>>()(\n  `${meta.profile.key}.capability.settings`,\n);\n"],"mappings":";;;;;AAcA,IAAa,WAAW,WAAW,cAA+D,CAAC,CACjG,GAAG,KAAK,QAAQ,IAAI,qBACtB"}

package/dist/lib/assets/{plugin-tldraw-BDrn_mrV.css → plugin-tldraw-D5Xn3em_.css}

@@ -21,4 +21,15 @@
     }
   }
 }
+
+/* Maps the app's surfaces onto tldraw's own variables. */
+.tl-background {
+  --color-background: var(--color-base-surface);
+}
+.tl-container.tl-theme__light,
+.tl-container.tl-theme__dark {
+  --color-selected: var(--color-accent-bg);
+  --color-panel: var(--color-modal-surface);
+  --color-panel-contrast: var(--color-separator);
+}
 /*$vite$:1*/

package/dist/lib/capabilities.browser.mjs

@@ -0,0 +1,30 @@
+import { t as PLUGIN_default } from "./chunk-PLUGIN.mjs";
+import * as ActivationEvents from "@dxos/app-framework/ActivationEvents";
+import * as AppCapability from "@dxos/app-toolkit/AppCapability";
+import { translations } from "#translations";
+import { TldrawCapabilities } from "#types";
+import * as Capability from "@dxos/app-framework/Capability";
+import * as IllustratorCapabilities from "@dxos/plugin-illustrator/IllustratorCapabilities";
+import * as IllustratorEvents from "@dxos/plugin-illustrator/IllustratorEvents";
+import { meta } from "#meta";
+//#region src/capabilities/gen/browser.ts
+var DrawingVariant = Capability.lazyModule("drawing-variant", {
+	provides: [IllustratorCapabilities.VariantProvider],
+	activatesOn: IllustratorEvents.Start,
+	environments: ["browser", "tauri"]
+}, () => import("./chunk-drawing-variant.mjs"));
+var PluginAsset = AppCapability.pluginAsset({
+	pluginId: meta.profile.key,
+	path: "PLUGIN.mdl",
+	content: PLUGIN_default,
+	mimeType: "application/x-mdl"
+});
+var TldrawSettings = AppCapability.settings(() => import("./chunk-settings.mjs"), {
+	activatesOn: ActivationEvents.Idle,
+	provides: [TldrawCapabilities.Settings]
+});
+var Translations = AppCapability.translations(translations);
+//#endregion
+export { DrawingVariant, PluginAsset, TldrawSettings, Translations };
+
+//# sourceMappingURL=capabilities.browser.mjs.map

package/dist/lib/capabilities.browser.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"capabilities.browser.mjs","names":[],"sources":["../../src/capabilities/gen/browser.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'browser' condition.\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as IllustratorCapabilities from '@dxos/plugin-illustrator/IllustratorCapabilities';\nimport * as IllustratorEvents from '@dxos/plugin-illustrator/IllustratorEvents';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\nimport pluginSpec from '../../../PLUGIN.mdl?raw';\n\n// Browser-only: the variant supplies the React article/card components that render a drawing.\nexport const DrawingVariant = Capability.lazyModule(\n  'drawing-variant',\n  {\n    provides: [IllustratorCapabilities.VariantProvider],\n    activatesOn: IllustratorEvents.Start,\n    environments: ['browser', 'tauri'],\n  },\n  () => import('../drawing-variant.ts'),\n);\n\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\n\nexport const TldrawSettings = AppCapability.settings(() => import('../settings.ts'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\n\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,iBAAiB,WAAW,WACvC,mBACA;CACE,UAAU,CAAC,wBAAwB,eAAe;CAClD,aAAa,kBAAkB;CAC/B,cAAc,CAAC,WAAW,OAAO;AACnC,SACM,OAAO,8BACf;AAEA,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AAED,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAmB;CACnF,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AAED,IAAa,eAAe,cAAc,aAAa,YAAY"}

package/dist/lib/capabilities.mjs

@@ -1,3 +1,4 @@
+import { t as PLUGIN_default } from "./chunk-PLUGIN.mjs";
 import * as ActivationEvents from "@dxos/app-framework/ActivationEvents";
 import * as AppCapability from "@dxos/app-toolkit/AppCapability";
 import { translations } from "#translations";
@@ -6,14 +7,11 @@ import * as Capability from "@dxos/app-framework/Capability";
 import * as IllustratorCapabilities from "@dxos/plugin-illustrator/IllustratorCapabilities";
 import * as IllustratorEvents from "@dxos/plugin-illustrator/IllustratorEvents";
 import { meta } from "#meta";
-//#region PLUGIN.mdl?raw
-var PLUGIN_default = "---\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";
-//#endregion
 //#region src/capabilities/index.ts
 var DrawingVariant = Capability.lazyModule("drawing-variant", {
 	provides: [IllustratorCapabilities.VariantProvider],
 	activatesOn: IllustratorEvents.Start,
-	environments: []
+	environments: ["browser", "tauri"]
 }, () => import("./chunk-drawing-variant.mjs"));
 var PluginAsset = AppCapability.pluginAsset({
 	pluginId: meta.profile.key,

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 * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as IllustratorCapabilities from '@dxos/plugin-illustrator/IllustratorCapabilities';\nimport * as IllustratorEvents from '@dxos/plugin-illustrator/IllustratorEvents';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../../PLUGIN.mdl?raw';\n\n// Browser-only: the variant supplies the React article/card components that render a drawing.\nexport const DrawingVariant = Capability.lazyModule(\n  'drawing-variant',\n  { provides: [IllustratorCapabilities.VariantProvider], activatesOn: IllustratorEvents.Start, environments: [] },\n  () => import('./drawing-variant'),\n);\n\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\nexport const TldrawSettings = AppCapability.settings(() => import('./settings'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,iBAAiB,WAAW,WACvC,mBACA;CAAE,UAAU,CAAC,wBAAwB,eAAe;CAAG,aAAa,kBAAkB;CAAO,cAAc,CAAC;AAAE,SACxG,OAAO,8BACf;AAEA,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AACD,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAe;CAC/E,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AACD,IAAa,eAAe,cAAc,aAAa,YAAY"}
+{"version":3,"file":"capabilities.mjs","names":[],"sources":["../../src/capabilities/index.ts"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as IllustratorCapabilities from '@dxos/plugin-illustrator/IllustratorCapabilities';\nimport * as IllustratorEvents from '@dxos/plugin-illustrator/IllustratorEvents';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\n// eslint-disable-next-line import/no-relative-packages\nimport pluginSpec from '../../PLUGIN.mdl?raw';\n\n// Browser-only: the variant supplies the React article/card components that render a drawing.\nexport const DrawingVariant = Capability.lazyModule(\n  'drawing-variant',\n  {\n    provides: [IllustratorCapabilities.VariantProvider],\n    activatesOn: IllustratorEvents.Start,\n    environments: ['browser', 'tauri'],\n  },\n  () => import('./drawing-variant.ts'),\n);\n\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\nexport const TldrawSettings = AppCapability.settings(() => import('./settings.ts'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;;;;;AAkBA,IAAa,iBAAiB,WAAW,WACvC,mBACA;CACE,UAAU,CAAC,wBAAwB,eAAe;CAClD,aAAa,kBAAkB;CAC/B,cAAc,CAAC,WAAW,OAAO;AACnC,SACM,OAAO,8BACf;AAEA,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AACD,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAkB;CAClF,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AACD,IAAa,eAAe,cAAc,aAAa,YAAY"}

package/dist/lib/capabilities.node.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.node.mjs","names":[],"sources":["../../src/capabilities/gen/node.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'node' condition.\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\n\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\nexport const TldrawSettings = AppCapability.settings(() => import('../settings'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const DrawingVariant = undefined;\nexport const PluginAsset = undefined;\n"],"mappings":";;;;;AAYA,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAgB;CAChF,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AAED,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,iBAAiB,KAAA;AAC9B,IAAa,cAAc,KAAA"}
+{"version":3,"file":"capabilities.node.mjs","names":[],"sources":["../../src/capabilities/gen/node.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'node' condition.\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\n\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\nexport const TldrawSettings = AppCapability.settings(() => import('../settings.ts'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const DrawingVariant = undefined;\nexport const PluginAsset = undefined;\n"],"mappings":";;;;;AAYA,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAmB;CACnF,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AAED,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,iBAAiB,KAAA;AAC9B,IAAa,cAAc,KAAA"}

package/dist/lib/capabilities.tauri.mjs

@@ -0,0 +1,30 @@
+import { t as PLUGIN_default } from "./chunk-PLUGIN.mjs";
+import * as ActivationEvents from "@dxos/app-framework/ActivationEvents";
+import * as AppCapability from "@dxos/app-toolkit/AppCapability";
+import { translations } from "#translations";
+import { TldrawCapabilities } from "#types";
+import * as Capability from "@dxos/app-framework/Capability";
+import * as IllustratorCapabilities from "@dxos/plugin-illustrator/IllustratorCapabilities";
+import * as IllustratorEvents from "@dxos/plugin-illustrator/IllustratorEvents";
+import { meta } from "#meta";
+//#region src/capabilities/gen/tauri.ts
+var DrawingVariant = Capability.lazyModule("drawing-variant", {
+	provides: [IllustratorCapabilities.VariantProvider],
+	activatesOn: IllustratorEvents.Start,
+	environments: ["browser", "tauri"]
+}, () => import("./chunk-drawing-variant.mjs"));
+var PluginAsset = AppCapability.pluginAsset({
+	pluginId: meta.profile.key,
+	path: "PLUGIN.mdl",
+	content: PLUGIN_default,
+	mimeType: "application/x-mdl"
+});
+var TldrawSettings = AppCapability.settings(() => import("./chunk-settings.mjs"), {
+	activatesOn: ActivationEvents.Idle,
+	provides: [TldrawCapabilities.Settings]
+});
+var Translations = AppCapability.translations(translations);
+//#endregion
+export { DrawingVariant, PluginAsset, TldrawSettings, Translations };
+
+//# sourceMappingURL=capabilities.tauri.mjs.map

package/dist/lib/capabilities.tauri.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"capabilities.tauri.mjs","names":[],"sources":["../../src/capabilities/gen/tauri.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'tauri' condition.\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as Capability from '@dxos/app-framework/Capability';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\nimport * as IllustratorCapabilities from '@dxos/plugin-illustrator/IllustratorCapabilities';\nimport * as IllustratorEvents from '@dxos/plugin-illustrator/IllustratorEvents';\n\nimport { meta } from '#meta';\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\nimport pluginSpec from '../../../PLUGIN.mdl?raw';\n\n// Browser-only: the variant supplies the React article/card components that render a drawing.\nexport const DrawingVariant = Capability.lazyModule(\n  'drawing-variant',\n  {\n    provides: [IllustratorCapabilities.VariantProvider],\n    activatesOn: IllustratorEvents.Start,\n    environments: ['browser', 'tauri'],\n  },\n  () => import('../drawing-variant.ts'),\n);\n\nexport const PluginAsset = AppCapability.pluginAsset({\n  pluginId: meta.profile.key,\n  path: 'PLUGIN.mdl',\n  content: pluginSpec,\n  mimeType: 'application/x-mdl',\n});\n\nexport const TldrawSettings = AppCapability.settings(() => import('../settings.ts'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\n\nexport const Translations = AppCapability.translations(translations);\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,iBAAiB,WAAW,WACvC,mBACA;CACE,UAAU,CAAC,wBAAwB,eAAe;CAClD,aAAa,kBAAkB;CAC/B,cAAc,CAAC,WAAW,OAAO;AACnC,SACM,OAAO,8BACf;AAEA,IAAa,cAAc,cAAc,YAAY;CACnD,UAAU,KAAK,QAAQ;CACvB,MAAM;CACN,SAAS;CACT,UAAU;AACZ,CAAC;AAED,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAmB;CACnF,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AAED,IAAa,eAAe,cAAc,aAAa,YAAY"}

package/dist/lib/capabilities.workerd.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"capabilities.workerd.mjs","names":[],"sources":["../../src/capabilities/gen/workerd.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'workerd' condition.\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\n\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\nexport const TldrawSettings = AppCapability.settings(() => import('../settings'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const DrawingVariant = undefined;\nexport const PluginAsset = undefined;\n"],"mappings":";;;;;AAYA,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAgB;CAChF,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AAED,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,iBAAiB,KAAA;AAC9B,IAAa,cAAc,KAAA"}
+{"version":3,"file":"capabilities.workerd.mjs","names":[],"sources":["../../src/capabilities/gen/workerd.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'workerd' condition.\n\nimport * as ActivationEvents from '@dxos/app-framework/ActivationEvents';\nimport * as AppCapability from '@dxos/app-toolkit/AppCapability';\n\nimport { translations } from '#translations';\nimport { TldrawCapabilities } from '#types';\n\nexport const TldrawSettings = AppCapability.settings(() => import('../settings.ts'), {\n  activatesOn: ActivationEvents.Idle,\n  provides: [TldrawCapabilities.Settings],\n});\n\nexport const Translations = AppCapability.translations(translations);\n\nexport const DrawingVariant = undefined;\nexport const PluginAsset = undefined;\n"],"mappings":";;;;;AAYA,IAAa,iBAAiB,cAAc,eAAe,OAAO,yBAAmB;CACnF,aAAa,iBAAiB;CAC9B,UAAU,CAAC,mBAAmB,QAAQ;AACxC,CAAC;AAED,IAAa,eAAe,cAAc,aAAa,YAAY;AAEnE,IAAa,iBAAiB,KAAA;AAC9B,IAAa,cAAc,KAAA"}

package/dist/lib/chunk-PLUGIN.mjs

@@ -0,0 +1,6 @@
+//#region PLUGIN.mdl?raw
+var PLUGIN_default = "---\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| `scenario`  | `org.dxos.mdl.scenario@1.0`    |\n| `component` | `org.dxos.mdl.component@1.0`   |\n| `op`        | `org.dxos.mdl.op@1.1`          |\n| `test`      | `org.dxos.mdl.test@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> **Architecture has moved since this section was written.** `plugin-tldraw` no longer owns a\n> `Sketch`/`Canvas` type or a `createSketch`/`readSketch`/`editSketch` operation — there is no\n> `operations/` directory and no `Sketch` class in `src/` at all. Tldraw is now a **render/create\n> variant** contributed to `plugin-illustrator`'s `Drawing` type\n> (`src/capabilities/drawing-variant.ts`, `IllustratorCapabilities.VariantProvider`, id\n> `tldraw.com/2`) — `TldrawArticle`/`TldrawCard` render a `Drawing.Canvas` whose `schema` is\n> `tldraw.com/2`, and the Scene DSL create/read/edit operations documented below actually live in\n> `@dxos/plugin-illustrator` (`org.dxos.operation.illustrator.{create,read,edit}`), invoked with\n> `variant: 'tldraw.com/2'` to select this plugin's renderer. The type/component sections above\n> (`Canvas`, `Sketch`, `Scene`, `WorldObject`, `Command`) and F-7/F-8 below describe the DSL\n> correctly in spirit but attribute it to the wrong plugin; QA-1/QA-2 below invoke the real keys.\n\n```mdl\nop createSketch\n  key: org.dxos.operation.illustrator.create\n  desc: |\n    Owned by plugin-illustrator, not this plugin (see note above). Creates a Drawing with an\n    associated Canvas and adds it to the target space or collection; `variant: 'tldraw.com/2'`\n    selects the tldraw renderer instead of another registered DrawingVariant.\n  input:\n    name?: string\n    variant?: string              # canvas typename; here 'tldraw.com/2' — defaults to the first registered variant\n  output: { object: Drawing }\n  effects: [echo:write]\n```\n\n```mdl\nop readSketch\n  key: org.dxos.operation.illustrator.read\n  desc: |\n    Owned by plugin-illustrator (see note above). Returns the derived Scene (world objects with\n    object-local coordinates) read from the live canvas records, plus a count of unmanaged\n    (hand-drawn) shapes. Origins derive from bounding boxes, so the scene stays coherent after\n    users drag shapes. The agent calls this before editing an existing sketch.\n  input:\n    drawing: Ref<Drawing>\n  output: { scene: Scene, unmanaged: number }\n  requires: [Database]\n```\n\n```mdl\nop editSketch\n  key: org.dxos.operation.illustrator.edit\n  desc: |\n    Owned by plugin-illustrator (see note above). Applies scene commands atomically (one\n    Obj.update): upsert/move/remove world objects or individual elements by id. Returns the\n    resulting scene so the agent can maintain its mental model across turns.\n  input:\n    drawing: Ref<Drawing>\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\nscenario 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\nscenario 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\nscenario 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\nscenario 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\nscenario 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\nscenario 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\nscenario 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\nscenario 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## QA\n\nExecutable tests. Each step carries a human instruction (`do`) and, where the step maps to an\ninvocable operation, an agent binding (`invoke`). Report failures by test and step number.\nTldraw is enabled by default in every environment (`plugin-defs.tsx` `getDefaults`).\n\n```mdl\ntest QA-1: Create a tldraw sketch and draw on it\n  desc: The core whiteboard round-trip — create a Drawing bound to the tldraw variant, draw, reload.\n  actors: both\n  covers: [F-1.1, F-1.2, F-2.1, F-2.2, T-1, T-2]\n  status: unverified\n  given:\n    - an identity exists\n    - space: a space is open\n    - collection: a collection in that space, to create into\n    - no Drawing named \"QA Sketch\" exists — ABORT rather than deleting one this test did not create\n  steps:\n    - name: Create the sketch\n      do: In the navtree, click + on a collection and choose Sketch (tldraw). Name it \"QA Sketch\".\n      invoke: [op:createSketch] { name: \"QA Sketch\", variant: \"tldraw.com/2\" }\n      capture: created\n      expect: a Drawing named \"QA Sketch\" opens in TldrawArticle with an empty canvas\n      assert: return !!$created.object\n    - name: Place it in the collection\n      do: (no separate gesture — the navtree create action places it)\n      invoke: org.dxos.operation.space.addObject { object: $created.object, target: $given.collection }\n      expect: \"QA Sketch\" appears as a row under the collection\n    - name: Draw a shape\n      do: With the sketch open and focused (attention), select the rectangle tool and draw a rectangle on the canvas.\n      expect: the rectangle appears on the canvas\n      note: |\n        NO `invoke` — freehand drawing is a pointer gesture inside the tldraw canvas, with no\n        operation behind it; the DSL ops (`op:editSketch`) address semantic world objects, not\n        raw hand-drawn shapes. This step is human-only.\n  after:\n    - name: Delete the sketch\n      do: Right-click \"QA Sketch\" in the navtree and choose Delete.\n      invoke: org.dxos.operation.space.removeObjects { objects: [$created.object], target: $given.collection }\n      expect: the row leaves the navtree and its plank closes if it was open\n```\n\n```mdl\ntest QA-2: Scene DSL round-trip — draw a face, then add a hat without redrawing it\n  desc: |\n    The agent-facing DSL path (F-8 / T-7): create, read, and edit a scene addressed by semantic\n    object ids, verifying an edit to one world object leaves siblings untouched.\n  actors: agent\n  covers: [F-7.1, F-7.2, F-8.2, F-8.3, T-7]\n  status: unverified\n  given:\n    - an identity exists\n    - space: a space is open\n    - collection: a collection in that space, to create into\n    - no Drawing named \"QA Face\" exists — ABORT rather than deleting one this test did not create\n  steps:\n    - name: Create the sketch\n      do: (agent-only step — DSL editing has no human equivalent gesture; a human would draw freehand instead)\n      invoke: [op:createSketch] { name: \"QA Face\", variant: \"tldraw.com/2\" }\n      capture: created\n      expect: an empty Drawing named \"QA Face\" is created\n      assert: return !!$created.object\n    - name: Place it in the collection\n      do: (no separate gesture)\n      invoke: org.dxos.operation.space.addObject { object: $created.object, target: $given.collection }\n      expect: \"QA Face\" appears as a row under the collection\n    - name: Draw a face\n      do: (no human gesture — this is the DSL path)\n      invoke: |\n        org.dxos.operation.illustrator.edit {\n          drawing: $created.object,\n          commands: [{ kind: \"upsert-object\", id: \"face\", elements: [\n            { id: \"head\", type: \"circle\" },\n            { id: \"smile\", type: \"arc\" }\n          ] }]\n        }\n      capture: withFace\n      expect: the canvas renders a circle (\"head\") and an arc (\"smile\"); reading the scene returns\n        a \"face\" object with both element ids\n      assert: return $result.upserted.includes('face')\n    - name: Add a hat without touching the face\n      do: (no human gesture — this is the DSL path)\n      invoke: |\n        org.dxos.operation.illustrator.edit {\n          drawing: $created.object,\n          commands: [{ kind: \"upsert-object\", id: \"hat\", elements: [{ id: \"brim\", type: \"triangle\" }] }]\n        }\n      expect: the canvas now also renders the hat; the face's \"head\" and \"smile\" records are\n        byte-identical to the previous step's — the edit touched only the \"hat\" object\n      assert: return $result.upserted.includes('hat') && !$result.upserted.includes('face')\n      note: |\n        This is the mental-model regression T-8 describes for live AI conversation — asserting on\n        `upserted` (which object ids the edit actually touched) is the falsifiable form of \"the\n        face was not redrawn,\" per Rule 5.\n  after:\n    - name: Delete the sketch\n      do: Right-click \"QA Face\" in the navtree and choose Delete.\n      invoke: org.dxos.operation.space.removeObjects { objects: [$created.object], target: $given.collection }\n      expect: the row leaves the navtree and its plank closes if it was open\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 scenario\n  uri: org.dxos.mdl.scenario@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";
+//#endregion
+export { PLUGIN_default as t };
+
+//# sourceMappingURL=chunk-PLUGIN.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-PLUGIN.mjs","names":[],"sources":[],"mappings":""}

package/dist/lib/chunk-TldrawArticle.mjs

@@ -1,27 +1,30 @@
 import { TldrawCapabilities } from "#types";
 import "react";
 import { Obj } from "@dxos/echo";
-import { Flex, Panel, composable, composableProps } from "@dxos/react-ui";
+import * as Util from "@dxos/react-ui/Util";
 import { isTauri } from "@dxos/util";
 import { jsx } from "react/jsx-runtime";
 import { invariant } from "@dxos/invariant";
-import { useAtomCapability } from "@dxos/app-framework/ui";
-import { AppSurface, useAppGraph } from "@dxos/app-toolkit/ui";
-import { useActions } from "@dxos/plugin-graph/hooks";
+import * as Hooks from "@dxos/app-framework/Hooks";
+import * as AppSurface from "@dxos/app-toolkit/AppSurface";
+import * as ToolkitHooks from "@dxos/app-toolkit/Hooks";
+import * as GraphHooks from "@dxos/plugin-graph/Hooks";
 import * as Drawing from "@dxos/plugin-illustrator/Drawing";
 import { useAttention } from "@dxos/react-ui-attention";
+import * as Layout from "@dxos/react-ui/Layout";
+import * as Panel from "@dxos/react-ui/Panel";
 import { CanvasComponent } from "#components";
 //#region src/containers/TldrawArticle/TldrawArticle.tsx
 var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-tldraw/src/containers/TldrawArticle/TldrawArticle.tsx";
-var TldrawArticle = ({ role, attendableId, drawing, canvas, extrinsic }) => {
+var TldrawArticle = ({ role, attendableId, drawing, canvas, extrinsic, selection, onSelectionChange, onActivate }) => {
 	invariant(Obj.instanceOf(Drawing.Canvas, canvas), void 0, {
 		"~LogMeta": "~LogMeta",
 		F: __dxlog_file,
-		L: 25,
+		L: 36,
 		S: void 0,
 		A: ["Obj.instanceOf(Drawing.Canvas, canvas)", ""]
 	});
-	const settings = useAtomCapability(TldrawCapabilities.Settings);
+	const [settings, updateSettings] = Hooks.useAtomCapabilityState(TldrawCapabilities.Settings);
 	const id = Obj.getURI(drawing);
 	const { hasAttention } = useAttention(attendableId);
 	const section = role === AppSurface.Section.role;
@@ -29,14 +32,18 @@ var TldrawArticle = ({ role, attendableId, drawing, canvas, extrinsic }) => {
 		readonly: role === AppSurface.Slide.role,
 		autoCenter: section ? true : void 0
 	};
-	const { graph } = useAppGraph();
-	const handleThreadCreate = useActions(graph, id).find((action) => action.id === `${id}/comment`)?.data;
+	const { graph } = ToolkitHooks.useAppGraph();
+	const handleThreadCreate = GraphHooks.useActions(graph, id).find((action) => action.id === `${id}/comment`)?.data;
 	const content = /* @__PURE__ */ jsx(CanvasComponent, {
 		classNames: "dx-attention-surface",
 		canvas,
 		settings,
+		onSettingsChange: updateSettings,
 		hideUi: section ? !hasAttention : !hasAttention && !isTauri(),
 		onThreadCreate: handleThreadCreate,
+		selection,
+		onSelectionChange,
+		onActivate,
 		...props
 	}, id);
 	return section ? /* @__PURE__ */ jsx(Container, {
@@ -44,13 +51,13 @@ var TldrawArticle = ({ role, attendableId, drawing, canvas, extrinsic }) => {
 		children: content
 	}) : /* @__PURE__ */ jsx(Article, { children: content });
 };
-var Article = composable((props, forwardedRef) => /* @__PURE__ */ jsx(Panel.Root, {
-	...composableProps(props, { classNames: "aspect-square" }),
+var Article = Util.composable((props, forwardedRef) => /* @__PURE__ */ jsx(Panel.Root, {
+	...Util.composableProps(props, { classNames: "aspect-square" }),
 	ref: forwardedRef,
-	children: /* @__PURE__ */ jsx(Panel.Content, { children: props.children })
+	children: /* @__PURE__ */ jsx(Panel.Body, { children: props.children })
 }));
-var Container = composable(({ fill, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Flex, {
-	...composableProps(props, { classNames: [fill ? "h-full w-full" : "aspect-square", "overflow-hidden"] }),
+var Container = Util.composable(({ fill, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Layout.Flex, {
+	...Util.composableProps(props, { classNames: [fill ? "dx-fill" : "aspect-square", "overflow-hidden"] }),
 	ref: forwardedRef,
 	children: props.children
 }));

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/hooks';\nimport * as Drawing from '@dxos/plugin-illustrator/Drawing';\nimport * as IllustratorCapabilities from '@dxos/plugin-illustrator/IllustratorCapabilities';\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 = IllustratorCapabilities.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;EAAY,UAAA;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;CAC5E,UAAA,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;CAEJ,UAAA,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 * as Hooks from '@dxos/app-framework/Hooks';\nimport * as AppSurface from '@dxos/app-toolkit/AppSurface';\nimport * as ToolkitHooks from '@dxos/app-toolkit/Hooks';\nimport { Obj } from '@dxos/echo';\nimport { invariant } from '@dxos/invariant';\nimport * as GraphHooks from '@dxos/plugin-graph/Hooks';\nimport * as Drawing from '@dxos/plugin-illustrator/Drawing';\nimport * as IllustratorCapabilities from '@dxos/plugin-illustrator/IllustratorCapabilities';\nimport { useAttention } from '@dxos/react-ui-attention';\nimport * as Layout from '@dxos/react-ui/Layout';\nimport * as Panel from '@dxos/react-ui/Panel';\nimport * as Util from '@dxos/react-ui/Util';\nimport { isTauri } from '@dxos/util';\n\nimport { CanvasComponent } from '#components';\nimport { TldrawCapabilities } from '#types';\n\nexport type TldrawArticleProps = IllustratorCapabilities.DrawingVariantSurfaceProps;\n\nexport const TldrawArticle = ({\n  role,\n  attendableId,\n  drawing,\n  canvas,\n  extrinsic,\n  selection,\n  onSelectionChange,\n  onActivate,\n}: TldrawArticleProps) => {\n  invariant(Obj.instanceOf(Drawing.Canvas, canvas));\n  const [settings, updateSettings] = Hooks.useAtomCapabilityState(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 } = ToolkitHooks.useAppGraph();\n  const actions = GraphHooks.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      onSettingsChange={updateSettings}\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      selection={selection}\n      onSelectionChange={onSelectionChange}\n      onActivate={onActivate}\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 = Util.composable<HTMLDivElement, PropsWithChildren>((props, forwardedRef) => (\n  <Panel.Root {...Util.composableProps(props, { classNames: 'aspect-square' })} ref={forwardedRef}>\n    <Panel.Body>{props.children}</Panel.Body>\n  </Panel.Root>\n));\n\nconst Container = Util.composable<HTMLDivElement, PropsWithChildren<{ fill?: boolean }>>(\n  ({ fill, ...props }, forwardedRef) => (\n    <Layout.Flex\n      {...Util.composableProps(props, { classNames: [fill ? 'dx-fill' : 'aspect-square', 'overflow-hidden'] })}\n      ref={forwardedRef}\n    >\n      {props.children}\n    </Layout.Flex>\n  ),\n);\n\nTldrawArticle.displayName = 'TldrawArticle';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAa,iBAAiB,EAC5B,MACA,cACA,SACA,QACA,WACA,WACA,mBACA,iBACwB;CACxB,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,CAAC,UAAU,kBAAkB,MAAM,uBAAuB,mBAAmB,QAAQ;CAC3F,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,aAAa,YAAY;CAE3C,MAAM,qBADU,WAAW,WAAW,OAAO,EAClB,CAAA,CAAQ,MAAM,WAAW,OAAO,OAAO,GAAG,GAAG,SAAS,CAAC,EAAE;CAEpF,MAAM,UACJ,oBAAC,iBAAD;EAGE,YAAW;EACH;EACE;EACV,kBAAkB;EAIlB,QAAQ,UAAU,CAAC,eAAe,CAAC,gBAAgB,CAAC,QAAQ;EAC5D,gBAAgB;EACL;EACQ;EACP;EACZ,GAAI;CACL,GAdM,EAcN;CAKH,OAAO,UAAU,oBAAC,WAAD;EAAW,MAAM;EAAY,UAAA;CAAmB,CAAA,IAAI,oBAAC,SAAD,EAAA,UAAU,QAAiB,CAAA;AAClG;AAEA,IAAM,UAAU,KAAK,YAA+C,OAAO,iBACzE,oBAAC,MAAM,MAAP;CAAY,GAAI,KAAK,gBAAgB,OAAO,EAAE,YAAY,gBAAgB,CAAC;CAAG,KAAK;CACjF,UAAA,oBAAC,MAAM,MAAP,EAAA,UAAa,MAAM,SAAqB,CAAA;AAC9B,CAAA,CACb;AAED,IAAM,YAAY,KAAK,YACpB,EAAE,MAAM,GAAG,SAAS,iBACnB,oBAAC,OAAO,MAAR;CACE,GAAI,KAAK,gBAAgB,OAAO,EAAE,YAAY,CAAC,OAAO,YAAY,iBAAiB,iBAAiB,EAAE,CAAC;CACvG,KAAK;CAEJ,UAAA,MAAM;AACI,CAAA,CAEjB;AAEA,cAAc,cAAc"}