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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubohiroya/turbowarp-plus-editor-layout",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "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/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/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)