@glw907/cairn-cms 0.60.0 → 0.62.1

package/dist/components/ComponentForm.svelte

@@ -9,196 +9,121 @@ This is not a nested HTML form; Insert calls a callback. The dialog owns the hea
 group breadcrumb and the Back control) and, in the two-pane case, the preview pane; this component
 binds out its live `values` and `incomplete` so the dialog can render that preview.
 -->
-<script lang="ts">
-  import { untrack } from 'svelte';
-  import { previewValues, type ComponentDef, type ComponentValues } from '../render/registry.js';
-  import { buildComponentInsert } from '../render/component-insert.js';
-  import type { IconSet } from '../render/glyph.js';
-  import IconPicker from './IconPicker.svelte';
-
-  interface Props {
-    def: ComponentDef;
-    icons?: IconSet;
-    /** Called with the serialized markdown when the form validates. */
-    onInsert: (markdown: string) => void;
-    /** The live working values, bound out so a host (the dialog) can render a preview from them. */
-    values?: ComponentValues;
-    /** True while a required attribute or slot is still empty, bound out so the host's preview can
-     *  show the incomplete state and the host can mirror the disabled Insert. */
-    incomplete?: boolean;
-    /** Seed the working values from these instead of the schema's preview sample. The dialog passes
-     *  it in edit mode to re-open a placed component into its own values; the catalog insert path
-     *  leaves it unset and keeps the previewValues seed. */
-    initial?: ComponentValues;
-    /** The submit button's label. The dialog passes 'Update' in edit mode; the insert path keeps
-     *  the default. */
-    submitLabel?: string;
-  }
-
-  let {
-    def,
-    icons,
-    onInsert,
-    values = $bindable(),
-    incomplete = $bindable(),
-    initial,
-    submitLabel = 'Insert',
-  }: Props = $props();
-
-  // Working values, seeded once from `initial` in edit mode, otherwise from the schema and any
-  // declared preview sample. $state makes the nested records deeply reactive. untrack marks the
-  // seed as a deliberate one-time read, not a reactive miss. previewValues falls back to
-  // emptyValues when no preview.
-  let working = $state(untrack(() => initial ?? previewValues(def)));
-  // Mirror the working values out to the bindable prop so the dialog's preview reads them live.
-  $effect(() => {
-    values = working;
-  });
-
-  const attributes = $derived(def.attributes ?? []);
-  // Non-repeatable slots render here; the repeatable list is handled separately.
-  const flatSlots = $derived((def.slots ?? []).filter((s) => s.kind !== 'repeatable'));
-  const repeatableSlots = $derived((def.slots ?? []).filter((s) => s.kind === 'repeatable'));
-
-  // The live $state proxy array for a repeatable slot, so push/splice stay reactive.
-  function slotItems(name: string): string[] {
-    const v = working.slots[name];
-    return Array.isArray(v) ? v : [];
+<script lang="ts">import { untrack } from "svelte";
+import { previewValues } from "../render/registry.js";
+import { buildComponentInsert } from "../render/component-insert.js";
+import IconPicker from "./IconPicker.svelte";
+let {
+  def,
+  icons,
+  onInsert,
+  values = $bindable(),
+  incomplete = $bindable(),
+  initial,
+  submitLabel = "Insert"
+} = $props();
+let working = $state(untrack(() => initial ?? previewValues(def)));
+$effect(() => {
+  values = working;
+});
+const attributes = $derived(def.attributes ?? []);
+const flatSlots = $derived((def.slots ?? []).filter((s) => s.kind !== "repeatable"));
+const repeatableSlots = $derived((def.slots ?? []).filter((s) => s.kind === "repeatable"));
+function slotItems(name) {
+  const v = working.slots[name];
+  return Array.isArray(v) ? v : [];
+}
+let nextId = 0;
+const itemIds = $state(
+  untrack(
+    () => Object.fromEntries(
+      (def.slots ?? []).filter((s) => s.kind === "repeatable").map((s) => {
+        const seeded = working.slots[s.name];
+        const count = Array.isArray(seeded) ? seeded.length : 0;
+        return [s.name, Array.from({ length: count }, () => nextId++)];
+      })
+    )
+  )
+);
+function slotIds(name) {
+  return itemIds[name] ?? [];
+}
+function addItem(name) {
+  slotItems(name).push("");
+  slotIds(name).push(nextId++);
+}
+function removeItem(name, index) {
+  slotItems(name).splice(index, 1);
+  slotIds(name).splice(index, 1);
+}
+function rowLabel(slot, value, index) {
+  const fallback = `${slot.label} ${index + 1}`;
+  if (!slot.itemLabel) return fallback;
+  const key = slot.itemFields?.[0]?.key ?? "text";
+  const derived = slot.itemLabel({ [key]: value }, index);
+  return derived && derived.trim() ? derived : fallback;
+}
+function asString(key) {
+  const v = working.attributes[key];
+  return typeof v === "string" ? v : "";
+}
+function asBool(key) {
+  return working.attributes[key] === true;
+}
+function slotString(name) {
+  const v = working.slots[name];
+  return typeof v === "string" ? v : "";
+}
+const incompleteState = $derived.by(() => {
+  for (const field of attributes) {
+    if (!field.required || field.type === "boolean") continue;
+    if (asString(field.key) === "") return true;
   }
-
-  // Stable per-item ids run parallel to each repeatable slot's value array, so the {#each} keys by
-  // identity instead of index. A mid-list removal then drops the right DOM node and the focused
-  // item follows the data. Ids come from a monotonic module-local counter, never Math.random or
-  // Date.now. The value arrays in working.slots stay the canonical string lists serializeComponent
-  // reads, so the emitted markdown is unchanged. The preview seed can fill a repeatable slot, so
-  // each seeded item needs a parallel id from the start.
-  let nextId = 0;
-  const itemIds = $state<Record<string, number[]>>(
-    untrack(() =>
-      Object.fromEntries(
-        (def.slots ?? [])
-          .filter((s) => s.kind === 'repeatable')
-          .map((s) => {
-            const seeded = working.slots[s.name];
-            const count = Array.isArray(seeded) ? seeded.length : 0;
-            return [s.name, Array.from({ length: count }, () => nextId++)];
-          }),
-      ),
-    ),
-  );
-
-  // previewValues and the itemIds seed both cover every repeatable slot, so this read always hits.
-  function slotIds(name: string): number[] {
-    return itemIds[name] ?? [];
+  for (const slot of def.slots ?? []) {
+    if (!slot.required) continue;
+    const v = working.slots[slot.name];
+    const filled = Array.isArray(v) ? v.some((i) => i !== "") : typeof v === "string" && v !== "";
+    if (!filled) return true;
   }
-
-  function addItem(name: string): void {
-    slotItems(name).push('');
-    slotIds(name).push(nextId++);
-  }
-
-  function removeItem(name: string, index: number): void {
-    slotItems(name).splice(index, 1);
-    slotIds(name).splice(index, 1);
-  }
-
-  // The row label for a repeatable item: the slot's itemLabel over the item's values and index,
-  // falling back to `${label} ${i + 1}` when it returns nothing. v1 repeatable items hold a single
-  // string under the first item field's key, so the item record passed to itemLabel carries it.
-  function rowLabel(slot: (typeof repeatableSlots)[number], value: string, index: number): string {
-    const fallback = `${slot.label} ${index + 1}`;
-    if (!slot.itemLabel) return fallback;
-    const key = slot.itemFields?.[0]?.key ?? 'text';
-    const derived = slot.itemLabel({ [key]: value }, index);
-    return derived && derived.trim() ? derived : fallback;
-  }
-
-  // Typed accessors over the unions so explicit value targets stay sound.
-  function asString(key: string): string {
-    const v = working.attributes[key];
-    return typeof v === 'string' ? v : '';
-  }
-  function asBool(key: string): boolean {
-    return working.attributes[key] === true;
-  }
-  function slotString(name: string): string {
-    const v = working.slots[name];
-    return typeof v === 'string' ? v : '';
-  }
-
-  // A required attribute is unmet only for a text/select/icon field left empty; a boolean is always
-  // met (its false is a real choice). A required slot is unmet when its string is empty or its
-  // repeatable list has no non-empty item. This drives the asterisk-marked fields, the disabled
-  // Insert, and (through the bound `incomplete`) the dialog's incomplete preview state.
-  const incompleteState = $derived.by(() => {
-    for (const field of attributes) {
-      if (!field.required || field.type === 'boolean') continue;
-      if (asString(field.key) === '') return true;
+  return false;
+});
+$effect(() => {
+  incomplete = incompleteState;
+});
+let submitErrors = $state({});
+let touched = $state({});
+function markTouched(key) {
+  touched[key] = true;
+}
+const errors = $derived.by(() => {
+  const out = {};
+  for (const field of attributes) {
+    if (field.required && field.type !== "boolean" && touched[field.key] && asString(field.key) === "") {
+      out[field.key] = `${field.label} is required.`;
     }
-    for (const slot of def.slots ?? []) {
-      if (!slot.required) continue;
-      const v = working.slots[slot.name];
-      const filled = Array.isArray(v) ? v.some((i) => i !== '') : typeof v === 'string' && v !== '';
-      if (!filled) return true;
-    }
-    return false;
-  });
-  $effect(() => {
-    incomplete = incompleteState;
-  });
-
-  // Field-keyed validation errors from the last submit (pattern, validate, select-domain), keyed by
-  // attribute key or slot name.
-  let submitErrors = $state<Record<string, string>>({});
-
-  // Fields the editor has touched, so a required-empty error shows after interaction rather than on
-  // a fresh open. Keyed by attribute key or slot name.
-  let touched = $state<Record<string, boolean>>({});
-  function markTouched(key: string): void {
-    touched[key] = true;
   }
-
-  // The visible field errors. Only the required-empty message ("{label} is required.") shows live,
-  // for a touched-and-empty required field; pattern and validate errors surface on submit. Both are
-  // merged here, the submit errors last so a pattern or validate message wins. Insert stays disabled
-  // while incompleteState holds, so a required-empty field never serializes; this surfaces the why
-  // next to the field meanwhile.
-  const errors = $derived.by(() => {
-    const out: Record<string, string> = {};
-    for (const field of attributes) {
-      if (field.required && field.type !== 'boolean' && touched[field.key] && asString(field.key) === '') {
-        out[field.key] = `${field.label} is required.`;
-      }
-    }
-    for (const slot of def.slots ?? []) {
-      if (!slot.required) continue;
-      const v = working.slots[slot.name];
-      const filled = Array.isArray(v) ? v.some((i) => i !== '') : typeof v === 'string' && v !== '';
-      if (touched[slot.name] && !filled) out[slot.name] = `${slot.label} is required.`;
-    }
-    return { ...out, ...submitErrors };
-  });
-
-  // The form container. Once it is bound, focus its first focusable control so the editor types
-  // straight into the form. The effect tracks formEl so it runs when the node lands; the focus call
-  // is untracked so a later value change does not steal focus back to the first field.
-  let formEl = $state<HTMLElement | null>(null);
-  $effect(() => {
-    if (!formEl) return;
-    untrack(() => formEl!.querySelector<HTMLElement>('input, select, textarea')?.focus());
-  });
-
-  // Serialize and validate through the pure helper. On success clear errors and emit the markdown;
-  // on failure keep the field-keyed errors so each field can show its message and insert nothing.
-  async function submit() {
-    const result = await buildComponentInsert(def, working);
-    if (result.ok) {
-      submitErrors = {};
-      onInsert(result.markdown);
-    } else {
-      submitErrors = result.errors;
-    }
+  for (const slot of def.slots ?? []) {
+    if (!slot.required) continue;
+    const v = working.slots[slot.name];
+    const filled = Array.isArray(v) ? v.some((i) => i !== "") : typeof v === "string" && v !== "";
+    if (touched[slot.name] && !filled) out[slot.name] = `${slot.label} is required.`;
+  }
+  return { ...out, ...submitErrors };
+});
+let formEl = $state(null);
+$effect(() => {
+  if (!formEl) return;
+  untrack(() => formEl.querySelector("input, select, textarea")?.focus());
+});
+async function submit() {
+  const result = await buildComponentInsert(def, working);
+  if (result.ok) {
+    submitErrors = {};
+    onInsert(result.markdown);
+  } else {
+    submitErrors = result.errors;
   }
+}
 </script>
 
 <div class="flex flex-col gap-3" bind:this={formEl}>