@glw907/cairn-cms 0.18.0 → 0.21.0

package/dist/components/DeleteDialog.svelte

@@ -0,0 +1,81 @@
+<!--
+@component
+The Delete control and its modal. With no inbound links it is a plain confirm that posts to the
+?/delete action. With inbound links it blocks: it names how many entries link here and lists them,
+each linking to its edit page, so the author repoints or removes those links first. Built on a native
+<dialog>, following the LinkPicker a11y conventions.
+-->
+<script lang="ts">
+  import type { InboundLink } from '../content/manifest.js';
+
+  interface Props {
+    /** The concept this entry belongs to, e.g. "posts". Posted with the confirm. */
+    conceptId: string;
+    /** The entry id within its concept. Posted with the confirm. */
+    id: string;
+    /** A human label for the concept, e.g. "Post", used in the prompts. */
+    label: string;
+    /** The entries that link to this one; non-empty blocks the delete. */
+    inboundLinks: InboundLink[];
+  }
+
+  let { conceptId, id, label, inboundLinks }: Props = $props();
+
+  let dialog = $state<HTMLDialogElement | null>(null);
+  const blocked = $derived(inboundLinks.length > 0);
+  const noun = $derived(label.toLowerCase());
+  // One inbound link reads "1 post links here ... repoint it"; many reads "2 posts link here ...
+  // repoint them". The subject-verb agreement inverts the usual plural-s, so derive each form once.
+  const single = $derived(inboundLinks.length === 1);
+  const nouns = $derived(single ? noun : `${noun}s`);
+  const verb = $derived(single ? 'links' : 'link');
+  const pronoun = $derived(single ? 'it' : 'them');
+
+  function open() {
+    dialog?.showModal();
+  }
+  function close() {
+    dialog?.close();
+  }
+</script>
+
+<button type="button" class="btn btn-sm btn-ghost text-error" aria-haspopup="dialog" onclick={open}>
+  Delete
+</button>
+
+<dialog class="modal" aria-labelledby="cairn-delete-dialog-title" bind:this={dialog}>
+  <div class="modal-box">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 id="cairn-delete-dialog-title" class="text-base font-semibold">Delete this {label.toLowerCase()}?</h2>
+      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
+    </div>
+
+    {#if blocked}
+      <p class="mb-2 text-sm">
+        {inboundLinks.length} {nouns} {verb} here. Remove or repoint {pronoun} before deleting, so no link is left
+        broken.
+      </p>
+      <ul class="menu w-full">
+        {#each inboundLinks as link (link.concept + '/' + link.id)}
+          <li>
+            <a href={`/admin/${link.concept}/${link.id}`}>{link.title}</a>
+          </li>
+        {/each}
+      </ul>
+      <div class="mt-3 flex justify-end">
+        <button type="button" class="btn btn-sm" onclick={close}>Close</button>
+      </div>
+    {:else}
+      <p class="mb-3 text-sm">This cannot be undone.</p>
+      <form method="POST" action="?/delete" class="flex justify-end gap-2">
+        <input type="hidden" name="concept" value={conceptId} />
+        <input type="hidden" name="id" value={id} />
+        <button type="button" class="btn btn-sm" onclick={close}>Cancel</button>
+        <button type="submit" class="btn btn-sm btn-error">Delete this {label.toLowerCase()}</button>
+      </form>
+    {/if}
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button tabindex="-1" aria-label="Close">close</button>
+  </form>
+</dialog>

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

@@ -0,0 +1,21 @@
+import type { InboundLink } from '../content/manifest.js';
+interface Props {
+    /** The concept this entry belongs to, e.g. "posts". Posted with the confirm. */
+    conceptId: string;
+    /** The entry id within its concept. Posted with the confirm. */
+    id: string;
+    /** A human label for the concept, e.g. "Post", used in the prompts. */
+    label: string;
+    /** The entries that link to this one; non-empty blocks the delete. */
+    inboundLinks: InboundLink[];
+}
+/**
+ * The Delete control and its modal. With no inbound links it is a plain confirm that posts to the
+ * ?/delete action. With inbound links it blocks: it names how many entries link here and lists them,
+ * each linking to its edit page, so the author repoints or removes those links first. Built on a native
+ * <dialog>, following the LinkPicker a11y conventions.
+ */
+declare const DeleteDialog: import("svelte").Component<Props, {}, "">;
+type DeleteDialog = ReturnType<typeof DeleteDialog>;
+export default DeleteDialog;
+//# sourceMappingURL=DeleteDialog.svelte.d.ts.map

package/dist/components/DeleteDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/DeleteDialog.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGxD,UAAU,KAAK;IACb,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,YAAY,EAAE,WAAW,EAAE,CAAC;CAC7B;AAqEH;;;;;GAKG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/EditPage.svelte

@@ -8,6 +8,11 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   import { untrack } from 'svelte';
   import MarkdownEditor from './MarkdownEditor.svelte';
   import ComponentInsertDialog from './ComponentInsertDialog.svelte';
+  import LinkPicker from './LinkPicker.svelte';
+  import DeleteDialog from './DeleteDialog.svelte';
+  import RenameDialog from './RenameDialog.svelte';
+  import { cairnLinkCompletionSource } from './link-completion.js';
+  import { unwrapCairnLink } from './markdown-format.js';
   import type { ComponentRegistry } from '../render/registry.js';
   import type { IconSet } from '../render/glyph.js';
   import type { EditData } from '../sveltekit/content-routes.js';
@@ -24,21 +29,86 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
     render?: (md: string, opts?: { stagger?: boolean; resolve?: LinkResolve }) => string | Promise<string>;
     /** The site's icon set, for the guided form's icon fields. */
     icons?: IconSet;
+    /** The `?/save` or `?/delete` action result. Carries the save guard's broken links when a save was
+     *  blocked, or the delete guard's inbound linkers when a delete was refused. */
+    form?: { brokenLinks?: string[]; body?: string; inboundLinks?: import('../content/manifest.js').InboundLink[]; renameError?: string } | null;
   }
 
-  let { data, registry, render, icons }: Props = $props();
+  let { data, registry, render, icons, form }: Props = $props();
 
-  // `body` is local editor state seeded once from the prop; it diverges as the user types.
-  // untrack() captures the initial value without subscribing to future prop changes.
-  let body = $state(untrack(() => data.body));
+  // `body` is local editor state seeded once; it diverges as the user types. A blocked save returns
+  // the author's edited markdown as form.body, so seed from that when present to keep the edits and
+  // the broken link they were told to fix. On the success and delete-refused paths form carries no
+  // body, so it falls back to the committed data.body. untrack() captures the initial value without
+  // subscribing to future prop changes.
+  let body = $state(untrack(() => form?.body ?? data.body));
   let showPreview = $state(false);
   let previewHtml = $state('');
   let insert = $state.raw<(text: string) => void>(() => {});
+  let insertLink = $state.raw<(href: string, title: string) => void>(() => {});
+
+  // The save guard's broken links, from the blocked action result. The fix unwraps a link in the
+  // local body, which the bound editor reconciles, so the author re-saves clean.
+  const brokenLinks = $derived(form?.brokenLinks ?? []);
+  // Track the hrefs the author has already fixed this session. The banner reads the immutable action
+  // result, so without this a fixed row would linger and "Remove link" would read as a no-op.
+  let removedLinks = $state<string[]>([]);
+  const visibleBrokenLinks = $derived(brokenLinks.filter((h) => !removedLinks.includes(h)));
+  function removeBrokenLink(href: string) {
+    // Hide the row only when the unwrap changed the body. A genuine no-op keeps the row honest.
+    const next = unwrapCairnLink(body, href);
+    if (next !== body) {
+      body = next;
+      removedLinks = [...removedLinks, href];
+    }
+  }
+
+  // The delete guard's inbound linkers, from a refused delete (fail 409). Empty when the delete was
+  // not refused. When set, a delete was blocked by a link that appeared since the page loaded.
+  const deleteRefusedLinks = $derived(form?.inboundLinks ?? []);
+
+  // A rename that hit a collision or an invalid slug returns form.renameError.
+  const renameError = $derived(form?.renameError ?? '');
+
+  // After a save that links to a draft target, the redirect carries ?drafts=<tokens>.
+  let draftWarning = $state('');
+  $effect(() => {
+    const search = typeof location === 'undefined' ? '' : location.search;
+    const drafts = new URLSearchParams(search).get('drafts');
+    draftWarning = drafts ? drafts.split(',').filter(Boolean).join(', ') : '';
+  });
+
+  // One persistent live region announces the current message, since a {#if}-gated role element
+  // inserted fresh is announced inconsistently. A polite region carries the success and draft
+  // notices; an assertive region carries the errors. The visible banners below keep their styling
+  // but drop their roles, so a message is announced once.
+  const politeMessage = $derived.by(() => {
+    if (draftWarning) return `Saved. This page links to unpublished pages: ${draftWarning}.`;
+    if (data.saved) return 'Saved.';
+    if (data.renamed) return `The URL is now ${data.slug}.`;
+    return '';
+  });
+  const assertiveMessage = $derived.by(() => {
+    if (data.error) return data.error;
+    if (renameError) return renameError;
+    if (deleteRefusedLinks.length) {
+      const count = deleteRefusedLinks.length;
+      return `This ${data.label.toLowerCase()} could not be deleted. ${count} ${count === 1 ? 'page links' : 'pages link'} to it.`;
+    }
+    if (visibleBrokenLinks.length) {
+      const count = visibleBrokenLinks.length;
+      return `This page links to ${count} missing ${count === 1 ? 'page' : 'pages'}.`;
+    }
+    return '';
+  });
 
   // The manifest-backed resolver turns a cairn: link into its live permalink in the preview, and
   // returns undefined for a missing target so the render step marks it cairn-broken-link.
   const resolveLink = $derived(manifestLinkResolver(data.linkTargets));
 
+  // The [[ autocomplete source over the same link targets, handed to the editor's generic seam.
+  const completionSources = $derived([cairnLinkCompletionSource(data.linkTargets)]);
+
   const PREVIEW_KEY = 'cairn-admin:preview';
 
   $effect(() => {
@@ -85,6 +155,9 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   </div>
   <div class="flex items-center gap-2">
     <ComponentInsertDialog {registry} {insert} {icons} />
+    <LinkPicker linkTargets={data.linkTargets} insert={insertLink} />
+    <RenameDialog conceptId={data.conceptId} id={data.id} label={data.label} slug={data.slug} />
+    <DeleteDialog conceptId={data.conceptId} id={data.id} label={data.label} inboundLinks={data.inboundLinks} />
     <button
       type="button"
       class="btn btn-sm btn-ghost"
@@ -97,11 +170,51 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
   </div>
 </header>
 
-{#if data.saved}
-  <div role="status" class="alert alert-success mb-4 text-sm">Saved.</div>
+<div class="sr-only" aria-live="polite">{politeMessage}</div>
+<div class="sr-only" aria-live="assertive">{assertiveMessage}</div>
+
+{#if data.saved && !draftWarning}
+  <div class="alert alert-success mb-4 text-sm">Saved.</div>
+{/if}
+{#if data.renamed}
+  <div class="alert alert-success mb-4 text-sm">The URL is now {data.slug}.</div>
 {/if}
 {#if data.error}
-  <div role="alert" class="alert alert-error mb-4 text-sm">{data.error}</div>
+  <div class="alert alert-error mb-4 text-sm">{data.error}</div>
+{/if}
+{#if renameError}
+  <div class="alert alert-error mb-4 text-sm">{renameError}</div>
+{/if}
+{#if deleteRefusedLinks.length}
+  <div class="alert alert-error mb-4 flex-col items-start text-sm">
+    <p class="font-medium">This {data.label.toLowerCase()} could not be deleted.</p>
+    <p>{deleteRefusedLinks.length} {deleteRefusedLinks.length === 1 ? 'page' : 'pages'} now link to it. Remove or repoint the {deleteRefusedLinks.length === 1 ? 'link' : 'links'} listed below, then delete again.</p>
+    <ul class="mt-1 w-full">
+      {#each deleteRefusedLinks as link (link.concept + '/' + link.id)}
+        <li>
+          <a class="link" href={`/admin/${link.concept}/${link.id}`}>{link.title}</a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}
+{#if visibleBrokenLinks.length}
+  <div class="alert alert-error mb-4 flex-col items-start text-sm">
+    <p>This page links to {visibleBrokenLinks.length === 1 ? 'a page' : 'pages'} that no longer {visibleBrokenLinks.length === 1 ? 'exists' : 'exist'}. Remove the broken {visibleBrokenLinks.length === 1 ? 'link' : 'links'} and save again.</p>
+    <ul class="mt-1 w-full">
+      {#each visibleBrokenLinks as href (href)}
+        <li class="flex items-center justify-between gap-2">
+          <code class="text-xs">{href}</code>
+          <button type="button" class="btn btn-xs" onclick={() => removeBrokenLink(href)}>Remove link</button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}
+{#if draftWarning}
+  <div class="alert alert-warning mb-4 text-sm">
+    Saved. Note: this page links to unpublished {draftWarning.includes(',') ? 'pages' : 'a page'} ({draftWarning}), which will 404 until published.
+  </div>
 {/if}
 
 <form method="POST" action="?/save" class="lg:grid lg:grid-cols-[1fr_20rem] lg:gap-6">
@@ -109,7 +222,13 @@ markdown editor and a live, design-accurate preview. The whole surface is one fo
 
   <div class="lg:order-1">
     <div class="rounded-box border border-base-300 bg-base-100 overflow-hidden">
-      <MarkdownEditor bind:value={body} name="body" registerInsert={(fn) => (insert = fn)} />
+      <MarkdownEditor
+        bind:value={body}
+        name="body"
+        registerInsert={(fn) => (insert = fn)}
+        registerInsertLink={(fn) => (insertLink = fn)}
+        {completionSources}
+      />
     </div>
     {#if showPreview}
       <section

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

@@ -16,6 +16,14 @@ interface Props {
     }) => string | Promise<string>;
     /** The site's icon set, for the guided form's icon fields. */
     icons?: IconSet;
+    /** The `?/save` or `?/delete` action result. Carries the save guard's broken links when a save was
+     *  blocked, or the delete guard's inbound linkers when a delete was refused. */
+    form?: {
+        brokenLinks?: string[];
+        body?: string;
+        inboundLinks?: import('../content/manifest.js').InboundLink[];
+        renameError?: string;
+    } | null;
 }
 /**
  * The differentiated editor: the per-concept frontmatter form (from `data.fields`) beside the

package/dist/components/EditPage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/EditPage.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIrD,UAAU,KAAK;IACb,gEAAgE;IAChE,IAAI,EAAE,QAAQ,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,qIAAqI;IACrI,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,WAAW,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACvG,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA2JH;;;;GAIG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"EditPage.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/EditPage.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIrD,UAAU,KAAK;IACb,gEAAgE;IAChE,IAAI,EAAE,QAAQ,GAAG;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,qIAAqI;IACrI,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,WAAW,CAAA;KAAE,KAAK,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACvG,8DAA8D;IAC9D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;oFACgF;IAChF,IAAI,CAAC,EAAE;QAAE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,wBAAwB,EAAE,WAAW,EAAE,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC9I;AAyQH;;;;GAIG;AACH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/LinkPicker.svelte

@@ -0,0 +1,109 @@
+<!--
+@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 stays the toolbar's link button; this is for an internal target.
+-->
+<script lang="ts">
+  import type { LinkTarget } from '../content/manifest.js';
+  import { formatCairnToken } from '../content/links.js';
+
+  interface Props {
+    /** The site's link targets, from the committed manifest (editLoad ships them). */
+    linkTargets: LinkTarget[];
+    /** Insert an inline cairn link at the editor cursor. */
+    insert: (href: string, title: string) => void;
+  }
+
+  let { linkTargets, insert }: 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));
+  });
+
+  function open() {
+    query = '';
+    dialog?.showModal();
+  }
+  function close() {
+    dialog?.close();
+  }
+  function choose(target: LinkTarget) {
+    insert(formatCairnToken(target), target.title);
+    close();
+  }
+</script>
+
+<button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" aria-label="Link to page" onclick={open}>
+  Link to page
+</button>
+
+<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>

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

@@ -0,0 +1,18 @@
+import type { LinkTarget } from '../content/manifest.js';
+interface Props {
+    /** The site's link targets, from the committed manifest (editLoad ships them). */
+    linkTargets: LinkTarget[];
+    /** Insert an inline cairn link at the editor cursor. */
+    insert: (href: string, title: string) => void;
+}
+/**
+ * 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 stays the toolbar's link button; this is for an internal target.
+ */
+declare const LinkPicker: import("svelte").Component<Props, {}, "">;
+type LinkPicker = ReturnType<typeof LinkPicker>;
+export default LinkPicker;
+//# sourceMappingURL=LinkPicker.svelte.d.ts.map

package/dist/components/LinkPicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/LinkPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIvD,UAAU,KAAK;IACb,kFAAkF;IAClF,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,wDAAwD;IACxD,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AA8FH;;;;;;GAMG;AACH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/MarkdownEditor.svelte

@@ -9,7 +9,7 @@ preview lives in EditPage through the adapter's render. Swapping the editor stay
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import EditorToolbar from './EditorToolbar.svelte';
-  import { applyMarkdownFormat, type FormatKind } from './markdown-format.js';
+  import { applyMarkdownFormat, insertInlineLink, type FormatKind } from './markdown-format.js';
 
   interface Props {
     /** The markdown source; bindable so the parent reads edits back. */
@@ -18,9 +18,14 @@ preview lives in EditPage through the adapter's render. Swapping the editor stay
     name: string;
     /** Receives a `(text) => void` that inserts at the cursor; the palette calls it. */
     registerInsert?: (insert: (text: string) => void) => void;
+    /** Receives a `(href, title) => void` that inserts an inline link; the link picker calls it. */
+    registerInsertLink?: (insert: (href: string, title: string) => void) => void;
+    /** Generic CodeMirror completion sources wired into the editor; the link autocomplete is one. The
+     *  type is referenced inline so no static `@codemirror/*` import sits in this client-only file. */
+    completionSources?: import('@codemirror/autocomplete').CompletionSource[];
   }
 
-  let { value = $bindable(), name, registerInsert }: Props = $props();
+  let { value = $bindable(), name, registerInsert, registerInsertLink, completionSources = [] }: Props = $props();
 
   let host = $state<HTMLDivElement | null>(null);
   let mounted = $state(false);
@@ -35,6 +40,7 @@ preview lives in EditPage through the adapter's render. Swapping the editor stay
     const markdownMod = await import('@codemirror/lang-markdown');
     const commandsMod = await import('@codemirror/commands');
     const languageMod = await import('@codemirror/language');
+    const autocompleteMod = await import('@codemirror/autocomplete');
 
     if (!host) return;
 
@@ -56,8 +62,13 @@ preview lives in EditPage through the adapter's render. Swapping the editor stay
         doc: value,
         extensions: [
           commandsMod.history(),
-          keymap.of([...commandsMod.defaultKeymap, ...commandsMod.historyKeymap]),
+          keymap.of([...autocompleteMod.completionKeymap, ...commandsMod.defaultKeymap, ...commandsMod.historyKeymap]),
           markdownMod.markdown(),
+          ...(completionSources.length
+            ? // interactionDelay 0: the popup opens only on an explicit `[[` trigger, so the default
+              // accidental-accept guard adds no value and would swallow an immediate Enter into a newline.
+              [autocompleteMod.autocompletion({ override: completionSources, interactionDelay: 0 })]
+            : []),
           EditorView.lineWrapping,
           languageMod.syntaxHighlighting(languageMod.defaultHighlightStyle, { fallback: true }),
           theme,
@@ -69,6 +80,7 @@ preview lives in EditPage through the adapter's render. Swapping the editor stay
     });
 
     registerInsert?.(insertAtCursor);
+    registerInsertLink?.(insertLink);
     mounted = true;
   });
 
@@ -96,6 +108,24 @@ preview lives in EditPage through the adapter's render. Swapping the editor stay
     view.focus();
   }
 
+  function insertLink(href: string, title: string) {
+    if (!view) {
+      // The editor has not mounted yet; append the link to the raw value so a pick is never lost,
+      // mirroring insertAtCursor's pre-mount fallback.
+      const link = insertInlineLink('', 0, 0, href, title).doc;
+      value = value ? `${value} ${link}` : link;
+      return;
+    }
+    const { from, to } = view.state.selection.main;
+    const doc = view.state.doc.toString();
+    const next = insertInlineLink(doc, from, to, href, title);
+    view.dispatch({
+      changes: { from: 0, to: doc.length, insert: next.doc },
+      selection: { anchor: next.from, head: next.to },
+    });
+    view.focus();
+  }
+
   function applyFormat(kind: FormatKind) {
     if (!view) return;
     const { from, to } = view.state.selection.main;

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

@@ -5,6 +5,11 @@ interface Props {
     name: string;
     /** Receives a `(text) => void` that inserts at the cursor; the palette calls it. */
     registerInsert?: (insert: (text: string) => void) => void;
+    /** Receives a `(href, title) => void` that inserts an inline link; the link picker calls it. */
+    registerInsertLink?: (insert: (href: string, title: string) => void) => void;
+    /** Generic CodeMirror completion sources wired into the editor; the link autocomplete is one. The
+     *  type is referenced inline so no static `@codemirror/*` import sits in this client-only file. */
+    completionSources?: import('@codemirror/autocomplete').CompletionSource[];
 }
 /**
  * The `MarkdownEditor` seam (spec §6, seam 5): a thin wrapper over CodeMirror 6 exposing a bindable

package/dist/components/MarkdownEditor.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MarkdownEditor.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;CAC3D;AA6GH;;;;;;GAMG;AACH,QAAA,MAAM,cAAc,gDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MarkdownEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/MarkdownEditor.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,EAAE,MAAM,CAAC;IACb,oFAAoF;IACpF,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;IAC1D,gGAAgG;IAChG,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;IAC7E;uGACmG;IACnG,iBAAiB,CAAC,EAAE,OAAO,0BAA0B,EAAE,gBAAgB,EAAE,CAAC;CAC3E;AAsIH;;;;;;GAMG;AACH,QAAA,MAAM,cAAc,gDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/RenameDialog.svelte

@@ -0,0 +1,72 @@
+<!--
+@component
+The Change URL control and its modal. The author edits the URL slug; on submit the ?/rename action
+moves the entry and rewrites every inbound cairn link in one commit, so no internal link breaks. A
+dated post keeps its date; only the slug changes. Built on a native <dialog>, following the
+DeleteDialog a11y conventions.
+-->
+<script lang="ts">
+  interface Props {
+    /** The concept this entry belongs to, e.g. "posts". Posted with the confirm. */
+    conceptId: string;
+    /** The entry id within its concept. Posted with the confirm. */
+    id: string;
+    /** A human label for the concept, e.g. "Post", used in the prompts. */
+    label: string;
+    /** The current slug, prefilled into the input. */
+    slug: string;
+  }
+
+  let { conceptId, id, label, slug }: Props = $props();
+
+  let dialog = $state<HTMLDialogElement | null>(null);
+  let slugInput = $state<HTMLInputElement | null>(null);
+  // Seeded on open() rather than from the prop at declaration, so the input prefills with the
+  // current slug each time the dialog opens without capturing only the initial prop value.
+  let nextSlug = $state('');
+
+  function open() {
+    nextSlug = slug;
+    dialog?.showModal();
+    // showModal() lands focus on the first focusable element (the header Close button), so move
+    // it to the slug input the dialog exists for, and select the prefill so the author can replace
+    // it in one keystroke (WCAG 2.4.3). A microtask defers past the dialog's own focus handling.
+    queueMicrotask(() => {
+      slugInput?.focus();
+      slugInput?.select();
+    });
+  }
+  function close() {
+    dialog?.close();
+  }
+</script>
+
+<button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" onclick={open}>Change URL</button>
+
+<dialog class="modal" aria-labelledby="cairn-rename-dialog-title" bind:this={dialog}>
+  <div class="modal-box">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 id="cairn-rename-dialog-title" class="text-base font-semibold">Change this {label.toLowerCase()} URL</h2>
+      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
+    </div>
+    <form method="POST" action="?/rename" class="flex flex-col gap-3">
+      <input type="hidden" name="concept" value={conceptId} />
+      <input type="hidden" name="id" value={id} />
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">URL slug</span>
+        <input class="input" name="slug" bind:value={nextSlug} bind:this={slugInput} autocomplete="off" />
+      </label>
+      <p class="text-xs text-[var(--color-muted)]">
+        Links from other pages update automatically, so nothing breaks. The new URL slug will be
+        <code class="text-xs">{nextSlug}</code>.
+      </p>
+      <div class="flex justify-end gap-2">
+        <button type="button" class="btn btn-sm" onclick={close}>Cancel</button>
+        <button type="submit" class="btn btn-sm btn-primary">Change URL</button>
+      </div>
+    </form>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button tabindex="-1" aria-label="Close">close</button>
+  </form>
+</dialog>

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

@@ -0,0 +1,20 @@
+interface Props {
+    /** The concept this entry belongs to, e.g. "posts". Posted with the confirm. */
+    conceptId: string;
+    /** The entry id within its concept. Posted with the confirm. */
+    id: string;
+    /** A human label for the concept, e.g. "Post", used in the prompts. */
+    label: string;
+    /** The current slug, prefilled into the input. */
+    slug: string;
+}
+/**
+ * The Change URL control and its modal. The author edits the URL slug; on submit the ?/rename action
+ * moves the entry and rewrites every inbound cairn link in one commit, so no internal link breaks. A
+ * dated post keeps its date; only the slug changes. Built on a native <dialog>, following the
+ * DeleteDialog a11y conventions.
+ */
+declare const RenameDialog: import("svelte").Component<Props, {}, "">;
+type RenameDialog = ReturnType<typeof RenameDialog>;
+export default RenameDialog;
+//# sourceMappingURL=RenameDialog.svelte.d.ts.map

package/dist/components/RenameDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RenameDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/RenameDialog.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,gFAAgF;IAChF,SAAS,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;CACd;AA6DH;;;;;GAKG;AACH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/index.d.ts

@@ -9,4 +9,7 @@ export { default as ComponentInsertDialog } from './ComponentInsertDialog.svelte
 export { default as ComponentForm } from './ComponentForm.svelte';
 export { default as IconPicker } from './IconPicker.svelte';
 export { default as NavTree } from './NavTree.svelte';
+export { default as LinkPicker } from './LinkPicker.svelte';
+export { default as DeleteDialog } from './DeleteDialog.svelte';
+export { default as RenameDialog } from './RenameDialog.svelte';
 //# sourceMappingURL=index.d.ts.map