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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-layout",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Resizable panes and layout for TurboWarp Plus Editor",
   "type": "module",
   "license": "GPL-3.0-or-later",
@@ -29,6 +29,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

@@ -603,11 +603,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 +669,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} />;
+}

package/src/sprite-editor-toolbar.css

@@ -0,0 +1,108 @@
+.tw-plus-sprite-toolbar {
+    --tw-plus-toolbar-height: 28px;
+    --tw-plus-toolbar-radius: 999px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+    padding: 6px;
+    color: var(--text-primary, #2c3650);
+    background: var(--dv-activegroup-visiblepanel-tab-background-color, var(--ui-white, #fff));
+    border-block-end: 1px solid var(--ui-black-transparent, #d5dbe3);
+}
+
+.tw-plus-sprite-toolbar[data-active-group="false"] {
+    background: var(--dv-inactivegroup-visiblepanel-tab-background-color, var(--ui-tertiary, #e8ecf5));
+}
+
+.tw-plus-sprite-toolbar-sections {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    min-width: 0;
+}
+
+.tw-plus-sprite-toolbar-sections button,
+.tw-plus-sprite-search input {
+    box-sizing: border-box;
+    min-height: var(--tw-plus-toolbar-height);
+    border: 1px solid var(--ui-black-transparent, #c6cfda);
+    border-radius: var(--tw-plus-toolbar-radius);
+    color: inherit;
+    font: inherit;
+}
+
+.tw-plus-sprite-toolbar-sections button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 8px;
+    background: var(--ui-secondary, #edf0f7);
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.tw-plus-sprite-toolbar-sections button:hover { background: var(--ui-tertiary, #dce4f1); }
+.tw-plus-sprite-toolbar-sections button[aria-selected="true"] {
+    border-color: var(--looks-secondary-dark, #6747a8);
+    background: var(--looks-secondary-dark, #6747a8);
+    color: #fff;
+}
+
+.tw-plus-sprite-toolbar-sections button:focus-visible,
+.tw-plus-sprite-search input:focus-visible {
+    outline: 2px solid var(--looks-secondary, #855cd6);
+    outline-offset: 1px;
+}
+
+.tw-plus-sprite-toolbar svg { width: 16px; height: 16px; flex: none; }
+
+.tw-plus-sprite-search {
+    position: relative;
+    flex: 0 1 132px;
+    min-width: 0;
+    margin-inline-start: auto;
+}
+
+.tw-plus-sprite-search-field { position: relative; }
+.tw-plus-sprite-search-field svg {
+    position: absolute;
+    inset-inline-start: 8px;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.tw-plus-sprite-search input {
+    display: block;
+    width: 100%;
+    padding-inline: 28px 8px;
+    background: var(--input-background, var(--ui-white, #fff));
+    color-scheme: var(--color-scheme, light);
+    font-size: 12px;
+}
+
+.tw-plus-sprite-search input::placeholder { color: inherit; opacity: 0.75; }
+
+.tw-plus-sprite-search ul {
+    position: absolute;
+    z-index: 5;
+    inset-inline-end: 0;
+    inset-block-start: 100%;
+    width: max(100%, 12rem);
+    max-width: calc(100cqw - 12px);
+    max-height: min(250px, 40vh);
+    margin: 4px 0 0;
+    padding: 4px;
+    overflow: auto;
+    border: 1px solid var(--ui-black-transparent, #c6cfda);
+    border-radius: 6px;
+    background: var(--popover-background, var(--ui-white, #fff));
+    box-shadow: 0 4px 12px #0003;
+    list-style: none;
+}
+
+.tw-plus-sprite-search li { padding: 4px 6px; overflow-wrap: anywhere; cursor: pointer; }
+.tw-plus-sprite-search li:hover,
+.tw-plus-sprite-search li[aria-selected="true"] { background: var(--looks-light-transparent, #e6dff3); }

package/src/sprite-editor-toolbar.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+
+export const spriteEditorSections = ['code', 'costumes', 'sounds', 'variables'] as const;
+export type SpriteEditorSection = typeof spriteEditorSections[number];
+
+export interface SpriteSearchResult {
+    id: string;
+    label: string;
+}
+
+export interface SpriteEditorSearch {
+    find(query: string, section: SpriteEditorSection): readonly SpriteSearchResult[];
+    select(result: SpriteSearchResult, section: SpriteEditorSection): void;
+    onFocus?(): void;
+}
+
+interface SpriteEditorToolbarProps {
+    viewId: string;
+    locale: string;
+    section: SpriteEditorSection;
+    onSectionChange(section: SpriteEditorSection): void;
+    isStage?: boolean;
+    activeGroup?: boolean;
+    search?: SpriteEditorSearch;
+    availableSections?: readonly SpriteEditorSection[];
+    actions?: React.ReactNode;
+}
+
+const glyphs: Record<SpriteEditorSection | 'search', string> = {
+    code: 'm5.5 4-4 4 4 4m5-8 4 4-4 4',
+    costumes: 'm6 9 5.5-6.5a1.4 1.4 0 0 1 2 2L7.5 11m-2-2a2.5 2.5 0 0 0-3 2.5L2 14c2.7 0 5-1 5-3a2 2 0 0 0-1.5-2Z',
+    sounds: 'M2 6h3l4-3v10l-4-3H2Zm9.5 0a3 3 0 0 1 0 4m2-6a5.5 5.5 0 0 1 0 8',
+    variables: 'M5 2H3v12h2m6-12h2v12h-2M6 6l4 4m0-4-4 4',
+    search: 'M10 10l3 3M11 7a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z'
+};
+
+function Icon({kind}: {kind: keyof typeof glyphs}) {
+    return <svg aria-hidden="true" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"
+        strokeLinecap="round" strokeLinejoin="round"><path d={glyphs[kind]} /></svg>;
+}
+
+function SearchBox({viewId, section, japanese, search}: {
+    viewId: string; section: SpriteEditorSection; japanese: boolean; search: SpriteEditorSearch;
+}) {
+    const [query, setQuery] = React.useState('');
+    const [open, setOpen] = React.useState(false);
+    const [index, setIndex] = React.useState(-1);
+    const [focused, setFocused] = React.useState(false);
+    const results = open && focused && query.trim() ? search.find(query.trim(), section) : [];
+    const listId = viewId + '-search-results';
+    const selected = results[index];
+    const expanded = results.length > 0;
+    const optionId = (position: number) => listId + '-' + position;
+
+    function choose(result: SpriteSearchResult) {
+        setOpen(false);
+        setIndex(-1);
+        search.select(result, section);
+    }
+
+    return <div className="tw-plus-sprite-search">
+        <div className="tw-plus-sprite-search-field">
+            <Icon kind="search" />
+            <input type="search" role="combobox" autoComplete="off" aria-autocomplete="list"
+                aria-label={japanese ? 'スプライト内を検索' : 'Search within this sprite'}
+                aria-controls={expanded ? listId : undefined} aria-expanded={expanded}
+                aria-activedescendant={selected ? optionId(index) : undefined}
+                placeholder={japanese ? '検索' : 'Search'} value={query}
+                onFocus={() => {setFocused(true); setOpen(true); search.onFocus?.();}}
+                onBlur={() => {setFocused(false); setIndex(-1);}}
+                onChange={event => {setQuery(event.currentTarget.value); setOpen(true); setIndex(-1);}}
+                onKeyDown={event => {
+                    if (event.key === 'Escape' && expanded) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setOpen(false);
+                        setIndex(-1);
+                    } else if (expanded && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+                        event.preventDefault();
+                        const offset = event.key === 'ArrowDown' ? 1 : -1;
+                        setIndex(selected ? (index + offset + results.length) % results.length :
+                            offset === 1 ? 0 : results.length - 1);
+                    } else if (event.key === 'Enter' && selected) {
+                        event.preventDefault();
+                        choose(selected);
+                    }
+                }} />
+        </div>
+        {expanded && <ul role="listbox" id={listId} aria-label={japanese ? '検索結果' : 'Search results'}>
+            {results.map((result, position) => <li key={result.id} id={optionId(position)} role="option"
+                aria-selected={position === index} onPointerDown={event => event.preventDefault()}
+                onClick={() => choose(result)}>{result.label}</li>)}
+        </ul>}
+    </div>;
+}
+
+export function SpriteEditorToolbar({viewId, locale, section, onSectionChange, isStage, activeGroup, search,
+    availableSections = spriteEditorSections, 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'};
+    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'}>
+            {availableSections.map((id, index) => <button key={id} type="button" role="tab"
+                id={viewId + '-section-' + id} aria-selected={section === id} tabIndex={section === id ? 0 : -1}
+                aria-controls={viewId + '-content'} onClick={() => onSectionChange(id)} onKeyDown={event => {
+                    const direction = event.currentTarget.ownerDocument.dir === 'rtl' ? -1 : 1;
+                    const next = {ArrowLeft: index - direction, ArrowRight: index + direction,
+                        Home: 0, End: availableSections.length - 1}[event.key];
+                    if (next === undefined) return;
+                    event.preventDefault();
+                    const position = (next + availableSections.length) % availableSections.length;
+                    onSectionChange(availableSections[position]);
+                    event.currentTarget.parentElement.querySelectorAll<HTMLButtonElement>('button')[position]?.focus();
+                }}>
+                <Icon kind={id} />
+                {labels[id]}
+            </button>)}
+        </div>
+        {search && <SearchBox {...{viewId, section, japanese, search}} />}
+        {actions}
+    </div>;
+}