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

package/README.md

@@ -6,6 +6,8 @@ TurboWarp拡張が扱う構造化データを、フォームや独自UIで編集
 
 日本語の利用手順・API・GUI接続・公開・検証記録は[ドキュメント一覧](docs/README.md)へ集約しています。
 
+タブ・グループ・グリッドは[共通レイアウトガイド](docs/common-layout.ja.md)を参照してください。標準RJSFとSource/Formで同じJSON宣言を使用し、ホストの起動時フラグ `commonLayout` で有効にします（既定OFF）。
+
 [公開エディター・日英案内](https://kubohiroya.github.io/turbowarp-extension-data-editor/) と
 [公開・検証の運用Issue #26](https://github.com/kubohiroya/turbowarp-extension-data-editor/issues/26) も本リポジトリが所有します。
 
@@ -103,10 +105,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.3.0",
   "repository": "https://github.com/kubohiroya/turbowarp-extension-data-editor",
-  "revision": "485f0e550e622235624b5e9176820161aeeba252",
-  "sourceState": "working-tree",
-  "sourceSha256": "175674eaaffce60dd9ebcf4c31f0f02a3bbd9dc6b8659ab3101ea6d8bceeea2f",
+  "revision": "9409867dc58d56cd652afa83f2361810dc8da826",
+  "sourceState": "commit",
+  "sourceSha256": "7aae735fe9bd33f5fcc3ca055186be84aa89de1fb6b31c66b68d1cca3c3731f3",
   "capabilities": {
     "preparedSource": 1
   }

package/dist/config/feature-flags.d.ts

@@ -0,0 +1,5 @@
+/** Captured once by the host at service/editor creation; never controlled by extension metadata. */
+export interface EditorFeatureFlags {
+    readonly commonLayout?: boolean;
+}
+export declare function captureFeatureFlags(options?: EditorFeatureFlags): Readonly<Required<EditorFeatureFlags>>;

package/dist/config/feature-flags.js

@@ -0,0 +1,6 @@
+export function captureFeatureFlags(options = {}) {
+    if (options.commonLayout !== undefined && typeof options.commonLayout !== 'boolean') {
+        throw new TypeError('Invalid common layout feature flag.');
+    }
+    return Object.freeze({ commonLayout: options.commonLayout === true });
+}

package/dist/form-presentation.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/** Explicit schema/ui titles remain untouched; fallback property keys become readable labels. */
+export declare function propertyLabel(key: string): string;
+export declare function FormHelp({ description, id }: {
+    description: unknown;
+    id?: string;
+}): React.ReactElement | null;
+export declare const formStyles = "\n[data-editor-form]{--editor-accent:var(--block-editor-accent,#426ad6);--editor-line:var(--block-editor-border,#dde3ed);--editor-muted:var(--block-editor-muted,var(--block-editor-text,#637086));color:var(--block-editor-text,#25334a);font:14px/1.5 system-ui,sans-serif;min-width:0}\n[data-editor-form] *,[data-editor-form] *:before,[data-editor-form] *:after{box-sizing:border-box}\n[data-editor-form] fieldset{min-width:0}\n[data-editor-form] fieldset.editor-form-binding,[data-editor-form] .editor-form-section,[data-editor-form] .rjsf fieldset{padding:0;border:0;margin:0 0 18px}\n[data-editor-form] .editor-form-section>legend,[data-editor-form] .rjsf fieldset>legend{font-size:15px;font-weight:650;padding:0;margin:0 0 10px;color:inherit}\n[data-editor-form] .editor-form-field,[data-editor-form] .rjsf .form-group{margin:0 0 14px;min-width:0}\n[data-editor-form] .editor-form-field>label,[data-editor-form] .rjsf .control-label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:inherit}\n[data-editor-form] .required{color:var(--editor-accent);margin-left:3px}\n[data-editor-form] input:not([type=checkbox]):not([type=radio]),[data-editor-form] select,[data-editor-form] textarea{display:block;width:100%;min-height:38px;margin:0;padding:8px 11px;border:1px solid var(--editor-line);border-radius:7px;background:var(--block-editor-input,white);color:inherit;font:inherit;box-shadow:0 1px 2px #172b4d05}\n[data-editor-form] textarea{min-height:76px;resize:vertical}\n[data-editor-form] input:focus-visible,[data-editor-form] select:focus-visible,[data-editor-form] textarea:focus-visible,[data-editor-form] button:focus-visible,[data-editor-form] summary:focus-visible{outline:2px solid var(--editor-accent);outline-offset:2px}\n[data-editor-form] input[readonly]{background:var(--block-editor-subtle,var(--block-editor-background,#f5f7fb));color:var(--editor-muted)}\n[data-editor-form] input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--editor-accent)}\n[data-editor-form] .editor-form-field>label.editor-form-toggle,[data-editor-form] .rjsf .checkbox>label{display:flex;align-items:center;gap:8px;font-weight:500;margin:8px 0}\n[data-editor-form] button{font:inherit;cursor:pointer;border:1px solid var(--editor-line);border-radius:6px;background:var(--block-editor-input,white);color:inherit;padding:6px 10px;margin:0}\n[data-editor-form] button:disabled{cursor:default;opacity:.5}\n[data-editor-form] .editor-form-hint,[data-editor-form] .editor-form-help{color:var(--editor-muted);font-size:12px;line-height:1.5;margin:5px 0 10px}\n[data-editor-form] .editor-form-help>summary{cursor:pointer;width:fit-content;font-weight:500}\n[data-editor-form] .editor-form-help p{margin:8px 0}\n[data-editor-form] .block-editor-layout-tabs>[role=tablist]{display:flex;gap:4px;flex-wrap:wrap;padding:5px;background:var(--block-editor-subtle,var(--block-editor-background,#f1f4f9));border:1px solid var(--editor-line);border-radius:9px;margin:4px 0 20px}\n[data-editor-form] .block-editor-layout-tabs>[role=tablist]>button{border:0;border-radius:6px;background:transparent;color:var(--editor-muted);padding:8px 18px;margin:0;font-weight:550;text-decoration:none;min-width:76px}\n[data-editor-form] .block-editor-layout-tabs>[role=tablist]>[aria-selected=true]{background:var(--block-editor-input,white);color:var(--editor-accent);box-shadow:0 1px 4px #1d30431a}\n[data-editor-form] .editor-form-error-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;margin-left:7px;padding:0 5px;border-radius:10px;background:#fff0f0;color:#b53d45;font-size:11px}\n[data-editor-form] fieldset.block-editor-layout-group{border:1px solid var(--editor-line);border-radius:10px;padding:16px 18px 4px;margin:0 0 18px;background:var(--block-editor-background,white)}\n[data-editor-form] fieldset.block-editor-layout-group>legend{padding:0 6px;font-size:13px;font-weight:650}\n[data-editor-form] .block-editor-layout-grid{display:grid;gap:0 18px;grid-template-columns:repeat(var(--editor-columns),minmax(0,1fr));align-items:start}\n[data-editor-form] .block-editor-layout-grid>*{min-width:0}\n[data-editor-form] .block-editor-layout-tabs>[hidden]{display:none!important}\n[data-editor-form] .editor-form-toolbar{display:flex;align-items:start;justify-content:space-between;gap:12px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--editor-line)}\n[data-editor-form] .editor-form-modes{display:flex;gap:3px;border:1px solid var(--editor-line);border-radius:8px;padding:3px;background:var(--block-editor-subtle,var(--block-editor-background,#f1f4f9))}\n[data-editor-form] .editor-form-modes>button{border:0;border-radius:5px;padding:5px 14px;background:transparent;color:var(--editor-muted);margin:0}\n[data-editor-form] .editor-form-modes>[aria-pressed=true]{background:var(--block-editor-input,white);color:var(--editor-accent);box-shadow:0 1px 3px #1d30431a}\n[data-editor-form] .editor-form-tools{font-size:12px;color:var(--editor-muted);margin:0 0 12px}\n[data-editor-form] .editor-form-tools>summary{cursor:pointer;padding:5px 0;list-style-position:inside}\n[data-editor-form] .editor-form-tools[open]{padding:10px 12px;border:1px solid var(--editor-line);border-radius:8px;background:var(--block-editor-subtle,var(--block-editor-background,#f7f9fc))}\n[data-editor-form] .editor-form-tools button{border:1px solid var(--editor-line);border-radius:6px;background:var(--block-editor-input,white);padding:5px 9px;margin:5px 5px 5px 0;color:inherit}\n[data-editor-form] .editor-form-tools label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0}\n[data-editor-form] .editor-form-invalid{font-size:12px;color:#b53d45;margin:5px 0}\n[data-editor-form] [data-source-error=true]>input,[data-editor-form] [data-source-error=true]>textarea{border-color:#b53d45}\n[data-editor-form] .editor-form-array-item{display:flex;align-items:start;gap:10px}\n[data-editor-form] .editor-form-array-item>.editor-form-field{flex:1;min-width:0}\n@media(max-width:600px){[data-editor-form] .block-editor-layout-grid{grid-template-columns:minmax(0,1fr)}[data-editor-form] fieldset.block-editor-layout-group{padding:12px 12px 0}[data-editor-form] .block-editor-layout-tabs>[role=tablist]>button{padding:7px 12px;min-width:60px}[data-editor-form] .editor-form-toolbar{flex-wrap:wrap}}\n";

package/dist/form-presentation.js

@@ -0,0 +1,61 @@
+import * as React from 'react';
+/** Explicit schema/ui titles remain untouched; fallback property keys become readable labels. */
+export function propertyLabel(key) {
+    if (/^[a-z]{1,3}$/.test(key))
+        return key;
+    const text = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ').replace(/\b(id|uri|url|json)\b/gi, word => word.toUpperCase());
+    return text ? text[0].toUpperCase() + text.slice(1) : '設定';
+}
+export function FormHelp({ description, id }) {
+    if (typeof description !== 'string' || !description)
+        return null;
+    return description.length > 130 ? React.createElement("details", { className: "editor-form-help", id: id },
+        React.createElement("summary", null, "\u8AAC\u660E"),
+        React.createElement("p", null, description))
+        : React.createElement("p", { className: "editor-form-hint", id: id }, description);
+}
+// Scoped to the opt-in form root; the same rules ship with both rendering paths.
+export const formStyles = `
+[data-editor-form]{--editor-accent:var(--block-editor-accent,#426ad6);--editor-line:var(--block-editor-border,#dde3ed);--editor-muted:var(--block-editor-muted,var(--block-editor-text,#637086));color:var(--block-editor-text,#25334a);font:14px/1.5 system-ui,sans-serif;min-width:0}
+[data-editor-form] *,[data-editor-form] *:before,[data-editor-form] *:after{box-sizing:border-box}
+[data-editor-form] fieldset{min-width:0}
+[data-editor-form] fieldset.editor-form-binding,[data-editor-form] .editor-form-section,[data-editor-form] .rjsf fieldset{padding:0;border:0;margin:0 0 18px}
+[data-editor-form] .editor-form-section>legend,[data-editor-form] .rjsf fieldset>legend{font-size:15px;font-weight:650;padding:0;margin:0 0 10px;color:inherit}
+[data-editor-form] .editor-form-field,[data-editor-form] .rjsf .form-group{margin:0 0 14px;min-width:0}
+[data-editor-form] .editor-form-field>label,[data-editor-form] .rjsf .control-label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:inherit}
+[data-editor-form] .required{color:var(--editor-accent);margin-left:3px}
+[data-editor-form] input:not([type=checkbox]):not([type=radio]),[data-editor-form] select,[data-editor-form] textarea{display:block;width:100%;min-height:38px;margin:0;padding:8px 11px;border:1px solid var(--editor-line);border-radius:7px;background:var(--block-editor-input,white);color:inherit;font:inherit;box-shadow:0 1px 2px #172b4d05}
+[data-editor-form] textarea{min-height:76px;resize:vertical}
+[data-editor-form] input:focus-visible,[data-editor-form] select:focus-visible,[data-editor-form] textarea:focus-visible,[data-editor-form] button:focus-visible,[data-editor-form] summary:focus-visible{outline:2px solid var(--editor-accent);outline-offset:2px}
+[data-editor-form] input[readonly]{background:var(--block-editor-subtle,var(--block-editor-background,#f5f7fb));color:var(--editor-muted)}
+[data-editor-form] input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--editor-accent)}
+[data-editor-form] .editor-form-field>label.editor-form-toggle,[data-editor-form] .rjsf .checkbox>label{display:flex;align-items:center;gap:8px;font-weight:500;margin:8px 0}
+[data-editor-form] button{font:inherit;cursor:pointer;border:1px solid var(--editor-line);border-radius:6px;background:var(--block-editor-input,white);color:inherit;padding:6px 10px;margin:0}
+[data-editor-form] button:disabled{cursor:default;opacity:.5}
+[data-editor-form] .editor-form-hint,[data-editor-form] .editor-form-help{color:var(--editor-muted);font-size:12px;line-height:1.5;margin:5px 0 10px}
+[data-editor-form] .editor-form-help>summary{cursor:pointer;width:fit-content;font-weight:500}
+[data-editor-form] .editor-form-help p{margin:8px 0}
+[data-editor-form] .block-editor-layout-tabs>[role=tablist]{display:flex;gap:4px;flex-wrap:wrap;padding:5px;background:var(--block-editor-subtle,var(--block-editor-background,#f1f4f9));border:1px solid var(--editor-line);border-radius:9px;margin:4px 0 20px}
+[data-editor-form] .block-editor-layout-tabs>[role=tablist]>button{border:0;border-radius:6px;background:transparent;color:var(--editor-muted);padding:8px 18px;margin:0;font-weight:550;text-decoration:none;min-width:76px}
+[data-editor-form] .block-editor-layout-tabs>[role=tablist]>[aria-selected=true]{background:var(--block-editor-input,white);color:var(--editor-accent);box-shadow:0 1px 4px #1d30431a}
+[data-editor-form] .editor-form-error-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;margin-left:7px;padding:0 5px;border-radius:10px;background:#fff0f0;color:#b53d45;font-size:11px}
+[data-editor-form] fieldset.block-editor-layout-group{border:1px solid var(--editor-line);border-radius:10px;padding:16px 18px 4px;margin:0 0 18px;background:var(--block-editor-background,white)}
+[data-editor-form] fieldset.block-editor-layout-group>legend{padding:0 6px;font-size:13px;font-weight:650}
+[data-editor-form] .block-editor-layout-grid{display:grid;gap:0 18px;grid-template-columns:repeat(var(--editor-columns),minmax(0,1fr));align-items:start}
+[data-editor-form] .block-editor-layout-grid>*{min-width:0}
+[data-editor-form] .block-editor-layout-tabs>[hidden]{display:none!important}
+[data-editor-form] .editor-form-toolbar{display:flex;align-items:start;justify-content:space-between;gap:12px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--editor-line)}
+[data-editor-form] .editor-form-modes{display:flex;gap:3px;border:1px solid var(--editor-line);border-radius:8px;padding:3px;background:var(--block-editor-subtle,var(--block-editor-background,#f1f4f9))}
+[data-editor-form] .editor-form-modes>button{border:0;border-radius:5px;padding:5px 14px;background:transparent;color:var(--editor-muted);margin:0}
+[data-editor-form] .editor-form-modes>[aria-pressed=true]{background:var(--block-editor-input,white);color:var(--editor-accent);box-shadow:0 1px 3px #1d30431a}
+[data-editor-form] .editor-form-tools{font-size:12px;color:var(--editor-muted);margin:0 0 12px}
+[data-editor-form] .editor-form-tools>summary{cursor:pointer;padding:5px 0;list-style-position:inside}
+[data-editor-form] .editor-form-tools[open]{padding:10px 12px;border:1px solid var(--editor-line);border-radius:8px;background:var(--block-editor-subtle,var(--block-editor-background,#f7f9fc))}
+[data-editor-form] .editor-form-tools button{border:1px solid var(--editor-line);border-radius:6px;background:var(--block-editor-input,white);padding:5px 9px;margin:5px 5px 5px 0;color:inherit}
+[data-editor-form] .editor-form-tools label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0}
+[data-editor-form] .editor-form-invalid{font-size:12px;color:#b53d45;margin:5px 0}
+[data-editor-form] [data-source-error=true]>input,[data-editor-form] [data-source-error=true]>textarea{border-color:#b53d45}
+[data-editor-form] .editor-form-array-item{display:flex;align-items:start;gap:10px}
+[data-editor-form] .editor-form-array-item>.editor-form-field{flex:1;min-width:0}
+@media(max-width:600px){[data-editor-form] .block-editor-layout-grid{grid-template-columns:minmax(0,1fr)}[data-editor-form] fieldset.block-editor-layout-group{padding:12px 12px 0}[data-editor-form] .block-editor-layout-tabs>[role=tablist]>button{padding:7px 12px;min-width:60px}[data-editor-form] .editor-form-toolbar{flex-wrap:wrap}}
+`;

package/dist/layout-view.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { EditorViewContext } from './types.js';
+export declare const useCommonLayout: () => boolean;
+/** One environment for the entire editor; saving reveals errors without changing the draft. */
+export declare function LayoutHost({ enabled, context, children }: {
+    enabled: boolean;
+    context: EditorViewContext;
+    children: React.ReactNode;
+}): React.ReactElement;
+export interface LayoutField {
+    readonly name: string;
+    readonly content: React.ReactNode;
+    readonly errors?: number;
+}
+/** Share layout behavior while leaving each renderer in charge of its controls. */
+export declare function ObjectLayout({ ui, fields, knownFields, fallback }: {
+    ui: unknown;
+    fields: readonly LayoutField[];
+    knownFields: readonly string[];
+    fallback: React.ReactNode;
+}): React.ReactElement;

package/dist/layout-view.js

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { formStyles } from './form-presentation.js';
+import { resolveEditorLayout } from './layout.js';
+const Environment = React.createContext({ enabled: false, reveal: 0, disabled: false });
+export const useCommonLayout = () => React.useContext(Environment).enabled;
+let nextId = 0;
+/** One environment for the entire editor; saving reveals errors without changing the draft. */
+export function LayoutHost({ enabled, context, children }) {
+    const [reveal, setReveal] = React.useState(0);
+    const [status, setStatus] = React.useState(context.getState().status);
+    const root = React.useRef(null);
+    React.useLayoutEffect(() => {
+        let saving = context.getState().status === 'saving';
+        let active = true;
+        const stop = context.subscribe(() => {
+            const state = context.getState();
+            const failed = saving && state.status === 'editing' && state.issues.length > 0;
+            saving = state.status === 'saving';
+            setStatus(state.status);
+            if (failed)
+                void Promise.resolve().then(() => { if (active)
+                    setReveal(n => n + 1); });
+        });
+        return () => { active = false; stop(); };
+    }, [context]);
+    React.useEffect(() => {
+        if (!enabled || !reveal)
+            return;
+        const timer = setTimeout(() => {
+            var _a, _b, _c;
+            const controls = (_a = root.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-layout-error="true"] input, [data-layout-error="true"] textarea, [data-layout-error="true"] select');
+            const candidates = Array.from(controls !== null && controls !== void 0 ? controls : []).filter(control => !control.closest('[hidden]') && !control.matches(':disabled') && !control.hasAttribute('data-source-type-control'));
+            const target = (_c = (_b = candidates.find(control => { var _a; return ((_a = control.closest('[data-source-path]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-source-error')) === 'true'; })) !== null && _b !== void 0 ? _b : candidates.find(control => { var _a; return (_a = control.closest('.form-group')) === null || _a === void 0 ? void 0 : _a.classList.contains('has-error'); })) !== null && _c !== void 0 ? _c : candidates.find(control => { var _a; return ((_a = control.closest('[data-layout-field]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-layout-error')) === 'true'; });
+            target === null || target === void 0 ? void 0 : target.focus();
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [enabled, reveal]);
+    return React.createElement(Environment.Provider, { value: { enabled, reveal, disabled: status !== 'editing' } }, enabled ? React.createElement("div", { ref: root, "data-editor-form": "" },
+        React.createElement("style", null, formStyles),
+        children) : children);
+}
+function names(items) {
+    return items.flatMap(item => 'field' in item ? [item.field] : 'tabs' in item ? item.tabs.flatMap(tab => names(tab.items)) : names(item.items));
+}
+function Items({ items, fields }) {
+    return React.createElement(React.Fragment, null, items.map((item, index) => {
+        if ('field' in item) {
+            const field = fields.get(item.field);
+            return field ? React.createElement("div", { key: index, "data-layout-field": item.field, "data-layout-error": !!field.errors }, field.content) : null;
+        }
+        if ('tabs' in item)
+            return React.createElement(Tabs, { key: index, tabs: item.tabs, fields: fields });
+        if ('group' in item)
+            return React.createElement("fieldset", { className: "block-editor-layout-group", key: index },
+                React.createElement("legend", null, item.group),
+                React.createElement(Items, { items: item.items, fields: fields }));
+        return React.createElement("div", { key: index, className: "block-editor-layout-grid", style: { '--editor-columns': item.grid } },
+            React.createElement(Items, { items: item.items, fields: fields }));
+    }));
+}
+function Tabs({ tabs, fields }) {
+    const { reveal, disabled } = React.useContext(Environment);
+    const [selected, select] = React.useState(0);
+    const [id] = React.useState(() => `block-editor-layout-${++nextId}`);
+    const buttons = React.useRef([]);
+    const counts = tabs.map(tab => names(tab.items).reduce((total, name) => { var _a, _b; return total + ((_b = (_a = fields.get(name)) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : 0); }, 0));
+    const errors = counts.join(',');
+    const handled = React.useRef(0);
+    React.useEffect(() => {
+        if (reveal <= handled.current)
+            return;
+        const first = counts.findIndex(count => count > 0);
+        if (first >= 0) {
+            handled.current = reveal;
+            select(first);
+        }
+        // Wait for delayed RJSF error propagation, then consume this save attempt once.
+    }, [reveal, errors]);
+    const current = Math.min(selected, tabs.length - 1);
+    return React.createElement("div", { className: "block-editor-layout-tabs", "data-layout-errors": errors },
+        React.createElement("div", { role: "tablist", "aria-label": "\u30D5\u30A9\u30FC\u30E0\u306E\u9805\u76EE" }, tabs.map((tab, index) => React.createElement("button", { key: index, ref: element => { buttons.current[index] = element; }, type: "button", role: "tab", id: `${id}-tab-${index}`, "aria-controls": `${id}-panel-${index}`, "aria-selected": current === index, disabled: disabled, tabIndex: current === index ? 0 : -1, onClick: () => select(index), onKeyDown: event => {
+                var _a;
+                if (event.nativeEvent.isComposing || event.keyCode === 229)
+                    return;
+                let target;
+                switch (event.key) {
+                    case 'ArrowRight':
+                        target = (index + 1) % tabs.length;
+                        break;
+                    case 'ArrowLeft':
+                        target = (index + tabs.length - 1) % tabs.length;
+                        break;
+                    case 'Home':
+                        target = 0;
+                        break;
+                    case 'End':
+                        target = tabs.length - 1;
+                        break;
+                    default: return;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                select(target);
+                (_a = buttons.current[target]) === null || _a === void 0 ? void 0 : _a.focus();
+            } },
+            tab.label,
+            counts[index] ? React.createElement("span", { className: "editor-form-error-badge", "aria-label": `エラー ${counts[index]} 件` }, counts[index]) : null))),
+        tabs.map((tab, index) => React.createElement("div", { key: index, role: "tabpanel", id: `${id}-panel-${index}`, "aria-labelledby": `${id}-tab-${index}`, hidden: current !== index },
+            React.createElement(Items, { items: tab.items, fields: fields }))));
+}
+/** Share layout behavior while leaving each renderer in charge of its controls. */
+export function ObjectLayout({ ui, fields, knownFields, fallback }) {
+    const { enabled } = React.useContext(Environment);
+    const resolution = enabled ? resolveEditorLayout(ui, knownFields) : { kind: 'absent' };
+    if (resolution.kind === 'absent')
+        return React.createElement(React.Fragment, null, fallback);
+    if (resolution.kind === 'invalid')
+        return React.createElement(React.Fragment, null,
+            React.createElement("p", { role: "status", "data-layout-diagnostic": "" },
+                "\u30EC\u30A4\u30A2\u30A6\u30C8\u3092\u9069\u7528\u3067\u304D\u307E\u305B\u3093: ",
+                resolution.diagnostic),
+            fallback);
+    const map = new Map(fields.map(field => [field.name, field]));
+    return React.createElement(React.Fragment, null,
+        React.createElement(Items, { items: resolution.items, fields: map }),
+        fields.filter(field => !resolution.fields.has(field.name)).map(field => React.createElement("div", { key: field.name, "data-layout-field": field.name, "data-layout-error": !!field.errors }, field.content)));
+}

package/dist/layout.d.ts

@@ -0,0 +1,31 @@
+/** JSON-only presentation metadata. Field names are literal immediate object keys, never paths. */
+export type EditorLayoutItem = {
+    readonly field: string;
+} | {
+    readonly group: string;
+    readonly items: readonly EditorLayoutItem[];
+} | {
+    readonly grid: number;
+    readonly items: readonly EditorLayoutItem[];
+} | {
+    readonly tabs: readonly {
+        readonly label: string;
+        readonly items: readonly EditorLayoutItem[];
+    }[];
+};
+export type EditorLayout = {
+    readonly version: 1;
+    readonly items: readonly EditorLayoutItem[];
+};
+export type LayoutResolution = {
+    readonly kind: 'absent';
+} | {
+    readonly kind: 'invalid';
+    readonly diagnostic: string;
+} | {
+    readonly kind: 'layout';
+    readonly items: readonly EditorLayoutItem[];
+    readonly fields: ReadonlySet<string>;
+};
+/** Validate the whole declaration before moving any controls. Invalid metadata never hides fields. */
+export declare function resolveEditorLayout(ui: unknown, knownFields: readonly string[]): LayoutResolution;

package/dist/layout.js

@@ -0,0 +1,63 @@
+const record = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
+/** Validate the whole declaration before moving any controls. Invalid metadata never hides fields. */
+export function resolveEditorLayout(ui, knownFields) {
+    if (!record(ui) || !record(ui['ui:options']) || !Object.hasOwn(ui['ui:options'], 'extensionDataLayout'))
+        return { kind: 'absent' };
+    const input = ui['ui:options'].extensionDataLayout;
+    const known = new Set(knownFields), fields = new Set();
+    let count = 0;
+    const fail = (message) => { throw new TypeError(message); };
+    const keys = (node, expected) => {
+        if (Object.keys(node).some(key => !expected.includes(key)))
+            fail('Unknown layout option.');
+    };
+    const label = (text) => typeof text === 'string' && text.trim().length > 0 && text.length <= 128 ? text : fail('Invalid layout label.');
+    const items = (value, depth) => {
+        if (depth > 8 || !Array.isArray(value) || value.length > 256)
+            return fail('Layout limit exceeded.');
+        return value.map((node) => {
+            if (++count > 256 || !record(node))
+                return fail('Invalid layout item or limit exceeded.');
+            if (Object.hasOwn(node, 'field')) {
+                keys(node, ['field']);
+                if (typeof node.field !== 'string' || !known.has(node.field))
+                    return fail('Unknown layout field.');
+                if (fields.has(node.field))
+                    return fail('Duplicate layout field.');
+                fields.add(node.field);
+                return { field: node.field };
+            }
+            if (Object.hasOwn(node, 'group')) {
+                keys(node, ['group', 'items']);
+                return { group: label(node.group), items: items(node.items, depth + 1) };
+            }
+            if (Object.hasOwn(node, 'grid')) {
+                keys(node, ['grid', 'items']);
+                if (typeof node.grid !== 'number' || !Number.isInteger(node.grid) || node.grid < 1 || node.grid > 4)
+                    return fail('Grid columns must be 1–4.');
+                return { grid: node.grid, items: items(node.items, depth + 1) };
+            }
+            if (Object.hasOwn(node, 'tabs')) {
+                keys(node, ['tabs']);
+                if (!Array.isArray(node.tabs) || !node.tabs.length || node.tabs.length > 16)
+                    return fail('Invalid tab count.');
+                return { tabs: node.tabs.map((tab) => {
+                        if (++count > 256 || !record(tab))
+                            return fail('Invalid tab or limit exceeded.');
+                        keys(tab, ['label', 'items']);
+                        return { label: label(tab.label), items: items(tab.items, depth + 1) };
+                    }) };
+            }
+            return fail('Unknown layout item.');
+        });
+    };
+    try {
+        if (!record(input) || input.version !== 1)
+            return fail('Unsupported layout version.');
+        keys(input, ['version', 'items']);
+        return { kind: 'layout', items: items(input.items, 0), fields };
+    }
+    catch (error) {
+        return { kind: 'invalid', diagnostic: error instanceof Error ? error.message : 'Invalid layout.' };
+    }
+}

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,18 @@
+import * as React from 'react';
+import type { ArrayFieldTemplateItemType, ArrayFieldTemplateProps, ArrayFieldTitleProps, DescriptionFieldProps, FieldTemplateProps, IconButtonProps, ObjectFieldTemplateProps, WidgetProps, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+/** Reuse the v5 object template's title, description and add-property controls. */
+export declare function layoutObjectTemplate(DefaultTemplate: React.ComponentType<ObjectFieldTemplateProps>): (props: ObjectFieldTemplateProps) => React.ReactElement;
+export declare function compactDescriptionTemplate(DefaultTemplate: React.ComponentType<DescriptionFieldProps>): (props: DescriptionFieldProps) => React.ReactElement;
+export declare function compactArrayTitleTemplate(DefaultTemplate: React.ComponentType<ArrayFieldTitleProps>): (props: ArrayFieldTitleProps) => React.ReactElement;
+export declare function compactArrayTemplate(DefaultTemplate: React.ComponentType<ArrayFieldTemplateProps>): (props: ArrayFieldTemplateProps) => React.ReactElement;
+/** Boolean widgets own their visible label instead of using the surrounding FieldTemplate. */
+export declare function compactCheckboxWidget(DefaultWidget: React.ComponentType<WidgetProps>): (props: WidgetProps) => React.ReactElement;
+/** 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;