@kubohiroya/turbowarp-plus-editor-layout 0.1.1 → 0.1.2

package/dist/sprite-tabs.js

@@ -1,6 +1,44 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
 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";
+const variableSection = spriteEditorSections.indexOf('variables');
+function createAssetSelections(target, source) {
+    const selected = new Map(source?.selected);
+    const layouts = new Map(source?.layouts);
+    const scroll = new Map(source?.scroll);
+    const selectors = new Map();
+    const forKind = (kind) => ({
+        restore(current, assets) {
+            if (current !== target)
+                return;
+            const index = assets.indexOf(selected.get(kind));
+            if (index >= 0)
+                return index;
+        },
+        remember(current, asset, select) {
+            if (current !== target)
+                return;
+            if (asset)
+                selected.set(kind, asset);
+            else
+                selected.delete(kind);
+            if (select)
+                selectors.set(kind, select);
+        },
+        rememberLayout(render) {
+            layouts.set(kind, render);
+        },
+        getScrollTop: () => scroll.get(kind) ?? 0,
+        rememberScrollTop(position) {
+            scroll.set(kind, position);
+        }
+    });
+    const ports = { costumes: forKind('costumes'), sounds: forKind('sounds') };
+    return { selected, ports, layouts, selectors, scroll };
+}
 const renameLabels = {
     en: { title: 'Rename sprite', name: 'Sprite name', cancel: 'Cancel', save: 'Rename' },
     ja: { title: 'スプライト名の変更', name: 'スプライト名', cancel: 'キャンセル', save: '変更' }
@@ -28,33 +66,96 @@ class SpriteTab extends DefaultTab {
     }
 }
 export function mountSpriteTabs(root, content, options) {
-    const { vm } = options;
+    const { vm, multiView = false, locale = 'en' } = options;
+    const viewAdapter = multiView ? options.viewAdapter : 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 targets = new Map();
+    const views = new Map();
     const costumeIcons = new WeakMap();
-    const sections = new WeakMap();
+    const remembered = new WeakMap();
+    const lastUsed = new WeakMap();
     const closed = new WeakSet();
     let active;
     let observed = vm.editingTarget;
     let syncing = false;
+    let nextView = 0;
     let renameDialog;
     const text = options.renameLabels ?? renameLabels.en;
     const dockview = createDockview(root, {
         theme: themeLight,
         disableFloatingGroups: true,
+        ...(multiView && { createRightHeaderActionComponent: createLayoutMenu }),
         defaultTabComponent: 'sprite',
         createTabComponent: () => new SpriteTab(document),
         getTabContextMenuItems: ({ panel }) => {
-            const target = targets.get(panel.id);
-            if (!target || target.isStage)
+            const target = views.get(panel.id)?.target;
+            if (!target || target.isStage || !vm.renameSprite)
                 return [];
             return [{ label: text.title, action: () => openRenameDialog(target) }];
         },
         createComponent: () => {
             const element = document.createElement('div');
             element.className = 'tw-plus-sprite-tab-slot';
-            return { element, init: ({ api }) => { slots.set(api.id, element); } };
+            const body = multiView ? document.createElement('div') : element;
+            const toolbar = multiView && options.onToolbarSlots ? document.createElement('div') : undefined;
+            const assetPreview = multiView && options.onAssetPreviewSlots ? document.createElement('div') : undefined;
+            let id;
+            let dimensions;
+            if (multiView) {
+                element.classList.add('tw-plus-sprite-tab-slot--split');
+                body.className = 'tw-plus-sprite-tab-body';
+                if (toolbar)
+                    body.setAttribute('role', 'tabpanel');
+                if (toolbar)
+                    element.append(toolbar);
+                if (assetPreview) {
+                    assetPreview.className = 'tw-plus-sprite-tab-asset-preview';
+                    assetPreview.hidden = true;
+                    assetPreview.tabIndex = 0;
+                    assetPreview.setAttribute('role', 'group');
+                    assetPreview.setAttribute('aria-label', editLabel);
+                    assetPreview.addEventListener('keydown', event => {
+                        if (event.target !== assetPreview || (event.key !== 'Enter' && event.key !== ' '))
+                            return;
+                        event.preventDefault();
+                        event.stopPropagation();
+                        activateView(id);
+                    });
+                    body.append(assetPreview);
+                }
+                element.append(body);
+                body.addEventListener('click', event => {
+                    if (active?.id === id)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    activateView(id);
+                }, { capture: true });
+            }
+            const slot = { body, toolbar, assetPreview };
+            return {
+                element,
+                init(params) {
+                    id = params.api.id;
+                    slots.set(id, slot);
+                    if (toolbar)
+                        body.id = id + '-content';
+                    if (multiView) {
+                        dimensions = params.api.onDidDimensionsChange(() => {
+                            if (active?.id === id && body.contains(content))
+                                options.resize();
+                        });
+                    }
+                },
+                dispose() {
+                    dimensions?.dispose();
+                    clearInactive(slot);
+                    if (slots.get(id) === slot)
+                        slots.delete(id);
+                }
+            };
         },
         createWatermarkComponent: () => {
             const button = document.createElement('button');
@@ -67,39 +168,26 @@ export function mountSpriteTabs(root, content, options) {
             return { element: button, init() { } };
         }
     });
-    // The host has one editable surface. Keep reordering inside its tab group.
     const preventSplit = (event) => {
         if (event.kind === 'edge' || event.kind === 'content' && event.position !== 'center')
             event.preventDefault();
     };
-    const overlay = dockview.onWillShowOverlay(preventSplit);
-    const drop = dockview.onWillDrop(preventSplit);
-    function show(panel) {
-        const next = targets.get(panel?.id);
-        if (active === next)
-            return;
-        if (active)
-            sections.set(active, options.getSection());
-        const section = sections.get(next) ?? options.getSection();
-        active = next;
-        if (!next) {
-            if (options.park)
-                options.park();
-            else
-                content.remove();
-            options.selectTarget('');
-            return;
-        }
-        slots.get(next.id).appendChild(content);
-        if (vm.editingTarget !== next)
-            vm.setEditingTarget(next.id);
-        observed = vm.editingTarget;
-        options.activateSection(section);
-        options.selectTarget(next.id);
-        options.resize();
+    const overlay = !multiView && dockview.onWillShowOverlay(preventSplit);
+    const drop = !multiView && dockview.onWillDrop(preventSplit);
+    function createLayoutMenu(group) {
+        const menu = createSpriteLayoutMenu(document, locale, {
+            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
+        });
+        return { ...menu, init() { } };
     }
     function isOpen(target) {
-        return targets.get(target.id) === target && vm.runtime.targets.includes(target);
+        return [...views.values()].some(view => view.target === target) && vm.runtime.targets.includes(target);
     }
     function openRenameDialog(target) {
         if (renameDialog || !isOpen(target))
@@ -132,7 +220,7 @@ export function mountSpriteTabs(root, content, options) {
             renameDialog = undefined;
             if (dialog.returnValue === 'save' && input.value.trim() && isOpen(target) &&
                 input.value !== target.getName())
-                vm.renameSprite(target.id, input.value);
+                vm.renameSprite?.(target.id, input.value);
         }, { once: true });
         renameDialog = dialog;
         root.append(dialog);
@@ -147,19 +235,211 @@ export function mountSpriteTabs(root, content, options) {
             costumeIcons.set(asset, asset.encodeDataURI());
         return costumeIcons.get(asset);
     }
-    function add(target) {
-        targets.set(target.id, target);
-        return dockview.addPanel({
-            id: target.id, title: target.getName(), component: 'sprite', inactive: true,
-            params: { icon: getIcon(target) }
-        });
+    function describe(view, panel = dockview.getPanel(view.id)) {
+        return {
+            id: view.id, targetId: view.target.id, isStage: view.target.isStage,
+            section: view.section, groupId: panel?.api.group.id ?? '',
+            active: active === view, groupActive: panel?.api.isGroupActive ?? false
+        };
+    }
+    function clearInactive(slot) {
+        if (slot.assetPreview)
+            slot.assetPreview.hidden = true;
+        if (slot.inactiveSection === undefined)
+            return;
+        slot.clearInactive?.();
+        slot.clearInactive = undefined;
+        slot.inactiveSection = undefined;
+        // Keep the React portal host mounted while its children reconcile.
+        slot.body.replaceChildren(...(slot.assetPreview ? [slot.assetPreview] : []));
+    }
+    function refreshSurfaces() {
+        if (!multiView)
+            return;
+        const toolbars = [];
+        const assetPreviews = [];
+        for (const [id, slot] of slots) {
+            const view = views.get(id);
+            const panel = dockview.getPanel(id);
+            if (!view || !panel || panel.api.group.activePanel !== panel) {
+                clearInactive(slot);
+                continue;
+            }
+            const descriptor = describe(view, panel);
+            if (slot.toolbar) {
+                toolbars.push({ view: descriptor, element: slot.toolbar });
+                slot.body.setAttribute('aria-labelledby', id + '-section-' + (spriteEditorSections[view.section] ?? 'code'));
+            }
+            if (view.section === variableSection && options.variables && slot.assetPreview) {
+                slot.assetPreview.hidden = false;
+                assetPreviews.push({ id, targetId: descriptor.targetId, kind: 'variables', editable: active === view,
+                    element: slot.assetPreview });
+                continue;
+            }
+            if (active === view)
+                continue;
+            const kind = view.section === 1 ? 'costumes' : view.section === 2 ? 'sounds' : undefined;
+            if (kind && slot.assetPreview) {
+                clearInactive(slot);
+                slot.assetPreview.hidden = false;
+                assetPreviews.push({ id, targetId: descriptor.targetId, kind, element: slot.assetPreview,
+                    selected: view.assets.selected.get(kind), editable: false, renderLayout: view.assets.layouts.get(kind), scrollTop: view.assets.scroll.get(kind) });
+                continue;
+            }
+            if (slot.inactiveSection === view.section)
+                continue;
+            clearInactive(slot);
+            slot.inactiveSection = view.section;
+            if (viewAdapter) {
+                const cleanup = viewAdapter.renderInactive(slot.body, descriptor, view.snapshots?.get(view.section)?.snapshot);
+                if (cleanup)
+                    slot.clearInactive = cleanup;
+            }
+            else {
+                const button = slot.body.ownerDocument.createElement('button');
+                button.type = 'button';
+                button.textContent = editLabel;
+                slot.body.append(button);
+            }
+        }
+        options.onToolbarSlots?.(toolbars);
+        options.onAssetPreviewSlots?.(assetPreviews);
+    }
+    function remember(view) {
+        if (usesNativeSection(view.section))
+            view.section = options.getSection();
+        remembered.set(view.target, view.section);
+        if (!viewAdapter || !usesNativeSection(view.section) || !slots.get(view.id)?.body.contains(content))
+            return;
+        const descriptor = describe(view);
+        const snapshot = viewAdapter.capture(descriptor);
+        view.snapshots ??= new Map();
+        const previous = view.snapshots.get(view.section);
+        if (previous && snapshot !== previous.snapshot)
+            viewAdapter.dispose?.(previous.view, previous.snapshot);
+        view.snapshots.set(view.section, { snapshot, view: descriptor });
+    }
+    function show(panel) {
+        const next = views.get(panel?.id);
+        if (active === next) {
+            refreshSurfaces();
+            return;
+        }
+        if (active && views.get(active.id) === active)
+            remember(active);
+        active = next;
+        if (!next) {
+            if (options.park)
+                options.park();
+            else
+                content.remove();
+            options.selectTarget('');
+        }
+        else {
+            if (!multiView)
+                next.section = remembered.get(next.target) ?? options.getSection();
+            const slot = slots.get(next.id);
+            clearInactive(slot);
+            slot.body.appendChild(content);
+            if (vm.editingTarget !== next.target)
+                vm.setEditingTarget(next.target.id);
+            observed = vm.editingTarget;
+            options.selectTarget(next.target.id, multiView ? next.assets.ports : undefined);
+            content.hidden = !usesNativeSection(next.section);
+            if (usesNativeSection(next.section))
+                options.activateSection(next.section);
+            viewAdapter?.restore(describe(next, panel), next.snapshots?.get(next.section)?.snapshot);
+            options.resize();
+        }
+        refreshSurfaces();
+    }
+    function add(target, splitPosition, section) {
+        let id = target.id;
+        if (splitPosition || views.has(id)) {
+            do {
+                id = 'sprite-view-' + ++nextView;
+            } while (views.has(id) || vm.runtime.targets.some(item => item.id === id));
+        }
+        const source = splitPosition && views.get(splitPosition.referencePanel);
+        views.set(id, { id, target, section: section ?? remembered.get(target) ?? options.getSection(),
+            assets: createAssetSelections(target, source?.assets) });
+        try {
+            return dockview.addPanel({ id, title: target.getName(), component: 'sprite', inactive: !splitPosition,
+                position: splitPosition, params: { icon: getIcon(target) } });
+        }
+        catch (error) {
+            views.delete(id);
+            throw error;
+        }
+    }
+    function activateView(id) {
+        const view = views.get(id);
+        if (!view)
+            return false;
+        lastUsed.set(view.target, view);
+        dockview.getPanel(id)?.api.setActive();
+        return true;
     }
     function select(id) {
         const target = vm.runtime.targets.find(item => item.id === id && item.isOriginal);
         if (!target)
             return;
         closed.delete(target);
-        (dockview.getPanel(id) ?? add(target)).api.setActive();
+        if (active?.target === target && views.get(active.id) === active) {
+            activateView(active.id);
+            return;
+        }
+        const recent = lastUsed.get(target);
+        const view = recent && views.get(recent.id) === recent ? recent :
+            [...views.values()].find(item => item.target === target);
+        activateView(view?.id ?? add(target).id);
+    }
+    function split(direction, id = active?.id) {
+        const reference = views.get(id);
+        if (!multiView || !reference)
+            return;
+        const section = reference === active && usesNativeSection(reference.section) ? options.getSection() : reference.section;
+        const panel = add(reference.target, { referencePanel: id, direction }, section);
+        activateView(panel.id);
+        return panel.id;
+    }
+    function closeSplit(id = active?.id) {
+        const panel = dockview.getPanel(id);
+        if (!multiView || !panel || dockview.groups.length <= 1)
+            return false;
+        syncing = true;
+        try {
+            dockview.removeGroup(panel.api.group);
+            show(dockview.activePanel);
+        }
+        finally {
+            syncing = false;
+        }
+        return true;
+    }
+    function setViewSection(id, section) {
+        const view = views.get(id);
+        if (!view || !Number.isInteger(section) || section < 0 || section > (options.variables ? variableSection : 2) || view.section === section)
+            return false;
+        if (view === active && viewAdapter)
+            remember(view);
+        view.section = section;
+        if (view === active) {
+            content.hidden = !usesNativeSection(section);
+            if (usesNativeSection(section)) {
+                options.activateSection(section);
+                options.resize();
+            }
+            viewAdapter?.restore(describe(view), view.snapshots?.get(section)?.snapshot);
+        }
+        refreshSurfaces();
+        return true;
+    }
+    function syncActiveSection(section) {
+        if (!active || !usesNativeSection(active.section) || active.section === section)
+            return;
+        active.section = section;
+        refreshSurfaces();
     }
     function refresh() {
         if (syncing)
@@ -168,23 +448,24 @@ export function mountSpriteTabs(root, content, options) {
         try {
             const available = new Set(vm.runtime.targets.filter(target => target.isOriginal));
             const editing = vm.editingTarget;
-            for (const [id, target] of targets) {
-                if (!available.has(target))
+            for (const [id, view] of views) {
+                if (!available.has(view.target))
                     dockview.getPanel(id)?.api.close();
             }
+            const represented = new Set();
+            for (const [id, view] of views) {
+                represented.add(view.target);
+                const panel = dockview.getPanel(id);
+                if (panel && panel.title !== view.target.getName())
+                    panel.api.setTitle(view.target.getName());
+                const icon = getIcon(view.target);
+                if (panel && panel.api.getParameters().icon !== icon)
+                    panel.api.updateParameters({ icon });
+            }
             for (const target of available) {
-                if (target.isStage && target !== editing && !targets.has(target.id))
-                    continue;
-                const panel = dockview.getPanel(target.id);
-                if (panel) {
-                    if (panel.title !== target.getName())
-                        panel.api.setTitle(target.getName());
-                    const icon = getIcon(target);
-                    if (panel.api.getParameters().icon !== icon)
-                        panel.api.updateParameters({ icon });
-                }
-                else if (!closed.has(target))
+                if (!represented.has(target) && (!target.isStage || target === editing) && !closed.has(target)) {
                     add(target);
+                }
             }
             if (editing && (observed !== editing || !active && !closed.has(editing))) {
                 observed = editing;
@@ -196,6 +477,15 @@ export function mountSpriteTabs(root, content, options) {
             syncing = false;
         }
     }
+    function disposeView(view) {
+        for (const stored of view.snapshots?.values() ?? [])
+            viewAdapter?.dispose?.(stored.view, stored.snapshot);
+        const slot = slots.get(view.id);
+        if (slot)
+            clearInactive(slot);
+        slots.delete(view.id);
+        views.delete(view.id);
+    }
     const selection = dockview.onDidActivePanelChange(({ panel }) => {
         if (syncing)
             return;
@@ -208,29 +498,76 @@ export function mountSpriteTabs(root, content, options) {
         }
     });
     const removal = dockview.onDidRemovePanel(panel => {
-        const target = targets.get(panel.id);
-        if (target)
-            closed.add(target);
-        targets.delete(panel.id);
-        slots.delete(panel.id);
+        const view = views.get(panel.id);
+        if (!view)
+            return;
+        if (view === active)
+            remembered.set(view.target, usesNativeSection(view.section) ? options.getSection() : view.section);
+        disposeView(view);
+        if (![...views.values()].some(item => item.target === view.target))
+            closed.add(view.target);
     });
+    const layout = multiView && dockview.onDidLayoutChange(refreshSurfaces);
     vm.on('targetsUpdate', refresh);
     refresh();
     return {
-        select,
+        select, 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);
+            }
+        },
+        currentView: () => active && describe(active),
+        views: () => [...views.values()].map(view => describe(view)),
         dispose() {
             renameDialog?.remove();
             renameDialog = undefined;
             vm.removeListener('targetsUpdate', refresh);
             selection.dispose();
             removal.dispose();
-            overlay.dispose();
-            drop.dispose();
+            if (overlay)
+                overlay.dispose();
+            if (drop)
+                drop.dispose();
+            if (layout)
+                layout.dispose();
+            for (const view of views.values())
+                disposeView(view);
             content.remove();
             dockview.dispose();
         }
     };
 }
+function AssetPreview({ locale, data, kind, selected, renderLayout, scrollTop }) {
+    const chosen = data.items.find(item => item.asset === selected) ??
+        data.items.find(item => item.asset === data.defaultAsset) ?? data.items[0];
+    const peaks = React.useMemo(() => {
+        if (!chosen?.buffer?.length)
+            return undefined;
+        const samples = chosen.buffer.getChannelData(0);
+        const chunk = Math.ceil(samples.length / 192);
+        const levels = [];
+        for (let offset = 0; offset < samples.length; offset += chunk) {
+            let peak = 0;
+            for (let i = offset; i < Math.min(offset + chunk, samples.length); i++) {
+                peak = Math.max(peak, Math.abs(samples[i]));
+            }
+            levels.push(peak);
+        }
+        return levels;
+    }, [chosen?.buffer]);
+    const index = chosen ? data.items.indexOf(chosen) : -1;
+    const pane = React.createElement(SpriteAssetPane, {
+        locale, kind, editable: false, onSelect() { },
+        detailOnly: Boolean(renderLayout),
+        selectedId: chosen ? String(index) : null,
+        items: data.items.map((item, position) => ({
+            id: String(position), name: item.name, imageUrl: item.imageUrl,
+            duration: item.duration ?? item.buffer?.duration, peaks: item === chosen ? peaks : undefined
+        }))
+    });
+    return renderLayout ? renderLayout(data.items, index, pane, scrollTop ?? 0) : pane;
+}
 function SpriteTabs(props) {
     const root = React.useRef(null);
     const sections = React.useRef(null);
@@ -242,6 +579,12 @@ function SpriteTabs(props) {
         node.className = 'tw-plus-sprite-tab-editor';
         return node;
     });
+    const [toolbarSlots, setToolbarSlots] = React.useState([]);
+    const [assetPreviewSlots, setAssetPreviewSlots] = React.useState([]);
+    const controller = React.useRef(null);
+    const hasVariables = Boolean(props.getVariables);
+    const hasToolbar = Boolean(props.renderToolbar) || hasVariables;
+    const hasAssetPreview = Boolean(props.getAssetPreview) || hasVariables;
     React.useLayoutEffect(() => {
         sections.current.append(...props.slots);
         parking.current.appendChild(content);
@@ -252,19 +595,26 @@ function SpriteTabs(props) {
     }, [content, props.slots]);
     React.useLayoutEffect(() => {
         if (!props.enabled) {
+            setToolbarSlots([]);
+            setAssetPreviewSlots([]);
+            content.hidden = false;
             root.current.appendChild(content);
             latest.current.resize();
             return () => content.remove();
         }
-        const park = () => parking.current?.appendChild(content);
-        park();
         const frame = content.ownerDocument.defaultView;
         let restoreFrame;
-        const controller = mountSpriteTabs(root.current, content, {
+        const park = () => parking.current?.appendChild(content);
+        park();
+        const instance = mountSpriteTabs(root.current, content, {
             vm: props.vm,
             getSection: () => latest.current.activeSection,
             activateSection(section) {
                 frame.cancelAnimationFrame(restoreFrame);
+                if (latest.current.activateSection) {
+                    latest.current.activateSection(section);
+                    return;
+                }
                 // Dockview attaches the active panel after dispatching the selection event.
                 restoreFrame = frame.requestAnimationFrame(() => {
                     if (content.isConnected && section !== latest.current.activeSection) {
@@ -272,29 +622,96 @@ function SpriteTabs(props) {
                     }
                 });
             },
-            selectTarget: id => latest.current.selectTarget(id),
-            resize: () => latest.current.resize(),
             park,
+            renameLabels: props.renameLabels,
+            selectTarget: (id, assets) => latest.current.selectTarget(id, assets),
+            resize: () => latest.current.resize(),
             reopenLabel: props.reopenLabel,
-            renameLabels: props.renameLabels
+            multiView: props.multiView,
+            variables: hasVariables,
+            locale: props.locale,
+            viewAdapter: props.viewAdapter,
+            onToolbarSlots: hasToolbar ? setToolbarSlots : undefined,
+            onAssetPreviewSlots: hasAssetPreview ? setAssetPreviewSlots : undefined
         });
-        latest.current.connect(controller);
+        controller.current = instance;
+        latest.current.connect(instance);
         return () => {
             frame.cancelAnimationFrame(restoreFrame);
+            controller.current = null;
             latest.current.connect(null);
-            controller.dispose();
+            instance.dispose();
         };
-    }, [content, props.enabled, props.vm, props.reopenLabel, props.renameLabels]);
+    }, [content, props.enabled, props.vm, props.reopenLabel, props.multiView, props.locale,
+        props.viewAdapter, props.renameLabels, hasVariables, hasToolbar, hasAssetPreview]);
+    React.useLayoutEffect(() => {
+        controller.current?.syncActiveSection(props.activeSection);
+    }, [props.activeSection]);
+    const workspace = controller.current;
     // The native tab controller also reacts to bubbled events from elements with role="tab".
     const isolateDockviewTabs = (event) => {
         if (!content.contains(event.target))
             event.stopPropagation();
     };
-    return React.createElement('div', { className: props.className }, React.createElement('div', { ref: root, onClick: isolateDockviewTabs, onKeyDown: isolateDockviewTabs }), React.createElement('div', { ref: parking, hidden: true }), createPortal(React.createElement(React.Fragment, null, props.children, React.createElement('div', { ref: sections, className: 'tw-plus-sprite-tab-sections' })), content));
+    return React.createElement('div', { className: props.className,
+        'data-multi-view': props.enabled && props.multiView || undefined }, React.createElement('div', { ref: root, onClick: isolateDockviewTabs, onKeyDown: isolateDockviewTabs }), React.createElement('div', { ref: parking, hidden: true }), createPortal(React.createElement(React.Fragment, null, props.multiView && props.getVariables ? React.createElement('div', { hidden: true }, props.children) : props.children, React.createElement('div', { ref: sections, className: 'tw-plus-sprite-tab-sections' })), content), toolbarSlots.map(({ view, element }) => {
+        const actions = {
+            activate: () => { workspace?.activateView(view.id); },
+            setSection: (section) => {
+                workspace?.setViewSection(view.id, section);
+                workspace?.activateView(view.id);
+            }
+        };
+        const currentSection = spriteEditorSections[view.section] ?? 'code';
+        const toolbar = props.renderToolbar?.(view, actions) ?? (props.getVariables &&
+            React.createElement(SpriteEditorToolbar, {
+                viewId: view.id, locale: props.locale, section: currentSection, isStage: view.isStage,
+                activeGroup: view.groupActive,
+                actions: view.active && currentSection !== 'variables' ? props.activeTools : undefined,
+                onSectionChange: section => actions.setSection(spriteEditorSections.indexOf(section)),
+                search: {
+                    onFocus: actions.activate,
+                    find(query, section) {
+                        let items = [];
+                        if (section === 'code')
+                            items = props.getCodeSearchItems?.(view.targetId) ?? [];
+                        else if (section === 'variables') {
+                            items = props.getVariables(view.targetId).map(variable => ({ id: variable.id, label: variable.name }));
+                        }
+                        else {
+                            items = props.getAssetPreview?.(view.targetId, section).items.map((item, index) => ({ id: String(index), label: item.name })) ?? [];
+                        }
+                        const text = query.toLocaleLowerCase();
+                        return items.filter(item => item.label.toLocaleLowerCase().includes(text));
+                    },
+                    select(result, section) {
+                        actions.activate();
+                        if (section === 'code')
+                            props.openCodeSearchResult?.(view.targetId, result.id);
+                        else if (section === 'variables') {
+                            const field = assetPreviewSlots.find(slot => slot.id === view.id)?.element;
+                            [...(field?.querySelectorAll('input[data-variable-id]') ?? [])]
+                                .find(input => input.dataset.variableId === result.id)?.focus();
+                        }
+                        else
+                            workspace?.selectAsset(view.id, section, Number(result.id));
+                    }
+                }
+            }));
+        return createPortal(toolbar, element, view.id);
+    }), assetPreviewSlots.map(({ id, targetId, kind, element, editable, selected, renderLayout, scrollTop }) => createPortal(kind === 'variables' ? React.createElement(SpriteAssetPane, {
+        kind, locale: props.locale, editable, variables: props.getVariables?.(targetId) ?? [],
+        onWrite(variableId, value) {
+            props.writeVariable?.(targetId, variableId, value);
+            workspace?.refreshSurfaces();
+        }
+    }) : props.getAssetPreview && React.createElement(AssetPreview, {
+        locale: props.locale, kind, selected, renderLayout, scrollTop, data: props.getAssetPreview(targetId, kind)
+    }), element, id)));
 }
 export function useSpriteTabs({ available, enabled, locale, ...props }) {
     const controller = React.useRef(null);
-    const [selectedId, setSelected] = React.useState('');
+    const [selection, setSelection] = React.useState({ id: '' });
     const [ready, setReady] = React.useState(false);
     const [slots] = React.useState(() => available ? Array.from({ length: 3 }, () => {
         const slot = document.createElement('div');
@@ -311,9 +728,12 @@ export function useSpriteTabs({ available, enabled, locale, ...props }) {
     const japanese = /^ja(?:-|$)/i.test(locale);
     const select = (id) => controller.current?.select(id);
     return {
-        context: enabled ? { selectedId, openLabel: japanese ? '開く' : 'Open', select, open: select } : null,
-        renderEditorTabRow: available ? (children) => React.createElement(SpriteTabs, {
-            ...props, enabled, slots, children, onAttach: () => setReady(true), selectTarget: setSelected,
+        controller,
+        assetSelections: enabled ? selection.assets : undefined,
+        context: enabled ? { selectedId: selection.id, openLabel: japanese ? '開く' : 'Open', select, open: select } : null,
+        renderEditorTabRow: available ? (children) => React.createElement((SpriteTabs), {
+            ...props, enabled, locale, children, slots, onAttach: () => setReady(true),
+            selectTarget: (id, assets) => setSelection({ id, assets }),
             connect: next => { controller.current = next; },
             reopenLabel: japanese ? '編集中のスプライトを開く' : 'Open the editing sprite',
             renameLabels: japanese ? renameLabels.ja : renameLabels.en