terminoir 0.8.0 → 0.9.0

package/README.md

@@ -153,6 +153,7 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `DataTable` | Columns, `cell` snippet, clickable rows, `hideOnMobile`, empty state |
 | `List`, `ListItem`, `DescriptionList`, `FormRow` | Rows with leading/trailing slots; key–value pairs; label-left form rows |
 | `SearchPicker` | Debounced async combobox (`search(q)`), keyboard navigation; grows to fill a row after chips |
+| `MarkdownEditor` | Notion-style editor that reads and writes markdown (Milkdown): `/` block menu, block handle (`+` and drag to move), checklists, markdown shortcuts, undo. `linkSearch` enables `[[` links written as `[[id\|label]]`; `onlinkopen` gets the clicked target. Outside `value` changes apply while it is not focused; `onchange` fires only after a user edit |
 | `PropertyRow` | Compact icon + label row for inline-edited values (record properties); hover highlights the row |
 | `ChipSelect`, `DateField` | Value shown as a coloured `Chip` that opens a grouped option list (`ChipSelectOption`, `ChipSelectGroup`); date shown as "Today" / "Tomorrow" / weekday / "Nov 12" (`dayLabel`), `deadline` tints past and today, opens the native picker, Backspace clears |
 | `TitleInput`, `FileButton`, `RadioCards` | Borderless heading input; button that opens a file picker; card-style radio group |

package/dist/components/MarkdownEditor.svelte

@@ -0,0 +1,362 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, remarkStringifyOptionsCtx, rootCtx } from '@milkdown/kit/core';
+  import type { Ctx } from '@milkdown/kit/ctx';
+  import { block, BlockProvider } from '@milkdown/kit/plugin/block';
+  import { clipboard } from '@milkdown/kit/plugin/clipboard';
+  import { history } from '@milkdown/kit/plugin/history';
+  import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
+  import { commonmark } from '@milkdown/kit/preset/commonmark';
+  import { gfm } from '@milkdown/kit/preset/gfm';
+  import { TextSelection } from '@milkdown/kit/prose/state';
+  import { getMarkdown, replaceAll } from '@milkdown/kit/utils';
+  import { cn } from '../utils/cn.js';
+  import type { PickerOption } from '../utils/componentTypes.js';
+  import { moveIndex } from '../utils/listNav.js';
+  import { matchBlocks, placeholderPlugin, taskListItemView, tidyMarkdown, type BlockItem } from '../utils/markdownEditor/blocks.js';
+  import { triggerPlugin, type Trigger } from '../utils/markdownEditor/triggers.js';
+  import { wikilink, wikilinkNode } from '../utils/markdownEditor/wikilink.js';
+  import NavIcon from './NavIcon.svelte';
+
+  type MenuEntry = { id: string; label: string; icon?: string; iconColor?: string; description?: string; choose: () => void };
+
+  const LINK_SEARCH_DEBOUNCE_MS = 120;
+
+  let {
+    value,
+    onchange,
+    label,
+    placeholder = 'Write, or type / for blocks',
+    linkSearch,
+    onlinkopen,
+    class: className = ''
+  }: {
+    /** Markdown. Outside changes are applied while the editor is not focused. */
+    value: string;
+    /** Called with the edited markdown (only after a user edit, never on load). */
+    onchange?: (markdown: string) => void;
+    /** Accessible name of the writing surface. */
+    label: string;
+    placeholder?: string;
+    /** Enables `[[` links: options for the typed text. A chosen option is written as `[[id|label]]`. */
+    linkSearch?: (query: string) => Promise<PickerOption[]>;
+    /** A `[[link]]` was clicked; receives its target (the part before `|`). */
+    onlinkopen?: (target: string) => void;
+    class?: string;
+  } = $props();
+
+  const uid = $props.id();
+  let root = $state<HTMLDivElement>();
+  let host = $state<HTMLDivElement>();
+  let handle = $state<HTMLDivElement>();
+  let editor: Editor | undefined;
+  let provider: BlockProvider | undefined;
+  /** Normalized markdown of what the editor last loaded or emitted; changes equal to it are not edits. */
+  let known = '';
+
+  let trigger = $state<Trigger | null>(null);
+  let entries = $state<MenuEntry[]>([]);
+  let active = $state(0);
+  let searching = $state(false);
+  let searchSeq = 0;
+
+  function act<T>(fn: (ctx: Ctx) => T): T | undefined {
+    return editor?.action(fn);
+  }
+
+  function replaceTrigger(run: (ctx: Ctx) => void) {
+    const range = trigger;
+    if (!range) return;
+    act((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      view.dispatch(view.state.tr.delete(range.from, range.to));
+      run(ctx);
+      view.focus();
+    });
+  }
+
+  function chooseBlock(item: BlockItem) {
+    replaceTrigger((ctx) => item.run(ctx));
+  }
+
+  function chooseLink(option: PickerOption) {
+    const range = trigger;
+    if (!range) return;
+    act((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const link = wikilinkNode.type(ctx).create({ target: option.id, label: option.label });
+      const tr = view.state.tr.replaceWith(range.from, range.to, link);
+      view.dispatch(tr.insertText(' ', range.from + link.nodeSize));
+      view.focus();
+    });
+  }
+
+  function onKey(key: string): boolean {
+    if (key === 'ArrowDown' || key === 'ArrowUp') {
+      active = moveIndex(active, key === 'ArrowDown' ? 1 : -1, entries.length);
+      return true;
+    }
+    const entry = entries[active];
+    if (!entry) return false;
+    entry.choose();
+    return true;
+  }
+
+  $effect(() => {
+    const current = trigger;
+    if (!current) {
+      entries = [];
+      return;
+    }
+    if (current.kind === 'slash') {
+      entries = matchBlocks(current.query).map((item) => ({ id: item.id, label: item.label, icon: item.icon, choose: () => chooseBlock(item) }));
+      active = 0;
+      return;
+    }
+    const query = current.query.trim();
+    if (!query || !linkSearch) {
+      entries = [];
+      return;
+    }
+    const seq = ++searchSeq;
+    const timer = setTimeout(async () => {
+      searching = true;
+      try {
+        const found = await linkSearch(query);
+        if (seq !== searchSeq) return;
+        entries = found.map((option) => ({ ...option, choose: () => chooseLink(option) }));
+        active = 0;
+      } catch {
+        if (seq === searchSeq) entries = [];
+      } finally {
+        if (seq === searchSeq) searching = false;
+      }
+    }, LINK_SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  });
+
+  function emit(markdown: string) {
+    const tidy = tidyMarkdown(markdown);
+    if (tidy === known) return;
+    known = tidy;
+    onchange?.(tidy);
+  }
+
+  /** Load outside changes, but never under the writer's caret. */
+  $effect(() => {
+    const next = value;
+    if (!editor || tidyMarkdown(next) === known) return;
+    const focused = act((ctx) => ctx.get(editorViewCtx).hasFocus());
+    if (focused) return;
+    act(replaceAll(next));
+    known = tidyMarkdown(act(getMarkdown()) ?? next);
+  });
+
+  /** The handle's `+`: open the `/` menu on a new line under the hovered block. */
+  function addBlockBelow() {
+    const target = provider?.active;
+    if (!target) return;
+    act((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      const at = target.$pos.pos + target.node.nodeSize;
+      const paragraph = view.state.schema.nodes.paragraph.create(null, view.state.schema.text('/'));
+      const tr = view.state.tr.insert(at, paragraph);
+      view.dispatch(tr.setSelection(TextSelection.create(tr.doc, at + 2)).scrollIntoView());
+      view.focus();
+    });
+  }
+
+  function onHostClick(event: MouseEvent) {
+    const link = (event.target as HTMLElement).closest<HTMLElement>('[data-wikilink]');
+    if (link && onlinkopen) onlinkopen(link.dataset.wikilink ?? '');
+  }
+
+  onMount(() => {
+    let disposed = false;
+    const made = Editor.make()
+      .config((ctx) => {
+        ctx.set(rootCtx, host!);
+        ctx.set(defaultValueCtx, value);
+        ctx.update(remarkStringifyOptionsCtx, (options) => ({ ...options, bullet: '-' as const, rule: '-' as const }));
+        ctx.update(editorViewOptionsCtx, (options) => ({
+          ...options,
+          attributes: { class: 'terminoir-md__surface', 'aria-label': label, 'aria-multiline': 'true', role: 'textbox' }
+        }));
+        ctx.get(listenerCtx).markdownUpdated((_, markdown) => emit(markdown));
+      })
+      .use(commonmark)
+      .use(gfm)
+      .use(history)
+      .use(listener)
+      .use(clipboard)
+      .use(block)
+      .use(wikilink)
+      .use(taskListItemView)
+      .use(placeholderPlugin(placeholder))
+      .use(triggerPlugin({ onchange: (next) => (trigger = next), onkey: onKey }, Boolean(linkSearch)));
+
+    void made.create().then((created) => {
+      if (disposed) {
+        void created.destroy();
+        return;
+      }
+      editor = created;
+      known = tidyMarkdown(act(getMarkdown()) ?? value);
+      provider = new BlockProvider({ ctx: created.ctx, content: handle!, root, getOffset: () => 6 });
+      provider.update();
+    });
+
+    return () => {
+      disposed = true;
+      provider?.destroy();
+      void editor?.destroy();
+    };
+  });
+</script>
+
+<div class={cn('terminoir-md', className)} bind:this={root}>
+  <!-- Link chips are also reachable as text; the click only adds a shortcut to open them. -->
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <div bind:this={host} onclick={onHostClick}></div>
+  <div class="terminoir-md__handle" bind:this={handle}>
+    <button type="button" class="terminoir-md__handle-button" aria-label="Add block below" onmousedown={(e) => e.preventDefault()} onclick={addBlockBelow}>
+      <NavIcon name="plus" />
+    </button>
+    <span class="terminoir-md__handle-grip" aria-hidden="true" title="Drag to move"><NavIcon name="grip-vertical" /></span>
+  </div>
+</div>
+
+{#if trigger && (entries.length || trigger.kind === 'link')}
+  <ul
+    id={`${uid}-menu`}
+    class="terminoir-md__menu glass-popover"
+    role="listbox"
+    aria-label={trigger.kind === 'slash' ? 'Blocks' : 'Link to'}
+    style:left={`${trigger.left}px`}
+    style:top={`${trigger.top + 4}px`}
+  >
+    {#each entries as entry, index (entry.id)}
+      <!-- Focus stays in the editor, which handles arrow keys and Enter. -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <li
+        role="option"
+        aria-selected={index === active}
+        class="terminoir-md__option"
+        class:terminoir-md__option--active={index === active}
+        onpointerdown={(event) => event.preventDefault()}
+        onpointerenter={() => (active = index)}
+        onclick={() => entry.choose()}
+      >
+        {#if entry.icon}<NavIcon name={entry.icon} color={entry.iconColor} />{/if}
+        <span class="terminoir-md__option-label">{entry.label}</span>
+        {#if entry.description}<span class="terminoir-md__option-description">{entry.description}</span>{/if}
+      </li>
+    {:else}
+      <li class="terminoir-md__empty" role="presentation">
+        {searching ? 'Searching…' : trigger.query.trim() ? 'No matches' : 'Type to search'}
+      </li>
+    {/each}
+  </ul>
+{/if}
+
+<style>
+  .terminoir-md { position: relative; }
+  .terminoir-md :global(.terminoir-md__surface) {
+    outline: none;
+    min-height: 6rem;
+    padding: var(--space-1) 0;
+    color: var(--foreground);
+    font-size: 0.9375rem;
+    line-height: 1.65;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+  .terminoir-md :global(.terminoir-md__surface > * + *) { margin-top: var(--space-2); }
+  .terminoir-md :global(p) { margin: 0; }
+  .terminoir-md :global(h1) { font-size: 1.5rem; font-weight: 600; line-height: 1.3; margin: var(--space-5) 0 var(--space-2); }
+  .terminoir-md :global(h2) { font-size: 1.2rem; font-weight: 600; line-height: 1.35; margin: var(--space-4) 0 var(--space-2); }
+  .terminoir-md :global(h3) { font-size: 1.05rem; font-weight: 600; margin: var(--space-3) 0 var(--space-1); }
+  .terminoir-md :global(.terminoir-md__surface > :first-child) { margin-top: 0; }
+  .terminoir-md :global(ul),
+  .terminoir-md :global(ol) { margin: 0; padding-left: 1.5rem; }
+  .terminoir-md :global(li > div > p),
+  .terminoir-md :global(li > p) { margin: 0; }
+  .terminoir-md :global(li[data-item-type='task']) { list-style: none; display: flex; align-items: flex-start; gap: var(--space-2); margin-left: -1.5rem; }
+  .terminoir-md :global(li[data-item-type='task'] > .terminoir-md-task-body) { flex: 1; min-width: 0; }
+  .terminoir-md :global(li[data-item-type='task'][data-checked='true'] > .terminoir-md-task-body) { color: var(--muted-foreground); text-decoration: line-through; }
+  .terminoir-md :global(.terminoir-md-task-box) { margin-top: 0.4em; accent-color: var(--primary); cursor: pointer; }
+  .terminoir-md :global(blockquote) { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--border); color: var(--muted-foreground); }
+  .terminoir-md :global(code) { font-family: var(--font-mono); font-size: 0.875em; padding: 0.1em 0.3em; border-radius: 0.3em; background: var(--muted); }
+  .terminoir-md :global(pre) { font-family: var(--font-mono); font-size: 0.8125rem; padding: var(--space-3); border-radius: var(--radius-control); background: var(--muted); overflow-x: auto; }
+  .terminoir-md :global(pre code) { padding: 0; background: none; }
+  .terminoir-md :global(hr) { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
+  .terminoir-md :global(a) { color: var(--primary); text-underline-offset: 2px; }
+  .terminoir-md :global(table) { border-collapse: collapse; font-size: 0.875rem; }
+  .terminoir-md :global(th),
+  .terminoir-md :global(td) { border: 1px solid var(--border); padding: var(--space-1) var(--space-2); }
+  .terminoir-md :global(.terminoir-md-wikilink) {
+    display: inline-block;
+    padding: 0 0.4em;
+    border-radius: var(--radius-pill);
+    background: color-mix(in srgb, var(--primary) 16%, transparent);
+    color: var(--primary);
+    cursor: pointer;
+  }
+  .terminoir-md :global(.terminoir-md-wikilink.ProseMirror-selectednode) { outline: 1px solid var(--ring); }
+  .terminoir-md :global(.terminoir-md--empty::before) {
+    content: attr(data-placeholder);
+    position: absolute;
+    color: var(--muted-foreground);
+    pointer-events: none;
+  }
+
+  .terminoir-md__handle {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 0.1rem;
+    color: var(--muted-foreground);
+    font-size: 0.75rem;
+    transition: opacity var(--duration-fast) ease;
+  }
+  .terminoir-md__handle:global([data-show='false']) { opacity: 0; pointer-events: none; }
+  .terminoir-md__handle-button,
+  .terminoir-md__handle-grip {
+    display: grid;
+    place-items: center;
+    width: 1.35rem;
+    height: 1.35rem;
+    border-radius: 0.3rem;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+  }
+  .terminoir-md__handle-grip { cursor: grab; }
+  .terminoir-md__handle-button:hover,
+  .terminoir-md__handle-grip:hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); color: var(--foreground); }
+
+  .terminoir-md__menu {
+    position: fixed;
+    z-index: 60;
+    width: 16rem;
+    max-height: 18rem;
+    overflow-y: auto;
+    margin: 0;
+    padding: var(--space-1);
+    list-style: none;
+  }
+  .terminoir-md__option {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 0.45rem 0.6rem;
+    border-radius: calc(var(--radius-control) - 0.2rem);
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+  .terminoir-md__option--active { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-md__option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .terminoir-md__option-description { font-size: 0.75rem; color: var(--muted-foreground); flex-shrink: 0; }
+  .terminoir-md__empty { padding: 0.5rem 0.6rem; font-size: 0.8125rem; color: var(--muted-foreground); }
+</style>

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

@@ -0,0 +1,18 @@
+import type { PickerOption } from '../utils/componentTypes.js';
+type $$ComponentProps = {
+    /** Markdown. Outside changes are applied while the editor is not focused. */
+    value: string;
+    /** Called with the edited markdown (only after a user edit, never on load). */
+    onchange?: (markdown: string) => void;
+    /** Accessible name of the writing surface. */
+    label: string;
+    placeholder?: string;
+    /** Enables `[[` links: options for the typed text. A chosen option is written as `[[id|label]]`. */
+    linkSearch?: (query: string) => Promise<PickerOption[]>;
+    /** A `[[link]]` was clicked; receives its target (the part before `|`). */
+    onlinkopen?: (target: string) => void;
+    class?: string;
+};
+declare const MarkdownEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkdownEditor = ReturnType<typeof MarkdownEditor>;
+export default MarkdownEditor;

package/dist/index.d.ts

@@ -79,6 +79,7 @@ export type { ChipSelectGroup, ChipSelectOption } from './utils/componentTypes.j
 export { default as DateField } from './components/DateField.svelte';
 export { dayLabel, dayUrgency, parseYmd, type DayUrgency } from './utils/dayLabel.js';
 export { default as SearchPicker } from './components/SearchPicker.svelte';
+export { default as MarkdownEditor } from './components/MarkdownEditor.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';
 export type { PickerOption } from './utils/componentTypes.js';

package/dist/index.js

@@ -71,6 +71,7 @@ export { default as ChipSelect } from './components/ChipSelect.svelte';
 export { default as DateField } from './components/DateField.svelte';
 export { dayLabel, dayUrgency, parseYmd } from './utils/dayLabel.js';
 export { default as SearchPicker } from './components/SearchPicker.svelte';
+export { default as MarkdownEditor } from './components/MarkdownEditor.svelte';
 export { default as FileButton } from './components/FileButton.svelte';
 export { default as TitleInput } from './components/TitleInput.svelte';
 export { default as RadioCards } from './components/RadioCards.svelte';

package/dist/utils/markdownEditor/blocks.d.ts

@@ -0,0 +1,27 @@
+/** Block types offered by the `/` menu, task-list checkboxes, and markdown output tidying. */
+import type { Ctx } from '@milkdown/kit/ctx';
+import type { Node } from '@milkdown/kit/prose/model';
+import { type EditorView } from '@milkdown/kit/prose/view';
+export type BlockItem = {
+    id: string;
+    label: string;
+    icon: string;
+    /** Extra words the `/` query matches, e.g. "h1" or "todo". */
+    keywords: string;
+    run: (ctx: Ctx) => void;
+};
+export declare const BLOCK_ITEMS: BlockItem[];
+export declare function matchBlocks(query: string): BlockItem[];
+/** List items with a `checked` attribute (task lists) get a real checkbox. */
+export declare const taskListItemView: import("@milkdown/kit/utils").$View<import("@milkdown/kit/utils").$Node, (initial: Node, view: EditorView, getPos: () => number | undefined) => {
+    dom: HTMLLIElement;
+    contentDOM: HTMLDivElement;
+    update(next: Node): boolean;
+    ignoreMutation: (mutation: {
+        target: globalThis.Node;
+    }) => boolean;
+}>;
+/** Hint text on an empty document. */
+export declare function placeholderPlugin(text: string): import("@milkdown/kit/utils").$Prose;
+/** Milkdown writes empty paragraphs as `<br />`; plain blank lines read better everywhere else. */
+export declare function tidyMarkdown(markdown: string): string;

package/dist/utils/markdownEditor/blocks.js

@@ -0,0 +1,107 @@
+import { editorViewCtx } from '@milkdown/kit/core';
+import { createCodeBlockCommand, insertHrCommand, listItemSchema, turnIntoTextCommand, wrapInBlockquoteCommand, wrapInBulletListCommand, wrapInHeadingCommand, wrapInOrderedListCommand } from '@milkdown/kit/preset/commonmark';
+import { Plugin } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { $prose, $view, callCommand } from '@milkdown/kit/utils';
+function markNearestListItemAsTask(ctx) {
+    const view = ctx.get(editorViewCtx);
+    const { $from } = view.state.selection;
+    for (let depth = $from.depth; depth > 0; depth--) {
+        const node = $from.node(depth);
+        if (node.type.name === 'list_item') {
+            view.dispatch(view.state.tr.setNodeMarkup($from.before(depth), undefined, { ...node.attrs, checked: false }));
+            return;
+        }
+    }
+}
+export const BLOCK_ITEMS = [
+    { id: 'text', label: 'Text', icon: 'paragraph', keywords: 'paragraph plain', run: (ctx) => callCommand(turnIntoTextCommand.key)(ctx) },
+    { id: 'h1', label: 'Heading 1', icon: 'heading', keywords: 'h1 title', run: (ctx) => callCommand(wrapInHeadingCommand.key, 1)(ctx) },
+    { id: 'h2', label: 'Heading 2', icon: 'heading', keywords: 'h2 subtitle', run: (ctx) => callCommand(wrapInHeadingCommand.key, 2)(ctx) },
+    { id: 'h3', label: 'Heading 3', icon: 'heading', keywords: 'h3', run: (ctx) => callCommand(wrapInHeadingCommand.key, 3)(ctx) },
+    {
+        id: 'todo',
+        label: 'Checklist',
+        icon: 'square-check',
+        keywords: 'todo task checkbox',
+        run: (ctx) => {
+            callCommand(wrapInBulletListCommand.key)(ctx);
+            markNearestListItemAsTask(ctx);
+        }
+    },
+    { id: 'bullet', label: 'Bulleted list', icon: 'list-ul', keywords: 'ul unordered', run: (ctx) => callCommand(wrapInBulletListCommand.key)(ctx) },
+    { id: 'number', label: 'Numbered list', icon: 'list-ol', keywords: 'ol ordered', run: (ctx) => callCommand(wrapInOrderedListCommand.key)(ctx) },
+    { id: 'quote', label: 'Quote', icon: 'quote-left', keywords: 'blockquote', run: (ctx) => callCommand(wrapInBlockquoteCommand.key)(ctx) },
+    { id: 'code', label: 'Code', icon: 'code', keywords: 'codeblock pre', run: (ctx) => callCommand(createCodeBlockCommand.key)(ctx) },
+    { id: 'divider', label: 'Divider', icon: 'minus', keywords: 'hr rule separator', run: (ctx) => callCommand(insertHrCommand.key)(ctx) }
+];
+export function matchBlocks(query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return BLOCK_ITEMS;
+    return BLOCK_ITEMS.filter((item) => `${item.label} ${item.keywords}`.toLowerCase().includes(q));
+}
+/** List items with a `checked` attribute (task lists) get a real checkbox. */
+export const taskListItemView = $view(listItemSchema.node, () => (initial, view, getPos) => {
+    let node = initial;
+    const dom = document.createElement('li');
+    const box = document.createElement('input');
+    box.type = 'checkbox';
+    box.contentEditable = 'false';
+    box.className = 'terminoir-md-task-box';
+    box.addEventListener('mousedown', (event) => event.preventDefault());
+    box.addEventListener('click', () => {
+        const pos = getPos();
+        if (pos === undefined)
+            return;
+        view.dispatch(view.state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, checked: !node.attrs.checked }));
+    });
+    const contentDOM = document.createElement('div');
+    contentDOM.className = 'terminoir-md-task-body';
+    function render() {
+        const isTask = node.attrs.checked != null;
+        dom.dataset.itemType = isTask ? 'task' : '';
+        dom.dataset.checked = String(Boolean(node.attrs.checked));
+        box.checked = Boolean(node.attrs.checked);
+        box.hidden = !isTask;
+    }
+    dom.append(box, contentDOM);
+    render();
+    return {
+        dom,
+        contentDOM,
+        update(next) {
+            if (next.type !== node.type)
+                return false;
+            node = next;
+            render();
+            return true;
+        },
+        ignoreMutation: (mutation) => mutation.target === box
+    };
+});
+/** Hint text on an empty document. */
+export function placeholderPlugin(text) {
+    return $prose(() => new Plugin({
+        props: {
+            decorations(state) {
+                const { doc } = state;
+                const only = doc.firstChild;
+                if (doc.childCount !== 1 || !only?.isTextblock || only.content.size)
+                    return null;
+                return DecorationSet.create(doc, [
+                    Decoration.node(0, only.nodeSize, { class: 'terminoir-md--empty', 'data-placeholder': text })
+                ]);
+            }
+        }
+    }));
+}
+/** Milkdown writes empty paragraphs as `<br />`; plain blank lines read better everywhere else. */
+export function tidyMarkdown(markdown) {
+    return markdown
+        .split('\n')
+        .filter((line) => line.trim() !== '<br />')
+        .join('\n')
+        .replace(/\n{3,}/g, '\n\n')
+        .trimEnd();
+}

package/dist/utils/markdownEditor/triggers.d.ts

@@ -0,0 +1,17 @@
+export type TriggerKind = 'slash' | 'link';
+export type Trigger = {
+    kind: TriggerKind;
+    query: string;
+    /** Document range of the trigger text (`/qu` or `[[qu`), replaced when an item is chosen. */
+    from: number;
+    to: number;
+    /** Viewport position under the trigger, for the menu. */
+    left: number;
+    top: number;
+};
+export type TriggerHandlers = {
+    onchange: (trigger: Trigger | null) => void;
+    /** Return true when the open menu used the key. */
+    onkey: (key: string) => boolean;
+};
+export declare function triggerPlugin(handlers: TriggerHandlers, linksEnabled: boolean): import("@milkdown/kit/utils").$Prose;

package/dist/utils/markdownEditor/triggers.js

@@ -0,0 +1,69 @@
+/**
+ * Watches the text before the caret for a menu trigger (`/` at a word start, or `[[`) and
+ * hands arrow/Enter/Tab/Escape to the open menu while focus stays in the editor.
+ */
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { $prose } from '@milkdown/kit/utils';
+const SLASH = /(?:^|\s)\/([\w-]{0,24})$/;
+const LINK = /\[\[([^[\]\n]{0,60})$/;
+const MENU_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Enter', 'Tab', 'Escape']);
+const ATOM = '';
+function triggerAt(state, linksEnabled) {
+    const { selection } = state;
+    if (!selection.empty)
+        return null;
+    const { $from } = selection;
+    if (!$from.parent.isTextblock || $from.parent.type.spec.code)
+        return null;
+    const before = $from.parent.textBetween(0, $from.parentOffset, undefined, ATOM);
+    const link = linksEnabled ? LINK.exec(before) : null;
+    if (link)
+        return { kind: 'link', query: link[1], from: $from.pos - link[0].length, to: $from.pos };
+    const slash = SLASH.exec(before);
+    if (slash)
+        return { kind: 'slash', query: slash[1], from: $from.pos - slash[1].length - 1, to: $from.pos };
+    return null;
+}
+export function triggerPlugin(handlers, linksEnabled) {
+    const key = new PluginKey('terminoirTriggers');
+    /** A trigger closed with Escape stays closed until the caret leaves it. */
+    let dismissedFrom = null;
+    let open = false;
+    function report(view) {
+        const found = view.hasFocus() ? triggerAt(view.state, linksEnabled) : null;
+        if (!found || found.from === dismissedFrom) {
+            if (!found)
+                dismissedFrom = null;
+            if (open)
+                handlers.onchange(null);
+            open = false;
+            return;
+        }
+        const coords = view.coordsAtPos(found.from);
+        open = true;
+        handlers.onchange({ ...found, left: coords.left, top: coords.bottom });
+    }
+    return $prose(() => new Plugin({
+        key,
+        view: () => ({ update: report }),
+        props: {
+            handleKeyDown(view, event) {
+                if (!open || !MENU_KEYS.has(event.key))
+                    return false;
+                if (event.key === 'Escape') {
+                    dismissedFrom = triggerAt(view.state, linksEnabled)?.from ?? null;
+                    report(view);
+                    return true;
+                }
+                return handlers.onkey(event.key);
+            },
+            handleDOMEvents: {
+                blur(view) {
+                    // Let a click on a menu item land before the menu disappears.
+                    setTimeout(() => report(view), 150);
+                    return false;
+                }
+            }
+        }
+    }));
+}

package/dist/utils/markdownEditor/wikilink.d.ts

@@ -0,0 +1,20 @@
+export declare const WIKILINK_NODE = "wikilink";
+export type WikilinkAttrs = {
+    target: string;
+    label: string;
+};
+type MdastNode = {
+    type: string;
+    value?: string;
+    children?: MdastNode[];
+    data?: unknown;
+};
+export declare function formatWikilink({ target, label }: WikilinkAttrs): string;
+/** Split one text value into text and wikilink pieces (empty when it has no links). */
+export declare function splitWikilinks(text: string): MdastNode[];
+export declare const remarkWikilink: import("@milkdown/kit/utils").$Remark<"remarkWikilink", unknown>;
+export declare const wikilinkNode: import("@milkdown/kit/utils").$Node;
+/** Typing the closing `]]` of `[[Something]]` turns it into a link. */
+export declare const wikilinkInputRule: import("@milkdown/kit/utils").$InputRule;
+export declare const wikilink: (import("@milkdown/kit/ctx").MilkdownPlugin | import("@milkdown/kit/utils").$Node | import("@milkdown/kit/utils").$Ctx<unknown, "remarkWikilink"> | import("@milkdown/kit/utils").$InputRule)[];
+export {};

package/dist/utils/markdownEditor/wikilink.js

@@ -0,0 +1,92 @@
+/**
+ * `[[target]]` and `[[target|label]]` links as an inline atom, so they round-trip to markdown
+ * unescaped and render as chips. Parsing splits remark text nodes; stringifying writes them raw.
+ */
+import { InputRule } from '@milkdown/kit/prose/inputrules';
+import { $inputRule, $node, $remark } from '@milkdown/kit/utils';
+export const WIKILINK_NODE = 'wikilink';
+const MDAST_TYPE = 'wikiLink';
+const WIKILINK = /\[\[([^\]|\n]+)(?:\|([^\]\n]+))?\]\]/g;
+export function formatWikilink({ target, label }) {
+    return label && label !== target ? `[[${target}|${label}]]` : `[[${target}]]`;
+}
+/** Split one text value into text and wikilink pieces (empty when it has no links). */
+export function splitWikilinks(text) {
+    const parts = [];
+    let last = 0;
+    for (const match of text.matchAll(WIKILINK)) {
+        const start = match.index ?? 0;
+        if (start > last)
+            parts.push({ type: 'text', value: text.slice(last, start) });
+        const target = match[1].trim();
+        parts.push({ type: MDAST_TYPE, data: { target, label: (match[2] ?? target).trim() } });
+        last = start + match[0].length;
+    }
+    if (!parts.length)
+        return [];
+    if (last < text.length)
+        parts.push({ type: 'text', value: text.slice(last) });
+    return parts;
+}
+function splitTree(node) {
+    if (!node.children)
+        return;
+    node.children = node.children.flatMap((child) => {
+        if (child.type === 'text' && child.value) {
+            const parts = splitWikilinks(child.value);
+            return parts.length ? parts : [child];
+        }
+        splitTree(child);
+        return [child];
+    });
+}
+export const remarkWikilink = $remark('remarkWikilink', () => function () {
+    const data = this.data();
+    (data.toMarkdownExtensions ??= []).push({
+        handlers: { [MDAST_TYPE]: (node) => formatWikilink(node.data) }
+    });
+    return (tree) => splitTree(tree);
+});
+export const wikilinkNode = $node(WIKILINK_NODE, () => ({
+    inline: true,
+    group: 'inline',
+    atom: true,
+    selectable: true,
+    marks: '',
+    attrs: { target: { default: '' }, label: { default: '' } },
+    parseDOM: [
+        {
+            tag: 'span[data-wikilink]',
+            getAttrs: (dom) => {
+                const el = dom;
+                return { target: el.dataset.wikilink ?? '', label: el.textContent ?? '' };
+            }
+        }
+    ],
+    toDOM: (node) => [
+        'span',
+        { 'data-wikilink': node.attrs.target, class: 'terminoir-md-wikilink', role: 'link', title: node.attrs.target },
+        node.attrs.label || node.attrs.target
+    ],
+    parseMarkdown: {
+        match: (node) => node.type === MDAST_TYPE,
+        runner: (state, node, type) => {
+            state.addNode(type, node.data);
+        }
+    },
+    toMarkdown: {
+        match: (node) => node.type.name === WIKILINK_NODE,
+        runner: (state, node) => {
+            state.addNode(MDAST_TYPE, undefined, undefined, { data: { target: node.attrs.target, label: node.attrs.label } });
+        }
+    }
+}));
+/** Typing the closing `]]` of `[[Something]]` turns it into a link. */
+export const wikilinkInputRule = $inputRule((ctx) => new InputRule(/\[\[([^\]|\n]+)(?:\|([^\]\n]+))?\]\]$/, (state, match, start, end) => {
+    const target = match[1].trim();
+    if (!target)
+        return null;
+    const node = wikilinkNode.type(ctx).create({ target, label: (match[2] ?? target).trim() });
+    return state.tr.replaceWith(start, end, node);
+}));
+export const wikilink = [remarkWikilink, wikilinkNode, wikilinkInputRule].flat();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "terminoir",
-  "version": "0.8.0",
-  "description": "Terminoir \u2014 Liquid Glass design tokens and Svelte 5 UI components.",
+  "version": "0.9.0",
+  "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",
   "style": "./css/index.css",
@@ -85,6 +85,7 @@
     "@fontsource/source-code-pro": "^5.2.5",
     "@fontsource/source-sans-3": "^5.2.5",
     "@fontsource/source-serif-4": "^5.2.5",
+    "@milkdown/kit": "7.23.0",
     "@surdeddd/liquidglass": "^0.12.0"
   },
   "devDependencies": {