@kubohiroya/turbowarp-extension-data-editor 0.2.1 → 0.2.2

package/README.md

@@ -103,10 +103,10 @@ pnpm test
 `pnpm test` は型宣言を含むビルド後、コアと標準フォームのテストを実行します。
 パッケージは ESM です。ブラウザには ES2022 の組み込み API が必要です。
 標準フォームの React / ReactDOM peer は 16.14 / 17 / 18。GUI は既存の 16.14 を共有します。
-初回の実験版は `@kubohiroya/turbowarp-extension-data-editor@0.1.0` です。固定SchemaのSource/Form編集は `0.2.0` で追加しました。今回の配布版 `0.2.1` は、既定OFFの固定入力契約・標準field transaction・固定フォームとGUI接続も含みます。
+初回の実験版は `@kubohiroya/turbowarp-extension-data-editor@0.1.0` です。固定SchemaのSource/Form編集は `0.2.0`、既定OFFの固定入力契約・標準field transaction・固定フォームとGUI接続は `0.2.1` で追加しました。配布版 `0.2.2` は、編集見出しのブロック名・アイコン、項目の削除メニュー・追加ボタン、key-valueの2行表示を含みます。
 
 ```sh
-npm install --save-exact @kubohiroya/turbowarp-extension-data-editor@0.2.1
+npm install --save-exact @kubohiroya/turbowarp-extension-data-editor@0.2.2
 ```
 
 配布物・改名時の互換性・公開手順は[パッケージ配布](docs/package-distribution.md)を参照してください。

package/dist/build-info.json

@@ -1,10 +1,10 @@
 {
   "name": "@kubohiroya/turbowarp-extension-data-editor",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "repository": "https://github.com/kubohiroya/turbowarp-extension-data-editor",
-  "revision": "485f0e550e622235624b5e9176820161aeeba252",
-  "sourceState": "working-tree",
-  "sourceSha256": "175674eaaffce60dd9ebcf4c31f0f02a3bbd9dc6b8659ab3101ea6d8bceeea2f",
+  "revision": "7ba760f829a37e2cce39b81668f8c44ea615991e",
+  "sourceState": "commit",
+  "sourceSha256": "e53c39a3499c78df960a7d38514ed8adbad9258c65655b8a01f6fe553e2d7191",
   "capabilities": {
     "preparedSource": 1
   }

package/dist/react.css

@@ -8,6 +8,31 @@
     width: min(900px, calc(100vw - 32px));
 }
 
+.modal-content .header {
+    height: auto;
+    min-height: 3.5rem;
+    align-items: center;
+}
+
+.modal-content .header > div:first-child {
+    flex: 1 1 0;
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+    text-align: center;
+}
+
+.modal-content .header > div:last-child {
+    flex: 0 0 auto;
+}
+
+.modal-content .header img {
+    flex-shrink: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    object-fit: contain;
+}
+
 .tree {
     min-width: 0;
 }
@@ -152,6 +177,107 @@
     margin-bottom: 1rem;
 }
 
+.body :global([data-block-editor-item]) {
+    box-sizing: border-box;
+    min-width: 0;
+    margin: 0.75rem 0;
+    padding: 1rem;
+    border: 1px solid var(--block-editor-border, rgba(0, 0, 0, 0.15));
+    border-radius: var(--block-editor-radius, 0.5rem);
+}
+
+.body :global([data-block-editor-item-heading]),
+.body :global([data-block-editor-item-actions]) {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.body :global([data-block-editor-item-heading]) {
+    justify-content: space-between;
+    margin-bottom: 0.75rem;
+    font-weight: bold;
+}
+
+.body :global([data-block-editor-item]) input,
+.body :global([data-block-editor-item]) select,
+.body :global([data-block-editor-item]) textarea {
+    box-sizing: border-box;
+}
+
+.body :global([data-block-editor-pair-row]) {
+    display: grid;
+    grid-template-columns: 3rem minmax(0, 1fr);
+    align-items: center;
+    gap: 0.5rem 0.75rem;
+    margin-top: 0.5rem;
+}
+
+.body :global([data-block-editor-pair-row]) > label {
+    grid-column: 1;
+    margin: 0;
+}
+
+.body :global([data-block-editor-pair-row]) > :not(label) {
+    grid-column: 2;
+    min-width: 0;
+}
+
+.body :global([data-block-editor-pair-row]) input:not([type="checkbox"]):not([type="radio"]),
+.body :global([data-block-editor-pair-row]) select,
+.body :global([data-block-editor-pair-row]) textarea {
+    margin-top: 0;
+}
+
+.body :global([data-block-editor-item-actions]) button,
+.body :global([data-block-editor-item-menu]) button,
+.body :global([data-block-editor-add-item]) {
+    min-height: 2.25rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--block-editor-border, rgba(0, 0, 0, 0.15));
+    border-radius: var(--block-editor-radius, 0.5rem);
+    color: var(--block-editor-text, #333);
+    background: var(--block-editor-button, white);
+    cursor: pointer;
+    font: inherit;
+}
+
+.body :global([data-block-editor-item-menu]) {
+    position: relative;
+    flex-shrink: 0;
+}
+
+.body :global([data-block-editor-item-menu]) :global([role="menu"]) {
+    position: absolute;
+    inset-inline-end: 0;
+    top: 100%;
+    z-index: 1;
+    min-width: max-content;
+    padding: 0.25rem;
+    background: var(--block-editor-background, white);
+    border: 1px solid var(--block-editor-border, rgba(0, 0, 0, 0.15));
+    border-radius: var(--block-editor-radius, 0.5rem);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+}
+
+.body :global([data-block-editor-item-menu]) :global([role="menuitem"]) {
+    width: 100%;
+    border: 0;
+    text-align: start;
+}
+
+.body :global([data-block-editor-item-actions]) button:disabled,
+.body :global([data-block-editor-add-item]):disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.body :global([data-block-editor-item-menu]) button:focus-visible,
+.body :global([data-block-editor-add-item]):focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+}
+
 /* The adapter marks only controls belonging to the field's own RJSF errors. */
 .body :global(.rjsf) input:global([data-block-editor-invalid="true"]),
 .body :global(.rjsf) select:global([data-block-editor-invalid="true"]),

package/dist/react.d.ts

@@ -10,6 +10,9 @@ export interface DialogSessionState {
     readonly error: unknown;
 }
 export interface DialogSession {
+    readonly reference?: {
+        readonly blockId: string;
+    };
     getState(): DialogSessionState;
     getFixedInputView?(): unknown;
     subscribe(listener: () => void): () => void;
@@ -43,6 +46,8 @@ export interface EditorModalProps {
     readonly id: string;
     readonly className: string;
     readonly contentLabel: string;
+    readonly headerImage?: string;
+    readonly headerClassName?: string | undefined;
     readonly onRequestClose: () => void;
     readonly children?: React.ReactNode;
 }

package/dist/react.js

@@ -203,6 +203,7 @@ export class BlockEditorDialog extends React.Component {
         }
     }
     render() {
+        var _a, _b, _c, _d;
         const { styles, messages, ModalComponent, session } = this.props;
         const saving = this.state.status === 'saving';
         const hierarchy = typeof session.getNodes === 'function';
@@ -211,11 +212,18 @@ export class BlockEditorDialog extends React.Component {
             try {
                 fixed = Boolean(session.getFixedInputView());
             }
-            catch (_a) {
+            catch (_e) {
                 fixed = true;
             }
         }
-        return React.createElement(ModalComponent, { className: `${styles.modalContent || ''} ${hierarchy ? styles.hierarchyModal : ''} ${this.props.className || ''}`, contentLabel: messages.title, id: "blockEditorModal", onRequestClose: this.handleClose },
+        const root = (_a = session.getNodes) === null || _a === void 0 ? void 0 : _a.call(session).find(node => node.inputPath.length === 0);
+        const rootId = ((_b = session.reference) === null || _b === void 0 ? void 0 : _b.blockId) || (root === null || root === void 0 ? void 0 : root.reference.blockId);
+        const appearance = rootId ? (_c = this.props.nodeAppearances) === null || _c === void 0 ? void 0 : _c[rootId] : undefined;
+        const name = (appearance === null || appearance === void 0 ? void 0 : appearance.name) || (rootId ? (_d = this.props.nodeLabels) === null || _d === void 0 ? void 0 : _d[rootId] : undefined) || (root === null || root === void 0 ? void 0 : root.opcode);
+        const title = name ? messages.title.includes('{name}') ? messages.title.replace('{name}', () => name) :
+            /ブロック|block/i.test(messages.title) ? messages.title.replace(/ブロック|block/i, () => name) :
+                `${name}: ${messages.title}` : messages.title;
+        return React.createElement(ModalComponent, { className: `${styles.modalContent || ''} ${hierarchy ? styles.hierarchyModal : ''} ${this.props.className || ''}`, contentLabel: title, ...((appearance === null || appearance === void 0 ? void 0 : appearance.iconURI) ? { headerImage: appearance.iconURI } : {}), headerClassName: styles.header, id: "blockEditorModal", onRequestClose: this.handleClose },
             React.createElement("div", { "aria-busy": saving, className: styles.body, onCompositionStart: () => { this.composing = true; }, onCompositionEnd: () => { this.composing = false; }, onKeyDownCapture: event => {
                     if (this.composing || event.nativeEvent.isComposing || event.keyCode === 229)
                         event.stopPropagation();

package/dist/rjsf-templates.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ArrayFieldTemplateItemType, FieldTemplateProps, IconButtonProps, ObjectFieldTemplateProps, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+/** Keep the property key out of the value's visible label. */
+export declare function valueFieldTemplate(DefaultTemplate: React.ComponentType<FieldTemplateProps>, flag: string): (props: FieldTemplateProps) => React.ReactElement;
+/** Keep RJSF's object layout while numbering each editable additional property. */
+export declare function numberedObjectTemplate(DefaultTemplate: React.ComponentType<ObjectFieldTemplateProps>, flag: string): (props: ObjectFieldTemplateProps) => React.ReactElement;
+export declare function additionalItemTemplate(flag: string): (props: WrapIfAdditionalTemplateProps) => React.ReactElement;
+/** Deletion is available only after explicitly opening the item's menu. */
+export declare function ItemMenu({ disabled, onClick }: Pick<IconButtonProps, 'disabled' | 'onClick'>): React.ReactElement;
+export declare function AddItemButton({ disabled, onClick, className }: IconButtonProps): React.ReactElement;
+export declare function ArrayItem(props: ArrayFieldTemplateItemType): React.ReactElement;

package/dist/rjsf-templates.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+const ItemNumber = React.createContext(1);
+const PropertyKey = React.createContext(undefined);
+/** Keep the property key out of the value's visible label. */
+export function valueFieldTemplate(DefaultTemplate, flag) {
+    return function ValueField(props) {
+        if (!(flag in props.schema))
+            return React.createElement(DefaultTemplate, { ...props });
+        return React.createElement(PropertyKey.Provider, { value: props.label },
+            React.createElement(DefaultTemplate, { ...props, label: "\u5024" }));
+    };
+}
+/** Keep RJSF's object layout while numbering each editable additional property. */
+export function numberedObjectTemplate(DefaultTemplate, flag) {
+    return function ObjectItems(props) {
+        let number = 0;
+        const properties = props.properties.map(property => {
+            var _a;
+            const schema = (_a = props.schema.properties) === null || _a === void 0 ? void 0 : _a[property.name];
+            if (!schema || typeof schema !== 'object' || !(flag in schema) || property.hidden)
+                return property;
+            return { ...property, content: React.createElement(ItemNumber.Provider, { key: property.name, value: ++number }, property.content) };
+        });
+        return React.createElement(DefaultTemplate, { ...props, properties: properties });
+    };
+}
+export function additionalItemTemplate(flag) {
+    return function AdditionalItem(props) {
+        const number = React.useContext(ItemNumber);
+        const propertyKey = React.useContext(PropertyKey);
+        const { id, classNames, style, children, schema, label, disabled, readonly, onKeyChange, onDropPropertyClick } = props;
+        if (!(flag in schema))
+            return React.createElement("div", { className: classNames, style: style }, children);
+        const key = propertyKey !== null && propertyKey !== void 0 ? propertyKey : label;
+        return React.createElement("div", { className: classNames, style: style, "data-block-editor-item": "" },
+            React.createElement("div", { "data-block-editor-item-heading": "" },
+                React.createElement("span", null,
+                    "\u30FB\u9805\u76EE",
+                    number),
+                React.createElement(ItemMenu, { disabled: disabled || readonly, onClick: onDropPropertyClick(key) })),
+            React.createElement("div", { "data-block-editor-pair-row": "" },
+                React.createElement("label", { htmlFor: `${id}-key` }, "\u30AD\u30FC"),
+                React.createElement("input", { id: `${id}-key`, type: "text", defaultValue: key, disabled: disabled, readOnly: readonly, onBlur: event => onKeyChange(event.target.value) })),
+            React.createElement("div", { "data-block-editor-pair-row": "" }, children));
+    };
+}
+/** Deletion is available only after explicitly opening the item's menu. */
+export function ItemMenu({ disabled, onClick }) {
+    const [open, setOpen] = React.useState(false);
+    const container = React.useRef(null);
+    const trigger = React.useRef(null);
+    const item = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        if (!open)
+            return;
+        (_a = item.current) === null || _a === void 0 ? void 0 : _a.focus();
+        const closeOutside = (event) => {
+            var _a;
+            if (!((_a = container.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)))
+                setOpen(false);
+        };
+        // RJSF and its host modal have separate React roots. Stop Escape before either root delegates it.
+        const keepEscapeInMenu = (event) => {
+            var _a;
+            if (event.key !== 'Escape' || event.isComposing || event.keyCode === 229)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+            (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        const menu = container.current;
+        menu === null || menu === void 0 ? void 0 : menu.addEventListener('keydown', keepEscapeInMenu);
+        document.addEventListener('mousedown', closeOutside);
+        return () => {
+            menu === null || menu === void 0 ? void 0 : menu.removeEventListener('keydown', keepEscapeInMenu);
+            document.removeEventListener('mousedown', closeOutside);
+        };
+    }, [open]);
+    React.useEffect(() => { if (disabled)
+        setOpen(false); }, [disabled]);
+    return React.createElement("div", { "data-block-editor-item-menu": "", ref: container, onBlur: event => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setOpen(false);
+        }, onKeyDown: event => {
+            var _a, _b;
+            if (event.key === 'Escape' && open && !event.nativeEvent.isComposing && event.keyCode !== 229) {
+                event.preventDefault();
+                event.stopPropagation();
+                setOpen(false);
+                (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                event.preventDefault();
+                if (open)
+                    (_b = item.current) === null || _b === void 0 ? void 0 : _b.focus();
+                else if (!disabled)
+                    setOpen(true);
+            }
+        } },
+        React.createElement("button", { "aria-label": "\u9805\u76EE\u306E\u30E1\u30CB\u30E5\u30FC", "aria-haspopup": "menu", "aria-expanded": open && !disabled, disabled: disabled, ref: trigger, type: "button", onClick: () => setOpen(!open) }, "\u2026"),
+        open && !disabled ? React.createElement("div", { role: "menu", "aria-label": "\u9805\u76EE\u306E\u64CD\u4F5C" },
+            React.createElement("button", { ref: item, role: "menuitem", type: "button", onClick: event => {
+                    var _a;
+                    setOpen(false);
+                    (_a = trigger.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+                } }, "\uD83D\uDDD1\uFE0F\u3053\u306E\u9805\u76EE\u3092\u524A\u9664")) : null);
+}
+export function AddItemButton({ disabled, onClick, className }) {
+    return React.createElement("button", { className: className, "data-block-editor-add-item": "", disabled: disabled, type: "button", onClick: onClick }, "\u2795\u9805\u76EE\u3092\u8FFD\u52A0");
+}
+export function ArrayItem(props) {
+    const { children, className, disabled, readonly, index, hasMoveUp, hasMoveDown, hasCopy, hasRemove, onReorderClick, onCopyIndexClick, onDropIndexClick } = props;
+    const locked = disabled || readonly;
+    return React.createElement("div", { className: className, "data-block-editor-item": "" },
+        React.createElement("div", { "data-block-editor-item-heading": "" },
+            React.createElement("span", null,
+                "\u30FB\u9805\u76EE",
+                index + 1),
+            React.createElement("div", { "data-block-editor-item-actions": "" },
+                hasMoveUp || hasMoveDown ? React.createElement(React.Fragment, null,
+                    React.createElement("button", { "aria-label": "\u9805\u76EE\u3092\u4E0A\u3078\u79FB\u52D5", disabled: locked || !hasMoveUp, type: "button", onClick: onReorderClick(index, index - 1) }, "\u2191"),
+                    React.createElement("button", { "aria-label": "\u9805\u76EE\u3092\u4E0B\u3078\u79FB\u52D5", disabled: locked || !hasMoveDown, type: "button", onClick: onReorderClick(index, index + 1) }, "\u2193")) : null,
+                hasCopy ? React.createElement("button", { disabled: locked, type: "button", onClick: onCopyIndexClick(index) }, "\u9805\u76EE\u3092\u8907\u88FD") : null,
+                hasRemove ? React.createElement(ItemMenu, { disabled: locked, onClick: onDropIndexClick(index) }) : null)),
+        children);
+}

package/dist/rjsf.js

@@ -16,6 +16,7 @@ import { cloneJson } from './data.js';
 import { decodeSource, encodeSource, sameData } from './codec.js';
 import { EditorRegistry } from './registry.js';
 import { EDITOR_API_VERSION } from './types.js';
+import { AddItemButton, ArrayItem, ItemMenu, additionalItemTemplate, numberedObjectTemplate, valueFieldTemplate } from './rjsf-templates.js';
 // RJSF v5 exposes CommonJS to Node and ESM to browser bundlers.
 function moduleExports(namespace) {
     const fallback = namespace.default;
@@ -23,8 +24,12 @@ function moduleExports(namespace) {
         ? fallback : namespace;
 }
 const Form = moduleExports(RjsfCore).default;
-const { getDefaultFormState } = moduleExports(RjsfUtils);
+const { getDefaultFormState, ADDITIONAL_PROPERTY_FLAG } = moduleExports(RjsfUtils);
 const { customizeValidator } = moduleExports(RjsfAjv);
+const defaultTemplates = moduleExports(RjsfCore).getDefaultRegistry().templates;
+const ObjectItems = numberedObjectTemplate(defaultTemplates.ObjectFieldTemplate, ADDITIONAL_PROPERTY_FLAG);
+const AdditionalItem = additionalItemTemplate(ADDITIONAL_PROPERTY_FLAG);
+const ValueField = valueFieldTemplate(defaultTemplates.FieldTemplate, ADDITIONAL_PROPERTY_FLAG);
 let nextViewId = 0;
 export function createSchemaBundleEditor(options) {
     const { schemaBundle, validationContext: provider, ownerValidate, apiVersion, extensionId, editorId, opcodes, argument, format, uiSchema, validateData } = options;
@@ -209,6 +214,13 @@ function createSchemaEditorImpl(options, bundle) {
                 const state = context.getState();
                 const props = {
                     schema, uiSchema, validator, idPrefix,
+                    templates: {
+                        ArrayFieldItemTemplate: ArrayItem,
+                        ObjectFieldTemplate: ObjectItems,
+                        WrapIfAdditionalTemplate: AdditionalItem,
+                        FieldTemplate: ValueField,
+                        ButtonTemplates: { AddButton: AddItemButton, RemoveButton: ItemMenu }
+                    },
                     formData: dataFor(context.getDraft()),
                     // Defaults belong to read(), not subsequent renders or remounts.
                     experimental_defaultFormStateBehavior: {

package/dist/turbowarp/bridge.js

@@ -95,6 +95,9 @@ const createBlockEditorBridge = ({ ScratchBlocks, workspace, vm, service, label,
                 openingFixedDeclaration = fixedDeclaration(service.registry, openingSnapshot) || null;
                 const labels = {};
                 const appearances = Object.create(null);
+                const rootAppearance = readBlockEditorAppearance(block, ScratchBlocks);
+                appearances[reference.blockId] = rootAppearance;
+                labels[reference.blockId] = rootAppearance.name || block.type;
                 if (typeof session.getNodes === 'function') {
                     for (const node of session.getNodes()) {
                         const source = workspace.getBlockById(node.reference.blockId);

package/dist/webpack4/metafile.json

@@ -13961,8 +13961,19 @@
       ],
       "format": "esm"
     },
+    "dist/rjsf-templates.js": {
+      "bytes": 7933,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "dist/rjsf.js": {
-      "bytes": 12941,
+      "bytes": 13852,
       "imports": [
         {
           "path": "react",
@@ -14053,6 +14064,11 @@
           "path": "dist/types.js",
           "kind": "import-statement",
           "original": "./types.js"
+        },
+        {
+          "path": "dist/rjsf-templates.js",
+          "kind": "import-statement",
+          "original": "./rjsf-templates.js"
         }
       ],
       "format": "esm"
@@ -14063,7 +14079,7 @@
       "format": "esm"
     },
     "dist/react.js": {
-      "bytes": 13204,
+      "bytes": 14377,
       "imports": [
         {
           "path": "dist/field-errors.js",
@@ -14177,7 +14193,7 @@
       "format": "esm"
     },
     "dist/turbowarp/bridge.js": {
-      "bytes": 8708,
+      "bytes": 8940,
       "imports": [
         {
           "path": "dist/turbowarp/host.js",
@@ -14297,7 +14313,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 1849648
+      "bytes": 1863920
     },
     "dist/webpack4/rjsf.js": {
       "imports": [
@@ -14681,6 +14697,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -15360,7 +15381,7 @@
           "bytesInOutput": 275
         },
         "dist/rjsf.js": {
-          "bytesInOutput": 10135
+          "bytesInOutput": 10851
         },
         "node_modules/.pnpm/yaml@2.9.1/node_modules/yaml/browser/dist/nodes/identity.js": {
           "bytesInOutput": 1376
@@ -15579,16 +15600,16 @@
           "bytesInOutput": 2134
         },
         "dist/source-document.js": {
-          "bytesInOutput": 16042
+          "bytesInOutput": 16050
         },
         "dist/source-schema-hints.js": {
           "bytesInOutput": 449
         },
         "dist/source-view.js": {
-          "bytesInOutput": 18068
+          "bytesInOutput": 18076
         },
         "dist/source-editor.js": {
-          "bytesInOutput": 10738
+          "bytesInOutput": 10758
         },
         "dist/fixed-input-view.js": {
           "bytesInOutput": 10479
@@ -16666,15 +16687,18 @@
         },
         "dist/schema-view.js": {
           "bytesInOutput": 4302
+        },
+        "dist/rjsf-templates.js": {
+          "bytesInOutput": 7182
         }
       },
-      "bytes": 850556
+      "bytes": 858517
     },
     "dist/webpack4/react.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 28944
+      "bytes": 30867
     },
     "dist/webpack4/react.js": {
       "imports": [
@@ -16702,16 +16726,16 @@
           "bytesInOutput": 3769
         },
         "dist/react.js": {
-          "bytesInOutput": 11910
+          "bytesInOutput": 13029
         }
       },
-      "bytes": 15969
+      "bytes": 17088
     },
     "dist/webpack4/turbowarp.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 116171
+      "bytes": 116509
     },
     "dist/webpack4/turbowarp.js": {
       "imports": [
@@ -16768,13 +16792,13 @@
           "bytesInOutput": 835
         },
         "dist/turbowarp/bridge.js": {
-          "bytesInOutput": 6769
+          "bytesInOutput": 6970
         },
         "dist/turbowarp.js": {
           "bytesInOutput": 1096
         }
       },
-      "bytes": 62416
+      "bytes": 62617
     },
     "dist/webpack4/shared-FYUILHED.js.map": {
       "imports": [],

package/dist/webpack4/react.js

@@ -314,6 +314,7 @@ var BlockEditorDialog = class extends React.Component {
     }
   }
   render() {
+    var _a, _b, _c, _d;
     const { styles, messages, ModalComponent, session } = this.props;
     const saving = this.state.status === "saving";
     const hierarchy = typeof session.getNodes === "function";
@@ -321,13 +322,18 @@ var BlockEditorDialog = class extends React.Component {
     if (session.getFixedInputView && (this.state.status === "editing" || saving)) {
       try {
         fixed = Boolean(session.getFixedInputView());
-      } catch (_a) {
+      } catch (_e) {
         fixed = true;
       }
     }
+    const root = (_a = session.getNodes) === null || _a === void 0 ? void 0 : _a.call(session).find((node) => node.inputPath.length === 0);
+    const rootId = ((_b = session.reference) === null || _b === void 0 ? void 0 : _b.blockId) || (root === null || root === void 0 ? void 0 : root.reference.blockId);
+    const appearance = rootId ? (_c = this.props.nodeAppearances) === null || _c === void 0 ? void 0 : _c[rootId] : void 0;
+    const name = (appearance === null || appearance === void 0 ? void 0 : appearance.name) || (rootId ? (_d = this.props.nodeLabels) === null || _d === void 0 ? void 0 : _d[rootId] : void 0) || (root === null || root === void 0 ? void 0 : root.opcode);
+    const title = name ? messages.title.includes("{name}") ? messages.title.replace("{name}", () => name) : /ブロック|block/i.test(messages.title) ? messages.title.replace(/ブロック|block/i, () => name) : `${name}: ${messages.title}` : messages.title;
     return React.createElement(
       ModalComponent,
-      { className: `${styles.modalContent || ""} ${hierarchy ? styles.hierarchyModal : ""} ${this.props.className || ""}`, contentLabel: messages.title, id: "blockEditorModal", onRequestClose: this.handleClose },
+      { className: `${styles.modalContent || ""} ${hierarchy ? styles.hierarchyModal : ""} ${this.props.className || ""}`, contentLabel: title, ...(appearance === null || appearance === void 0 ? void 0 : appearance.iconURI) ? { headerImage: appearance.iconURI } : {}, headerClassName: styles.header, id: "blockEditorModal", onRequestClose: this.handleClose },
       React.createElement(
         "div",
         { "aria-busy": saving, className: styles.body, onCompositionStart: () => {
@@ -349,14 +355,14 @@ var BlockEditorDialog = class extends React.Component {
             { "aria-live": "polite", className: styles.errors, role: "status" },
             saving ? messages.saving : null,
             fixed && this.state.issues.length ? React.createElement("p", null, messages.invalidInput || messages.failed) : this.state.issues.map((issue, index) => {
-              var _a;
+              var _a2;
               return hierarchy && "reference" in issue ? React.createElement(
                 "button",
                 { className: styles.nodeError, "data-block-editor-issue": index, disabled: saving, key: index, type: "button", onClick: () => {
-                  var _a2;
-                  return (_a2 = this.tree) === null || _a2 === void 0 ? void 0 : _a2.reveal(issue);
+                  var _a3;
+                  return (_a3 = this.tree) === null || _a3 === void 0 ? void 0 : _a3.reveal(issue);
                 } },
-                ((_a = this.props.nodeLabels) === null || _a === void 0 ? void 0 : _a[issue.reference.blockId]) || issue.reference.blockId,
+                ((_a2 = this.props.nodeLabels) === null || _a2 === void 0 ? void 0 : _a2[issue.reference.blockId]) || issue.reference.blockId,
                 ": ",
                 issue.message
               ) : React.createElement("p", { key: index }, issue.message);