@bakapiano/ccsm 0.10.3 → 0.12.0

package/public/js/components/DirectoryPicker.js

@@ -1,203 +1,203 @@
-// Directory browser used by Launch page. Windows-Explorer-style:
-//   ┌───────────────────────────────────────────────┐
-//   │ [←] [→] [↑]  Home > Users > Admin > foo  [✎]  │   nav + breadcrumb
-//   ├──────────────┬────────────────────────────────┤
-//   │ Quick access │  folder rows (large, hoverable)│
-//   │   Home       │  ⌃  ..                          │
-//   │   Work dir   │  📁 AppData                     │
-//   │   C:\        │  📁 ccsm-workspaces             │
-//   │   D:\        │                                 │
-//   └──────────────┴────────────────────────────────┘
-//
-// The picker streams the currently-selected path back to the parent via
-// `onPick(path)` on every selection change. Confirm/cancel UI lives in
-// the parent (the workdir modal's shared footer) so auto + cwd modes
-// share one CTA.
-//
-// Props: { initialPath, onPick }
-
-import { html } from '../html.js';
-import { useEffect, useState } from 'preact/hooks';
-import { api } from '../api.js';
-import { setToast } from '../toast.js';
-import { IconFolder, IconHome, IconChevronLeft, IconChevronRight, IconChevronUp, IconPencil } from '../icons.js';
-
-export function DirectoryPicker({ initialPath, onPick }) {
-  const [data, setData] = useState(null);
-  const [path, setPath] = useState(initialPath || '');
-  const [history, setHistory] = useState({ stack: [], cursor: -1 }); // back/forward
-  const [editing, setEditing] = useState(false);
-  const [input, setInput] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  // Push the current selection up on every change so the parent's
-  // shared "Use folder" CTA can act on it.
-  const select = (p) => { setPath(p); setInput(p); onPick?.(p); };
-
-  const browse = async (p, { pushHistory = true } = {}) => {
-    setLoading(true);
-    try {
-      const url = '/api/browse' + (p ? `?path=${encodeURIComponent(p)}` : '');
-      const r = await api('GET', url);
-      setData(r);
-      select(r.path);
-      if (pushHistory) {
-        setHistory((h) => {
-          const head = h.stack.slice(0, h.cursor + 1);
-          head.push(r.path);
-          return { stack: head, cursor: head.length - 1 };
-        });
-      }
-    } catch (e) { setToast(e.message, 'error'); }
-    finally { setLoading(false); }
-  };
-
-  useEffect(() => { browse(initialPath); }, []);
-
-  const canBack = history.cursor > 0;
-  const canForward = history.cursor >= 0 && history.cursor < history.stack.length - 1;
-
-  const goBack = () => {
-    if (!canBack) return;
-    const idx = history.cursor - 1;
-    setHistory({ ...history, cursor: idx });
-    browse(history.stack[idx], { pushHistory: false });
-  };
-  const goForward = () => {
-    if (!canForward) return;
-    const idx = history.cursor + 1;
-    setHistory({ ...history, cursor: idx });
-    browse(history.stack[idx], { pushHistory: false });
-  };
-  const goUp = () => {
-    if (!data?.parent) return;
-    browse(data.parent);
-  };
-  const onAddressSubmit = (ev) => {
-    ev?.preventDefault?.();
-    const p = (input || '').trim();
-    setEditing(false);
-    if (p && p !== path) browse(p);
-  };
-
-  if (!data) {
-    return html`<div class="filex"><div class="filex-loading">Loading…</div></div>`;
-  }
-
-  // Build breadcrumb segments. Windows-style: "C:\Users\Admin\foo" →
-  // [C:, Users, Admin, foo] with each segment clickable.
-  const segments = breadcrumbSegments(data.path);
-
-  return html`
-    <div class="filex">
-      <div class="filex-toolbar">
-        <div class="filex-navbtns">
-          <button class="filex-navbtn" title="Back" disabled=${!canBack} onClick=${goBack}>
-            <${IconChevronLeft} />
-          </button>
-          <button class="filex-navbtn" title="Forward" disabled=${!canForward} onClick=${goForward}>
-            <${IconChevronRight} />
-          </button>
-          <button class="filex-navbtn" title="Up" disabled=${!data.parent} onClick=${goUp}>
-            <${IconChevronUp} />
-          </button>
-        </div>
-
-        ${editing ? html`
-          <form class="filex-address-edit" onSubmit=${onAddressSubmit}>
-            <input class="filex-address-input mono" value=${input}
-                   autoFocus
-                   onInput=${(e) => setInput(e.target.value)}
-                   onBlur=${onAddressSubmit}
-                   onKeyDown=${(e) => { if (e.key === 'Escape') { setInput(data.path); setEditing(false); } }}
-                   spellcheck="false" />
-          </form>
-        ` : html`
-          <div class="filex-breadcrumb"
-               onClick=${(e) => { if (e.target === e.currentTarget) { setInput(data.path); setEditing(true); } }}>
-            ${segments.map((seg, i) => html`
-              <button key=${seg.path} class="filex-crumb"
-                      title=${seg.path}
-                      onClick=${() => browse(seg.path)}>
-                ${i === 0 && seg.label.match(/^[a-z]:\\?$/i) ? null : null}
-                ${seg.label}
-              </button>
-              ${i < segments.length - 1
-                ? html`<span class="filex-crumb-sep" aria-hidden="true">›</span>`
-                : null}
-            `)}
-            <button class="filex-address-edit-btn" title="Edit path"
-                    onClick=${() => { setInput(data.path); setEditing(true); }}>
-              <${IconPencil} />
-            </button>
-          </div>
-        `}
-      </div>
-
-      <div class="filex-body">
-        <aside class="filex-side">
-          <div class="filex-side-label">Quick access</div>
-          ${(data.starts || []).map((s) => html`
-            <button key=${s.path} class=${`filex-side-item${path === s.path ? ' is-active' : ''}`}
-                    onClick=${() => browse(s.path)}
-                    title=${s.path}>
-              <span class="filex-side-icon">
-                ${s.label === 'Home' ? html`<${IconHome} />` : html`<${IconFolder} />`}
-              </span>
-              <span class="filex-side-name">${s.label}</span>
-            </button>`)}
-        </aside>
-
-        <div class="filex-main">
-          ${!data.exists ? html`
-            <div class="filex-empty">Directory not found.</div>
-          ` : html`
-            <div class="filex-list">
-              ${data.entries.length === 0 ? html`
-                <div class="filex-empty">This folder is empty.</div>
-              ` : data.entries.map((e) => html`
-                <button key=${e.path} class="filex-row"
-                        onDblClick=${() => browse(e.path)}
-                        onClick=${() => select(e.path)}
-                        data-active=${path === e.path}>
-                  <span class="filex-row-icon"><${IconFolder} /></span>
-                  <span class="filex-row-name">${e.name}</span>
-                </button>`)}
-            </div>`}
-        </div>
-      </div>
-
-      <div class="filex-foot">
-        <span class="filex-foot-current mono" title=${path}>${path || ' '}</span>
-      </div>
-    </div>`;
-}
-
-// "C:\Users\Admin\foo" → [{label:'C:', path:'C:\\'}, {label:'Users', path:'C:\\Users'}, …]
-// "/home/me/foo"        → [{label:'/',  path:'/'},   {label:'home',  path:'/home'},      …]
-function breadcrumbSegments(p) {
-  if (!p) return [];
-  // Windows: split on backslash. Posix: forward slash.
-  const isWin = /^[a-zA-Z]:[\\/]/.test(p);
-  const sep = isWin ? '\\' : '/';
-  const norm = p.replace(/[\\\/]+/g, sep);
-  const parts = norm.split(sep).filter(Boolean);
-  const segs = [];
-  if (isWin) {
-    // first part is drive like "C:"
-    let acc = parts[0] + sep;
-    segs.push({ label: parts[0], path: acc });
-    for (let i = 1; i < parts.length; i++) {
-      acc = (acc.endsWith(sep) ? acc.slice(0, -1) : acc) + sep + parts[i];
-      segs.push({ label: parts[i], path: acc });
-    }
-  } else {
-    let acc = '';
-    segs.push({ label: '/', path: '/' });
-    for (const part of parts) {
-      acc = acc + sep + part;
-      segs.push({ label: part, path: acc });
-    }
-  }
-  return segs;
-}
+// Directory browser used by Launch page. Windows-Explorer-style:
+//   ┌───────────────────────────────────────────────┐
+//   │ [←] [→] [↑]  Home > Users > Admin > foo  [✎]  │   nav + breadcrumb
+//   ├──────────────┬────────────────────────────────┤
+//   │ Quick access │  folder rows (large, hoverable)│
+//   │   Home       │  ⌃  ..                          │
+//   │   Work dir   │  📁 AppData                     │
+//   │   C:\        │  📁 ccsm-workspaces             │
+//   │   D:\        │                                 │
+//   └──────────────┴────────────────────────────────┘
+//
+// The picker streams the currently-selected path back to the parent via
+// `onPick(path)` on every selection change. Confirm/cancel UI lives in
+// the parent (the workdir modal's shared footer) so auto + cwd modes
+// share one CTA.
+//
+// Props: { initialPath, onPick }
+
+import { html } from '../html.js';
+import { useEffect, useState } from 'preact/hooks';
+import { api } from '../api.js';
+import { setToast } from '../toast.js';
+import { IconFolder, IconHome, IconChevronLeft, IconChevronRight, IconChevronUp, IconPencil } from '../icons.js';
+
+export function DirectoryPicker({ initialPath, onPick }) {
+  const [data, setData] = useState(null);
+  const [path, setPath] = useState(initialPath || '');
+  const [history, setHistory] = useState({ stack: [], cursor: -1 }); // back/forward
+  const [editing, setEditing] = useState(false);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // Push the current selection up on every change so the parent's
+  // shared "Use folder" CTA can act on it.
+  const select = (p) => { setPath(p); setInput(p); onPick?.(p); };
+
+  const browse = async (p, { pushHistory = true } = {}) => {
+    setLoading(true);
+    try {
+      const url = '/api/browse' + (p ? `?path=${encodeURIComponent(p)}` : '');
+      const r = await api('GET', url);
+      setData(r);
+      select(r.path);
+      if (pushHistory) {
+        setHistory((h) => {
+          const head = h.stack.slice(0, h.cursor + 1);
+          head.push(r.path);
+          return { stack: head, cursor: head.length - 1 };
+        });
+      }
+    } catch (e) { setToast(e.message, 'error'); }
+    finally { setLoading(false); }
+  };
+
+  useEffect(() => { browse(initialPath); }, []);
+
+  const canBack = history.cursor > 0;
+  const canForward = history.cursor >= 0 && history.cursor < history.stack.length - 1;
+
+  const goBack = () => {
+    if (!canBack) return;
+    const idx = history.cursor - 1;
+    setHistory({ ...history, cursor: idx });
+    browse(history.stack[idx], { pushHistory: false });
+  };
+  const goForward = () => {
+    if (!canForward) return;
+    const idx = history.cursor + 1;
+    setHistory({ ...history, cursor: idx });
+    browse(history.stack[idx], { pushHistory: false });
+  };
+  const goUp = () => {
+    if (!data?.parent) return;
+    browse(data.parent);
+  };
+  const onAddressSubmit = (ev) => {
+    ev?.preventDefault?.();
+    const p = (input || '').trim();
+    setEditing(false);
+    if (p && p !== path) browse(p);
+  };
+
+  if (!data) {
+    return html`<div class="filex"><div class="filex-loading">Loading…</div></div>`;
+  }
+
+  // Build breadcrumb segments. Windows-style: "C:\Users\Admin\foo" →
+  // [C:, Users, Admin, foo] with each segment clickable.
+  const segments = breadcrumbSegments(data.path);
+
+  return html`
+    <div class="filex">
+      <div class="filex-toolbar">
+        <div class="filex-navbtns">
+          <button class="filex-navbtn" title="Back" disabled=${!canBack} onClick=${goBack}>
+            <${IconChevronLeft} />
+          </button>
+          <button class="filex-navbtn" title="Forward" disabled=${!canForward} onClick=${goForward}>
+            <${IconChevronRight} />
+          </button>
+          <button class="filex-navbtn" title="Up" disabled=${!data.parent} onClick=${goUp}>
+            <${IconChevronUp} />
+          </button>
+        </div>
+
+        ${editing ? html`
+          <form class="filex-address-edit" onSubmit=${onAddressSubmit}>
+            <input class="filex-address-input mono" value=${input}
+                   autoFocus
+                   onInput=${(e) => setInput(e.target.value)}
+                   onBlur=${onAddressSubmit}
+                   onKeyDown=${(e) => { if (e.key === 'Escape') { setInput(data.path); setEditing(false); } }}
+                   spellcheck="false" />
+          </form>
+        ` : html`
+          <div class="filex-breadcrumb"
+               onClick=${(e) => { if (e.target === e.currentTarget) { setInput(data.path); setEditing(true); } }}>
+            ${segments.map((seg, i) => html`
+              <button key=${seg.path} class="filex-crumb"
+                      title=${seg.path}
+                      onClick=${() => browse(seg.path)}>
+                ${i === 0 && seg.label.match(/^[a-z]:\\?$/i) ? null : null}
+                ${seg.label}
+              </button>
+              ${i < segments.length - 1
+                ? html`<span class="filex-crumb-sep" aria-hidden="true">›</span>`
+                : null}
+            `)}
+            <button class="filex-address-edit-btn" title="Edit path"
+                    onClick=${() => { setInput(data.path); setEditing(true); }}>
+              <${IconPencil} />
+            </button>
+          </div>
+        `}
+      </div>
+
+      <div class="filex-body">
+        <aside class="filex-side">
+          <div class="filex-side-label">Quick access</div>
+          ${(data.starts || []).map((s) => html`
+            <button key=${s.path} class=${`filex-side-item${path === s.path ? ' is-active' : ''}`}
+                    onClick=${() => browse(s.path)}
+                    title=${s.path}>
+              <span class="filex-side-icon">
+                ${s.label === 'Home' ? html`<${IconHome} />` : html`<${IconFolder} />`}
+              </span>
+              <span class="filex-side-name">${s.label}</span>
+            </button>`)}
+        </aside>
+
+        <div class="filex-main">
+          ${!data.exists ? html`
+            <div class="filex-empty">Directory not found.</div>
+          ` : html`
+            <div class="filex-list">
+              ${data.entries.length === 0 ? html`
+                <div class="filex-empty">This folder is empty.</div>
+              ` : data.entries.map((e) => html`
+                <button key=${e.path} class="filex-row"
+                        onDblClick=${() => browse(e.path)}
+                        onClick=${() => select(e.path)}
+                        data-active=${path === e.path}>
+                  <span class="filex-row-icon"><${IconFolder} /></span>
+                  <span class="filex-row-name">${e.name}</span>
+                </button>`)}
+            </div>`}
+        </div>
+      </div>
+
+      <div class="filex-foot">
+        <span class="filex-foot-current mono" title=${path}>${path || ' '}</span>
+      </div>
+    </div>`;
+}
+
+// "C:\Users\Admin\foo" → [{label:'C:', path:'C:\\'}, {label:'Users', path:'C:\\Users'}, …]
+// "/home/me/foo"        → [{label:'/',  path:'/'},   {label:'home',  path:'/home'},      …]
+function breadcrumbSegments(p) {
+  if (!p) return [];
+  // Windows: split on backslash. Posix: forward slash.
+  const isWin = /^[a-zA-Z]:[\\/]/.test(p);
+  const sep = isWin ? '\\' : '/';
+  const norm = p.replace(/[\\\/]+/g, sep);
+  const parts = norm.split(sep).filter(Boolean);
+  const segs = [];
+  if (isWin) {
+    // first part is drive like "C:"
+    let acc = parts[0] + sep;
+    segs.push({ label: parts[0], path: acc });
+    for (let i = 1; i < parts.length; i++) {
+      acc = (acc.endsWith(sep) ? acc.slice(0, -1) : acc) + sep + parts[i];
+      segs.push({ label: parts[i], path: acc });
+    }
+  } else {
+    let acc = '';
+    segs.push({ label: '/', path: '/' });
+    for (const part of parts) {
+      acc = acc + sep + part;
+      segs.push({ label: part, path: acc });
+    }
+  }
+  return segs;
+}

package/public/js/components/EntityFormModal.js

@@ -1,105 +1,105 @@
-// Generic create/edit form rendered inside a Modal. Field shape mirrors
-// the createFields prop used by Picker.js so the same field-definition
-// objects power both the inline-create-in-popover flow and the standalone
-// edit flow used from Configure.
-//
-// Usage:
-//   <${EntityFormModal}
-//     title="Edit CLI"
-//     fields=${cliFields}
-//     initial=${currentValues}
-//     onSubmit=${async (values) => { ... }}
-//     onClose=${close} />
-
-import { html } from '../html.js';
-import { useState } from 'preact/hooks';
-import { Modal } from './Modal.js';
-
-export function EntityFormModal({
-  title, fields, initial = {}, submitLabel = 'Save',
-  readOnlyKeys = [],
-  onSubmit, onClose, danger,
-}) {
-  const [draft, setDraft] = useState(() => ({ ...initialFrom(fields), ...initial }));
-  const [saving, setSaving] = useState(false);
-
-  const isReadOnly = (key) => readOnlyKeys.includes(key);
-
-  const submit = async (ev) => {
-    ev?.preventDefault?.();
-    for (const f of fields) {
-      if (f.required && !String(draft[f.key] || '').trim()) return;
-    }
-    setSaving(true);
-    try { await onSubmit?.(draft); onClose?.(); }
-    catch { /* caller toasts; stay open */ }
-    finally { setSaving(false); }
-  };
-
-  return html`
-    <${Modal} title=${title} onClose=${onClose} width=${440}>
-      <form class="entity-form" onSubmit=${submit}>
-        ${fields.map((f) => html`
-          <label class="entity-field" key=${f.key}>
-            <span class="entity-field-label">${f.label}</span>
-            ${f.type === 'select' ? html`
-              <select class="input" value=${draft[f.key] || ''}
-                      disabled=${isReadOnly(f.key)}
-                      onChange=${(e) => {
-                        const next = { ...draft, [f.key]: e.target.value };
-                        const sideEffects = f.onChange?.(e.target.value, next);
-                        setDraft(sideEffects ? { ...next, ...sideEffects } : next);
-                      }}>
-                ${(f.options || []).map((opt) => html`
-                  <option value=${opt.value}>${opt.label}</option>`)}
-              </select>
-            ` : f.type === 'iconRadio' ? html`
-              <div class=${`icon-radio${isReadOnly(f.key) ? ' is-disabled' : ''}`}>
-                ${(f.options || []).map((opt) => html`
-                  <button type="button" key=${opt.value}
-                          class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
-                          disabled=${isReadOnly(f.key)}
-                          onClick=${() => {
-                            if (isReadOnly(f.key)) return;
-                            const next = { ...draft, [f.key]: opt.value };
-                            const sideEffects = f.onChange?.(opt.value, next);
-                            setDraft(sideEffects ? { ...next, ...sideEffects } : next);
-                          }}>
-                    ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
-                    <span>${opt.label}</span>
-                  </button>`)}
-              </div>
-            ` : f.type === 'checkbox' ? html`
-              <span class="entity-checkbox-row">
-                <input type="checkbox" checked=${!!draft[f.key]}
-                       disabled=${isReadOnly(f.key)}
-                       onChange=${(e) => setDraft({ ...draft, [f.key]: e.target.checked })} />
-                ${f.hint ? html`<span class="entity-field-hint">${f.hint}</span>` : null}
-              </span>
-            ` : html`
-              <input type=${f.type || 'text'}
-                     class=${`input${f.mono ? ' mono' : ''}`}
-                     placeholder=${f.placeholder || ''}
-                     value=${draft[f.key] || ''}
-                     readonly=${isReadOnly(f.key)}
-                     onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
-                     autoFocus=${f.autoFocus && !isReadOnly(f.key)} />`}
-            ${f.hint && f.type !== 'checkbox' ? html`
-              <span class="entity-field-hint">${f.hint}</span>` : null}
-          </label>`)}
-        <div class="entity-form-actions">
-          <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
-          <button type="submit" class=${`action small ${danger ? 'danger' : 'primary'}`}
-                  disabled=${saving}>
-            ${saving ? 'Saving…' : submitLabel}
-          </button>
-        </div>
-      </form>
-    </${Modal}>`;
-}
-
-function initialFrom(fields) {
-  const out = {};
-  for (const f of fields) out[f.key] = f.default ?? '';
-  return out;
-}
+// Generic create/edit form rendered inside a Modal. Field shape mirrors
+// the createFields prop used by Picker.js so the same field-definition
+// objects power both the inline-create-in-popover flow and the standalone
+// edit flow used from Configure.
+//
+// Usage:
+//   <${EntityFormModal}
+//     title="Edit CLI"
+//     fields=${cliFields}
+//     initial=${currentValues}
+//     onSubmit=${async (values) => { ... }}
+//     onClose=${close} />
+
+import { html } from '../html.js';
+import { useState } from 'preact/hooks';
+import { Modal } from './Modal.js';
+
+export function EntityFormModal({
+  title, fields, initial = {}, submitLabel = 'Save',
+  readOnlyKeys = [],
+  onSubmit, onClose, danger,
+}) {
+  const [draft, setDraft] = useState(() => ({ ...initialFrom(fields), ...initial }));
+  const [saving, setSaving] = useState(false);
+
+  const isReadOnly = (key) => readOnlyKeys.includes(key);
+
+  const submit = async (ev) => {
+    ev?.preventDefault?.();
+    for (const f of fields) {
+      if (f.required && !String(draft[f.key] || '').trim()) return;
+    }
+    setSaving(true);
+    try { await onSubmit?.(draft); onClose?.(); }
+    catch { /* caller toasts; stay open */ }
+    finally { setSaving(false); }
+  };
+
+  return html`
+    <${Modal} title=${title} onClose=${onClose} width=${440}>
+      <form class="entity-form" onSubmit=${submit}>
+        ${fields.map((f) => html`
+          <label class="entity-field" key=${f.key}>
+            <span class="entity-field-label">${f.label}</span>
+            ${f.type === 'select' ? html`
+              <select class="input" value=${draft[f.key] || ''}
+                      disabled=${isReadOnly(f.key)}
+                      onChange=${(e) => {
+                        const next = { ...draft, [f.key]: e.target.value };
+                        const sideEffects = f.onChange?.(e.target.value, next);
+                        setDraft(sideEffects ? { ...next, ...sideEffects } : next);
+                      }}>
+                ${(f.options || []).map((opt) => html`
+                  <option value=${opt.value}>${opt.label}</option>`)}
+              </select>
+            ` : f.type === 'iconRadio' ? html`
+              <div class=${`icon-radio${isReadOnly(f.key) ? ' is-disabled' : ''}`}>
+                ${(f.options || []).map((opt) => html`
+                  <button type="button" key=${opt.value}
+                          class=${`icon-radio-opt${draft[f.key] === opt.value ? ' is-active' : ''}`}
+                          disabled=${isReadOnly(f.key)}
+                          onClick=${() => {
+                            if (isReadOnly(f.key)) return;
+                            const next = { ...draft, [f.key]: opt.value };
+                            const sideEffects = f.onChange?.(opt.value, next);
+                            setDraft(sideEffects ? { ...next, ...sideEffects } : next);
+                          }}>
+                    ${opt.icon ? html`<span class="icon-radio-icon">${opt.icon}</span>` : null}
+                    <span>${opt.label}</span>
+                  </button>`)}
+              </div>
+            ` : f.type === 'checkbox' ? html`
+              <span class="entity-checkbox-row">
+                <input type="checkbox" checked=${!!draft[f.key]}
+                       disabled=${isReadOnly(f.key)}
+                       onChange=${(e) => setDraft({ ...draft, [f.key]: e.target.checked })} />
+                ${f.hint ? html`<span class="entity-field-hint">${f.hint}</span>` : null}
+              </span>
+            ` : html`
+              <input type=${f.type || 'text'}
+                     class=${`input${f.mono ? ' mono' : ''}`}
+                     placeholder=${f.placeholder || ''}
+                     value=${draft[f.key] || ''}
+                     readonly=${isReadOnly(f.key)}
+                     onInput=${(e) => setDraft({ ...draft, [f.key]: e.target.value })}
+                     autoFocus=${f.autoFocus && !isReadOnly(f.key)} />`}
+            ${f.hint && f.type !== 'checkbox' ? html`
+              <span class="entity-field-hint">${f.hint}</span>` : null}
+          </label>`)}
+        <div class="entity-form-actions">
+          <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
+          <button type="submit" class=${`action small ${danger ? 'danger' : 'primary'}`}
+                  disabled=${saving}>
+            ${saving ? 'Saving…' : submitLabel}
+          </button>
+        </div>
+      </form>
+    </${Modal}>`;
+}
+
+function initialFrom(fields) {
+  const out = {};
+  for (const f of fields) out[f.key] = f.default ?? '';
+  return out;
+}