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

package/README.ja.md

@@ -47,3 +47,5 @@ Editor のルートから、`site/source.json` の GUI を `npm run build:pages`
 Plus 標準配置ではスプライト編集タブを既定で表示する。`twPlusDockviewSpriteTabs=0` で従来の編集表示に戻る。
 Editor がファイルメニューの接続口を提供している場合は、各項目のアイコンと「機能拡張の追加」を表示する。
 `twPlusExtensionFileMenu=0` で左下のボタンに戻る。起動時のパラメーターを変更したら再読み込みする。
+
+Web 版の Plus 標準配置で `twPlusDockview=1` を付けて起動すると、スプライト編集ペインを左右・上下に分割できます。同じスプライトを複数のペインで開いた場合、表示セクション、コスチュームと音の選択、素材一覧のスクロール位置をペインごとに保持します。変数の値はプロジェクト内で共有され、編集中のペインで変更できます。URL から `twPlusDockview=1` を外して再読み込みすると、通常のスプライトタブに戻ります。

package/README.md

@@ -44,3 +44,5 @@ The properties form came from the previous sprite properties source at `80825f7`
 Run `npm test` to check tab state, file menu actions, and the existing layout. Set `TW_PLUS_LAYOUT_EDITOR_URL` to an Editor URL built with the pinned Scratch GUI and run `npm run test:browser` to verify Dockview through the existing tab strip and editor panel integration. Set `TW_PLUS_LAYOUT_FILE_MENU_URL` for the same command to check a GUI build with the optional file menu integration.
 
 Sprite editing tabs are enabled by default in the Plus standard layout. Set `twPlusDockviewSpriteTabs=0` to restore the previous editing view. When the Editor exposes the file menu integration, the menu shows item icons and the Add Extension command. Set `twPlusExtensionFileMenu=0` to use the button at the bottom left again. Reload the editor after changing startup parameters.
+
+In the Plus web editor, add `twPlusDockview=1` to enable split sprite panes. Each pane remembers its section, costume and sound selections, and asset-list scroll position. Variable values are shared across panes and can be changed in the active pane. Remove the startup parameter and reload to return to the regular sprite tabs.

package/dist/sprite-asset-pane.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+export interface SpriteMediaAsset {
+    /** Host identity for this item within its target, independent of the list order. */
+    id: string;
+    name: string;
+    imageUrl?: string;
+    duration?: number;
+    /** Downsampled waveform magnitudes in the range from zero to one. */
+    peaks?: readonly number[];
+}
+export interface SpriteVariable {
+    id: string;
+    name: string;
+    value: string | number;
+    scope?: 'local' | 'global';
+}
+interface PaneProps {
+    locale: string;
+    editable: boolean;
+}
+export interface SpriteMediaPaneProps extends PaneProps {
+    kind: 'costumes' | 'sounds';
+    items: readonly SpriteMediaAsset[];
+    selectedId: string | null;
+    detailOnly?: boolean;
+    onSelect(id: string): void;
+    /** Optional host surface. It must honor editable without unmounting its layout. */
+    renderEditor?(selected: SpriteMediaAsset, editable: boolean): React.ReactNode;
+}
+export interface SpriteVariablePaneProps extends PaneProps {
+    kind: 'variables';
+    variables: readonly SpriteVariable[];
+    onWrite(id: string, value: SpriteVariable['value']): void;
+}
+export type SpriteAssetPaneProps = SpriteMediaPaneProps | SpriteVariablePaneProps;
+export declare function SpriteAssetPane(props: SpriteAssetPaneProps): React.JSX.Element;
+export {};

package/dist/sprite-asset-pane.js

@@ -0,0 +1,109 @@
+import React from 'react';
+const english = {
+    costumes: 'Costumes', sounds: 'Sounds', variables: 'Variables', name: 'Name', value: 'Value',
+    local: 'Sprite', global: 'Project', emptyCostumes: 'No costumes', emptySounds: 'No sounds',
+    emptyVariables: 'No variables', selectCostume: 'Select a costume', selectSound: 'Select a sound',
+    imageUnavailable: 'Image unavailable', waveformUnavailable: 'Waveform unavailable', waveform: 'Waveform',
+    seconds: 's'
+};
+const japanese = {
+    costumes: 'コスチューム', sounds: '音', variables: '変数', name: '名前', value: '値',
+    local: 'スプライト', global: '作品', emptyCostumes: 'コスチュームがありません', emptySounds: '音がありません',
+    emptyVariables: '変数がありません', selectCostume: 'コスチュームを選択してください', selectSound: '音を選択してください',
+    imageUnavailable: '画像を表示できません', waveformUnavailable: '波形を表示できません', waveform: '波形',
+    seconds: '秒'
+};
+const labelsFor = (locale) => /^ja(?:-|$)/i.test(locale) ? japanese : english;
+function Waveform({ name, peaks, label }) {
+    const path = peaks.map((sample, index) => {
+        const x = (index + 0.5) * 100 / peaks.length;
+        const magnitude = Number.isFinite(sample) ? Math.max(0, Math.min(sample, 1)) : 0;
+        const y = magnitude * 49;
+        return 'M' + x + ' ' + (50 - y) + 'V' + (50 + y);
+    }).join(' ');
+    return React.createElement("svg", { className: "tw-sprite-media__waveform", viewBox: "0 0 100 100", preserveAspectRatio: "none", role: "img", "aria-label": label + ': ' + name },
+        React.createElement("path", { d: "M0 50H100", vectorEffect: "non-scaling-stroke", className: "tw-sprite-media__axis" }),
+        React.createElement("path", { d: path, vectorEffect: "non-scaling-stroke", className: "tw-sprite-media__peaks" }));
+}
+function MediaPane({ kind, items, selectedId, onSelect, renderEditor, editable, locale, detailOnly }) {
+    const labels = labelsFor(locale);
+    const isSound = kind === 'sounds';
+    const selected = items.find(asset => asset.id === selectedId);
+    const duration = selected?.duration;
+    return React.createElement("section", { className: detailOnly ? 'tw-sprite-media tw-sprite-media--detail' : 'tw-sprite-media', "aria-label": labels[kind] },
+        !detailOnly && React.createElement("ul", { className: "tw-sprite-media__list", "aria-label": labels[kind] }, items.map(asset => React.createElement("li", { key: asset.id },
+            React.createElement("button", { type: "button", className: "tw-sprite-media__item", "aria-current": asset.id === selectedId || undefined, "aria-disabled": !editable || undefined, tabIndex: editable ? 0 : -1, onClick: () => {
+                    if (editable)
+                        onSelect(asset.id);
+                } },
+                asset.imageUrl ? React.createElement("img", { src: asset.imageUrl, alt: "", className: "tw-sprite-media__thumbnail" }) :
+                    React.createElement("span", { className: "tw-sprite-media__symbol", "aria-hidden": "true" }, isSound ? '♪' : '◫'),
+                React.createElement("span", { className: "tw-sprite-media__name" }, asset.name))))),
+        React.createElement("div", { className: "tw-sprite-media__detail" }, selected ? React.createElement(React.Fragment, null,
+            React.createElement("h3", { className: "tw-sprite-media__title" }, selected.name),
+            React.createElement("div", { className: "tw-sprite-media__surface" }, renderEditor?.(selected, editable) ?? (isSound ?
+                (selected.peaks?.length ? React.createElement(Waveform, { peaks: selected.peaks, name: selected.name, label: labels.waveform }) :
+                    React.createElement("p", null, labels.waveformUnavailable)) :
+                (selected.imageUrl ? React.createElement("img", { src: selected.imageUrl, alt: selected.name, className: "tw-sprite-media__preview" }) :
+                    React.createElement("p", null, labels.imageUnavailable)))),
+            isSound && Number.isFinite(duration) && duration >= 0 &&
+                React.createElement("p", { className: "tw-sprite-media__duration" },
+                    new Intl.NumberFormat(locale, { maximumFractionDigits: 2 }).format(duration),
+                    " ",
+                    labels.seconds)) : React.createElement("p", null, items.length ? (isSound ? labels.selectSound : labels.selectCostume) :
+            (isSound ? labels.emptySounds : labels.emptyCostumes))));
+}
+function VariableField({ variable, editable, onWrite }) {
+    const [text, setText] = React.useState(null);
+    const pending = React.useRef(null);
+    const finish = (save) => {
+        const draft = pending.current;
+        if (!draft)
+            return;
+        pending.current = null;
+        setText(null);
+        if (!save || draft.text === String(variable.value))
+            return;
+        const number = Number(draft.text);
+        const value = typeof draft.variable.value === 'number' && draft.text.trim() && Number.isFinite(number) ?
+            number : draft.text;
+        draft.write(draft.variable.id, value);
+    };
+    React.useLayoutEffect(() => {
+        // A click can change the active pane before the old input receives blur.
+        if (!editable)
+            finish(true);
+    }, [editable]);
+    return React.createElement("input", { className: "tw-sprite-variables__input", "aria-label": variable.name, "data-variable-id": variable.id, readOnly: !editable, tabIndex: editable ? 0 : -1, value: text ?? String(variable.value), onChange: event => {
+            if (!editable)
+                return;
+            const next = event.currentTarget.value;
+            pending.current = { text: next, variable, write: onWrite };
+            setText(next);
+        }, onBlur: () => finish(true), onKeyDown: event => {
+            if (!editable || event.nativeEvent.isComposing)
+                return;
+            if (event.key !== 'Enter' && event.key !== 'Escape')
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            finish(event.key === 'Enter');
+        } });
+}
+function VariablePane({ variables, editable, onWrite, locale }) {
+    const labels = labelsFor(locale);
+    return React.createElement("section", { className: "tw-sprite-variables", "aria-label": labels.variables }, variables.length ? React.createElement("table", { className: "tw-sprite-variables__table" },
+        React.createElement("thead", null,
+            React.createElement("tr", null,
+                React.createElement("th", { scope: "col" }, labels.name),
+                React.createElement("th", { scope: "col" }, labels.value))),
+        React.createElement("tbody", null, variables.map(variable => React.createElement("tr", { key: variable.id },
+            React.createElement("th", { scope: "row" },
+                variable.name,
+                variable.scope && React.createElement("span", { className: "tw-sprite-variables__scope" }, labels[variable.scope])),
+            React.createElement("td", null,
+                React.createElement(VariableField, { variable: variable, editable: editable, onWrite: onWrite })))))) : React.createElement("p", null, labels.emptyVariables));
+}
+export function SpriteAssetPane(props) {
+    return props.kind === 'variables' ? React.createElement(VariablePane, { ...props }) : React.createElement(MediaPane, { ...props });
+}

package/dist/sprite-editor-toolbar.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export declare const spriteEditorSections: readonly ["code", "costumes", "sounds", "variables"];
+export type SpriteEditorSection = typeof spriteEditorSections[number];
+export interface SpriteSearchResult {
+    id: string;
+    label: string;
+}
+export interface SpriteEditorSearch {
+    find(query: string, section: SpriteEditorSection): readonly SpriteSearchResult[];
+    select(result: SpriteSearchResult, section: SpriteEditorSection): void;
+    onFocus?(): void;
+}
+interface SpriteEditorToolbarProps {
+    viewId: string;
+    locale: string;
+    section: SpriteEditorSection;
+    onSectionChange(section: SpriteEditorSection): void;
+    isStage?: boolean;
+    activeGroup?: boolean;
+    search?: SpriteEditorSearch;
+    availableSections?: readonly SpriteEditorSection[];
+    actions?: React.ReactNode;
+}
+export declare function SpriteEditorToolbar({ viewId, locale, section, onSectionChange, isStage, activeGroup, search, availableSections, actions }: SpriteEditorToolbarProps): React.JSX.Element;
+export {};

package/dist/sprite-editor-toolbar.js

@@ -0,0 +1,72 @@
+import React from 'react';
+export const spriteEditorSections = ['code', 'costumes', 'sounds', 'variables'];
+const glyphs = {
+    code: 'm5.5 4-4 4 4 4m5-8 4 4-4 4',
+    costumes: 'm6 9 5.5-6.5a1.4 1.4 0 0 1 2 2L7.5 11m-2-2a2.5 2.5 0 0 0-3 2.5L2 14c2.7 0 5-1 5-3a2 2 0 0 0-1.5-2Z',
+    sounds: 'M2 6h3l4-3v10l-4-3H2Zm9.5 0a3 3 0 0 1 0 4m2-6a5.5 5.5 0 0 1 0 8',
+    variables: 'M5 2H3v12h2m6-12h2v12h-2M6 6l4 4m0-4-4 4',
+    search: 'M10 10l3 3M11 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z'
+};
+function Icon({ kind }) {
+    return React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" },
+        React.createElement("path", { d: glyphs[kind] }));
+}
+function SearchBox({ viewId, section, japanese, search }) {
+    const [query, setQuery] = React.useState('');
+    const [open, setOpen] = React.useState(false);
+    const [index, setIndex] = React.useState(-1);
+    const [focused, setFocused] = React.useState(false);
+    const results = open && focused && query.trim() ? search.find(query.trim(), section) : [];
+    const listId = viewId + '-search-results';
+    const selected = results[index];
+    const expanded = results.length > 0;
+    const optionId = (position) => listId + '-' + position;
+    function choose(result) {
+        setOpen(false);
+        setIndex(-1);
+        search.select(result, section);
+    }
+    return React.createElement("div", { className: "tw-plus-sprite-search" },
+        React.createElement("div", { className: "tw-plus-sprite-search-field" },
+            React.createElement(Icon, { kind: "search" }),
+            React.createElement("input", { type: "search", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", "aria-label": japanese ? 'スプライト内を検索' : 'Search within this sprite', "aria-controls": expanded ? listId : undefined, "aria-expanded": expanded, "aria-activedescendant": selected ? optionId(index) : undefined, placeholder: japanese ? '検索' : 'Search', value: query, onFocus: () => { setFocused(true); setOpen(true); search.onFocus?.(); }, onBlur: () => { setFocused(false); setIndex(-1); }, onChange: event => { setQuery(event.currentTarget.value); setOpen(true); setIndex(-1); }, onKeyDown: event => {
+                    if (event.key === 'Escape' && expanded) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setOpen(false);
+                        setIndex(-1);
+                    }
+                    else if (expanded && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                        event.preventDefault();
+                        const offset = event.key === 'ArrowDown' ? 1 : -1;
+                        setIndex(selected ? (index + offset + results.length) % results.length :
+                            offset === 1 ? 0 : results.length - 1);
+                    }
+                    else if (event.key === 'Enter' && selected) {
+                        event.preventDefault();
+                        choose(selected);
+                    }
+                } })),
+        expanded && React.createElement("ul", { role: "listbox", id: listId, "aria-label": japanese ? '検索結果' : 'Search results' }, results.map((result, position) => React.createElement("li", { key: result.id, id: optionId(position), role: "option", "aria-selected": position === index, onPointerDown: event => event.preventDefault(), onClick: () => choose(result) }, result.label))));
+}
+export function SpriteEditorToolbar({ viewId, locale, section, onSectionChange, isStage, activeGroup, search, availableSections = spriteEditorSections, actions }) {
+    const japanese = /^ja(?:-|$)/i.test(locale);
+    const labels = japanese ? { code: 'コード', costumes: isStage ? '背景' : 'コスチューム', sounds: '音', variables: '変数' } :
+        { code: 'Code', costumes: isStage ? 'Backdrops' : 'Costumes', sounds: 'Sounds', variables: 'Variables' };
+    return React.createElement("div", { className: "tw-plus-sprite-toolbar", "data-active-group": activeGroup },
+        React.createElement("div", { className: "tw-plus-sprite-toolbar-sections", role: "tablist", "aria-label": japanese ? 'スプライトの編集内容' : 'Sprite editor sections' }, availableSections.map((id, index) => React.createElement("button", { key: id, type: "button", role: "tab", id: viewId + '-section-' + id, "aria-selected": section === id, tabIndex: section === id ? 0 : -1, "aria-controls": viewId + '-content', onClick: () => onSectionChange(id), onKeyDown: event => {
+                const direction = event.currentTarget.ownerDocument.dir === 'rtl' ? -1 : 1;
+                const next = { ArrowLeft: index - direction, ArrowRight: index + direction,
+                    Home: 0, End: availableSections.length - 1 }[event.key];
+                if (next === undefined)
+                    return;
+                event.preventDefault();
+                const position = (next + availableSections.length) % availableSections.length;
+                onSectionChange(availableSections[position]);
+                event.currentTarget.parentElement.querySelectorAll('button')[position]?.focus();
+            } },
+            React.createElement(Icon, { kind: id }),
+            labels[id]))),
+        search && React.createElement(SearchBox, { viewId, section, japanese, search }),
+        actions);
+}

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

@@ -0,0 +1,11 @@
+interface SpriteLayoutCommands {
+    splitRight(): void;
+    splitBelow(): void;
+    close(): void;
+    canClose(): boolean;
+}
+export declare function createSpriteLayoutMenu(document: Document, locale: string, commands: SpriteLayoutCommands): {
+    element: HTMLDivElement;
+    dispose: () => void;
+};
+export {};

package/dist/sprite-layout-menu.js

@@ -0,0 +1,114 @@
+const labels = {
+    ja: ['編集パネルのレイアウト', 'パネルを横に分割', 'パネルを縦に分割', 'この分割パネルを閉じる'],
+    en: ['Editor panel layout', 'Split right', 'Split below', 'Close this split']
+};
+export function createSpriteLayoutMenu(document, locale, commands) {
+    const [title, right, below, closeLabel] = /^ja(?:-|$)/i.test(locale) ? labels.ja : labels.en;
+    const element = document.createElement('div');
+    element.className = 'tw-plus-sprite-layout-menu';
+    const trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'tw-plus-sprite-layout-menu-trigger';
+    trigger.title = title;
+    trigger.setAttribute('aria-label', title);
+    trigger.setAttribute('aria-haspopup', 'menu');
+    trigger.setAttribute('aria-expanded', 'false');
+    const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    icon.setAttribute('viewBox', '0 0 16 16');
+    icon.setAttribute('aria-hidden', 'true');
+    icon.setAttribute('fill', 'none');
+    icon.setAttribute('stroke', 'currentColor');
+    icon.setAttribute('stroke-width', '1.4');
+    const shape = document.createElementNS(icon.namespaceURI, 'path');
+    shape.setAttribute('d', 'M2.5 3.5h11v9h-11zM2.5 6.5h11m-7 0v6');
+    icon.append(shape);
+    trigger.append(icon);
+    element.append(trigger);
+    const popup = document.createElement('div');
+    popup.className = 'tw-plus-sprite-layout-menu-popup';
+    popup.setAttribute('role', 'menu');
+    popup.setAttribute('aria-label', title);
+    const buttons = [[right, commands.splitRight], [below, commands.splitBelow], [closeLabel, commands.close]].map(([label, run]) => {
+        const item = document.createElement('button');
+        item.type = 'button';
+        item.textContent = label;
+        item.tabIndex = -1;
+        item.setAttribute('role', 'menuitem');
+        item.addEventListener('click', () => {
+            close(true);
+            run();
+        });
+        return item;
+    });
+    popup.append(...buttons);
+    let openedIn;
+    let topLayer = false;
+    function close(restoreFocus = false) {
+        if (!openedIn)
+            return;
+        openedIn.removeEventListener('pointerdown', dismiss, true);
+        openedIn = undefined;
+        if (topLayer && popup.matches(':popover-open'))
+            popup.hidePopover();
+        popup.remove();
+        trigger.setAttribute('aria-expanded', 'false');
+        if (restoreFocus)
+            trigger.focus({ preventScroll: true });
+    }
+    function dismiss(event) {
+        const node = event.target;
+        if (!trigger.contains(node) && !popup.contains(node))
+            close();
+    }
+    function open(last = false) {
+        if (openedIn)
+            return;
+        openedIn = trigger.ownerDocument;
+        buttons[2].disabled = !commands.canClose();
+        topLayer = typeof popup.showPopover === 'function';
+        if (topLayer) {
+            popup.setAttribute('popover', 'manual');
+            element.append(popup);
+            popup.showPopover();
+        }
+        else {
+            openedIn.body.append(popup);
+        }
+        const anchor = trigger.getBoundingClientRect();
+        const viewport = openedIn.documentElement;
+        const { width, height } = popup.getBoundingClientRect();
+        popup.style.left = Math.max(4, Math.min(anchor.right - width, viewport.clientWidth - width - 4)) + 'px';
+        popup.style.top = (anchor.bottom + height + 8 <= viewport.clientHeight ? anchor.bottom + 4 :
+            Math.max(4, anchor.top - height - 4)) + 'px';
+        trigger.setAttribute('aria-expanded', 'true');
+        openedIn.addEventListener('pointerdown', dismiss, true);
+        const enabled = buttons.filter(button => !button.disabled);
+        enabled[last ? enabled.length - 1 : 0]?.focus({ preventScroll: true });
+    }
+    trigger.addEventListener('click', () => openedIn ? close(true) : open());
+    trigger.addEventListener('keydown', event => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')
+            return;
+        event.preventDefault();
+        open(event.key === 'ArrowUp');
+    });
+    popup.addEventListener('focusout', event => {
+        if (!popup.contains(event.relatedTarget))
+            close();
+    });
+    popup.addEventListener('keydown', event => {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            close(true);
+            return;
+        }
+        const enabled = buttons.filter(button => !button.disabled);
+        const index = enabled.indexOf(event.target);
+        const next = { ArrowDown: index + 1, ArrowUp: index - 1, Home: 0, End: enabled.length - 1 }[event.key];
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        enabled[(next + enabled.length) % enabled.length]?.focus({ preventScroll: true });
+    });
+    return { element, dispose: () => close() };
+}

package/dist/sprite-tabs.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import type { SpriteVariable } from './sprite-asset-pane.tsx';
+import type { SpriteSearchResult } from './sprite-editor-toolbar.tsx';
 interface CostumeAsset {
     encodeDataURI(): string;
 }
@@ -17,19 +19,83 @@ interface Project {
         targets: Target[];
     };
     setEditingTarget(id: string): void;
-    renameSprite(id: string, name: string): void;
+    renameSprite?(id: string, name: string): void;
     on(event: 'targetsUpdate', listener: () => void): void;
     removeListener(event: 'targetsUpdate', listener: () => void): void;
 }
-interface TabOptions {
+export interface SpriteTabView {
+    readonly id: string;
+    readonly targetId: string;
+    readonly isStage: boolean;
+    readonly section: number;
+    readonly groupId: string;
+    readonly active: boolean;
+    readonly groupActive: boolean;
+}
+export interface SpriteTabAdapter<Snapshot = unknown> {
+    /** Read the state of the mounted surface; the host's selected target may have changed already. */
+    capture(view: SpriteTabView): Snapshot;
+    renderInactive(container: HTMLElement, view: SpriteTabView, snapshot: Snapshot | undefined): void | (() => void);
+    restore(view: SpriteTabView, snapshot: Snapshot | undefined): void;
+    dispose?(view: SpriteTabView, snapshot: Snapshot): void;
+}
+/** Optional bridge used by a native asset editor to restore and report its selection. */
+export interface SpriteAssetSelection {
+    restore(target: object, assets: readonly object[]): number | undefined;
+    remember(target: object, asset: object | undefined, select?: (index: number) => void): void;
+    rememberLayout?(render: SpriteAssetLayout): void;
+    getScrollTop?(): number;
+    rememberScrollTop?(position: number): void;
+}
+export type SpriteAssetKind = 'costumes' | 'sounds';
+type AssetKind = SpriteAssetKind;
+export interface SpriteAssetPreviewItem {
+    asset: object;
+    name: string;
+    imageUrl?: string;
+    buffer?: AudioBuffer;
+    duration?: number;
+}
+type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number, detail: React.ReactNode, scrollTop: number) => React.ReactNode;
+export interface SpriteAssetPreviewData {
+    items: readonly SpriteAssetPreviewItem[];
+    defaultAsset?: object;
+}
+type AssetSelections = Readonly<Record<AssetKind, SpriteAssetSelection>>;
+export type SpriteSplitDirection = 'right' | 'below';
+interface TabOptions<Snapshot = unknown> {
     vm: Project;
     getSection(): number;
     activateSection(section: number): void;
-    selectTarget(id: string): void;
+    selectTarget(id: string, assetSelections?: AssetSelections): void;
     resize(): void;
-    park?(): void;
     reopenLabel: string;
+    multiView?: boolean;
+    variables?: boolean;
+    locale?: string;
+    viewAdapter?: SpriteTabAdapter<Snapshot>;
+    park?(): void;
     renameLabels?: RenameLabels;
+    onToolbarSlots?(slots: readonly ToolbarSlot[]): void;
+    onAssetPreviewSlots?(slots: readonly AssetPreviewSlot[]): void;
+}
+interface ToolbarActions {
+    activate(): void;
+    setSection(section: number): void;
+}
+interface ToolbarSlot {
+    view: SpriteTabView;
+    element: HTMLElement;
+}
+interface AssetPreviewSlot {
+    id: string;
+    targetId: string;
+    kind: AssetKind | 'variables';
+    editable: boolean;
+    selected?: object;
+    renderLayout?: SpriteAssetLayout;
+    scrollTop?: number;
+    element: HTMLElement;
 }
 declare const renameLabels: {
     en: {
@@ -46,36 +112,63 @@ declare const renameLabels: {
     };
 };
 type RenameLabels = typeof renameLabels.en;
-export declare function mountSpriteTabs(root: HTMLElement, content: HTMLElement, options: TabOptions): {
+export declare function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElement, options: TabOptions<Snapshot>): {
     select: (id: string) => void;
+    split: (direction: SpriteSplitDirection, id?: string) => string;
+    closeSplit: (id?: string) => boolean;
+    activateView: (id: string) => boolean;
+    setViewSection: (id: string, section: number) => boolean;
+    syncActiveSection: (section: number) => void;
+    refreshSurfaces: () => void;
+    selectAsset(id: string, kind: AssetKind, index: number): void;
+    currentView: () => SpriteTabView;
+    views: () => SpriteTabView[];
     dispose(): void;
 };
-interface SpriteTabsProps {
+type SpriteTabsController<Snapshot> = ReturnType<typeof mountSpriteTabs<Snapshot>>;
+type SpriteTabsProps<Snapshot> = Omit<TabOptions<Snapshot>, 'activateSection' | 'getSection' | 'park' | 'onToolbarSlots' | 'onAssetPreviewSlots'> & {
+    children: React.ReactNode;
+    activateSection?(section: number): void;
+    slots: HTMLElement[];
+    onAttach(): void;
     enabled: boolean;
     activeSection: number;
-    vm: Project;
     className: string;
-    slots: HTMLElement[];
-    onAttach(): void;
-    children: React.ReactNode;
-    selectTarget(id: string): void;
-    resize(): void;
-    reopenLabel: string;
-    renameLabels: RenameLabels;
-    connect(controller: ReturnType<typeof mountSpriteTabs> | null): void;
-}
-interface SpriteTabSlots extends Pick<SpriteTabsProps, 'activeSection' | 'vm' | 'enabled' | 'className' | 'resize'> {
+    connect(controller: SpriteTabsController<Snapshot> | null): void;
+    activeTools?: React.ReactNode;
+    renderToolbar?(view: SpriteTabView, actions: ToolbarActions): React.ReactNode;
+    getAssetPreview?(targetId: string, kind: SpriteAssetKind): SpriteAssetPreviewData;
+    getVariables?(targetId: string): readonly SpriteVariable[];
+    writeVariable?(targetId: string, id: string, value: SpriteVariable['value']): void;
+    getCodeSearchItems?(targetId: string): readonly SpriteSearchResult[];
+    openCodeSearchResult?(targetId: string, id: string): void;
+};
+export declare function useSpriteTabs<Snapshot>({ available, enabled, locale, ...props }: Omit<SpriteTabsProps<Snapshot>, 'children' | 'connect' | 'selectTarget' | 'reopenLabel' | 'renameLabels' | 'slots' | 'onAttach' | 'activateSection'> & {
     available: boolean;
     locale: string;
-}
-export declare function useSpriteTabs({ available, enabled, locale, ...props }: SpriteTabSlots): {
+    activateSection?(section: number): void;
+}): {
+    controller: React.MutableRefObject<{
+        select: (id: string) => void;
+        split: (direction: SpriteSplitDirection, id?: string) => string;
+        closeSplit: (id?: string) => boolean;
+        activateView: (id: string) => boolean;
+        setViewSection: (id: string, section: number) => boolean;
+        syncActiveSection: (section: number) => void;
+        refreshSurfaces: () => void;
+        selectAsset(id: string, kind: AssetKind, index: number): void;
+        currentView: () => SpriteTabView;
+        views: () => SpriteTabView[];
+        dispose(): void;
+    }>;
+    assetSelections: Readonly<Record<SpriteAssetKind, SpriteAssetSelection>>;
     context: {
         selectedId: string;
         openLabel: string;
         select: (id: string) => void;
         open: (id: string) => void;
     };
-    renderEditorTabRow: (children: React.ReactNode) => React.FunctionComponentElement<SpriteTabsProps>;
+    renderEditorTabRow: (children: React.ReactNode) => React.FunctionComponentElement<SpriteTabsProps<Snapshot>>;
     renderEditorPanel: (index: number, children: React.ReactNode) => React.ReactPortal;
 };
 export {};