@markdstage/markdstage 0.1.1 → 2.3.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.1",
+  "version": "2.3.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

@@ -87,6 +87,13 @@ The themed slide is displayed and updates automatically
   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.
+- **Hybrid editable PowerPoint export is available from the P control.** 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 the **16:9 control** 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
@@ -724,6 +731,8 @@ Architecture diagrams can be moved directly over the rendered result. For decks
 imported through 📂, 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 +752,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 +775,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 +805,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 📂 and CLI `present --watch` enable
+**Advanced editing**. Agents can open the editor canvas directly:
 
 ```json
 {
@@ -843,8 +855,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
@@ -908,7 +920,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 +938,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,11 +953,12 @@ 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 /export-pptx` | Start source-named hybrid PowerPoint export from the P control; 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. |
@@ -958,7 +972,7 @@ 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
@@ -979,6 +993,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;}
+}