terminoir 0.7.0 → 0.9.0

package/README.md

@@ -14,7 +14,7 @@ To try unreleased changes in an app, `pnpm link /path/to/terminoir` from the app
 
 ### Releasing
 
-Bump `version` (semver: new component or prop → minor; breaking prop/CSS change → major), then `npm publish` (`prepublishOnly` builds and tests). Apps bump their `terminoir` range to adopt.
+Bump `version` (semver: new component or prop → minor; breaking prop/CSS change → major), then push `main`. The `Publish` workflow (`.github/workflows/publish.yml`) publishes any version not yet on npm via trusted publishing (`prepublishOnly` checks, builds and tests first); don't publish from a laptop. Apps bump their `terminoir` range to adopt.
 
 Peer dependency: **Svelte 5** (for components). Optional **React 18–19** for `terminoir/react`. CSS-only consumers can import styles without JS.
 
@@ -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 |
@@ -160,6 +161,10 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
 | `CanvasStage`, `DocumentViewer` | Full-bleed canvas host with floating overlay and side panel; paged viewer with toolbar and highlight marks |
 | `AccentSwatches` | `bind:value` accent hex from `ACCENT_PALETTE` |
 | `GroupedList`, `SegmentBar` | Items in labelled groups with a colour dot and count, "Show n more" past `limit`, `collapsed` groups behind a toggle (e.g. finished items); a thin bar of proportional coloured segments |
+| `Timeline` | Gantt rows: a title column and bars from `start` to `end` (inclusive, or one day) on a shared day scale, grouped under headings, today marked; `TimelineItem` |
+| `BucketGrid` | Board columns or a 2×2 `quadrants` grid of drop zones with a heading, colour dot and count; the caller renders cards (`children(bucket)`) and sets `dragType`; `ondrop(key, payload)`, `droppable: false` refuses drops |
+| `GridLayout` | Items in reading order on a 12-column grid: drag the move handle (`children(item, handle)` renders it where you want) to reorder, drag the right edge to change span (`minSpan`); arrow keys do both; `onchange(items)` on release |
+| `ExpressionEditor` | Scratch-style block editor for a typed expression tree from an op catalogue (`ExpressionOp`: returns, slots with kinds, params); slots only offer ops whose result fits; params named `key` pick from `fields`; plain-English reading underneath (`describeExpression`) |
 
 `labelColor(name)` resolves palette names (`green`, `gray`…, see `LABEL_PALETTE`) or passes CSS colours through; `Chip`, `GroupedList` and `SegmentBar` share it.
 

package/dist/components/BucketGrid.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { labelColor } from '../utils/palette.js';
+
+  export type Bucket = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    count: number;
+    /** False to refuse drops (e.g. an Unsorted cell that cannot be written). */
+    droppable?: boolean;
+  };
+
+  /**
+   * Board columns or a 2x2 matrix of drop zones. Callers render each bucket's cards with
+   * `children` and make them draggable with `dragType`; `ondrop` gets the dropped payload.
+   */
+  let {
+    buckets,
+    layout = 'columns',
+    dragType,
+    label,
+    ondrop,
+    children,
+    class: className = '',
+  }: {
+    buckets: Bucket[];
+    /** `columns` side by side (wrapping on phones), or `quadrants` (2x2, first four buckets). */
+    layout?: 'columns' | 'quadrants';
+    /** The `DataTransfer` type the cards set; other drags are ignored. */
+    dragType: string;
+    /** Accessible name for the grid. */
+    label: string;
+    ondrop: (bucketKey: string, payload: string) => void;
+    children: Snippet<[Bucket]>;
+    class?: string;
+  } = $props();
+
+  let over = $state<string | null>(null);
+
+  function accepts(event: DragEvent, bucket: Bucket): boolean {
+    return bucket.droppable !== false && !!event.dataTransfer?.types.includes(dragType);
+  }
+
+  function dragOver(event: DragEvent, bucket: Bucket) {
+    if (!accepts(event, bucket)) return;
+    event.preventDefault();
+    over = bucket.key;
+  }
+
+  function drop(event: DragEvent, bucket: Bucket) {
+    over = null;
+    if (!accepts(event, bucket)) return;
+    event.preventDefault();
+    const payload = event.dataTransfer?.getData(dragType);
+    if (payload) ondrop(bucket.key, payload);
+  }
+</script>
+
+<div class={cn('terminoir-buckets', `terminoir-buckets--${layout}`, className)} role="group" aria-label={label}>
+  {#each buckets as bucket (bucket.key)}
+    <section
+      class="terminoir-buckets__zone"
+      class:terminoir-buckets__zone--over={over === bucket.key}
+      aria-label={bucket.label}
+      ondragover={(event) => dragOver(event, bucket)}
+      ondragleave={() => (over = over === bucket.key ? null : over)}
+      ondrop={(event) => drop(event, bucket)}
+    >
+      <header class="terminoir-buckets__head">
+        <span class="terminoir-buckets__dot" style:background={labelColor(bucket.color) ?? 'var(--muted-foreground)'}></span>
+        <span class="terminoir-buckets__label">{bucket.label}</span>
+        <span class="terminoir-buckets__count">{bucket.count}</span>
+      </header>
+      <div class="terminoir-buckets__items">{@render children(bucket)}</div>
+    </section>
+  {/each}
+</div>
+
+<style>
+  .terminoir-buckets { display: grid; gap: var(--space-3); min-width: 0; }
+  .terminoir-buckets--columns { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
+  .terminoir-buckets--quadrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  @media (max-width: 640px) {
+    .terminoir-buckets--quadrants { grid-template-columns: minmax(0, 1fr); }
+  }
+  .terminoir-buckets__zone {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+    padding: var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--foreground) 3%, transparent);
+    transition: border-color 120ms ease, background 120ms ease;
+  }
+  .terminoir-buckets__zone--over {
+    border-color: var(--primary);
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+  }
+  .terminoir-buckets__head { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; }
+  .terminoir-buckets__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none; }
+  .terminoir-buckets__label { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .terminoir-buckets__count { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
+  .terminoir-buckets__items { display: flex; flex-direction: column; gap: var(--space-2); min-height: 2.5rem; }
+</style>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+export type Bucket = {
+    key: string;
+    label: string;
+    /** Palette name or CSS colour for the heading dot. */
+    color?: string | null;
+    count: number;
+    /** False to refuse drops (e.g. an Unsorted cell that cannot be written). */
+    droppable?: boolean;
+};
+type $$ComponentProps = {
+    buckets: Bucket[];
+    /** `columns` side by side (wrapping on phones), or `quadrants` (2x2, first four buckets). */
+    layout?: 'columns' | 'quadrants';
+    /** The `DataTransfer` type the cards set; other drags are ignored. */
+    dragType: string;
+    /** Accessible name for the grid. */
+    label: string;
+    ondrop: (bucketKey: string, payload: string) => void;
+    children: Snippet<[Bucket]>;
+    class?: string;
+};
+declare const BucketGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type BucketGrid = ReturnType<typeof BucketGrid>;
+export default BucketGrid;

package/dist/components/ExpressionEditor.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+  import { cn } from '../utils/cn.js';
+  import {
+    describe,
+    emptyNode,
+    groupOps,
+    isComplete,
+    opsFor,
+    paramText,
+    parseParam,
+    setAt,
+    type ExpressionField,
+    type ExpressionKind,
+    type ExpressionNode,
+    type ExpressionOp,
+    type ExpressionPath,
+    type ExpressionSlot,
+  } from '../utils/expression.js';
+  import IconButton from './IconButton.svelte';
+  import NavIcon from './NavIcon.svelte';
+
+  /**
+   * Scratch-style block editor for a typed expression tree. Each block is one node; its slots only
+   * offer ops whose result fits, so the tree is always well-typed. A plain-English reading sits
+   * under the blocks.
+   */
+  let {
+    ops,
+    fields = [],
+    value,
+    kind = 'boolean',
+    label,
+    onchange,
+    class: className = '',
+  }: {
+    /** The op catalogue, e.g. Oyster's `GET /expressions/ops`. */
+    ops: ExpressionOp[];
+    /** Fields a `key` param can name. */
+    fields?: ExpressionField[];
+    value: ExpressionNode | null;
+    /** What the whole expression must return. */
+    kind?: ExpressionKind;
+    /** Accessible name for the editor. */
+    label: string;
+    onchange: (value: ExpressionNode | null) => void;
+    class?: string;
+  } = $props();
+
+  const NONE = '';
+  const reading = $derived(value ? describe(value, ops, fields) : 'Nothing yet');
+  const complete = $derived(value ? isComplete(value, ops) : true);
+
+  function specOf(node: ExpressionNode | null): ExpressionOp | undefined {
+    return node ? ops.find((o) => o.op === node.op) : undefined;
+  }
+
+  function update(path: ExpressionPath, next: unknown) {
+    onchange(setAt(value, path, next) as ExpressionNode | null);
+  }
+
+  function choose(path: ExpressionPath, opName: string) {
+    const spec = ops.find((o) => o.op === opName);
+    update(path, spec ? emptyNode(spec) : null);
+  }
+</script>
+
+{#snippet picker(slotKind: ExpressionKind, path: ExpressionPath, current: string, pickerLabel: string)}
+  <select
+    class="terminoir-select terminoir-expr__pick terminoir-focusable"
+    aria-label={pickerLabel}
+    value={current}
+    onchange={(e) => {
+      const select = e.currentTarget as HTMLSelectElement;
+      choose(path, select.value);
+      // An "add" picker (no current op) goes back to its prompt for the next entry.
+      if (!current) select.value = NONE;
+    }}
+  >
+    <option value={NONE}>{current ? 'Remove' : 'Choose…'}</option>
+    {#each groupOps(opsFor(slotKind, ops)) as group (group.group)}
+      <optgroup label={group.group}>
+        {#each group.ops as op (op.op)}<option value={op.op}>{op.label}</option>{/each}
+      </optgroup>
+    {/each}
+  </select>
+{/snippet}
+
+{#snippet param(node: ExpressionNode, name: string, path: ExpressionPath)}
+  {#if name === 'key'}
+    <select
+      class="terminoir-select terminoir-expr__pick terminoir-focusable"
+      aria-label="Field"
+      value={String(node.key ?? '')}
+      onchange={(e) => update([...path, 'key'], (e.currentTarget as HTMLSelectElement).value)}
+    >
+      <option value="">Field…</option>
+      {#each fields as field (field.key)}<option value={field.key}>{field.label ?? field.key}</option>{/each}
+    </select>
+  {:else}
+    <input
+      class="terminoir-input terminoir-expr__param terminoir-focusable"
+      aria-label={name}
+      placeholder={name === 'options' ? 'a, b, c' : name}
+      value={paramText(node[name])}
+      onchange={(e) => update([...path, name], parseParam(name, (e.currentTarget as HTMLInputElement).value))}
+    />
+  {/if}
+{/snippet}
+
+{#snippet slotView(node: ExpressionNode, slot: ExpressionSlot, path: ExpressionPath)}
+  <div class="terminoir-expr__slot">
+    <span class="terminoir-expr__slot-name">{slot.name}</span>
+    {#if slot.many}
+      {@const list = Array.isArray(node[slot.name]) ? (node[slot.name] as ExpressionNode[]) : []}
+      <div class="terminoir-expr__list">
+        {#each list as child, i (i)}
+          <div class="terminoir-expr__entry">
+            {@render block(child, slot.kind, [...path, slot.name, i])}
+            <IconButton label={`Remove ${slot.name} ${i + 1}`} size="sm" onclick={() => update([...path, slot.name, i], undefined)}>
+              <NavIcon name="xmark" />
+            </IconButton>
+          </div>
+        {/each}
+        {@render picker(slot.kind, [...path, slot.name, list.length], NONE, `Add to ${slot.name}`)}
+      </div>
+    {:else}
+      {@render block((node[slot.name] as ExpressionNode | null) ?? null, slot.kind, [...path, slot.name])}
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet block(node: ExpressionNode | null, slotKind: ExpressionKind, path: ExpressionPath)}
+  {@const spec = specOf(node)}
+  <div class="terminoir-expr__block" class:terminoir-expr__block--empty={!node} data-kind={spec?.returns ?? slotKind}>
+    <div class="terminoir-expr__head">
+      {@render picker(slotKind, path, node?.op ?? NONE, path.length ? `Block at ${path.join(' ')}` : 'Expression')}
+      {#if node && spec}
+        {#each spec.params as name (name)}{@render param(node, name, path)}{/each}
+      {/if}
+    </div>
+    {#if node && spec?.slots.length}
+      <div class="terminoir-expr__slots">
+        {#each spec.slots as slot (slot.name)}{@render slotView(node, slot, path)}{/each}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<div class={cn('terminoir-expr', className)} role="group" aria-label={label}>
+  {@render block(value, kind, [])}
+  <p class="terminoir-expr__reading" class:terminoir-expr__reading--incomplete={!complete}>
+    {reading}{#if !complete} <span>(unfinished)</span>{/if}
+  </p>
+</div>
+
+<style>
+  .terminoir-expr { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; font-size: 0.8125rem; }
+  .terminoir-expr__block {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-2);
+    border: 1px solid var(--border);
+    border-left: 3px solid var(--block-accent, var(--primary));
+    border-radius: var(--radius);
+    background: color-mix(in srgb, var(--foreground) 3%, transparent);
+    min-width: 0;
+  }
+  .terminoir-expr__block[data-kind='boolean'] { --block-accent: var(--primary); }
+  .terminoir-expr__block[data-kind='number'] { --block-accent: #3b82f6; }
+  .terminoir-expr__block[data-kind='date'] { --block-accent: #f59e0b; }
+  .terminoir-expr__block[data-kind='value'],
+  .terminoir-expr__block[data-kind='text'] { --block-accent: #10b981; }
+  .terminoir-expr__block--empty { border-style: dashed; background: transparent; }
+  .terminoir-expr__head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+  .terminoir-expr__pick { width: auto; min-width: 8rem; }
+  .terminoir-expr__param { width: 9rem; }
+  .terminoir-expr__slots { display: flex; flex-direction: column; gap: var(--space-2); padding-left: var(--space-3); }
+  .terminoir-expr__slot { display: flex; flex-direction: column; gap: var(--space-1); }
+  .terminoir-expr__slot-name { color: var(--muted-foreground); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; }
+  .terminoir-expr__list { display: flex; flex-direction: column; gap: var(--space-2); }
+  .terminoir-expr__entry { display: flex; gap: var(--space-1); align-items: flex-start; }
+  .terminoir-expr__entry > :first-child { flex: 1; }
+  .terminoir-expr__reading { margin: 0; color: var(--muted-foreground); }
+  .terminoir-expr__reading--incomplete span { color: var(--danger, #ef4444); }
+</style>

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

@@ -0,0 +1,17 @@
+import { type ExpressionField, type ExpressionKind, type ExpressionNode, type ExpressionOp } from '../utils/expression.js';
+type $$ComponentProps = {
+    /** The op catalogue, e.g. Oyster's `GET /expressions/ops`. */
+    ops: ExpressionOp[];
+    /** Fields a `key` param can name. */
+    fields?: ExpressionField[];
+    value: ExpressionNode | null;
+    /** What the whole expression must return. */
+    kind?: ExpressionKind;
+    /** Accessible name for the editor. */
+    label: string;
+    onchange: (value: ExpressionNode | null) => void;
+    class?: string;
+};
+declare const ExpressionEditor: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExpressionEditor = ReturnType<typeof ExpressionEditor>;
+export default ExpressionEditor;

package/dist/components/GridLayout.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils/cn.js';
+  import { moveTo, nearestIndex, spanAfterDrag, type GridItem } from '../utils/layout.js';
+  import NavIcon from './NavIcon.svelte';
+
+  /**
+   * Items in reading order on a column grid. Drag an item's move handle (render `handle` where it
+   * belongs, e.g. in a header) to reorder; drag its right edge to change its column span. Both
+   * have keyboard equivalents (arrow keys). `onchange` gets the new order and spans when a drag ends.
+   */
+  let {
+    items,
+    columns = 12,
+    minSpan = 3,
+    label,
+    onchange,
+    children,
+    class: className = '',
+  }: {
+    items: GridItem[];
+    columns?: number;
+    minSpan?: number;
+    /** Accessible name for the grid. */
+    label: string;
+    onchange: (items: GridItem[]) => void;
+    children: Snippet<[GridItem, Snippet]>;
+    class?: string;
+  } = $props();
+
+  let draft = $state<GridItem[] | null>(null);
+  const shown = $derived(draft ?? items);
+  let grid: HTMLDivElement | undefined = $state();
+
+  function cells(): HTMLElement[] {
+    return grid ? [...grid.querySelectorAll<HTMLElement>(':scope > .terminoir-grid__cell')] : [];
+  }
+
+  function commit() {
+    if (draft) onchange(draft);
+    draft = null;
+  }
+
+  function startMove(event: PointerEvent, id: string) {
+    const handle = event.currentTarget as HTMLElement;
+    handle.setPointerCapture(event.pointerId);
+    draft = items.slice();
+    const move = (e: PointerEvent) => {
+      const centres = cells().map((cell) => {
+        const r = cell.getBoundingClientRect();
+        return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+      });
+      if (draft) draft = moveTo(draft, id, nearestIndex(centres, e.clientX, e.clientY));
+    };
+    const end = () => {
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', end);
+      handle.removeEventListener('pointercancel', end);
+      commit();
+    };
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', end);
+    handle.addEventListener('pointercancel', end);
+  }
+
+  function startResize(event: PointerEvent, item: GridItem) {
+    const edge = event.currentTarget as HTMLElement;
+    edge.setPointerCapture(event.pointerId);
+    const startX = event.clientX;
+    const columnWidth = (grid?.clientWidth ?? 0) / columns;
+    draft = items.slice();
+    const move = (e: PointerEvent) => {
+      const span = spanAfterDrag(item.span, e.clientX - startX, columnWidth, minSpan, columns);
+      if (draft) draft = draft.map((i) => (i.id === item.id ? { ...i, span } : i));
+    };
+    const end = () => {
+      edge.removeEventListener('pointermove', move);
+      edge.removeEventListener('pointerup', end);
+      edge.removeEventListener('pointercancel', end);
+      commit();
+    };
+    edge.addEventListener('pointermove', move);
+    edge.addEventListener('pointerup', end);
+    edge.addEventListener('pointercancel', end);
+  }
+
+  function keyMove(event: KeyboardEvent, id: string) {
+    const step = { ArrowUp: -1, ArrowLeft: -1, ArrowDown: 1, ArrowRight: 1 }[event.key];
+    if (!step) return;
+    event.preventDefault();
+    const index = items.findIndex((i) => i.id === id);
+    onchange(moveTo(items, id, index + step));
+  }
+
+  function keyResize(event: KeyboardEvent, item: GridItem) {
+    const step = { ArrowLeft: -1, ArrowRight: 1 }[event.key];
+    if (!step) return;
+    event.preventDefault();
+    const span = Math.max(minSpan, Math.min(columns, item.span + step));
+    if (span !== item.span) onchange(items.map((i) => (i.id === item.id ? { ...i, span } : i)));
+  }
+</script>
+
+<div
+  bind:this={grid}
+  class={cn('terminoir-grid', draft && 'terminoir-grid--dragging', className)}
+  style:--grid-columns={columns}
+  role="list"
+  aria-label={label}
+>
+  {#each shown as item (item.id)}
+    {#snippet handle()}
+      <button
+        type="button"
+        class="terminoir-grid__move terminoir-focusable"
+        aria-label="Move (drag, or use arrow keys)"
+        title="Drag to move"
+        onpointerdown={(event) => startMove(event, item.id)}
+        onkeydown={(event) => keyMove(event, item.id)}
+      >
+        <NavIcon name="grip-vertical" />
+      </button>
+    {/snippet}
+    <div class="terminoir-grid__cell" style:--span={Math.min(item.span, columns)} role="listitem">
+      {@render children(item, handle)}
+      <button
+        type="button"
+        class="terminoir-grid__resize terminoir-focusable"
+        aria-label={`Width ${item.span} of ${columns} columns (drag, or use left and right arrows)`}
+        title="Drag to resize"
+        onpointerdown={(event) => startResize(event, item)}
+        onkeydown={(event) => keyResize(event, item)}
+      ></button>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .terminoir-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
+    gap: var(--space-4);
+    align-items: start;
+    min-width: 0;
+  }
+  .terminoir-grid__cell { position: relative; grid-column: span var(--span); min-width: 0; }
+  @media (max-width: 700px) {
+    .terminoir-grid__cell { grid-column: 1 / -1; }
+    .terminoir-grid__resize { display: none; }
+  }
+  .terminoir-grid--dragging { user-select: none; }
+  .terminoir-grid--dragging .terminoir-grid__cell { transition: none; }
+  .terminoir-grid__move {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm, 0.375rem);
+    background: transparent;
+    color: var(--muted-foreground);
+    cursor: grab;
+    touch-action: none;
+  }
+  .terminoir-grid__move:active { cursor: grabbing; }
+  .terminoir-grid__move:hover { color: var(--foreground); background: color-mix(in srgb, var(--foreground) 8%, transparent); }
+  .terminoir-grid__resize {
+    position: absolute;
+    top: var(--space-3);
+    bottom: var(--space-3);
+    right: calc(var(--space-2) * -1);
+    width: var(--space-3);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: ew-resize;
+    touch-action: none;
+  }
+  .terminoir-grid__resize::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 2px;
+    border-radius: 1px;
+    background: transparent;
+    transition: background 120ms ease;
+  }
+  .terminoir-grid__resize:hover::after,
+  .terminoir-grid__resize:focus-visible::after { background: var(--primary); }
+</style>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import { type GridItem } from '../utils/layout.js';
+type $$ComponentProps = {
+    items: GridItem[];
+    columns?: number;
+    minSpan?: number;
+    /** Accessible name for the grid. */
+    label: string;
+    onchange: (items: GridItem[]) => void;
+    children: Snippet<[GridItem, Snippet]>;
+    class?: string;
+};
+declare const GridLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type GridLayout = ReturnType<typeof GridLayout>;
+export default GridLayout;