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

package/dist/stage-surface.d.ts

@@ -0,0 +1,31 @@
+import type { Context, ElementType } from 'react';
+interface StageWindowConnection<Target> {
+    ready: Promise<Target>;
+    disconnected: AbortSignal;
+    close(): void;
+}
+interface StageWindowHost<Request, Target> {
+    open(request: Request): StageWindowConnection<Target> | null;
+}
+export declare function createStagePopoutHost<Request, Target extends {
+    mount: HTMLElement;
+}>(host: StageWindowHost<Request, Target>, title: string): StageWindowHost<Request, Target>;
+export declare function stageDockActionLabel(locale: string, { drawer, detached, external }: {
+    drawer?: boolean;
+    detached: boolean;
+    external?: boolean;
+}): "ドックに戻す" | "Dock stage" | "別窓で開く" | "別ウィンドウで開く" | "Open in a separate window" | "アンドック" | "Undock stage";
+export declare function createStageSurface(React: typeof import('react'), { context, EdgeDrawer, Panel }: {
+    context: Context<{
+        locale: string;
+        stageDrawer?: boolean;
+        setStageDrawerOpen?: (open: boolean) => void;
+    }>;
+    EdgeDrawer: ElementType;
+    Panel: ElementType;
+}): ({ externalHost, onDockActionChange, ...props }: {
+    [x: string]: any;
+    externalHost: any;
+    onDockActionChange: any;
+}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export {};

package/dist/stage-surface.js

@@ -0,0 +1,81 @@
+import { createDockview, themeLight } from 'dockview';
+export function createStagePopoutHost(host, title) {
+    return {
+        open(request) {
+            const connection = host.open(request);
+            if (!connection)
+                return null;
+            const disconnected = new AbortController();
+            const disconnect = () => disconnected.abort();
+            connection.disconnected.addEventListener('abort', disconnect, { once: true });
+            if (connection.disconnected.aborted)
+                disconnect();
+            let dockview;
+            let removed;
+            let closed = false;
+            const ready = connection.ready.then(target => {
+                if (closed || disconnected.signal.aborted)
+                    throw new Error('Stage window closed');
+                const content = target.mount.ownerDocument.createElement('div');
+                Object.assign(content.style, { width: '100%', height: '100%' });
+                dockview = createDockview(target.mount, {
+                    createComponent: () => ({ element: content, init() { } }),
+                    theme: themeLight,
+                    disableDnd: true,
+                    disableFloatingGroups: true
+                });
+                dockview.addPanel({ id: 'stage', component: 'stage', title });
+                removed = dockview.onDidRemovePanel(disconnect);
+                return { ...target, mount: content };
+            });
+            return {
+                ready,
+                disconnected: disconnected.signal,
+                close() {
+                    if (closed)
+                        return;
+                    closed = true;
+                    connection.disconnected.removeEventListener('abort', disconnect);
+                    try {
+                        removed?.dispose();
+                        dockview?.dispose();
+                    }
+                    finally {
+                        connection.close();
+                    }
+                }
+            };
+        }
+    };
+}
+const isJapanese = (locale) => /^ja(?:-|$)/i.test(locale);
+export function stageDockActionLabel(locale, { drawer, detached, external }) {
+    const japanese = isJapanese(locale);
+    if (detached)
+        return japanese ? 'ドックに戻す' : 'Dock stage';
+    if (external)
+        return japanese ? (drawer ? '別窓で開く' : '別ウィンドウで開く') : 'Open in a separate window';
+    return japanese ? 'アンドック' : 'Undock stage';
+}
+export function createStageSurface(React, { context, EdgeDrawer, Panel }) {
+    return function StageSurface({ externalHost, onDockActionChange, ...props }) {
+        const { locale, stageDrawer, setStageDrawerOpen } = React.useContext(context);
+        const japanese = isJapanese(locale);
+        const title = japanese ? 'ステージ' : 'Stage';
+        const host = React.useMemo(() => stageDrawer && externalHost ?
+            createStagePopoutHost(externalHost, title) : externalHost, [stageDrawer, externalHost, title]);
+        const panel = React.createElement(Panel, {
+            ...props,
+            id: 'stage',
+            title,
+            externalHost: host,
+            externalOnly: stageDrawer,
+            onDockActionChange: stageDrawer && !host ? undefined : onDockActionChange
+        });
+        return stageDrawer ? React.createElement(EdgeDrawer, {
+            edge: 'right',
+            label: japanese ? 'ステージを展開' : 'Reveal stage',
+            onOpenChange: setStageDrawerOpen
+        }, panel) : panel;
+    };
+}

package/dist/standard-layout.d.ts

@@ -4,12 +4,13 @@ export declare function createStandardLayout(React: any, { styles, targetStyles,
     context: any;
     LayoutMenu: any;
 }): {
-    StandardLayout: ({ enabled, splitter, windowLayout, stageActionEnabled, onPaletteModeChange, windowTools, Container, render, ...props }: {
+    StandardLayout: ({ enabled, splitter, windowLayout, stageActionEnabled, stageDrawer, onPaletteModeChange, windowTools, Container, render, ...props }: {
         [x: string]: any;
         enabled: any;
         splitter: any;
         windowLayout: any;
         stageActionEnabled: any;
+        stageDrawer?: boolean;
         onPaletteModeChange: any;
         windowTools: any;
         Container: any;

package/dist/standard-layout.js

@@ -10,10 +10,11 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
     const targets = createTargetList(React, targetStyles);
     const targetSearch = React.createContext('');
     const targetTools = React.createContext(null);
-    function StandardLayout({ enabled, splitter, windowLayout, stageActionEnabled, onPaletteModeChange, windowTools, Container, render, ...props }) {
+    function StandardLayout({ enabled, splitter, windowLayout, stageActionEnabled, stageDrawer = false, onPaletteModeChange, windowTools, Container, render, ...props }) {
         const [showUndock, setShowUndock] = useState(false);
         const [targetsPinned, setTargetsPinned] = useState(false);
         const [showStage, setShowStage] = useState(true);
+        const [stageDrawerOpen, setStageDrawerOpen] = useState(false);
         const [size, setSize] = useState(null);
         const [targetRatio, setTargetRatio] = useState(null);
         const [preferredStageWidth, setPreferredStageWidth] = useState(null);
@@ -83,10 +84,11 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
             if (!plusLayout)
                 return shared;
             const stageOverlap = `${stageWidth + 20}px`;
+            const stageOverlaps = showStage && (!stageDrawer || stageDrawerOpen);
             const bodyStyle = {
                 display: 'grid',
-                '--plus-stage-overlap': showStage ? stageOverlap : '0px',
-                '--plus-stage-tab-inset': showStage ? stageOverlap : '3rem'
+                '--plus-stage-overlap': stageOverlaps ? stageOverlap : '0px',
+                '--plus-stage-tab-inset': stageOverlaps ? stageOverlap : '3rem'
             };
             if (resizable) {
                 bodyStyle['--plus-target-width'] = `${targetSplit.first}px`;
@@ -106,7 +108,7 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
                 columnSplitter,
                 editorStyle: { gridArea: 'editor', minWidth: 0, minHeight: 0 },
                 stageColumnStyle: { display: 'contents' },
-                stageClassName: `${styles.stagePanel} ${styles.floatingStage}${stageHidden ? ` ${styles.stageHidden}` : ''}`,
+                stageClassName: `${styles.stagePanel} ${styles.floatingStage}${stageDrawer ? ` ${styles.stageDrawer}` : ''}${stageHidden ? ` ${styles.stageHidden}` : ''}`,
                 targetClassName: targetsPinned ? styles.standardTargets :
                     `${styles.standardTargets} ${styles.retractedTargets}`,
                 stageDisplayWidth: stageWidth,
@@ -130,7 +132,8 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
             render: slots => render(applyStandardLayout(slots), showUndock)
         });
         return element(context.Provider, { value: {
-                showUndock, plusLayout, targetsPinned, setTargetsPinned, stageHidden, setStageVisible: setShowStage, stageResize, stageActionMount, locale: props.locale
+                showUndock, plusLayout, targetsPinned, setTargetsPinned, stageHidden, setStageVisible: setShowStage, stageResize, stageActionMount,
+                stageDrawer: plusLayout && stageDrawer, setStageDrawerOpen, locale: props.locale
             } }, Container ? element(Container, { locale: props.locale }, layout) : layout);
     }
     function EdgeDrawer({ edge, label, pinned = false, onOpenChange, children }) {
@@ -180,7 +183,7 @@ export function createStandardLayout(React, { styles, targetStyles, context, Lay
                         panel.current.focus({ preventScroll: true });
                 });
             }
-        }, edge === 'left' ? '›' : '⌃'), element('div', { className: styles.edgePanel, ref: panel, tabIndex: -1, hidden: !open }, children));
+        }, { left: '›', right: '‹', bottom: '⌃' }[edge]), element('div', { className: styles.edgePanel, ref: panel, tabIndex: -1, hidden: !open }, children));
     }
     function TargetLayout({ compact, render }) {
         const { plusLayout, targetsPinned, locale } = useContext(context);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-layout",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Resizable panes and layout for TurboWarp Plus Editor",
   "type": "module",
   "license": "GPL-3.0-or-later",
@@ -13,6 +13,10 @@
       "types": "./dist/standard-layout.d.ts",
       "default": "./dist/standard-layout.js"
     },
+    "./stage-surface": {
+      "types": "./dist/stage-surface.d.ts",
+      "default": "./dist/stage-surface.js"
+    },
     "./editor.css": "./src/editor.css",
     "./targets.css": "./src/targets.css",
     "./sprite-properties": {
@@ -29,6 +33,17 @@
       "types": "./dist/sprite-tabs.d.ts",
       "default": "./dist/sprite-tabs.js"
     },
+    "./sprite-asset-pane": {
+      "types": "./dist/sprite-asset-pane.d.ts",
+      "default": "./dist/sprite-asset-pane.js"
+    },
+    "./sprite-asset-pane.css": "./src/sprite-asset-pane.css",
+    "./sprite-editor-toolbar": {
+      "types": "./dist/sprite-editor-toolbar.d.ts",
+      "default": "./dist/sprite-editor-toolbar.js"
+    },
+    "./sprite-editor-toolbar.css": "./src/sprite-editor-toolbar.css",
+    "./sprite-layout-menu.css": "./src/sprite-layout-menu.css",
     "./dockview-styles": "./dist/dockview-styles.js",
     "./extension-file-menu": {
       "types": "./dist/extension-file-menu.d.ts",

package/src/editor.css

@@ -327,6 +327,10 @@
     z-index: 90;
 }
 
+.standard-body .stage-drawer {
+    right: 0;
+}
+
 .standard-body {
     --plus-extension-button-width: 2.75rem;
     --plus-extension-button-gap: 0.75rem;
@@ -470,6 +474,25 @@ details.layout-menu button {
     pointer-events: none;
 }
 
+.edge-drawer[data-edge="right"] {
+    flex-direction: row-reverse;
+    pointer-events: none;
+}
+
+[dir="rtl"] .edge-drawer[data-edge="right"] {
+    flex-direction: row;
+}
+
+.edge-drawer[data-edge="right"] .edge-trigger {
+    width: 0.625rem;
+    min-height: 3rem;
+    visibility: visible;
+}
+
+.edge-drawer[data-edge="right"] .edge-panel {
+    background: transparent;
+}
+
 .edge-drawer[data-edge="bottom"] {
     z-index: var(--plus-docked-utility-layer);
     flex: none;
@@ -603,11 +626,31 @@ details.layout-menu button {
     flex: 1 1 0;
     min-width: 0;
     min-height: 0;
-    --dv-tabs-and-actions-container-background-color: var(--ui-primary);
-    --dv-activegroup-visiblepanel-tab-background-color: var(--ui-white);
-    --dv-activegroup-visiblepanel-tab-color: var(--text-primary);
-    --dv-activegroup-hiddenpanel-tab-background-color: var(--ui-secondary);
-    --dv-activegroup-hiddenpanel-tab-color: var(--text-primary);
+}
+
+.sprite-tabs :global(.dockview-theme-light) {
+    color-scheme: var(--color-scheme, light);
+    --dv-group-view-background-color: var(--ui-primary, #fff);
+    --dv-tabs-and-actions-container-background-color: var(--ui-primary, #f3f3f3);
+    --dv-activegroup-visiblepanel-tab-background-color: var(--ui-white, #fff);
+    --dv-activegroup-visiblepanel-tab-color: var(--text-primary, #333);
+    --dv-activegroup-hiddenpanel-tab-background-color: var(--ui-secondary, #ececec);
+    --dv-activegroup-hiddenpanel-tab-color: var(--text-primary, #333);
+    --dv-inactivegroup-visiblepanel-tab-background-color: var(--ui-tertiary, #eee);
+    --dv-inactivegroup-visiblepanel-tab-color: var(--text-primary, #333);
+    --dv-inactivegroup-hiddenpanel-tab-background-color: var(--ui-secondary, #ececec);
+    --dv-inactivegroup-hiddenpanel-tab-color: var(--text-primary, #333);
+    --dv-sash-color: var(--ui-black-transparent, #0002);
+    --dv-active-sash-color: var(--looks-secondary, #855cd6);
+}
+
+.standard-body:has(.sprite-tabs[data-multi-view]) .floating-stage {
+    top: 5.5rem;
+    height: fit-content;
+}
+
+.standard-body:has(.sprite-tabs[data-multi-view]):has(.retracted-targets) {
+    padding-left: 0.625rem;
 }
 
 .sprite-tabs > div,
@@ -649,6 +692,55 @@ details.layout-menu button {
     min-height: 0;
 }
 
+.sprite-tabs :global(.tw-plus-sprite-tab-slot--split) {
+    display: flex;
+    flex-direction: column;
+}
+
+.sprite-tabs :global(.tw-plus-sprite-tab-body) {
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+}
+
+.sprite-tabs :global(.tw-plus-sprite-tab-asset-preview) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.sprite-tabs :global(.tw-plus-sprite-tab-editor[hidden]),
+.sprite-tabs :global(.tw-plus-sprite-tab-asset-preview[hidden]) { display: none; }
+
+.sprite-tabs :global([data-layout-asset-detail]) {
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: auto;
+}
+
+.sprite-tabs :global([data-layout-asset-panel]) {
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+    flex-basis: 0;
+    overflow: hidden;
+}
+
+.sprite-tabs :global([data-layout-asset-list]) {
+    flex: 0 0 auto;
+    max-inline-size: 45%;
+    min-block-size: 0;
+}
+
+.sprite-tabs :global(.tw-plus-sprite-tab-slot:focus-within) .open-window-action {
+    opacity: 1;
+    pointer-events: auto;
+}
+
 /* The native tab panel shells remain mounted for the host's tab selection. */
 :global([class*="gui_tabs_"]):has(> .sprite-tabs) > :global([role="tabpanel"]) {
     display: none;

package/src/sprite-asset-pane.css

@@ -0,0 +1,169 @@
+.tw-sprite-media,
+.tw-sprite-variables {
+    box-sizing: border-box;
+    block-size: 100%;
+    min-block-size: 0;
+    min-inline-size: 0;
+    color: var(--text-primary, #273146);
+    background: var(--ui-white, #fff);
+}
+
+.tw-sprite-media {
+    display: grid;
+    grid-template-columns: minmax(3.25rem, 24%) minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+}
+
+.tw-sprite-media__list {
+    margin: 0;
+    padding: .35rem;
+    overflow: auto;
+    list-style: none;
+    border-inline-end: 1px solid var(--ui-black-transparent, #ccd5e2);
+    background: var(--ui-secondary, #edf3fc);
+}
+
+.tw-sprite-media__list li + li {
+    margin-block-start: .35rem;
+}
+
+.tw-sprite-media__item {
+    box-sizing: border-box;
+    display: grid;
+    inline-size: 100%;
+    justify-items: center;
+    gap: .25rem;
+    padding: .35rem;
+    border: 1px solid var(--ui-black-transparent, #ccd5e2);
+    border-radius: .375rem;
+    color: inherit;
+    background: var(--ui-white, #fff);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+}
+
+.tw-sprite-media__item[aria-disabled] {
+    cursor: default;
+}
+
+.tw-sprite-media__item[aria-current] {
+    border-color: var(--looks-secondary, #7759cf);
+    box-shadow: inset 0 0 0 1px var(--looks-secondary, #7759cf);
+}
+
+.tw-sprite-media__thumbnail {
+    inline-size: 100%;
+    block-size: 2rem;
+    object-fit: contain;
+}
+
+.tw-sprite-media__symbol {
+    display: grid;
+    place-items: center;
+    block-size: 2rem;
+    font-size: 1.35rem;
+    color: var(--looks-secondary, #7759cf);
+}
+
+.tw-sprite-media__name {
+    max-inline-size: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.tw-sprite-media__detail {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+    padding: .6rem;
+    overflow: auto;
+}
+
+.tw-sprite-media__detail > p,
+.tw-sprite-media__title {
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+
+.tw-sprite-media__title {
+    font-size: 1em;
+}
+
+.tw-sprite-media__surface {
+    display: grid;
+    flex: 1;
+    min-block-size: 3rem;
+    min-inline-size: 0;
+    place-items: center;
+    overflow: hidden;
+    border: 1px solid var(--ui-black-transparent, #ccd5e2);
+    border-radius: .375rem;
+    background: var(--ui-secondary, #edf3fc);
+}
+
+.tw-sprite-media__preview,
+.tw-sprite-media__waveform {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    min-block-size: 0;
+    object-fit: contain;
+}
+
+.tw-sprite-media__axis,
+.tw-sprite-media__peaks {
+    fill: none;
+    stroke: var(--looks-secondary, #7759cf);
+    stroke-width: 1;
+}
+
+.tw-sprite-media__axis {
+    opacity: .4;
+}
+
+.tw-sprite-media__duration {
+    text-align: end;
+}
+
+.tw-sprite-variables {
+    padding: .6rem;
+    overflow: auto;
+}
+
+.tw-sprite-variables__table {
+    inline-size: 100%;
+    table-layout: fixed;
+    border-collapse: collapse;
+    text-align: start;
+}
+
+.tw-sprite-variables__table th,
+.tw-sprite-variables__table td {
+    padding: .35rem;
+    border-block-end: 1px solid var(--ui-black-transparent, #ccd5e2);
+    overflow-wrap: anywhere;
+}
+
+.tw-sprite-variables__scope {
+    display: block;
+    font-size: .8em;
+    font-weight: normal;
+}
+
+.tw-sprite-variables__input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding: .35rem .5rem;
+    border: 1px solid var(--ui-black-transparent, #ccd5e2);
+    border-radius: .25rem;
+    color: inherit;
+    background: var(--input-background, #fff);
+    font: inherit;
+}
+
+.tw-sprite-media--detail {
+    inline-size: 100%;
+    grid-template-columns: minmax(0, 1fr);
+}

package/src/sprite-asset-pane.tsx

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