@markdstage/markdstage 0.1.3 → 2.4.0

package/README.md

@@ -1,12 +1,11 @@
 # MarkdStage CLI
 
-Present, validate, inspect, capture, and export MarkdStage Markdown decks from a
-terminal — no GitHub Copilot canvas required.
+Present, validate, inspect, capture, and export MarkdStage Markdown decks from a terminal — no GitHub Copilot canvas required.
 
 The CLI reuses the very same Markdown parser, renderer, Architecture DSL
-validation, theme handling, and PDF/PNG pipeline as the MarkdStage canvas
+validation, theme handling, and PDF/PNG/PowerPoint pipeline as the MarkdStage canvas
 Extension, so a deck looks identical in Copilot, MarkdStage Desktop, the CLI, and
-the exported PDF.
+exported PDF, or hybrid editable PowerPoint deck.
 
 ## Requirements
 
@@ -17,6 +16,7 @@ the exported PDF.
 ## Install
 
 ```console
+npx @markdstage/markdstage presentation slides.md
 npx @markdstage/markdstage present slides.md
 npm install --global @markdstage/markdstage
 ```
@@ -24,11 +24,13 @@ npm install --global @markdstage/markdstage
 ## Commands
 
 ```console
+markdstage presentation slides.md
 markdstage present slides.md --watch
 markdstage validate slides.md --json
 markdstage inspect slides.md --json
 markdstage capture slides.md --pages 2,4
 markdstage export slides.md --output slides.pdf
+markdstage export slides.md --output slides.pptx
 markdstage guide architecture-dsl
 markdstage skill install --target codex
 markdstage skill install --target claude
@@ -36,11 +38,12 @@ markdstage skill install --target claude
 
 | Command | Description |
 | --- | --- |
-| `present` | Serves the deck on loopback and opens the MarkdStage presenter window: navigation, presenter view, next-slide preview, speaker notes, overview, custom themes, Mermaid, Architecture DSL, and local assets. `--watch` reloads on save while preserving the current slide and keeping the last valid deck when a save is broken. `--no-open` serves the deck only. |
+| `presentation` | Opens the presenter view with the current slide, next-slide preview, speaker notes, and navigation. Select **Start presentation** to open the synchronized audience-facing window; select **End presentation** to close it. `--watch` reloads on save, and `--no-open` serves the presenter URL without launching a browser. |
+| `present` | Serves the deck on loopback and opens the MarkdStage presenter window: navigation, presenter view, next-slide preview, speaker notes, overview, custom themes, Mermaid, Architecture DSL, and local assets. `--watch` reloads on save while preserving the current slide, keeps the last valid deck when a save is broken, and enables Architecture editing. Without `--watch`, the source is read-only. `--no-open` serves the deck only. |
 | `validate` | Checks deck structure, Architecture DSL blocks, themes, and theme paths. |
 | `inspect` | Reports the same compact 1280x720 clipping diagnostics as the canvas `inspect_layout` action. `--slide <n>` limits it to one page, `--all` includes slides that fit, `--fail-on-issues` exits with code 5. |
 | `capture` | Writes 1280x720 PNG files. Without `--pages` only the slides reported as clipped are captured. |
-| `export` | Produces the same 16:9 PDF as the canvas Extension. |
+| `export` | Produces the same 16:9 PDF or hybrid editable PowerPoint as the canvas Extension. The `--output` extension selects the format; PDF remains the default. |
 | `guide` | Prints the canonical `markdstage_guide` topics. |
 | `skill` | Installs or checks the portable Agent Skills for Codex (`.agents/skills/markdstage/`), Claude Code (`.claude/skills/markdstage/`), and GitHub Copilot (`.github/skills/markdstage/`). Locally modified files are never overwritten without `--force`. |
 | `help` | Shows the overview, or the help for one command. `markdstage help <command>` prints the same text as `markdstage <command> --help`. |
@@ -48,6 +51,18 @@ markdstage skill install --target claude
 Global options: `--workspace <dir>`, `--theme <name>`, `--theme-file <path>`,
 `--json`, `--help`, `--version`.
 
+## Architecture editing
+
+Run `markdstage present slides.md --watch` for the live authoring workflow. The
+browser starts in viewing mode. Select the pencil control to move Architecture
+elements; those placement changes are saved atomically to the matching
+`architecture` fence. Select **Advanced edit** to add, update, duplicate,
+reparent, or delete elements in the detailed designer, then select **Save**.
+
+The server rejects a save if the Markdown changed outside the editor. Successful
+saves reload the watched deck without changing the current slide. Presenter,
+capture, inspect, and export views contain no editing UI.
+
 ```console
 markdstage help
 markdstage help capture

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdstage/markdstage",
-  "version": "0.1.3",
+  "version": "2.4.0",
   "description": "Present, validate, inspect, capture, and export MarkdStage Markdown decks from the command line — no Copilot canvas required.",
   "license": "MIT",
   "author": "runceel",
@@ -25,6 +25,8 @@
     "slides",
     "presentation",
     "pdf",
+    "pptx",
+    "powerpoint",
     "cli",
     "agent-skills"
   ],

package/shared/README.md

@@ -27,8 +27,8 @@ Canvas iframe (renderer/)
   | highlights language-tagged code fences with highlight.js
   | converts ```mermaid blocks with mermaid.run
   | converts validated ```architecture JSON DSL into a safe SVG DOM
-  | provides ◀ ▶, ✎, 16:9 PDF preview, margin clicks, arrow keys, and the ☰ slide list
-  | opens a synchronized external window with ⛶
+  | keeps ◀ page ▶, ☰, and ⋯ visible in a compact control bar
+  | groups editing, presentation, preview, import, refresh, and export under ⋯
   v
 The themed slide is displayed and updates automatically
 ```
@@ -75,19 +75,30 @@ The themed slide is displayed and updates automatically
 - Put **speaker notes** in top-level HTML comments on each slide. Presenter view
   renders notes as Markdown and follows navigation. Notes are absent from
   regular slides, the external presenter, and PDF output.
-- The **canvas renderer** owns navigation controls, ✎ editing, the slide list,
-  and current position. ✎ toggles the same placement mode as
-  `edit_architecture`. For Markdown loaded with 📂, **Advanced editing** opens
+- The **canvas renderer** owns the compact navigation controls, shape editing,
+  the slide list, and current position. **More controls > Shape editing**
+  toggles the same placement mode as `edit_architecture`. For Markdown loaded
+  with **More controls > Open Markdown**, **Advanced editing** opens
   the dedicated `architecture-editor` canvas. The agent only opens the deck and
   does not run an `ask_user` loop. Margin clicks are installed only in normal
   canvas and presenter modes, never print mode. `goto_slide` remains available
   for an explicit page request from chat.
-- **PDF Export is available from the printer icon.** When `sourceName` is passed
+- **PDF Export is available from More controls > Export PDF.** When
+  `sourceName` is passed
   to open / `load_deck`, the printer saves `<source-name>.pdf` in the workspace.
   It does not load or watch that file. AI may call `export_pdf` with another
   `outputPath`. Hidden print mode renders every page, then headless Edge/Chrome
   produces a 16:9 PDF with backgrounds, images, highlighted code, and Mermaid.
-- Use the **16:9 control** to letterbox the current slide inside the canvas with
+- **Hybrid editable PowerPoint export is available from More controls > Export
+  PowerPoint.** It
+  preserves supported text, lists, links, tables, raster images, and Architecture
+  DSL objects as native PowerPoint content. Architecture nodes, groups, and
+  connector-label pills are visible AutoShapes with integrated text; icons use a
+  transparent foreground picture layer. Mermaid and unsupported styling stay
+  visible as background artwork and are listed in the export report. AI may call
+  `export_pptx` with another workspace-confined `.pptx` path.
+- Use **More controls > Output preview** to letterbox the current slide inside
+  the canvas with
   the same fixed 1280×720 typography, spacing, diagram limits, and clipping used
   by PDF output. This preview is local to the canvas and does not change deck
   state. A visible and accessible warning identifies content that would be
@@ -102,7 +113,8 @@ The themed slide is displayed and updates automatically
   element hints. Call `capture_slides` only when visual inspection is needed;
   PNGs are fixed 1280×720 files and the action returns paths instead of inline
   image data.
-- Open the **external presenter** with ⛶ or `open_presenter`. Edge / Chrome /
+- Open the **external presenter** with **More controls > External window** or
+  `open_presenter`. Edge / Chrome /
   Chromium starts in a dedicated temporary profile as a movable, resizable
   1280×720 app-mode window. It shares `/state`, `/navigate`, and SSE with the
   canvas, so keyboard and Surface Pen position remain synchronized. Move it to
@@ -117,12 +129,13 @@ The themed slide is displayed and updates automatically
 - Add language names such as `csharp`, `json`, or `diff` to code fences for
   highlight.js syntax highlighting.
 
-## Markdown import (📂)
+## Markdown import
 
-Users can load Markdown directly from the canvas without AI. Press 📂 or `I` to
-open a filtered list of workspace `*.md` / `*.markdown` files. Selecting one
-loads it, splits it into slides, and replaces the deck. Import also works from
-the initial waiting view. The control is not shown in presenter or print mode.
+Users can load Markdown directly from the canvas without AI. Select **More
+controls > Open Markdown** or press `I` to open a filtered list of workspace
+`*.md` / `*.markdown` files. Selecting one loads it, splits it into slides, and
+replaces the deck. Import also works from the initial waiting view. The control
+is not shown in presenter or print mode.
 The workspace root is the Git repository root when available, otherwise the
 folder opened for the current session.
 
@@ -721,9 +734,11 @@ should determine placement without writing every coordinate.
 ### Placement editing
 
 Architecture diagrams can be moved directly over the rendered result. For decks
-imported through 📂, edits write back to the source `architecture` fence and
+imported through **More controls > Open Markdown**, edits write back to the source `architecture` fence and
 survive re-import. Decks supplied directly through open / `load_deck` cannot be
 reversibly mapped to a source file, so they save only to canvas deck state.
+In the standalone CLI, `markdstage present slides.md --watch` enables the same
+source-backed editing workflow; `present` without `--watch` is read-only.
 
 **Placement editing is a stable part of Architecture DSL v1.**
 
@@ -743,6 +758,7 @@ Enter mode with:
 | Method | Purpose |
 | --- | --- |
 | Canvas action `edit_architecture` with `{ "enabled": true }` | Normal agent-controlled operation |
+| Pencil control during CLI `present --watch` | User-controlled live authoring; the browser starts with editing off |
 | Renderer URL `?architectureEdit=1` | Local debugging |
 
 `reset` disables editing. The query parameter also updates server state through
@@ -765,8 +781,10 @@ region announces results.
 
 #### Dedicated Architecture Editor
 
-`architecture-editor` is a separate canvas for comprehensive editing of an
-**existing** Markdown `architecture` block. It does not insert new blocks.
+`architecture-editor` is a dedicated surface for comprehensive editing of an
+**existing** Markdown `architecture` block. The Canvas Extension opens a
+separate canvas; CLI watch mode opens a browser window. It does not insert new
+blocks.
 
 - Add, delete, duplicate, reorder, and reparent nodes, groups, images, and
   connectors.
@@ -793,11 +811,11 @@ region announces results.
 - Changes remain in an in-memory draft until explicit **Save** or `save`.
 - External file changes produce a conflict. Call `reload` with
   `{ "discard": true }` to discard the draft explicitly.
-- Saving reloads any MarkdStage canvas showing the same Markdown while
-  preserving page and theme.
+- Saving reloads any MarkdStage canvas or watched CLI presentation showing the
+  same Markdown while preserving the current page and theme.
 
-Only source-backed decks imported through 📂 enable **Advanced editing**.
-Agents can open the editor directly:
+Source-backed decks imported through **More controls > Open Markdown** and CLI `present --watch` enable
+**Advanced editing**. Agents can open the editor canvas directly:
 
 ```json
 {
@@ -843,8 +861,8 @@ requires authoring it again.
 
 #### Presenter and print never include edit UI
 
-For `?present=1` and `?print=1`, edit UI is not constructed in the DOM. When
-mode is disabled, the server also rejects `POST /edit` with
+For presenter, preview, print, and capture output, edit UI is not constructed in
+the DOM. When mode is disabled, the server also rejects `POST /edit` with
 `409 edit_mode_disabled`. `npm run test:editing` locks both behaviors.
 
 #### Known editing tradeoff
@@ -895,7 +913,8 @@ special layout and are never auto-enlarged.
 | Long press | `Win+F18` | Previous slide |
 
 `Win+F19` double press and pen connection/removal/docking do not launch
-MarkdStage. Start the presenter through ⛶ or explicit `open_presenter`.
+MarkdStage. Start the presenter through **More controls > External window** or
+explicit `open_presenter`.
 
 The Windows setting that lets apps override shortcut-button behavior may remain
 enabled. This implementation listens directly for Windows pen shortcuts rather
@@ -908,7 +927,7 @@ Canvas buttons and keyboard continue to work when pen input is unavailable.
 Start with `open_canvas` (`canvasId: "MarkdStage"`) and complete-deck input:
 `{ slides: string[], index?: number, theme?: "dark" | "light" | "microsoft" |
 "custom", sourceName?: string }`. Pass the source Markdown filename in
-`sourceName`; the printer saves `<source-name-without-extension>.pdf`. This is
+`sourceName`; the PDF and PowerPoint controls derive output names from it. This is
 metadata for resolution and output naming only and never reads or watches the
 file. The open handler applies the deck before returning its URL. Omit input
 when only refocusing an existing canvas. Any non-empty input without `slides`
@@ -926,6 +945,7 @@ fails with `invalid_input`; pass the complete `slides` array or call
 | `inspect_layout` | `{ index?: number, includeFits?: boolean }`. Render the registered in-memory PDF snapshot with the fixed 1280×720 output layout; this does not inspect the source file on disk. Omit `index` for one preferred whole-deck inspection. Serialize targeted calls because PDF, layout, and PNG jobs are exclusive. By default, return only clipped pages; `includeFits` includes successful pages. Returns dimensions, issue counts, overflow measurements, nested scroll containers, and a bounded list of element hints. Requires Edge, Chrome, or Chromium. |
 | `capture_slides` | `{ indexes?: number[], outputDirectory?: string, theme?: "dark" | "light" | "microsoft" | "custom" }`. Generate PDF-equivalent 1280×720 PNGs for at most 10 zero-based indexes. When `indexes` is omitted, inspect the deck and capture only clipped pages. Paths stay inside the workspace; results contain paths and layout summaries, not image bytes. Requires Edge, Chrome, or Chromium. |
 | `export_pdf` | `{ outputPath?: string, theme?: "dark" | "light" | "microsoft" | "custom" }`. Export one 16:9 page per slide. Relative paths use workspace root; default is `markdstage.pdf`. Theme affects PDF only. Reject paths outside workspace and non-`.pdf` files. Temporary slide replacement and the automatic back cover are included. Returns `{ ok, path, total, theme, bytes }`. Requires Edge, Chrome, or Chromium. |
+| `export_pptx` | `{ outputPath?: string, theme?: "dark" | "light" | "microsoft" | "custom" }`. Export a hybrid editable 16:9 PowerPoint deck. Supported text, lists, links, tables, raster images, and Architecture DSL objects remain native. Architecture nodes, groups, and connector-label pills are visible AutoShapes with integrated text; icons are foreground pictures. Mermaid and unsupported visuals become reported background fallbacks. Relative paths use workspace root; default is `markdstage.pptx`. Reject paths outside workspace and non-`.pptx` files. Temporary slide replacement and the automatic back cover are included. Returns `{ ok, path, total, theme, bytes, format, fallbackCount, fallbacks }`. Requires Edge, Chrome, or Chromium. |
 | `edit_architecture` | `{ enabled: boolean }`. Toggle placement editing. Imported decks also write to the source fence; direct decks write to canvas state. Presenter/print omit UI. Mode is not persisted and `reset` disables it. Returns `{ ok, enabled, version }`. |
 | `reset` | No input. Clear deck/slide state, disable editing, and return to the waiting view. |
 
@@ -940,16 +960,17 @@ fails with `invalid_input`; pass the complete `slides` array or call
 | --- | --- |
 | `GET /state` | Return current `markdown`, `index`, `total`, `theme`, `mode`, `architectureEdit`, source/watch state, `version`, and `deckVersion`. |
 | `GET /deck` | Return all `slides` and `deckVersion`; the ☰ list fetches only when the version changes. |
-| `GET /export-data` | Return the token-bound deck snapshot to print, inspection, or capture mode. |
-| `POST /export-status` | Let print/capture mode report rendering status and fixed-layout diagnostics to PDF export, `inspect_layout`, or `capture_slides`. |
+| `GET /export-data` | Return the token-bound deck snapshot to print, inspection, capture, or PowerPoint mode. |
+| `POST /export-status` | Let headless output modes report rendering status and fixed-layout diagnostics. |
 | `POST /navigate` | Accept absolute `{ index }` or relative `{ delta }`, update position, and notify all clients through SSE. |
-| `POST /present` | Start the presenter from ⛶; accepts same-origin POST only. |
-| `POST /export` | Start source-named PDF export from the printer icon; accepts same-origin POST only. |
+| `POST /present` | Start the presenter from **More controls > External window**; accepts same-origin POST only. |
+| `POST /export` | Start source-named PDF export from **More controls > Export PDF**; accepts same-origin POST only. |
+| `POST /export-pptx` | Start source-named hybrid PowerPoint export from **More controls > Export PowerPoint**; accepts same-origin POST only. |
 | `POST /edit` | Write an edited fence with `{ index, block, source }`; returns `409 edit_mode_disabled` when editing is off. |
 | `POST /edit-mode` | Set `{ enabled }`, including for `?architectureEdit=1`; same-origin POST only. |
 | `POST /architecture-editor/open` | Convert source-backed slide/block indexes to a file-wide block index and open Architecture Editor. |
 | `GET /events` | SSE nudge for low-latency `version` changes. |
-| `GET /markdown-files` | Return bounded workspace-relative `*.md` / `*.markdown` paths for 📂, excluding `.git`, `node_modules`, and dot-prefixed entries. |
+| `GET /markdown-files` | Return bounded workspace-relative `*.md` / `*.markdown` paths for **Open Markdown**, excluding `.git`, `node_modules`, and dot-prefixed entries. |
 | `POST /import` | Load and split `{ path, sourceMode?: "snapshot" | "live" }`; reject paths outside workspace, wrong extensions, and oversized files. Same-origin POST only. |
 | `POST /source-mode` | Switch a source-backed deck with `{ mode: "snapshot" | "live" }`; entering live mode loads the latest source. |
 
@@ -958,13 +979,13 @@ fails with `invalid_input`; pass the complete `slides` array or call
 ```text
 .github/extensions/markdstage/
   extension.mjs             # Canvas declaration, loopback server, and actions
-  architecture-canvas.mjs   # Architecture Editor state, validation, save, conflicts
+  architecture-canvas.mjs   # Canvas adapter for the shared Architecture Editor
   architecture-editor/
     index.html               # Full diagram-editor canvas shell
     editor.css               # Workspace, tree, and inspector styles
     editor.js                # Diagram commands, draft, and explicit-save UI
   copilot-extension.json     # Manifest for Gist sharing
-  markdown-deck.mjs         # Raw Markdown splitting for 📂 import
+  markdown-deck.mjs         # Raw Markdown splitting for canvas import
   scripts/
     markdown-blocks.mjs     # Scan and replace architecture fences
     markdown-files.mjs      # Scan workspace Markdown
@@ -979,6 +1000,9 @@ fails with `invalid_input`; pass the complete `slides` array or call
     architecture-edit.mjs   # DOM-independent move/detach/Undo/Redo/serialization
     architecture-editor.mjs # Placement UI and Advanced editing entry point
     architecture-document.mjs # Full-editor command/session API
+  runtime/
+    architecture-editor-server.mjs # Shared detailed-editor state and routes
+    architecture-source.mjs # Atomic Architecture block persistence and conflicts
   schema/
     architecture-v1.schema.json # Architecture DSL v1 JSON Schema (draft 2020-12)
     README.md               # Schema use, versioning, and migration policy

package/shared/architecture-editor/editor.css

@@ -0,0 +1,155 @@
+:root{
+  color-scheme:dark;
+  --editor-panel:#17191d;
+  --editor-panel-2:#20232a;
+  --editor-border:#3a3f49;
+  --editor-fg:#f2f4f8;
+  --editor-muted:#a8b0bd;
+  --editor-accent:#67a7ff;
+  --editor-accent-soft:#17365d;
+  --editor-danger:#ff8f8f;
+  --editor-grid:rgba(255,255,255,.07);
+}
+:root[data-theme="light"],:root[data-theme="microsoft"]{
+  color-scheme:light;
+  --editor-panel:#f5f7fa;
+  --editor-panel-2:#fff;
+  --editor-border:#c8ced8;
+  --editor-fg:#202124;
+  --editor-muted:#606775;
+  --editor-accent:#0f6cbd;
+  --editor-accent-soft:#dcecff;
+  --editor-danger:#b3261e;
+  --editor-grid:rgba(0,0,0,.08);
+}
+*{box-sizing:border-box;}
+html,body{height:100%;margin:0;overflow:hidden;}
+body{display:grid;grid-template-rows:auto minmax(0,1fr) auto;
+  color:var(--editor-fg);background:var(--editor-panel);font:14px/1.4 "Segoe UI",sans-serif;}
+button,input,select,textarea{font:inherit;}
+button{min-height:30px;padding:4px 9px;border:1px solid var(--editor-border);
+  border-radius:6px;color:var(--editor-fg);background:var(--editor-panel-2);cursor:pointer;}
+button:hover:not(:disabled){border-color:var(--editor-accent);background:var(--editor-accent-soft);}
+button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
+  outline:2px solid var(--editor-accent);outline-offset:1px;}
+button:disabled{opacity:.42;cursor:default;}
+.editor-header{display:flex;align-items:center;gap:16px;padding:8px 12px;
+  border-bottom:1px solid var(--editor-border);background:var(--editor-panel-2);}
+.editor-title{display:flex;align-items:center;gap:8px;min-width:230px;white-space:nowrap;}
+.editor-title #sourceLabel{max-width:28vw;overflow:hidden;text-overflow:ellipsis;color:var(--editor-muted);}
+.dirty-badge{padding:2px 7px;border-radius:999px;color:#fff;background:#b26a00;font-size:12px;}
+.editor-actions{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;padding-bottom:2px;}
+.toolbar-separator{width:1px;height:24px;background:var(--editor-border);flex:0 0 auto;}
+.save-button{font-weight:700;color:#fff;background:#0f6cbd;border-color:#0f6cbd;}
+.snap-toggle{display:flex;align-items:center;gap:4px;white-space:nowrap;color:var(--editor-muted);}
+.editor-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;min-height:0;}
+.editor-sidebar{min-height:0;overflow:auto;background:var(--editor-panel-2);}
+.editor-sidebar h2{position:sticky;top:0;z-index:2;margin:0;padding:10px 12px;
+  border-bottom:1px solid var(--editor-border);background:var(--editor-panel-2);font-size:13px;}
+.element-panel{border-right:1px solid var(--editor-border);}
+.inspector-panel{border-left:1px solid var(--editor-border);}
+.element-tree{padding:8px 0;}
+.tree-item{display:flex;align-items:center;gap:7px;width:100%;min-height:30px;padding:4px 10px;
+  border:0;border-radius:0;text-align:left;background:transparent;}
+.tree-item[aria-selected="true"]{background:var(--editor-accent-soft);color:var(--editor-accent);}
+.tree-icon{width:18px;text-align:center;color:var(--editor-muted);}
+.tree-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.editor-viewport{position:relative;min-width:0;min-height:0;overflow:auto;
+  background-color:#101217;
+  background-image:linear-gradient(var(--editor-grid) 1px,transparent 1px),
+    linear-gradient(90deg,var(--editor-grid) 1px,transparent 1px);
+  background-size:20px 20px;}
+:root[data-theme="light"] .editor-viewport,:root[data-theme="microsoft"] .editor-viewport{
+  background-color:#e9edf3;}
+.canvas-surface{display:flex;align-items:flex-start;justify-content:center;width:max-content;min-width:100%;min-height:100%;
+  padding:48px;transform-origin:top center;}
+.canvas-surface>.architecture-diagram{flex:0 0 auto;width:960px;margin:0;padding:18px;
+  border:1px solid var(--editor-border);border-radius:10px;background:var(--surface);
+  box-shadow:0 12px 36px rgba(0,0,0,.3);}
+.canvas-surface .architecture-svg{width:100%;max-height:none;overflow:visible;touch-action:none;}
+.canvas-surface [data-editor-ref]{cursor:pointer;outline:none;}
+.canvas-surface [data-editor-ref][data-editor-movable="true"]{cursor:grab;}
+.canvas-surface [data-editor-selected="true"]>rect,
+.canvas-surface [data-editor-selected="true"]>ellipse{
+  stroke:var(--editor-accent);stroke-width:7;filter:drop-shadow(0 0 7px var(--editor-accent));}
+.canvas-surface [data-architecture-type="connector"][data-editor-selected="true"] path{
+  stroke:var(--editor-accent);stroke-width:8;}
+.editor-resize-handle{fill:var(--surface);stroke:var(--editor-accent);stroke-width:4;cursor:nwse-resize;}
+.editor-resize-handle[data-corner="ne"],.editor-resize-handle[data-corner="sw"]{cursor:nesw-resize;}
+.connector-source>rect,.connector-source>ellipse{stroke:#f9c74f!important;stroke-width:8!important;}
+.inspector{display:flex;flex-direction:column;gap:10px;padding:12px;}
+.inspector-section{display:grid;grid-template-columns:minmax(88px,1fr) minmax(0,1.35fr);
+  gap:7px 10px;padding-bottom:11px;border-bottom:1px solid var(--editor-border);}
+.inspector-section h3{grid-column:1/-1;margin:0 0 3px;font-size:12px;color:var(--editor-muted);
+  text-transform:uppercase;letter-spacing:.06em;}
+.inspector label{align-self:center;color:var(--editor-muted);font-size:12px;}
+.inspector input,.inspector select,.inspector textarea{width:100%;min-width:0;padding:5px 7px;
+  border:1px solid var(--editor-border);border-radius:5px;color:var(--editor-fg);
+  background:var(--editor-panel);}
+.inspector textarea{min-height:72px;resize:vertical;font-family:"Cascadia Code",Consolas,monospace;}
+.inspector input[type="checkbox"]{width:auto;justify-self:start;}
+.inspector-help{grid-column:1/-1;margin:0;color:var(--editor-muted);font-size:12px;}
+.editor-footer{display:flex;justify-content:space-between;gap:12px;padding:6px 12px;
+  border-top:1px solid var(--editor-border);background:var(--editor-panel-2);
+  color:var(--editor-muted);font-size:12px;}
+.editor-footer [data-kind="error"]{color:var(--editor-danger);font-weight:600;}
+.context-menu{position:fixed;z-index:1000;min-width:220px;max-width:min(320px,calc(100vw - 16px));
+  padding:5px;border:1px solid var(--editor-border);border-radius:8px;color:var(--editor-fg);
+  background:var(--editor-panel-2);box-shadow:0 12px 32px rgba(0,0,0,.38);}
+.context-menu[hidden]{display:none;}
+.context-menu-item{display:flex;align-items:center;justify-content:space-between;gap:20px;
+  width:100%;min-height:32px;padding:5px 9px;border:0;border-radius:5px;text-align:left;
+  color:var(--editor-fg);background:transparent;}
+.context-menu-item:hover:not(:disabled),.context-menu-item:focus-visible{
+  outline:0;background:var(--editor-accent-soft);color:var(--editor-accent);}
+.context-menu-item:disabled{opacity:.45;cursor:default;}
+.context-menu-item[data-danger="true"]{color:var(--editor-danger);}
+.context-menu-shortcut{color:var(--editor-muted);font-size:12px;white-space:nowrap;}
+.context-menu-submenu-host{position:relative;}
+.context-submenu{position:fixed;}
+.context-menu-submenu-indicator{margin-left:auto;color:var(--editor-muted);font-size:18px;line-height:1;}
+.context-menu-check{width:14px;color:var(--editor-accent);text-align:center;}
+.context-submenu .context-menu-item{justify-content:flex-start;gap:8px;}
+.context-menu-separator{height:1px;margin:4px 6px;border:0;background:var(--editor-border);}
+.inspector-action-row{grid-column:2;display:flex;gap:6px;}
+.inspector-action-row button{width:100%;}
+.asset-dialog{width:min(900px,calc(100vw - 40px));height:min(680px,calc(100vh - 40px));
+  padding:0;border:1px solid var(--editor-border);border-radius:12px;color:var(--editor-fg);
+  background:var(--editor-panel-2);box-shadow:0 24px 80px rgba(0,0,0,.55);}
+.asset-dialog::backdrop{background:rgba(0,0,0,.65);}
+.asset-dialog[open]{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;}
+.asset-dialog-header,.asset-dialog-tools,.asset-dialog-footer{display:flex;align-items:center;gap:12px;
+  padding:12px 16px;border-bottom:1px solid var(--editor-border);}
+.asset-dialog-header{justify-content:space-between;}
+.asset-dialog-header h2{margin:0;font-size:18px;}
+.asset-dialog-header p{margin:2px 0 0;color:var(--editor-muted);font-size:12px;}
+.asset-dialog-header button{min-width:36px;font-size:20px;}
+.asset-dialog-tools label{color:var(--editor-muted);font-size:12px;white-space:nowrap;}
+.asset-dialog-tools input[type="search"]{min-width:160px;flex:1;padding:6px 9px;border:1px solid var(--editor-border);
+  border-radius:6px;color:var(--editor-fg);background:var(--editor-panel);}
+.asset-dialog-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;min-height:0;}
+.asset-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));align-content:start;
+  gap:8px;min-height:0;padding:12px;overflow:auto;border-right:1px solid var(--editor-border);}
+.asset-list-empty{grid-column:1/-1;margin:20px;color:var(--editor-muted);text-align:center;}
+.asset-option{display:grid;grid-template-rows:96px auto;gap:6px;min-width:0;padding:7px;text-align:left;}
+.asset-option[aria-selected="true"]{border-color:var(--editor-accent);background:var(--editor-accent-soft);}
+.asset-option img{width:100%;height:96px;object-fit:contain;border-radius:4px;background:repeating-conic-gradient(#d7dae0 0 25%,#fff 0 50%) 50%/16px 16px;}
+.asset-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
+.asset-preview{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;}
+.asset-preview-frame{display:grid;place-items:center;min-height:240px;border:1px solid var(--editor-border);
+  border-radius:8px;overflow:hidden;background:repeating-conic-gradient(#d7dae0 0 25%,#fff 0 50%) 50%/18px 18px;}
+#assetPreviewImageHost{display:contents;}
+.asset-preview-frame img{display:block;width:100%;height:100%;max-height:360px;object-fit:contain;}
+.asset-preview-frame span{padding:12px;color:#424750;background:rgba(255,255,255,.72);text-align:center;}
+.asset-preview p{margin:0;overflow-wrap:anywhere;color:var(--editor-muted);font-size:12px;}
+.asset-dialog-footer{justify-content:space-between;border-top:1px solid var(--editor-border);border-bottom:0;}
+.asset-dialog-footer>span{min-width:0;color:var(--editor-muted);font-size:12px;}
+.asset-dialog-footer>span[data-kind="error"]{color:var(--editor-danger);font-weight:600;}
+.asset-dialog-footer>div{display:flex;gap:8px;}
+@media(max-width:900px){
+  .editor-layout{grid-template-columns:180px minmax(0,1fr);}
+  .inspector-panel{position:absolute;right:0;top:52px;bottom:28px;width:280px;z-index:5;
+    box-shadow:-10px 0 24px rgba(0,0,0,.25);}
+  .asset-dialog-body{grid-template-columns:minmax(0,1fr);}
+  .asset-preview{display:none;}
+}