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

package/dist/source-view.js

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { LayoutHost, ObjectLayout, useCommonLayout } from './layout-view.js';
 import { createSourceCandidate, patchDecodedSource, readSourceDocument } from './source-editor.js';
 import { cloneJson } from './data.js';
+import { FormHelp, propertyLabel } from './form-presentation.js';
+import { jsonTypes, presentationInitial, presentationTypes, presentationCondition } from './schema-presentation.js';
+let nextFieldId = 0;
+const SourcePaths = React.createContext([]);
 const record = (value) => !!value && typeof value === 'object' && !Array.isArray(value);
 const pointer = (path, key) => `${path}/${key.replace(/~/g, '~0').replace(/\//g, '~1')}`;
 const typeOf = (v) => v === null ? 'null' : Array.isArray(v) ? 'array' : typeof v;
@@ -17,6 +22,8 @@ const initial = (type) => {
 };
 function mergeHints(left, right) {
     const result = { ...left, ...right };
+    if (Array.isArray(left.required) && Array.isArray(right.required))
+        result.required = [...new Set([...left.required, ...right.required])];
     for (const field of ['properties', 'patternProperties']) {
         if (!record(left[field]) && !record(right[field]))
             continue;
@@ -48,33 +55,40 @@ function propertyHint(hints, key) {
         }
     return matches.length > 1 ? { allOf: matches } : matches.length ? matches[0] : hints.additionalProperties;
 }
+function sourceReference(variant, ref) {
+    const hash = ref.indexOf('#');
+    const uri = hash < 0 ? ref : ref.slice(0, hash);
+    const resources = [variant.schemaBundle.root, ...variant.schemaBundle.resources];
+    const resource = uri ? resources.find(r => r.retrievalUri === uri || (record(r.document) && r.document.$id === uri)) : variant.schemaBundle.root;
+    let target = resource === null || resource === void 0 ? void 0 : resource.document;
+    const fragment = hash < 0 ? '' : decodeURIComponent(ref.slice(hash + 1));
+    if (fragment.startsWith('/'))
+        for (const part of fragment.slice(1).split('/')) {
+            target = record(target) || Array.isArray(target) ? target[part.replace(/~1/g, '/').replace(/~0/g, '~')] : undefined;
+        }
+    return !fragment || fragment.startsWith('/') ? target : undefined;
+}
 /** Presentation hints never replace canonical validation or remove schema constraints. */
-function resolveHints(variant, schema, data, seen = new Set()) {
+function resolveHints(variant, schema, data, seen = new Set(), conditional = false) {
     var _a;
     if (!record(schema) || seen.has(schema))
         return {};
     seen.add(schema);
     let result = { ...schema };
     if (typeof schema.$ref === 'string') {
-        const ref = schema.$ref;
-        const hash = ref.indexOf('#');
-        const uri = hash < 0 ? ref : ref.slice(0, hash);
-        const resources = [variant.schemaBundle.root, ...variant.schemaBundle.resources];
-        const resource = uri ? resources.find(r => r.retrievalUri === uri || (record(r.document) && r.document.$id === uri)) : variant.schemaBundle.root;
-        let target = resource === null || resource === void 0 ? void 0 : resource.document;
-        const fragment = hash < 0 ? '' : decodeURIComponent(ref.slice(hash + 1));
-        if (fragment.startsWith('/'))
-            for (const part of fragment.slice(1).split('/')) {
-                target = record(target) || Array.isArray(target) ? target[part.replace(/~1/g, '/').replace(/~0/g, '~')] : undefined;
-            }
-        if (!fragment || fragment.startsWith('/'))
-            result = mergeHints(resolveHints(variant, target, data, seen), result);
+        result = mergeHints(resolveHints(variant, sourceReference(variant, schema.$ref), data, seen, conditional), result);
     }
     if (Array.isArray(schema.allOf))
         for (const part of schema.allOf) {
-            const next = resolveHints(variant, part, data, seen);
+            const next = resolveHints(variant, part, data, seen, conditional);
             result = mergeHints(result, next);
         }
+    if (conditional && Object.hasOwn(schema, 'if')) {
+        const matches = presentationCondition(schema.if, data, ref => sourceReference(variant, ref));
+        const branch = matches === true ? schema.then : matches === false ? schema.else : undefined;
+        if (branch !== undefined)
+            result = mergeHints(result, resolveHints(variant, branch, data, seen, conditional));
+    }
     const alternatives = (_a = schema.oneOf) !== null && _a !== void 0 ? _a : schema.anyOf;
     if (Array.isArray(alternatives)) {
         const choices = alternatives.filter(part => {
@@ -90,13 +104,13 @@ function resolveHints(variant, schema, data, seen = new Set()) {
             return true;
         });
         if (choices.length === 1)
-            result = mergeHints(result, resolveHints(variant, choices[0], data, seen));
+            result = mergeHints(result, resolveHints(variant, choices[0], data, seen, conditional));
     }
     if (!Array.isArray(result.enum)) {
         if (Object.hasOwn(result, 'const'))
             result.enum = [result.const];
         else if (Array.isArray(alternatives)) {
-            const enums = alternatives.map(part => resolveHints(variant, part, data, new Set(seen)));
+            const enums = alternatives.map(part => resolveHints(variant, part, data, new Set(seen), conditional));
             if (enums.length && enums.every(part => Array.isArray(part.enum))) {
                 const values = enums.flatMap(part => part.enum);
                 result.enum = [...new Map(values.map(value => [JSON.stringify(value), value])).values()];
@@ -105,26 +119,38 @@ function resolveHints(variant, schema, data, seen = new Set()) {
     }
     return result;
 }
-function Tree({ value, path, schema, ui, variant, invalidNumbers, change: onChange }) {
+function Tree({ value, path, schema, ui, variant, invalidNumbers, required, change: onChange }) {
     var _a;
-    const hints = resolveHints(variant, schema, value);
+    const errors = React.useContext(SourcePaths);
+    const commonLayout = useCommonLayout();
+    const hints = resolveHints(variant, schema, value, new Set(), commonLayout);
     const uiHints = record(ui) ? ui : {};
     const [newKey, setNewKey] = React.useState('');
+    const [id] = React.useState(() => `source-field-${++nextFieldId}`);
     const change = (next, edit = { path }) => onChange(next, edit);
     const choices = Array.isArray(hints.enum) ? hints.enum : Array.isArray(uiHints['ui:enum']) ? uiHints['ui:enum'] : undefined;
-    const label = typeof hints.title === 'string' ? hints.title : path || '/';
-    const props = { 'aria-label': label };
+    const key = path.slice(path.lastIndexOf('/') + 1).replace(/~1/g, '/').replace(/~0/g, '~');
+    const label = commonLayout && typeof uiHints['ui:title'] === 'string' ? uiHints['ui:title'] : typeof hints.title === 'string' ? hints.title : commonLayout ? propertyLabel(key) : path || '/';
     const type = typeOf(value);
+    const allowed = presentationTypes(schema, ref => sourceReference(variant, ref));
+    const fixedType = allowed.size === 1 && allowed.has(type);
+    const readonly = commonLayout && (hints.readOnly === true || uiHints['ui:readonly'] === true || uiHints['ui:disabled'] === true);
+    const props = { 'aria-label': label, ...(commonLayout ? { id, disabled: readonly, 'aria-describedby': typeof hints.description === 'string' && hints.description.trim() ? `${id}-help` : undefined } : {}) };
+    const typeControl = !commonLayout || !fixedType ? React.createElement("select", { "data-source-type-control": "", "aria-label": `Type ${path || '/'}`, disabled: readonly, value: type, onChange: e => change(initial(e.target.value)) }, (commonLayout && allowed.size ? [...new Set([type, ...allowed])] : jsonTypes).map(t => React.createElement("option", { key: t }, t))) : null;
+    const seed = (hint) => cloneJson(presentationInitial(hint));
     let field;
     if (choices) {
         const serialized = JSON.stringify(value);
         const options = choices.map(item => JSON.stringify(item));
         if (!options.includes(serialized))
             options.unshift(serialized);
-        field = React.createElement("select", { ...props, value: serialized, onChange: e => change(JSON.parse(e.target.value)) }, options.map(item => React.createElement("option", { key: item, value: item }, item)));
+        field = commonLayout && options.length === 1 ? React.createElement("input", { ...props, readOnly: true, value: typeof value === 'string' ? value : serialized })
+            : React.createElement("select", { ...props, value: serialized, onChange: e => change(JSON.parse(e.target.value)) }, options.map(item => React.createElement("option", { key: item, value: item }, commonLayout && typeof JSON.parse(item) === 'string' ? JSON.parse(item) : item)));
     }
     else if (typeof value === 'string') {
-        field = React.createElement("textarea", { ...props, value: value, onChange: e => change(e.target.value) });
+        field = commonLayout && uiHints['ui:widget'] !== 'textarea' && !value.includes('\n')
+            ? React.createElement("input", { ...props, type: "text", value: value, onChange: e => change(e.target.value) })
+            : React.createElement("textarea", { ...props, value: value, onChange: e => change(e.target.value) });
     }
     else if (typeof value === 'number') {
         field = React.createElement("input", { ...props, type: "text", inputMode: "decimal", value: (_a = invalidNumbers[path]) !== null && _a !== void 0 ? _a : String(value), onChange: e => {
@@ -137,84 +163,137 @@ function Tree({ value, path, schema, ui, variant, invalidNumbers, change: onChan
         field = React.createElement("input", { ...props, type: "checkbox", checked: value, onChange: e => change(e.target.checked) });
     }
     else if (Array.isArray(value)) {
+        const itemHint = (index) => { var _a, _b; return Array.isArray(hints.prefixItems) ? (_a = hints.prefixItems[index]) !== null && _a !== void 0 ? _a : hints.items : Array.isArray(hints.items) ? (_b = hints.items[index]) !== null && _b !== void 0 ? _b : hints.additionalItems : hints.items; };
+        const tuple = Array.isArray(hints.prefixItems) || Array.isArray(hints.items);
+        const canRemove = !commonLayout || value.length > (typeof hints.minItems === 'number' ? hints.minItems : 0);
+        const canAdd = !commonLayout || (itemHint(value.length) !== false && (typeof hints.maxItems !== 'number' || value.length < hints.maxItems));
         field = React.createElement("div", null,
-            value.map((child, index) => {
-                var _a;
-                return React.createElement("div", { key: index },
-                    React.createElement(Tree, { invalidNumbers: invalidNumbers, value: child, path: pointer(path, String(index)), variant: variant, schema: Array.isArray(hints.prefixItems) ? (_a = hints.prefixItems[index]) !== null && _a !== void 0 ? _a : hints.items : Array.isArray(hints.items) ? hints.items[index] : hints.items, ui: uiHints.items, change: (next, edit) => { const copy = [...value]; copy[index] = next; change(copy, edit); } }),
-                    React.createElement("button", { type: "button", "aria-label": `Remove ${pointer(path, String(index))}`, onClick: () => change(value.filter((_, i) => i !== index), { path, removeIndex: index }) }, "Remove"),
-                    React.createElement("button", { type: "button", disabled: index === 0, "aria-label": `Move up ${pointer(path, String(index))}`, onClick: () => {
-                            const copy = [...value];
-                            [copy[index - 1], copy[index]] = [copy[index], copy[index - 1]];
-                            change(copy, { path, swap: [index - 1, index] });
-                        } }, "\u2191"));
-            }),
-            React.createElement("button", { type: "button", "aria-label": `Add item ${path || '/'}`, onClick: () => change([...value, null], { path: pointer(path, String(value.length)) }) }, "Add item"));
+            commonLayout && value.length === 0 && React.createElement("p", { className: "editor-form-hint" }, "\u9805\u76EE\u306A\u3057"),
+            value.map((child, index) => React.createElement("div", { key: index, className: commonLayout ? 'editor-form-array-item' : undefined },
+                React.createElement(Tree, { invalidNumbers: invalidNumbers, value: child, path: pointer(path, String(index)), variant: variant, schema: itemHint(index), ui: uiHints.items, change: (next, edit) => { const copy = [...value]; copy[index] = next; change(copy, edit); } }),
+                canRemove && React.createElement("button", { type: "button", "aria-label": `Remove ${pointer(path, String(index))}`, onClick: () => change(value.filter((_, i) => i !== index), { path, removeIndex: index }) }, "Remove"),
+                (!commonLayout || !tuple && value.length > 1) && React.createElement("button", { type: "button", disabled: index === 0, "aria-label": `Move up ${pointer(path, String(index))}`, onClick: () => {
+                        const copy = [...value];
+                        [copy[index - 1], copy[index]] = [copy[index], copy[index - 1]];
+                        change(copy, { path, swap: [index - 1, index] });
+                    } }, "\u2191"))),
+            canAdd && React.createElement("button", { type: "button", "aria-label": `Add item ${path || '/'}`, onClick: () => change([...value, commonLayout ? seed(resolveHints(variant, itemHint(value.length), null)) : null], { path: pointer(path, String(value.length)) }) }, "Add item"));
     }
     else if (value !== null && typeof value === 'object') {
         const properties = record(hints.properties) ? hints.properties : {};
-        field = React.createElement("div", null,
-            Object.entries(value).map(([key, child]) => React.createElement("div", { key: key },
-                React.createElement(Tree, { invalidNumbers: invalidNumbers, value: child, path: pointer(path, key), variant: variant, schema: propertyHint(hints, key), ui: uiHints[key], change: (next, edit) => {
+        const requiredKeys = new Set(Array.isArray(hints.required) ? hints.required : []);
+        const optional = Object.keys(properties).filter(name => !requiredKeys.has(name));
+        const missing = Object.keys(properties).filter(name => !Object.hasOwn(value, name));
+        const remove = (name) => { const copy = cloneJson(value); delete copy[name]; change(copy, { path: pointer(path, name) }); };
+        const add = (name) => {
+            const hint = resolveHints(variant, propertyHint(hints, name), null);
+            const copy = cloneJson(value);
+            Object.defineProperty(copy, name, { value: seed(hint), enumerable: true, writable: true, configurable: true });
+            change(copy, { path: pointer(path, name) });
+            setNewKey('');
+        };
+        const fields = Object.entries(value).map(([name, child]) => ({ name,
+            errors: errors.filter(error => error === pointer(path, name) || error.startsWith(pointer(path, name) + '/')).length,
+            content: React.createElement("div", { key: name },
+                React.createElement(Tree, { invalidNumbers: invalidNumbers, value: child, path: pointer(path, name), variant: variant, schema: propertyHint(hints, name), required: requiredKeys.has(name), ui: uiHints[name], change: (next, edit) => {
                         const copy = cloneJson(value);
-                        Object.defineProperty(copy, key, { value: next, enumerable: true, writable: true, configurable: true });
+                        Object.defineProperty(copy, name, { value: next, enumerable: true, writable: true, configurable: true });
                         change(copy, edit);
                     } }),
-                React.createElement("button", { type: "button", "aria-label": `Remove ${pointer(path, key)}`, onClick: () => {
+                (!commonLayout || !Object.hasOwn(properties, name) && !requiredKeys.has(name)) && React.createElement("button", { type: "button", "aria-label": `Remove ${pointer(path, name)}`, onClick: () => remove(name) }, "Remove")) }));
+        const dynamic = hints.additionalProperties !== false || record(hints.patternProperties);
+        field = React.createElement("div", null,
+            React.createElement(ObjectLayout, { ui: uiHints, knownFields: [...new Set([...Object.keys(properties), ...Object.keys(value)])], fields: fields, fallback: fields.map(item => item.content) }),
+            commonLayout ? React.createElement(React.Fragment, null,
+                (missing.length > 0 || optional.some(name => Object.hasOwn(value, name))) && React.createElement("details", { className: "editor-form-tools" },
+                    React.createElement("summary", null, "\u9805\u76EE\u3092\u7BA1\u7406"),
+                    missing.map(name => React.createElement("button", { type: "button", key: name, onClick: () => add(name) },
+                        propertyLabel(name),
+                        "\u3092\u8FFD\u52A0")),
+                    optional.filter(name => Object.hasOwn(value, name)).map(name => React.createElement("label", { key: name },
+                        propertyLabel(name),
+                        React.createElement("button", { type: "button", "aria-label": `Remove ${pointer(path, name)}`, onClick: () => remove(name) }, "\u5024\u3092\u89E3\u9664")))),
+                dynamic && React.createElement("details", { className: "editor-form-tools" },
+                    React.createElement("summary", null, "\u8FFD\u52A0\u306E\u30D7\u30ED\u30D1\u30C6\u30A3"),
+                    React.createElement("label", { htmlFor: `${id}-key` }, "\u9805\u76EE\u540D"),
+                    React.createElement("input", { id: `${id}-key`, "aria-label": `New property ${path || '/'}`, value: newKey, onChange: e => setNewKey(e.target.value) }),
+                    React.createElement("button", { type: "button", disabled: !newKey || Object.hasOwn(value, newKey) || propertyHint(hints, newKey) === false, onClick: () => add(newKey) }, "Add property"))) : React.createElement(React.Fragment, null,
+                React.createElement("label", null,
+                    "Property ",
+                    React.createElement("input", { "aria-label": `New property ${path || '/'}`, value: newKey, onChange: e => setNewKey(e.target.value) })),
+                React.createElement("select", { "aria-label": `Known property ${path || '/'}`, value: "", onChange: e => setNewKey(e.target.value) },
+                    React.createElement("option", { value: "" }, "Choose property"),
+                    missing.map(name => React.createElement("option", { key: name }, name))),
+                React.createElement("button", { type: "button", disabled: !newKey || Object.hasOwn(value, newKey), onClick: () => {
                         const copy = cloneJson(value);
-                        delete copy[key];
-                        change(copy, { path: pointer(path, key) });
-                    } }, "Remove"))),
-            React.createElement("label", null,
-                "Property ",
-                React.createElement("input", { "aria-label": `New property ${path || '/'}`, value: newKey, onChange: e => setNewKey(e.target.value) })),
-            React.createElement("select", { "aria-label": `Known property ${path || '/'}`, value: "", onChange: e => setNewKey(e.target.value) },
-                React.createElement("option", { value: "" }, "Choose property"),
-                Object.keys(properties).filter(key => !Object.hasOwn(value, key)).map(key => React.createElement("option", { key: key }, key))),
-            React.createElement("button", { type: "button", disabled: !newKey || Object.hasOwn(value, newKey), onClick: () => {
-                    const copy = cloneJson(value);
-                    Object.defineProperty(copy, newKey, { value: null, enumerable: true, writable: true, configurable: true });
-                    change(copy, { path: pointer(path, newKey) });
-                    setNewKey('');
-                } }, "Add property"));
+                        Object.defineProperty(copy, newKey, { value: null, enumerable: true, writable: true, configurable: true });
+                        change(copy, { path: pointer(path, newKey) });
+                        setNewKey('');
+                    } }, "Add property")));
     }
     else
         field = React.createElement("span", null, "null");
-    return React.createElement("fieldset", { "data-source-path": path },
+    const containerProps = { 'data-source-path': path, 'data-source-error': commonLayout && errors.includes(path) };
+    if (commonLayout && !Array.isArray(value) && !record(value))
+        return React.createElement("div", { ...containerProps, className: "editor-form-field" },
+            typeof value === 'boolean' && !choices ? React.createElement("label", { className: "editor-form-toggle", htmlFor: id },
+                field,
+                React.createElement("span", null, label)) : React.createElement(React.Fragment, null,
+                React.createElement("label", { htmlFor: id },
+                    label,
+                    required && React.createElement("span", { className: "required" }, " *")),
+                field),
+            typeControl,
+            React.createElement(FormHelp, { description: hints.description, id: `${id}-help` }),
+            invalidNumbers[path] !== undefined && React.createElement("p", { className: "editor-form-invalid", role: "alert" }, "\u6709\u52B9\u306A\u6570\u5024\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002"));
+    return React.createElement("fieldset", { ...containerProps, className: commonLayout ? 'editor-form-section' : undefined, disabled: readonly },
         React.createElement("legend", null, label),
-        React.createElement("select", { "aria-label": `Type ${path || '/'}`, value: type, onChange: e => change(initial(e.target.value)) }, ['object', 'array', 'string', 'number', 'boolean', 'null'].map(t => React.createElement("option", { key: t }, t))),
+        commonLayout && React.createElement(FormHelp, { description: hints.description }),
+        typeControl,
         field);
 }
-function liveIssues(draft, bindings) {
+function liveIssues(draft, bindings, commonLayout = false) {
+    var _a;
     const issues = [];
     const sources = draft.sources;
     for (const binding of bindings) {
         const entry = sources[binding.argument];
         try {
-            if (entry.invalidForm === true)
-                throw new TypeError();
+            if (entry.invalidForm === true) {
+                if (!commonLayout || !record(entry.invalidNumbers) || !Object.keys(entry.invalidNumbers).length)
+                    throw new TypeError();
+                for (const path of Object.keys(((_a = entry.invalidNumbers) !== null && _a !== void 0 ? _a : {})))
+                    issues.push({ message: 'Enter a valid JSON number.', path: pointer('', binding.argument) + path });
+            }
             const doc = record(entry.creating)
                 ? { ...entry.creating, data: entry.data }
                 : readSourceDocument(binding, entry.source);
             const validator = binding.validators.get(JSON.stringify([doc.format, doc.variantId]));
-            if (validator && validator.validate((entry.mode === 'form' ? entry.data : doc.data)).kind !== 'valid') {
-                issues.push({ message: 'Value does not satisfy the schema.', path: `/${binding.argument}` });
+            if (validator) {
+                const result = validator.validate((entry.mode === 'form' ? entry.data : doc.data));
+                if (result.kind !== 'valid') {
+                    if (commonLayout)
+                        for (const diagnostic of result.diagnostics)
+                            issues.push({ message: 'Value does not satisfy the schema.', path: pointer('', binding.argument) + ('dataPath' in diagnostic ? diagnostic.dataPath : '') });
+                    else
+                        issues.push({ message: 'Value does not satisfy the schema.', path: `/${binding.argument}` });
+                }
             }
         }
-        catch (_a) {
+        catch (_b) {
             issues.push({ message: 'Repair the invalid source or form value.', path: `/${binding.argument}` });
         }
     }
     return issues;
 }
-function SourceView({ context, bindings }) {
+function SourceView({ context, bindings, commonLayout }) {
     const [, redraw] = React.useState(0);
     const [creating, selectCreateVariant] = React.useState({});
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         const stop = context.subscribe(() => redraw(n => n + 1));
-        context.setValidationIssues(liveIssues(context.getDraft(), bindings));
+        context.setValidationIssues(liveIssues(context.getDraft(), bindings, commonLayout));
         return stop;
-    }, [context, bindings]);
+    }, [context, bindings, commonLayout]);
     const state = context.getState();
     if (state.status !== 'editing' && state.status !== 'saving')
         return React.createElement(React.Fragment, null);
@@ -226,10 +305,10 @@ function SourceView({ context, bindings }) {
         const nextSources = next.sources;
         Object.defineProperty(nextSources, argument, { value: entry, enumerable: true, configurable: true, writable: true });
         context.setDraft(next);
-        context.setValidationIssues(liveIssues(next, bindings));
+        context.setValidationIssues(liveIssues(next, bindings, commonLayout));
     };
     return React.createElement("div", { className: "block-editor-source-forms" }, bindings.map(binding => {
-        var _a, _b;
+        var _a, _b, _c;
         const entry = sources[binding.argument];
         const selectedCreation = Object.hasOwn(creating, binding.argument) ? creating[binding.argument] : '';
         let document;
@@ -238,29 +317,38 @@ function SourceView({ context, bindings }) {
             document = readSourceDocument(binding, entry.source);
             variant = binding.presentationVariants.find(v => v.format === document.format && v.variantId === document.variantId);
         }
-        catch ( /* The Source textarea remains available for repair. */_c) { /* The Source textarea remains available for repair. */ }
+        catch ( /* The Source textarea remains available for repair. */_d) { /* The Source textarea remains available for repair. */ }
         if (record(entry.creating)) {
             const creation = entry.creating;
             variant = binding.presentationVariants.find(v => v.format === creation.format && v.variantId === creation.variantId);
         }
-        return React.createElement("fieldset", { key: binding.argument, disabled: disabled },
-            React.createElement("legend", null, (_a = binding.label) !== null && _a !== void 0 ? _a : binding.argument),
-            React.createElement("button", { type: "button", "aria-pressed": entry.mode === 'source', onClick: () => {
-                    try {
-                        if (entry.invalidForm === true)
-                            throw new TypeError();
-                        const source = record(entry.creating)
-                            ? createSourceCandidate(entry.creating.format, entry.data)
-                            : entry.mode === 'form' && document && Object.hasOwn(entry, 'data')
-                                ? patchDecodedSource(document, entry.data, source => readSourceDocument(binding, source)) : entry.source;
-                        const next = { ...entry, mode: 'source', source, invalidForm: false, invalidNumbers: {} };
-                        delete next.creating;
-                        update(binding.argument, next);
-                    }
-                    catch (_a) {
-                        context.setValidationIssues([{ message: 'This edit cannot preserve the source. Repair the Source explicitly.' }]);
-                    }
-                } }, "Source"),
+        const argumentPath = pointer('', binding.argument);
+        const errorPaths = [...new Set(state.issues.flatMap(issue => {
+                var _a;
+                return ((_a = issue.path) === null || _a === void 0 ? void 0 : _a.startsWith(argumentPath + '/'))
+                    ? [issue.path.slice(argumentPath.length)] : [];
+            }).concat(Object.keys(((_a = entry.invalidNumbers) !== null && _a !== void 0 ? _a : {}))))];
+        const sourceButton = React.createElement("button", { type: "button", "aria-pressed": entry.mode === 'source', onClick: () => {
+                try {
+                    if (entry.invalidForm === true)
+                        throw new TypeError();
+                    const source = record(entry.creating)
+                        ? createSourceCandidate(entry.creating.format, entry.data)
+                        : entry.mode === 'form' && document && Object.hasOwn(entry, 'data')
+                            ? patchDecodedSource(document, entry.data, source => readSourceDocument(binding, source)) : entry.source;
+                    const next = { ...entry, mode: 'source', source, invalidForm: false, invalidNumbers: {} };
+                    delete next.creating;
+                    update(binding.argument, next);
+                }
+                catch (_a) {
+                    context.setValidationIssues([{ message: 'This edit cannot preserve the source. Repair the Source explicitly.' }]);
+                }
+            } }, "Source");
+        const formButton = React.createElement("button", { type: "button", disabled: !variant, "aria-pressed": entry.mode === 'form', onClick: () => {
+                if (document || entry.creating)
+                    update(binding.argument, { ...entry, mode: 'form', data: Object.hasOwn(entry, 'data') ? entry.data : document.data });
+            } }, "Form");
+        const creationTools = React.createElement(React.Fragment, null,
             React.createElement("select", { "aria-label": `${binding.argument} New format and variant`, value: selectedCreation, onChange: e => selectCreateVariant({ ...creating, [binding.argument]: e.target.value }) },
                 React.createElement("option", { value: "" }, "Choose new format and variant"),
                 binding.presentationVariants.map(v => React.createElement("option", { key: JSON.stringify([v.format, v.variantId]), value: JSON.stringify([v.format, v.variantId]) },
@@ -273,46 +361,58 @@ function SourceView({ context, bindings }) {
                     const root = chosen.schemaBundle.root.document;
                     const type = record(root) && typeof root.type === 'string' ? root.type : 'null';
                     update(binding.argument, { mode: 'form', source: entry.source, sourceEdited: true, creating: { format, variantId }, data: initial(type) });
-                } }, "Create document (replace source)"),
-            React.createElement("button", { type: "button", disabled: !variant, "aria-pressed": entry.mode === 'form', onClick: () => {
-                    if (document || entry.creating)
-                        update(binding.argument, { ...entry, mode: 'form', data: Object.hasOwn(entry, 'data') ? entry.data : document.data });
-                } }, "Form"),
-            entry.mode === 'form' && React.createElement("button", { type: "button", onClick: () => { var _a; return update(binding.argument, { mode: 'source', source: entry.source, sourceEdited: (_a = entry.sourceEdited) !== null && _a !== void 0 ? _a : false }); } }, "Discard form edits"),
+                } }, "Create document (replace source)"));
+        const discard = entry.mode === 'form' && React.createElement("button", { type: "button", onClick: () => { var _a; return update(binding.argument, { mode: 'source', source: entry.source, sourceEdited: (_a = entry.sourceEdited) !== null && _a !== void 0 ? _a : false }); } }, "Discard form edits");
+        return React.createElement("fieldset", { key: binding.argument, disabled: disabled, className: commonLayout ? 'editor-form-binding' : undefined },
+            (!commonLayout || binding.label || bindings.length > 1) && React.createElement("legend", null, (_b = binding.label) !== null && _b !== void 0 ? _b : binding.argument),
+            commonLayout ? React.createElement("div", { className: "editor-form-toolbar" },
+                React.createElement("div", { className: "editor-form-modes" },
+                    sourceButton,
+                    formButton),
+                React.createElement("details", { className: "editor-form-tools" },
+                    React.createElement("summary", null, "\u6587\u66F8\u306E\u64CD\u4F5C"),
+                    creationTools,
+                    discard)) : React.createElement(React.Fragment, null,
+                sourceButton,
+                creationTools,
+                formButton,
+                discard),
             entry.mode === 'form' && variant && Object.hasOwn(entry, 'data')
-                ? React.createElement(Tree, { invalidNumbers: ((_b = entry.invalidNumbers) !== null && _b !== void 0 ? _b : {}), value: entry.data, path: "", schema: variant.schemaBundle.root.document, ui: variant.uiSchema, variant: variant, change: (data, edit = { path: '' }) => {
-                        var _a;
-                        const pending = ((_a = entry.invalidNumbers) !== null && _a !== void 0 ? _a : {});
-                        const invalidNumbers = {};
-                        const prefix = `${edit.path}/`;
-                        for (const [path, text] of Object.entries(pending)) {
-                            let target = path;
-                            if (edit.removeIndex !== undefined || edit.swap) {
-                                if (path.startsWith(prefix)) {
-                                    const [head, ...tail] = path.slice(prefix.length).split('/');
-                                    let index = Number(head);
-                                    if (index === edit.removeIndex)
-                                        continue;
-                                    if (edit.removeIndex !== undefined && index > edit.removeIndex)
-                                        index--;
-                                    if (edit.swap)
-                                        index = index === edit.swap[0] ? edit.swap[1] : index === edit.swap[1] ? edit.swap[0] : index;
-                                    target = `${prefix}${index}${tail.length ? '/' + tail.join('/') : ''}`;
+                ? React.createElement(SourcePaths.Provider, { value: errorPaths },
+                    React.createElement(Tree, { invalidNumbers: ((_c = entry.invalidNumbers) !== null && _c !== void 0 ? _c : {}), value: entry.data, path: "", schema: variant.schemaBundle.root.document, ui: variant.uiSchema, variant: variant, change: (data, edit = { path: '' }) => {
+                            var _a;
+                            const pending = ((_a = entry.invalidNumbers) !== null && _a !== void 0 ? _a : {});
+                            const invalidNumbers = {};
+                            const prefix = `${edit.path}/`;
+                            for (const [path, text] of Object.entries(pending)) {
+                                let target = path;
+                                if (edit.removeIndex !== undefined || edit.swap) {
+                                    if (path.startsWith(prefix)) {
+                                        const [head, ...tail] = path.slice(prefix.length).split('/');
+                                        let index = Number(head);
+                                        if (index === edit.removeIndex)
+                                            continue;
+                                        if (edit.removeIndex !== undefined && index > edit.removeIndex)
+                                            index--;
+                                        if (edit.swap)
+                                            index = index === edit.swap[0] ? edit.swap[1] : index === edit.swap[1] ? edit.swap[0] : index;
+                                        target = `${prefix}${index}${tail.length ? '/' + tail.join('/') : ''}`;
+                                    }
                                 }
+                                else if (path === edit.path || path.startsWith(prefix))
+                                    continue;
+                                Object.defineProperty(invalidNumbers, target, { value: text, enumerable: true });
                             }
-                            else if (path === edit.path || path.startsWith(prefix))
-                                continue;
-                            Object.defineProperty(invalidNumbers, target, { value: text, enumerable: true });
-                        }
-                        if (edit.invalidText !== undefined)
-                            Object.defineProperty(invalidNumbers, edit.path, { value: edit.invalidText, enumerable: true });
-                        update(binding.argument, { ...entry, data, invalidNumbers, invalidForm: Object.keys(invalidNumbers).length > 0 });
-                    } })
+                            if (edit.invalidText !== undefined)
+                                Object.defineProperty(invalidNumbers, edit.path, { value: edit.invalidText, enumerable: true });
+                            update(binding.argument, { ...entry, data, invalidNumbers, invalidForm: Object.keys(invalidNumbers).length > 0 });
+                        } }))
                 : React.createElement("textarea", { "aria-label": `${binding.argument} Source`, value: entry.source, onChange: e => update(binding.argument, { mode: 'source', source: e.target.value, sourceEdited: true }) }),
             entry.invalidForm === true && React.createElement("p", { role: "alert" }, "Enter a valid JSON number."));
     }));
 }
-export function mountSourceView(container, context, bindings) {
-    ReactDOM.render(React.createElement(SourceView, { context: context, bindings: bindings }), container);
+export function mountSourceView(container, context, bindings, commonLayout = false) {
+    ReactDOM.render(React.createElement(LayoutHost, { enabled: commonLayout, context: context },
+        React.createElement(SourceView, { context: context, bindings: bindings, commonLayout: commonLayout })), container);
     return () => { ReactDOM.unmountComponentAtNode(container); };
 }

package/dist/turbowarp/appearance.d.ts

@@ -1,5 +1,5 @@
 export default readBlockEditorAppearance;
-declare function readBlockEditorAppearance(block: any, ScratchBlocks: any): {
+declare function readBlockEditorAppearance(block: any, ScratchBlocks: any, editableArguments: any): {
     name: any;
     colour: string;
     tint: string;

package/dist/turbowarp/appearance.js

@@ -1,14 +1,32 @@
 // Presentation metadata stays outside snapshots, drafts and saved project data.
-const readBlockEditorAppearance = (block, ScratchBlocks) => {
+const readBlockEditorAppearance = (block, ScratchBlocks, editableArguments) => {
     const appearance = {};
     if (!block)
         return appearance;
     try {
-        // Use the block's own labels, without reading JSON or other values from connected inputs.
+        // Registered editor inputs contain the document; other literal inputs identify the block.
         const name = block.inputList.filter(input => input.type !== ScratchBlocks.NEXT_STATEMENT)
-            .map(input => input.fieldRow.filter(field => !(field instanceof ScratchBlocks.FieldImage))
-            .map(field => field.getText())
-            .join(' '))
+            .map(input => {
+            const label = input.fieldRow.filter(field => !(field instanceof ScratchBlocks.FieldImage))
+                .map(field => field.getText()).join(' ');
+            if (!editableArguments || editableArguments.includes(input.name) ||
+                input.type !== ScratchBlocks.INPUT_VALUE)
+                return label;
+            try {
+                const child = input.connection && input.connection.targetBlock();
+                // Read only literal shadows, never evaluate or traverse reporter expressions.
+                if (!child || !child.isShadow() || child.inputList.some(part => part.connection))
+                    return label;
+                const value = child.inputList.flatMap(part => part.fieldRow)
+                    .filter(field => !(field instanceof ScratchBlocks.FieldImage))
+                    .map(field => field.getText()).join(' ').replace(/\s+/g, ' ').trim();
+                return value ? `${label} (${value})` : label;
+            }
+            catch (error) {
+                // An unavailable identifier must not discard the block's own labels.
+                return label;
+            }
+        })
             .join(' ')
             .replace(/\s+/g, ' ')
             .trim();

package/dist/turbowarp/bridge.js

@@ -80,6 +80,7 @@ const createBlockEditorBridge = ({ ScratchBlocks, workspace, vm, service, label,
         return snapshot && Object.values(snapshot.arguments).every(slot => slot.kind === 'literal');
     };
     const open = block => {
+        var _a, _b;
         if (activeSession && ['editing', 'saving'].includes(activeSession.getState().status))
             return;
         const reference = { targetId: vm.editingTarget.id, blockId: block.id };
@@ -95,13 +96,13 @@ 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);
+                const rootAppearance = readBlockEditorAppearance(block, ScratchBlocks, (_a = service.registry.resolve(block.type)) === null || _a === void 0 ? void 0 : _a.editableArguments);
                 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);
-                        const appearance = readBlockEditorAppearance(source, ScratchBlocks);
+                        const appearance = readBlockEditorAppearance(source, ScratchBlocks, (_b = service.registry.resolve(node.opcode)) === null || _b === void 0 ? void 0 : _b.editableArguments);
                         appearances[node.reference.blockId] = appearance;
                         labels[node.reference.blockId] = appearance.name || node.opcode;
                     }

package/dist/turbowarp.d.ts

@@ -60,7 +60,8 @@ export declare function bindBlockEditorIcon(options: {
     readonly canOpen: () => boolean;
     readonly onOpen: () => void;
 }): () => void;
-export declare function readBlockEditorAppearance(block: object | null, ScratchBlocks: object): TurboWarpNodeAppearance;
+/** Supply editor arguments to include other literal inputs as parenthesized identifiers. */
+export declare function readBlockEditorAppearance(block: object | null, ScratchBlocks: object, editableArguments?: readonly string[]): TurboWarpNodeAppearance;
 export declare function createBlockEditorErrorSession(reference: BlockReference, error: unknown): BlockEditorFailureSession;
 export declare function openBlockEditorSession(options: {
     readonly registry: EditorRegistry;

package/dist/turbowarp.js

@@ -29,8 +29,9 @@ export function createTurboWarpBlockEditorHost(options) {
 export function bindBlockEditorIcon(options) {
     return bindIcon(options);
 }
-export function readBlockEditorAppearance(block, ScratchBlocks) {
-    return readAppearance(block, ScratchBlocks);
+/** Supply editor arguments to include other literal inputs as parenthesized identifiers. */
+export function readBlockEditorAppearance(block, ScratchBlocks, editableArguments) {
+    return readAppearance(block, ScratchBlocks, editableArguments);
 }
 export function createBlockEditorErrorSession(reference, error) {
     return createErrorSession(reference, error);