@glw907/cairn-cms 0.59.0 → 0.60.1

package/dist/components/ComponentInsertDialog.svelte

@@ -5,304 +5,184 @@ intended use. A component with a schema opens the guided ComponentForm; a templa
 inserts directly; a component with neither is not listed. Built on a native <dialog> for focus
 trapping and Escape, following the dropdown's a11y conventions used elsewhere in the admin.
 -->
-<script module lang="ts">
-  import type { ComponentRegistry, ComponentDef } from '../render/registry.js';
-
-  /** Past this many actionable components, the catalog grows a search input. Below it search is
-   *  noise over a list short enough to scan. */
-  const SEARCH_THRESHOLD = 8;
-
-  /** Whether a def carries a schema (any attribute or slot), so it opens the guided form rather
-   *  than inserting a bare template. Exported so a host deciding on its own guided-edit affordance
-   *  (the edit page's Edit-block control) reads the same notion the dialog lists and chooses by. */
-  export function hasSchema(def: ComponentDef): boolean {
-    return (def.attributes?.length ?? 0) > 0 || (def.slots?.length ?? 0) > 0;
-  }
-  /** The registry's pickable components. A def is actionable when a schema opens the guided form or
-   *  a template inserts directly; a def with neither is not listed. A `hidden` def is then dropped,
-   *  so the hidden filter applies after the actionable one. Exported so a host rendering its own
-   *  trigger (the edit page's toolbar) can hide it under the same condition the dialog uses. */
-  export function insertableDefs(registry?: ComponentRegistry): ComponentDef[] {
-    return (registry?.defs ?? []).filter(
-      (def) => (hasSchema(def) || Boolean(def.insertTemplate)) && !def.hidden,
-    );
-  }
-
-  /** A heading-bearing group of rows. A group with an empty heading renders without an eyebrow.
-   *  Groups appear in first-declared order, and rows keep declaration order within each group. */
-  interface CatalogGroup {
-    heading: string;
-    defs: ComponentDef[];
-  }
-
-  /** Partition the defs into groups by `def.group`, preserving declaration order of both the
-   *  groups (first time a group name is seen) and the rows within a group. A def with no `group`
-   *  collects into one leading default group with no heading. */
-  function groupDefs(defs: ComponentDef[]): CatalogGroup[] {
-    const order: string[] = [];
-    const byHeading = new Map<string, ComponentDef[]>();
-    for (const def of defs) {
-      const heading = def.group ?? '';
-      if (!byHeading.has(heading)) {
-        byHeading.set(heading, []);
-        order.push(heading);
-      }
-      byHeading.get(heading)!.push(def);
+<script module lang="ts">const SEARCH_THRESHOLD = 8;
+export function hasSchema(def) {
+  return (def.attributes?.length ?? 0) > 0 || (def.slots?.length ?? 0) > 0;
+}
+export function insertableDefs(registry) {
+  return (registry?.defs ?? []).filter(
+    (def) => (hasSchema(def) || Boolean(def.insertTemplate)) && !def.hidden
+  );
+}
+function groupDefs(defs) {
+  const order = [];
+  const byHeading = /* @__PURE__ */ new Map();
+  for (const def of defs) {
+    const heading = def.group ?? "";
+    if (!byHeading.has(heading)) {
+      byHeading.set(heading, []);
+      order.push(heading);
     }
-    return order.map((heading) => ({ heading, defs: byHeading.get(heading)! }));
+    byHeading.get(heading).push(def);
   }
+  return order.map((heading) => ({ heading, defs: byHeading.get(heading) }));
+}
 </script>
 
-<script lang="ts">
-  import { tick } from 'svelte';
-  import type { IconSet } from '../render/glyph.js';
-  import type { ComponentValues } from '../render/registry.js';
-  import type { ResolvedPreview } from '../content/types.js';
-  import type { LinkResolve } from '../content/links.js';
-  import { serializeComponent } from '../render/component-grammar.js';
-  import { buildPreviewDoc } from './preview-doc.js';
-  import ComponentForm from './ComponentForm.svelte';
-
-  interface Props {
-    /** The site's component registry. */
-    registry?: ComponentRegistry;
-    /** Insert markdown at the editor cursor. */
-    insert: (text: string) => void;
-    /** Replace the placed component's source span with new markdown. Edit mode routes submit here
-     *  instead of insert. Optional: a host that never opens edit mode passes none. */
-    update?: (range: { from: number; to: number }, markdown: string) => void;
-    /** The site's icon set, for icon fields. */
-    icons?: IconSet;
-    /** The site's design-accurate render pipeline. When present and the picked component declares a
-     *  `preview`, the configure step splits to two panes and renders the configured directive
-     *  through this into a sandboxed iframe (the same path EditPage's preview uses). Optional: a
-     *  host that passes none simply gets no preview pane. */
-    render?: (md: string, opts?: { stagger?: boolean; resolve?: LinkResolve }) => string | Promise<string>;
-    /** The adapter's resolved preview knob (stylesheets and container class), threaded to
-     *  buildPreviewDoc so the preview frame links the site's own CSS, the same as EditPage. */
-    preview?: ResolvedPreview | null;
-    /** Disable the trigger; the host sets it while Preview shows. */
-    disabled?: boolean;
-    /** Render the built-in Insert block trigger. False mounts only the dialog, for a host that
-     *  supplies its own trigger and opens the dialog through the exported open(). */
-    trigger?: boolean;
+<script lang="ts">import { tick } from "svelte";
+import { serializeComponent } from "../render/component-grammar.js";
+import { buildPreviewDoc } from "./preview-doc.js";
+import ComponentForm from "./ComponentForm.svelte";
+let { registry, insert, update, icons, render, preview = null, disabled = false, trigger = true } = $props();
+let dialog = $state(null);
+let picked = $state(null);
+let query = $state("");
+let searchInput = $state(null);
+let editValues = $state(null);
+let editRange = $state(null);
+const editing = $derived(editValues !== null);
+let formValues = $state(void 0);
+let formIncomplete = $state(false);
+const twoPane = $derived(Boolean(picked?.preview) && Boolean(render));
+let previewState = $state("settled");
+let previewDoc = $state("");
+const emptyRequired = $derived.by(() => {
+  if (!picked || !formValues) return [];
+  const out = [];
+  for (const field of picked.attributes ?? []) {
+    if (!field.required || field.type === "boolean") continue;
+    const v = formValues.attributes[field.key];
+    if (typeof v !== "string" || v === "") out.push(field.label);
   }
-
-  let { registry, insert, update, icons, render, preview = null, disabled = false, trigger = true }: Props = $props();
-
-  let dialog = $state<HTMLDialogElement | null>(null);
-  let picked = $state<ComponentDef | null>(null);
-  let query = $state('');
-  let searchInput = $state<HTMLInputElement | null>(null);
-
-  // Edit mode re-opens a placed component into the same guided form. editValues seeds the form from
-  // the parsed block (not the catalog pick path), and editRange is the source span Update replaces.
-  // Both are null in the catalog insert flow. resetPreview clears them so a fresh open is clean.
-  let editValues = $state<ComponentValues | null>(null);
-  let editRange = $state<{ from: number; to: number } | null>(null);
-  const editing = $derived(editValues !== null);
-
-  // The form's live values and its required-empty state, bound out of ComponentForm so the preview
-  // pane can render from them and mirror the incomplete state.
-  let formValues = $state<ComponentValues | undefined>(undefined);
-  let formIncomplete = $state(false);
-
-  // Two-pane configure is opt-in: it appears only when the picked component declares a `preview`
-  // AND a render function is threaded. Otherwise the configure step stays single column.
-  const twoPane = $derived(Boolean(picked?.preview) && Boolean(render));
-
-  // The preview pane's settle state, the honest chip the mockup names. The empty/incomplete state
-  // wins over settling so the pane never claims to settle a fabricated block.
-  type PreviewState = 'settling' | 'settled' | 'failed';
-  let previewState = $state<PreviewState>('settled');
-  let previewDoc = $state('');
-
-  // The required regions left empty, named for the incomplete-state callout. A boolean attribute is
-  // always met; a text/select/icon attribute or a slot is unmet when empty.
-  const emptyRequired = $derived.by(() => {
-    if (!picked || !formValues) return [] as string[];
-    const out: string[] = [];
-    for (const field of picked.attributes ?? []) {
-      if (!field.required || field.type === 'boolean') continue;
-      const v = formValues.attributes[field.key];
-      if (typeof v !== 'string' || v === '') out.push(field.label);
-    }
-    for (const slot of picked.slots ?? []) {
-      if (!slot.required) continue;
-      const v = formValues.slots[slot.name];
-      const filled = Array.isArray(v) ? v.some((i) => i !== '') : typeof v === 'string' && v !== '';
-      if (!filled) out.push(slot.label);
-    }
-    return out;
-  });
-
-  // The debounced, latest-wins preview render, the same shape EditPage's preview effect uses: a
-  // setTimeout debounce (~200ms) guarded by a plain counter so a slow earlier render that resolves
-  // after a newer one started is discarded, one persistent iframe whose srcdoc is replaced. The
-  // incomplete state short-circuits the render (the skeleton renders from the template, not the
-  // pipeline), so a required-empty block never reaches the site render as a fabricated finish.
-  let previewRun = 0;
-  $effect(() => {
-    if (!twoPane || !render || !picked || !formValues) return;
-    if (formIncomplete) {
-      previewState = 'settled';
-      previewRun++;
-      return;
-    }
-    const md = serializeComponent(picked, formValues);
-    const run = ++previewRun;
-    previewState = 'settling';
-    const handle = setTimeout(async () => {
-      try {
-        const html = await render(md);
-        if (run === previewRun) {
-          previewDoc = buildPreviewDoc(html, preview);
-          previewState = 'settled';
-        }
-      } catch {
-        if (run === previewRun) {
-          previewState = 'failed';
-        }
-      }
-    }, 200);
-    return () => {
-      clearTimeout(handle);
-      previewRun++;
-    };
-  });
-
-  const defs = $derived(insertableDefs(registry));
-  /** The catalog grows a search input only once the actionable count crosses the threshold. */
-  const showSearch = $derived(defs.length > SEARCH_THRESHOLD);
-  /** The defs matching the live query, by label or description (case-insensitive). With no query
-   *  the whole catalog shows. */
-  const filtered = $derived.by(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return defs;
-    return defs.filter(
-      (def) =>
-        def.label.toLowerCase().includes(q) || (def.description ?? '').toLowerCase().includes(q),
-    );
-  });
-  const groups = $derived(groupDefs(filtered));
-
-  /** Clear the four preview-coupled state cells so no stale preview HTML or settle state survives a
-   *  re-open, a step back, or a fresh pick. Called from every transition that leaves the configure
-   *  step or starts a new one. */
-  function resetPreview() {
-    formValues = undefined;
-    formIncomplete = false;
-    previewState = 'settled';
-    previewDoc = '';
-    editValues = null;
-    editRange = null;
+  for (const slot of picked.slots ?? []) {
+    if (!slot.required) continue;
+    const v = formValues.slots[slot.name];
+    const filled = Array.isArray(v) ? v.some((i) => i !== "") : typeof v === "string" && v !== "";
+    if (!filled) out.push(slot.label);
   }
-
-  /** Open the picker. Exported so a trigger={false} host can drive the dialog itself. */
-  export function open() {
-    picked = null;
-    query = '';
-    resetPreview();
-    dialog?.showModal();
-    // Focus the search box on open when it shows, so an editor with a large catalog types straight
-    // into the filter. The dialog's own focus trap already lands focus on the first row otherwise.
-    if (showSearch) {
-      void tick().then(() => searchInput?.focus());
+  return out;
+});
+let previewRun = 0;
+$effect(() => {
+  if (!twoPane || !render || !picked || !formValues) return;
+  if (formIncomplete) {
+    previewState = "settled";
+    previewRun++;
+    return;
+  }
+  const md = serializeComponent(picked, formValues);
+  const run = ++previewRun;
+  previewState = "settling";
+  const handle = setTimeout(async () => {
+    try {
+      const html = await render(md);
+      if (run === previewRun) {
+        previewDoc = buildPreviewDoc(html, preview);
+        previewState = "settled";
+      }
+    } catch {
+      if (run === previewRun) {
+        previewState = "failed";
+      }
     }
+  }, 200);
+  return () => {
+    clearTimeout(handle);
+    previewRun++;
+  };
+});
+const defs = $derived(insertableDefs(registry));
+const showSearch = $derived(defs.length > SEARCH_THRESHOLD);
+const filtered = $derived.by(() => {
+  const q = query.trim().toLowerCase();
+  if (!q) return defs;
+  return defs.filter(
+    (def) => def.label.toLowerCase().includes(q) || (def.description ?? "").toLowerCase().includes(q)
+  );
+});
+const groups = $derived(groupDefs(filtered));
+function resetPreview() {
+  formValues = void 0;
+  formIncomplete = false;
+  previewState = "settled";
+  previewDoc = "";
+  editValues = null;
+  editRange = null;
+}
+export function open() {
+  picked = null;
+  query = "";
+  resetPreview();
+  dialog?.showModal();
+  if (showSearch) {
+    void tick().then(() => searchInput?.focus());
   }
-  /** Re-open a placed component into the same guided form. Skips the catalog: seeds the form from
-   *  the parsed values, stores the source range for Update, and shows the configure step straight
-   *  away. Exported so the host (the edit page's Edit-block control) drives it. */
-  export function editComponent(
-    def: ComponentDef,
-    values: ComponentValues,
-    range: { from: number; to: number },
-  ) {
+}
+export function editComponent(def, values, range) {
+  resetPreview();
+  query = "";
+  editValues = values;
+  editRange = range;
+  picked = def;
+  dialog?.showModal();
+}
+function back() {
+  picked = null;
+  resetPreview();
+}
+function close() {
+  picked = null;
+  dialog?.close();
+}
+function onClose() {
+  picked = null;
+  resetPreview();
+}
+function choose(def) {
+  if (hasSchema(def)) {
     resetPreview();
-    query = '';
-    editValues = values;
-    editRange = range;
     picked = def;
-    dialog?.showModal();
-  }
-
-  function back() {
-    picked = null;
-    resetPreview();
-  }
-  function close() {
-    picked = null;
-    dialog?.close();
-  }
-  function onClose() {
-    picked = null;
-    resetPreview();
-  }
-  function choose(def: ComponentDef) {
-    if (hasSchema(def)) {
-      resetPreview();
-      picked = def;
-      // ComponentForm focuses its own first field on mount.
-    } else {
-      insert(def.insertTemplate ?? '');
-      close();
-    }
-  }
-  // The form's submit routes here. In edit mode it replaces the stored source span through update;
-  // otherwise it inserts at the cursor. Either way the dialog closes.
-  function onSubmit(markdown: string) {
-    if (editing && editRange) {
-      update?.(editRange, markdown);
-    } else {
-      insert(markdown);
-    }
+  } else {
+    insert(def.insertTemplate ?? "");
     close();
   }
-
-  // The native <dialog> turns Escape into a close. At the configure step Escape should step back to
-  // the catalog instead (one level), matching the catalog's own Back control; from the catalog it
-  // closes. Handling cancel (the event the dialog fires on Escape) lets us preventDefault and
-  // intercept the first level.
-  function onCancel(e: Event) {
-    // In edit mode there is no catalog to step back to, so Escape closes (the default). At the
-    // configure step of the insert flow, intercept the first Escape and step back to the catalog.
-    if (picked && !editing) {
-      e.preventDefault();
-      back();
-    }
+}
+function onSubmit(markdown) {
+  if (editing && editRange) {
+    update?.(editRange, markdown);
+  } else {
+    insert(markdown);
   }
-
-  // Arrow keys roam the rows: each row is a real <button>, so Enter chooses for free and Escape
-  // closes through the native <dialog>. Up/Down (and Left/Right) move focus between the row buttons
-  // in DOM order across every group, wrapping at the ends, the list-navigation model an editor
-  // expects. The handler sits on each row button (an interactive element), and finds its siblings
-  // through the shared scroll region so navigation crosses group boundaries.
-  function onRowKeydown(e: KeyboardEvent) {
-    const isNext = e.key === 'ArrowDown' || e.key === 'ArrowRight';
-    const isPrev = e.key === 'ArrowUp' || e.key === 'ArrowLeft';
-    if (!isNext && !isPrev) return;
-    const region = (e.currentTarget as HTMLElement).closest('[data-cairn-pk-list]');
-    if (!region) return;
-    const rows = [...region.querySelectorAll<HTMLButtonElement>('[data-testid="cairn-pk-row"]')];
-    const from = rows.indexOf(e.currentTarget as HTMLButtonElement);
-    if (from < 0) return;
-    e.preventDefault();
-    const next = (from + (isNext ? 1 : -1) + rows.length) % rows.length;
-    rows[next].focus();
-  }
-
-  // ArrowDown from the search input enters the list at the first row, ArrowUp at the last, so the
-  // keyboard model is whole: type to filter, then arrow into the results without reaching for the
-  // mouse. From a row, onRowKeydown takes over.
-  function onSearchKeydown(e: KeyboardEvent) {
-    const isNext = e.key === 'ArrowDown';
-    const isPrev = e.key === 'ArrowUp';
-    if (!isNext && !isPrev) return;
-    const rows = dialog?.querySelectorAll<HTMLButtonElement>('[data-testid="cairn-pk-row"]');
-    if (!rows || rows.length === 0) return;
+  close();
+}
+function onCancel(e) {
+  if (picked && !editing) {
     e.preventDefault();
-    rows[isNext ? 0 : rows.length - 1].focus();
+    back();
   }
+}
+function onRowKeydown(e) {
+  const isNext = e.key === "ArrowDown" || e.key === "ArrowRight";
+  const isPrev = e.key === "ArrowUp" || e.key === "ArrowLeft";
+  if (!isNext && !isPrev) return;
+  const region = e.currentTarget.closest("[data-cairn-pk-list]");
+  if (!region) return;
+  const rows = [...region.querySelectorAll('[data-testid="cairn-pk-row"]')];
+  const from = rows.indexOf(e.currentTarget);
+  if (from < 0) return;
+  e.preventDefault();
+  const next = (from + (isNext ? 1 : -1) + rows.length) % rows.length;
+  rows[next].focus();
+}
+function onSearchKeydown(e) {
+  const isNext = e.key === "ArrowDown";
+  const isPrev = e.key === "ArrowUp";
+  if (!isNext && !isPrev) return;
+  const rows = dialog?.querySelectorAll('[data-testid="cairn-pk-row"]');
+  if (!rows || rows.length === 0) return;
+  e.preventDefault();
+  rows[isNext ? 0 : rows.length - 1].focus();
+}
 </script>
 
 <!-- The guided form, identical in either layout: the two-pane case wraps it in the left column, the