@kubohiroya/turbowarp-plus-editor-layout 0.1.16 → 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-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/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.16",
+  "version": "0.1.17",
   "description": "Resizable panes and layout for TurboWarp Plus Editor",
   "type": "module",
   "license": "GPL-3.0-or-later",

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-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/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;