@glw907/cairn-cms 0.68.0 → 0.76.0

package/src/lib/components/IconPicker.svelte

@@ -21,9 +21,11 @@ IconSet path data, matching the renderer's 256-unit viewBox.
     onChange: (name: string) => void;
     /** The group's accessible name, threaded from the field label. Defaults to Icon. */
     label?: string;
+    /** The id of a describing element (a field hint), for the radiogroup's `aria-describedby`. */
+    describedby?: string;
   }
 
-  let { icons, value, required, onChange, label = 'Icon' }: Props = $props();
+  let { icons, value, required, onChange, label = 'Icon', describedby }: Props = $props();
 
   // The radiogroup container, used to move focus with the selection per the ARIA radiogroup pattern.
   let group: HTMLDivElement;
@@ -62,7 +64,7 @@ IconSet path data, matching the renderer's 256-unit viewBox.
   }
 </script>
 
-<div class="flex flex-wrap gap-2" role="radiogroup" aria-label={label} bind:this={group}>
+<div class="flex flex-wrap gap-2" role="radiogroup" aria-label={label} aria-required={required ? 'true' : undefined} aria-describedby={describedby} bind:this={group}>
   {#if !required}
     <button
       type="button"

package/src/lib/components/LinkPicker.svelte

@@ -1,14 +1,14 @@
 <!--
 @component
-The "Link to page" control and its modal. It lists the site's posts and pages from the committed
-manifest (the linkTargets the editor receives), grouped by concept with Pages first, each post
-showing its date and each draft marked. Picking a target inserts a cairn: internal link through the
-editor's registerInsertLink seam. Built on a native <dialog>, following the component dialog's a11y
-conventions. The plain-URL link is the toolbar's Web link dialog; this is for an internal target.
+The "Link to page" control. It wraps EntryPicker, the shared search + concept-grouped target list, and
+turns the chosen target into an inline cairn: internal link through the editor's registerInsertLink
+seam. EntryPicker owns the list and search; this component owns the cairn-token meaning and the trigger.
+The plain-URL link is the toolbar's Web link dialog; this is for an internal target.
 -->
 <script lang="ts">
   import type { LinkTarget } from '../content/manifest.js';
   import { formatCairnToken } from '../content/links.js';
+  import EntryPicker from './EntryPicker.svelte';
 
   interface Props {
     /** The site's link targets, from the committed manifest (editLoad ships them). */
@@ -24,46 +24,16 @@ conventions. The plain-URL link is the toolbar's Web link dialog; this is for an
 
   let { linkTargets, insert, disabled = false, trigger = true }: Props = $props();
 
-  let dialog = $state<HTMLDialogElement | null>(null);
-  let query = $state('');
-
-  // Group filtered targets by concept, Pages first then Posts then any other concept, so the list
-  // reads in a stable order. The filter is a case-insensitive title substring.
-  const ORDER: Record<string, number> = { pages: 0, posts: 1 };
-  function rank(concept: string): number {
-    return ORDER[concept] ?? 2;
-  }
-  function heading(concept: string): string {
-    if (concept === 'pages') return 'Pages';
-    if (concept === 'posts') return 'Posts';
-    return concept.charAt(0).toUpperCase() + concept.slice(1);
-  }
-
-  const groups = $derived.by(() => {
-    const q = query.trim().toLowerCase();
-    const matched = q ? linkTargets.filter((t) => t.title.toLowerCase().includes(q)) : linkTargets;
-    const byConcept = new Map<string, LinkTarget[]>();
-    for (const t of matched) {
-      const list = byConcept.get(t.concept) ?? [];
-      list.push(t);
-      byConcept.set(t.concept, list);
-    }
-    return [...byConcept.entries()]
-      .map(([concept, items]) => ({ concept, heading: heading(concept), items }))
-      .sort((a, b) => rank(a.concept) - rank(b.concept) || a.heading.localeCompare(b.heading));
-  });
+  // The headless picker; this component drives it so it can carry the disabled trigger and the
+  // cairn-token meaning, while EntryPicker stays ignorant of both.
+  let picker = $state<{ open: () => void } | null>(null);
 
   /** Open the picker programmatically, for a host that drives it without the trigger. */
   export function open() {
-    query = '';
-    dialog?.showModal();
-  }
-  function close() {
-    dialog?.close();
+    picker?.open();
   }
   function choose(target: LinkTarget) {
     insert(formatCairnToken(target), target.title);
-    close();
   }
 </script>
 
@@ -73,45 +43,4 @@ conventions. The plain-URL link is the toolbar's Web link dialog; this is for an
   </button>
 {/if}
 
-<dialog class="modal" aria-labelledby="cairn-link-dialog-title" bind:this={dialog}>
-  <div class="modal-box">
-    <div class="mb-3 flex items-center justify-between">
-      <h2 id="cairn-link-dialog-title" class="text-base font-semibold">Link to a page</h2>
-      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
-    </div>
-
-    <input
-      type="search"
-      class="input input-bordered mb-3 w-full"
-      placeholder="Search by title"
-      aria-label="Search pages and posts"
-      bind:value={query}
-    />
-
-    {#if groups.length === 0}
-      <p class="text-sm text-[var(--color-muted)]">No pages or posts to link to.</p>
-    {:else}
-      {#each groups as group (group.concept)}
-        <h3 class="mt-2 mb-1 text-xs font-semibold tracking-wide text-[var(--color-muted)] uppercase">{group.heading}</h3>
-        <ul class="menu w-full">
-          {#each group.items as target (`${target.concept}/${target.id}`)}
-            <li>
-              <button type="button" onclick={() => choose(target)}>
-                <span class="flex flex-col items-start">
-                  <span class="font-medium">{target.title}</span>
-                  <span class="text-xs text-[var(--color-muted)]">
-                    {#if target.draft}<span class="badge badge-ghost badge-sm mr-1">Draft</span>{/if}
-                    {#if target.date}{target.date}{/if}
-                  </span>
-                </span>
-              </button>
-            </li>
-          {/each}
-        </ul>
-      {/each}
-    {/if}
-  </div>
-  <form method="dialog" class="modal-backdrop">
-    <button tabindex="-1" aria-label="Close">close</button>
-  </form>
-</dialog>
+<EntryPicker bind:this={picker} targets={linkTargets} {choose} trigger={false} />

package/src/lib/components/MediaHeroField.svelte

@@ -60,6 +60,10 @@ popover's runUpload but resolves to this field, not an editor placeholder.
     /** Whether the initial hero is an explicit decorative choice (an empty alt that is not debt).
      *  Defaults false; a fresh field with an empty alt reads as needs-alt. */
     decorative?: boolean;
+    /** Whether this image leads the page and becomes the social card (a top-level SEO hero). When
+     *  false (a gallery or nested image item), the empty state drops the hero-only social-card line
+     *  and the copy reads neutrally. Defaults false. */
+    lead?: boolean;
     /** The merged committed-plus-uploaded media library, keyed by content hash. */
     mediaLibrary: Record<string, MediaLibraryEntry>;
     /** The concept the entry belongs to (the upload action's route param). */
@@ -83,6 +87,7 @@ popover's runUpload but resolves to this field, not an editor placeholder.
     field,
     value,
     decorative: decorativeInitial = false,
+    lead = false,
     mediaLibrary,
     conceptId,
     id,
@@ -442,13 +447,15 @@ popover's runUpload but resolves to this field, not an editor placeholder.
         <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" /></svg>
       </span>
       <span class="flex min-w-0 flex-col gap-px">
-        <span class="text-[0.8125rem] font-medium">Add a hero image</span>
+        <span class="text-[0.8125rem] font-medium">Add {field.label.toLowerCase()}</span>
         <span class="text-[0.6875rem] text-[var(--color-muted)]">Drop an image here, or pick from the library</span>
       </span>
     </button>
-    <p class="text-[0.6875rem] leading-snug text-[var(--color-muted)]">
-      This image leads the page, and it is the picture shown when the post is shared.
-    </p>
+    {#if lead}
+      <p class="text-[0.6875rem] leading-snug text-[var(--color-muted)]">
+        This image leads the page, and it is the picture shown when the post is shared.
+      </p>
+    {/if}
   {/if}
 
   <!-- The committed value rides four named hidden inputs the save path's decode arm reads. They sit
@@ -468,7 +475,7 @@ popover's runUpload but resolves to this field, not an editor placeholder.
   <div class="modal-box max-w-md">
     <div class="mb-3 flex items-center justify-between gap-2">
       <h2 id={titleId} class="text-[0.9375rem] font-semibold">
-        {view === 'chooser' ? 'Add a hero image' : 'Hero image'}
+        {view === 'chooser' ? `Add ${field.label.toLowerCase()}` : field.label}
       </h2>
       <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label="Close" onclick={closeDialog}>
         <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>

package/src/lib/components/ObjectGroupField.svelte

@@ -0,0 +1,97 @@
+<!--
+@component
+A labeled group of leaf fields, the editor arm for an `object` container. It renders each leaf one
+level down through `FieldInput`, prefixing the leaf's form name with this group's name
+(`${name}.${leafKey}`) so the nested decode in `frontmatter.ts` reads each value back into the right
+sub-key. The group's value slice (the object, defaulting to `{}`) is passed straight through as the
+leaf dispatcher's `frontmatter`, so a leaf reads `frontmatter[leafKey]` unchanged.
+
+The legend uses the object's optional `label`; when the schema omits it (an object inside an array is
+labeled by the array, so it carries no label of its own), a humanized field key stands in. The group
+matches the Details fieldset/legend recipe so it reads as one of the panel's grouped sections.
+-->
+<script lang="ts">
+  import FieldInput from './FieldInput.svelte';
+  import type { NamedField } from '../content/types.js';
+  import type { ObjectField } from '../content/fields.js';
+  import type { LinkTarget } from '../content/manifest.js';
+  import type { MediaEntry } from '../media/manifest.js';
+  import type { MediaLibraryEntry } from '../media/library-entry.js';
+  import type { IconSet } from '../render/glyph.js';
+  import type MediaHeroField from './MediaHeroField.svelte';
+
+  interface Props {
+    /** The object descriptor to render; its `fields` are the leaves this group holds. */
+    field: NamedField & ObjectField;
+    /** The form name prefix for this group; each leaf renders at `${name}.${leafKey}`. */
+    name: string;
+    /** The object value slice this group reads from, keyed by leaf sub-key. */
+    frontmatter: Record<string, unknown>;
+    /** The site link targets the reference arm offers (threaded through to each leaf). */
+    targets: LinkTarget[];
+    /** Mark the edit form dirty; threaded to each leaf's media or reference arm. */
+    markFieldsDirty: () => void;
+    /** The merged committed-plus-uploaded media library, keyed by content hash. */
+    mediaLibrary: Record<string, MediaLibraryEntry>;
+    /** The concept the entry belongs to (the upload action's route param). */
+    conceptId: string;
+    /** The entry id (the upload action's route param). */
+    id: string;
+    /** The host's hero-field refs, keyed by the prefixed `name` so two groups do not collide. */
+    heroFieldRefs: Record<string, MediaHeroField>;
+    /** Called with the server-owned record on a successful upload, so the host merges it. */
+    onuploaded: (record: MediaEntry) => void;
+    /** Called when a hero's needs-alt status changes, keyed by the prefixed `name`. */
+    onheroneedsalt: (name: string, needsAlt: boolean) => void;
+    /** The site's icon set, forwarded to each leaf's icon arm. */
+    icons?: IconSet;
+  }
+
+  let {
+    field,
+    name,
+    frontmatter,
+    targets,
+    markFieldsDirty,
+    mediaLibrary,
+    conceptId,
+    id,
+    heroFieldRefs,
+    onuploaded,
+    onheroneedsalt,
+    icons,
+  }: Props = $props();
+
+  // Turn a field key into a sentence-case legend when the object carries no label of its own:
+  // 'social_card' -> 'Social card', 'ogImage' -> 'Og image'. The label, when set, wins.
+  function humanize(key: string): string {
+    const words = key
+      .replace(/[_-]+/g, ' ')
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .trim();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+  }
+
+  const legend = $derived(field.label ?? humanize(field.name));
+  const leaves = $derived(Object.entries(field.fields));
+</script>
+
+<fieldset class="m-0 flex min-w-0 flex-col gap-3 border-0 p-0">
+  <legend class="text-sm font-medium">{legend}</legend>
+  {#each leaves as [leafKey, leaf] (leafKey)}
+    <FieldInput
+      field={{ ...leaf, name: leafKey }}
+      name={`${name}.${leafKey}`}
+      {frontmatter}
+      {targets}
+      {markFieldsDirty}
+      {mediaLibrary}
+      {conceptId}
+      {id}
+      {heroFieldRefs}
+      {onuploaded}
+      {onheroneedsalt}
+      {icons}
+    />
+  {/each}
+</fieldset>

package/src/lib/components/ReferenceField.svelte

@@ -0,0 +1,126 @@
+<!--
+@component
+The reference field editor arm. A single `reference` renders a combobox-style button showing the
+current target's resolved title (looked up in the site's link targets), opening EntryPicker scoped to
+the field's concept; on pick it sets the value and emits one hidden input the decoder reads. A many
+`array(reference)` renders a removable chip list, each chip showing the target's resolved title, plus
+an EntryPicker that marks the already-held ids and adds another; it emits one hidden input per selected
+id, so frontmatterFromForm's getAll reads them all. EntryPicker owns the search and grouped list; this
+component owns the cardinality, the chips, and the hidden inputs the form submits.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { LinkTarget } from '../content/manifest.js';
+  import type { ReferenceField } from '../content/fields.js';
+  import type { NamedField } from '../content/types.js';
+  import EntryPicker from './EntryPicker.svelte';
+
+  interface Props {
+    /** The reference or array(reference) descriptor this arm renders. */
+    field: NamedField;
+    /** The current value: one id for a single reference, a list of ids for an array. */
+    value: string | string[];
+    /** The site's link targets, from the committed manifest (editLoad ships them). */
+    targets: LinkTarget[];
+    /** Called when the committed ids change (a pick, an add, or a remove), so the host sets
+     *  fieldsDirty. The hidden-input writes do not fire the form's oninput, so the field signals
+     *  dirty explicitly, the same way MediaHeroField does. */
+    ondirty?: () => void;
+  }
+
+  let { field, value, targets, ondirty }: Props = $props();
+
+  // The descriptor's concept, read from the single reference or the array's reference item, so the
+  // picker scopes to the right concept and a chip resolves its title within that concept's targets.
+  // Narrow on field.type so the access needs no cast; the array item is always a reference here
+  // (fieldset's checkArrayItems enforces it at declaration), so the one cast names that guarantee.
+  const concept = $derived.by(() => {
+    if (field.type === 'array') return (field.item as ReferenceField).concept;
+    if (field.type === 'reference') return field.concept;
+    return '';
+  });
+
+  // The single reference's current id, seeded once from the prop and owned thereafter (untrack marks
+  // the read a deliberate one-time seed, not a reactive dependency). Updated on pick.
+  let singleId = $state(untrack(() => (typeof value === 'string' ? value : '')));
+  // The array's current ids, seeded once from the prop and updated as chips are added and removed.
+  let ids = $state<string[]>(untrack(() => (Array.isArray(value) ? [...value] : [])));
+
+  // The headless picker; this component drives it so it can carry the concept filter and the held ids.
+  let picker = $state<{ open: () => void } | null>(null);
+
+  /** Resolve an id to its target title within this field's concept, falling back to the bare id. */
+  function titleFor(id: string): string {
+    return targets.find((t) => t.concept === concept && t.id === id)?.title ?? id;
+  }
+
+  function chooseSingle(target: LinkTarget) {
+    singleId = target.id;
+    ondirty?.();
+  }
+  function chooseMany(target: LinkTarget) {
+    if (!ids.includes(target.id)) {
+      ids = [...ids, target.id];
+      ondirty?.();
+    }
+  }
+  function remove(id: string) {
+    ids = ids.filter((x) => x !== id);
+    ondirty?.();
+  }
+</script>
+
+{#if field.type === 'array'}
+  <fieldset class="m-0 flex min-w-0 flex-col gap-2 border-0 p-0">
+    <legend class="text-sm font-medium">{field.label}</legend>
+    {#if ids.length}
+      <ul class="flex flex-wrap gap-2">
+        {#each ids as id (id)}
+          <li class="badge badge-ghost gap-1">
+            <span>{titleFor(id)}</span>
+            <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label={`Remove ${titleFor(id)}`} onclick={() => remove(id)}>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+            </button>
+            <input type="hidden" name={field.name} value={id} />
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <div>
+      <button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" aria-label={`Add ${field.label}`} onclick={() => picker?.open()}>
+        Add {field.label}
+      </button>
+    </div>
+  </fieldset>
+  <EntryPicker
+    bind:this={picker}
+    {targets}
+    choose={chooseMany}
+    conceptFilter={concept}
+    selectedIds={ids}
+    trigger={false}
+    heading={`Choose ${field.label}`}
+    searchLabel={`Search ${concept}`}
+    emptyText={`No ${concept} to choose.`}
+  />
+{:else}
+  <div class="flex flex-col gap-1">
+    <span class="text-sm font-medium">{field.label}</span>
+    <button type="button" class="btn btn-sm btn-ghost justify-start" aria-haspopup="dialog" aria-label={field.label} onclick={() => picker?.open()}>
+      {#if singleId}{titleFor(singleId)}{:else}<span class="text-[var(--color-muted)]">Choose {field.label}</span>{/if}
+    </button>
+    {#if singleId}
+      <input type="hidden" name={field.name} value={singleId} />
+    {/if}
+  </div>
+  <EntryPicker
+    bind:this={picker}
+    {targets}
+    choose={chooseSingle}
+    conceptFilter={concept}
+    trigger={false}
+    heading={`Choose ${field.label}`}
+    searchLabel={`Search ${concept}`}
+    emptyText={`No ${concept} to choose.`}
+  />
+{/if}