@nuxodin/item 0.6.4

package/tools/schema/db/sqlite/to-db.js

@@ -0,0 +1,127 @@
+// sqlite/to-db.js
+// Note: SQLite cannot modify or drop columns — changes require table recreation
+import { schemaFromDb, singleColumnIndexes } from './from-db.js'
+import { toFieldDef }   from './to-field.js'
+import { quoteId, schemaType } from '../shared/sql.js'
+import { schemaDiff }   from '../../diff.js'
+
+function tableFields(tableSchema) {
+    return Object.entries(tableSchema.additionalProperties?.properties ?? {})
+}
+
+const indexName = (table, name) => `idx_${table}_${name}`
+
+// SQLite: a single integer primary key must be declared inline as
+// `INTEGER PRIMARY KEY [AUTOINCREMENT]`; AUTOINCREMENT is invalid elsewhere.
+// Composite or non-integer keys use a table-level PRIMARY KEY constraint.
+function createBody(fields, primaries) {
+    const pkProp = fields.find(([n]) => n === primaries[0])?.[1]
+    const soloInt = primaries.length === 1 && pkProp &&
+        ['integer', 'boolean'].includes(schemaType(pkProp))
+    const cols = fields.map(([n, f]) => {
+        const isPk = soloInt && n === primaries[0]
+        // Only `INTEGER PRIMARY KEY` is the rowid alias, and AUTOINCREMENT is legal nowhere else —
+        // so a boolean key keeps the integer spelling, which SQLite would otherwise reject.
+        let def = toFieldDef(n, isPk ? { ...f, type: 'integer' } : f)
+        if (isPk) def += f['x-autoincrement'] ? ' PRIMARY KEY AUTOINCREMENT' : ' PRIMARY KEY'
+        return '  ' + def
+    }).join(',\n')
+    const pk = (!soloInt && primaries.length) ? `,\n  PRIMARY KEY (${primaries.map(quoteId).join(', ')})` : ''
+    return `${cols}${pk}`
+}
+
+function indexKind(table, name, prop) {
+    if (prop['x-index'] === 'unique') return 'UNIQUE INDEX'
+    if (prop['x-index'] === true) return 'INDEX'
+    if (prop['x-index'] === 'fulltext')
+        console.warn(`Skip FULLTEXT INDEX ${table}.${name}: SQLite fulltext requires a virtual FTS table`)
+    return null
+}
+
+function createIndex(table, name, kind) {
+    return `CREATE ${kind} ${quoteId(indexName(table, name))} ON ${quoteId(table)} (${quoteId(name)});`
+}
+
+function indexStatements(table, fields, primaries, current = [], { patch = false } = {}) {
+    const stmts = [], wanted = new Set()
+    for (const [name, prop] of fields) {
+        if (primaries.includes(name)) continue
+        const kind = indexKind(table, name, prop)
+        if (!kind) continue
+        const idx = indexName(table, name), unique = kind === 'UNIQUE INDEX'
+        const curr = current.find(i => i.name === idx) ?? current.find(i => i.column === name && i.unique === unique)
+        wanted.add(idx)
+        if (curr && curr.column === name && curr.unique === unique) continue
+        if (curr?.name === idx) stmts.push(`DROP INDEX ${quoteId(curr.name)};`)
+        stmts.push(createIndex(table, name, kind))
+    }
+    if (!patch) {
+        for (const curr of current) {
+            if (curr.name.startsWith(`idx_${table}_`) && !wanted.has(curr.name))
+                stmts.push(`DROP INDEX ${quoteId(curr.name)};`)
+        }
+    }
+    return stmts
+}
+
+export async function schemaToDb(schema, query, { force = false, patch = false } = {}) {
+    const current = await schemaFromDb(query)
+    const diffs   = schemaDiff(schema, current)
+
+    if (!patch) {
+        const destructive = diffs.filter(d => d.destructive === true)
+        if (destructive.length && !force) {
+            const msgs = destructive.map(d => `  ${d.path.join('.')} — ${d.msg}`).join('\n')
+            throw new Error(`Destructive schema changes detected (use force to apply):\n${msgs}`)
+        }
+    }
+
+    const stmts      = []
+    const nextTables = Object.keys(schema.properties ?? {})
+    const currTables = Object.keys(current.properties ?? {})
+
+    for (const table of nextTables) {
+        const fields    = tableFields(schema.properties[table])
+        const primaries = fields.filter(([, f]) => f['x-index'] === 'primary').map(([n]) => n)
+
+        if (!currTables.includes(table)) {
+            stmts.push(`CREATE TABLE ${quoteId(table)} (\n${createBody(fields, primaries)}\n);`)
+            stmts.push(...indexStatements(table, fields, primaries))
+        } else {
+            const currFields = Object.keys(current.properties[table]?.additionalProperties?.properties ?? {})
+            const hasChanges = diffs.some(d => d.path[0] === 'properties' && d.path[1] === table)
+            const hasDrops   = !patch && currFields.some(n => !fields.find(([fn]) => fn === n))
+
+            if (hasChanges && (hasDrops || !patch)) {
+                const tmp      = `${table}_migration_tmp`
+                const keep     = fields.map(([n]) => n).filter(n => currFields.includes(n))
+                const colsList = keep.map(quoteId).join(', ')
+
+                stmts.push(`CREATE TABLE ${quoteId(tmp)} (\n${createBody(fields, primaries)}\n);`)
+                if (keep.length) stmts.push(`INSERT INTO ${quoteId(tmp)} (${colsList}) SELECT ${colsList} FROM ${quoteId(table)};`)
+                stmts.push(`DROP TABLE ${quoteId(table)};`)
+                stmts.push(`ALTER TABLE ${quoteId(tmp)} RENAME TO ${quoteId(table)};`)
+                stmts.push(...indexStatements(table, fields, primaries))
+            } else {
+                for (const [name, prop] of fields) {
+                    if (!currFields.includes(name))
+                        stmts.push(`ALTER TABLE ${quoteId(table)} ADD COLUMN ${toFieldDef(name, prop)};`)
+                }
+                stmts.push(...indexStatements(table, fields, primaries, await singleColumnIndexes(query, table), { patch }))
+            }
+        }
+    }
+
+    if (!patch) {
+        for (const table of currTables) {
+            if (!nextTables.includes(table))
+                stmts.push(`DROP TABLE ${quoteId(table)};`)
+        }
+    }
+
+    for (const stmt of stmts) {
+        console.log(stmt)
+        await query(stmt)
+    }
+    return { diffs, executed: stmts }
+}

package/tools/schema/db/sqlite/to-field.js

@@ -0,0 +1,34 @@
+// sqlite/to-field.js — JSON Schema property → SQLite column definition
+// SQLite lengths are in characters — no byte conversion needed
+// Intentionally no NOT NULL for required fields: SQLite has no non-strict mode that
+// fills implicit defaults like MySQL, so inserts omitting required fields would fail.
+import { quoteId, schemaType, defaultLiteral } from '../shared/sql.js'
+
+export function toFieldDef(name, prop) {
+    let type
+    const t = schemaType(prop)
+
+    // SQLite has no bool, but the declared name still matters: BOOLEAN carries NUMERIC affinity,
+    // so 1/0 stay integers, and schemaFromField reads it back as boolean. Spelling it INTEGER
+    // round-trips to integer instead, leaving a type diff that never settles.
+    // (A STRICT table would reject the name — that would need INTEGER and a different carrier.)
+    if      (t === 'boolean')             type = 'BOOLEAN'
+    else if (t === 'integer')             type = 'INTEGER'
+    else if (t === 'number')              type = 'REAL'
+    else if (t === 'object' || t === 'array') type = 'TEXT'  // JSON as text
+    else {
+        if      (prop.format === 'date')          type = 'TEXT'
+        else if (prop.format === 'time')          type = 'TEXT'
+        else if (prop.format === 'date-time')     type = 'TEXT'
+        else if (prop.contentEncoding === 'base64') type = 'BLOB'
+        else if (prop.maxLength)                  type = `VARCHAR(${prop.maxLength})`
+        else                                      type = 'TEXT'
+    }
+
+    // PRIMARY KEY / AUTOINCREMENT are emitted inline by to-db.js for the single
+    // integer-primary case; SQLite rejects AUTOINCREMENT in any other position.
+    let sql = `${quoteId(name)} ${type}`
+    if (prop.default != null) sql += ` DEFAULT ${defaultLiteral(prop)}`
+
+    return sql
+}

package/tools/schema/diff.js

@@ -0,0 +1,90 @@
+// ── Generic JSON diff ─────────────────────────────────────────────────────────
+
+export function jsonDiff(next, orig, classify, path = []) {
+    const diffs = []
+    const keys = new Set([...Object.keys(orig ?? {}), ...Object.keys(next ?? {})])
+    for (const key of keys) {
+        const a = orig?.[key]
+        const b = next?.[key]
+        const p = [...path, key]
+        if (a === b) continue
+        if (isObject(a) && isObject(b)) {
+            diffs.push(...jsonDiff(b, a, classify, p))
+            continue
+        }
+        const destructive = classify(key, a, b)
+        diffs.push({
+            path: p,
+            property: key,
+            msg: destructive === null ? null : describeChange(key, a, b),
+            prev: a,
+            next: b,
+            destructive,
+        })
+    }
+    return diffs
+}
+
+function isObject(v) { return v !== null && typeof v === 'object' && !Array.isArray(v) }
+function describeChange(key, a, b) {
+    if (a === undefined) return `${key} added`
+    if (b === undefined) return `${key} removed`
+    return `${key} changed`
+}
+
+// ── Schema-specific rules ─────────────────────────────────────────────────────
+
+const schemaRules = {
+    type:          (a, b) => a !== undefined && b !== undefined,  // type change = always destructive
+    maxLength:     (a, b) => b < a,
+    minLength:     (a, b) => b > a,
+    minimum:       (a, b) => b > a,
+    maximum:       (a, b) => b < a,
+    minItems:      (a, b) => b > a,
+    maxItems:      (a, b) => b < a,
+    minProperties: (a, b) => b > a,
+    maxProperties: (a, b) => b < a,
+    required:      (a, b) => {  // new required fields = destructive
+        if (!Array.isArray(a) || !Array.isArray(b)) return true
+        return b.some(f => !a.includes(f))
+    },
+    enum:          (a, b) => {  // removing enum values = destructive
+        if (!Array.isArray(a) || !Array.isArray(b)) return true
+        return a.some(v => !b.includes(v))
+    },
+    // tightening = destructive, loosening = safe
+    additionalProperties: (a, b) => b === false && a !== false,
+    uniqueItems:          (a, b) => b === true && a !== true,
+    pattern:              (a, b) => a !== b,   // any regex change may reject existing data
+    format:               (a, b) => a !== b,   // format change may reject existing data
+    const:                (a, b) => a !== b,
+    contains:             (a, b) => a !== b,
+    // always safe
+    'x-index':           (a, b) => a === 'primary' && b !== 'primary',  // removing primary = destructive
+    properties:          () => false,
+    patternProperties:   () => false,
+    description:  () => false,
+    title:        () => false,
+    default:      () => false,
+    examples:     () => false,
+    '$comment':   () => false,
+    '$schema':    () => false,
+    '$id':        () => false,
+    readOnly:     () => false,
+    writeOnly:    () => false,
+    deprecated:   () => false,
+}
+
+export function schemaDiff(next, orig) {
+    return jsonDiff(next, orig, (prop, a, b) => {
+        const rule = schemaRules[prop]
+        if (!rule) {
+            if (b === undefined) return isObject(a) ? true : false  // whole field removed = destructive
+            if (a === undefined) return false                        // whole field added = safe
+            return null                                              // unknown change → flag
+        }
+        if (b === undefined) return false  // removal of a constraint = safe
+        if (a === undefined) return false  // addition = safe
+        return rule(a, b)
+    })
+}

package/tools/schema/dom/toInput.js

@@ -0,0 +1,6 @@
+// @deprecated — moved to ../render/dom.js
+//   import { toInput } from '.../tools/schema/render/dom.js'   // → HTMLElement
+//   import { toInput } from '.../tools/schema/render/html.js'  // → string
+console.warn('[schema/dom/toInput.js] deprecated — import { toInput } from "../render/dom.js" instead')
+
+export { toInput } from '../render/dom.js'

package/tools/schema/render/dom.js

@@ -0,0 +1,26 @@
+import { inputNode } from '../build/input.js'
+
+export function render(node) {
+    if (typeof node === 'string') return document.createTextNode(node)
+
+    const el = document.createElement(node.tag)
+
+    if (node.attrs) {
+        for (const [k, v] of Object.entries(node.attrs)) {
+            if (v === false || v == null) continue
+            if (k === 'indeterminate') { el.indeterminate = !!v; continue }
+            if (v === true) el.setAttribute(k, '')
+            else            el.setAttribute(k, String(v))
+        }
+    }
+
+    if (node.children) {
+        for (const c of node.children) el.append(render(c))
+    }
+
+    return el
+}
+
+export function toInput(schema, opts) {
+    return render(inputNode(schema, opts))
+}

package/tools/schema/render/html.js

@@ -0,0 +1,40 @@
+import { inputNode } from '../build/input.js'
+
+const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']);
+
+export function render(node) {
+    if (typeof node === 'string') return escapeText(node)
+
+    const attrs = renderAttrs(node.attrs)
+    if (VOID_TAGS.has(node.tag)) return `<${node.tag}${attrs}>`
+
+    const inner = (node.children ?? []).map(render).join('')
+    return `<${node.tag}${attrs}>${inner}</${node.tag}>`
+}
+
+export function toInput(schema, opts) {
+    return render(inputNode(schema, opts))
+}
+
+function renderAttrs(attrs) {
+    if (!attrs) return ''
+    const parts = []
+    for (const [k, v] of Object.entries(attrs)) {
+        if (v === false || v == null) continue
+        if (k === 'indeterminate') {
+            if (v) parts.push('data-indeterminate="true"')
+            continue
+        }
+        if (v === true) parts.push(k)
+        else            parts.push(`${k}="${escapeAttr(v)}"`)
+    }
+    return parts.length ? ' ' + parts.join(' ') : ''
+}
+
+function escapeAttr(v) {
+    return String(v).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
+}
+
+function escapeText(v) {
+    return v.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}

package/tools/schema/utils.js

@@ -0,0 +1,131 @@
+import { validate as validateSchema } from './validator.js';
+
+// x-dataref convention:
+//   '../../groups'    → the groups table
+//   '../../groups/$'  → the specific entry: groups.item(this.value)
+//
+// path parts:
+//   ..   = parent
+//   .    = self
+//   #    = schema root
+//   $    = item(currentValue)  ← resolves the FK to a concrete item
+//   name = named child
+
+export function getSchemaRoot(item) {
+    let p = item
+    while (p.parent && p.parent.schema) p = p.parent
+    return p
+}
+
+
+export function resolveRef(ref, item, skipLevels = 0) {
+    const parts = ref.split('/').filter(p => p !== '');
+    let anchor = item;
+    if (parts[0] === '#') {
+        anchor = getSchemaRoot(item);
+        parts.shift();
+        skipLevels = 0;
+    }
+    let skip = skipLevels;
+    while (skip > 0) {
+        if (parts[0] === '..') { parts.shift(); skip--; }
+        else return undefined;
+    }
+    for (let i = 0; i < parts.length; i++) {
+        const part = parts[i];
+        if (part === '..') anchor = anchor?.parent;
+        else if (part === '.') {}
+        else return anchor?.has(parts.slice(i));
+        if (!anchor) return undefined;
+    }
+    return anchor;
+}
+
+function zzzzresolveRef(ref, item) {
+    const parts = ref.split('/');
+    let anchor = item;
+    for (const part of parts) {
+        //if (part === '#') { while (anchor.parent) anchor = anchor.parent } // data-root
+        if (part === '#') anchor = getSchemaRoot(item); // schema-root, besser!?
+        else if (part === '..') anchor = anchor.parent;
+        else if (part === '.') {}
+        else anchor = anchor.item(part);
+    }
+    return anchor;
+}
+
+// export function resolveDataRef(item) {
+//     const xref = item.schema?.['x-dataref'];
+//     if (!xref) return undefined;
+//     return resolveRef(xref, item);
+// }
+
+
+export function resolveDataRef(item) {
+    const xref = item.schema?.['x-dataref'];
+    if (!xref) return undefined;
+    const hasValueRef = xref.endsWith('/$');
+    const parentRef = hasValueRef ? xref.slice(0, -2) : xref;
+    const parent = resolveRef(parentRef, item);
+    const refItem = parent?.has(item);
+    return { parent, refItem };
+}
+
+export function reportDeprecated(item) {
+    item.addEventListener('getIn', e => {
+        if (e.target.schema?.deprecated) {
+            console.error(`item deprecated: ${e.target.path.join('/')}`, e.target.schema);
+        }
+    });
+}
+
+export function applyDefault(e) {
+    if (e.value == null) {
+        const d = e.target.schema?.default;
+        if (d !== undefined) e.value = d;
+    }
+}
+
+export function validate(e, options = { log: true }) {
+    const schema = e.target.schema;
+    if (!schema) return;
+    const value = e.value;
+    if (!validateSchema(schema, value).length) return;
+    e.preventDefault();
+    if (options.throw) throw new Error(`item invalid: ${e.target.path.join('/')}`);
+    if (options.log) console.error(`item invalid: ${e.target.path.join('/')}`, e.target.schema);
+}
+
+export function transform(event) {
+
+    if (event.options?.local) return; // comes from the server, we trust it
+    if (!event.target.schema) { return; }
+    if (event.target.schema.properties) { return; }
+    if (event.target.schema.additionalProperties) { return; }
+    if (event.value !== null && typeof event.value === 'object') { return; }
+
+    // first the native types
+    if (event.target.schema.type === 'integer') event.value = parseInt(event.value);
+    if (event.target.schema.type === 'number')  event.value = parseFloat(event.value);
+    if (event.target.schema.type === 'boolean') event.value = !!event.value;
+
+
+    let trim = true; // default
+    if ('x-transform' in event.target.schema) {
+        trim = event.target.schema['x-transform'].trim ?? true;
+    }
+    if (event.target.schema.type === 'string') {
+
+        if (trim==='L') event.value = event.value?.trimStart?.();
+        if (trim==='R') event.value = event.value?.trimEnd?.();
+        if (trim===true) event.value = event.value?.trim?.();
+
+        if (event.value != null) {
+            const c = event.target.schema?.['x-transform']?.case;
+            if (c === 'lower') event.value = event.value.toLowerCase();
+            if (c === 'upper') event.value = event.value.toUpperCase();
+        }
+
+    }
+
+}

package/tools/schema/validator.js

@@ -0,0 +1,92 @@
+
+/**
+ * Lightweight JSON Schema Validator
+ * 
+ * @param {Object} schema - JSON Schema
+ * @param {any} data - Data to validate
+ * @param {string} path - JSON Pointer to current location in data
+ * @returns {Array} - Array of {path,msg} error objects
+ */
+
+export function validate(schema, data, path = '#') {
+    const errs = [];
+    const err = msg => errs.push({ path, msg });
+    const sub = (s, v, p) => errs.push(...validate(s, v, p));
+
+    for (const [kw, fn] of Object.entries(rules)) {
+        if (!(kw in schema)) continue;
+        const r = fn(schema, data, path, sub);
+        if (typeof r === 'string') err(r);
+        else if (r?.length) errs.push(...r);
+    }
+    return errs;
+}
+
+const rules = {
+    // universal
+    const: (s, d) => !deepEq(d, s.const) && `must be ${JSON.stringify(s.const)}`,
+    enum: (s, d) => !s.enum.some(v => deepEq(v, d)) && `must be one of ${JSON.stringify(s.enum)}`,
+    type: (s, d) => { const ts = [].concat(s.type); return !ts.some(t => checkType(t, d)) && `must be type ${ts.join('|')} (got ${jsType(d)})`; },
+
+    // string
+    minLength: (s, d) => typeof d === 'string' && d.length < s.minLength && `minLength ${s.minLength} (got ${d.length})`,
+    maxLength: (s, d) => typeof d === 'string' && d.length > s.maxLength && `maxLength ${s.maxLength} (got ${d.length})`,
+    pattern: (s, d) => typeof d === 'string' && !new RegExp(s.pattern).test(d) && `pattern /${s.pattern}/ not matched`,
+
+    // number
+    minimum: (s, d) => typeof d === 'number' && d < s.minimum && `minimum ${s.minimum} (got ${d})`,
+    maximum: (s, d) => typeof d === 'number' && d > s.maximum && `maximum ${s.maximum} (got ${d})`,
+    exclusiveMinimum: (s, d) => typeof d === 'number' && d <= s.exclusiveMinimum && `exclusiveMinimum ${s.exclusiveMinimum}`,
+    exclusiveMaximum: (s, d) => typeof d === 'number' && d >= s.exclusiveMaximum && `exclusiveMaximum ${s.exclusiveMaximum}`,
+    multipleOf: (s, d) => typeof d === 'number' && d % s.multipleOf !== 0 && `must be multiple of ${s.multipleOf}`,
+
+    // array
+    minItems: (s, d) => Array.isArray(d) && d.length < s.minItems && `minItems ${s.minItems} (got ${d.length})`,
+    maxItems: (s, d) => Array.isArray(d) && d.length > s.maxItems && `maxItems ${s.maxItems} (got ${d.length})`,
+    uniqueItems: (s, d) => Array.isArray(d) && s.uniqueItems && d.length !== new Set(d.map(JSON.stringify)).size && 'items must be unique',
+    items: (s, d, path, sub) => Array.isArray(d) && d.forEach((item, i) => {
+        const sc = Array.isArray(s.items) ? s.items[i] : s.items;
+        if (sc) sub(sc, item, `${path}[${i}]`);
+    }),
+
+    // object — returns array of {path,msg} for multi-path errors
+    required: (s, d, path) => isObj(d) &&
+        s.required.filter(k => !(k in d)).map(k => ({ path: `${path}.${k}`, msg: 'is required' })),
+    properties: (s, d, path, sub) => isObj(d) &&
+        Object.entries(s.properties).forEach(([k, sc]) => k in d && sub(sc, d[k], `${path}.${k}`)),
+    additionalProperties: (s, d, path, sub) => {
+        if (!isObj(d)) return;
+        const props = s.properties || {};
+        const extra = Object.entries(d).filter(([k]) => !(k in props));
+        if (s.additionalProperties === false)
+            return extra.map(([k]) => ({ path: `${path}.${k}`, msg: 'additional property not allowed' }));
+        if (typeof s.additionalProperties === 'object')
+            extra.forEach(([k, v]) => sub(s.additionalProperties, v, `${path}.${k}`));
+    },
+
+    // composition
+    allOf: (s, d, path, sub) => s.allOf.forEach(sc => sub(sc, d, path)),
+    anyOf: (s, d, path) => !s.anyOf.some(sc => validate(sc, d, path).length === 0) && 'must match at least one of anyOf',
+    oneOf: (s, d, path) => { const n = s.oneOf.filter(sc => validate(sc, d, path).length === 0).length; return n !== 1 && `must match exactly one of oneOf (matched ${n})`; },
+    not: (s, d, path) => validate(s.not, d, path).length === 0 && 'must not match "not" schema',
+    if: (s, d, path, sub) => { const branch = validate(s.if, d, path).length === 0 ? s.then : s.else; if (branch) sub(branch, d, path); },
+};
+
+const isObj = v => v !== null && typeof v === 'object' && !Array.isArray(v);
+const deepEq = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+
+function checkType(t, v) {
+    if (t === 'integer') return Number.isInteger(v);
+    if (t === 'number') return typeof v === 'number' && !isNaN(v);
+    if (t === 'null') return v === null;
+    if (t === 'array') return Array.isArray(v);
+    if (t === 'object') return isObj(v);
+    return typeof v === t;
+}
+
+function jsType(v) {
+    if (v === null) return 'null';
+    if (Array.isArray(v)) return 'array';
+    if (Number.isInteger(v)) return 'integer';
+    return typeof v;
+}

package/tools/view/dom.js

@@ -0,0 +1,96 @@
+import { resolveRef } from '../schema/utils.js';
+import { toInput } from '../schema/render/dom.js';
+
+const isPrimary = (s) => s['x-index'] === 'primary';
+
+export function field(item, editable = true) {
+    const s = item.schema ?? {};
+    if (!editable || s.readOnly || isPrimary(s)) {
+        if (s['x-dataref']) return refDisplay(item);
+        const span = document.createElement('span');
+        span.textContent = item.get();
+        item.addEventListener('change', () => span.textContent = item.get());
+        return span;
+    }
+    const el = s['x-dataref'] ? refSelect(item) : toInput(s);
+    return bindInput(el, item);
+}
+
+export function selectFromChildren(parent) {
+    const select = document.createElement('select');
+    const update = async () => {
+        if (!parent.filled) await parent.read();
+        const prev = select.value;
+        select.innerHTML = '';
+        select.append(new Option('—', ''));
+        for (const child of parent) {
+            const display = child.schema?.['x-display'] ?? 'name';
+            if (!child.filled) await child.read();
+            if (child.has(display)?.filled) await child.has(display).read();
+            const opt = new Option(String(child.has(display) ?? child.key), child.key);
+            select.append(opt);
+        }
+        if (prev && !select.querySelector(`option[value="${prev}"]`)) {
+            select.append(new Option(prev, prev));
+        }
+        select.value = prev;
+    };
+    select.addEventListener('focus', update);
+    update();
+    return select;
+}
+
+export function bindInput(el, item) {
+    const sync = () => {
+        if (el.type === 'checkbox') {
+            el.checked = !!item.get();
+        } else {
+            const val = String(item.get() ?? '');
+            if (el.tagName === 'SELECT' && !el.querySelector(`option[value=${JSON.stringify(val)}]`)) {
+                el.append(Object.assign(document.createElement('option'), { value: val, textContent: val }));
+            }
+            el.value = val;
+        }
+    };
+    sync();
+    item.addEventListener('change', sync);
+    el.addEventListener('change', async () => {
+        const value = el.type === 'checkbox' ? el.checked : el.value;
+        el.setAttribute('state', 'saving');
+        try {
+            await item.set(value);
+            el.setAttribute('state', 'saved');
+        } catch (err) {
+            console.error(err);
+            el.setAttribute('state', 'error');
+        }
+    });
+    return el;
+}
+
+function refSelect(item) {
+    const xref = item.schema?.['x-dataref'];
+    const parentRef = xref.endsWith('/$') ? xref.slice(0, -2) : xref;
+    const parent = resolveRef(parentRef, item);
+    if (!parent) return document.createElement('select');
+    const select = selectFromChildren(parent);
+    return select;
+}
+
+function refDisplay(item) {
+    const xref = item.schema?.['x-dataref'];
+    const parentRef = xref.endsWith('/$') ? xref.slice(0, -2) : xref;
+    const parent = resolveRef(parentRef, item);
+    const span = document.createElement('span');
+    span.textContent = item.get() ?? '';
+    if (!parent) return span;
+    (async () => {
+        if (!parent.filled) await parent.read();
+        const refItem = parent.has(item.get() ?? '');
+        if (!refItem) return;
+        if (!refItem.filled) await refItem.read();
+        const display = refItem.schema?.['x-display'] ?? 'name';
+        span.textContent = String(refItem.has(display) ?? item.get());
+    })();
+    return span;
+}