@tensor_1/react 2.48.0 → 2.49.0

package/README.md

@@ -192,7 +192,7 @@ Rules the component cannot enforce for you:
 - **Dimming is not a signal.** `dimmedNodeIds` must be accompanied by text that says what is dimmed and why.
 - **Localise everything.** Every visible and announced string comes from `labels`; the English defaults live in `DEFAULT_RELATIONSHIP_GRAPH_LABELS`.
 
-**Map controls (`controls`, `initialView`).** The default `controls="full"` is the labelled toolbar above the map. `controls="compact"` is the map convention: an icon cluster in the map's bottom-right corner (zoom in, zoom out, fit, reset, full screen, each with a tooltip) and the zoom level beside it; drag pans, Ctrl/⌘ + wheel or a pinch zooms around the pointer, and a plain wheel keeps scrolling the page and briefly says how to zoom. The map itself takes keyboard focus: arrow keys pan (on an item they still move between items), `+` and `−` zoom, `0` resets and Escape leaves full screen. Full screen covers the page (the page behind does not scroll) and there a plain wheel zooms. `controls="none"` draws nothing; drag, pinch and Ctrl/⌘ + wheel still work. `initialView="fit"` opens with every item in view (down to the 40 % minimum) instead of the 75 % readability floor, and Reset returns to it.
+**Map controls (`controls`, `initialView`).** The default `controls="full"` is the labelled toolbar above the map. `controls="compact"` is the map convention: an icon cluster in the map's bottom-right corner (zoom in, zoom out, fit, reset, full screen, each with a tooltip) and the zoom level beside it; drag pans, Ctrl/⌘ + wheel or a pinch zooms around the pointer, and a plain wheel keeps scrolling the page and briefly says how to zoom. The map itself takes keyboard focus: arrow keys pan (on an item they still move between items), `+` and `−` zoom, `0` resets and Escape leaves full screen. Full screen covers the page (the page behind does not scroll) and there a plain wheel zooms. `controls="none"` draws nothing; drag, pinch and Ctrl/⌘ + wheel still work. `initialView="fit"` opens with every item in view (down to the 40 % minimum) instead of the 75 % readability floor, and Reset returns to it. With `controls="compact"` the hint, the zoom level and the cluster sit in a band along the map's bottom edge; the map ends at the band, and fit, the first view and Reset leave its height free.
 
 ```tsx
 <RelationshipGraph layout="layered" controls="compact" initialView="fit" height="clamp(24rem, 62vh, 44rem)" … />
@@ -285,6 +285,69 @@ const star = useOptimisticValue(view.starred, (next) => api.star(view.id, next),
 </ChangeHighlight>
 ```
 
+### Lists that move, the success outcome, sliding indicators (motion standard §2.5, §2.8)
+
+- **`MotionList`** (`items`, `getKey`, `renderItem`, `as`): a new item rises 8 px and fades in;
+  a removed item stays in place (hidden from assistive tech, `inert`), fades out, and only then
+  leaves, so the items below glide up; a re-sort glides (FLIP, transform only). Nothing moves on
+  the first render. Focus stays on a moved item and goes to the next item when the focused one
+  leaves; focus outside the list is never pulled in. `renderItem` must pass unknown props to its
+  element (`<li>`, or a `Tr` with `as="tbody"`).
+- **`useDeferredReorder(items, getKey)`**: never re-sort under the pointer. While a mouse is over
+  the list or keyboard focus is inside it, a new order waits (content still updates, new rows go
+  to the end); `held` says so; the order applies when they leave. Spread `listProps` on the list.
+- **`SuccessState`** in `States`: the outcome of a rare journey (a request submitted): a mark
+  that draws once, the title (focused on mount for `page` and `full-page`), `reference`,
+  `next` (what happens next), `action`. Reduced motion shows the mark at once.
+- **Tabs, Segmented**: the line underline, the pill and the lifted segment slide to the chosen
+  option on a click (160 ms); a keyboard change and reduced motion jump. Server HTML, forced
+  colours and Segmented's link mode keep each option's own mark. `useSlidingIndicator` is the
+  hook behind it.
+- **CollapsibleSection** opening fades the body in and settles it 4 px (on `::details-content`,
+  where supported); an already open section, a keyboard open and closing are instant.
+
+```tsx
+const queue = useDeferredReorder(rows, (row) => row.id);
+<MotionList {...queue.listProps} as="tbody" items={queue.items} getKey={(row) => row.id}
+  renderItem={(row) => <Tr>…</Tr>} />
+
+<SuccessState title={t('requestSubmitted')} reference={<>{req.number} <CopyButton … /></>}
+  next={[t('confirmationSent'), t('agentPicksUp')]} action={<ButtonLink href={`/requests/${req.id}`}>{t('viewRequest')}</ButtonLink>} />
+```
+
+### Drag affordances (motion standard §2.8)
+
+One set of drag states for every draggable thing (`drag.css`), as attributes so any element can
+carry them: `[data-uix-drag="lifted"]` (picked up by the pointer: a little larger, a deeper
+shadow), `[data-uix-drag="grabbed"]` (picked up from the keyboard: a dashed ring, no motion),
+`[data-uix-drop-target]` (the zone it would land in), `.uix-drop-line` (the gap it would drop
+into) and `[data-uix-settle]` (the landing). Reduced motion keeps the states and drops the scale
+and the landing.
+
+- **SortableList** and **DashboardCanvas** lift and settle on their own.
+- **Kanban**: `KanbanCard dragging`, `KanbanColumn dropTarget`, `<KanbanDropLine />` at the gap;
+  call `settleDrop(cardElement)` once the card is in its new place.
+- **`useKeyboardGrab({ id, label, onMove, onDrop, onCancel, labels })`** for a draggable thing you
+  build: Space or Enter picks the focused item up, the arrows call `onMove(direction)` (return
+  what to say, e.g. "Position 3 of 8"), Space or Enter drops, Escape or leaving puts it back;
+  every step is said politely. Spread `itemProps` (it includes a `ref`) on the focusable item; the
+  picked-up state follows `id`, so an item moved into another list stays picked up and focused.
+  Words: `labels` or `UixLabelsProvider` `keyboardGrab`. The kit's lists have their own paths.
+
+```tsx
+<KanbanColumn title={t('doing')} dropTarget={drag?.column === 'doing'}>
+  {cards.map((card, i) => <Fragment key={card.id}>
+    {drag?.column === 'doing' && drag.index === i && <KanbanDropLine />}
+    <KanbanCard title={card.title} dragging={drag?.id === card.id} onMove={…} />
+  </Fragment>)}
+  {drag?.column === 'doing' && drag.index >= cards.length && <KanbanDropLine />}
+</KanbanColumn>
+
+// your own draggable list: the picked-up state follows the id, across lists too
+const grab = useKeyboardGrab({ id: item.id, label: item.title, onMove: (dir) => move(item.id, dir), onCancel: restore });
+<li tabIndex={0} {...grab.itemProps}>{item.title}</li>
+```
+
 ### Scrolling tabs, toned stat tiles and copying
 
 - **`Tabs overflow="scroll"`** keeps a long tab row on one line that scrolls sideways. The selected tab is always scrolled into view, and edge buttons appear only on the side that has hidden tabs. The buttons are pointer-only: keyboard users move with Arrow, Home and End. Combine it with `TabPanel keepMounted` on a record page with many sections.
@@ -1041,6 +1104,9 @@ const v = useVirtualRows(rows, { rowHeight: 44, estimatedViewportHeight: 600, en
 - The ref is the body (the button, link or span that carries the chip's action), also on a
   removable chip; `bodyProps` puts attributes there.
 - `current` on a link chip: `aria-current="page"` and the filled look.
+- `onClick` gets the click event, so a chip can be a `Menu` trigger:
+  `<Menu trigger={<Chip variant="add" icon={<PlusIcon />}>Filter</Chip>}>…</Menu>`. A handler that takes no
+  argument still works.
 
 #### FileUpload and Attachment
 
@@ -1591,6 +1657,9 @@ const [nav, setNav] = useState<ShellNav>('full');
 
 - `Sidebar actions` sit beside the brand (hidden in the rail); `search` is a row that opens your search and shows
   its keys (it does not bind them: your command palette listens); `footer` is pinned to the bottom.
+- Key caps are for a keyboard: on a touch phone or tablet (`(hover: none) and (pointer: coarse)`) the kit draws
+  none, in the search row, Menu and CommandPalette rows, Tooltips, SearchSuggest and a Button's hint. What a
+  screen reader hears is unchanged (`aria-keyshortcuts`, the spoken keys and descriptions stay).
 - `AccountMenu`: avatar (photo, your node, or initials), name and a second line as a `Menu` trigger;
   `collapsed` in the rail.
 - `navHotkey` switches full ↔ rail instantly, never while typing; `navTierStorageKey` remembers the tier before

package/dist/components/Chip.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, MouseEvent } from 'react';
 import { UixRenderLink } from '../link.js';
 
 interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
@@ -11,8 +11,12 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
     /** Toggle chip: `aria-pressed`, filled while on. Pair with `onPressedChange`. */
     pressed?: boolean;
     onPressedChange?: (pressed: boolean) => void;
-    /** A chip that acts in place (e.g. opens the filter it shows for editing). */
-    onClick?: () => void;
+    /**
+     * A chip that acts in place (e.g. opens the filter it shows for editing). Gets the click event,
+     * so a chip can be the `trigger` of a `Menu` (which reads `defaultPrevented`); a handler that
+     * takes no argument still works. Not called while `disabled`.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     /** A link chip. */
     href?: string;
     renderLink?: UixRenderLink;

package/dist/components/Chip.js

@@ -30,10 +30,10 @@ const Chip = forwardRef(function Chip2({
     /* @__PURE__ */ jsx("span", { className: "uix-chip__label", children }),
     count != null && /* @__PURE__ */ jsx("span", { className: "uix-chip__count", children: count })
   ] });
-  const handleClick = () => {
+  const handleClick = (event) => {
     if (disabled) return;
     if (toggle) onPressedChange?.(!pressed);
-    onClick?.();
+    onClick?.(event);
   };
   const outer = cx(
     "uix-chip",

package/dist/components/DashboardCanvas.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { settleDrop } from "../hooks/useKeyboardGrab.js";
 import { fillLabel } from "../fill-label.js";
 import { GripVerticalIcon, Maximize2Icon } from "../icons/components.js";
 import {
@@ -58,12 +59,25 @@ function DashboardCanvas({
   const live = useRef({ layout, onLayoutChange, labels, itemLabel });
   live.current = { layout, onLayoutChange, labels, itemLabel };
   useEffect(() => () => dragRef.current?.stop(), []);
+  const settle = useRef(null);
+  useEffect(() => {
+    const pending = settle.current;
+    if (!pending || preview) return;
+    const item = layout.find((entry) => entry.id === pending.id);
+    if (!item || item.col !== pending.col || item.row !== pending.row) {
+      if (layout !== pending.layout) settle.current = null;
+      return;
+    }
+    settle.current = null;
+    settleDrop(Array.from(gridRef.current?.children ?? []).find((el) => el.dataset.canvasId === pending.id));
+  });
   const describe = (item, kind) => kind === "move" ? fillLabel(labels.moved, { label: itemLabel(item), col: item.col + 1, row: item.row + 1 }) : fillLabel(labels.resized, { label: itemLabel(item), w: item.w, h: item.h });
   const commit = (id, placement, kind, source) => {
     const state = live.current;
     const next = placeCanvasItem(state.layout, id, placement);
     const placed = next.find((item) => item.id === id);
     if (!placed) return;
+    if (source === "pointer" && kind === "move") settle.current = { id, col: placed.col, row: placed.row, layout: state.layout };
     state.onLayoutChange?.(next, { id, kind, source });
     setAnnouncement(describe(placed, kind));
   };

package/dist/components/DataWorkspace.js

@@ -367,10 +367,7 @@ function FilterChips({ filters, labels, baseId }) {
         children: /* @__PURE__ */ jsx(ChipSummary, { field, value: filters.values[field.id], options: filters.summary })
       }
     ) }, field.id)),
-    unset.length > 0 && /* @__PURE__ */ jsx("span", { ref: addRef, children: /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsxs("button", { type: "button", className: "uix-chip uix-chip--add", children: [
-      /* @__PURE__ */ jsx("span", { className: "uix-chip__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(PlusIcon, {}) }),
-      /* @__PURE__ */ jsx("span", { className: "uix-chip__label", children: labels.addFilter })
-    ] }), children: unset.map((field) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => edit(field, addRef.current), children: field.label }, field.id)) }) }),
+    unset.length > 0 && /* @__PURE__ */ jsx("span", { ref: addRef, children: /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(Chip, { variant: "add", icon: /* @__PURE__ */ jsx(PlusIcon, {}), children: labels.addFilter }), children: unset.map((field) => /* @__PURE__ */ jsx(MenuItem, { onSelect: () => edit(field, addRef.current), children: field.label }, field.id)) }) }),
     set.length > 0 && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "link", onClick: () => {
       for (const f of set) filters.onChange(f.id, void 0);
     }, children: labels.clearFilters }),

package/dist/components/FocusOnMount.d.ts

@@ -0,0 +1,282 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+/**
+ * A heading (or any element) that takes focus once, when it mounts — so a page that replaces
+ * a form with its outcome (SuccessState) reads the outcome first. `tabIndex={-1}`: focusable
+ * by script, not a tab stop. The client half of server-renderable states.
+ */
+declare function FocusOnMount({ as, enabled, children, ...props }: {
+    as: keyof HTMLElementTagNameMap;
+    enabled?: boolean;
+    children?: ReactNode;
+} & HTMLAttributes<HTMLElement>): react.DetailedReactHTMLElement<{
+    ref: react.RefObject<HTMLElement>;
+    tabIndex: number;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    style?: react.CSSProperties | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: react.AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCopyCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCut?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCutCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPaste?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onPasteCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
+    onCompositionEnd?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionEndCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStart?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionStartCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdate?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
+    onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
+    onFocusCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
+    onBlurCapture?: react.FocusEventHandler<HTMLElement> | undefined;
+    onChange?: react.FormEventHandler<HTMLElement> | undefined;
+    onChangeCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onBeforeInput?: react.InputEventHandler<HTMLElement> | undefined;
+    onBeforeInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onInput?: react.FormEventHandler<HTMLElement> | undefined;
+    onInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onReset?: react.FormEventHandler<HTMLElement> | undefined;
+    onResetCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onSubmit?: react.FormEventHandler<HTMLElement> | undefined;
+    onSubmitCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onInvalid?: react.FormEventHandler<HTMLElement> | undefined;
+    onInvalidCapture?: react.FormEventHandler<HTMLElement> | undefined;
+    onLoad?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onError?: react.ReactEventHandler<HTMLElement> | undefined;
+    onErrorCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyDownCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPress?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyPressCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUp?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onKeyUpCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
+    onAbort?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAbortCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThrough?: react.ReactEventHandler<HTMLElement> | undefined;
+    onCanPlayThroughCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onDurationChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptied?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEmptiedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncrypted?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEncryptedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEnded?: react.ReactEventHandler<HTMLElement> | undefined;
+    onEndedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedData?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedDataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadata?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadedMetadataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStart?: react.ReactEventHandler<HTMLElement> | undefined;
+    onLoadStartCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPause?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPauseCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlay?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlaying?: react.ReactEventHandler<HTMLElement> | undefined;
+    onPlayingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgress?: react.ReactEventHandler<HTMLElement> | undefined;
+    onProgressCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onRateChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeked?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeeking?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSeekingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalled?: react.ReactEventHandler<HTMLElement> | undefined;
+    onStalledCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspend?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSuspendCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdate?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTimeUpdateCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChange?: react.ReactEventHandler<HTMLElement> | undefined;
+    onVolumeChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaiting?: react.ReactEventHandler<HTMLElement> | undefined;
+    onWaitingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onAuxClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onAuxClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenu?: react.MouseEventHandler<HTMLElement> | undefined;
+    onContextMenuCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClick?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDoubleClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onDrag?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnd?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEndCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnter?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragEnterCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExit?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragExitCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeave?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragLeaveCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOver?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragOverCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStart?: react.DragEventHandler<HTMLElement> | undefined;
+    onDragStartCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onDrop?: react.DragEventHandler<HTMLElement> | undefined;
+    onDropCapture?: react.DragEventHandler<HTMLElement> | undefined;
+    onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseDownCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseEnter?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseLeave?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMove?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseMoveCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOutCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOver?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseOverCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
+    onMouseUpCapture?: react.MouseEventHandler<HTMLElement> | undefined;
+    onSelect?: react.ReactEventHandler<HTMLElement> | undefined;
+    onSelectCapture?: react.ReactEventHandler<HTMLElement> | undefined;
+    onTouchCancel?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchCancelCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEnd?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchEndCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMove?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchMoveCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStart?: react.TouchEventHandler<HTMLElement> | undefined;
+    onTouchStartCapture?: react.TouchEventHandler<HTMLElement> | undefined;
+    onPointerDown?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerDownCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMove?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerMoveCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUp?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerUpCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancel?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerCancelCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerEnter?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerLeave?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOver?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOverCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOut?: react.PointerEventHandler<HTMLElement> | undefined;
+    onPointerOutCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
+    onScroll?: react.UIEventHandler<HTMLElement> | undefined;
+    onScrollCapture?: react.UIEventHandler<HTMLElement> | undefined;
+    onWheel?: react.WheelEventHandler<HTMLElement> | undefined;
+    onWheelCapture?: react.WheelEventHandler<HTMLElement> | undefined;
+    onAnimationStart?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationStartCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEnd?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationEndCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIteration?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onAnimationIterationCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
+    onTransitionEnd?: react.TransitionEventHandler<HTMLElement> | undefined;
+    onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
+}, HTMLElement>;
+
+export { FocusOnMount };

package/dist/components/FocusOnMount.js

@@ -0,0 +1,12 @@
+"use client";
+import { createElement, useEffect, useRef } from "react";
+function FocusOnMount({ as, enabled = true, children, ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (enabled) ref.current?.focus({ preventScroll: false });
+  }, [enabled]);
+  return createElement(as, { ...props, ref, tabIndex: -1 }, children);
+}
+export {
+  FocusOnMount
+};

package/dist/components/Kanban.d.ts

@@ -13,9 +13,11 @@ declare function Kanban({ announcement, children, className, ...props }: KanbanP
 interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     count?: number;
+    /** A dragged card would land in this column: the column body is tinted and outlined (HAR-2590). */
+    dropTarget?: boolean;
     children?: ReactNode;
 }
-declare function KanbanColumn({ title, count, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
+declare function KanbanColumn({ title, count, dropTarget, children, className, ...props }: KanbanColumnProps): react.JSX.Element;
 type KanbanMoveDirection = 'up' | 'down' | 'left' | 'right';
 interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
@@ -26,8 +28,17 @@ interface KanbanCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
      * the board-level `announcement` so SR users hear the result.
      */
     onMove?: (dir: KanbanMoveDirection) => void;
+    /** The card is being dragged with the pointer: it lifts (HAR-2590). Call `settleDrop(card)` when it lands. */
+    dragging?: boolean;
     children?: ReactNode;
 }
-declare function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }: KanbanCardProps): react.JSX.Element;
+declare function KanbanCard({ title, meta, children, className, onMove, onKeyDown, dragging, ...props }: KanbanCardProps): react.JSX.Element;
+type KanbanDropLineProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * Where a dragged card would land between two cards (HAR-2590): an accent line with an end mark.
+ * Render it in the column at the insertion point while a drag is over it (also after the last
+ * card); it is decorative (the keyboard path and the board's `announcement` say where it goes).
+ */
+declare function KanbanDropLine({ className, ...props }: KanbanDropLineProps): react.JSX.Element;
 
-export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanMoveDirection, type KanbanProps };
+export { Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, KanbanDropLine, type KanbanDropLineProps, type KanbanMoveDirection, type KanbanProps };

package/dist/components/Kanban.js

@@ -8,7 +8,7 @@ function Kanban({ announcement, children, className, ...props }) {
     children
   ] });
 }
-function KanbanColumn({ title, count, children, className, ...props }) {
+function KanbanColumn({ title, count, dropTarget, children, className, ...props }) {
   const headId = useId();
   const hasHead = title != null || count != null;
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-kanban__col", className), ...props, children: [
@@ -16,7 +16,7 @@ function KanbanColumn({ title, count, children, className, ...props }) {
       title,
       count != null && /* @__PURE__ */ jsx("span", { className: "uix-kanban__count", children: count })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, children })
+    /* @__PURE__ */ jsx("div", { className: "uix-kanban__body", role: "list", "aria-labelledby": hasHead ? headId : void 0, "data-uix-drop-target": dropTarget || void 0, children })
   ] });
 }
 const MOVE_KEYS = {
@@ -25,7 +25,7 @@ const MOVE_KEYS = {
   ArrowLeft: "left",
   ArrowRight: "right"
 };
-function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...props }) {
+function KanbanCard({ title, meta, children, className, onMove, onKeyDown, dragging, ...props }) {
   const handleKeyDown = (e) => {
     onKeyDown?.(e);
     if (!onMove || !e.altKey || e.defaultPrevented) return;
@@ -42,6 +42,7 @@ function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...pr
       tabIndex: 0,
       className: cx("uix-kanban__card", className),
       onKeyDown: handleKeyDown,
+      "data-uix-drag": dragging ? "lifted" : void 0,
       ...props,
       children: [
         title && /* @__PURE__ */ jsx("div", { className: "uix-kanban__card-title", children: title }),
@@ -51,8 +52,12 @@ function KanbanCard({ title, meta, children, className, onMove, onKeyDown, ...pr
     }
   );
 }
+function KanbanDropLine({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cx("uix-drop-line", className), "aria-hidden": "true" });
+}
 export {
   Kanban,
   KanbanCard,
-  KanbanColumn
+  KanbanColumn,
+  KanbanDropLine
 };