@glw907/cairn-cms 0.56.0 → 0.56.2

package/CHANGELOG.md

@@ -2,6 +2,67 @@
 
 All notable changes to this project are recorded here, most recent first.
 
+## 0.56.2
+
+The component insert picker gains a live preview and round-trip editing, and the component contract
+grows the optional fields that make a good picker possible. These refine the existing
+component-editing surface and are all additive, so it is a patch; existing definitions compile
+unchanged with no action required.
+
+How the design was reached. Two research arms ran first. One surveyed how comparable systems build
+their insert pickers (Gutenberg, Sanity, Wagtail, Payload, Contentful, Builder, and the git-backed and
+document tools). The other hunted documented complaints from both the editor and the developer, then
+paired each with a correction. Five pains recur across systems that share no code, and cairn already
+beats four of them by its existing architecture: a single `ComponentDef` co-locates render and schema
+(no schema-render drift), content is markdown in git (no database-migration tax), and the parser reads
+real directives (lossless re-edit stays reachable). The fifth pain, configuring a block without seeing
+the result, no system has solved. An adversarial critique of the first mockup then caught the preview
+faked with static HTML and an ironic "Untitled" placeholder, which the shipped design corrects.
+
+What an editor gets. The picker lists components in one column, grouped under headings, each row a
+glyph, a description, and a line on when to reach for it; a search box appears once a site declares
+more than eight. Picking a component that declares a `preview` opens a two-pane configure step: the
+fill form on the left, and on the right the configured component rendered through the site's own
+pipeline, the same machinery the edit page preview uses. This is the part no comparable CMS offers,
+and cairn can offer it because it already owns the render path. The preview settles on a debounce
+rather than re-rendering on every keystroke, and it stays honest: a still-empty required field shows
+the skeleton with the empty region called out rather than a fabricated result, and a render that
+throws shows a failed-to-render surface and keeps the form. A component that declares no `preview`
+keeps the single-column form. Required fields are marked and block Insert with inline messages, and
+the modal collapses to one column on a narrow screen.
+
+Round-trip editing closes the loop. With the cursor in a placed component, an Edit block control opens
+it back into the same guided form, pre-filled, and Update rewrites that block in place. It is offered
+only when the round-trip is provably lossless for that block: one that carries an attribute or a child
+the component does not declare is left for hand-editing rather than silently rewritten, the failure
+that corrupts content in the git-backed editors the research surveyed. A guided edit that does run
+preserves content and normalizes formatting to the canonical serialization. A consumer site that
+mounts `CairnAdmin` gets this with no change.
+
+For consumers, the `ComponentDef` contract gains optional fields, so existing definitions compile
+unchanged with no action required:
+
+- `icon` shows a glyph from the site icon set beside the label in the picker.
+- `group` puts a component under a category heading, in declaration order.
+- `hidden` keeps a component out of the top-level picker (for a nested-only component).
+- `preview` is a structured sample (`attributes` and `slots`) the picker seeds the form with and
+  renders. Declaring it is what opts a component into the two-pane preview layout.
+- `pattern` and `validate` on an attribute field add inline validation, the regex case and a pure
+  cross-field escape hatch.
+- `itemLabel` on a repeatable slot derives a row's label, so a list of items is not a column of blanks.
+
+Round-trip editing of a placed component, a persistent catalog rail, and a slash-trigger are designed
+for but deferred to a later pass.
+
+## 0.56.1
+
+Test and CI reliability only; the published library is unchanged from 0.56.0. The component test job
+flaked in CI on the editor's heavier pages because the editor's per-browser preferences live in
+localStorage and nothing cleared it between tests, so a leaked zen preference could hide the toolbar a
+later test waited for. localStorage is now isolated before each component test, with a regression
+guard, plus a retry on the browser test project and steadier waits in the insert-dialog tests. No
+consumer action.
+
 ## 0.56.0
 
 Two passes ship together: the markdown editor's folding gets a proper home, and the engine's gates,

package/README.md

@@ -52,9 +52,16 @@ doesn't, cairn is the wrong tool and will not try to meet you halfway.
 
 ## Status
 
-cairn-cms runs the two production sites above. It is `0.x` and breaks between minor versions,
-so pin a caret range and read the [CHANGELOG](./CHANGELOG.md) before bumping; every breaking
-entry carries a "Consumers must" line. The author is still working through the core-feature
+cairn-cms runs the two production sites above. It is `0.x`, and the version position signals scale.
+A minor bump (`0.X.0`) is reserved for a new subsystem or public surface that did not exist before,
+such as a new entry point, a new content concept, or the scaffolder, and it may break. Everything
+that refines, extends, or adds an affordance to a surface that already exists (the editor, the admin,
+auth, delivery) is a patch (`0.X.Y`), even when it gives an editor a new thing to do; a redesign, a
+round-trip edit on an existing surface, or a new optional config field is a patch. When the call is
+unclear, it is a patch. A minor release carries a `<!-- release-size: minor -->` marker in its
+CHANGELOG entry, which the `check:version` gate requires, so a minor is always a deliberate,
+documented choice. Pin a caret range and read the [CHANGELOG](./CHANGELOG.md) before taking a minor;
+every breaking entry carries a "Consumers must" line. The author is still working through the core-feature
 [ROADMAP](./ROADMAP.md), and the project stays closely held until that core lands. A
 contributor who feels inspired is welcome to open an issue or a discussion; there is no
 formal contribution process yet, so this is not an open call for pull requests.

package/dist/components/ComponentForm.svelte

@@ -1,13 +1,17 @@
 <!--
 @component
-The schema-driven fill form for one component. It holds the working ComponentValues, seeded from
-emptyValues(def), and renders attribute fields and the title/body and other non-repeatable slots.
-Submit (Task 6) serializes and validates through buildComponentInsert and calls onInsert with the
-markdown. Back returns to the picker. This is not a nested HTML form; Insert calls a callback.
+The schema-driven fill form for one component, the left column of the configure step. It holds the
+working ComponentValues, seeded from previewValues(def) (the emptyValues base with any declared
+preview sample overlaid), and renders attribute fields and the title/body and other slots. Required
+fields carry an asterisk and aria-required, and Insert disables while any required field is empty.
+Submit serializes and validates through buildComponentInsert and calls onInsert with the markdown.
+This is not a nested HTML form; Insert calls a callback. The dialog owns the header (the Insert >
+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 { emptyValues, type ComponentDef } from '../render/registry.js';
+  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';
@@ -17,15 +21,39 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
     icons?: IconSet;
     /** Called with the serialized markdown when the form validates. */
     onInsert: (markdown: string) => void;
-    /** Return to the picker. */
-    onBack: () => 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, onBack }: Props = $props();
+  let {
+    def,
+    icons,
+    onInsert,
+    values = $bindable(),
+    incomplete = $bindable(),
+    initial,
+    submitLabel = 'Insert',
+  }: Props = $props();
 
-  // Working values, seeded once from the schema. $state makes the nested records deeply reactive.
-  // untrack marks the seed as a deliberate one-time read of the initial def, not a reactive miss.
-  let values = $state(untrack(() => emptyValues(def)));
+  // 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.
@@ -34,22 +62,32 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
 
   // The live $state proxy array for a repeatable slot, so push/splice stay reactive.
   function slotItems(name: string): string[] {
-    const v = values.slots[name];
+    const v = working.slots[name];
     return Array.isArray(v) ? v : [];
   }
 
   // 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 values.slots stay the canonical string lists serializeComponent
-  // reads, so the emitted markdown is unchanged. emptyValues seeds every repeatable slot to [], so
-  // the id lists start empty and stay in lockstep with the values through addItem/removeItem.
+  // 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) => [s.name, []]))),
+    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++)];
+          }),
+      ),
+    ),
   );
 
-  // emptyValues and the itemIds seed both cover every repeatable slot, so this read always hits.
+  // previewValues and the itemIds seed both cover every repeatable slot, so this read always hits.
   function slotIds(name: string): number[] {
     return itemIds[name] ?? [];
   }
@@ -64,41 +102,106 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
     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 = values.attributes[key];
+    const v = working.attributes[key];
     return typeof v === 'string' ? v : '';
   }
   function asBool(key: string): boolean {
-    return values.attributes[key] === true;
+    return working.attributes[key] === true;
   }
   function slotString(name: string): string {
-    const v = values.slots[name];
+    const v = working.slots[name];
     return typeof v === 'string' ? v : '';
   }
 
-  // Field-keyed validation errors from the last submit, keyed by attribute key or slot name.
-  let errors = $state<Record<string, string>>({});
+  // 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;
+    }
+    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, values);
+    const result = await buildComponentInsert(def, working);
     if (result.ok) {
-      errors = {};
+      submitErrors = {};
       onInsert(result.markdown);
     } else {
-      errors = result.errors;
+      submitErrors = result.errors;
     }
   }
 </script>
 
-<div class="flex flex-col gap-3">
-  <div class="flex items-center justify-between">
-    <h3 class="text-sm font-semibold">{def.label}</h3>
-    <button type="button" class="btn btn-ghost btn-xs" onclick={onBack}>Back</button>
-  </div>
-
+<div class="flex flex-col gap-3" bind:this={formEl}>
   {#each attributes as field (field.key)}
     {#if field.type === 'boolean'}
       <label class="label cursor-pointer justify-start gap-2">
@@ -108,19 +211,24 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
           aria-invalid={Boolean(errors[field.key])}
           aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
           checked={asBool(field.key)}
-          onchange={(e) => (values.attributes[field.key] = e.currentTarget.checked)}
+          onchange={(e) => (working.attributes[field.key] = e.currentTarget.checked)}
         />
         <span class="text-sm">{field.label}</span>
       </label>
     {:else if field.type === 'select'}
       <label class="flex flex-col gap-1">
-        <span class="text-sm font-medium">{field.label}</span>
+        <span class="text-sm font-medium">{field.label}{#if field.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</span>
         <select
           class="select"
+          aria-required={field.required ? 'true' : undefined}
           aria-invalid={Boolean(errors[field.key])}
           aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
           value={asString(field.key)}
-          onchange={(e) => (values.attributes[field.key] = e.currentTarget.value)}
+          onchange={(e) => {
+            working.attributes[field.key] = e.currentTarget.value;
+            markTouched(field.key);
+          }}
+          onblur={() => markTouched(field.key)}
         >
           {#if !field.required}<option value="">—</option>{/if}
           {#each field.options ?? [] as opt (opt)}<option value={opt}>{opt}</option>{/each}
@@ -128,24 +236,29 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
       </label>
     {:else if field.type === 'icon' && icons}
       <div class="flex flex-col gap-1">
-        <span class="text-sm font-medium">{field.label}</span>
+        <span class="text-sm font-medium">{field.label}{#if field.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</span>
         <IconPicker
           {icons}
           label={field.label}
           value={asString(field.key)}
           required={field.required ?? false}
-          onChange={(name) => (values.attributes[field.key] = name)}
+          onChange={(name) => (working.attributes[field.key] = name)}
         />
       </div>
     {:else}
       <label class="flex flex-col gap-1">
-        <span class="text-sm font-medium">{field.label}</span>
+        <span class="text-sm font-medium">{field.label}{#if field.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</span>
         <input
           class="input"
+          aria-required={field.required ? 'true' : undefined}
           aria-invalid={Boolean(errors[field.key])}
           aria-describedby={errors[field.key] ? `err-${field.key}` : undefined}
           value={asString(field.key)}
-          oninput={(e) => (values.attributes[field.key] = e.currentTarget.value)}
+          oninput={(e) => {
+            working.attributes[field.key] = e.currentTarget.value;
+            markTouched(field.key);
+          }}
+          onblur={() => markTouched(field.key)}
         />
       </label>
     {/if}
@@ -155,25 +268,35 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
   {#each flatSlots as slot (slot.name)}
     {#if slot.kind === 'markdown'}
       <label class="flex flex-col gap-1">
-        <span class="text-sm font-medium">{slot.label}</span>
+        <span class="text-sm font-medium">{slot.label}{#if slot.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</span>
         <textarea
           class="textarea"
+          aria-required={slot.required ? 'true' : undefined}
           aria-invalid={Boolean(errors[slot.name])}
           aria-describedby={errors[slot.name] ? `err-${slot.name}` : undefined}
           rows={3}
           value={slotString(slot.name)}
-          oninput={(e) => (values.slots[slot.name] = e.currentTarget.value)}
+          oninput={(e) => {
+            working.slots[slot.name] = e.currentTarget.value;
+            markTouched(slot.name);
+          }}
+          onblur={() => markTouched(slot.name)}
         ></textarea>
       </label>
     {:else}
       <label class="flex flex-col gap-1">
-        <span class="text-sm font-medium">{slot.label}</span>
+        <span class="text-sm font-medium">{slot.label}{#if slot.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</span>
         <input
           class="input"
+          aria-required={slot.required ? 'true' : undefined}
           aria-invalid={Boolean(errors[slot.name])}
           aria-describedby={errors[slot.name] ? `err-${slot.name}` : undefined}
           value={slotString(slot.name)}
-          oninput={(e) => (values.slots[slot.name] = e.currentTarget.value)}
+          oninput={(e) => {
+            working.slots[slot.name] = e.currentTarget.value;
+            markTouched(slot.name);
+          }}
+          onblur={() => markTouched(slot.name)}
         />
       </label>
     {/if}
@@ -184,11 +307,17 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
     {@const items = slotItems(slot.name)}
     {@const ids = slotIds(slot.name)}
     <fieldset class="rounded-box border border-[var(--cairn-card-border)] flex flex-col gap-2 p-2">
-      <legend class="text-sm font-medium">{slot.label}</legend>
-      <!-- Keyed by the parallel stable id so a mid-list removal drops the right node and focus follows the data; the value still binds to the canonical items[i] string the serializer reads. -->
+      <legend class="text-sm font-medium">{slot.label}{#if slot.required}<span data-testid="cairn-pk-req" class="text-error" aria-hidden="true">*</span>{/if}</legend>
+      <!-- Keyed by the parallel stable id so a mid-list removal drops the right node and focus follows the data; the value still binds to the canonical items[i] string the serializer reads. The visible row tag derives from itemLabel, falling back to the indexed label. -->
       {#each ids as id, i (id)}
+        {@const label = rowLabel(slot, items[i] ?? '', i)}
         <div class="flex items-center gap-2">
-          <input class="input input-sm flex-1" aria-label={`${slot.label} ${i + 1}`} bind:value={items[i]} />
+          <span class="flex-none text-xs text-[var(--color-muted)]">{label}</span>
+          <input
+            class="input input-sm flex-1"
+            aria-label={`${slot.label} ${i + 1}`}
+            bind:value={items[i]}
+          />
           <button type="button" class="btn btn-ghost btn-sm" aria-label={`Remove item ${i + 1}`} onclick={() => removeItem(slot.name, i)}>✕</button>
         </div>
       {/each}
@@ -197,5 +326,5 @@ markdown. Back returns to the picker. This is not a nested HTML form; Insert cal
     </fieldset>
   {/each}
 
-  <button type="button" class="btn btn-primary btn-sm mt-2" onclick={submit}>Insert</button>
+  <button type="button" class="btn btn-primary btn-sm mt-2 self-start" disabled={incompleteState} onclick={submit}>{submitLabel}</button>
 </div>

package/dist/components/ComponentForm.svelte.d.ts

@@ -1,19 +1,33 @@
-import { type ComponentDef } from '../render/registry.js';
+import { type ComponentDef, type ComponentValues } from '../render/registry.js';
 import type { IconSet } from '../render/glyph.js';
 interface Props {
     def: ComponentDef;
     icons?: IconSet;
     /** Called with the serialized markdown when the form validates. */
     onInsert: (markdown: string) => void;
-    /** Return to the picker. */
-    onBack: () => 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;
 }
 /**
- * The schema-driven fill form for one component. It holds the working ComponentValues, seeded from
- * emptyValues(def), and renders attribute fields and the title/body and other non-repeatable slots.
- * Submit (Task 6) serializes and validates through buildComponentInsert and calls onInsert with the
- * markdown. Back returns to the picker. This is not a nested HTML form; Insert calls a callback.
+ * The schema-driven fill form for one component, the left column of the configure step. It holds the
+ * working ComponentValues, seeded from previewValues(def) (the emptyValues base with any declared
+ * preview sample overlaid), and renders attribute fields and the title/body and other slots. Required
+ * fields carry an asterisk and aria-required, and Insert disables while any required field is empty.
+ * Submit serializes and validates through buildComponentInsert and calls onInsert with the markdown.
+ * This is not a nested HTML form; Insert calls a callback. The dialog owns the header (the Insert >
+ * 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.
  */
-declare const ComponentForm: import("svelte").Component<Props, {}, "">;
+declare const ComponentForm: import("svelte").Component<Props, {}, "incomplete" | "values">;
 type ComponentForm = ReturnType<typeof ComponentForm>;
 export default ComponentForm;