@tensor_1/react 2.47.0 → 2.49.0

package/dist/relationship-graph-model.d.ts

@@ -1,8 +1,15 @@
+/**
+ * A colour that a node or an edge shares with a legend item (HAR-1639). Colour is never the only
+ * signal: say the same thing in the node's text, the edge's `description` or its `variant`.
+ */
+type RelationshipGraphTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent';
 interface RelationshipGraphNode {
     id: string;
     label: string;
     type?: string;
     description?: string;
+    /** Layered layout: the node's border and edge mark take this tone (HAR-1639). */
+    tone?: RelationshipGraphTone;
     x?: number;
     y?: number;
     /** Layered layout: the node's column. Omitted → BFS distance from the root along source→target. */
@@ -20,6 +27,18 @@ interface RelationshipGraphEdge {
     arrow?: RelationshipGraphArrow;
     /** Layered layout: always draw this edge's label, whatever the label policy. */
     emphasis?: boolean;
+    /**
+     * `dashed` draws the line dashed, e.g. an expected relation that is missing (HAR-1639). Default
+     * `solid`; a lateral or cycle edge is dashed either way.
+     */
+    variant?: 'solid' | 'dashed';
+    /** The line and arrowhead take this tone (HAR-1639). */
+    tone?: RelationshipGraphTone;
+    /**
+     * Said to assistive technology with the relationship, on both nodes it joins, e.g. "expected,
+     * missing" (HAR-1639). The drawn line itself is decoration; the nodes carry the relationship.
+     */
+    description?: string;
 }
 interface PositionedRelationshipNode extends RelationshipGraphNode {
     x: number;
@@ -35,7 +54,12 @@ declare function boundRelationshipGraph(nodes: RelationshipGraphNode[], edges: R
 declare function relationshipNeighbors(nodeId: string, edges: RelationshipGraphEdge[]): string[];
 declare function layoutRelationshipGraph(nodes: RelationshipGraphNode[], edges: RelationshipGraphEdge[], rootId?: string): PositionedRelationshipNode[];
 declare function traverseRelationshipNode(nodes: RelationshipGraphNode[], currentId: string | undefined, direction: -1 | 1): string | undefined;
-type LayeredEdgeKind = 'forward' | 'lateral' | 'cycle';
+/**
+ * `forward` steps one column right; `skip` goes right across more than one column; `lateral`
+ * stays in its column; `back` goes left without closing a loop; `cycle` goes left and closes one
+ * (HAR-1639: only a cycle is flagged as one, and only lateral and cycle edges are dashed).
+ */
+type LayeredEdgeKind = 'forward' | 'skip' | 'lateral' | 'back' | 'cycle';
 interface LayeredLayoutOptions {
     rootId?: string;
     /** Minimum sibling group size that collapses into a cluster. Default 6; 0 disables. */
@@ -70,7 +94,7 @@ interface LayeredItem {
     children: string[];
     /** Set on the first member of an expanded cluster: the group its collapse control belongs to. */
     expandedGroup?: RelationshipGraphCluster;
-    /** True when a lateral or cycle edge touches this node. */
+    /** True when a cycle edge touches this node (HAR-1639: no longer set by skip, lateral or back edges). */
     inCycle: boolean;
     /** Edges (any kind) touching this item. */
     degree: number;
@@ -87,6 +111,10 @@ interface RoutedEdge {
     label?: string;
     arrow: RelationshipGraphArrow;
     emphasis: boolean;
+    /** The first underlying edge's `variant`, `tone` and `description`. */
+    variant: 'solid' | 'dashed';
+    tone?: RelationshipGraphTone;
+    description?: string;
     path: string;
     labelX: number;
     labelY: number;
@@ -96,14 +124,32 @@ interface RoutedEdge {
     arrowAngle: number;
     /** Label policy `auto` shows this label without interaction. */
     autoLabel: boolean;
+    /**
+     * The label is said once by the target column's header (`LayeredColumn.edgeLabel`), so the
+     * edge itself never draws it under `edgeLabels="auto"` (HAR-1387: 197 of 200 labels on a
+     * 300-node map read "depends on").
+     */
+    columnLabel: boolean;
+    /**
+     * One of a busy node's forward edges, drawn as a bus: along a shared trunk in the column gap
+     * and a short stub into the target, so a fan-out reads as one line, not a black fan (HAR-1387).
+     */
+    bus: boolean;
     /** The label wrapped to fit the column gap (at most two lines). */
     labelLines: string[];
+    /** The widest chip the label may take at its place (map units): the column gap, or a bus stub. */
+    labelRoom: number;
 }
 interface LayeredColumn {
     depth: number;
     x: number;
     /** Underlying nodes in the column, cluster members included. */
     count: number;
+    /**
+     * The relation most forward edges into this column share, when the column takes more than a
+     * few of them: the header says it once and those edges draw no label (HAR-1387).
+     */
+    edgeLabel?: string;
 }
 interface LayeredLayout {
     rootId: string | undefined;
@@ -135,8 +181,51 @@ declare function classifyLayeredEdges(nodes: RelationshipGraphNode[], edges: Rel
 declare function clusterIdFor(parentId: string, type: string | undefined, edgeType: string | undefined): string;
 /** Layered, clustered, crossing-reduced layout for `RelationshipGraph layout="layered"`. */
 declare function layoutLayeredGraph(nodes: RelationshipGraphNode[], edges: RelationshipGraphEdge[], options?: LayeredLayoutOptions): LayeredLayout;
+/** An edge label's box on the stage, for `separateEdgeLabels`. */
+interface EdgeLabelBox {
+    id: string;
+    /** Centre of the label. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    /** Placed first when labels compete for room (a toned, emphasised or one-of-a-kind label). */
+    priority?: number;
+}
+/** A box an edge label must not cover (a node), by its top-left corner. */
+interface LabelObstacle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Where a label is drawn after `separateEdgeLabels`, or that it is left out. */
+interface PlacedEdgeLabel {
+    x: number;
+    y: number;
+    hidden: boolean;
+}
+/** The chip a wrapped edge label takes, from its lines (the meta type size, as `wrapEdgeLabel` assumes). */
+declare function edgeLabelSize(lines: readonly string[]): {
+    width: number;
+    height: number;
+};
+/**
+ * Moves edge labels apart where they would be drawn over each other (HAR-1639: two labels on top
+ * of each other in a dense layered column). Labels are taken top to bottom; one that overlaps a
+ * label already placed moves down just below it. A label that would have to move further than
+ * `maxShift` from its edge is left out instead (the relationship is still in the nodes'
+ * descriptions and in the list), and so is one that would cover an `obstacle` (a node). Labels with
+ * a higher `priority` are placed first, so a repeated relation gives way to a one-of-a-kind or
+ * toned one. Deterministic: the same boxes give the same placement.
+ */
+declare function separateEdgeLabels(boxes: readonly EdgeLabelBox[], options?: {
+    gap?: number;
+    maxShift?: number;
+    obstacles?: readonly LabelObstacle[];
+}): Map<string, PlacedEdgeLabel>;
 type LayeredNavigationKey = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End';
 /** Keyboard traversal over a layered layout: ←/→ along forward edges, ↑/↓ within a column. */
 declare function layeredNeighbor(layout: LayeredLayout, currentId: string | undefined, key: LayeredNavigationKey): string | undefined;
 
-export { type BoundedRelationshipGraph, type LayeredColumn, type LayeredEdgeClassification, type LayeredEdgeKind, type LayeredItem, type LayeredLayout, type LayeredLayoutOptions, type LayeredNavigationKey, type PositionedRelationshipNode, type RelationshipGraphArrow, type RelationshipGraphCluster, type RelationshipGraphEdge, type RelationshipGraphNode, type RoutedEdge, boundRelationshipGraph, classifyLayeredEdges, clusterIdFor, layeredNeighbor, layoutLayeredGraph, layoutRelationshipGraph, relationshipNeighbors, traverseRelationshipNode, wrapEdgeLabel };
+export { type BoundedRelationshipGraph, type EdgeLabelBox, type LabelObstacle, type LayeredColumn, type LayeredEdgeClassification, type LayeredEdgeKind, type LayeredItem, type LayeredLayout, type LayeredLayoutOptions, type LayeredNavigationKey, type PlacedEdgeLabel, type PositionedRelationshipNode, type RelationshipGraphArrow, type RelationshipGraphCluster, type RelationshipGraphEdge, type RelationshipGraphNode, type RelationshipGraphTone, type RoutedEdge, boundRelationshipGraph, classifyLayeredEdges, clusterIdFor, edgeLabelSize, layeredNeighbor, layoutLayeredGraph, layoutRelationshipGraph, relationshipNeighbors, separateEdgeLabels, traverseRelationshipNode, wrapEdgeLabel };

package/dist/relationship-graph-model.js

@@ -68,30 +68,37 @@ const LAYERED_PADDING = 16;
 const LAYERED_HEADER = 28;
 const GROUP_HEADER = 28;
 const AUTO_LABEL_MAX_FANOUT = 4;
-const LABEL_CHAR_WIDTH = 5.6;
+const LABEL_CHAR_WIDTH = 6.3;
+const LABEL_PAD_X = 6;
+const LABEL_PAD_Y = 3;
+const LABEL_LINE = 15;
+const BUS_INSET = 4;
+const ARROW_LENGTH = 9;
 const LABEL_MAX_LINES = 2;
 function wrapEdgeLabel(label, width) {
   const max = Math.max(4, Math.floor(width / LABEL_CHAR_WIDTH));
   const clip = (word) => word.length > max ? `${word.slice(0, max - 1)}\u2026` : word;
+  const words = label.split(/\s+/).filter(Boolean);
   const lines = [];
   let current = "";
-  for (const word of label.split(/\s+/).filter(Boolean)) {
+  let placed = 0;
+  for (const word of words) {
     const next = current ? `${current} ${word}` : word;
     if (next.length <= max) {
       current = next;
+      placed += 1;
       continue;
     }
     if (current) lines.push(current);
-    current = clip(word);
+    current = "";
     if (lines.length === LABEL_MAX_LINES) break;
+    current = clip(word);
+    placed += 1;
   }
   if (current && lines.length < LABEL_MAX_LINES) lines.push(current);
-  if (lines.length === LABEL_MAX_LINES) {
-    const consumed = lines.join(" ").replace(/…$/, "").length;
-    if (consumed < label.replace(/\s+/g, " ").trim().length) {
-      const last = lines[LABEL_MAX_LINES - 1];
-      lines[LABEL_MAX_LINES - 1] = last.endsWith("\u2026") ? last : `${last.slice(0, Math.max(1, max - 1))}\u2026`;
-    }
+  if (placed < words.length && lines.length > 0) {
+    const last = lines[lines.length - 1];
+    if (!last.endsWith("\u2026")) lines[lines.length - 1] = last.length < max ? `${last}\u2026` : `${last.slice(0, max - 1)}\u2026`;
   }
   return lines;
 }
@@ -142,6 +149,8 @@ function classifyLayeredEdges(nodes, edges, rootId = nodes[0]?.id) {
       const list = forwardOut.get(edge.source);
       if (list) list.push(edge.target);
       else forwardOut.set(edge.source, [edge.target]);
+    } else if (to > from + 1) {
+      kindById.set(edge.id, "skip");
     } else if (to < from) {
       backEdges.push(edge);
     } else {
@@ -166,13 +175,20 @@ function classifyLayeredEdges(nodes, edges, rootId = nodes[0]?.id) {
         }
       }
     }
-    kindById.set(edge.id, closes ? "cycle" : "lateral");
+    kindById.set(edge.id, closes ? "cycle" : "back");
   }
   return { depthById, kindById };
 }
 function clusterIdFor(parentId, type, edgeType) {
   return `cluster:${parentId}:${type ?? ""}:${edgeType ?? ""}`;
 }
+function busPath(startX, startY, trunk, endX, endY) {
+  const dy = endY - startY;
+  if (Math.abs(dy) < 1) return `M${round1(startX)} ${round1(startY)} H${round1(endX)}`;
+  const r = Math.min(8, Math.abs(dy) / 2, trunk - startX, endX - trunk);
+  const dir = Math.sign(dy);
+  return `M${round1(startX)} ${round1(startY)} H${round1(trunk - r)} Q${round1(trunk)} ${round1(startY)} ${round1(trunk)} ${round1(startY + dir * r)} V${round1(endY - dir * r)} Q${round1(trunk)} ${round1(endY)} ${round1(trunk + r)} ${round1(endY)} H${round1(endX)}`;
+}
 const mean = (values) => values.reduce((sum, value) => sum + value, 0) / values.length;
 const round1 = (value) => Math.round(value * 10) / 10;
 function layoutLayeredGraph(nodes, edges, options = {}) {
@@ -200,6 +216,7 @@ function layoutLayeredGraph(nodes, edges, options = {}) {
   const forwardParents = /* @__PURE__ */ new Map();
   const forwardChildCount = /* @__PURE__ */ new Map();
   const inCycle = /* @__PURE__ */ new Set();
+  const crossLinked = /* @__PURE__ */ new Set();
   const nodeDegree = /* @__PURE__ */ new Map();
   for (const edge of drawable) {
     nodeDegree.set(edge.source, (nodeDegree.get(edge.source) ?? 0) + 1);
@@ -210,14 +227,18 @@ function layoutLayeredGraph(nodes, edges, options = {}) {
       else forwardParents.set(edge.target, [edge]);
       forwardChildCount.set(edge.source, (forwardChildCount.get(edge.source) ?? 0) + 1);
     } else {
-      inCycle.add(edge.source);
-      inCycle.add(edge.target);
+      crossLinked.add(edge.source);
+      crossLinked.add(edge.target);
+      if (kindById.get(edge.id) === "cycle") {
+        inCycle.add(edge.source);
+        inCycle.add(edge.target);
+      }
     }
   }
   const groups = /* @__PURE__ */ new Map();
   if (threshold > 0) {
     for (const node of nodes) {
-      if (node.id === rootId || inCycle.has(node.id) || (forwardChildCount.get(node.id) ?? 0) > 0) continue;
+      if (node.id === rootId || crossLinked.has(node.id) || (forwardChildCount.get(node.id) ?? 0) > 0) continue;
       const parents = forwardParents.get(node.id) ?? [];
       if (parents.length !== 1) continue;
       const via = parents[0];
@@ -369,7 +390,33 @@ function layoutLayeredGraph(nodes, edges, options = {}) {
     let labelY;
     let startAngle;
     let endAngle;
-    if (kind === "forward") {
+    if (kind === "skip") {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x;
+      endY = to.y + to.height / 2;
+      let floor = Math.max(startY, endY);
+      for (const item of itemById.values()) if (item.depth > from.depth && item.depth < to.depth) floor = Math.max(floor, item.y + item.height);
+      const channel = floor + 18;
+      const half = columnGap / 2;
+      path = `M${round1(startX)} ${round1(startY)} C${round1(startX + half)} ${round1(startY)} ${round1(startX + half)} ${round1(channel)} ${round1(startX + half)} ${round1(channel)} L${round1(endX - half)} ${round1(channel)} C${round1(endX - half)} ${round1(channel)} ${round1(endX - half)} ${round1(endY)} ${round1(endX)} ${round1(endY)}`;
+      labelX = (startX + endX) / 2;
+      labelY = channel;
+      startAngle = Math.PI;
+      endAngle = 0;
+      height = Math.max(height, channel + 8);
+    } else if (kind === "forward" && from.children.length > AUTO_LABEL_MAX_FANOUT) {
+      startX = from.x + from.width;
+      startY = from.y + from.height / 2;
+      endX = to.x;
+      endY = to.y + to.height / 2;
+      const trunk = startX + BUS_INSET;
+      path = busPath(startX, startY, trunk, endX, endY);
+      labelX = (trunk + BUS_INSET + endX - ARROW_LENGTH) / 2;
+      labelY = endY;
+      startAngle = Math.PI;
+      endAngle = 0;
+    } else if (kind === "forward") {
       startX = from.x + from.width;
       startY = from.y + from.height / 2;
       endX = to.x;
@@ -415,6 +462,7 @@ function layoutLayeredGraph(nodes, edges, options = {}) {
       edgeIds: [edge.id],
       arrow,
       emphasis: edge.emphasis === true,
+      variant: edge.variant === "dashed" ? "dashed" : "solid",
       path,
       labelX: round1(labelX),
       labelY: round1(labelY),
@@ -422,17 +470,55 @@ function layoutLayeredGraph(nodes, edges, options = {}) {
       arrowY: round1(atStart ? startY : endY),
       arrowAngle: atStart ? startAngle : endAngle,
       labelLines: [],
+      labelRoom: columnGap - 8,
+      columnLabel: false,
+      bus: kind === "forward" && from.children.length > AUTO_LABEL_MAX_FANOUT,
       autoLabel: to.kind !== "cluster" && (edge.emphasis === true || kind === "forward" && from.children.length <= AUTO_LABEL_MAX_FANOUT)
     };
     if (edge.type !== void 0) entry.type = edge.type;
+    if (edge.tone !== void 0) entry.tone = edge.tone;
+    if (edge.description !== void 0) entry.description = edge.description;
     const label = edge.label ?? edge.type;
     if (label !== void 0) entry.label = label;
     routed.set(key, entry);
   }
+  const intoColumn = /* @__PURE__ */ new Map();
+  for (const entry of routed.values()) {
+    if (entry.kind !== "forward" || entry.label === void 0) continue;
+    const depth = itemById.get(entry.target).depth;
+    const list = intoColumn.get(depth);
+    if (list) list.push(entry);
+    else intoColumn.set(depth, [entry]);
+  }
+  for (const [depth, entries] of intoColumn) {
+    if (entries.length <= AUTO_LABEL_MAX_FANOUT) continue;
+    const counts = /* @__PURE__ */ new Map();
+    for (const entry of entries) counts.set(entry.label, (counts.get(entry.label) ?? 0) + 1);
+    let dominant;
+    let most = 1;
+    for (const [label, count] of counts) if (count > most) {
+      dominant = label;
+      most = count;
+    }
+    if (dominant === void 0) continue;
+    const column = columns.find((candidate) => candidate.depth === depth);
+    if (column) column.edgeLabel = dominant;
+    for (const entry of entries) {
+      if (entry.emphasis) continue;
+      if (entry.label === dominant) {
+        entry.columnLabel = true;
+        entry.autoLabel = false;
+      } else if (itemById.get(entry.target).kind !== "cluster") {
+        entry.autoLabel = true;
+      }
+    }
+  }
   const seenLabels = /* @__PURE__ */ new Set();
   for (const entry of routed.values()) {
     if (entry.label === void 0) continue;
-    entry.labelLines = wrapEdgeLabel(entry.label, columnGap - 8);
+    const run = entry.bus ? columnGap - 2 * BUS_INSET - ARROW_LENGTH : columnGap - 8;
+    entry.labelRoom = run;
+    entry.labelLines = wrapEdgeLabel(entry.label, run - 2 * LABEL_PAD_X);
     if (!entry.autoLabel || entry.emphasis || entry.kind !== "forward") continue;
     const key = `${entry.source}|${entry.label}`;
     if (seenLabels.has(key)) entry.autoLabel = false;
@@ -452,6 +538,37 @@ function layoutLayeredGraph(nodes, edges, options = {}) {
     headerHeight: LAYERED_HEADER
   };
 }
+function edgeLabelSize(lines) {
+  const longest = lines.reduce((max, line) => Math.max(max, line.length), 0);
+  return { width: longest * LABEL_CHAR_WIDTH + 2 * LABEL_PAD_X, height: Math.max(1, lines.length) * LABEL_LINE + 2 * LABEL_PAD_Y };
+}
+function separateEdgeLabels(boxes, options = {}) {
+  const gap = options.gap ?? 2;
+  const maxShift = options.maxShift ?? 48;
+  const placed = [];
+  const result = /* @__PURE__ */ new Map();
+  const obstacles = options.obstacles ?? [];
+  const ordered = [...boxes].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || a.y - b.y || a.x - b.x || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+  for (const box of ordered) {
+    const left = box.x - box.width / 2;
+    const right = box.x + box.width / 2;
+    let top = box.y - box.height / 2;
+    for (let guard = 0; guard <= placed.length; guard += 1) {
+      const hit = placed.find((other) => left < other.right && other.left < right && top < other.bottom + gap && other.top - gap < top + box.height);
+      if (!hit) break;
+      top = hit.bottom + gap;
+    }
+    const shift = top - (box.y - box.height / 2);
+    const covers = obstacles.some((o) => left < o.x + o.width && o.x < right && top < o.y + o.height && o.y < top + box.height);
+    if (shift > maxShift || covers) {
+      result.set(box.id, { x: box.x, y: box.y, hidden: true });
+      continue;
+    }
+    placed.push({ left, right, top, bottom: top + box.height });
+    result.set(box.id, { x: box.x, y: round1(top + box.height / 2), hidden: false });
+  }
+  return result;
+}
 function layeredNeighbor(layout, currentId, key) {
   const root = layout.rootId !== void 0 ? layout.itemOf[layout.rootId] : layout.items[0]?.id;
   const current = layout.items.find((item) => item.id === currentId);
@@ -478,10 +595,12 @@ export {
   boundRelationshipGraph,
   classifyLayeredEdges,
   clusterIdFor,
+  edgeLabelSize,
   layeredNeighbor,
   layoutLayeredGraph,
   layoutRelationshipGraph,
   relationshipNeighbors,
+  separateEdgeLabels,
   traverseRelationshipNode,
   wrapEdgeLabel
 };

package/dist/reorder.d.ts

@@ -0,0 +1,30 @@
+import { PointerEvent } from 'react';
+
+/** Move `id` to `index` within `ids`. Returns `ids` itself when nothing moves. */
+declare function placeId(ids: readonly string[], id: string, index: number): readonly string[];
+/** True when two orders hold the same ids in the same order. */
+declare const sameOrder: (a: readonly string[], b: readonly string[]) => boolean;
+/**
+ * Where a dragged row lands: how many of the OTHER rows have their middle above the pointer.
+ * The rows reorder live while dragging, so counting the dragged row itself would push it one
+ * slot past the pointer every time it moves down.
+ */
+declare function dropIndex(rows: readonly Element[], dragged: Element | null, clientY: number): number;
+interface RowDragHandlers {
+    over: (id: string, index: number) => void;
+    drop: (id: string) => void;
+    /** The drag was cancelled (Escape, or the browser took the pointer): put the starting order back. */
+    cancel?: (id: string) => void;
+}
+/**
+ * Pointer drag for a list whose rows reorder live. It listens on the window for the whole drag:
+ * React moves the dragged row's DOM node when the order changes, which releases pointer capture on
+ * its grip, so after the first move down the grip itself stops receiving move and up events.
+ * Nothing animates: the row is placed where the pointer is, frame by frame.
+ */
+declare function useRowDrag(rowSelector: string, handlers: RowDragHandlers): {
+    dragging: string | null;
+    start: (event: PointerEvent<HTMLElement>, id: string) => void;
+};
+
+export { type RowDragHandlers, dropIndex, placeId, sameOrder, useRowDrag };

package/dist/reorder.js

@@ -0,0 +1,74 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+function placeId(ids, id, index) {
+  const from = ids.indexOf(id);
+  const to = Math.max(0, Math.min(index, ids.length - 1));
+  if (from < 0 || from === to) return ids;
+  const next = ids.filter((other) => other !== id);
+  next.splice(to, 0, id);
+  return next;
+}
+const sameOrder = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+function dropIndex(rows, dragged, clientY) {
+  let index = 0;
+  for (const row of rows) {
+    if (row === dragged) continue;
+    const box = row.getBoundingClientRect();
+    if (clientY > box.top + box.height / 2) index++;
+  }
+  return index;
+}
+function useRowDrag(rowSelector, handlers) {
+  const [dragging, setDragging] = useState(null);
+  const drag = useRef(null);
+  const latest = useRef(handlers);
+  latest.current = handlers;
+  useEffect(() => {
+    if (!dragging) return;
+    const move = (event) => {
+      const current = drag.current;
+      if (!current) return;
+      latest.current.over(current.id, dropIndex(Array.from(current.list.querySelectorAll(`:scope > ${rowSelector}`)), current.row, event.clientY));
+    };
+    const finish = (kind) => {
+      const current = drag.current;
+      drag.current = null;
+      setDragging(null);
+      if (!current) return;
+      if (kind === "drop") latest.current.drop(current.id);
+      else latest.current.cancel?.(current.id);
+    };
+    const end = () => finish("drop");
+    const cancel = () => finish("cancel");
+    const escape = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      finish("cancel");
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", end);
+    window.addEventListener("pointercancel", cancel);
+    window.addEventListener("keydown", escape, true);
+    return () => {
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", end);
+      window.removeEventListener("pointercancel", cancel);
+      window.removeEventListener("keydown", escape, true);
+    };
+  }, [dragging, rowSelector]);
+  const start = (event, id) => {
+    const row = event.currentTarget.closest("li");
+    if (!row?.parentElement) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { id, list: row.parentElement, row };
+    setDragging(id);
+  };
+  return { dragging, start };
+}
+export {
+  dropIndex,
+  placeId,
+  sameOrder,
+  useRowDrag
+};

package/dist/rich-text.cjs

@@ -1369,12 +1369,17 @@ function removeAnchorName(el, name) {
   else el.style.removeProperty("anchor-name");
 }
 function translationOf(el) {
-  const t = getComputedStyle(el).transform;
+  const style = getComputedStyle(el);
+  const t = style.transform;
   if (!t || t === "none" || typeof DOMMatrixReadOnly === "undefined") return { x: 0, y: 0 };
   try {
     const m = new DOMMatrixReadOnly(t);
+    const [ox = 0, oy = 0] = style.transformOrigin.split(" ").map((v) => parseFloat(v) || 0);
+    const cx2 = el.offsetWidth / 2 - ox;
+    const cy = el.offsetHeight / 2 - oy;
+    const p = m.transformPoint({ x: cx2, y: cy });
     const z = zoomOf(el);
-    return { x: m.m41 * z, y: m.m42 * z };
+    return { x: (p.x - cx2) * z, y: (p.y - cy) * z };
   } catch {
     return { x: 0, y: 0 };
   }
@@ -1471,6 +1476,13 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     const measured = size.width > 0 || size.height > 0;
     if (measured && session.current) side.current = pos.side;
     if (floating.dataset.placement !== pos.placement) floating.dataset.placement = pos.placement;
+    if (measured) {
+      const clamp2 = (v, max) => Math.min(Math.max(v, 0), max);
+      const ox = pos.side === "left" ? size.width : pos.side === "right" ? 0 : clamp2(a.x + a.width / 2 - pos.x, size.width);
+      const oy = pos.side === "top" ? size.height : pos.side === "bottom" ? 0 : clamp2(a.y + a.height / 2 - pos.y, size.height);
+      const origin = `${Math.round(ox / zoom)}px ${Math.round(oy / zoom)}px`;
+      if (s.getPropertyValue("--uix-anchor-origin") !== origin) s.setProperty("--uix-anchor-origin", origin);
+    }
     const writeFixed = (at) => {
       const left2 = `${Math.round(at.x / zoom)}px`;
       const top2 = `${Math.round(at.y / zoom)}px`;
@@ -1567,6 +1579,26 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
   return reposition;
 }
 
+// src/motion.ts
+var KEY_OPENED = "data-uix-key-opened";
+var keyboard = false;
+var watching = false;
+function watchInputModality() {
+  if (watching || typeof document === "undefined") return;
+  watching = true;
+  document.addEventListener("keydown", (event) => {
+    if (!["Shift", "Control", "Alt", "Meta"].includes(event.key)) keyboard = true;
+  }, true);
+  document.addEventListener("pointerdown", () => {
+    keyboard = false;
+  }, true);
+}
+function markKeyOpened(el) {
+  if (!el) return;
+  if (keyboard) el.setAttribute(KEY_OPENED, "");
+  else el.removeAttribute(KEY_OPENED);
+}
+
 // src/components/Popover.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var useIsomorphicLayoutEffect2 = typeof document !== "undefined" ? import_react4.useLayoutEffect : import_react4.useEffect;
@@ -1620,6 +1652,14 @@ function Popover({
       el.hidePopover();
     } : void 0
   });
+  (0, import_react4.useEffect)(() => {
+    watchInputModality();
+    const el = ref.current;
+    if (!el) return;
+    const mark = () => markKeyOpened(el);
+    el.addEventListener("beforetoggle", mark);
+    return () => el.removeEventListener("beforetoggle", mark);
+  }, []);
   (0, import_react4.useEffect)(() => {
     const el = ref.current;
     if (!el || !anchor) return;
@@ -1700,6 +1740,8 @@ function Popover({
     };
     const onKeyDown = (event) => {
       if (event.key !== "Escape" || !isPopoverOpen(el)) return;
+      event.preventDefault();
+      event.stopPropagation();
       window.clearTimeout(timer);
       const hadFocus = el.contains(el.ownerDocument.activeElement);
       try {
@@ -2170,11 +2212,11 @@ function Markdown({
 var import_react6 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Textarea = (0, import_react6.forwardRef)(
-  ({ invalid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  ({ invalid, size = "md", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "textarea",
     {
       ref,
-      className: cx("uix-textarea", className),
+      className: cx("uix-textarea", size === "lg" && "uix-textarea--lg", className),
       "aria-invalid": invalid || void 0,
       ...props
     }