@kubohiroya/turbowarp-plus-editor-layout 0.1.6 → 0.1.9

package/dist/document-workspace.d.ts

@@ -4,6 +4,7 @@ export interface DocumentPanelRequest {
         documentId: string;
     };
     filename: string;
+    transient?: boolean;
     mount(element: HTMLElement, close: () => void): {
         requestClose(): void;
         dispose(): void;

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

@@ -1,4 +1,50 @@
 import React from 'react';
+import { type SpritePropertiesPanelProps } from './sprite-properties.tsx';
+import type { SpriteAssetPreviewItem } from './sprite-tabs.ts';
+interface NativeAssetPanelProps {
+    children?: React.ReactNode;
+    buttons: readonly {
+        title: string;
+        img: string;
+        onClick(): void;
+    }[];
+    items: readonly {
+        dragPayload?: object;
+        name: string;
+        url?: string;
+        details?: React.ReactNode;
+    }[];
+    isRtl?: boolean;
+    listActions?: React.ElementType;
+    selectedItemIndex: number;
+    onItemClick(index: number): void;
+}
+interface NativeSelectorProps extends NativeAssetPanelProps {
+    wrapperAttributes?: Record<string, string>;
+    listRef?(node: HTMLElement | null): void;
+    onListScroll?(event: React.UIEvent<HTMLElement>): void;
+    draggingType?: null;
+    onAddSortable?(): void;
+    onRemoveSortable?(): void;
+}
+export type NativeAssetSelector = React.ComponentType<NativeSelectorProps>;
+export type NativeAssetPanelRenderer = (props: NativeAssetPanelProps, options: {
+    panelAttributes: Record<string, string>;
+    detailAttributes: Record<string, string>;
+    renderSelector(Component: NativeAssetSelector, props: NativeSelectorProps): React.ReactNode;
+}) => React.ReactNode;
+export type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number, detail: React.ReactNode, scrollTop: number) => React.ReactNode;
+interface PanelState {
+    rememberLayout(render: SpriteAssetLayout): void;
+    getScrollTop(): number;
+    rememberScrollTop(position: number): void;
+}
+export declare function NativeAssetPanel({ render, previewSelector, panel, state }: {
+    render: NativeAssetPanelRenderer;
+    previewSelector: NativeAssetSelector;
+    panel: NativeAssetPanelProps;
+    state: PanelState;
+}): React.JSX.Element;
 export interface SpriteMediaAsset {
     /** Host identity for this item within its target, independent of the list order. */
     id: string;
@@ -30,6 +76,9 @@ export interface SpriteMediaPaneProps extends PaneProps {
 export interface SpriteVariablePaneProps extends PaneProps {
     kind: 'variables';
     variables: readonly SpriteVariable[];
+    properties?: SpritePropertiesPanelProps['values'];
+    targetId?: string;
+    onWriteProperties?: SpritePropertiesPanelProps['onChange'];
     onWrite(id: string, value: SpriteVariable['value']): void;
 }
 export type SpriteAssetPaneProps = SpriteMediaPaneProps | SpriteVariablePaneProps;

package/dist/sprite-asset-pane.js

@@ -1,4 +1,48 @@
 import React from 'react';
+import { SpritePropertiesPanel } from "./sprite-properties.js";
+const noop = () => { };
+function NativeAssetPanelSurface({ render, panel, state, previewSelector, scrollTop }) {
+    const list = React.useRef(null);
+    const setList = React.useCallback((node) => {
+        list.current = node;
+    }, []);
+    React.useLayoutEffect(() => {
+        const position = state?.getScrollTop() ?? scrollTop;
+        if (list.current && position !== undefined)
+            list.current.scrollTop = position;
+    }, [state, scrollTop]);
+    return render(panel, {
+        panelAttributes: { 'data-layout-asset-panel': '' },
+        detailAttributes: { 'data-layout-asset-detail': '' },
+        renderSelector(Component, props) {
+            const selectorProps = { ...props, listRef: setList, wrapperAttributes: { 'data-layout-asset-list': '' } };
+            if (previewSelector) {
+                return React.createElement("div", { inert: '', style: { display: 'contents' } }, React.createElement(previewSelector, {
+                    ...selectorProps, draggingType: null, onAddSortable: noop, onRemoveSortable: noop
+                }));
+            }
+            return React.createElement(Component, { ...selectorProps, onListScroll: event => {
+                    state?.rememberScrollTop(event.currentTarget.scrollTop);
+                } });
+        }
+    });
+}
+export function NativeAssetPanel({ render, previewSelector, panel, state }) {
+    const { items, buttons, isRtl, listActions } = panel;
+    React.useLayoutEffect(() => {
+        const previousItems = new Map(items.map(item => [item.dragPayload, item]));
+        const readOnlyButtons = buttons.map(({ title, img }) => ({ title, img, onClick: noop }));
+        state.rememberLayout((previewItems, selectedItemIndex, detail, scrollTop) => React.createElement(NativeAssetPanelSurface, { render: render, previewSelector: previewSelector, scrollTop: scrollTop, panel: {
+                isRtl, listActions, selectedItemIndex, buttons: readOnlyButtons,
+                onItemClick: noop, children: detail,
+                items: previewItems.map(item => {
+                    const previous = previousItems.get(item.asset);
+                    return { name: item.name, url: item.imageUrl || previous?.url, details: previous?.details };
+                })
+            } }));
+    }, [state, render, previewSelector, items, buttons, isRtl, listActions]);
+    return React.createElement(NativeAssetPanelSurface, { render: render, panel: panel, state: state });
+}
 const english = {
     costumes: 'Costumes', sounds: 'Sounds', variables: 'Variables', name: 'Name', value: 'Value',
     local: 'Sprite', global: 'Project', emptyCostumes: 'No costumes', emptySounds: 'No sounds',
@@ -90,19 +134,22 @@ function VariableField({ variable, editable, onWrite }) {
             finish(event.key === 'Enter');
         } });
 }
-function VariablePane({ variables, editable, onWrite, locale }) {
+function VariablePane({ variables, editable, onWrite, locale, properties, targetId, onWriteProperties }) {
     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));
+    return React.createElement("section", { className: "tw-sprite-variables", "aria-label": labels.variables },
+        properties && targetId && onWriteProperties &&
+            React.createElement(SpritePropertiesPanel, { targetId: targetId, values: properties, locale: locale, disabled: !editable, onChange: onWriteProperties }),
+        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

@@ -19,7 +19,8 @@ interface SpriteEditorToolbarProps {
     activeGroup?: boolean;
     search?: SpriteEditorSearch;
     availableSections?: readonly SpriteEditorSection[];
+    propertiesInVariables?: boolean;
     actions?: React.ReactNode;
 }
-export declare function SpriteEditorToolbar({ viewId, locale, section, onSectionChange, isStage, activeGroup, search, availableSections, actions }: SpriteEditorToolbarProps): React.JSX.Element;
+export declare function SpriteEditorToolbar({ viewId, locale, section, onSectionChange, isStage, activeGroup, search, availableSections, propertiesInVariables, actions }: SpriteEditorToolbarProps): React.JSX.Element;
 export {};

package/dist/sprite-editor-toolbar.js

@@ -49,10 +49,10 @@ function SearchBox({ viewId, section, japanese, search }) {
                 } })),
         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 }) {
+export function SpriteEditorToolbar({ viewId, locale, section, onSectionChange, isStage, activeGroup, search, availableSections = spriteEditorSections, propertiesInVariables = false, 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' };
+    const labels = japanese ? { code: 'コード', costumes: isStage ? '背景' : 'コスチューム', sounds: '音', variables: propertiesInVariables ? 'プロパティ・変数' : '変数' } :
+        { code: 'Code', costumes: isStage ? 'Backdrops' : 'Costumes', sounds: 'Sounds', variables: propertiesInVariables ? 'Properties & 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;

package/dist/sprite-tabs.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
+import { NativeAssetPanel } from './sprite-asset-pane.tsx';
+import type { NativeAssetPanelRenderer, NativeAssetSelector, SpriteAssetLayout } from './sprite-asset-pane.tsx';
 import type { SpriteVariable } from './sprite-asset-pane.tsx';
+import type { SpritePropertiesPanelProps } from './sprite-properties.tsx';
 import type { SpriteSearchResult } from './sprite-editor-toolbar.tsx';
 import type { DockviewStagePane } from './dockview-stage.ts';
 export { getDocumentWorkspace } from './document-workspace.ts';
@@ -49,6 +52,7 @@ export interface SpriteTabAdapter<Snapshot = unknown> {
 export interface SpriteAssetSelection {
     restore(target: object, assets: readonly object[]): number | undefined;
     remember(target: object, asset: object | undefined, select?: (index: number) => void): void;
+    renderPanel?(render: NativeAssetPanelRenderer, previewSelector: NativeAssetSelector, panel: React.ComponentProps<typeof NativeAssetPanel>['panel']): React.ReactNode;
     rememberLayout?(render: SpriteAssetLayout): void;
     getScrollTop?(): number;
     rememberScrollTop?(position: number): void;
@@ -62,7 +66,6 @@ export interface SpriteAssetPreviewItem {
     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;
@@ -78,7 +81,7 @@ interface TabOptions<Snapshot = unknown> {
     reopenLabel: string;
     multiView?: boolean;
     layoutStorage?: {
-        storage: Storage;
+        storage: Pick<Storage, 'getItem' | 'setItem'>;
         key: string;
         isProjectLoading?(): boolean;
         subscribeProject?(listener: () => void): (() => void) | undefined;
@@ -135,6 +138,7 @@ export declare function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HT
     setViewSection: (id: string, section: number) => boolean;
     syncActiveSection: (section: number) => void;
     refreshSurfaces: () => void;
+    rename(id: string): void;
     selectAsset(id: string, kind: AssetKind, index: number): void;
     currentView: () => SpriteTabView;
     views: () => SpriteTabView[];
@@ -154,6 +158,8 @@ type SpriteTabsProps<Snapshot> = Omit<TabOptions<Snapshot>, 'activateSection' |
     renderToolbar?(view: SpriteTabView, actions: ToolbarActions): React.ReactNode;
     getAssetPreview?(targetId: string, kind: SpriteAssetKind): SpriteAssetPreviewData;
     getVariables?(targetId: string): readonly SpriteVariable[];
+    getProperties?(targetId: string): SpritePropertiesPanelProps['values'];
+    writeProperties?: SpritePropertiesPanelProps['onChange'];
     writeVariable?(targetId: string, id: string, value: SpriteVariable['value']): void;
     getCodeSearchItems?(targetId: string): readonly SpriteSearchResult[];
     openCodeSearchResult?(targetId: string, id: string): void;
@@ -173,6 +179,7 @@ export declare function useSpriteTabs<Snapshot>({ available, enabled, locale, ..
         setViewSection: (id: string, section: number) => boolean;
         syncActiveSection: (section: number) => void;
         refreshSurfaces: () => void;
+        rename(id: string): void;
         selectAsset(id: string, kind: AssetKind, index: number): void;
         currentView: () => SpriteTabView;
         views: () => SpriteTabView[];
@@ -184,6 +191,7 @@ export declare function useSpriteTabs<Snapshot>({ available, enabled, locale, ..
         openLabel: string;
         select: (id: string) => void;
         open: (id: string) => void;
+        rename: (id: string) => void;
     };
     renderEditorTabRow: (children: React.ReactNode) => React.FunctionComponentElement<SpriteTabsProps<Snapshot>>;
     renderEditorPanel: (index: number, children: React.ReactNode) => React.ReactPortal;

package/dist/sprite-tabs.js

@@ -2,10 +2,10 @@ 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 { NativeAssetPanel, SpriteAssetPane } from "./sprite-asset-pane.js";
 import { SpriteEditorToolbar, spriteEditorSections } from "./sprite-editor-toolbar.js";
 import { getDocumentWorkspace } from "./document-workspace.js";
-import { readWorkspaceLayout } from "./workspace-layout.js";
+import { readWorkspaceLayout, workspaceWithoutTransientPanels } from "./workspace-layout.js";
 export { getDocumentWorkspace } from "./document-workspace.js";
 export { useDockviewStage } from "./dockview-stage.js";
 const variableSection = spriteEditorSections.indexOf('variables');
@@ -14,32 +14,38 @@ function createAssetSelections(target, source) {
     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 forKind = (kind) => {
+        const state = {
+            rememberLayout(render) {
+                layouts.set(kind, render);
+            },
+            getScrollTop: () => scroll.get(kind) ?? 0,
+            rememberScrollTop(position) {
+                scroll.set(kind, position);
+            }
+        };
+        return {
+            ...state,
+            renderPanel: (render, previewSelector, panel) => React.createElement(NativeAssetPanel, { render, previewSelector, panel, state }),
+            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);
+            },
+        };
+    };
     const ports = { costumes: forKind('costumes'), sounds: forKind('sounds') };
     return { selected, ports, layouts, selectors, scroll };
 }
@@ -221,11 +227,9 @@ export function mountSpriteTabs(root, content, options) {
         });
         return { ...menu, init() { } };
     }
-    function isOpen(target) {
-        return [...views.values()].some(view => view.target === target) && vm.runtime.targets.includes(target);
-    }
+    const canRename = (target) => target.isOriginal && !target.isStage && Boolean(vm.renameSprite) && vm.runtime.targets.includes(target);
     function openRenameDialog(target) {
-        if (renameDialog || !isOpen(target))
+        if (renameDialog || !canRename(target))
             return;
         const dialog = document.createElement('dialog');
         dialog.className = 'tw-plus-sprite-rename';
@@ -253,7 +257,7 @@ export function mountSpriteTabs(root, content, options) {
             if (renameDialog !== dialog)
                 return;
             renameDialog = undefined;
-            if (dialog.returnValue === 'save' && input.value.trim() && isOpen(target) &&
+            if (dialog.returnValue === 'save' && input.value.trim() && canRename(target) &&
                 input.value !== target.getName())
                 vm.renameSprite?.(target.id, input.value);
         }, { once: true });
@@ -556,9 +560,17 @@ export function mountSpriteTabs(root, content, options) {
         }
         if (dockview.getPanel(stagePanelId))
             panels[stagePanelId] = { kind: 'stage' };
-        for (const [id, { request }] of documents)
-            panels[id] = { kind: 'document', ...request.reference };
-        const snapshot = { version: 1, project: projectSignature(targets), grid, activeGroup,
+        const transient = new Set();
+        for (const [id, { request }] of documents) {
+            if (request.transient)
+                transient.add(id);
+            else
+                panels[id] = { kind: 'document', ...request.reference };
+        }
+        const saved = workspaceWithoutTransientPanels(grid, activeGroup, transient, active?.id);
+        if (!saved)
+            return;
+        const snapshot = { version: 1, project: projectSignature(targets), ...saved,
             editingView: active?.id, panels };
         try {
             persistence.storage.setItem(persistence.key, JSON.stringify(snapshot));
@@ -752,6 +764,11 @@ export function mountSpriteTabs(root, content, options) {
     refresh();
     return {
         select, openStage, closeStage, split, closeSplit, activateView, setViewSection, syncActiveSection, refreshSurfaces,
+        rename(id) {
+            const target = vm.runtime.targets.find(item => item.id === id);
+            if (target)
+                openRenameDialog(target);
+        },
         selectAsset(id, kind, index) {
             if (active?.id === id && active.section === (kind === 'costumes' ? 1 : 2)) {
                 active.assets.selectors.get(kind)?.(index);
@@ -928,7 +945,7 @@ function SpriteTabs(props) {
         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,
+                activeGroup: view.groupActive, propertiesInVariables: Boolean(props.getProperties),
                 actions: view.active && currentSection !== 'variables' ? props.activeTools : undefined,
                 onSectionChange: section => actions.setSection(spriteEditorSections.indexOf(section)),
                 search: {
@@ -963,6 +980,12 @@ function SpriteTabs(props) {
         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) ?? [],
+        properties: props.getProperties?.(targetId),
+        targetId,
+        onWriteProperties(id, patch) {
+            props.writeProperties?.(id, patch);
+            workspace?.refreshSurfaces();
+        },
         onWrite(variableId, value) {
             props.writeVariable?.(targetId, variableId, value);
             workspace?.refreshSurfaces();
@@ -992,7 +1015,10 @@ export function useSpriteTabs({ available, enabled, locale, ...props }) {
     return {
         controller,
         assetSelections: enabled ? selection.assets : undefined,
-        context: enabled ? { selectedId: selection.id, openLabel: japanese ? '開く' : 'Open', select, open: select } : null,
+        context: enabled ? {
+            selectedId: selection.id, openLabel: japanese ? '開く' : 'Open', select, open: select,
+            rename: props.multiView && props.getProperties ? (id) => controller.current?.rename(id) : undefined
+        } : null,
         renderEditorTabRow: available ? (children) => React.createElement((SpriteTabs), {
             ...props, enabled, locale, children, slots, onAttach: () => setReady(true),
             selectTarget: (id, assets) => setSelection({ id, assets }),

package/dist/standard-layout.d.ts

@@ -55,8 +55,9 @@ export declare function createStandardLayout(React: any, { styles, targetStyles,
         buttons: any;
         children: any;
     }) => any;
-    SpritePropertiesSection: ({ fallback, children }: {
+    SpritePropertiesSection: ({ fallback, children, inEditor }: {
         fallback: any;
         children: any;
+        inEditor?: boolean;
     }) => any;
 };

package/dist/standard-layout.js

@@ -236,14 +236,15 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
         const unique = buttons.filter(({ title }, index) => buttons.findIndex(button => button.title === title) === index);
         return element(targets.BackdropFooter, { buttons: unique, label: isJapanese(locale) ? '背景を追加' : 'Add a backdrop' });
     }
-    function SpritePropertiesSection({ fallback, children }) {
+    function SpritePropertiesSection({ fallback, children, inEditor = false }) {
         const { plusLayout, locale } = useContext(context);
         const [expanded, setExpanded] = useState(false);
         const tools = useContext(targetTools);
-        return plusLayout ? element('div', { className: styles.spriteProperties }, element('button', {
-            type: 'button', className: styles.spritePropertiesToggle, 'aria-expanded': expanded,
-            onClick: () => setExpanded(open => !open)
-        }, isJapanese(locale) ? 'スプライト' : 'Sprite'), element('div', { ref: tools?.[1] }), element('div', { className: styles.spritePropertiesContent, hidden: !expanded }, children)) : fallback;
+        return plusLayout ? element('div', { className: styles.spriteProperties }, inEditor ? element('span', null, isJapanese(locale) ? 'スプライト' : 'Sprite') :
+            element('button', {
+                type: 'button', className: styles.spritePropertiesToggle, 'aria-expanded': expanded,
+                onClick: () => setExpanded(open => !open)
+            }, isJapanese(locale) ? 'スプライト' : 'Sprite'), element('div', { ref: tools?.[1] }), !inEditor && element('div', { className: styles.spritePropertiesContent, hidden: !expanded }, children)) : fallback;
     }
     function useSpriteListTools() {
         const { locale, targetsPinned, setTargetsPinned } = useContext(context);

package/dist/targets.d.ts

@@ -1,11 +1,12 @@
 export declare function createTargetList(React: any, styles: any): {
-    SpriteGrid: ({ className, compact, standard, stageTile, children, query }: {
+    SpriteGrid: ({ className, compact, standard, stageTile, children, query, onRename }: {
         className: any;
         compact: any;
         standard: any;
         stageTile: any;
         children: any;
         query?: string;
+        onRename: any;
     }) => any;
     BackdropTile: ({ url, label, selected, highlighted, containerRef, onClick, onMouseEnter, onMouseLeave }: {
         url: any;

package/dist/targets.js

@@ -4,7 +4,7 @@ const gap = 6;
 const padding = gap * 2;
 export function createTargetList(React, styles) {
     const { createElement: element, useLayoutEffect, useRef, useState } = React;
-    function SpriteGrid({ className, compact, standard, stageTile, children, query = '' }) {
+    function SpriteGrid({ className, compact, standard, stageTile, children, query = '', onRename }) {
         const grid = useRef(null);
         const [size, setSize] = useState({ width: 0, height: 0, visibleRows: 0 });
         useLayoutEffect(() => {
@@ -53,6 +53,12 @@ export function createTargetList(React, styles) {
         const placement = standard || size.width < size.height ? 'bottom-right' :
             (columns >= 2 ? 'top-right' : 'inline');
         const rows = Math.max(size.visibleRows, Math.ceil((React.Children.count(children) + 1) / columns));
+        const tiles = onRename ? React.Children.map(children, child => {
+            const tile = React.isValidElement(child) && child.props.children;
+            if (!React.isValidElement(tile) || !tile.props.id)
+                return child;
+            return React.cloneElement(child, {}, React.cloneElement(tile, { onRenameButtonClick: onRename }));
+        }) : children;
         return element('div', {
             className: compact ? `${className} ${styles.grid}` : className,
             'data-standard-target-grid': standard || undefined,
@@ -63,7 +69,7 @@ export function createTargetList(React, styles) {
                 '--target-columns': columns,
                 '--target-rows-before-last': rows > 1 ? `repeat(${rows - 1}, ${tileHeight}px)` : undefined
             } : undefined
-        }, children, stageTile && element('div', { className: styles.backdropCell, key: 'stage' }, stageTile));
+        }, tiles, stageTile && element('div', { className: styles.backdropCell, key: 'stage' }, stageTile));
     }
     function BackdropTile({ url, label, selected, highlighted, containerRef, onClick, onMouseEnter, onMouseLeave }) {
         return element('button', {

package/dist/workspace-layout.d.ts

@@ -19,6 +19,10 @@ export interface WorkspaceLayout {
     editingView?: string;
     panels: Record<string, PanelReference>;
 }
+export declare function workspaceWithoutTransientPanels(grid: Grid, activeGroup: string, transient: ReadonlySet<string>, editingView?: string): {
+    grid: Grid;
+    activeGroup: string;
+} | undefined;
 /** Rebuild only the supported docked grid and logical panel references from storage. */
 export declare function readWorkspaceLayout(raw: string, project: string): WorkspaceLayout | undefined;
 export {};

package/dist/workspace-layout.js

@@ -1,4 +1,31 @@
 import { Orientation } from 'dockview';
+export function workspaceWithoutTransientPanels(grid, activeGroup, transient, editingView) {
+    if (!transient.size)
+        return { grid, activeGroup };
+    const groups = new Map();
+    const trim = (node) => {
+        if (Array.isArray(node.data)) {
+            const data = node.data.flatMap(child => {
+                const kept = trim(child);
+                return kept ? [kept] : [];
+            });
+            return data.length ? { ...node, data } : undefined;
+        }
+        const views = node.data.views.filter(id => !transient.has(id));
+        if (!views.length)
+            return;
+        const activeView = views.includes(node.data.activeView) ? node.data.activeView : views[0];
+        groups.set(node.data.id, views);
+        return { ...node, data: { ...node.data, views, activeView } };
+    };
+    const root = trim(grid.root);
+    if (!root)
+        return;
+    if (groups.has(activeGroup))
+        return { grid: { ...grid, root }, activeGroup };
+    const fallback = [...groups].find(([, views]) => editingView && views.includes(editingView));
+    return { grid: { ...grid, root }, activeGroup: fallback?.[0] ?? groups.keys().next().value };
+}
 const limit = 256;
 const validId = (value) => typeof value === 'string' && value.length > 0 && value.length <= 1024;
 const size = (value) => typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= 100000;

package/package.json

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

package/src/document-workspace.ts

@@ -1,6 +1,7 @@
 export interface DocumentPanelRequest {
     reference: {providerId: string; documentId: string};
     filename: string;
+    transient?: boolean;
     mount(element: HTMLElement, close: () => void): {requestClose(): void; dispose(): void};
 }
 

package/src/editor.css

@@ -191,6 +191,17 @@
     min-block-size: 0;
 }
 
+/* The native stage marker is shared by the editor, fullscreen and player entries. */
+:global([data-gui-stage]) {
+    --stage-toolbar-inset: 5.75rem;
+    --stage-overlay-z-index: 500;
+    --stage-overlay-gap: 0.5rem;
+}
+
+:global([data-gui-stage="fullscreen"]) {
+    --stage-toolbar-inset: 2.75rem;
+}
+
 .stage-frame:not([data-fullscreen]) {
     padding: 0 0.25rem 0.25rem;
     border: 1px solid var(--ui-black-transparent);

package/src/sprite-asset-pane.tsx

@@ -1,4 +1,101 @@
 import React from 'react';
+import {SpritePropertiesPanel, type SpritePropertiesPanelProps} from './sprite-properties.tsx';
+import type {SpriteAssetPreviewItem} from './sprite-tabs.ts';
+
+interface NativeAssetPanelProps {
+    children?: React.ReactNode;
+    buttons: readonly {title: string; img: string; onClick(): void}[];
+    items: readonly {dragPayload?: object; name: string; url?: string; details?: React.ReactNode}[];
+    isRtl?: boolean;
+    listActions?: React.ElementType;
+    selectedItemIndex: number;
+    onItemClick(index: number): void;
+}
+
+interface NativeSelectorProps extends NativeAssetPanelProps {
+    wrapperAttributes?: Record<string, string>;
+    listRef?(node: HTMLElement | null): void;
+    onListScroll?(event: React.UIEvent<HTMLElement>): void;
+    draggingType?: null;
+    onAddSortable?(): void;
+    onRemoveSortable?(): void;
+}
+
+export type NativeAssetSelector = React.ComponentType<NativeSelectorProps>;
+export type NativeAssetPanelRenderer = (props: NativeAssetPanelProps, options: {
+    panelAttributes: Record<string, string>;
+    detailAttributes: Record<string, string>;
+    renderSelector(Component: NativeAssetSelector, props: NativeSelectorProps): React.ReactNode;
+}) => React.ReactNode;
+
+export type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number,
+    detail: React.ReactNode, scrollTop: number) => React.ReactNode;
+
+interface PanelState {
+    rememberLayout(render: SpriteAssetLayout): void;
+    getScrollTop(): number;
+    rememberScrollTop(position: number): void;
+}
+
+const noop = () => {};
+
+function NativeAssetPanelSurface({render, panel, state, previewSelector, scrollTop}: {
+    render: NativeAssetPanelRenderer;
+    panel: NativeAssetPanelProps;
+    state?: PanelState;
+    previewSelector?: NativeAssetSelector;
+    scrollTop?: number;
+}) {
+    const list = React.useRef<HTMLElement | null>(null);
+    const setList = React.useCallback((node: HTMLElement | null) => {
+        list.current = node;
+    }, []);
+    React.useLayoutEffect(() => {
+        const position = state?.getScrollTop() ?? scrollTop;
+        if (list.current && position !== undefined) list.current.scrollTop = position;
+    }, [state, scrollTop]);
+
+    return render(panel, {
+        panelAttributes: {'data-layout-asset-panel': ''},
+        detailAttributes: {'data-layout-asset-detail': ''},
+        renderSelector(Component, props) {
+            const selectorProps = {...props, listRef: setList, wrapperAttributes: {'data-layout-asset-list': ''}};
+            if (previewSelector) {
+                return <div {...{inert: ''}} style={{display: 'contents'}}>
+                    {React.createElement(previewSelector, {
+                        ...selectorProps, draggingType: null, onAddSortable: noop, onRemoveSortable: noop
+                    })}
+                </div>;
+            }
+            return <Component {...selectorProps} onListScroll={event => {
+                state?.rememberScrollTop(event.currentTarget.scrollTop);
+            }} />;
+        }
+    });
+}
+
+export function NativeAssetPanel({render, previewSelector, panel, state}: {
+    render: NativeAssetPanelRenderer;
+    previewSelector: NativeAssetSelector;
+    panel: NativeAssetPanelProps;
+    state: PanelState;
+}) {
+    const {items, buttons, isRtl, listActions} = panel;
+    React.useLayoutEffect(() => {
+        const previousItems = new Map(items.map(item => [item.dragPayload, item]));
+        const readOnlyButtons = buttons.map(({title, img}) => ({title, img, onClick: noop}));
+        state.rememberLayout((previewItems, selectedItemIndex, detail, scrollTop) => <NativeAssetPanelSurface
+            render={render} previewSelector={previewSelector} scrollTop={scrollTop} panel={{
+                isRtl, listActions, selectedItemIndex, buttons: readOnlyButtons,
+                onItemClick: noop, children: detail,
+                items: previewItems.map(item => {
+                    const previous = previousItems.get(item.asset);
+                    return {name: item.name, url: item.imageUrl || previous?.url, details: previous?.details};
+                })
+            }} />);
+    }, [state, render, previewSelector, items, buttons, isRtl, listActions]);
+    return <NativeAssetPanelSurface render={render} panel={panel} state={state} />;
+}
 
 export interface SpriteMediaAsset {
     /** Host identity for this item within its target, independent of the list order. */
@@ -35,6 +132,9 @@ export interface SpriteMediaPaneProps extends PaneProps {
 export interface SpriteVariablePaneProps extends PaneProps {
     kind: 'variables';
     variables: readonly SpriteVariable[];
+    properties?: SpritePropertiesPanelProps['values'];
+    targetId?: string;
+    onWriteProperties?: SpritePropertiesPanelProps['onChange'];
     onWrite(id: string, value: SpriteVariable['value']): void;
 }
 
@@ -148,9 +248,12 @@ function VariableField({variable, editable, onWrite}: {
         }} />;
 }
 
-function VariablePane({variables, editable, onWrite, locale}: SpriteVariablePaneProps) {
+function VariablePane({variables, editable, onWrite, locale, properties, targetId, onWriteProperties}: SpriteVariablePaneProps) {
     const labels = labelsFor(locale);
     return <section className="tw-sprite-variables" aria-label={labels.variables}>
+        {properties && targetId && onWriteProperties &&
+            <SpritePropertiesPanel targetId={targetId} values={properties} locale={locale}
+                disabled={!editable} onChange={onWriteProperties} />}
         {variables.length ? <table className="tw-sprite-variables__table">
             <thead><tr><th scope="col">{labels.name}</th><th scope="col">{labels.value}</th></tr></thead>
             <tbody>{variables.map(variable => <tr key={variable.id}>

package/src/sprite-editor-toolbar.tsx

@@ -23,6 +23,7 @@ interface SpriteEditorToolbarProps {
     activeGroup?: boolean;
     search?: SpriteEditorSearch;
     availableSections?: readonly SpriteEditorSection[];
+    propertiesInVariables?: boolean;
     actions?: React.ReactNode;
 }
 
@@ -95,10 +96,10 @@ function SearchBox({viewId, section, japanese, search}: {
 }
 
 export function SpriteEditorToolbar({viewId, locale, section, onSectionChange, isStage, activeGroup, search,
-    availableSections = spriteEditorSections, actions}: SpriteEditorToolbarProps) {
+    availableSections = spriteEditorSections, propertiesInVariables = false, actions}: SpriteEditorToolbarProps) {
     const japanese = /^ja(?:-|$)/i.test(locale);
-    const labels = japanese ? {code: 'コード', costumes: isStage ? '背景' : 'コスチューム', sounds: '音', variables: '変数'} :
-        {code: 'Code', costumes: isStage ? 'Backdrops' : 'Costumes', sounds: 'Sounds', variables: 'Variables'};
+    const labels = japanese ? {code: 'コード', costumes: isStage ? '背景' : 'コスチューム', sounds: '音', variables: propertiesInVariables ? 'プロパティ・変数' : '変数'} :
+        {code: 'Code', costumes: isStage ? 'Backdrops' : 'Costumes', sounds: 'Sounds', variables: propertiesInVariables ? 'Properties & Variables' : 'Variables'};
     return <div className="tw-plus-sprite-toolbar" data-active-group={activeGroup}>
         <div className="tw-plus-sprite-toolbar-sections" role="tablist"
             aria-label={japanese ? 'スプライトの編集内容' : 'Sprite editor sections'}>

package/src/sprite-tabs.ts

@@ -3,14 +3,16 @@ import {createPortal} from 'react-dom';
 import {createDockview, DefaultTab, themeLight} from 'dockview';
 import type {DockviewGroupPanel, GroupPanelPartInitParameters, IDockviewPanel, SerializedDockview} from 'dockview';
 import {createSpriteLayoutMenu} from './sprite-layout-menu.ts';
-import {SpriteAssetPane} from './sprite-asset-pane.tsx';
+import {NativeAssetPanel, SpriteAssetPane} from './sprite-asset-pane.tsx';
+import type {NativeAssetPanelRenderer, NativeAssetSelector, SpriteAssetLayout} from './sprite-asset-pane.tsx';
 import type {SpriteVariable} from './sprite-asset-pane.tsx';
+import type {SpritePropertiesPanelProps} from './sprite-properties.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';
-import {readWorkspaceLayout} from './workspace-layout.ts';
+import {readWorkspaceLayout, workspaceWithoutTransientPanels} from './workspace-layout.ts';
 import type {PanelReference, WorkspaceLayout} from './workspace-layout.ts';
 
 export {getDocumentWorkspace} from './document-workspace.ts';
@@ -61,6 +63,8 @@ export interface SpriteTabAdapter<Snapshot = unknown> {
 export interface SpriteAssetSelection {
     restore(target: object, assets: readonly object[]): number | undefined;
     remember(target: object, asset: object | undefined, select?: (index: number) => void): void;
+    renderPanel?(render: NativeAssetPanelRenderer, previewSelector: NativeAssetSelector,
+        panel: React.ComponentProps<typeof NativeAssetPanel>['panel']): React.ReactNode;
     rememberLayout?(render: SpriteAssetLayout): void;
     getScrollTop?(): number;
     rememberScrollTop?(position: number): void;
@@ -77,7 +81,6 @@ export interface SpriteAssetPreviewItem {
     duration?: number;
 }
 
-type SpriteAssetLayout = (items: readonly SpriteAssetPreviewItem[], index: number, detail: React.ReactNode, scrollTop: number) => React.ReactNode;
 const variableSection = spriteEditorSections.indexOf('variables');
 
 export interface SpriteAssetPreviewData {
@@ -95,26 +98,33 @@ function createAssetSelections(target: Target, source?: {
     const layouts = new Map(source?.layouts);
     const scroll = new Map(source?.scroll);
     const selectors = new Map<AssetKind, (index: number) => void>();
-    const forKind = (kind: AssetKind): SpriteAssetSelection => ({
-        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 forKind = (kind: AssetKind): SpriteAssetSelection => {
+        const state = {
+            rememberLayout(render: SpriteAssetLayout) {
+                layouts.set(kind, render);
+            },
+            getScrollTop: () => scroll.get(kind) ?? 0,
+            rememberScrollTop(position: number) {
+                scroll.set(kind, position);
+            }
+        };
+        return {
+            ...state,
+            renderPanel: (render, previewSelector, panel) =>
+                React.createElement(NativeAssetPanel, {render, previewSelector, panel, state}),
+            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);
+            },
+        };
+    };
     const ports: AssetSelections = {costumes: forKind('costumes'), sounds: forKind('sounds')};
     return {selected, ports, layouts, selectors, scroll};
 }
@@ -135,7 +145,7 @@ interface TabOptions<Snapshot = unknown> {
     reopenLabel: string;
     multiView?: boolean;
     layoutStorage?: {
-        storage: Storage;
+        storage: Pick<Storage, 'getItem' | 'setItem'>;
         key: string;
         isProjectLoading?(): boolean;
         subscribeProject?(listener: () => void): (() => void) | undefined;
@@ -356,12 +366,11 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         return {...menu, init() {}};
     }
 
-    function isOpen(target: Target) {
-        return [...views.values()].some(view => view.target === target) && vm.runtime.targets.includes(target);
-    }
+    const canRename = (target: Target) =>
+        target.isOriginal && !target.isStage && Boolean(vm.renameSprite) && vm.runtime.targets.includes(target);
 
     function openRenameDialog(target: Target) {
-        if (renameDialog || !isOpen(target)) return;
+        if (renameDialog || !canRename(target)) return;
         const dialog = document.createElement('dialog');
         dialog.className = 'tw-plus-sprite-rename';
         dialog.setAttribute('aria-label', text.title);
@@ -387,7 +396,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
             dialog.remove();
             if (renameDialog !== dialog) return;
             renameDialog = undefined;
-            if (dialog.returnValue === 'save' && input.value.trim() && isOpen(target) &&
+            if (dialog.returnValue === 'save' && input.value.trim() && canRename(target) &&
                 input.value !== target.getName()) vm.renameSprite?.(target.id, input.value);
         }, {once: true});
         renameDialog = dialog;
@@ -671,8 +680,14 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
             panels[id] = {kind: 'sprite', name: targetName(view.target), stage: view.target.isStage, section: view.section};
         }
         if (dockview.getPanel(stagePanelId)) panels[stagePanelId] = {kind: 'stage'};
-        for (const [id, {request}] of documents) panels[id] = {kind: 'document', ...request.reference};
-        const snapshot: WorkspaceLayout = {version: 1, project: projectSignature(targets), grid, activeGroup,
+        const transient = new Set<string>();
+        for (const [id, {request}] of documents) {
+            if (request.transient) transient.add(id);
+            else panels[id] = {kind: 'document', ...request.reference};
+        }
+        const saved = workspaceWithoutTransientPanels(grid, activeGroup, transient, active?.id);
+        if (!saved) return;
+        const snapshot: WorkspaceLayout = {version: 1, project: projectSignature(targets), ...saved,
             editingView: active?.id, panels};
         try { persistence.storage.setItem(persistence.key, JSON.stringify(snapshot)); } catch { /* Storage can be unavailable. */ }
     }
@@ -841,6 +856,10 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
     refresh();
     return {
         select, openStage, closeStage, split, closeSplit, activateView, setViewSection, syncActiveSection, refreshSurfaces,
+        rename(id: string) {
+            const target = vm.runtime.targets.find(item => item.id === id);
+            if (target) openRenameDialog(target);
+        },
         selectAsset(id: string, kind: AssetKind, index: number) {
             if (active?.id === id && active.section === (kind === 'costumes' ? 1 : 2)) {
                 active.assets.selectors.get(kind)?.(index);
@@ -891,6 +910,8 @@ type SpriteTabsProps<Snapshot> = Omit<TabOptions<Snapshot>, 'activateSection' |
     renderToolbar?(view: SpriteTabView, actions: ToolbarActions): React.ReactNode;
     getAssetPreview?(targetId: string, kind: SpriteAssetKind): SpriteAssetPreviewData;
     getVariables?(targetId: string): readonly SpriteVariable[];
+    getProperties?(targetId: string): SpritePropertiesPanelProps['values'];
+    writeProperties?: SpritePropertiesPanelProps['onChange'];
     writeVariable?(targetId: string, id: string, value: SpriteVariable['value']): void;
     getCodeSearchItems?(targetId: string): readonly SpriteSearchResult[];
     openCodeSearchResult?(targetId: string, id: string): void;
@@ -1039,7 +1060,7 @@ function SpriteTabs<Snapshot>(props: SpriteTabsProps<Snapshot>) {
             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,
+                    activeGroup: view.groupActive, propertiesInVariables: Boolean(props.getProperties),
                     actions: view.active && currentSection !== 'variables' ? props.activeTools : undefined,
                     onSectionChange: section => actions.setSection(spriteEditorSections.indexOf(section)),
                     search: {
@@ -1071,6 +1092,12 @@ function SpriteTabs<Snapshot>(props: SpriteTabsProps<Snapshot>) {
         }), 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) ?? [],
+                properties: props.getProperties?.(targetId),
+                targetId,
+                onWriteProperties(id: string, patch: Parameters<SpritePropertiesPanelProps['onChange']>[1]) {
+                    props.writeProperties?.(id, patch);
+                    workspace?.refreshSurfaces();
+                },
                 onWrite(variableId, value) {
                     props.writeVariable?.(targetId, variableId, value);
                     workspace?.refreshSurfaces();
@@ -1106,7 +1133,10 @@ export function useSpriteTabs<Snapshot>({available, enabled, locale, ...props}:
     return {
         controller,
         assetSelections: enabled ? selection.assets : undefined,
-        context: enabled ? {selectedId: selection.id, openLabel: japanese ? '開く' : 'Open', select, open: select} : null,
+        context: enabled ? {
+            selectedId: selection.id, openLabel: japanese ? '開く' : 'Open', select, open: select,
+            rename: props.multiView && props.getProperties ? (id: string) => controller.current?.rename(id) : undefined
+        } : null,
         renderEditorTabRow: available ? (children: React.ReactNode) => React.createElement(SpriteTabs<Snapshot>, {
             ...props, enabled, locale, children, slots, onAttach: () => setReady(true),
             selectTarget: (id, assets) => setSelection({id, assets}),

package/src/standard-layout.ts

@@ -255,17 +255,18 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
         return element(targets.BackdropFooter, {buttons: unique, label: isJapanese(locale) ? '背景を追加' : 'Add a backdrop'});
     }
 
-    function SpritePropertiesSection({fallback, children}) {
+    function SpritePropertiesSection({fallback, children, inEditor = false}) {
         const {plusLayout, locale} = useContext(context);
         const [expanded, setExpanded] = useState(false);
         const tools = useContext(targetTools);
         return plusLayout ? element('div', {className: styles.spriteProperties},
-            element('button', {
-                type: 'button', className: styles.spritePropertiesToggle, 'aria-expanded': expanded,
-                onClick: () => setExpanded(open => !open)
-            }, isJapanese(locale) ? 'スプライト' : 'Sprite'),
+            inEditor ? element('span', null, isJapanese(locale) ? 'スプライト' : 'Sprite') :
+                element('button', {
+                    type: 'button', className: styles.spritePropertiesToggle, 'aria-expanded': expanded,
+                    onClick: () => setExpanded(open => !open)
+                }, isJapanese(locale) ? 'スプライト' : 'Sprite'),
             element('div', {ref: tools?.[1]}),
-            element('div', {className: styles.spritePropertiesContent, hidden: !expanded}, children)
+            !inEditor && element('div', {className: styles.spritePropertiesContent, hidden: !expanded}, children)
         ) : fallback;
     }
 

package/src/targets.ts

@@ -6,7 +6,7 @@ const padding = gap * 2;
 export function createTargetList(React, styles) {
     const {createElement: element, useLayoutEffect, useRef, useState} = React;
 
-    function SpriteGrid({className, compact, standard, stageTile, children, query = ''}) {
+    function SpriteGrid({className, compact, standard, stageTile, children, query = '', onRename}) {
         const grid = useRef(null);
         const [size, setSize] = useState({width: 0, height: 0, visibleRows: 0});
         useLayoutEffect(() => {
@@ -51,6 +51,11 @@ export function createTargetList(React, styles) {
         const placement = standard || size.width < size.height ? 'bottom-right' :
             (columns >= 2 ? 'top-right' : 'inline');
         const rows = Math.max(size.visibleRows, Math.ceil((React.Children.count(children) + 1) / columns));
+        const tiles = onRename ? React.Children.map(children, child => {
+            const tile = React.isValidElement(child) && child.props.children;
+            if (!React.isValidElement(tile) || !tile.props.id) return child;
+            return React.cloneElement(child, {}, React.cloneElement(tile, {onRenameButtonClick: onRename}));
+        }) : children;
         return element('div', {
             className: compact ? `${className} ${styles.grid}` : className,
             'data-standard-target-grid': standard || undefined,
@@ -61,7 +66,7 @@ export function createTargetList(React, styles) {
                 '--target-columns': columns,
                 '--target-rows-before-last': rows > 1 ? `repeat(${rows - 1}, ${tileHeight}px)` : undefined
             } : undefined
-        }, children, stageTile && element('div', {className: styles.backdropCell, key: 'stage'}, stageTile));
+        }, tiles, stageTile && element('div', {className: styles.backdropCell, key: 'stage'}, stageTile));
     }
 
     function BackdropTile({url, label, selected, highlighted, containerRef, onClick, onMouseEnter, onMouseLeave}) {

package/src/workspace-layout.ts

@@ -18,6 +18,31 @@ export interface WorkspaceLayout {
     panels: Record<string, PanelReference>;
 }
 
+export function workspaceWithoutTransientPanels(grid: Grid, activeGroup: string, transient: ReadonlySet<string>,
+    editingView?: string): {grid: Grid; activeGroup: string} | undefined {
+    if (!transient.size) return {grid, activeGroup};
+    const groups = new Map<string, readonly string[]>();
+    const trim = (node: Node): Node | undefined => {
+        if (Array.isArray(node.data)) {
+            const data = node.data.flatMap(child => {
+                const kept = trim(child);
+                return kept ? [kept] : [];
+            });
+            return data.length ? {...node, data} : undefined;
+        }
+        const views = node.data.views.filter(id => !transient.has(id));
+        if (!views.length) return;
+        const activeView = views.includes(node.data.activeView!) ? node.data.activeView : views[0];
+        groups.set(node.data.id, views);
+        return {...node, data: {...node.data, views, activeView}};
+    };
+    const root = trim(grid.root);
+    if (!root) return;
+    if (groups.has(activeGroup)) return {grid: {...grid, root}, activeGroup};
+    const fallback = [...groups].find(([, views]) => editingView && views.includes(editingView));
+    return {grid: {...grid, root}, activeGroup: fallback?.[0] ?? groups.keys().next().value!};
+}
+
 const limit = 256;
 const validId = (value: unknown): value is string =>
     typeof value === 'string' && value.length > 0 && value.length <= 1024;