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

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) も本リポジトリが所有します。
 

package/dist/build-info.json

@@ -1,10 +1,10 @@
 {
   "name": "@kubohiroya/turbowarp-extension-data-editor",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "repository": "https://github.com/kubohiroya/turbowarp-extension-data-editor",
-  "revision": "7ba760f829a37e2cce39b81668f8c44ea615991e",
+  "revision": "b5da552d5e5a9a4b3cde49f6410d463df48eb62f",
   "sourceState": "commit",
-  "sourceSha256": "e53c39a3499c78df960a7d38514ed8adbad9258c65655b8a01f6fe553e2d7191",
+  "sourceSha256": "0e297f919ee81101e825bea99a6c20203fbd918a555e1c19e4b14f0132a2b1b7",
   "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{display:list-item;list-style:disclosure-closed inside;cursor:pointer;width:fit-content;font-weight:500}\n[data-editor-form] .editor-form-help[open]>summary{list-style-type:disclosure-open}\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,62 @@
+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.trim())
+        return null;
+    return description.length > 130 ? React.createElement("details", { className: "editor-form-help", id: id },
+        React.createElement("summary", null, "\u8AAC\u660E\u3092\u8868\u793A"),
+        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{display:list-item;list-style:disclosure-closed inside;cursor:pointer;width:fit-content;font-weight:500}
+[data-editor-form] .editor-form-help[open]>summary{list-style-type:disclosure-open}
+[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/rjsf-templates.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import type { ArrayFieldTemplateItemType, FieldTemplateProps, IconButtonProps, ObjectFieldTemplateProps, WrapIfAdditionalTemplateProps } from '@rjsf/utils';
+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. */

package/dist/rjsf-templates.js

@@ -1,11 +1,81 @@
 import * as React from 'react';
+import { ObjectLayout, useCommonLayout } from './layout-view.js';
+import { resolveEditorLayout } from './layout.js';
+import { FormHelp, propertyLabel } from './form-presentation.js';
 const ItemNumber = React.createContext(1);
 const PropertyKey = React.createContext(undefined);
+function errorCount(value) {
+    if (!value || typeof value !== 'object')
+        return 0;
+    if (Array.isArray(value))
+        return value.length;
+    return Object.values(value).reduce((count, child) => count + errorCount(child), 0);
+}
+/** Reuse the v5 object template's title, description and add-property controls. */
+export function layoutObjectTemplate(DefaultTemplate) {
+    return function LayoutObject(props) {
+        var _a, _b;
+        const enabled = useCommonLayout();
+        const title = enabled && !props.schema.title && !((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a['ui:title']) ? propertyLabel(props.title) : props.title;
+        const view = { ...props, title };
+        const knownFields = [...new Set([...Object.keys((_b = props.schema.properties) !== null && _b !== void 0 ? _b : {}), ...props.properties.map(property => property.name)])];
+        const resolution = enabled ? resolveEditorLayout(props.uiSchema, knownFields) : { kind: 'absent' };
+        if (resolution.kind === 'absent')
+            return React.createElement(DefaultTemplate, { ...view });
+        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),
+                React.createElement(DefaultTemplate, { ...props }));
+        const content = React.createElement(ObjectLayout, { key: "__editor_layout__", ui: props.uiSchema, knownFields: knownFields, fallback: null, fields: props.properties.map(property => {
+                var _a;
+                return ({
+                    name: property.name, content: property.content, errors: errorCount((_a = props.errorSchema) === null || _a === void 0 ? void 0 : _a[property.name])
+                });
+            }) });
+        return React.createElement(DefaultTemplate, { ...view, properties: [{ name: '__editor_layout__', content, hidden: false, disabled: !!props.disabled, readonly: !!props.readonly }] });
+    };
+}
+export function compactDescriptionTemplate(DefaultTemplate) {
+    return function CompactDescription(props) {
+        const enabled = useCommonLayout();
+        return enabled && typeof props.description === 'string' ? React.createElement(FormHelp, { id: props.id, description: props.description }) : React.createElement(DefaultTemplate, { ...props });
+    };
+}
+export function compactArrayTitleTemplate(DefaultTemplate) {
+    return function CompactArrayTitle(props) {
+        var _a;
+        const enabled = useCommonLayout();
+        if (!enabled || !props.title || props.schema.title || ((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a['ui:title']))
+            return React.createElement(DefaultTemplate, { ...props });
+        return React.createElement(DefaultTemplate, { ...props, title: propertyLabel(props.title) });
+    };
+}
+export function compactArrayTemplate(DefaultTemplate) {
+    return function CompactArray(props) {
+        const enabled = useCommonLayout();
+        return React.createElement(React.Fragment, null,
+            React.createElement(DefaultTemplate, { ...props }),
+            enabled && props.items.length === 0 && React.createElement("p", { className: "editor-form-hint" }, "\u9805\u76EE\u306A\u3057"));
+    };
+}
+/** Boolean widgets own their visible label instead of using the surrounding FieldTemplate. */
+export function compactCheckboxWidget(DefaultWidget) {
+    return function CompactCheckbox(props) {
+        var _a;
+        const enabled = useCommonLayout();
+        const label = enabled && !props.schema.title && !((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a['ui:title']) && !props.options.title ? propertyLabel(props.label) : props.label;
+        return React.createElement(DefaultWidget, { ...props, label: label });
+    };
+}
 /** Keep the property key out of the value's visible label. */
 export function valueFieldTemplate(DefaultTemplate, flag) {
     return function ValueField(props) {
+        var _a;
+        const enabled = useCommonLayout();
         if (!(flag in props.schema))
-            return React.createElement(DefaultTemplate, { ...props });
+            return React.createElement(DefaultTemplate, { ...props, label: enabled && !props.schema.title && !((_a = props.uiSchema) === null || _a === void 0 ? void 0 : _a['ui:title']) ? propertyLabel(props.label) : props.label });
         return React.createElement(PropertyKey.Provider, { value: props.label },
             React.createElement(DefaultTemplate, { ...props, label: "\u5024" }));
     };

package/dist/rjsf.d.ts

@@ -1,3 +1,6 @@
+import type { EditorFeatureFlags } from './config/feature-flags.js';
+export type { EditorFeatureFlags } from './config/feature-flags.js';
+export type { EditorLayout, EditorLayoutItem } from './layout.js';
 import type { FixedInputMessageSource } from './fixed-input-view.js';
 export type { FixedInputViewMessages, FixedInputMessageSource } from './fixed-input-view.js';
 import type { FixedInputEditorOptions } from './fixed-input-editor.js';
@@ -9,11 +12,11 @@ export { createSourceEditor } from './source-editor.js';
 export type * from './source-types.js';
 export type * from './prepared-types.js';
 import type { RJSFSchema } from '@rjsf/utils';
-import type { SchemaBundle, SchemaValidationContext, SyncOwnerValidator } from './schema-types.js';
+import type { SchemaBundle, SchemaJsonObject, SchemaValidationContext, SyncOwnerValidator } from './schema-types.js';
 import type { SourceFormat } from './codec.js';
 import { EditorRegistry } from './registry.js';
 import { EDITOR_API_VERSION } from './types.js';
-import type { BlockSnapshot, EditorDefinition, JsonObject, JsonValue, ValidationIssue } from './types.js';
+import type { BlockSnapshot, EditorDefinition, JsonValue, ValidationIssue } from './types.js';
 export interface SchemaEditorOptions {
     readonly apiVersion: typeof EDITOR_API_VERSION;
     readonly extensionId: string;
@@ -24,7 +27,7 @@ export interface SchemaEditorOptions {
     /** Defaults to JSON for compatibility with existing registrations. */
     readonly format?: SourceFormat;
     readonly schema: RJSFSchema;
-    readonly uiSchema?: JsonObject;
+    readonly uiSchema?: SchemaJsonObject;
     /** Optional business validation, always run after schema validation when saving. */
     validateData?(data: JsonValue, snapshot: BlockSnapshot): readonly ValidationIssue[] | Promise<readonly ValidationIssue[]>;
 }
@@ -34,7 +37,7 @@ export interface SchemaBundleEditorOptions<C = null> extends Omit<SchemaEditorOp
     readonly validationContext: () => SchemaValidationContext<C>;
     readonly ownerValidate?: SyncOwnerValidator<C>;
 }
-export declare function createSchemaBundleEditor<C>(options: SchemaBundleEditorOptions<C>): EditorDefinition;
+export declare function createSchemaBundleEditor<C>(options: SchemaBundleEditorOptions<C>, features?: EditorFeatureFlags): EditorDefinition;
 export interface BlockEditorRegistrationAPI {
     readonly apiVersion: typeof EDITOR_API_VERSION;
     register(definition: EditorDefinition | SchemaEditorOptions): () => void;
@@ -60,21 +63,21 @@ export interface BlockEditorService {
     subscribe(listener: () => void): () => void;
 }
 /** A host owns the service's lifetime; this module never stores VM or workspace instances. */
-export declare function createBlockEditorService(options: {
+export declare function createBlockEditorService(options: EditorFeatureFlags & {
     readonly fixedInputs: true;
     readonly fixedInputMessages?: FixedInputMessageSource;
 }): BlockEditorService & {
     readonly api: FixedBlockEditorRegistrationAPI;
 };
-export declare function createBlockEditorService(options?: {
+export declare function createBlockEditorService(options?: EditorFeatureFlags & {
     readonly fixedInputs?: false;
     readonly fixedInputMessages?: FixedInputMessageSource;
 }): BlockEditorService & {
     readonly api: SourceBlockEditorRegistrationAPI;
 };
-export declare function createBlockEditorService(options: {
+export declare function createBlockEditorService(options: EditorFeatureFlags & {
     readonly fixedInputs?: boolean;
     readonly fixedInputMessages?: FixedInputMessageSource;
 }): BlockEditorService;
 /** Build an editor with JSON/YAML serialization, schema validation and the standard RJSF body. */
-export declare function createSchemaEditor(options: SchemaEditorOptions): EditorDefinition;
+export declare function createSchemaEditor(options: SchemaEditorOptions, features?: EditorFeatureFlags): EditorDefinition;