terminoir 0.7.0 → 0.9.0

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/components/Timeline.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+  import { timelineRows, timelineScale, todayOffset, type TimelineItem } from '../utils/timeline.js';
+
+  /** Gantt-style bars over a shared day scale; one row per item, grouped under headings. */
+  let {
+    items,
+    label,
+    onItemClick,
+    class: className = '',
+  }: {
+    items: TimelineItem[];
+    /** Accessible name for the chart. */
+    label: string;
+    onItemClick?: (item: TimelineItem) => void;
+    class?: string;
+  } = $props();
+
+  const scale = $derived(timelineScale(items));
+  const rows = $derived(timelineRows(items, scale));
+  const today = $derived(todayOffset(scale));
+
+  function day(d: Date): string {
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
+  }
+
+  function range(item: TimelineItem): string {
+    return item.end && item.end.getTime() !== item.start.getTime() ? `${day(item.start)} – ${day(item.end)}` : day(item.start);
+  }
+</script>
+
+<div class={cn('terminoir-timeline', className)} role="group" aria-label={label}>
+  <div class="terminoir-timeline__grid">
+    <div class="terminoir-timeline__corner" aria-hidden="true"></div>
+    <div class="terminoir-timeline__scale" aria-hidden="true">
+      {#each scale.ticks as tick (tick.date.getTime())}
+        <span class="terminoir-timeline__tick" style:left={`${tick.left}%`}>{day(tick.date)}</span>
+      {/each}
+    </div>
+    {#each rows as row (row.group ?? '')}
+      {#if row.group}<div class="terminoir-timeline__group">{row.group}</div>{/if}
+      {#each row.bars as bar (bar.item.id)}
+        <div class="terminoir-timeline__label" title={bar.item.title}>{bar.item.title}</div>
+        <div class="terminoir-timeline__track">
+          {#if today !== null}<div class="terminoir-timeline__today" style:left={`${today}%`} aria-hidden="true"></div>{/if}
+          <button
+            type="button"
+            class="terminoir-timeline__bar terminoir-focusable"
+            style:left={`${bar.left}%`}
+            style:width={`${bar.width}%`}
+            style:--bar-color={labelColor(bar.item.color) ?? 'var(--primary)'}
+            aria-label={`${bar.item.title}, ${range(bar.item)}`}
+            title={`${bar.item.title} · ${range(bar.item)}`}
+            disabled={!onItemClick}
+            onclick={() => onItemClick?.(bar.item)}
+          ></button>
+        </div>
+      {/each}
+    {/each}
+  </div>
+</div>
+
+<style>
+  .terminoir-timeline {
+    --timeline-row: 1.75rem;
+    --timeline-label: minmax(8rem, 14rem);
+    font-size: 0.8125rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow-x: auto;
+    min-width: 0;
+  }
+  .terminoir-timeline__grid {
+    display: grid;
+    grid-template-columns: var(--timeline-label) minmax(24rem, 1fr);
+    min-width: 0;
+    padding-bottom: var(--space-1);
+  }
+  .terminoir-timeline__corner,
+  .terminoir-timeline__scale { height: 1.75rem; border-bottom: 1px solid var(--border); }
+  .terminoir-timeline__scale { position: relative; color: var(--muted-foreground); font-size: 0.6875rem; }
+  .terminoir-timeline__tick {
+    position: absolute;
+    top: 0.5rem;
+    padding-left: 0.25rem;
+    border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+    white-space: nowrap;
+  }
+  .terminoir-timeline__group {
+    grid-column: 1 / -1;
+    padding: var(--space-2) var(--space-2) var(--space-1);
+    color: var(--muted-foreground);
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .terminoir-timeline__label {
+    display: flex;
+    align-items: center;
+    height: var(--timeline-row);
+    padding: 0 var(--space-2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .terminoir-timeline__track { position: relative; height: var(--timeline-row); }
+  .terminoir-timeline__today {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--primary);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  .terminoir-timeline__bar {
+    position: absolute;
+    top: 0.375rem;
+    bottom: 0.375rem;
+    min-width: 0.5rem;
+    padding: 0;
+    border: 1px solid color-mix(in srgb, var(--bar-color) 70%, transparent);
+    border-radius: var(--radius-pill);
+    background: color-mix(in srgb, var(--bar-color) 45%, transparent);
+    cursor: pointer;
+  }
+  .terminoir-timeline__bar:disabled { cursor: default; }
+  .terminoir-timeline__bar:hover:not(:disabled) { background: color-mix(in srgb, var(--bar-color) 65%, transparent); }
+</style>

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

@@ -0,0 +1,11 @@
+import { type TimelineItem } from '../utils/timeline.js';
+type $$ComponentProps = {
+    items: TimelineItem[];
+    /** Accessible name for the chart. */
+    label: string;
+    onItemClick?: (item: TimelineItem) => void;
+    class?: string;
+};
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/index.d.ts

@@ -47,6 +47,14 @@ export { default as Inline } from './components/Inline.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
 export { default as GroupedList } from './components/GroupedList.svelte';
+export { default as Timeline } from './components/Timeline.svelte';
+export type { TimelineItem } from './utils/timeline.js';
+export { default as BucketGrid } from './components/BucketGrid.svelte';
+export type { Bucket } from './components/BucketGrid.svelte';
+export { default as GridLayout } from './components/GridLayout.svelte';
+export type { GridItem } from './utils/layout.js';
+export { default as ExpressionEditor } from './components/ExpressionEditor.svelte';
+export { describe as describeExpression, isComplete as isCompleteExpression, type ExpressionField, type ExpressionKind, type ExpressionNode, type ExpressionOp, type ExpressionSlot, } from './utils/expression.js';
 export type { GroupedListGroup, GroupedListItem } from './components/GroupedList.svelte';
 export { default as SegmentBar } from './components/SegmentBar.svelte';
 export type { Segment } from './components/SegmentBar.svelte';
@@ -71,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

@@ -46,6 +46,11 @@ export { default as Inline } from './components/Inline.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as Disclosure } from './components/Disclosure.svelte';
 export { default as GroupedList } from './components/GroupedList.svelte';
+export { default as Timeline } from './components/Timeline.svelte';
+export { default as BucketGrid } from './components/BucketGrid.svelte';
+export { default as GridLayout } from './components/GridLayout.svelte';
+export { default as ExpressionEditor } from './components/ExpressionEditor.svelte';
+export { describe as describeExpression, isComplete as isCompleteExpression, } from './utils/expression.js';
 export { default as SegmentBar } from './components/SegmentBar.svelte';
 export { default as NavSection } from './components/NavSection.svelte';
 export { default as Spacer } from './components/Spacer.svelte';
@@ -66,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/expression.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Typed expression trees for a block editor. The op catalogue (e.g. Oyster's
+ * `GET /expressions/ops`) says what each op returns and what its slots accept; the editor only
+ * offers ops whose result fits the slot, so users cannot build an ill-typed tree.
+ */
+export type ExpressionKind = 'boolean' | 'number' | 'date' | 'text' | 'value' | 'ids';
+export type ExpressionSlot = {
+    name: string;
+    kind: ExpressionKind;
+    many?: boolean;
+};
+export type ExpressionOp = {
+    op: string;
+    label: string;
+    group: string;
+    returns: ExpressionKind;
+    slots: ExpressionSlot[];
+    /** Plain fields on the node. A param named `key` picks a field; others are typed in. */
+    params: string[];
+};
+export type ExpressionField = {
+    key: string;
+    label?: string;
+    kind?: ExpressionKind;
+};
+export type ExpressionNode = {
+    op: string;
+    [key: string]: unknown;
+};
+/** A slot of `kind` accepts an op returning `returns` (`value` is the wildcard both ways, `ids` only fits `ids`). */
+export declare function fits(kind: ExpressionKind, returns: ExpressionKind): boolean;
+export declare function opsFor(kind: ExpressionKind, ops: ExpressionOp[]): ExpressionOp[];
+/** A fresh node for an op: empty single slots, one empty entry in list slots, blank params. */
+export declare function emptyNode(op: ExpressionOp): ExpressionNode;
+/** Text typed into a param, as the value it stands for (numbers and true/false become typed). */
+export declare function parseParam(param: string, text: string): unknown;
+export declare function paramText(value: unknown): string;
+/** True when every slot is filled and every key param names a field. */
+export declare function isComplete(node: unknown, ops: ExpressionOp[]): boolean;
+/** Plain-English reading of a tree, built from op labels and slot names (no per-op templates). */
+export declare function describe(node: unknown, ops: ExpressionOp[], fields?: ExpressionField[]): string;
+export type ExpressionPath = (string | number)[];
+/** A copy of `root` with the value at `path` replaced (`undefined` removes a list entry). */
+export declare function setAt(root: unknown, path: ExpressionPath, value: unknown): unknown;
+/** Ops grouped by their `group`, in first-seen order, for an `<optgroup>` picker. */
+export declare function groupOps(ops: ExpressionOp[]): {
+    group: string;
+    ops: ExpressionOp[];
+}[];