diff --git a/public/app.mjs b/public/app.mjs
index 49f6dcf..bddfc42 100644
--- a/public/app.mjs
+++ b/public/app.mjs
@@ -1157,6 +1157,23 @@ function open_component_dialog(comp = null) {
 	};
 	add_field_sel.addEventListener('change', add_field_sel._change_handler);
 
+	const new_field_btn = qs(dlg, '#c-new-field');
+	new_field_btn.onclick = () => {
+		const known_ids = new Set(all_fields.map(f => f.id));
+		open_field_dialog(null);
+		document.getElementById('dialog-field').addEventListener('close', () => {
+			const new_field = all_fields.find(f => !known_ids.has(f.id));
+			rebuild_add_select();
+			if (new_field) {
+				active_fields.set(new_field.id, '');
+				rebuild_field_rows();
+				rebuild_add_select();
+				const inputs = field_rows_el.querySelectorAll(`[data-field_id="${new_field.id}"]`);
+				if (inputs.length) inputs[inputs.length - 1].focus();
+			}
+		}, { once: true });
+	};
+
 	component_dialog_callback = async () => {
 		const name = name_input.value.trim();
 		if (!name) return;
diff --git a/public/templates.html b/public/templates.html
index 46a5359..9610abf 100644
--- a/public/templates.html
+++ b/public/templates.html
@@ -336,9 +336,12 @@
 			<div class="form-section-label">Field values</div>
 			<div id="c-field-rows"></div>
 			<div class="form-row add-field-row">
-				<select id="c-add-field-select" class="filter-select">
-					<option value="">— add a field —</option>
-				</select>
+				<div class="input-with-action">
+					<select id="c-add-field-select" class="filter-select">
+						<option value="">— add a field —</option>
+					</select>
+					<button type="button" class="btn btn-secondary btn-sm" id="c-new-field">New…</button>
+				</div>
 			</div>
 			<div class="dialog-actions">
 				<button type="button" class="btn btn-secondary" id="c-cancel">Cancel</button>