Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Editor drop zone + Wisp canvas host

Linear: AUT-137

The editor's center canvas region. WispCanvasHost picks a backend — CssFallback (used by SSR + mdBook), a pre-rendered WispAsset { asset_path }, or WispRuntimeUnavailable (renders a warning banner). EditorDropZoneCanvas wraps the host in the dotted drop overlay + action cards + recent-clips strip the user sees when no clip is loaded.

States

StateStory
Emptyeditor-drop-zone-empty
Drag activeeditor-drop-zone-drag-active
With recent clipseditor-drop-zone-with-recent
Canvas host — CSS fallbackwisp-canvas-host-fallback
Canvas host — runtime unavailablewisp-canvas-host-asset

API

#![allow(unused)]
fn main() {
use ui_storybook::components::editor::{
    EditorDropZoneCanvas, WispCanvasHost, CanvasBackendView,
};
use ui_storybook::fixtures::editor::sample_editor_drop_zone;

view! {
    <EditorDropZoneCanvas view=sample_editor_drop_zone(/* drag_active */ false) />
}
}

Three backends, deterministic SSR

The component never touches wgpu directly — it just renders the backend the parent picked. CssFallback keeps SSR + mdBook snapshots stable; future tickets that wire up a real wgpu canvas in CSR will swap in WispAsset (committed PNG) or implement a runtime path without changing the component contract.

Composition

flowchart TD
    DropZone[EditorDropZoneCanvas]
    DropZone --> Host[WispCanvasHost]
    Host --> Backend{CanvasBackendView}
    Backend -->|CssFallback| Css[CSS checkered + label]
    Backend -->|WispAsset| Img[&lt;img&gt; pre-rendered]
    Backend -->|WispRuntimeUnavailable| Banner[Warning banner]
    DropZone --> Content[Drop overlay + headline + actions]
    DropZone --> Recent[Recent clips strip]