@kubohiroya/turbowarp-plus-editor-layout 0.1.3 → 0.1.5

package/dist/dockview-stage.d.ts

@@ -0,0 +1,20 @@
+type StageCommands = {
+    open(): void;
+    close(): void;
+};
+export interface DockviewStagePane {
+    title: string;
+    attach(destination: HTMLElement | null): void;
+    connect(commands: StageCommands | null): void;
+}
+export declare function useDockviewStage(enabled: boolean, locale: string): {
+    surface: HTMLDivElement;
+    pane: DockviewStagePane;
+    docked: boolean;
+    commands: StageCommands;
+    inlineRef: (element: HTMLElement | null) => void;
+    suspend: (value: boolean) => void;
+    openLabel: string;
+    closeLabel: string;
+};
+export {};

package/dist/dockview-stage.js

@@ -0,0 +1,45 @@
+import React from 'react';
+export function useDockviewStage(enabled, locale) {
+    const [surface] = React.useState(() => {
+        if (!enabled)
+            return null;
+        const node = document.createElement('div');
+        node.className = 'tw-plus-dockview-stage-surface';
+        return node;
+    });
+    const inline = React.useRef(null);
+    const dock = React.useRef(null);
+    const suspended = React.useRef(false);
+    const [docked, setDocked] = React.useState(false);
+    const [commands, setCommands] = React.useState(null);
+    const move = React.useCallback(() => {
+        const destination = suspended.current ? inline.current : dock.current ?? inline.current;
+        if (surface && destination && surface.parentElement !== destination)
+            destination.appendChild(surface);
+    }, [surface]);
+    const inlineRef = React.useCallback((element) => {
+        inline.current = element;
+        if (surface && element)
+            surface.dir = element.closest('[dir]')?.getAttribute('dir') ?? '';
+        move();
+    }, [move, surface]);
+    const suspend = React.useCallback((value) => {
+        suspended.current = value;
+        move();
+    }, [move]);
+    const japanese = /^ja(?:-|$)/i.test(locale);
+    const pane = React.useMemo(() => ({
+        title: japanese ? 'ステージ' : 'Stage',
+        attach(destination) {
+            dock.current = destination;
+            move();
+            setDocked(Boolean(destination));
+        },
+        connect: setCommands
+    }), [japanese, move]);
+    return surface && {
+        surface, pane, docked, commands, inlineRef, suspend,
+        openLabel: japanese ? '作業領域で開く' : 'Open stage in workspace',
+        closeLabel: japanese ? '作業領域から戻す' : 'Return stage from workspace'
+    };
+}

package/dist/document-workspace.d.ts

@@ -0,0 +1,15 @@
+export interface DocumentPanelRequest {
+    reference: {
+        providerId: string;
+        documentId: string;
+    };
+    filename: string;
+    mount(element: HTMLElement, close: () => void): {
+        requestClose(): void;
+        dispose(): void;
+    };
+}
+export declare function getDocumentWorkspace(vm: object): {
+    open(request: DocumentPanelRequest): boolean;
+    connect(handler: NonNullable<(request: DocumentPanelRequest) => void>): () => void;
+};

package/dist/document-workspace.js

@@ -0,0 +1,25 @@
+function createDocumentWorkspace() {
+    let open;
+    return {
+        open(request) {
+            if (!open)
+                return false;
+            open(request);
+            return true;
+        },
+        connect(handler) {
+            open = handler;
+            return () => { if (open === handler)
+                open = undefined; };
+        }
+    };
+}
+const workspaces = new WeakMap();
+export function getDocumentWorkspace(vm) {
+    let workspace = workspaces.get(vm);
+    if (!workspace) {
+        workspace = createDocumentWorkspace();
+        workspaces.set(vm, workspace);
+    }
+    return workspace;
+}

package/dist/sprite-layout-menu.d.ts

@@ -3,6 +3,7 @@ interface SpriteLayoutCommands {
     splitBelow(): void;
     close(): void;
     canClose(): boolean;
+    canSplit?(): boolean;
 }
 export declare function createSpriteLayoutMenu(document: Document, locale: string, commands: SpriteLayoutCommands): {
     element: HTMLDivElement;

package/dist/sprite-layout-menu.js

@@ -64,6 +64,7 @@ export function createSpriteLayoutMenu(document, locale, commands) {
         if (openedIn)
             return;
         openedIn = trigger.ownerDocument;
+        buttons[0].disabled = buttons[1].disabled = commands.canSplit?.() === false;
         buttons[2].disabled = !commands.canClose();
         topLayer = typeof popup.showPopover === 'function';
         if (topLayer) {

package/dist/sprite-tabs.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 import type { SpriteVariable } from './sprite-asset-pane.tsx';
 import type { SpriteSearchResult } from './sprite-editor-toolbar.tsx';
+import type { DockviewStagePane } from './dockview-stage.ts';
+export { getDocumentWorkspace } from './document-workspace.ts';
+export { useDockviewStage } from './dockview-stage.ts';
 interface CostumeAsset {
     encodeDataURI(): string;
 }
@@ -71,6 +74,7 @@ interface TabOptions<Snapshot = unknown> {
     resize(): void;
     reopenLabel: string;
     multiView?: boolean;
+    stagePane?: DockviewStagePane;
     variables?: boolean;
     locale?: string;
     viewAdapter?: SpriteTabAdapter<Snapshot>;
@@ -114,6 +118,8 @@ declare const renameLabels: {
 type RenameLabels = typeof renameLabels.en;
 export declare function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElement, options: TabOptions<Snapshot>): {
     select: (id: string) => void;
+    openStage: () => void;
+    closeStage: () => void;
     split: (direction: SpriteSplitDirection, id?: string) => string;
     closeSplit: (id?: string) => boolean;
     activateView: (id: string) => boolean;
@@ -150,6 +156,8 @@ export declare function useSpriteTabs<Snapshot>({ available, enabled, locale, ..
 }): {
     controller: React.MutableRefObject<{
         select: (id: string) => void;
+        openStage: () => void;
+        closeStage: () => void;
         split: (direction: SpriteSplitDirection, id?: string) => string;
         closeSplit: (id?: string) => boolean;
         activateView: (id: string) => boolean;
@@ -171,4 +179,3 @@ export declare function useSpriteTabs<Snapshot>({ available, enabled, locale, ..
     renderEditorTabRow: (children: React.ReactNode) => React.FunctionComponentElement<SpriteTabsProps<Snapshot>>;
     renderEditorPanel: (index: number, children: React.ReactNode) => React.ReactPortal;
 };
-export {};

package/dist/sprite-tabs.js

@@ -4,6 +4,9 @@ import { createDockview, DefaultTab, themeLight } from 'dockview';
 import { createSpriteLayoutMenu } from "./sprite-layout-menu.js";
 import { SpriteAssetPane } from "./sprite-asset-pane.js";
 import { SpriteEditorToolbar, spriteEditorSections } from "./sprite-editor-toolbar.js";
+import { getDocumentWorkspace } from "./document-workspace.js";
+export { getDocumentWorkspace } from "./document-workspace.js";
+export { useDockviewStage } from "./dockview-stage.js";
 const variableSection = spriteEditorSections.indexOf('variables');
 function createAssetSelections(target, source) {
     const selected = new Map(source?.selected);
@@ -39,6 +42,8 @@ function createAssetSelections(target, source) {
     const ports = { costumes: forKind('costumes'), sounds: forKind('sounds') };
     return { selected, ports, layouts, selectors, scroll };
 }
+const stagePanelId = 'tw-plus-stage-display';
+const documentComponent = 'tw-plus-document';
 const renameLabels = {
     en: { title: 'Rename sprite', name: 'Sprite name', cancel: 'Cancel', save: 'Rename' },
     ja: { title: 'スプライト名の変更', name: 'スプライト名', cancel: 'キャンセル', save: '変更' }
@@ -68,11 +73,13 @@ class SpriteTab extends DefaultTab {
 export function mountSpriteTabs(root, content, options) {
     const { vm, multiView = false, locale = 'en' } = options;
     const viewAdapter = multiView ? options.viewAdapter : undefined;
+    const stagePane = multiView ? options.stagePane : undefined;
     const usesNativeSection = (section) => section !== variableSection || !options.variables;
     const document = root.ownerDocument;
     const editLabel = /^ja(?:-|$)/i.test(locale) ? 'クリックしてこのビューで編集' : 'Activate this view to edit';
     const slots = new Map();
     const views = new Map();
+    const documents = new Map();
     const costumeIcons = new WeakMap();
     const remembered = new WeakMap();
     const lastUsed = new WeakMap();
@@ -95,8 +102,21 @@ export function mountSpriteTabs(root, content, options) {
                 return [];
             return [{ label: text.title, action: () => openRenameDialog(target) }];
         },
-        createComponent: () => {
+        createComponent: ({ name, id: componentId }) => {
             const element = document.createElement('div');
+            if (name === documentComponent) {
+                element.className = 'tw-plus-document-slot';
+                return { element, init({ api }) {
+                        const item = documents.get(componentId);
+                        element.dataset.providerId = item.request.reference.providerId;
+                        element.dataset.documentId = item.request.reference.documentId;
+                        item.session = item.request.mount(element, () => api.close());
+                    } };
+            }
+            if (name === stagePanelId) {
+                element.className = 'tw-plus-dockview-stage-slot';
+                return { element, init() { stagePane.attach(element); } };
+            }
             element.className = 'tw-plus-sprite-tab-slot';
             const body = multiView ? document.createElement('div') : element;
             const toolbar = multiView && options.onToolbarSlots ? document.createElement('div') : undefined;
@@ -182,7 +202,8 @@ export function mountSpriteTabs(root, content, options) {
                 split('below', group.activePanel.id); },
             close: () => { if (group.activePanel)
                 closeSplit(group.activePanel.id); },
-            canClose: () => dockview.groups.length > 1
+            canClose: () => canCloseGroup(group),
+            canSplit: () => views.has(group.activePanel?.id)
         });
         return { ...menu, init() { } };
     }
@@ -320,6 +341,11 @@ export function mountSpriteTabs(root, content, options) {
         view.snapshots.set(view.section, { snapshot, view: descriptor });
     }
     function show(panel) {
+        if (panel?.id === stagePanelId || documents.has(panel?.id)) {
+            // Utility panels do not change the VM editing target.
+            refreshSurfaces();
+            return;
+        }
         const next = views.get(panel?.id);
         if (active === next) {
             refreshSurfaces();
@@ -355,7 +381,7 @@ export function mountSpriteTabs(root, content, options) {
     }
     function add(target, splitPosition, section) {
         let id = target.id;
-        if (splitPosition || views.has(id)) {
+        if (splitPosition || views.has(id) || id === stagePanelId || documents.has(id)) {
             do {
                 id = 'sprite-view-' + ++nextView;
             } while (views.has(id) || vm.runtime.targets.some(item => item.id === id));
@@ -394,6 +420,61 @@ export function mountSpriteTabs(root, content, options) {
             [...views.values()].find(item => item.target === target);
         activateView(view?.id ?? add(target).id);
     }
+    function openDocument(request) {
+        const { providerId, documentId } = request.reference;
+        for (const [id, { request: opened }] of documents) {
+            if (opened.reference.providerId === providerId && opened.reference.documentId === documentId) {
+                dockview.getPanel(id)?.api.setActive();
+                return;
+            }
+        }
+        let id;
+        do {
+            id = 'document-view-' + ++nextView;
+        } while (views.has(id) || documents.has(id) || vm.runtime.targets.some(target => target.id === id));
+        const title = request.filename + ' (' + providerId + ' / ' + documentId + ')';
+        documents.set(id, { request });
+        try {
+            dockview.addPanel({ id, title, component: documentComponent, renderer: 'always' });
+        }
+        catch (error) {
+            documents.get(id)?.session?.dispose();
+            documents.delete(id);
+            throw error;
+        }
+    }
+    function guardDocumentClose(event) {
+        const element = event.target;
+        const tab = element.closest('[data-tab-panel-id]');
+        const item = documents.get(tab?.dataset.tabPanelId);
+        if (!item)
+            return;
+        const close = event.type === 'click' ? Boolean(element.closest('.dv-default-tab-action')) :
+            event.target === tab && ['Delete', 'Backspace'].includes(event.key);
+        if (!close)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        item.session?.requestClose();
+    }
+    function canCloseGroup(group) {
+        return dockview.groups.length > 1 && group.panels.every(panel => !documents.has(panel.id));
+    }
+    function openStage() {
+        if (!stagePane)
+            return;
+        const existing = dockview.getPanel(stagePanelId);
+        if (existing) {
+            existing.api.setActive();
+            return;
+        }
+        const reference = dockview.activePanel;
+        dockview.addPanel({ id: stagePanelId, title: stagePane.title, component: stagePanelId, renderer: 'always',
+            position: reference ? { referencePanel: reference.id, direction: 'right' } : undefined });
+    }
+    function closeStage() {
+        dockview.getPanel(stagePanelId)?.api.close();
+    }
     function split(direction, id = active?.id) {
         const reference = views.get(id);
         if (!multiView || !reference)
@@ -405,7 +486,7 @@ export function mountSpriteTabs(root, content, options) {
     }
     function closeSplit(id = active?.id) {
         const panel = dockview.getPanel(id);
-        if (!multiView || !panel || dockview.groups.length <= 1)
+        if (!multiView || !panel || !canCloseGroup(panel.api.group))
             return false;
         syncing = true;
         try {
@@ -498,6 +579,16 @@ export function mountSpriteTabs(root, content, options) {
         }
     });
     const removal = dockview.onDidRemovePanel(panel => {
+        const item = documents.get(panel.id);
+        if (item) {
+            documents.delete(panel.id);
+            item.session?.dispose();
+            return;
+        }
+        if (panel.id === stagePanelId) {
+            stagePane?.attach(null);
+            return;
+        }
         const view = views.get(panel.id);
         if (!view)
             return;
@@ -508,10 +599,13 @@ export function mountSpriteTabs(root, content, options) {
             closed.add(view.target);
     });
     const layout = multiView && dockview.onDidLayoutChange(refreshSurfaces);
+    const disconnectDocuments = multiView && getDocumentWorkspace(vm).connect(openDocument);
+    root.addEventListener('click', guardDocumentClose, true);
+    root.addEventListener('keydown', guardDocumentClose, true);
     vm.on('targetsUpdate', refresh);
     refresh();
     return {
-        select, split, closeSplit, activateView, setViewSection, syncActiveSection, refreshSurfaces,
+        select, openStage, closeStage, split, closeSplit, activateView, setViewSection, syncActiveSection, refreshSurfaces,
         selectAsset(id, kind, index) {
             if (active?.id === id && active.section === (kind === 'costumes' ? 1 : 2)) {
                 active.assets.selectors.get(kind)?.(index);
@@ -520,6 +614,14 @@ export function mountSpriteTabs(root, content, options) {
         currentView: () => active && describe(active),
         views: () => [...views.values()].map(view => describe(view)),
         dispose() {
+            if (disconnectDocuments)
+                disconnectDocuments();
+            root.removeEventListener('click', guardDocumentClose, true);
+            root.removeEventListener('keydown', guardDocumentClose, true);
+            for (const item of documents.values())
+                item.session?.dispose();
+            documents.clear();
+            stagePane?.attach(null);
             renameDialog?.remove();
             renameDialog = undefined;
             vm.removeListener('targetsUpdate', refresh);
@@ -628,6 +730,7 @@ function SpriteTabs(props) {
             resize: () => latest.current.resize(),
             reopenLabel: props.reopenLabel,
             multiView: props.multiView,
+            stagePane: props.stagePane,
             variables: hasVariables,
             locale: props.locale,
             viewAdapter: props.viewAdapter,
@@ -636,14 +739,17 @@ function SpriteTabs(props) {
         });
         controller.current = instance;
         latest.current.connect(instance);
+        if (props.multiView)
+            props.stagePane?.connect({ open: instance.openStage, close: instance.closeStage });
         return () => {
             frame.cancelAnimationFrame(restoreFrame);
             controller.current = null;
             latest.current.connect(null);
+            props.stagePane?.connect(null);
             instance.dispose();
         };
     }, [content, props.enabled, props.vm, props.reopenLabel, props.multiView, props.locale,
-        props.viewAdapter, props.renameLabels, hasVariables, hasToolbar, hasAssetPreview]);
+        props.viewAdapter, props.stagePane, props.renameLabels, hasVariables, hasToolbar, hasAssetPreview]);
     React.useLayoutEffect(() => {
         controller.current?.syncActiveSection(props.activeSection);
     }, [props.activeSection]);

package/dist/stage-surface.d.ts

@@ -1,4 +1,5 @@
 import type { Context, ElementType } from 'react';
+import type { useDockviewStage } from './dockview-stage.ts';
 interface StageWindowConnection<Target> {
     ready: Promise<Target>;
     disconnected: AbortSignal;
@@ -15,6 +16,7 @@ export declare function stageDockActionLabel(locale: string, { drawer, detached,
     detached: boolean;
     external?: boolean;
 }): "ドックに戻す" | "Dock stage" | "別窓で開く" | "別ウィンドウで開く" | "Open in a separate window" | "アンドック" | "Undock stage";
+type StagePlacement = Pick<NonNullable<ReturnType<typeof useDockviewStage>>, 'surface' | 'inlineRef' | 'docked'>;
 export declare function createStageSurface(React: typeof import('react'), { context, EdgeDrawer, Panel }: {
     context: Context<{
         locale: string;
@@ -23,9 +25,8 @@ export declare function createStageSurface(React: typeof import('react'), { cont
     }>;
     EdgeDrawer: ElementType;
     Panel: ElementType;
-}): ({ externalHost, onDockActionChange, ...props }: {
-    [x: string]: any;
-    externalHost: any;
-    onDockActionChange: any;
+}): ({ externalHost, onDockActionChange, placement, ...props }: {
+    placement?: StagePlacement;
+    [key: string]: any;
 }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/stage-surface.js

@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom';
 import { createDockview, themeLight } from 'dockview';
 export function createStagePopoutHost(host, title) {
     return {
@@ -58,7 +59,7 @@ export function stageDockActionLabel(locale, { drawer, detached, external }) {
     return japanese ? 'アンドック' : 'Undock stage';
 }
 export function createStageSurface(React, { context, EdgeDrawer, Panel }) {
-    return function StageSurface({ externalHost, onDockActionChange, ...props }) {
+    return function StageSurface({ externalHost, onDockActionChange, placement, ...props }) {
         const { locale, stageDrawer, setStageDrawerOpen } = React.useContext(context);
         const japanese = isJapanese(locale);
         const title = japanese ? 'ステージ' : 'Stage';
@@ -72,10 +73,16 @@ export function createStageSurface(React, { context, EdgeDrawer, Panel }) {
             externalOnly: stageDrawer,
             onDockActionChange: stageDrawer && !host ? undefined : onDockActionChange
         });
-        return stageDrawer ? React.createElement(EdgeDrawer, {
+        const inline = placement ? React.createElement('div', {
+            ref: placement.inlineRef,
+            'data-stage-in-workspace': placement.docked || undefined
+        }) : panel;
+        const dock = stageDrawer ? React.createElement(EdgeDrawer, {
             edge: 'right',
             label: japanese ? 'ステージを展開' : 'Reveal stage',
-            onOpenChange: setStageDrawerOpen
-        }, panel) : panel;
+            onOpenChange: setStageDrawerOpen,
+            portalContent: Boolean(placement)
+        }, inline) : inline;
+        return placement ? React.createElement(React.Fragment, null, dock, createPortal(panel, placement.surface)) : dock;
     };
 }

package/dist/standard-layout.d.ts

@@ -16,11 +16,12 @@ export declare function createStandardLayout(React: any, { styles, targetStyles,
         Container: any;
         render: any;
     }) => any;
-    EdgeDrawer: ({ edge, label, pinned, onOpenChange, children }: {
+    EdgeDrawer: ({ edge, label, pinned, onOpenChange, portalContent, children }: {
         edge: any;
         label: any;
         pinned?: boolean;
         onOpenChange: any;
+        portalContent?: boolean;
         children: any;
     }) => any;
     TargetLayout: ({ compact, render }: {

package/dist/standard-layout.js

@@ -136,30 +136,49 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
                 stageDrawer: plusLayout && stageDrawer, setStageDrawerOpen, locale: props.locale
             } }, Container ? element(Container, { locale: props.locale }, layout) : layout);
     }
-    function EdgeDrawer({ edge, label, pinned = false, onOpenChange, children }) {
+    function EdgeDrawer({ edge, label, pinned = false, onOpenChange, portalContent = false, children }) {
         const [hovered, setHovered] = useState(false);
         const [engaged, setEngaged] = useState(false);
+        const drawer = useRef(null);
         const trigger = useRef(null);
         const panel = useRef(null);
         const open = pinned || hovered || engaged;
         useLayoutEffect(() => { onOpenChange?.(open); }, [open, onOpenChange]);
+        const enter = (event) => {
+            if (event.pointerType === 'mouse')
+                setHovered(true);
+        };
+        const leave = () => setHovered(false);
+        const focus = (event) => {
+            if (panel.current.contains(event.target))
+                setEngaged(true);
+        };
+        const blur = (event) => {
+            if (!drawer.current.contains(event.relatedTarget))
+                setEngaged(false);
+        };
+        useLayoutEffect(() => {
+            if (!portalContent)
+                return;
+            const node = drawer.current;
+            // Use the DOM ancestry for a surface rendered through a portal.
+            node.addEventListener('pointerenter', enter);
+            node.addEventListener('pointerleave', leave);
+            node.addEventListener('focusin', focus);
+            node.addEventListener('focusout', blur);
+            return () => {
+                node.removeEventListener('pointerenter', enter);
+                node.removeEventListener('pointerleave', leave);
+                node.removeEventListener('focusin', focus);
+                node.removeEventListener('focusout', blur);
+            };
+        }, [portalContent]);
         return element('div', {
             className: styles.edgeDrawer,
+            ref: drawer,
             'data-edge': edge,
             'data-pinned': pinned || undefined,
-            onPointerEnter: event => {
-                if (event.pointerType === 'mouse')
-                    setHovered(true);
-            },
-            onPointerLeave: () => setHovered(false),
-            onFocus: event => {
-                if (panel.current.contains(event.target))
-                    setEngaged(true);
-            },
-            onBlur: event => {
-                if (!event.currentTarget.contains(event.relatedTarget))
-                    setEngaged(false);
-            },
+            ...(!portalContent && { onPointerEnter: enter, onPointerLeave: leave, onFocus: focus, onBlur: blur }),
             onKeyDown: event => {
                 if (event.key !== 'Escape' || pinned || !open || event.defaultPrevented)
                     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-layout",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Resizable panes and layout for TurboWarp Plus Editor",
   "type": "module",
   "license": "GPL-3.0-or-later",

package/src/dockview-stage.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+
+type StageCommands = {open(): void; close(): void};
+
+export interface DockviewStagePane {
+    title: string;
+    attach(destination: HTMLElement | null): void;
+    connect(commands: StageCommands | null): void;
+}
+
+export function useDockviewStage(enabled: boolean, locale: string) {
+    const [surface] = React.useState(() => {
+        if (!enabled) return null;
+        const node = document.createElement('div');
+        node.className = 'tw-plus-dockview-stage-surface';
+        return node;
+    });
+    const inline = React.useRef<HTMLElement>(null);
+    const dock = React.useRef<HTMLElement>(null);
+    const suspended = React.useRef(false);
+    const [docked, setDocked] = React.useState(false);
+    const [commands, setCommands] = React.useState<StageCommands>(null);
+
+    const move = React.useCallback(() => {
+        const destination = suspended.current ? inline.current : dock.current ?? inline.current;
+        if (surface && destination && surface.parentElement !== destination) destination.appendChild(surface);
+    }, [surface]);
+    const inlineRef = React.useCallback((element: HTMLElement | null) => {
+        inline.current = element;
+        if (surface && element) surface.dir = element.closest('[dir]')?.getAttribute('dir') ?? '';
+        move();
+    }, [move, surface]);
+    const suspend = React.useCallback((value: boolean) => {
+        suspended.current = value;
+        move();
+    }, [move]);
+
+    const japanese = /^ja(?:-|$)/i.test(locale);
+    const pane = React.useMemo<DockviewStagePane>(() => ({
+        title: japanese ? 'ステージ' : 'Stage',
+        attach(destination) {
+            dock.current = destination;
+            move();
+            setDocked(Boolean(destination));
+        },
+        connect: setCommands
+    }), [japanese, move]);
+    return surface && {
+        surface, pane, docked, commands, inlineRef, suspend,
+        openLabel: japanese ? '作業領域で開く' : 'Open stage in workspace',
+        closeLabel: japanese ? '作業領域から戻す' : 'Return stage from workspace'
+    };
+}

package/src/document-workspace.ts

@@ -0,0 +1,31 @@
+export interface DocumentPanelRequest {
+    reference: {providerId: string; documentId: string};
+    filename: string;
+    mount(element: HTMLElement, close: () => void): {requestClose(): void; dispose(): void};
+}
+
+function createDocumentWorkspace() {
+    let open: ((request: DocumentPanelRequest) => void) | undefined;
+    return {
+        open(request: DocumentPanelRequest) {
+            if (!open) return false;
+            open(request);
+            return true;
+        },
+        connect(handler: NonNullable<typeof open>) {
+            open = handler;
+            return () => { if (open === handler) open = undefined; };
+        }
+    };
+}
+
+const workspaces = new WeakMap<object, ReturnType<typeof createDocumentWorkspace>>();
+
+export function getDocumentWorkspace(vm: object) {
+    let workspace = workspaces.get(vm);
+    if (!workspace) {
+        workspace = createDocumentWorkspace();
+        workspaces.set(vm, workspace);
+    }
+    return workspace;
+}

package/src/editor.css

@@ -649,6 +649,10 @@ details.layout-menu button {
     height: fit-content;
 }
 
+.standard-body:has(.sprite-tabs[data-multi-view]) .stage-drawer {
+    z-index: var(--plus-docked-utility-layer);
+}
+
 .standard-body:has(.sprite-tabs[data-multi-view]):has(.retracted-targets) {
     padding-left: 0.625rem;
 }
@@ -754,3 +758,26 @@ details.layout-menu button {
     min-height: 0;
     min-width: 0;
 }
+
+:global(.tw-plus-dockview-stage-slot),
+:global(.tw-plus-dockview-stage-slot) > :global(.tw-plus-dockview-stage-surface) {
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+}
+
+:global(.tw-plus-dockview-stage-slot) > :global(.tw-plus-dockview-stage-surface) > .basic-panel {
+    block-size: 100%;
+}
+
+.floating-stage:has([data-stage-in-workspace]:empty) {
+    pointer-events: none;
+}
+
+:global(.tw-plus-document-slot) {
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+}

package/src/sprite-layout-menu.ts

@@ -3,6 +3,7 @@ interface SpriteLayoutCommands {
     splitBelow(): void;
     close(): void;
     canClose(): boolean;
+    canSplit?(): boolean;
 }
 
 const labels = {
@@ -72,6 +73,7 @@ export function createSpriteLayoutMenu(document: Document, locale: string, comma
     function open(last = false) {
         if (openedIn) return;
         openedIn = trigger.ownerDocument;
+        buttons[0].disabled = buttons[1].disabled = commands.canSplit?.() === false;
         buttons[2].disabled = !commands.canClose();
         topLayer = typeof popup.showPopover === 'function';
         if (topLayer) {

package/src/sprite-tabs.ts

@@ -7,6 +7,13 @@ import {SpriteAssetPane} from './sprite-asset-pane.tsx';
 import type {SpriteVariable} from './sprite-asset-pane.tsx';
 import {SpriteEditorToolbar, spriteEditorSections} from './sprite-editor-toolbar.tsx';
 import type {SpriteSearchResult} from './sprite-editor-toolbar.tsx';
+import type {DockviewStagePane} from './dockview-stage.ts';
+import {getDocumentWorkspace} from './document-workspace.ts';
+import type {DocumentPanelRequest} from './document-workspace.ts';
+
+export {getDocumentWorkspace} from './document-workspace.ts';
+
+export {useDockviewStage} from './dockview-stage.ts';
 
 interface CostumeAsset {
     encodeDataURI(): string;
@@ -111,6 +118,9 @@ function createAssetSelections(target: Target, source?: {
 
 export type SpriteSplitDirection = 'right' | 'below';
 
+const stagePanelId = 'tw-plus-stage-display';
+const documentComponent = 'tw-plus-document';
+
 interface TabOptions<Snapshot = unknown> {
     vm: Project;
     getSection(): number;
@@ -119,6 +129,7 @@ interface TabOptions<Snapshot = unknown> {
     resize(): void;
     reopenLabel: string;
     multiView?: boolean;
+    stagePane?: DockviewStagePane;
     variables?: boolean;
     locale?: string;
     viewAdapter?: SpriteTabAdapter<Snapshot>;
@@ -198,11 +209,13 @@ class SpriteTab extends DefaultTab {
 export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElement, options: TabOptions<Snapshot>) {
     const {vm, multiView = false, locale = 'en'} = options;
     const viewAdapter = multiView ? options.viewAdapter : undefined;
+    const stagePane = multiView ? options.stagePane : undefined;
     const usesNativeSection = (section: number) => section !== variableSection || !options.variables;
     const document = root.ownerDocument;
     const editLabel = /^ja(?:-|$)/i.test(locale) ? 'クリックしてこのビューで編集' : 'Activate this view to edit';
     const slots = new Map<string, TabSlot>();
     const views = new Map<string, View<Snapshot>>();
+    const documents = new Map<string, {request: DocumentPanelRequest; session?: ReturnType<DocumentPanelRequest['mount']>}>();
     const costumeIcons = new WeakMap<CostumeAsset, string>();
     const remembered = new WeakMap<Target, number>();
     const lastUsed = new WeakMap<Target, View<Snapshot>>();
@@ -225,8 +238,21 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
             if (!target || target.isStage || !vm.renameSprite) return [];
             return [{label: text.title, action: () => openRenameDialog(target)}];
         },
-        createComponent: () => {
+        createComponent: ({name, id: componentId}) => {
             const element = document.createElement('div');
+            if (name === documentComponent) {
+                element.className = 'tw-plus-document-slot';
+                return {element, init({api}) {
+                    const item = documents.get(componentId);
+                    element.dataset.providerId = item.request.reference.providerId;
+                    element.dataset.documentId = item.request.reference.documentId;
+                    item.session = item.request.mount(element, () => api.close());
+                }};
+            }
+            if (name === stagePanelId) {
+                element.className = 'tw-plus-dockview-stage-slot';
+                return {element, init() { stagePane.attach(element); }};
+            }
             element.className = 'tw-plus-sprite-tab-slot';
             const body = multiView ? document.createElement('div') : element;
             const toolbar = multiView && options.onToolbarSlots ? document.createElement('div') : undefined;
@@ -301,7 +327,8 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
             splitRight: () => { if (group.activePanel) split('right', group.activePanel.id); },
             splitBelow: () => { if (group.activePanel) split('below', group.activePanel.id); },
             close: () => { if (group.activePanel) closeSplit(group.activePanel.id); },
-            canClose: () => dockview.groups.length > 1
+            canClose: () => canCloseGroup(group),
+            canSplit: () => views.has(group.activePanel?.id)
         });
         return {...menu, init() {}};
     }
@@ -432,6 +459,11 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
     }
 
     function show(panel: IDockviewPanel | undefined) {
+        if (panel?.id === stagePanelId || documents.has(panel?.id)) {
+            // Utility panels do not change the VM editing target.
+            refreshSurfaces();
+            return;
+        }
         const next = views.get(panel?.id);
         if (active === next) {
             refreshSurfaces();
@@ -461,7 +493,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
 
     function add(target: Target, splitPosition?: {referencePanel: string; direction: SpriteSplitDirection}, section?: number) {
         let id = target.id;
-        if (splitPosition || views.has(id)) {
+        if (splitPosition || views.has(id) || id === stagePanelId || documents.has(id)) {
             do {
                 id = 'sprite-view-' + ++nextView;
             } while (views.has(id) || vm.runtime.targets.some(item => item.id === id));
@@ -500,6 +532,62 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         activateView(view?.id ?? add(target).id);
     }
 
+    function openDocument(request: DocumentPanelRequest) {
+        const {providerId, documentId} = request.reference;
+        for (const [id, {request: opened}] of documents) {
+            if (opened.reference.providerId === providerId && opened.reference.documentId === documentId) {
+                dockview.getPanel(id)?.api.setActive();
+                return;
+            }
+        }
+        let id: string;
+        do {
+            id = 'document-view-' + ++nextView;
+        } while (views.has(id) || documents.has(id) || vm.runtime.targets.some(target => target.id === id));
+        const title = request.filename + ' (' + providerId + ' / ' + documentId + ')';
+        documents.set(id, {request});
+        try {
+            dockview.addPanel({id, title, component: documentComponent, renderer: 'always'});
+        } catch (error) {
+            documents.get(id)?.session?.dispose();
+            documents.delete(id);
+            throw error;
+        }
+    }
+
+    function guardDocumentClose(event: MouseEvent | KeyboardEvent) {
+        const element = event.target as HTMLElement;
+        const tab = element.closest<HTMLElement>('[data-tab-panel-id]');
+        const item = documents.get(tab?.dataset.tabPanelId);
+        if (!item) return;
+        const close = event.type === 'click' ? Boolean(element.closest('.dv-default-tab-action')) :
+            event.target === tab && ['Delete', 'Backspace'].includes((event as KeyboardEvent).key);
+        if (!close) return;
+        event.preventDefault();
+        event.stopPropagation();
+        item.session?.requestClose();
+    }
+
+    function canCloseGroup(group: DockviewGroupPanel) {
+        return dockview.groups.length > 1 && group.panels.every(panel => !documents.has(panel.id));
+    }
+
+    function openStage() {
+        if (!stagePane) return;
+        const existing = dockview.getPanel(stagePanelId);
+        if (existing) {
+            existing.api.setActive();
+            return;
+        }
+        const reference = dockview.activePanel;
+        dockview.addPanel({id: stagePanelId, title: stagePane.title, component: stagePanelId, renderer: 'always',
+            position: reference ? {referencePanel: reference.id, direction: 'right'} : undefined});
+    }
+
+    function closeStage() {
+        dockview.getPanel(stagePanelId)?.api.close();
+    }
+
     function split(direction: SpriteSplitDirection, id = active?.id) {
         const reference = views.get(id);
         if (!multiView || !reference) return;
@@ -511,7 +599,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
 
     function closeSplit(id = active?.id) {
         const panel = dockview.getPanel(id);
-        if (!multiView || !panel || dockview.groups.length <= 1) return false;
+        if (!multiView || !panel || !canCloseGroup(panel.api.group)) return false;
         syncing = true;
         try {
             dockview.removeGroup(panel.api.group);
@@ -595,6 +683,16 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         }
     });
     const removal = dockview.onDidRemovePanel(panel => {
+        const item = documents.get(panel.id);
+        if (item) {
+            documents.delete(panel.id);
+            item.session?.dispose();
+            return;
+        }
+        if (panel.id === stagePanelId) {
+            stagePane?.attach(null);
+            return;
+        }
         const view = views.get(panel.id);
         if (!view) return;
         if (view === active) remembered.set(view.target, usesNativeSection(view.section) ? options.getSection() : view.section);
@@ -602,10 +700,13 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         if (![...views.values()].some(item => item.target === view.target)) closed.add(view.target);
     });
     const layout = multiView && dockview.onDidLayoutChange(refreshSurfaces);
+    const disconnectDocuments = multiView && getDocumentWorkspace(vm).connect(openDocument);
+    root.addEventListener('click', guardDocumentClose, true);
+    root.addEventListener('keydown', guardDocumentClose, true);
     vm.on('targetsUpdate', refresh);
     refresh();
     return {
-        select, split, closeSplit, activateView, setViewSection, syncActiveSection, refreshSurfaces,
+        select, openStage, closeStage, split, closeSplit, activateView, setViewSection, syncActiveSection, refreshSurfaces,
         selectAsset(id: string, kind: AssetKind, index: number) {
             if (active?.id === id && active.section === (kind === 'costumes' ? 1 : 2)) {
                 active.assets.selectors.get(kind)?.(index);
@@ -614,6 +715,12 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         currentView: () => active && describe(active),
         views: () => [...views.values()].map(view => describe(view)),
         dispose() {
+            if (disconnectDocuments) disconnectDocuments();
+            root.removeEventListener('click', guardDocumentClose, true);
+            root.removeEventListener('keydown', guardDocumentClose, true);
+            for (const item of documents.values()) item.session?.dispose();
+            documents.clear();
+            stagePane?.attach(null);
             renameDialog?.remove();
             renameDialog = undefined;
             vm.removeListener('targetsUpdate', refresh);
@@ -746,6 +853,7 @@ function SpriteTabs<Snapshot>(props: SpriteTabsProps<Snapshot>) {
             resize: () => latest.current.resize(),
             reopenLabel: props.reopenLabel,
             multiView: props.multiView,
+            stagePane: props.stagePane,
             variables: hasVariables,
             locale: props.locale,
             viewAdapter: props.viewAdapter,
@@ -754,14 +862,16 @@ function SpriteTabs<Snapshot>(props: SpriteTabsProps<Snapshot>) {
         });
         controller.current = instance;
         latest.current.connect(instance);
+        if (props.multiView) props.stagePane?.connect({open: instance.openStage, close: instance.closeStage});
         return () => {
             frame.cancelAnimationFrame(restoreFrame);
             controller.current = null;
             latest.current.connect(null);
+            props.stagePane?.connect(null);
             instance.dispose();
         };
     }, [content, props.enabled, props.vm, props.reopenLabel, props.multiView, props.locale,
-        props.viewAdapter, props.renameLabels, hasVariables, hasToolbar, hasAssetPreview]);
+        props.viewAdapter, props.stagePane, props.renameLabels, hasVariables, hasToolbar, hasAssetPreview]);
     React.useLayoutEffect(() => {
         controller.current?.syncActiveSection(props.activeSection);
     }, [props.activeSection]);

package/src/stage-surface.ts

@@ -1,4 +1,6 @@
 import type {Context, ElementType} from 'react';
+import {createPortal} from 'react-dom';
+import type {useDockviewStage} from './dockview-stage.ts';
 import {createDockview, themeLight} from 'dockview';
 
 interface StageWindowConnection<Target> {
@@ -74,6 +76,8 @@ export function stageDockActionLabel(locale: string, {drawer, detached, external
     return japanese ? 'アンドック' : 'Undock stage';
 }
 
+type StagePlacement = Pick<NonNullable<ReturnType<typeof useDockviewStage>>, 'surface' | 'inlineRef' | 'docked'>;
+
 export function createStageSurface(React: typeof import('react'), {
     context, EdgeDrawer, Panel
 }: {
@@ -81,7 +85,7 @@ export function createStageSurface(React: typeof import('react'), {
     EdgeDrawer: ElementType;
     Panel: ElementType;
 }) {
-    return function StageSurface({externalHost, onDockActionChange, ...props}) {
+    return function StageSurface({externalHost, onDockActionChange, placement, ...props}: {placement?: StagePlacement; [key: string]: any}) {
         const {locale, stageDrawer, setStageDrawerOpen} = React.useContext(context);
         const japanese = isJapanese(locale);
         const title = japanese ? 'ステージ' : 'Stage';
@@ -95,10 +99,16 @@ export function createStageSurface(React: typeof import('react'), {
             externalOnly: stageDrawer,
             onDockActionChange: stageDrawer && !host ? undefined : onDockActionChange
         });
-        return stageDrawer ? React.createElement(EdgeDrawer, {
+        const inline = placement ? React.createElement('div', {
+            ref: placement.inlineRef,
+            'data-stage-in-workspace': placement.docked || undefined
+        }) : panel;
+        const dock = stageDrawer ? React.createElement(EdgeDrawer, {
             edge: 'right',
             label: japanese ? 'ステージを展開' : 'Reveal stage',
-            onOpenChange: setStageDrawerOpen
-        }, panel) : panel;
+            onOpenChange: setStageDrawerOpen,
+            portalContent: Boolean(placement)
+        }, inline) : inline;
+        return placement ? React.createElement(React.Fragment, null, dock, createPortal(panel, placement.surface)) : dock;
     };
 }

package/src/standard-layout.ts

@@ -151,29 +151,49 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
             Container ? element(Container, {locale: props.locale}, layout) : layout);
     }
 
-    function EdgeDrawer({edge, label, pinned = false, onOpenChange, children}) {
+    function EdgeDrawer({edge, label, pinned = false, onOpenChange, portalContent = false, children}) {
         const [hovered, setHovered] = useState(false);
         const [engaged, setEngaged] = useState(false);
+        const drawer = useRef(null);
         const trigger = useRef(null);
         const panel = useRef(null);
         const open = pinned || hovered || engaged;
 
         useLayoutEffect(() => {onOpenChange?.(open);}, [open, onOpenChange]);
 
+        const enter = (event: PointerEvent) => {
+            if (event.pointerType === 'mouse') setHovered(true);
+        };
+        const leave = () => setHovered(false);
+        const focus = (event: FocusEvent) => {
+            if (panel.current.contains(event.target as Node)) setEngaged(true);
+        };
+        const blur = (event: FocusEvent) => {
+            if (!drawer.current.contains(event.relatedTarget as Node)) setEngaged(false);
+        };
+
+        useLayoutEffect(() => {
+            if (!portalContent) return;
+            const node = drawer.current as HTMLElement;
+            // Use the DOM ancestry for a surface rendered through a portal.
+            node.addEventListener('pointerenter', enter);
+            node.addEventListener('pointerleave', leave);
+            node.addEventListener('focusin', focus);
+            node.addEventListener('focusout', blur);
+            return () => {
+                node.removeEventListener('pointerenter', enter);
+                node.removeEventListener('pointerleave', leave);
+                node.removeEventListener('focusin', focus);
+                node.removeEventListener('focusout', blur);
+            };
+        }, [portalContent]);
+
         return element('div', {
             className: styles.edgeDrawer,
+            ref: drawer,
             'data-edge': edge,
             'data-pinned': pinned || undefined,
-            onPointerEnter: event => {
-                if (event.pointerType === 'mouse') setHovered(true);
-            },
-            onPointerLeave: () => setHovered(false),
-            onFocus: event => {
-                if (panel.current.contains(event.target)) setEngaged(true);
-            },
-            onBlur: event => {
-                if (!event.currentTarget.contains(event.relatedTarget)) setEngaged(false);
-            },
+            ...(!portalContent && {onPointerEnter: enter, onPointerLeave: leave, onFocus: focus, onBlur: blur}),
             onKeyDown: event => {
                 if (event.key !== 'Escape' || pinned || !open || event.defaultPrevented) return;
                 setHovered(false);