@glw907/cairn-cms 0.17.0 → 0.21.0

package/src/lib/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/src/lib/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/src/lib/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/src/lib/components/index.ts

@@ -11,3 +11,6 @@ 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';

package/src/lib/components/link-completion.ts

@@ -0,0 +1,57 @@
+// cairn-cms: the [[ link autocomplete (content-graph design). The matcher and the completion
+// builder are pure so they unit-test without a DOM; cairnLinkCompletionSource is a thin adapter
+// to CodeMirror's CompletionSource. The editor wires the source through a generic completionSources
+// prop, so this stays the only link-aware piece and the seam itself knows nothing about links.
+import type { Completion, CompletionContext, CompletionResult, CompletionSource } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+import type { LinkTarget } from '../content/manifest.js';
+import { formatCairnToken, escapeLinkText } from '../content/links.js';
+
+/** The known concepts in display order; an unlisted concept sorts after these under its own name. */
+const CONCEPT_SECTIONS: Record<string, { name: string; rank: number }> = {
+  pages: { name: 'Pages', rank: 0 },
+  posts: { name: 'Posts', rank: 1 },
+};
+
+function sectionFor(concept: string): { name: string; rank: number } {
+  return CONCEPT_SECTIONS[concept] ?? { name: concept.charAt(0).toUpperCase() + concept.slice(1), rank: 2 };
+}
+
+/** The open `[[query` before the cursor, or null. The query stops at a closing bracket or a newline,
+ *  so a finished `[[x]]` link and ordinary prose never trigger. `from` is the index of the `[[`. */
+export function matchCairnTrigger(before: string): { query: string; from: number } | null {
+  const match = /\[\[([^[\]\n]*)$/.exec(before);
+  return match ? { query: match[1], from: match.index } : null;
+}
+
+/** The completion options for a query: a case-insensitive title substring match, each option grouped
+ *  by concept, a draft marked and a post date shown in the detail, and the apply text the full link. */
+export function linkCompletions(targets: LinkTarget[], query: string): Completion[] {
+  const q = query.trim().toLowerCase();
+  const matched = q ? targets.filter((t) => t.title.toLowerCase().includes(q)) : targets;
+  return matched.map((t) => ({
+    label: t.title,
+    section: sectionFor(t.concept),
+    detail: t.draft ? 'Draft' : t.date,
+    apply: `[${escapeLinkText(t.title)}](${formatCairnToken(t)})`,
+  }));
+}
+
+/** A CodeMirror CompletionSource over the site's link targets, triggered by `[[`. It replaces the
+ *  whole `[[query` with the chosen link, and sets filter:false because linkCompletions already
+ *  filtered by the query (CodeMirror would otherwise re-filter against the literal `[[query`). */
+export function cairnLinkCompletionSource(targets: LinkTarget[]): CompletionSource {
+  return (context: CompletionContext): CompletionResult | null => {
+    const line = context.state.doc.lineAt(context.pos);
+    const before = context.state.sliceDoc(line.from, context.pos);
+    const trigger = matchCairnTrigger(before);
+    if (!trigger) return null;
+    // Skip a [[ inside a fenced or inline code node: a cairn link there would be literal text, and
+    // the build resolver does not look inside code. The node name carries "Code" for both forms.
+    const node = syntaxTree(context.state).resolveInner(context.pos, -1);
+    for (let n: typeof node | null = node; n; n = n.parent) {
+      if (/Code/.test(n.name)) return null;
+    }
+    return { from: line.from + trigger.from, options: linkCompletions(targets, trigger.query), filter: false };
+  };
+}

package/src/lib/components/markdown-format.ts

@@ -3,6 +3,13 @@
  * selection range to a new document and a new selection, with no DOM. The MarkdownEditor view
  * dispatches the result; keeping the logic here lets it unit-test without a browser.
  */
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import { visit } from 'unist-util-visit';
+import type { Link } from 'mdast';
+import { escapeLinkText } from '../content/links.js';
+
 export type FormatKind = 'bold' | 'italic' | 'code' | 'heading' | 'quote' | 'ul' | 'link';
 
 export interface FormatResult {
@@ -37,3 +44,78 @@ export function applyMarkdownFormat(doc: string, from: number, to: number, kind:
   const added = prefixed.length - region.length;
   return { doc: doc.slice(0, lineStart) + prefixed + doc.slice(to), from: from + prefix.length, to: to + added };
 }
+
+/**
+ * Insert an inline markdown link at the selection. With a non-empty selection the selected text
+ * becomes the display text; with an empty selection the title is the display text. The cursor
+ * collapses just after the inserted link. Unlike the block insert, this adds no surrounding
+ * blank lines, since a link is inline. Pure, so the editor dispatches the result.
+ */
+export function insertInlineLink(doc: string, from: number, to: number, href: string, title: string): FormatResult {
+  const text = from < to ? doc.slice(from, to) : escapeLinkText(title);
+  const inserted = `[${text}](${href})`;
+  const end = from + inserted.length;
+  return { doc: doc.slice(0, from) + inserted + doc.slice(to), from: end, to: end };
+}
+
+/** Concatenate a link node's text-child values. The parser has already unescaped them, so a source
+ *  `Notes \[draft\]` yields `Notes [draft]`. Used instead of mdast-util-to-string, which is not a
+ *  direct dependency. Non-text children (a nested emphasis, say) contribute no value, which is fine
+ *  for the picker-produced links this fix targets. */
+function linkText(node: Link): string {
+  return node.children.map((c) => ('value' in c ? c.value : '')).join('');
+}
+
+/**
+ * Unwrap every cairn: link whose href is exactly `href`, replacing it with its plain display text.
+ * The save guard's one-click fix calls this to drop a broken link while keeping the words. The
+ * document is parsed with the same remark pipeline extractCairnLinks uses, so the two agree on what
+ * a link is. Each matching link node is located by its source offsets and spliced out from last to
+ * first, which leaves the rest of the document exact and unescapes the display text. A token inside
+ * a code span or fence is not a link node, so it is never touched, and a link with a different url
+ * is left in place.
+ */
+export function unwrapCairnLink(doc: string, href: string): string {
+  const tree = unified().use(remarkParse).use(remarkGfm).parse(doc);
+  const spans: { start: number; end: number; text: string }[] = [];
+  visit(tree, 'link', (node: Link) => {
+    if (node.url !== href) return;
+    const start = node.position?.start?.offset;
+    const end = node.position?.end?.offset;
+    if (start == null || end == null) return;
+    spans.push({ start, end, text: linkText(node) });
+  });
+  spans.sort((a, b) => b.start - a.start);
+  let out = doc;
+  for (const span of spans) {
+    out = out.slice(0, span.start) + span.text + out.slice(span.end);
+  }
+  return out;
+}
+
+/**
+ * Rewrite every cairn: link whose href is exactly `oldHref` so its href becomes `newHref`, keeping
+ * the display text and any link title byte-for-byte. Rename calls this to repoint a renamed entry's
+ * inbound tokens. Parsed with the same remark pipeline as extractCairnLinks, so a token inside a code
+ * span is not a link node and is never touched. Each matching node's source span is rewritten from
+ * last to first, replacing only the `](oldHref` run so the label and title stay exact.
+ */
+export function rewriteCairnLink(doc: string, oldHref: string, newHref: string): string {
+  const tree = unified().use(remarkParse).use(remarkGfm).parse(doc);
+  const spans: { start: number; end: number }[] = [];
+  visit(tree, 'link', (node: Link) => {
+    if (node.url !== oldHref) return;
+    const start = node.position?.start?.offset;
+    const end = node.position?.end?.offset;
+    if (start == null || end == null) return;
+    spans.push({ start, end });
+  });
+  spans.sort((a, b) => b.start - a.start);
+  let out = doc;
+  for (const span of spans) {
+    const src = out.slice(span.start, span.end);
+    const rewritten = src.replace(`](${oldHref}`, `](${newHref}`);
+    out = out.slice(0, span.start) + rewritten + out.slice(span.end);
+  }
+  return out;
+}

package/src/lib/content/compose.ts

@@ -31,6 +31,7 @@ export function composeRuntime(
     backend: adapter.backend,
     sender: adapter.sender,
     render: adapter.render,
+    manifestPath: adapter.manifestPath ?? 'src/content/.cairn/index.json',
     registry: adapter.registry,
     icons: adapter.icons,
     navMenu: adapter.navMenu,

package/src/lib/content/ids.ts

@@ -80,3 +80,15 @@ export function composeDatedId(date: string, slug: string, datePrefix: DatePrefi
   }
   return `${prefix}-${slug}`;
 }
+
+/**
+ * Rename an id by swapping its slug, keeping any date prefix. slugFromId strips only the leading
+ * date prefix, so the id is exactly its prefix followed by its slug; this replaces the slug suffix
+ * with newSlug. A non-dated concept passes null, so the whole id is the slug and the id becomes
+ * newSlug. The caller validates newSlug with isValidId first.
+ */
+export function renameId(oldId: string, newSlug: string, datePrefix: DatePrefix | null): string {
+  const oldSlug = slugFromId(oldId, datePrefix);
+  const prefix = oldId.slice(0, oldId.length - oldSlug.length);
+  return prefix + newSlug;
+}

package/src/lib/content/links.ts

@@ -0,0 +1,61 @@
+// cairn-cms: the cairn: internal-link token. An internal link is a standard CommonMark link
+// whose href is `cairn:<concept>/<id>`, keyed to the target's permanent filename stem so it
+// survives a slug, date, or permalink change (content-graph design). This module owns the
+// grammar; the render resolver (resolve-links.ts) reuses parseCairnToken.
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import { visit } from 'unist-util-visit';
+import { isValidId } from './ids.js';
+
+/** A resolved reference to a content entry by its concept and permanent id. */
+export interface CairnRef {
+  concept: string;
+  id: string;
+}
+
+/** Resolve a reference to its live permalink. Returns undefined when the target is missing (the
+ *  preview marks it); the build resolver throws instead, so a dangling token fails the build. */
+export type LinkResolve = (ref: CairnRef) => string | undefined;
+
+/** Parse a `cairn:<concept>/<id>` href, or null for any other href or a malformed token. */
+export function parseCairnToken(href: string): CairnRef | null {
+  if (!href.startsWith('cairn:')) return null;
+  const rest = href.slice('cairn:'.length);
+  const slash = rest.indexOf('/');
+  if (slash <= 0) return null;
+  const concept = rest.slice(0, slash);
+  const id = rest.slice(slash + 1);
+  if (!concept || !isValidId(id)) return null;
+  return { concept, id };
+}
+
+/** Write the `cairn:<concept>/<id>` token for a ref. The inverse of parseCairnToken, so the editor
+ *  link picker and the autocomplete write exactly the form the resolver reads back. */
+export function formatCairnToken(ref: CairnRef): string {
+  return `cairn:${ref.concept}/${ref.id}`;
+}
+
+/** Escape the characters that would break a markdown link's display text: a backslash and the
+ *  square brackets that delimit the text. Used where a content title becomes link display text,
+ *  so an unbalanced bracket in a title cannot truncate the generated link. */
+export function escapeLinkText(text: string): string {
+  return text.replace(/[\\[\]]/g, (ch) => `\\${ch}`);
+}
+
+/** The cairn links a markdown body points at, in first-occurrence order, deduped by concept/id.
+ *  Parses the body as mdast, so a token inside a code span or fence is never matched. */
+export function extractCairnLinks(body: string): CairnRef[] {
+  const tree = unified().use(remarkParse).use(remarkGfm).parse(body);
+  const seen = new Set<string>();
+  const refs: CairnRef[] = [];
+  visit(tree, 'link', (node: { url?: string }) => {
+    const ref = node.url ? parseCairnToken(node.url) : null;
+    if (!ref) return;
+    const key = `${ref.concept}/${ref.id}`;
+    if (seen.has(key)) return;
+    seen.add(key);
+    refs.push(ref);
+  });
+  return refs;
+}