{#if props.tree.type === "record" && valueType !== undefined} {#if props.readOnly} {#if entries.length === 0} {EM_DASH} {:else}

{#each entries as [key, value] (key)} {@const childId = fieldDomId(`${props.path}.${key}`)} {@const child = props.renderChild( valueType, value, () => { /* read-only: noop */ }, key )}

{key} {#if child !== null} {/if}

{/each}

{/if} {:else} {@const handleRename = (oldKey: string, newKey: string) => { const renamed = renameRecordKey(obj, oldKey, newKey); if (renamed === obj) return; props.onChange(renamed); }} {@const handleValueChange = (key: string, nextValue: unknown) => { const updated: Record = {}; for (const [k, val] of Object.entries(obj)) { updated[k] = val; } updated[key] = nextValue; props.onChange(updated); }} {@const handleRemove = (key: string) => { const next: Record = {}; for (const [k, v] of Object.entries(obj)) { if (k === key) continue; next[k] = v; } props.onChange(next); }} {@const handleAdd = () => { const newKey = nextRecordKey(Object.keys(obj)); const next: Record = { ...obj }; next[newKey] = defaultRecordValue(valueType); props.onChange(next); }}

{#each entries as [key, value] (key)} {@const childId = fieldDomId(`${props.path}.${key}`)} {@const keyId = `${childId}-key`} {@const childOnChange = (v: unknown) => { handleValueChange(key, v); }} {@const child = props.renderChild( valueType, value, childOnChange, key )}

{ const target = e.currentTarget; if (target instanceof HTMLInputElement) { handleRename(key, target.value); } }} /> {#if child !== null} {/if}

{/each}

{/if} {/if}