@greendrake/ui 0.6.0 → 0.8.0

package/README.md

@@ -27,13 +27,14 @@ Read with no fallback, so the app defines them:
 
 | Property | Read by |
 | --- | --- |
-| `--font-color` | text throughout: `AsyncSearch`, `BottomNav`, `Checkbox`, `Gallery`, `Modal`, `Password`, `SearchField`, `TreeView` |
+| `--font-color` | text throughout: `AsyncSearch`, `BottomNav`, `Checkbox`, `ContextMenu`, `Gallery`, `Modal`, `Password`, `SearchField`, `SwitchRow`, `TreeView` |
 | `--background-color` | `AsyncSearch` narrow panel |
-| `--form-background`, `--form-background-hover` | control surfaces: `AsyncSearchResults`, `BottomNav`, `SegmentedControl`, `TabBar`, `ThumbnailGrid`, `TreeView` |
+| `--form-background`, `--form-background-hover` | control surfaces: `AsyncSearchResults`, `BottomNav`, `ContextMenu`, `SegmentedControl`, `TabBar`, `ThumbnailGrid`, `TreeView` |
 | `--input-background` | `Checkbox` box |
-| `--border-color`, `--border-color-light`, `--border-color-hover` | control and container borders |
+| `--border-color`, `--border-color-light`, `--border-color-hover` | control and container borders; `--border-color-light` is also the `SplitPane` handle |
 | `--border-radius` | `AsyncSearch`, `AsyncSearchResults`, `Checkbox`, `ThumbnailGrid` (`FieldTip` falls back to 4px) |
-| `--accent-color` | active and checked states: `BottomNav`, `Checkbox`, `SegmentedControl`, `TabBar`, toasts |
+| `--border-radius-pill` | `SwitchRow` track |
+| `--accent-color` | active and checked states: `BottomNav`, `Checkbox`, `SegmentedControl`, `SwitchRow`, `TabBar`, toasts; the hovered `SplitPane` handle; `TreeView` drop targets |
 | `--space-1` … `--space-5` | spacing |
 | `--font-xs`, `--font-md`, `--font-lg` | `BottomNav` and `ThumbnailGrid` labels, `FieldTip`, `Modal` title |
 | `--line-height-normal` | `Password` |
@@ -53,14 +54,14 @@ Read with a local default:
 | `--bottomnav-height` | `BottomNav` bar height; bottom edge of the `AsyncSearch` narrow panel | none / 0px |
 | `--safe-area-inset-top`, `--safe-area-inset-bottom` | toast layer; `Modal` sheet and `BottomNav` padding | 0px |
 | `--max-content-width` | `TheWrap` width cap | none |
-| `--tippy-background-color` | `FieldTip` validation tips | `#5335e8` |
+| `--tippy-background-color` | `FieldTip` validation tips, `InfoTip` tooltips | `#5335e8` |
 | `--toast-color`, `--toast-background` | toasts | `#fff`; `--accent-color` (`--warning-color` for the warning variant) |
 | `--color-attention-fill`, `--color-attention-contrast` | `BottomNav` badge | `--accent-color` / `#fff` |
 | `--vs-*` | `SelectBox` (see the component) | per property |
 
 Breakpoint: "narrow" is `@greendrake/scss-kit`'s 600px boundary; `Modal`, `TabBar` and `AsyncSearch` switch presentation below it.
 
-Tooltips: `FieldTip`, `MenuButton` and `AsyncSearch` use `vue-tippy`. Each ships the styles of its own tippy theme (`fieldTip`, `HMenu`, `asyncSearchResults`); no global tippy.js stylesheet is loaded or required.
+Tooltips: `FieldTip`, `InfoTip`, `MenuButton`, `ContextMenu` and `AsyncSearch` use `vue-tippy`. Each ships the styles of the tippy theme it uses (`tip` for the first two, `HMenu`, `ContextMenu`, `asyncSearchResults`); no global tippy.js stylesheet is loaded or required.
 
 ## Messages
 
@@ -74,6 +75,8 @@ configureUiMessages({ cancel: 'Abbrechen', nothingFound: 'Nichts gefunden' })
 
 Keys and defaults: `loading` "Loading", `ok`, `cancel`, `close`, `clear`, `tryAgain`, `trying` "Trying...", `retryCountdown` "Error. Retrying in {seconds}" (`{seconds}` is substituted at render time), `toHomePage`, `nothingFound`, `searchResults`, `search`, `create`, `refresh`, `delete`, `deleting`, `newTab`, `copied`, `clickToCopy`, `invalidEmail` "Not a valid email address", `selectOption` "Select an option", `errorOther`, `errorNetwork`, `errorNotFound`.
 
+`configurableMessages(defaults)` is the same arrangement for a package of its own: `{ messages, configure }`, `messages` reactive and starting as `defaults` (`@greendrake/ui-rich`'s toolbar strings are kept this way).
+
 ## Form controls
 
 ### TextField
@@ -123,7 +126,9 @@ Caption + control column. Props: `label`; `group` wraps the slot in a `role="gro
 
 ### FieldTip
 
-`FieldTip(source: Ref<string | false>, target: string | Ref<HTMLElement | ComponentPublicInstance | null>): void` — binds a manually-triggered tippy tooltip (theme `fieldTip`) to an element or element id: setting `source` to a string shows it as text, `false` hides it; user dismissal resets `source` to `false`. Call it from `setup`; it cleans up on unmount.
+`FieldTip(source: Ref<string | false>, target: string | Ref<HTMLElement | ComponentPublicInstance | null>): void` — binds a manually-triggered tippy tooltip (theme `tip`) to an element or element id: setting `source` to a string shows it as text, `false` hides it; user dismissal resets `source` to `false`. Call it from `setup`; it cleans up on unmount.
+
+`<InfoTip text="…" />` — a small "?" button whose `text` shows in a tooltip (theme `tip`) on hover, on focus, and on a tap where there is no hover; its accessible name is `messages.aboutThis`. Place it beside a field's `<label>`, not inside: within one it would become the control the label names.
 
 ### validationScopeKey
 
@@ -203,7 +208,7 @@ const save = async (): Promise<void> => {
 
 ### ModalOnClick
 
-Trigger element plus a `Modal` around the `content` slot. The default slot is the trigger (`tag`, default `'a'`; `id`, `type` and other attributes land on it); `modalClass` goes to the modal. Modal chrome props `title`, `okLabel`, `cancelLabel`, `okDisabled`, `hideOk`, `closable`, `expandable`, `buttons` are forwarded as given, unset ones keeping `Modal`'s defaults. Emits `click(event)` and `open` on trigger, `ok` (re-emitted without closing — an async submitter keeps the modal open on failure and closes via the exposed `onCancel()` on success), `cancel` (closes, then re-emits). Exposes `open(event)`, `onCancel()`.
+Trigger element plus a `Modal` around the `content` slot. The default slot is the trigger (`tag`, default `'a'`; `id`, `type`, `ariaLabel` and other attributes land on it); `modalClass` and `modalTestid` (its `data-testid`) go to the modal. Modal chrome props `title`, `okLabel`, `cancelLabel`, `okDisabled`, `hideOk`, `closable`, `expandable`, `buttons` are forwarded as given, unset ones keeping `Modal`'s defaults. Emits `click(event)` and `open` on trigger, `ok` (re-emitted without closing — an async submitter keeps the modal open on failure and closes via the exposed `onCancel()` on success), `cancel` (closes, then re-emits). Exposes `open(event)`, `onCancel()`.
 
 ### Gallery
 
@@ -213,7 +218,11 @@ Full-screen image viewer in an expanded `Modal`. Props: `items: GalleryItem[]` (
 
 ### MenuButton
 
-Hover/click dropdown built on `vue-tippy`'s `Tippy` (theme `HMenu`, placement `bottom-end`); any click inside the menu closes it. Slots: `main` (trigger), `menuitems` (menu content, wrapped in `.Menubutton-Menu`). Props: `menuClass` (on the wrapper), `boxClass` (on the tippy box, applied once on create), `offset` (default `[0, -1]`), `matchTriggerWidth` (pins the popper width to the trigger's).
+Hover/click dropdown built on `vue-tippy`'s `Tippy` (theme `HMenu`, placement `bottom-end`), appended to `body`, or to the element filling the screen while one does; any click inside the menu closes it. Slots: `main` (trigger), `menuitems` (menu content, wrapped in `.Menubutton-Menu`). Props: `menuClass` (on the wrapper), `boxClass` (on the tippy box, applied once on create), `offset` (default `[0, -1]`), `matchTriggerWidth` (pins the popper width to the trigger's).
+
+### ContextMenu
+
+A menu at the pointer in place of the browser's own, built on `vue-tippy`'s `Tippy` (theme `ContextMenu`), appended to `body`. Prop `items: ContextMenuItem[]` (`{ label, run: () => unknown }`), rendered as `role="menuitem"` buttons. Exposes `open(event: MouseEvent)`: call it from a `contextmenu` listener — it cancels the browser's menu and shows this one at the event's point. Choosing an item closes the menu and runs the item; a press outside the menu, or any key, closes it. Place it inside the element it serves: a press there closes it too.
 
 ### SelectBox
 
@@ -289,6 +298,10 @@ interface BottomNavTab {
 
 Per-tab icons are the app's: style `.BottomNav__icon--<id>` with a `mask-image`. The bar's height is `--bottomnav-height` plus `--safe-area-inset-bottom`.
 
+### SplitPane
+
+Two panes side by side, the start one resized by dragging the handle between them. Props: `initialWidth` (default 150) and `minWidth` (default 100), the start pane's. Slots: `start`, `end`; each pane is a flex column whose children grow to fill it, the start one scrolling its overflow. Without an `end` slot (e.g. a conditional `<template v-if="…" #end>`) the start pane spans the whole width and no handle renders.
+
 ### Splash, Loading
 
 `Splash` centres its default slot (logo) above a `Loading` indicator, covering its positioned ancestor. `Loading` renders `messages.loading` with animated dots.
@@ -297,7 +310,15 @@ Per-tab icons are the app's: style `.BottomNav__icon--<id>` with a `mask-image`.
 
 ### TreeView
 
-Lazy tree rendered as one flat list of visible nodes. Props: `loader: TreeLoader` (required), `idField` (default `'key'`), `labelField` (default `'title'`), `multiSelect` (default `true`). `v-model:selected: TreeNodeId[]`. Children load on first expand and are cached per node. Selection is mouse-driven: click selects, Shift extends a range over the visible list, Ctrl/Cmd toggles.
+Lazy tree rendered as one flat list of visible nodes. Props: `loader: TreeLoader` (required), `idField` (default `'key'`), `labelField` (default `'title'`), `editField` (the field a rename edits; default `labelField`), `multiSelect` (default `true`), `draggable` (default `false`), `onRename?: (node: TreeNodeId, value: string) => Promise<void>`, `onAddChild?: (parent: TreeNodeId, value: string) => Promise<void>`. `v-model:selected: TreeNodeId[]`. Children load on first expand and are cached per node. Selection runs on `useSelection`: click selects, Shift extends a range over the visible list, Ctrl/Cmd toggles; the list is focusable, the arrows move the cursor (Shift extending the range) and Ctrl/Cmd+A selects all. A right-click focuses its row — selected alone unless it is selected already — and emits `contextmenu(event)`; the consumer opens its menu.
+
+A node may have several parents and then shows under each: rows are keyed by their path from the root, while the children cache, expansion and selection stay per node. A node's loaded children decide whether its row expands, over the `expandable` its parent's load carried. The cursor's row is the focused occurrence (`aria-current`).
+
+In-place editing: with `onRename`, double-clicking a label turns it into an input holding the node's `editField`; with `onAddChild`, `addChild()` opens an empty input last under the focused row. Enter hands a changed or non-empty, trimmed value to the callback and closes the input once it resolves — a rejection leaves it open — and Escape or leaving the input drops it. Keys typed there stay in the input.
+
+Exposed: `reload(nodeId | null)` re-fetches a node's children (`null`: the root level), keeping what is expanded; `expand(nodeId)` expands a node wherever it shows, loading its children first; `levelsOf(nodeId)` lists the loaded levels holding a node — the parents it shows under, `null` for the root level — the levels to reload when it changes or goes; `focused` is the focused occurrence while its row is visible, else `null`; `addChild()`, above.
+
+With `draggable`, rows drag onto rows: the upper third of the target row drops before it, the lower third after it, the middle inside it. A row whose path passes through the dragged node — any occurrence of it, or any row under one — is no target. The target row carries `data-drop` (`before` | `inside` | `after`) while hovered; the drop emits `move`, which the consumer carries out and reloads after.
 
 ```ts
 interface TreeNode {
@@ -306,6 +327,14 @@ interface TreeNode {
 }
 type TreeNodeId = string | number
 type TreeLoader = (parentId: TreeNodeId | null) => Promise<TreeNode[]> // null → root level
+interface TreeOccurrence {
+    node: TreeNodeId
+    parent: TreeNodeId | null // null: at the root level
+}
+type TreeMove = { node: TreeNodeId; from: TreeNodeId | null } & (
+    | { position: 'inside'; to: TreeNodeId }
+    | { position: 'before' | 'after'; to: TreeNodeId | null; relativeTo: TreeNodeId }
+)
 ```
 
 ### Accordion
@@ -331,7 +360,16 @@ type ThumbnailGridLoader = (params: ThumbnailGridLoaderParams, loading: Ref<bool
 
 ### useSelection
 
-`useSelection<Id extends string | number>(items: Ref<Record<string, unknown>[]> | ComputedRef<...>, idField: string)` — flat, index-addressable multi-selection over an ordered list. Returns `{ selected: Set<Id> (shallowReactive), getId(index), indexOf(id), addRange(fromId, toId), toggle(id), replace(id), rangeTo(id) (from the anchor set by the last toggle/replace), moveCursor('up' | 'down', extend: boolean): number (returns the new cursor index), selectAll(), clear() }`. `TreeView` uses it.
+`useSelection<Id extends string | number>(items: Ref<Record<string, unknown>[]> | ComputedRef<...>, idField: string, { keyField?: string, multi?: MaybeRefOrGetter<boolean> })` — flat, index-addressable multi-selection over an ordered list. The selection holds ids (`items[i][idField]`); the cursor and the anchor ranges extend from are rows, addressed by `items[i][keyField]` (default `idField`) — distinct when an item shows in several rows, as a tree node under two parents does. Without `multi` (default `true`), every pick and move selects one row. Returns:
+
+- `selected: Set<Id>` (shallowReactive);
+- `cursor: ShallowRef<string | number | null>`: the cursor's row key; setting it moves the cursor alone;
+- `getId(index)`;
+- `replace(key)`: selects the row alone, cursor and anchor on it;
+- `pick(key, event: MouseEvent)`: a pointer's pick — Shift selects the range from the anchor (with no anchor in the list, it toggles), Ctrl/Cmd toggles the row, a plain pick replaces;
+- `onKeyDown(event: KeyboardEvent): number`: Ctrl/Cmd+A selects all; ArrowUp/ArrowDown move the cursor, selecting its row alone, or with Shift the range from the anchor to it. Returns the cursor's new index, for the host to scroll into view, or -1.
+
+`InfiniteScrollTable`, `RowSelect` and `TreeView` run on it.
 
 ### RowSelect
 
@@ -339,6 +377,8 @@ type ThumbnailGridLoader = (params: ThumbnailGridLoaderParams, loading: Ref<bool
 
 ## Misc
 
+- `InfoBlock` — a notice set apart by `--infoblock-line-color` and the `info` glyph; an `actions` slot stacks controls beneath the message.
+- `SwitchRow` — an on/off switch shaped as a row (`v-model`, `label`, `title`): an `<a role="switch">`, so it sits among menu items, its layout the host class's.
 - `CircularProgress` — SVG ring, prop `progress: number` (0–100, clamped), `role="progressbar"`; colours via `--circular-progress-track` / `--circular-progress-arc` / `--circular-progress-label`.
 - `Copy` — click-to-copy icon for `value: string`; `showValue` renders the value beside it; a `copied` class marks success for 2s. Title is `messages.clickToCopy`.
 - `copyTextToClipboard(text: string): Promise<void>` — `navigator.clipboard.writeText`; requires a secure context.
@@ -346,3 +386,5 @@ type ThumbnailGridLoader = (params: ThumbnailGridLoaderParams, loading: Ref<bool
 - `scrollToTop()` — `window.scroll({ top: 0 })`.
 - `focusIn(el: string | HTMLElement | null, selector?: string)` — focuses the element with that id, or the first `selector` match inside `el`, unless it already has focus.
 - `TOUCH_PAN_SLOP_PX` — 10; the travel a touch must cover before it counts as a directional gesture; exported so other gesture-arbitrating components share it.
+- `capturePointer(event: PointerEvent)` — captures the pointer to `event.currentTarget`, so a drag keeps tracking it outside the element; a pointer already released is a no-op.
+- `useWidthDrag(minWidth: MaybeRefOrGetter<number>): WidthDrag` — a width dragged by a handle at its end edge, never below `minWidth`. Returns `{ active, start(event, width, set), move(event), end() }`: wire `start` to the handle's `pointerdown` (it captures the pointer and drags from `width`, handing each new width to `set`), `move` to `pointermove`, `end` to `pointerup` and `pointercancel`; `active` is true while a drag is in progress. `SplitPane` uses it.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@greendrake/ui",
-    "version": "0.6.0",
+    "version": "0.8.0",
     "description": "Vue 3 component library: form controls, modals, search, tabs, toasts, layout",
     "license": "MIT",
     "author": "Eugene Greendrake <eugene@greendrake.nz>",
@@ -33,9 +33,9 @@
     },
     "prettier": "@greendrake/dev-config/prettier",
     "dependencies": {
-        "@greendrake/domains": "0.6.0",
-        "@greendrake/scss-kit": "0.6.0",
-        "@greendrake/util": "0.6.0",
+        "@greendrake/domains": "^0.7.0",
+        "@greendrake/scss-kit": "^0.8.0",
+        "@greendrake/util": "^0.8.0",
         "vue-tippy": "^6.7.1"
     },
     "peerDependencies": {
@@ -43,7 +43,7 @@
         "vue-router": "^4.6.4"
     },
     "devDependencies": {
-        "@greendrake/dev-config": "0.6.0",
+        "@greendrake/dev-config": "0.7.0",
         "typescript": "6.0.3",
         "vue": "^3.5.34",
         "vue-router": "^4.6.4",

package/src/BottomNav.vue

@@ -78,11 +78,11 @@ const emit = defineEmits<{ select: [id: string] }>()
         color: var(--font-color-muted, var(--font-color));
         text-decoration: none;
         // A tab is a link or, when it opens a shell overlay, a button — which
-        // arrives with a UA background, border and font of its own.
+        // arrives with a UA background, border and font of its own, and keeps the
+        // default cursor where the link has the hand.
         background: none;
         border: none;
         font: inherit;
-        cursor: pointer;
         &--active {
             color: var(--accent-color);
             .BottomNav__icon {

package/src/CircularProgress.vue

@@ -8,7 +8,11 @@ const CIRCUMFERENCE = 2 * Math.PI * RADIUS
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps<{ progress: number }>()
+const props = defineProps<{
+    progress: number
+    /** Replaces the default percentage text (e.g. seconds left). */
+    label?: string
+}>()
 
 const clamped = computed(() => Math.max(0, Math.min(100, props.progress)))
 // Full circumference at 0%, zero at 100% — the dash grows clockwise from the
@@ -19,7 +23,7 @@ const dashOffset = computed(() => CIRCUMFERENCE * (1 - clamped.value / 100))
     <svg class="CircularProgress" viewBox="0 0 36 36" role="progressbar" :aria-valuenow="Math.round(clamped)" aria-valuemin="0" aria-valuemax="100">
         <circle class="CircularProgress__track" cx="18" cy="18" :r="RADIUS" />
         <circle class="CircularProgress__arc" cx="18" cy="18" :r="RADIUS" :stroke-dasharray="CIRCUMFERENCE" :stroke-dashoffset="dashOffset" />
-        <text class="CircularProgress__label" x="18" y="18">{{ Math.round(clamped) }}%</text>
+        <text class="CircularProgress__label" x="18" y="18">{{ label ?? `${Math.round(clamped)}%` }}</text>
     </svg>
 </template>
 <style lang="scss">

package/src/ContextMenu.vue

@@ -0,0 +1,77 @@
+<script lang="ts">
+/** A context menu entry: its label, and what choosing it does. */
+export interface ContextMenuItem {
+    label: string
+    run: () => unknown
+}
+
+const appendTo = () => document.body
+</script>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Tippy, type TippyComponent } from 'vue-tippy'
+
+// A menu at the pointer in place of the browser's own: open(event) from a
+// contextmenu listener shows it there. Choosing an item closes it and runs
+// the item; a press outside it, or any key, closes it.
+defineProps<{
+    items: ContextMenuItem[]
+}>()
+
+const tip = ref<TippyComponent>()
+let at = new DOMRect()
+const pointer = (): DOMRect => at
+
+// Any key closes the menu while it shows. Unmounted while it shows, it is
+// destroyed without hiding: that ends the listening too.
+const hide = (): void => tip.value!.hide()
+const listen = (): void => document.addEventListener('keydown', hide)
+const unlisten = (): void => document.removeEventListener('keydown', hide)
+
+function open(e: MouseEvent): void {
+    e.preventDefault()
+    at = new DOMRect(e.clientX, e.clientY, 0, 0)
+    tip.value!.show()
+}
+
+function choose(item: ContextMenuItem): void {
+    hide()
+    item.run()
+}
+
+defineExpose({ open })
+</script>
+<template>
+    <Tippy ref="tip" to="parent" trigger="manual" theme="ContextMenu" role="menu" placement="bottom-start" interactive :append-to="appendTo" :aria="{ content: null, expanded: false }" :arrow="false" :offset="[0, 0]" :duration="0" :get-reference-client-rect="pointer" :on-show="listen" :on-hide="unlisten" :on-destroy="unlisten">
+        <button v-for="item in items" :key="item.label" type="button" role="menuitem" class="ContextMenu__item" @click="choose(item)">{{ item.label }}</button>
+    </Tippy>
+</template>
+<style lang="scss">
+.tippy-box[data-theme~='ContextMenu'] {
+    min-width: 120px;
+    padding: var(--space-1) 0;
+    border: 1px solid var(--border-color-light);
+    background: var(--form-background);
+    .tippy-content {
+        padding: 0;
+    }
+}
+.ContextMenu__item {
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: var(--space-1) var(--space-3);
+    border: none;
+    border-radius: 0;
+    background: none;
+    color: var(--font-color);
+    font: inherit;
+    text-align: start;
+    white-space: nowrap;
+    cursor: default;
+
+    &:hover {
+        background: var(--form-background-hover);
+    }
+}
+</style>

package/src/Copy.vue

@@ -26,7 +26,8 @@ const onClick = async (e: MouseEvent) => {
 </script>
 <template>
     <div class="Copy2Clipboard" :title="messages.clickToCopy" @click="onClick">
-        <span v-if="showValue" class="Copy2Clipboard__value">{{ value }}</span>
+        <!-- The slot renders the value differently from the text copied. -->
+        <span v-if="showValue" class="Copy2Clipboard__value"><slot>{{ value }}</slot></span>
     </div>
 </template>
 <style lang="scss">

package/src/FieldTip.ts

@@ -6,9 +6,9 @@
 /// <reference path="./styles.d.ts" />
 import { watch, onUnmounted, type Ref, type ComponentPublicInstance } from 'vue'
 import { useTippy } from 'vue-tippy'
-// Self-contained box/arrow styling for these tips, scoped to the `fieldTip` theme
-// applied below (the app ships no global tippy.js base stylesheet).
-import './FieldTip.scss'
+// Self-contained box/arrow styling for these tips, scoped to the `tip` theme applied
+// below (the app ships no global tippy.js base stylesheet).
+import './Tip.scss'
 
 type Tooltip = ReturnType<typeof useTippy>
 
@@ -44,7 +44,7 @@ export default (toWatchRef: Ref<string | false>, targetRef: string | Ref<HTMLEle
         } else if (content && el) {
             tooltip = useTippy(el, {
                 content,
-                theme: 'fieldTip',
+                theme: 'tip',
                 trigger: 'manual',
                 interactive: true,
                 showOnCreate: true,

package/src/InfoBlock.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// A notice set apart from the content around it, marked with the info glyph;
+// optional controls (an `actions` slot) stack beneath the message.
+</script>
+<template>
+    <div class="InfoBlock">
+        <slot />
+        <div v-if="$slots.actions" class="InfoBlock__actions">
+            <slot name="actions" />
+        </div>
+    </div>
+</template>
+<style lang="scss">
+@use '@greendrake/scss-kit' as *;
+.InfoBlock {
+    --icon-space-width: 50px;
+    margin-top: var(--space-4);
+    position: relative;
+    padding: var(--space-4) var(--space-4) var(--space-4) var(--icon-space-width);
+    border: 1px solid var(--infoblock-line-color);
+    border-radius: var(--border-radius);
+    line-height: var(--line-height-tight);
+    &::before {
+        content: '';
+        position: absolute;
+        inset-inline-start: 0;
+        top: 0;
+        bottom: 0;
+        width: var(--icon-space-width);
+        mask-size: 24px;
+        mask-position: center 14px;
+        @include icon-base;
+        @include i('info');
+    }
+    // Optional controls (e.g. an escalation note + button) rendered within the
+    // block, separated from the message and stacked left-aligned.
+    &__actions {
+        margin-top: var(--space-3);
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--space-2);
+    }
+}
+</style>

package/src/InfoTip.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// A mark beside something worth explaining: its text shows in a tooltip on hover, on
+// focus, and on a tap where there is no hover. A button, so that a keyboard reaches it;
+// placed beside a field's <label> rather than in it, where it would become the control
+// the label names.
+import { Tippy } from 'vue-tippy'
+import { messages } from './messages'
+import './Tip.scss'
+
+defineProps<{ text: string }>()
+</script>
+<template>
+    <Tippy :content="text" theme="tip" placement="top" trigger="mouseenter focus" class="InfoTip">
+        <button type="button" class="InfoTip__mark" :aria-label="messages.aboutThis">?</button>
+    </Tippy>
+</template>
+<style lang="scss">
+.InfoTip__mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    background: transparent;
+    color: var(--font-color-muted, var(--font-color));
+    font-size: var(--font-xs);
+    line-height: 1;
+    cursor: help;
+}
+</style>

package/src/MenuButton.vue

@@ -8,7 +8,9 @@
 // coordinates as top/left.
 const popperOptions = { modifiers: [{ name: 'computeStyles', options: { gpuAcceleration: false } }] }
 
-const appendTo = () => document.body
+// The body, or the element filling the screen while one does, outside which nothing
+// shows: a menu opened in a fullscreen video player, say. Asked on every show.
+const appendTo = () => document.fullscreenElement ?? document.body
 </script>
 <script setup lang="ts">
 import { computed } from 'vue'

package/src/ModalOnClick.vue

@@ -5,8 +5,13 @@ import Modal from './Modal.vue'
 // Trigger-plus-modal composite: the default slot is the trigger element;
 // clicking it opens the built-in Modal around the `content` slot. The modal
 // chrome props mirror Modal's and are forwarded as-is — undefined falls
-// through to Modal's own defaults; `modalClass` is a distinct prop because
-// class/$attrs on this component land on the trigger element.
+// through to Modal's own defaults; `modalClass` and `modalTestid` are distinct
+// props because class/$attrs on this component land on the trigger element.
+//
+// The modal is nested in the trigger so that the trigger is the single root:
+// only a single root inherits $attrs and the parent's scoped-style id. Modal
+// teleports to body, so neither its DOM nor its clicks end up inside the
+// trigger.
 //
 // `ok` is re-emitted WITHOUT auto-closing: async submitters keep the modal
 // open on failure and close programmatically (exposed onCancel) on success.
@@ -21,7 +26,9 @@ withDefaults(
         // accepts them at call sites.
         id?: string
         type?: string
+        ariaLabel?: string
         modalClass?: string
+        modalTestid?: string
         okLabel?: string
         cancelLabel?: string
         okDisabled?: boolean
@@ -64,10 +71,10 @@ defineExpose({
 })
 </script>
 <template>
-    <Modal v-if="modalOpen" :class="modalClass" :title="title" :ok-label="okLabel" :cancel-label="cancelLabel" :ok-disabled="okDisabled" :hide-ok="hideOk" :closable="closable" :expandable="expandable" :buttons="buttons" @ok="emit('ok')" @cancel="onModalCancel">
-        <slot name="content" />
-    </Modal>
-    <component :is="tag" :id="id" :type="type" href="#" v-bind="$attrs" @click.prevent="onClick">
+    <component :is="tag" :id="id" :type="type" :aria-label="ariaLabel" href="#" @click.prevent="onClick">
         <slot />
+        <Modal v-if="modalOpen" :class="modalClass" :data-testid="modalTestid" :title="title" :ok-label="okLabel" :cancel-label="cancelLabel" :ok-disabled="okDisabled" :hide-ok="hideOk" :closable="closable" :expandable="expandable" :buttons="buttons" @ok="emit('ok')" @cancel="onModalCancel">
+            <slot name="content" />
+        </Modal>
     </component>
 </template>

package/src/RowSelect.ts

@@ -155,19 +155,11 @@ export default function RowSelect<Id extends string | number>(items: Ref<Record<
         const rowIndex = hitIndex(target)
         const id = rowIndex >= 0 ? getId(rowIndex) : null
 
-        if (id !== null && e.shiftKey) {
-            sel.rangeTo(id)
-            return
-        }
-
         preClickSnapshot = new Set(selected)
-
         if (id !== null) {
-            if (e.ctrlKey || e.metaKey) {
-                sel.toggle(id)
-            } else {
-                sel.replace(id)
-            }
+            sel.pick(id, e)
+            // A Shift pick extends the selection only: no drag follows.
+            if (e.shiftKey) return
         }
 
         startX = e.clientX
@@ -181,21 +173,6 @@ export default function RowSelect<Id extends string | number>(items: Ref<Record<
         }
     }
 
-    function onKeyDown(e: KeyboardEvent): void {
-        if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
-            e.preventDefault()
-            sel.selectAll()
-            return
-        }
-
-        const isUp = e.key === 'ArrowUp'
-        const isDown = e.key === 'ArrowDown'
-        if (!isUp && !isDown) return
-
-        e.preventDefault()
-        sel.moveCursor(isUp ? 'up' : 'down', e.shiftKey)
-    }
-
     onUnmounted(() => {
         if (cleanupDrag) cleanupDrag()
     })
@@ -206,6 +183,6 @@ export default function RowSelect<Id extends string | number>(items: Ref<Record<
         band,
         reorder,
         onPointerDown,
-        onKeyDown
+        onKeyDown: sel.onKeyDown
     }
 }

package/src/SplitPane.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+// Two panes side by side, the start one resized by dragging the handle between
+// them. Without an `end` slot the start pane spans the whole width alone.
+import { ref } from 'vue'
+import useWidthDrag from './useWidthDrag'
+
+const props = withDefaults(
+    defineProps<{
+        initialWidth?: number
+        minWidth?: number
+    }>(),
+    {
+        initialWidth: 150,
+        minWidth: 100
+    }
+)
+
+const width = ref(props.initialWidth)
+const { active: resizing, start, move, end } = useWidthDrag(() => props.minWidth)
+</script>
+<template>
+    <div class="SplitPane" :class="{ 'SplitPane--resizing': resizing }">
+        <div class="SplitPane__start" :style="$slots.end ? { width: width + 'px' } : { flex: '1 1 0', width: 0 }">
+            <slot name="start"></slot>
+        </div>
+        <template v-if="$slots.end">
+            <div class="SplitPane__handle" @pointerdown="start($event, width, w => (width = w))" @pointermove="move" @pointerup="end" @pointercancel="end"></div>
+            <div class="SplitPane__end">
+                <slot name="end"></slot>
+            </div>
+        </template>
+    </div>
+</template>
+<style lang="scss">
+@use '@greendrake/scss-kit' as *;
+
+.SplitPane {
+    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
+    // panes' overflow has nothing to scroll within.
+    min-height: 0;
+
+    &--resizing {
+        @include dragging(col-resize);
+    }
+
+    &__start,
+    &__end {
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+
+        > * {
+            flex-grow: 1;
+            min-height: 0;
+        }
+    }
+
+    &__start {
+        flex-shrink: 0;
+        min-width: v-bind('minWidth + "px"');
+        overflow: auto;
+    }
+
+    &__handle {
+        width: 4px;
+        flex-shrink: 0;
+        cursor: col-resize;
+        // The drag is handled via pointer events; without this the browser
+        // claims touch drags for panning and cancels them.
+        touch-action: none;
+        background-color: var(--border-color-light);
+        &:hover {
+            background-color: var(--accent-color);
+        }
+    }
+
+    &__end {
+        flex-grow: 1;
+        min-width: 0;
+    }
+}
+</style>