@glw907/cairn-cms 0.37.1 → 0.40.0

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

@@ -1,3 +1,4 @@
+import { type FormatKind } from './markdown-format.js';
 interface Props {
     /** The markdown source; bindable so the parent reads edits back. */
     value: string;
@@ -7,16 +8,21 @@ interface Props {
     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;
+    /** Receives a `() => string` returning the selected text; the web link dialog reads it. */
+    registerGetSelection?: (get: () => string) => void;
+    /** Receives a `(kind) => void` that transforms the current selection; the host's toolbar calls it. */
+    registerFormat?: (format: (kind: FormatKind) => 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
- * value and a cursor-insert callback. CodeMirror is client-only, so it mounts after the component does
+ * value and cursor-edit callbacks. CodeMirror is client-only, so it mounts after the component does
  * through a dynamic import; until then a plain textarea carries the value so the form still submits, and
- * the hidden field mirrors the value throughout. The edit surface owns its toolbar; the design-accurate
- * preview lives in EditPage through the adapter's render. Swapping the editor stays a one-file change.
+ * the hidden field mirrors the value throughout. The host owns the toolbar and the card chrome, driving
+ * selection transforms through the registerFormat seam; the design-accurate preview lives in EditPage
+ * through the adapter's render. Swapping the editor stays a one-file change.
  */
 declare const MarkdownEditor: import("svelte").Component<Props, {}, "value">;
 type MarkdownEditor = ReturnType<typeof MarkdownEditor>;

package/dist/components/MarkdownHelpDialog.svelte

@@ -0,0 +1,58 @@
+<!--
+@component
+The Markdown cheat sheet, opened from the edit page's editor footer. A one-screen table pairs
+each piece of syntax with what it makes, and a closing note explains the ::: layout blocks.
+Built on a native <dialog>, the DeleteDialog recipe; the host drives it through the exported
+open(), so the component renders no trigger of its own.
+-->
+<script lang="ts">
+  let dialog = $state<HTMLDialogElement | null>(null);
+
+  /** Open the cheat sheet. The trigger lives in the host (the edit page's editor footer). */
+  export function open() {
+    dialog?.showModal();
+  }
+  function close() {
+    dialog?.close();
+  }
+</script>
+
+<dialog class="modal" aria-labelledby="cairn-markdown-help-title" bind:this={dialog}>
+  <div class="modal-box">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 id="cairn-markdown-help-title" class="text-base font-semibold">Markdown help</h2>
+      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
+    </div>
+    <table class="table table-sm">
+      <thead>
+        <tr>
+          <th class="text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]">Type this</th>
+          <th class="text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]">What it makes</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr><td><code>## Heading</code></td><td>A heading</td></tr>
+        <tr><td><code>### Heading</code></td><td>A smaller heading</td></tr>
+        <tr><td><code>**bold**</code></td><td>Bold text</td></tr>
+        <tr><td><code>*italic*</code></td><td>Italic text</td></tr>
+        <tr><td><code>~~text~~</code></td><td>Crossed-out text</td></tr>
+        <tr><td><code>[text](url)</code></td><td>A link</td></tr>
+        <tr><td><code>[[page-name]]</code></td><td>A link to one of your pages</td></tr>
+        <tr><td><code>- item</code></td><td>A bulleted list</td></tr>
+        <tr><td><code>1. item</code></td><td>A numbered list</td></tr>
+        <tr><td><code>- [ ] item</code></td><td>A checklist</td></tr>
+        <tr><td><code>&gt; quote</code></td><td>A quote</td></tr>
+        <tr><td><code>`code`</code></td><td>Code</td></tr>
+        <tr><td>Table</td><td>The Table button in the toolbar inserts one</td></tr>
+        <tr><td><code>---</code></td><td>A horizontal rule</td></tr>
+      </tbody>
+    </table>
+    <p class="mt-3 text-sm">
+      Lines starting with <code>:::</code> are layout blocks. Edit the text inside them and leave
+      the <code>:::</code> lines alone.
+    </p>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button tabindex="-1" aria-label="Close">close</button>
+  </form>
+</dialog>

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

@@ -0,0 +1,11 @@
+/**
+ * The Markdown cheat sheet, opened from the edit page's editor footer. A one-screen table pairs
+ * each piece of syntax with what it makes, and a closing note explains the ::: layout blocks.
+ * Built on a native <dialog>, the DeleteDialog recipe; the host drives it through the exported
+ * open(), so the component renders no trigger of its own.
+ */
+declare const MarkdownHelpDialog: import("svelte").Component<Record<string, never>, {
+    open: () => void;
+}, "">;
+type MarkdownHelpDialog = ReturnType<typeof MarkdownHelpDialog>;
+export default MarkdownHelpDialog;

package/dist/components/RenameDialog.svelte

@@ -17,9 +17,15 @@ DeleteDialog a11y conventions.
     label: string;
     /** The current slug, prefilled into the input. */
     slug: string;
+    /** Render the built-in Change URL trigger. False mounts only the dialog, for a host that
+     *  supplies its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
+    /** Called when the rename form submits, before the document navigates. The edit page uses it
+     *  to stand down its leave guard while the POST is in flight. */
+    onsubmitting?: () => void;
   }
 
-  let { conceptId, id, label, slug }: Props = $props();
+  let { conceptId, id, label, slug, trigger = true, onsubmitting }: Props = $props();
 
   let dialog = $state<HTMLDialogElement | null>(null);
   let slugInput = $state<HTMLInputElement | null>(null);
@@ -27,7 +33,8 @@ DeleteDialog a11y conventions.
   // current slug each time the dialog opens without capturing only the initial prop value.
   let nextSlug = $state('');
 
-  function open() {
+  /** Open the dialog with a fresh prefill. Exported so a trigger={false} host can drive it. */
+  export function open() {
     nextSlug = slug;
     dialog?.showModal();
     // showModal() lands focus on the first focusable element (the header Close button), so move
@@ -43,7 +50,9 @@ DeleteDialog a11y conventions.
   }
 </script>
 
-<button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" onclick={open}>Change URL</button>
+{#if trigger}
+  <button type="button" class="btn btn-sm btn-ghost" aria-haspopup="dialog" onclick={open}>Change URL</button>
+{/if}
 
 <dialog class="modal" aria-labelledby="cairn-rename-dialog-title" bind:this={dialog}>
   <div class="modal-box">
@@ -51,7 +60,7 @@ DeleteDialog a11y conventions.
       <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">
+    <form method="POST" action="?/rename" class="flex flex-col gap-3" onsubmit={() => onsubmitting?.()}>
       <CsrfField />
       <input type="hidden" name="concept" value={conceptId} />
       <input type="hidden" name="id" value={id} />

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

@@ -7,6 +7,12 @@ interface Props {
     label: string;
     /** The current slug, prefilled into the input. */
     slug: string;
+    /** Render the built-in Change URL trigger. False mounts only the dialog, for a host that
+     *  supplies its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
+    /** Called when the rename form submits, before the document navigates. The edit page uses it
+     *  to stand down its leave guard while the POST is in flight. */
+    onsubmitting?: () => void;
 }
 /**
  * The Change URL control and its modal. The author edits the URL slug; on submit the ?/rename action
@@ -14,6 +20,8 @@ interface Props {
  * 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, {}, "">;
+declare const RenameDialog: import("svelte").Component<Props, {
+    open: () => void;
+}, "">;
 type RenameDialog = ReturnType<typeof RenameDialog>;
 export default RenameDialog;

package/dist/components/WebLinkDialog.svelte

@@ -0,0 +1,89 @@
+<!--
+@component
+The Web link control and its modal: the way to link out to an ordinary web address, beside the
+Link to page picker that handles internal targets. Two fields, the address and an optional display
+text; when the editor holds a selection it arrives as the default text, and the insert seam wraps
+that selection either way. Built on a native <dialog>, following the LinkPicker a11y conventions,
+and opened by the host's Ctrl/Cmd+K shortcut through the exported open().
+-->
+<script lang="ts">
+  interface Props {
+    /** Insert an inline link at the editor cursor; the editor's registerInsertLink seam. */
+    insert: (href: string, title: string) => void;
+    /** Read the editor's current selection, for the Text field's default. */
+    selection?: () => string;
+    /** Disable the trigger; the host sets it while Preview shows. */
+    disabled?: boolean;
+    /** Render the built-in Web link trigger. False mounts only the dialog, for a host that
+     *  supplies its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
+  }
+
+  let { insert, selection, disabled = false, trigger = true }: Props = $props();
+
+  let dialog = $state<HTMLDialogElement | null>(null);
+  let hrefInput = $state<HTMLInputElement | null>(null);
+  let href = $state('');
+  let text = $state('');
+
+  /** Open the dialog with fresh fields; the edit page's Ctrl/Cmd+K shortcut calls it too. */
+  export function open() {
+    href = '';
+    text = selection?.() ?? '';
+    dialog?.showModal();
+    // showModal() lands focus on the first focusable element (the header Close button), so move
+    // it to the address input the dialog exists for (WCAG 2.4.3). A microtask defers past the
+    // dialog's own focus handling, the RenameDialog recipe.
+    queueMicrotask(() => hrefInput?.focus());
+  }
+  function close() {
+    dialog?.close();
+  }
+  function submit(e: SubmitEvent) {
+    e.preventDefault();
+    // With no text and no selection the address itself becomes the display text, so the link
+    // never renders as an invisible pair of brackets.
+    insert(href, text.trim() || href);
+    close();
+  }
+</script>
+
+{#if trigger}
+  <button
+    type="button"
+    class="btn btn-sm btn-ghost"
+    aria-haspopup="dialog"
+    aria-label="Web link (Ctrl+K)"
+    title="Web link (Ctrl+K)"
+    {disabled}
+    onclick={open}
+  >
+    Web link
+  </button>
+{/if}
+
+<dialog class="modal" aria-labelledby="cairn-web-link-dialog-title" bind:this={dialog}>
+  <div class="modal-box">
+    <div class="mb-3 flex items-center justify-between">
+      <h2 id="cairn-web-link-dialog-title" class="text-base font-semibold">Add a web link</h2>
+      <button type="button" class="btn btn-ghost btn-sm" aria-label="Close" onclick={close}>✕</button>
+    </div>
+    <form onsubmit={submit} class="flex flex-col gap-3">
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">Web address</span>
+        <input class="input w-full" type="url" required placeholder="https://…" bind:value={href} bind:this={hrefInput} />
+      </label>
+      <label class="flex flex-col gap-1">
+        <span class="text-sm font-medium">Text</span>
+        <input class="input w-full" placeholder="What the link says" bind:value={text} />
+      </label>
+      <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">Add link</button>
+      </div>
+    </form>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button tabindex="-1" aria-label="Close">close</button>
+  </form>
+</dialog>

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

@@ -0,0 +1,23 @@
+interface Props {
+    /** Insert an inline link at the editor cursor; the editor's registerInsertLink seam. */
+    insert: (href: string, title: string) => void;
+    /** Read the editor's current selection, for the Text field's default. */
+    selection?: () => string;
+    /** Disable the trigger; the host sets it while Preview shows. */
+    disabled?: boolean;
+    /** Render the built-in Web link trigger. False mounts only the dialog, for a host that
+     *  supplies its own trigger and opens the dialog through the exported open(). */
+    trigger?: boolean;
+}
+/**
+ * The Web link control and its modal: the way to link out to an ordinary web address, beside the
+ * Link to page picker that handles internal targets. Two fields, the address and an optional display
+ * text; when the editor holds a selection it arrives as the default text, and the insert seam wraps
+ * that selection either way. Built on a native <dialog>, following the LinkPicker a11y conventions,
+ * and opened by the host's Ctrl/Cmd+K shortcut through the exported open().
+ */
+declare const WebLinkDialog: import("svelte").Component<Props, {
+    open: () => void;
+}, "">;
+type WebLinkDialog = ReturnType<typeof WebLinkDialog>;
+export default WebLinkDialog;