@kubohiroya/turbowarp-plus-editor-layout 0.1.15 → 0.1.17

package/dist/native-tile-title.d.ts

@@ -0,0 +1 @@
+export declare function observeTileNameTitles(list: HTMLElement | null): () => void;

package/dist/native-tile-title.js

@@ -0,0 +1,16 @@
+export function observeTileNameTitles(list) {
+    if (!list)
+        return;
+    const update = () => {
+        for (const tile of list.querySelectorAll('[class*="sprite-selector-item_sprite-selector-item_"]')) {
+            const name = tile.querySelector('[class*="sprite-selector-item_sprite-name_"]')?.textContent ?? '';
+            if (tile.title !== name)
+                tile.title = name;
+        }
+    };
+    // The native sortable list can mount or replace its tiles after the host renders.
+    const observer = new list.ownerDocument.defaultView.MutationObserver(update);
+    observer.observe(list, { subtree: true, childList: true, characterData: true });
+    update();
+    return () => observer.disconnect();
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type SpritePropertiesPanelProps } from './sprite-properties.tsx';
-import type { SpriteAssetPreviewItem } from './sprite-tabs.ts';
+import type { SpriteAssetKind, SpriteAssetPreviewItem } from './sprite-tabs.ts';
 interface NativeAssetPanelProps {
     children?: React.ReactNode;
     buttons: readonly {
@@ -39,11 +39,13 @@ interface PanelState {
     getScrollTop(): number;
     rememberScrollTop(position: number): void;
 }
-export declare function NativeAssetPanel({ render, previewSelector, panel, state }: {
+export declare function NativeAssetPanel({ render, previewSelector, panel, kind, locale, state }: {
     render: NativeAssetPanelRenderer;
     previewSelector: NativeAssetSelector;
     panel: NativeAssetPanelProps;
-    state: PanelState;
+    kind?: SpriteAssetKind;
+    locale?: string;
+    state?: PanelState;
 }): React.JSX.Element;
 export interface SpriteMediaAsset {
     /** Host identity for this item within its target, independent of the list order. */

package/dist/sprite-asset-pane.js

@@ -1,10 +1,14 @@
 import React from 'react';
+import { observeTileNameTitles } from "./native-tile-title.js";
 import { SpritePropertiesPanel } from "./sprite-properties.js";
 const noop = () => { };
-function NativeAssetPanelSurface({ render, panel, state, previewSelector, scrollTop }) {
+function NativeAssetPanelSurface({ render, panel, kind, state, previewSelector, scrollTop }) {
     const list = React.useRef(null);
+    const stopObserving = React.useRef();
     const setList = React.useCallback((node) => {
+        stopObserving.current?.();
         list.current = node;
+        stopObserving.current = observeTileNameTitles(node);
     }, []);
     React.useLayoutEffect(() => {
         const position = state?.getScrollTop() ?? scrollTop;
@@ -12,7 +16,7 @@ function NativeAssetPanelSurface({ render, panel, state, previewSelector, scroll
             list.current.scrollTop = position;
     }, [state, scrollTop]);
     return render(panel, {
-        panelAttributes: { 'data-layout-asset-panel': '' },
+        panelAttributes: { 'data-layout-asset-panel': kind ?? '' },
         detailAttributes: { 'data-layout-asset-detail': '' },
         renderSelector(Component, props) {
             const selectorProps = { ...props, listRef: setList, wrapperAttributes: { 'data-layout-asset-list': '' } };
@@ -27,12 +31,14 @@ function NativeAssetPanelSurface({ render, panel, state, previewSelector, scroll
         }
     });
 }
-export function NativeAssetPanel({ render, previewSelector, panel, state }) {
+export function NativeAssetPanel({ render, previewSelector, panel, kind, locale = 'en', state }) {
     const { items, buttons, isRtl, listActions } = panel;
     React.useLayoutEffect(() => {
+        if (!state)
+            return;
         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: {
+        state.rememberLayout((previewItems, selectedItemIndex, detail, scrollTop) => React.createElement(NativeAssetPanelSurface, { render: render, kind: kind, previewSelector: previewSelector, scrollTop: scrollTop, panel: {
                 isRtl, listActions, selectedItemIndex, buttons: readOnlyButtons,
                 onItemClick: noop, children: detail,
                 items: previewItems.map(item => {
@@ -40,8 +46,14 @@ export function NativeAssetPanel({ render, previewSelector, panel, state }) {
                     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 });
+    }, [state, render, previewSelector, items, buttons, isRtl, listActions, kind]);
+    const activePanel = kind === 'sounds' ? {
+        ...panel,
+        children: React.createElement(React.Fragment, null,
+            items.length === 0 && React.createElement("p", { className: "tw-sprite-media__empty" }, labelsFor(locale).emptySounds),
+            panel.children)
+    } : panel;
+    return React.createElement(NativeAssetPanelSurface, { render: render, panel: activePanel, kind: kind, state: state });
 }
 const english = {
     costumes: 'Costumes', sounds: 'Sounds', variables: 'Variables', name: 'Name', value: 'Value',
@@ -76,7 +88,7 @@ function MediaPane({ kind, items, selectedId, onSelect, renderEditor, editable,
     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: () => {
+            React.createElement("button", { type: "button", className: "tw-sprite-media__item", title: asset.name, "aria-current": asset.id === selectedId || undefined, "aria-disabled": !editable || undefined, tabIndex: editable ? 0 : -1, onClick: () => {
                     if (editable)
                         onSelect(asset.id);
                 } },

package/dist/sprite-editor-toolbar.js

@@ -51,7 +51,7 @@ function SearchBox({ viewId, section, japanese, search }) {
 }
 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: propertiesInVariables ? 'プロパティ・変数' : '変数' } :
+    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 => {
@@ -67,6 +67,7 @@ export function SpriteEditorToolbar({ viewId, locale, section, onSectionChange,
             } },
             React.createElement(Icon, { kind: id }),
             labels[id]))),
-        search && React.createElement(SearchBox, { viewId, section, japanese, search }),
-        actions);
+        (search || actions) && React.createElement("div", { className: "tw-plus-sprite-toolbar-tools" },
+            actions,
+            search && React.createElement(SearchBox, { viewId, section, japanese, search })));
 }

package/dist/sprite-tabs.js

@@ -9,7 +9,7 @@ import { readWorkspaceLayout, workspaceWithoutTransientPanels } from "./workspac
 export { getDocumentWorkspace } from "./document-workspace.js";
 export { useDockviewStage } from "./dockview-stage.js";
 const variableSection = spriteEditorSections.indexOf('variables');
-function createAssetSelections(target, source) {
+function createAssetSelections(target, locale, source) {
     const selected = new Map(source?.selected);
     const layouts = new Map(source?.layouts);
     const scroll = new Map(source?.scroll);
@@ -26,7 +26,7 @@ function createAssetSelections(target, source) {
         };
         return {
             ...state,
-            renderPanel: (render, previewSelector, panel) => React.createElement(NativeAssetPanel, { render, previewSelector, panel, state }),
+            renderPanel: (render, previewSelector, panel) => React.createElement(NativeAssetPanel, { render, previewSelector, panel, kind, locale, state }),
             restore(current, assets) {
                 if (current !== target)
                     return;
@@ -406,7 +406,7 @@ export function mountSpriteTabs(root, content, options) {
         }
         const source = splitPosition && views.get(splitPosition.referencePanel);
         views.set(id, { id, target, section: section ?? remembered.get(target) ?? options.getSection(),
-            assets: createAssetSelections(target, source?.assets) });
+            assets: createAssetSelections(target, locale, source?.assets) });
         try {
             return dockview.addPanel({ id, title: target.getName(), component: 'sprite', inactive: !splitPosition,
                 position: splitPosition, params: { icon: getIcon(target) } });
@@ -616,7 +616,7 @@ export function mountSpriteTabs(root, content, options) {
                 const target = targets.find(item => item.isStage === reference.stage && targetName(item) === reference.name);
                 if (!target || id === stagePanelId || (reference.section === variableSection && !options.variables))
                     return finishRestore();
-                resolvedSprites.set(id, { id, target, section: reference.section, assets: createAssetSelections(target) });
+                resolvedSprites.set(id, { id, target, section: reference.section, assets: createAssetSelections(target, locale) });
                 panels[id] = { id, title: target.getName(), contentComponent: 'sprite', params: { icon: getIcon(target) } };
             }
             else if (reference.kind === 'stage') {
@@ -997,6 +997,14 @@ function SpriteTabs(props) {
 export function useSpriteTabs({ available, enabled, locale, ...props }) {
     const controller = React.useRef(null);
     const [selection, setSelection] = React.useState({ id: '' });
+    const defaultAssets = React.useMemo(() => {
+        const forKind = (kind) => ({
+            restore: () => undefined,
+            remember() { },
+            renderPanel: (render, previewSelector, panel) => React.createElement(NativeAssetPanel, { render, previewSelector, panel, kind, locale })
+        });
+        return { costumes: forKind('costumes'), sounds: forKind('sounds') };
+    }, [locale]);
     const [ready, setReady] = React.useState(false);
     const [slots] = React.useState(() => available ? Array.from({ length: 3 }, () => {
         const slot = document.createElement('div');
@@ -1014,7 +1022,7 @@ export function useSpriteTabs({ available, enabled, locale, ...props }) {
     const select = (id) => controller.current?.select(id);
     return {
         controller,
-        assetSelections: enabled ? selection.assets : undefined,
+        assetSelections: (enabled ? selection.assets : undefined) ?? defaultAssets,
         context: enabled ? {
             selectedId: selection.id, openLabel: japanese ? '開く' : 'Open', select, open: select,
             rename: props.multiView && props.getProperties ? (id) => controller.current?.rename(id) : undefined

package/dist/standard-layout.js

@@ -260,7 +260,7 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
         const { plusLayout, locale } = useContext(context);
         const [expanded, setExpanded] = useState(false);
         const tools = useContext(targetTools);
-        return plusLayout ? element('div', { className: styles.spriteProperties }, inEditor ? element('span', null, isJapanese(locale) ? 'スプライト' : 'Sprite') :
+        return plusLayout ? element('div', { className: styles.spriteProperties }, inEditor ? element('span', { className: styles.spritePropertiesTitle }, isJapanese(locale) ? 'スプライト' : 'Sprite') :
             element('button', {
                 type: 'button', className: styles.spritePropertiesToggle, 'aria-expanded': expanded,
                 onClick: () => setExpanded(open => !open)

package/dist/targets.js

@@ -1,3 +1,4 @@
+import { observeTileNameTitles } from "./native-tile-title.js";
 const tileHeight = 80;
 const minTileWidth = 72;
 const gap = 6;
@@ -26,6 +27,7 @@ export function createTargetList(React, styles) {
             observer.observe(viewport);
             return () => observer.disconnect();
         }, [compact]);
+        useLayoutEffect(() => observeTileNameTitles(grid.current), []);
         useLayoutEffect(() => {
             const name = query.trim().toLocaleLowerCase();
             if (!name)

package/package.json

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

package/src/editor.css

@@ -429,11 +429,15 @@ details.layout-menu button {
     background: transparent;
     color: inherit;
     font: inherit;
-    font-size: 0.875rem;
     text-align: start;
     cursor: pointer;
 }
 
+.sprite-properties-title,
+.sprite-properties-toggle {
+    font-size: 0.875rem;
+}
+
 .sprite-properties-content {
     min-block-size: 0;
     overflow: auto;

package/src/native-tile-title.ts

@@ -0,0 +1,14 @@
+export function observeTileNameTitles(list: HTMLElement | null) {
+    if (!list) return;
+    const update = () => {
+        for (const tile of list.querySelectorAll<HTMLElement>('[class*="sprite-selector-item_sprite-selector-item_"]')) {
+            const name = tile.querySelector('[class*="sprite-selector-item_sprite-name_"]')?.textContent ?? '';
+            if (tile.title !== name) tile.title = name;
+        }
+    };
+    // The native sortable list can mount or replace its tiles after the host renders.
+    const observer = new list.ownerDocument.defaultView.MutationObserver(update);
+    observer.observe(list, {subtree: true, childList: true, characterData: true});
+    update();
+    return () => observer.disconnect();
+}

package/src/sprite-asset-pane.css

@@ -1,3 +1,14 @@
+[data-layout-asset-panel="costumes"] [class*="sprite-selector-item_delete-button_"] {
+    display: none;
+}
+
+.tw-sprite-media__empty {
+    margin: auto;
+    padding: 1rem;
+    color: var(--text-primary, #273146);
+    text-align: center;
+}
+
 .tw-sprite-media,
 .tw-sprite-variables {
     box-sizing: border-box;

package/src/sprite-asset-pane.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import {observeTileNameTitles} from './native-tile-title.ts';
 import {SpritePropertiesPanel, type SpritePropertiesPanelProps} from './sprite-properties.tsx';
-import type {SpriteAssetPreviewItem} from './sprite-tabs.ts';
+import type {SpriteAssetKind, SpriteAssetPreviewItem} from './sprite-tabs.ts';
 
 interface NativeAssetPanelProps {
     children?: React.ReactNode;
@@ -39,24 +40,27 @@ interface PanelState {
 
 const noop = () => {};
 
-function NativeAssetPanelSurface({render, panel, state, previewSelector, scrollTop}: {
+function NativeAssetPanelSurface({render, panel, kind, state, previewSelector, scrollTop}: {
     render: NativeAssetPanelRenderer;
     panel: NativeAssetPanelProps;
+    kind?: SpriteAssetKind;
     state?: PanelState;
     previewSelector?: NativeAssetSelector;
     scrollTop?: number;
 }) {
     const list = React.useRef<HTMLElement | null>(null);
+    const stopObserving = React.useRef<() => void>();
     const setList = React.useCallback((node: HTMLElement | null) => {
+        stopObserving.current?.();
         list.current = node;
+        stopObserving.current = observeTileNameTitles(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': ''},
+        panelAttributes: {'data-layout-asset-panel': kind ?? ''},
         detailAttributes: {'data-layout-asset-detail': ''},
         renderSelector(Component, props) {
             const selectorProps = {...props, listRef: setList, wrapperAttributes: {'data-layout-asset-list': ''}};
@@ -74,18 +78,21 @@ function NativeAssetPanelSurface({render, panel, state, previewSelector, scrollT
     });
 }
 
-export function NativeAssetPanel({render, previewSelector, panel, state}: {
+export function NativeAssetPanel({render, previewSelector, panel, kind, locale = 'en', state}: {
     render: NativeAssetPanelRenderer;
     previewSelector: NativeAssetSelector;
     panel: NativeAssetPanelProps;
-    state: PanelState;
+    kind?: SpriteAssetKind;
+    locale?: string;
+    state?: PanelState;
 }) {
     const {items, buttons, isRtl, listActions} = panel;
     React.useLayoutEffect(() => {
+        if (!state) return;
         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={{
+            render={render} kind={kind} previewSelector={previewSelector} scrollTop={scrollTop} panel={{
                 isRtl, listActions, selectedItemIndex, buttons: readOnlyButtons,
                 onItemClick: noop, children: detail,
                 items: previewItems.map(item => {
@@ -93,8 +100,15 @@ export function NativeAssetPanel({render, previewSelector, panel, state}: {
                     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} />;
+    }, [state, render, previewSelector, items, buttons, isRtl, listActions, kind]);
+    const activePanel = kind === 'sounds' ? {
+        ...panel,
+        children: <>
+            {items.length === 0 && <p className="tw-sprite-media__empty">{labelsFor(locale).emptySounds}</p>}
+            {panel.children}
+        </>
+    } : panel;
+    return <NativeAssetPanelSurface render={render} panel={activePanel} kind={kind} state={state} />;
 }
 
 export interface SpriteMediaAsset {
@@ -178,7 +192,7 @@ function MediaPane({kind, items, selectedId, onSelect, renderEditor, editable, l
     return <section className={detailOnly ? 'tw-sprite-media tw-sprite-media--detail' : 'tw-sprite-media'} aria-label={labels[kind]}>
         {!detailOnly && <ul className="tw-sprite-media__list" aria-label={labels[kind]}>
             {items.map(asset => <li key={asset.id}>
-                <button type="button" className="tw-sprite-media__item" aria-current={asset.id === selectedId || undefined}
+                <button type="button" className="tw-sprite-media__item" title={asset.name} aria-current={asset.id === selectedId || undefined}
                     aria-disabled={!editable || undefined} tabIndex={editable ? 0 : -1} onClick={() => {
                         if (editable) onSelect(asset.id);
                     }}>

package/src/sprite-editor-toolbar.css

@@ -58,11 +58,18 @@
 
 .tw-plus-sprite-toolbar svg { width: 16px; height: 16px; flex: none; }
 
+.tw-plus-sprite-toolbar-tools {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-inline-size: 0;
+    margin-inline-start: auto;
+}
+
 .tw-plus-sprite-search {
     position: relative;
-    flex: 0 1 132px;
-    min-width: 0;
-    margin-inline-start: auto;
+    inline-size: 132px;
+    min-inline-size: 0;
 }
 
 .tw-plus-sprite-search-field { position: relative; }

package/src/sprite-editor-toolbar.tsx

@@ -98,7 +98,7 @@ function SearchBox({viewId, section, japanese, search}: {
 export function SpriteEditorToolbar({viewId, locale, section, onSectionChange, isStage, activeGroup, search,
     availableSections = spriteEditorSections, propertiesInVariables = false, actions}: SpriteEditorToolbarProps) {
     const japanese = /^ja(?:-|$)/i.test(locale);
-    const labels = japanese ? {code: 'コード', costumes: isStage ? '背景' : 'コスチューム', sounds: '音', variables: propertiesInVariables ? 'プロパティ・変数' : '変数'} :
+    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"
@@ -119,7 +119,9 @@ export function SpriteEditorToolbar({viewId, locale, section, onSectionChange, i
                 {labels[id]}
             </button>)}
         </div>
-        {search && <SearchBox {...{viewId, section, japanese, search}} />}
-        {actions}
+        {(search || actions) && <div className="tw-plus-sprite-toolbar-tools">
+            {actions}
+            {search && <SearchBox {...{viewId, section, japanese, search}} />}
+        </div>}
     </div>;
 }

package/src/sprite-tabs.ts

@@ -89,7 +89,7 @@ export interface SpriteAssetPreviewData {
 }
 type AssetSelections = Readonly<Record<AssetKind, SpriteAssetSelection>>;
 
-function createAssetSelections(target: Target, source?: {
+function createAssetSelections(target: Target, locale: string, source?: {
     selected: Map<AssetKind, object>;
     layouts: Map<AssetKind, SpriteAssetLayout>;
     scroll: Map<AssetKind, number>;
@@ -111,7 +111,7 @@ function createAssetSelections(target: Target, source?: {
         return {
             ...state,
             renderPanel: (render, previewSelector, panel) =>
-                React.createElement(NativeAssetPanel, {render, previewSelector, panel, state}),
+                React.createElement(NativeAssetPanel, {render, previewSelector, panel, kind, locale, state}),
             restore(current, assets) {
                 if (current !== target) return;
                 const index = assets.indexOf(selected.get(kind));
@@ -532,7 +532,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
         }
         const source = splitPosition && views.get(splitPosition.referencePanel);
         views.set(id, {id, target, section: section ?? remembered.get(target) ?? options.getSection(),
-            assets: createAssetSelections(target, source?.assets)});
+            assets: createAssetSelections(target, locale, source?.assets)});
         try {
             return dockview.addPanel({id, title: target.getName(), component: 'sprite', inactive: !splitPosition,
                 position: splitPosition, params: {icon: getIcon(target)}});
@@ -728,7 +728,7 @@ export function mountSpriteTabs<Snapshot>(root: HTMLElement, content: HTMLElemen
             if (reference.kind === 'sprite') {
                 const target = targets.find(item => item.isStage === reference.stage && targetName(item) === reference.name);
                 if (!target || id === stagePanelId || (reference.section === variableSection && !options.variables)) return finishRestore();
-                resolvedSprites.set(id, {id, target, section: reference.section, assets: createAssetSelections(target)});
+                resolvedSprites.set(id, {id, target, section: reference.section, assets: createAssetSelections(target, locale)});
                 panels[id] = {id, title: target.getName(), contentComponent: 'sprite', params: {icon: getIcon(target)}};
             } else if (reference.kind === 'stage') {
                 if (!stagePane || id !== stagePanelId) return finishRestore();
@@ -1116,6 +1116,15 @@ export function useSpriteTabs<Snapshot>({available, enabled, locale, ...props}:
     }) {
     const controller = React.useRef<SpriteTabsController<Snapshot>>(null);
     const [selection, setSelection] = React.useState<{id: string; assets?: AssetSelections}>({id: ''});
+    const defaultAssets = React.useMemo<AssetSelections>(() => {
+        const forKind = (kind: AssetKind): SpriteAssetSelection => ({
+            restore: () => undefined,
+            remember() {},
+            renderPanel: (render, previewSelector, panel) =>
+                React.createElement(NativeAssetPanel, {render, previewSelector, panel, kind, locale})
+        });
+        return {costumes: forKind('costumes'), sounds: forKind('sounds')};
+    }, [locale]);
     const [ready, setReady] = React.useState(false);
     const [slots] = React.useState(() => available ? Array.from({length: 3}, () => {
         const slot = document.createElement('div');
@@ -1132,7 +1141,7 @@ export function useSpriteTabs<Snapshot>({available, enabled, locale, ...props}:
     const select = (id: string) => controller.current?.select(id);
     return {
         controller,
-        assetSelections: enabled ? selection.assets : undefined,
+        assetSelections: (enabled ? selection.assets : undefined) ?? defaultAssets,
         context: enabled ? {
             selectedId: selection.id, openLabel: japanese ? '開く' : 'Open', select, open: select,
             rename: props.multiView && props.getProperties ? (id: string) => controller.current?.rename(id) : undefined

package/src/standard-layout.ts

@@ -280,7 +280,7 @@ export function createStandardLayout(React, {styles, targetStyles, context, Layo
         const [expanded, setExpanded] = useState(false);
         const tools = useContext(targetTools);
         return plusLayout ? element('div', {className: styles.spriteProperties},
-            inEditor ? element('span', null, isJapanese(locale) ? 'スプライト' : 'Sprite') :
+            inEditor ? element('span', {className: styles.spritePropertiesTitle}, isJapanese(locale) ? 'スプライト' : 'Sprite') :
                 element('button', {
                     type: 'button', className: styles.spritePropertiesToggle, 'aria-expanded': expanded,
                     onClick: () => setExpanded(open => !open)

package/src/targets.ts

@@ -1,3 +1,5 @@
+import {observeTileNameTitles} from './native-tile-title.ts';
+
 const tileHeight = 80;
 const minTileWidth = 72;
 const gap = 6;
@@ -28,6 +30,8 @@ export function createTargetList(React, styles) {
             return () => observer.disconnect();
         }, [compact]);
 
+        useLayoutEffect(() => observeTileNameTitles(grid.current), []);
+
         useLayoutEffect(() => {
             const name = query.trim().toLocaleLowerCase();
             if (!name) return;