@greendrake/ui-data 0.5.0 → 0.7.0

package/README.md

@@ -158,7 +158,7 @@ const table = ref<InfiniteScrollTableExposed<User>>()
 
 ## MasterDetail
 
-Resizable master pane on the left, tabbed detail panes on the right (a `TabBar` from `@greendrake/ui` with closable tabs). Props: `initialWidth` (default 150), `minWidth` (default 100), `fullWidthUntilTab` (default `false`; the master spans the whole width until a tab opens). Emits `tab-open`, `tab-close`, `tab-activate`, each with the `TabDef`. Slots: `master` receives `{ openTab }`; `detail` receives `{ tab, isActive }` and is rendered once per open tab, inactive panes kept alive with `v-show`. Exposes `openTab(id, label?)` (opens or activates), `closeTab(id)`, `activateTab(id)`, `updateTab(id, newId?, newLabel?)`, `tabs`, `activeTab`, `activeTabId`.
+A `SplitPane` from `@greendrake/ui`: the resizable master pane on the left, tabbed detail panes on the right (a `TabBar` with closable tabs). Props: `initialWidth` and `minWidth` (the master's; `SplitPane`'s defaults, 150 and 100), `fullWidthUntilTab` (default `false`; the master spans the whole width until a tab opens). Emits `tab-open`, `tab-close`, `tab-activate`, each with the `TabDef`. Slots: `master` receives `{ openTab }`; `detail` receives `{ tab, isActive }` and is rendered once per open tab, inactive panes kept alive with `v-show`. Exposes `openTab(id, label?)` (opens or activates), `closeTab(id)`, `activateTab(id)`, `updateTab(id, newId?, newLabel?)`, `tabs`, `activeTab`, `activeTabId`.
 
 ## CrudPanel
 
@@ -174,10 +174,11 @@ Master/detail CRUD shell: a controls bar (search field, optional Create button,
 | `initialWidth`, `minWidth`, `fullWidthUntilTab` | forwarded to `MasterDetail` | 200, 120, `true` |
 | `showRange` | render the `start-end/total` readout | `true` |
 | `localSearchFields` | `string[] \| false \| null`; `null` keeps the table's default | `null` |
+| `rowLabel` | `(record: T) => string`, a row's detail tab label; `null` labels it with the row key | `null` |
 | `creatable` | Create button, opens a `new:<n>` tab | `false` |
 | `newTabLabel` | label of that tab | `messages.newTab` |
 | `onDelete` | `(keys: Key[]) => Promise<unknown>`; enables the Delete button for the selection | `null` |
-| `deleteConfirmMessage` | when set, deletion asks first in a `Modal` | `null` |
+| `deleteConfirmMessage` | `string \| ((keys: Key[]) => Promise<string>)`; when set, deletion asks first in a `Modal` with this text, or the text the function composes for the selected keys | `null` |
 | `keyExists` | `(key: Key) => boolean`, backs the `isDupe` slot prop | `null` |
 
 The search field's debounce is `localFilterDebounce` over the table: swift when the change resolves in memory, longer when it triggers a fetch. A single column hides the table header.
@@ -186,7 +187,7 @@ Slots: `controls-left` (after the search field and Create), `controls-middle` (`
 
 Exposed (`CrudPanelExposed<T>`; type the ref as `ref<CrudPanelExposed<Row>>()`): `openTab`, `closeTab`, `updateTab`, `removeRows(keys)` (also clears the selection), `addRow`, `patchRow`, `getRow`, `refresh`, `applySaved(key, record, tabId?)`, and readonly `selected`, `range`, `deleting`.
 
-`applySaved` is the post-save hook of the record-edit convention below: it patches the row in place when the key exists, otherwise adds the row and, given the originating `new:` tab's id, renames that tab to the persisted key so the `record` slot prop resolves and the next save updates instead of creates.
+`applySaved` is the post-save hook of the record-edit convention below: it patches the row in place when the key exists, otherwise adds the row and, given the originating `new:` tab's id, renames that tab to the persisted key so the `record` slot prop resolves and the next save updates instead of creates. With a `rowLabel`, the record's tab is relabelled from the saved record.
 
 ```vue
 <script setup lang="ts">
@@ -315,6 +316,10 @@ interface SortState {
 
 `useDetailLoader<T, Id>(id: WatchSource<Id>, fetcher: (id: Id) => Promise<T>): DetailLoader<T>` — the detail-pane fetch skeleton: loads immediately, reloads whenever `id` changes, discards responses that arrive after the id moved on. Returns `{ data: Ref<T | null>, loading, error: Ref<string | null>, reload(), mutate(fn: (cur: T) => void) }`. A rejection's message lands in `error` for in-pane display, so pass a fetcher that does not report errors globally itself. `mutate` folds a known local change into the loaded value without a re-fetch.
 
+### DetailPane
+
+`<DetailPane :loader="detail" v-slot="{ data }">` — a detail pane's record as `detail` (a `useDetailLoader` result) loads: the loading line, the load's error, or the default slot given the loaded record as `data`.
+
 ### useAsyncAction
 
 `useAsyncAction<Args extends unknown[]>(fn: (...args: Args) => Promise<string | void>): AsyncAction<Args>` — in-flight/error/notice bookkeeping for an action button. Returns `{ acting, error, notice, run(...args) }`: `run` ignores re-entry while acting, clears `error`/`notice`, captures a rejection's message in `error`, and stores a string result as the success `notice`. Buttons sharing one in-flight state parameterise `fn` and pass the variant to `run`.
@@ -325,10 +330,26 @@ interface SortState {
 
 ### Formatters
 
-- `fmtDate(v: unknown): string` — `'YYYY-MM-DD HH:MM:SSZ'` in UTC from an ISO/`'YYYY-MM-DD HH:MM:SS'` string (a zoneless string is taken as UTC), a number or a `Date`; `''` for `null`/`undefined`/`''`; throws on other types.
+Beside `fmtBool` and `fmtYesNo`, which read any value as a boolean, the formatters render `null`, `undefined` and `''` as `''`, and throw on a value of a type they do not format. `Intl` output is in the browser's locale.
+
+- `parseInstant(v: unknown): Date` — an instant from an ISO/`'YYYY-MM-DD HH:MM:SS'` string (a zoneless string is taken as UTC), a number or a `Date`.
+- `fmtDate(v: unknown): string` — `'YYYY-MM-DD HH:MM:SSZ'`: the instant (`parseInstant`) in UTC.
+- `fmtDateTime(style: DateStyle)` — a formatter of instants (`parseInstant`) at an `Intl` date and time style (`'full' | 'long' | 'medium' | 'short'`), in the browser's time zone; one formatter per style.
+- `fmtDay(style: DateStyle)` — a formatter of calendar dates (`'YYYY-MM-DD'`) at an `Intl` date style; the day never shifts with the time zone. One formatter per style.
+- `fmtNumber(v: unknown): string` — a number or numeric string in the locale's notation, never rounded; a string formats exactly, digit for digit.
+- `fmtBytes(v: unknown): string` — a byte count in binary units (B, KiB, MiB, GiB, TiB, PiB, EiB): the largest unit the amount reads under 1024 in once rounded to a tenth, at most one fraction digit.
+- `fmtMarkupText(v: unknown): string` — markup as the one line of text it reads: `inlineMarkup`'s text, whitespace collapsed.
 - `fmtBool(v: unknown): string` — `'✓'` or `''`, for table cells.
 - `fmtYesNo(v: unknown): string` — `'yes'` / `'no'`, for detail prose.
 
+### inlineMarkup, InlineMarkup
+
+`inlineMarkup(markup: string): DocumentFragment` rebuilds markup as one line of inline content, safe to render whatever its source: text, and the inline formatting elements `b`, `strong`, `i`, `em`, `u`, `s`, `del`, `ins`, `sub`, `sup`, `code`, `mark`, `small`, recreated without attributes. Other elements are unwrapped; block-level ones and `<br>` part runs of text with one space; scripts, styles, templates, `noscript`, embedded and media content are dropped with everything inside, as are comments. It parses with `DOMParser`, whose document is inert. The `InlineMarkup` component (prop `markup: string`) renders the fragment on one line, cut with an ellipsis — a table cell's `component` for rich text.
+
+### NoteActions
+
+An operator's decisions on a record, recorded with a note. Props: `actions: NoteAction[]` and `placeholder: string`. `NoteAction` is `{ label, fn(note) => Promise, note?: 'optional' | 'required', confirm? }`: a button per action; the note field shows when any action takes a note, one requiring it stays disabled until there is one, and one with `confirm` asks in a modal first. The actions share one in-flight guard and an error line; `done` is emitted once one succeeded, so the parent re-reads. `suspensionActions(suspended, suspend, unsuspend)` is the pair a suspendable record offers — Suspend on a required reason, or Unsuspend.
+
 ### DescriptionList
 
 Label/value grid for detail panes. Prop `items: (DescriptionItem | false | null | undefined)[]` — falsy entries are skipped, so conditional rows inline as `cond && { … }`. `DescriptionItem` is `{ label: string; value: string | number | null | undefined; code?: boolean }`; `code` renders the value in `<code>`. Values arrive display-ready.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/ui-data",
-    "version": "0.5.0",
+    "version": "0.7.0",
     "description": "Data-heavy dashboard components: virtualized InfiniteScrollTable, CrudPanel/MasterDetail, record editing and the admin-CRUD kit",
     "license": "MIT",
     "author": "Eugene Greendrake <eugene@greendrake.nz>",
@@ -33,14 +33,17 @@
     },
     "prettier": "@greendrake/dev-config/prettier",
     "dependencies": {
-        "@greendrake/scss-kit": "0.5.0",
-        "@greendrake/ui": "0.5.0"
+        "@greendrake/scss-kit": "0.7.0",
+        "@greendrake/ui": "0.7.0"
     },
     "peerDependencies": {
         "vue": "^3.5.34"
     },
     "devDependencies": {
-        "@greendrake/dev-config": "0.5.0",
+        "@greendrake/dev-config": "0.7.0",
+        "@types/bun": "^1.3.5",
+        "@types/jsdom": "28.0.3",
+        "jsdom": "28.1.0",
         "typescript": "6.0.3",
         "vue": "^3.5.34",
         "vue-tsc": "^2.2.0"

package/src/CrudPanel.vue

@@ -73,11 +73,14 @@ const props = withDefaults(
         showRange?: boolean
         // null = table default; false = always filter remotely (see table prop).
         localSearchFields?: string[] | false | null
+        // The detail tab label of a row; null labels a tab with the row key.
+        rowLabel?: ((record: T) => string) | null
         // --- Create / Delete affordances (all opt-in) ---
         creatable?: boolean
         newTabLabel?: string
         onDelete?: ((keys: Key[]) => Promise<unknown>) | null
-        deleteConfirmMessage?: string | null
+        // The confirm's text; a function composes it for the keys about to go.
+        deleteConfirmMessage?: string | ((keys: Key[]) => Promise<string>) | null
         keyExists?: ((key: Key) => boolean) | null
     }>(),
     {
@@ -93,7 +96,8 @@ const props = withDefaults(
         newTabLabel: undefined,
         onDelete: null,
         deleteConfirmMessage: null,
-        keyExists: null
+        keyExists: null,
+        rowLabel: null
     }
 )
 
@@ -112,7 +116,12 @@ const newTabLabelText = computed(() => props.newTabLabel ?? messages.newTab)
 function onRowActivate(record: T): void {
     if (!slots.detail) return
     const key = String(rowKeyOf(record, props.rowKey))
-    masterDetailRef.value!.openTab(key, key)
+    masterDetailRef.value!.openTab(key, labelOf(record, key))
+}
+
+// A row's detail tab label: its rowLabel, else its key.
+function labelOf(record: T, key: string): string {
+    return props.rowLabel ? props.rowLabel(record) : key
 }
 
 const searchQuery = ref<string | undefined>('')
@@ -134,7 +143,8 @@ function onRangeChanged(range: VisibleRange): void {
 
 let newTabSeq = 0
 const deleting = ref(false)
-const deleteConfirm = ref(false)
+// The open confirm's text; null while no confirm shows.
+const deleteConfirm = ref<string | null>(null)
 
 const canDelete = computed(() => !!props.onDelete && (tableRef.value?.selected?.size ?? 0) > 0)
 
@@ -142,12 +152,13 @@ function onCreate(): void {
     masterDetailRef.value!.openTab(`new:${++newTabSeq}`, newTabLabelText.value)
 }
 
-function onRequestDelete(): void {
+async function onRequestDelete(): Promise<void> {
     if (!canDelete.value || deleting.value) return
-    if (props.deleteConfirmMessage) {
-        deleteConfirm.value = true
-    } else {
+    const message = props.deleteConfirmMessage
+    if (message === null) {
         doDelete()
+    } else {
+        deleteConfirm.value = typeof message === 'string' ? message : await message([...tableRef.value!.selected!])
     }
 }
 
@@ -156,7 +167,7 @@ async function doDelete(): Promise<void> {
     if (!sel?.size) return
     const keys = [...sel]
     deleting.value = true
-    deleteConfirm.value = false
+    deleteConfirm.value = null
     try {
         await props.onDelete!(keys)
         for (const k of keys) masterDetailRef.value?.closeTab(String(k))
@@ -180,16 +191,20 @@ function isDupe(original: Key, candidate: Key): boolean {
 // in place when it already exists; otherwise add the freshly created row and,
 // given the originating `new:` tab's id, rename that tab to the persisted key
 // so the editor's `record` slot prop resolves and subsequent saves route to
-// update instead of create.
+// update instead of create. With a rowLabel, the record's tab follows its
+// label, which a save may change.
 function applySaved(key: Key, record: T, tabId?: string): void {
     if (tableRef.value?.getRow(key)) {
         tableRef.value.patchRow(key, record)
     } else {
         tableRef.value?.addRow(record)
         if (tabId && tabId !== String(key)) {
-            masterDetailRef.value?.updateTab(tabId, String(key), String(key))
+            masterDetailRef.value?.updateTab(tabId, String(key), labelOf(record, String(key)))
         }
     }
+    if (props.rowLabel) {
+        masterDetailRef.value?.updateTab(String(key), undefined, props.rowLabel(record))
+    }
 }
 
 const exposed: CrudPanelExposed<T> = {
@@ -231,8 +246,8 @@ defineExpose(exposed)
                     <div v-if="showRange && visibleRange.total" class="CrudPanel__range">{{ visibleRange.start }}-{{ visibleRange.end }}/{{ visibleRange.total }}</div>
                     <button v-if="onDelete" type="button" class="CrudPanel__delete" :class="{ disabled: !canDelete || deleting, spinner: deleting }" @click="onRequestDelete">{{ messages.delete }}</button>
                     <slot name="controls-right" :selected="tableRef?.selected" />
-                    <Modal v-if="deleteConfirm" class="CrudPanel__delete-modal" :title="messages.delete" :ok-label="deleting ? messages.deleting : messages.delete" :ok-disabled="deleting" @ok="doDelete" @cancel="deleteConfirm = false">
-                        <p>{{ deleteConfirmMessage }}</p>
+                    <Modal v-if="deleteConfirm !== null" class="CrudPanel__delete-modal" :title="messages.delete" :ok-label="deleting ? messages.deleting : messages.delete" :ok-disabled="deleting" @ok="doDelete" @cancel="deleteConfirm = null">
+                        <p>{{ deleteConfirm }}</p>
                     </Modal>
                 </div>
                 <InfiniteScrollTable ref="tableRef" :loader="loader" :columns="columns" :row-height="rowHeight" :filters="mergedFilters" :row-key="rowKey" :hide-header="singleColumn" v-bind="localSearchFields !== null ? { localSearchFields } : {}" selectable @rowactivate="onRowActivate" @range-changed="onRangeChanged" />

package/src/DetailPane.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts" generic="T">
+import { messages } from '@greendrake/ui'
+import type { DetailLoader } from './useDetailLoader'
+
+// A detail pane's record as it loads: the loading line, the error the load
+// ended in, or — loaded — the default slot, given the record as `data`.
+defineProps<{ loader: DetailLoader<T> }>()
+defineSlots<{ default(props: { data: T }): unknown }>()
+</script>
+<template>
+    <div v-if="loader.loading.value">{{ messages.loading }}…</div>
+    <div v-else-if="loader.error.value" class="DetailPane__error">{{ loader.error.value }}</div>
+    <slot v-else-if="loader.data.value !== null" :data="loader.data.value" />
+</template>
+<style lang="scss">
+.DetailPane__error {
+    color: var(--error-color);
+}
+</style>

package/src/InfiniteScrollTable.vue

@@ -7,23 +7,10 @@ const DEBOUNCE_MS = 150
 const FLING_DECAY_TAU_MS = 325
 const FLING_MIN_VELOCITY_PX_MS = 0.05
 const FLING_SAMPLE_WINDOW_MS = 100
-
-// setPointerCapture throws NotFoundError when the pointer is no longer active —
-// released or cancelled between event dispatch and this call, a real race for
-// touch/pen and under synthetic pointer streams. A gesture whose pointer is
-// already gone has nothing to capture, so exactly that error is a no-op;
-// anything else still throws.
-const capturePointer = (event: PointerEvent): void => {
-    try {
-        ;(event.currentTarget as Element).setPointerCapture(event.pointerId)
-    } catch (e) {
-        if (!(e instanceof DOMException && e.name === 'NotFoundError')) throw e
-    }
-}
 </script>
 <script setup lang="ts" generic="T extends Record<string, unknown>">
 import { ref, computed, watch, onMounted, onUnmounted, type Ref } from 'vue'
-import { useSelection, messages, TOUCH_PAN_SLOP_PX } from '@greendrake/ui'
+import { useSelection, useWidthDrag, capturePointer, messages, TOUCH_PAN_SLOP_PX } from '@greendrake/ui'
 import { rowKeyOf, type Props, type DropTarget, type Filters, type LoaderParams, type LoaderResponse, type RowPosition, type VisibleRange, type InfiniteScrollTableExposed } from './InfiniteScrollTable.types'
 
 const props = withDefaults(defineProps<Props<T>>(), {
@@ -67,7 +54,7 @@ const lastRequestOffset = ref<number | null>(null)
 const baselineFilters = ref<Filters | null>(null)
 const hasAllRecords = ref(false)
 const colWidths = ref<number[]>([])
-const resizeCol = ref<{ index: number; startX: number; startWidth: number } | null>(null)
+const { active: colResizing, start: startColDrag, move: onColResizeMove, end: onColResizeEnd } = useWidthDrag(30)
 const dropTarget = ref(null) as Ref<DropTarget<T> | null>
 
 const keyOf = (record: T): string | number => rowKeyOf(record, props.rowKey)
@@ -98,14 +85,7 @@ function onRowPointerDown(record: T, e: PointerEvent): void {
     // Touch/pen select on pointerup instead (see onRowPointerUp), so that
     // starting a scroll pan on a row doesn't change the selection.
     if (!selection || e.pointerType !== 'mouse') return
-    const id = keyOf(record)
-    if (e.shiftKey) {
-        selection.rangeTo(id)
-    } else if (e.ctrlKey || e.metaKey) {
-        selection.toggle(id)
-    } else {
-        selection.replace(id)
-    }
+    selection.pick(keyOf(record), e)
 }
 
 // A panning pointer is captured by the wrapper (see onWrapperPointerMove), so
@@ -117,17 +97,7 @@ function onRowPointerUp(record: T, e: PointerEvent): void {
 
 function onTableKeyDown(e: KeyboardEvent): void {
     if (!selection) return
-    if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
-        e.preventDefault()
-        selection.selectAll()
-        return
-    }
-    const isUp = e.key === 'ArrowUp'
-    const isDown = e.key === 'ArrowDown'
-    if (!isUp && !isDown) return
-    e.preventDefault()
-    const newIndex = selection.moveCursor(isUp ? 'up' : 'down', e.shiftKey)
-    scrollToIndex(newIndex)
+    scrollToIndex(selection.onKeyDown(e))
 }
 
 const initColWidths = (): void => {
@@ -139,26 +109,13 @@ const initColWidths = (): void => {
 // Column resize and scroll-handle dragging use pointer capture on the grabbed
 // element, so the drag keeps tracking the pointer outside the element (and the
 // component) without document-level listeners — and works for touch/pen too.
+// A column's drag stops at its handle: the wrapper would read it as a pan.
 const onColResizeStart = (event: PointerEvent, index: number): void => {
-    event.preventDefault()
     event.stopPropagation()
-    capturePointer(event)
     initColWidths()
-    resizeCol.value = {
-        index,
-        startX: event.clientX,
-        startWidth: colWidths.value[index]
-    }
-}
-
-const onColResizeMove = (event: PointerEvent): void => {
-    if (!resizeCol.value) return
-    const delta = event.clientX - resizeCol.value.startX
-    colWidths.value[resizeCol.value.index] = Math.max(30, resizeCol.value.startWidth + delta)
-}
-
-const onColResizeEnd = (): void => {
-    resizeCol.value = null
+    startColDrag(event, colWidths.value[index], width => {
+        colWidths.value[index] = width
+    })
 }
 
 // Computed values
@@ -788,7 +745,7 @@ defineExpose(exposed)
 </script>
 
 <template>
-    <div ref="containerRef" class="infinite-scroll-table" :class="{ spinner: loading || hasVisibleGaps, 'col-resizing': resizeCol }">
+    <div ref="containerRef" class="infinite-scroll-table" :class="{ spinner: loading || hasVisibleGaps, 'col-resizing': colResizing }">
         <div class="table-wrapper" :tabindex="selectable ? 0 : undefined" :style="{ touchAction: scrollHandleHeight > 0 ? 'pinch-zoom' : undefined }" @wheel="handleWheel" @keydown="onTableKeyDown" @pointerdown="onWrapperPointerDown" @pointermove="onWrapperPointerMove" @pointerup="onWrapperPointerEnd" @pointercancel="onWrapperPointerEnd" @click.capture="onWrapperClickCapture" @dragover="onTableDragOver" @drop="onTableDrop" @dragleave="onTableDragLeave">
             <table class="data-table">
                 <thead v-if="!hideHeader" ref="theadRef">
@@ -892,10 +849,7 @@ defineExpose(exposed)
     }
 
     &.col-resizing {
-        user-select: none;
-        * {
-            cursor: col-resize !important;
-        }
+        @include dragging(col-resize);
     }
 }
 

package/src/InlineMarkup.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// Markup rendered as one line of its inline formatting (inlineMarkup), cut
+// with an ellipsis where it overflows.
+import { computed } from 'vue'
+import { inlineMarkup } from './inlineMarkup'
+
+const props = defineProps<{
+    markup: string
+}>()
+
+// Safe to v-html: the fragment holds nothing but bare allowlisted elements
+// and text, which serializing escapes.
+const html = computed(() => {
+    const holder = document.createElement('div')
+    holder.appendChild(inlineMarkup(props.markup))
+    return holder.innerHTML
+})
+</script>
+<template>
+    <span class="InlineMarkup" v-html="html"></span>
+</template>
+<style lang="scss">
+.InlineMarkup {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+</style>

package/src/MasterDetail.vue

@@ -1,19 +1,13 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { TabBar, type TabDef } from '@greendrake/ui'
+import { SplitPane, TabBar, type TabDef } from '@greendrake/ui'
 
-const props = withDefaults(
-    defineProps<{
-        initialWidth?: number
-        minWidth?: number
-        fullWidthUntilTab?: boolean
-    }>(),
-    {
-        initialWidth: 150,
-        minWidth: 100,
-        fullWidthUntilTab: false
-    }
-)
+// The widths are the master pane's, handed to SplitPane (its defaults when unset).
+defineProps<{
+    initialWidth?: number
+    minWidth?: number
+    fullWidthUntilTab?: boolean
+}>()
 
 const emit = defineEmits<{
     'tab-open': [tab: TabDef]
@@ -23,19 +17,11 @@ const emit = defineEmits<{
 
 const tabs = ref<TabDef[]>([])
 const activeTabId = ref<string | null>(null)
-const masterWidth = ref(props.initialWidth)
 
 const activeTab = computed(() => tabs.value.find(t => t.id === activeTabId.value) ?? null)
 
 const hasTabs = computed(() => tabs.value.length > 0)
 
-const masterStyle = computed(() => {
-    if (props.fullWidthUntilTab && !hasTabs.value) {
-        return { flex: '1 1 0', width: 0 }
-    }
-    return { width: masterWidth.value + 'px' }
-})
-
 function openTab(id: string, label?: string): void {
     let tab = tabs.value.find(t => t.id === id)
     if (!tab) {
@@ -81,23 +67,6 @@ function updateTab(id: string, newId?: string, newLabel?: string): void {
     }
 }
 
-function onResizeStart(e: MouseEvent): void {
-    const startX = e.clientX
-    const startWidth = masterWidth.value
-
-    function onMouseMove(e: MouseEvent): void {
-        masterWidth.value = Math.max(props.minWidth, startWidth + e.clientX - startX)
-    }
-
-    function onMouseUp(): void {
-        document.removeEventListener('mousemove', onMouseMove)
-        document.removeEventListener('mouseup', onMouseUp)
-    }
-
-    document.addEventListener('mousemove', onMouseMove)
-    document.addEventListener('mouseup', onMouseUp)
-}
-
 defineExpose({
     openTab,
     closeTab,
@@ -109,12 +78,11 @@ defineExpose({
 })
 </script>
 <template>
-    <div class="MasterDetail">
-        <div class="MasterDetail__master" :style="masterStyle">
+    <SplitPane class="MasterDetail" :initial-width="initialWidth" :min-width="minWidth">
+        <template #start>
             <slot name="master" :open-tab="openTab"></slot>
-        </div>
-        <template v-if="hasTabs || !fullWidthUntilTab">
-            <div class="MasterDetail__resize" @mousedown="onResizeStart"></div>
+        </template>
+        <template v-if="hasTabs || !fullWidthUntilTab" #end>
             <div class="MasterDetail__detail">
                 <TabBar :tabs="tabs" :model-value="activeTabId" closable @update:model-value="activateTab" @close="closeTab" />
                 <div class="MasterDetail__content">
@@ -126,44 +94,11 @@ defineExpose({
                 </div>
             </div>
         </template>
-    </div>
+    </SplitPane>
 </template>
 <style lang="scss">
 .MasterDetail {
-    display: flex;
-    min-width: 0;
-    // Flex item in a column parent: without this the automatic min-height (auto)
-    // keeps it as tall as its content, so it overgrows the viewport and the
-    // master's overflow:auto has nothing to scroll within.
-    min-height: 0;
-
-    &__master {
-        flex-shrink: 0;
-        min-width: v-bind('minWidth + "px"');
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-
-        > * {
-            flex-grow: 1;
-            min-height: 0;
-        }
-    }
-
-    &__resize {
-        width: 4px;
-        flex-shrink: 0;
-        cursor: col-resize;
-        background-color: var(--border-color-light);
-        &:hover {
-            background-color: var(--accent-color);
-        }
-    }
-
     &__detail {
-        flex-grow: 1;
-        min-width: 0;
-        min-height: 0;
         overflow: hidden;
         display: flex;
         flex-direction: column;

package/src/NoteActions.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+// An operator's decision: what the button says, and what recording it does
+// with the note — which it may take (`optional`), wait for as its reason
+// (`required`), or ignore (absent). One with `confirm` asks that first.
+export interface NoteAction {
+    label: string
+    fn: (note: string) => Promise<unknown>
+    note?: 'optional' | 'required'
+    confirm?: string
+}
+
+// The decisions a suspendable record offers: Suspend, on a required reason,
+// while it is not suspended; Unsuspend while it is.
+export const suspensionActions = (suspended: boolean, suspend: (reason: string) => Promise<unknown>, unsuspend: () => Promise<unknown>): NoteAction[] =>
+    suspended
+        ? [{ label: 'Unsuspend', fn: unsuspend }]
+        : [
+              {
+                  label: 'Suspend',
+                  fn: suspend,
+                  note: 'required'
+              }
+          ]
+</script>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Modal } from '@greendrake/ui'
+import { useAsyncAction } from './useAsyncAction'
+
+// The operator-decision shell: a note where a decision takes one, and a button
+// per decision that records it. The parent owns the (silent) API calls and
+// re-reads on @done; this owns the note, the shared in-flight guard, the
+// confirmation and the error line.
+const props = defineProps<{ actions: NoteAction[]; placeholder: string }>()
+const emit = defineEmits<{ done: [] }>()
+
+const note = ref('')
+const takesNote = computed(() => props.actions.some(a => a.note))
+// The decision waiting on its confirmation.
+const confirming = ref<NoteAction | null>(null)
+
+const action = useAsyncAction(async (a: NoteAction) => {
+    confirming.value = null
+    await a.fn(note.value.trim())
+    note.value = ''
+    emit('done')
+})
+
+const request = (a: NoteAction): void => {
+    if (a.confirm) confirming.value = a
+    else void action.run(a)
+}
+</script>
+<template>
+    <div class="NoteActions">
+        <input v-if="takesNote" v-model="note" :placeholder="placeholder" :disabled="action.acting.value" />
+        <button v-for="a in actions" :key="a.label" :disabled="action.acting.value || (a.note === 'required' && !note.trim())" @click="request(a)">{{ a.label }}</button>
+        <div v-if="action.error.value" class="NoteActions__error">{{ action.error.value }}</div>
+        <Modal v-if="confirming" :title="confirming.label" :ok-label="confirming.label" @ok="action.run(confirming)" @cancel="confirming = null">
+            <p>{{ confirming.confirm }}</p>
+        </Modal>
+    </div>
+</template>
+<style lang="scss">
+.NoteActions {
+    margin-top: var(--space-4);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    flex-wrap: wrap;
+    input {
+        flex: 1 1 200px;
+    }
+    &__error {
+        color: var(--error-color);
+        flex-basis: 100%;
+    }
+}
+</style>

package/src/formatters.ts

@@ -1,25 +1,98 @@
+import { inlineMarkup } from './inlineMarkup'
+
 // Wire timestamps drift between carrying an explicit zone ('Z' or ±hh:mm) and
 // omitting it. JavaScript parses a zoneless date-time string as LOCAL time, so
-// a missing zone is normalized to UTC before parsing. Output is always
-// 'YYYY-MM-DD HH:MM:SSZ' — the value IS UTC and the suffix says so.
+// a missing zone is normalized to UTC before parsing.
 const HAS_ZONE = /(?:Z|[+-]\d{2}:?\d{2})$/i
 
-export const fmtDate = (v: unknown): string => {
-    if (v == null || v === '') return ''
-    let d: Date
+/** An instant from an ISO/'YYYY-MM-DD HH:MM:SS' string (a zoneless one taken as UTC), a number or a Date. */
+export const parseInstant = (v: unknown): Date => {
     if (typeof v === 'string') {
         const iso = v.replace(' ', 'T')
-        d = new Date(iso.includes('T') && !HAS_ZONE.test(iso) ? iso + 'Z' : iso)
-    } else if (typeof v === 'number' || v instanceof Date) {
-        d = new Date(v)
-    } else {
-        throw new TypeError(`fmtDate: unsupported value of type ${typeof v}`)
+        return new Date(iso.includes('T') && !HAS_ZONE.test(iso) ? iso + 'Z' : iso)
+    }
+    if (typeof v === 'number' || v instanceof Date) {
+        return new Date(v)
     }
-    return d.toISOString().replace('T', ' ').slice(0, 19) + 'Z'
+    throw new TypeError(`parseInstant: unsupported value of type ${typeof v}`)
 }
 
+// A formatter rendering a missing value (null, undefined, '') as ''.
+const blankable =
+    (format: (v: unknown) => string) =>
+    (v: unknown): string =>
+        v == null || v === '' ? '' : format(v)
+
+/** 'YYYY-MM-DD HH:MM:SSZ': the instant (parseInstant) in UTC, as the suffix says. */
+export const fmtDate = blankable(v => parseInstant(v).toISOString().replace('T', ' ').slice(0, 19) + 'Z')
+
 /** Table-cell boolean: a tick for true, blank for false. */
 export const fmtBool = (v: unknown): string => (v ? '✓' : '')
 
 /** Prose boolean for detail views. */
 export const fmtYesNo = (v: unknown): string => (v ? 'yes' : 'no')
+
+// A number or a numeric string, as Intl formats it: a string exactly, digit
+// for digit.
+const numeric = (v: unknown): number | Intl.StringNumericLiteral => {
+    if (typeof v === 'number') {
+        return v
+    }
+    if (typeof v === 'string' && v.trim() !== '' && !Number.isNaN(Number(v))) {
+        return v as Intl.StringNumericLiteral
+    }
+    throw new TypeError(`not a number: ${String(v)}`)
+}
+
+// The ES2023 ceiling: no fraction digit a value carries is rounded away.
+const localeNumber = new Intl.NumberFormat(undefined, { maximumFractionDigits: 100 })
+
+/** A number (or numeric string) in the browser locale's notation, never rounded. */
+export const fmtNumber = blankable(v => localeNumber.format(numeric(v)))
+
+const BYTE_UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB']
+
+const byteAmount = new Intl.NumberFormat(undefined, { maximumFractionDigits: 1 })
+
+/** A byte count in binary units (B, KiB, MiB, …), at most one fraction digit, in the browser locale's notation. */
+export const fmtBytes = blankable(v => {
+    let amount = Number(numeric(v))
+    let unit = 0
+    // A unit holds amounts that read under 1024 once rounded to a tenth.
+    while (unit < BYTE_UNITS.length - 1 && Math.abs(Math.round(amount * 10) / 10) >= 1024) {
+        amount /= 1024
+        unit++
+    }
+    return `${byteAmount.format(amount)} ${BYTE_UNITS[unit]}`
+})
+
+/** An Intl date/time style. */
+export type DateStyle = 'full' | 'long' | 'medium' | 'short'
+
+// One formatter per style, built on first use.
+const perStyle = (build: (style: DateStyle) => Intl.DateTimeFormat): ((style: DateStyle) => (v: unknown) => string) => {
+    const built = new Map<DateStyle, (v: unknown) => string>()
+    return style => {
+        let format = built.get(style)
+        if (!format) {
+            const intl = build(style)
+            format = blankable(v => intl.format(parseInstant(v)))
+            built.set(style, format)
+        }
+        return format
+    }
+}
+
+/** A formatter of instants (parseInstant) in the browser's locale and time zone, at an Intl date and time style. */
+export const fmtDateTime = perStyle(style => new Intl.DateTimeFormat(undefined, { dateStyle: style, timeStyle: style }))
+
+/** A formatter of calendar dates ('YYYY-MM-DD') in the browser's locale, at an Intl date style; the day never shifts with the time zone. */
+export const fmtDay = perStyle(style => new Intl.DateTimeFormat(undefined, { dateStyle: style, timeZone: 'UTC' }))
+
+/** Markup as the one line of text it reads (inlineMarkup's text, whitespace collapsed). */
+export const fmtMarkupText = blankable(v => {
+    if (typeof v !== 'string') {
+        throw new TypeError(`fmtMarkupText: markup must be a string, not ${typeof v}`)
+    }
+    return (inlineMarkup(v).textContent ?? '').replace(/\s+/g, ' ').trim()
+})

package/src/inlineMarkup.ts

@@ -0,0 +1,56 @@
+// Markup rebuilt as one line of inline content, safe to render: what it reads,
+// with only its inline formatting kept. Nothing of the source is carried over
+// but text and the names of allowlisted elements, recreated bare — no
+// attribute survives, so neither does a handler, a URL or a style.
+
+/** Inline formatting: recreated, without attributes. */
+const KEPT = new Set(['b', 'strong', 'i', 'em', 'u', 's', 'del', 'ins', 'sub', 'sup', 'code', 'mark', 'small'])
+
+/** Never read as text: dropped with everything inside. */
+const DROPPED = new Set(['script', 'style', 'template', 'noscript', 'iframe', 'frame', 'frameset', 'object', 'embed', 'svg', 'math', 'img', 'picture', 'video', 'audio', 'canvas', 'map'])
+
+/** Read as a break between runs of text: a single space on the line. */
+const BLOCKS = new Set([
+    'address', 'article', 'aside', 'blockquote', 'br', 'caption', 'dd', 'details', 'dialog', 'div', 'dl', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hgroup', 'hr', 'li', 'main', 'nav', 'ol', 'p', 'pre', 'section', 'summary', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'ul'
+])
+
+/**
+ * The markup as a fragment of text and bare allowlisted inline elements: other
+ * elements are unwrapped, blocks part runs of text with one space, and what is
+ * never read as text (scripts, styles, embedded and media content) is dropped
+ * whole. DOMParser's document is inert: nothing in it runs or loads.
+ */
+export const inlineMarkup = (markup: string): DocumentFragment => {
+    const out = document.createDocumentFragment()
+    // A block boundary owes a space to the next text or kept element, if any
+    // text came before.
+    let spaceOwed = false
+    let anyText = false
+    const paySpace = (into: Node): void => {
+        if (spaceOwed && anyText) {
+            into.appendChild(document.createTextNode(' '))
+        }
+        spaceOwed = false
+    }
+    const walk = (from: Node, into: Node): void => {
+        for (const node of from.childNodes) {
+            if (node instanceof Text) {
+                paySpace(into)
+                anyText = true
+                into.appendChild(document.createTextNode(node.data))
+            } else if (node instanceof Element && !DROPPED.has(node.localName)) {
+                const block = BLOCKS.has(node.localName)
+                spaceOwed ||= block
+                let target = into
+                if (KEPT.has(node.localName)) {
+                    paySpace(into)
+                    target = into.appendChild(document.createElement(node.localName))
+                }
+                walk(node, target)
+                spaceOwed ||= block
+            }
+        }
+    }
+    walk(new DOMParser().parseFromString(markup, 'text/html').body, out)
+    return out
+}

package/src/main.ts

@@ -7,9 +7,13 @@ export type { CrudPanelExposed } from './CrudPanel.vue'
 export { default as useRecordEditor, type RecordEditor, type RecordEditorOptions } from './useRecordEditor'
 export { useSortState, type SortState, type SortDir, type ColumnOptions } from './useSortState'
 export { listLoader, type PageArgs } from './listLoader'
-export { fmtDate, fmtBool, fmtYesNo } from './formatters'
+export { parseInstant, fmtDate, fmtBool, fmtYesNo, fmtNumber, fmtBytes, fmtDateTime, fmtDay, fmtMarkupText, type DateStyle } from './formatters'
+export { inlineMarkup } from './inlineMarkup'
+export { default as InlineMarkup } from './InlineMarkup.vue'
 export { useDetailLoader, type DetailLoader } from './useDetailLoader'
+export { default as DetailPane } from './DetailPane.vue'
 export { useAsyncAction, type AsyncAction } from './useAsyncAction'
 export { errorMessage } from './errorMessage'
 export { default as DescriptionList } from './DescriptionList.vue'
 export type { DescriptionItem } from './DescriptionList.vue'
+export { default as NoteActions, suspensionActions, type NoteAction } from './NoteActions.vue'