@tensor_1/react 2.43.1 → 2.44.1

package/dist/components/DashboardCanvas.d.ts

@@ -0,0 +1,78 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { DashboardCanvasItem } from '../dashboard-canvas-model.js';
+
+/** Every word the canvas renders. `{label}` is the item's name; the others are grid units. */
+interface DashboardCanvasLabels {
+    /** The region's accessible name. */
+    region: string;
+    /** The move handle's name. */
+    move: string;
+    /** The resize handle's name. */
+    resize: string;
+    /** How the handles work, read with each handle (`aria-describedby`). */
+    instructions: string;
+    /** Announced after a move. `{col}` and `{row}` count from 1. */
+    moved: string;
+    /** Announced after a resize. */
+    resized: string;
+    /** Announced when a step would leave the canvas or pass the item's size limit. */
+    atEdge: string;
+    /** Announced when Escape drops a drag. */
+    cancelled: string;
+}
+declare const DEFAULT_DASHBOARD_CANVAS_LABELS: DashboardCanvasLabels;
+/** Space between items: `sm` --uix-space-3, `md` --uix-space-4, `lg` --uix-space-6. */
+type DashboardCanvasGap = 'sm' | 'md' | 'lg';
+/** What changed, for the product's save and its journey event. */
+interface DashboardCanvasChange {
+    readonly id: string;
+    readonly kind: 'move' | 'resize';
+    readonly source: 'pointer' | 'keyboard';
+}
+interface DashboardCanvasProps<T extends DashboardCanvasItem> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+    /** The layout. Overlaps and out-of-range values are settled before rendering. */
+    items: readonly T[];
+    /** One cell's content: a widget, a card. Its last child takes the spare height. */
+    renderItem: (item: T) => ReactNode;
+    /** The item's name in labels and announcements. Default: its id. */
+    itemLabel?: (item: T) => string;
+    /**
+     * Edit mode: each item gets a move handle and a resize handle, both draggable and both
+     * operable with the arrow keys. Off, the canvas is a plain layout and server-renderable.
+     */
+    editable?: boolean;
+    /** The next layout, once per drop or key press. The canvas never keeps its own copy. */
+    onLayoutChange?: (items: T[], change: DashboardCanvasChange) => void;
+    /** Height of one row, any CSS length. Default `--uix-dashboard-canvas-row` (5rem). */
+    rowHeight?: string;
+    /** Default `md`. */
+    gap?: DashboardCanvasGap;
+    labels?: Partial<DashboardCanvasLabels>;
+}
+/**
+ * A free dashboard layout (TENSOR HAR-1823): twelve columns, rows of one fixed height, and each
+ * item at its own `{ col, row, w, h }` in grid units. In edit mode a person drags an item by its
+ * move handle and resizes it by the corner handle; both snap to the grid, push what they land
+ * on downwards, and report one new layout per drop. Both handles also take the arrow keys, and
+ * the pure functions behind them (`moveCanvasItem`, `resizeCanvasItem`) are exported for the
+ * product's own item menu, so dragging is never the only way (WCAG 2.5.7).
+ *
+ * Below 36rem of its own width the canvas is one column in reading order (row by row, left to
+ * right), each item keeping its height, and the handles step aside: the item menu remains.
+ *
+ * Owns interaction, never persistence: the product stores `items` and passes them back.
+ *
+ * ```tsx
+ * <DashboardCanvas
+ *   items={layout}
+ *   editable={editing}
+ *   itemLabel={(item) => titles[item.id]}
+ *   renderItem={(item) => <Widget id={item.id} />}
+ *   onLayoutChange={(next) => save(next)}
+ * />
+ * ```
+ */
+declare function DashboardCanvas<T extends DashboardCanvasItem>({ items, renderItem, itemLabel, editable, onLayoutChange, rowHeight, gap, labels: labelOverrides, className, style, ...props }: DashboardCanvasProps<T>): react.JSX.Element;
+
+export { DEFAULT_DASHBOARD_CANVAS_LABELS, DashboardCanvas, type DashboardCanvasChange, type DashboardCanvasGap, type DashboardCanvasLabels, type DashboardCanvasProps };

package/dist/components/DashboardCanvas.js

@@ -0,0 +1,227 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { GripVerticalIcon, Maximize2Icon } from "../icons/components.js";
+import {
+  canvasMoveTarget,
+  canvasReadingOrder,
+  canvasResizeTarget,
+  DASHBOARD_CANVAS_COLUMNS,
+  normalizeCanvas,
+  placeCanvasItem
+} from "../dashboard-canvas-model.js";
+const DEFAULT_DASHBOARD_CANVAS_LABELS = {
+  region: "Dashboard layout",
+  move: "Move {label}",
+  resize: "Resize {label}",
+  instructions: "Arrow keys move or resize one step. Escape cancels a drag.",
+  moved: "{label}: column {col}, row {row}",
+  resized: "{label}: {w} columns wide, {h} rows tall",
+  atEdge: "{label} cannot go further that way",
+  cancelled: "Move cancelled"
+};
+const DRAG_THRESHOLD = 4;
+function measure(grid) {
+  const style = getComputedStyle(grid);
+  const width = grid.clientWidth - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0);
+  const tracks = style.gridTemplateColumns.split(" ").map((track) => Number.parseFloat(track)).filter(Number.isFinite);
+  const trackSum = tracks.reduce((sum, track) => sum + track, 0);
+  const columnGap = tracks.length > 1 ? Math.max(0, (width - trackSum) / (tracks.length - 1)) : 0;
+  const colPitch = (width + columnGap) / DASHBOARD_CANVAS_COLUMNS;
+  const rowGap = Number.parseFloat(style.rowGap) || 0;
+  const rowTrack = Number.parseFloat(style.gridAutoRows) || 80;
+  return { colPitch, rowPitch: rowTrack + rowGap };
+}
+function DashboardCanvas({
+  items,
+  renderItem,
+  itemLabel = (item) => item.id,
+  editable = false,
+  onLayoutChange,
+  rowHeight,
+  gap = "md",
+  labels: labelOverrides,
+  className,
+  style,
+  ...props
+}) {
+  const labels = { ...DEFAULT_DASHBOARD_CANVAS_LABELS, ...labelOverrides };
+  const instructionsId = useId();
+  const gridRef = useRef(null);
+  const dragRef = useRef(null);
+  const [preview, setPreview] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const layout = useMemo(() => normalizeCanvas(items), [items]);
+  const order = useMemo(() => new Map(canvasReadingOrder(layout).map((item, index) => [item.id, index])), [layout]);
+  const live = useRef({ layout, onLayoutChange, labels, itemLabel });
+  live.current = { layout, onLayoutChange, labels, itemLabel };
+  useEffect(() => () => dragRef.current?.stop(), []);
+  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;
+    state.onLayoutChange?.(next, { id, kind, source });
+    setAnnouncement(describe(placed, kind));
+  };
+  const onHandleKeyDown = (event, item, kind) => {
+    const keys = { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" };
+    const resizes = { ArrowRight: "wider", ArrowLeft: "narrower", ArrowDown: "taller", ArrowUp: "shorter" };
+    if (event.key === "Escape" && dragRef.current) {
+      event.preventDefault();
+      dragRef.current.stop();
+      dragRef.current = null;
+      setPreview(null);
+      setAnnouncement(labels.cancelled);
+      return;
+    }
+    if (!(event.key in keys)) return;
+    event.preventDefault();
+    const target = kind === "move" ? canvasMoveTarget(item, keys[event.key]) : canvasResizeTarget(item, resizes[event.key]);
+    if (!target) {
+      setAnnouncement(fillLabel(labels.atEdge, { label: itemLabel(item) }));
+      return;
+    }
+    commit(item.id, target, kind, "keyboard");
+  };
+  const onHandlePointerDown = (event, item, kind) => {
+    if (event.button !== 0 || dragRef.current || !gridRef.current) return;
+    const { colPitch, rowPitch } = measure(gridRef.current);
+    const origin = { col: item.col, row: item.row, w: item.w, h: item.h };
+    let moved = false;
+    let last = origin;
+    const targetFor = (move) => {
+      const dc = Math.round((move.clientX - drag.startX) / colPitch);
+      const dr = Math.round((move.clientY - drag.startY) / rowPitch);
+      return kind === "move" ? { ...origin, col: origin.col + dc, row: origin.row + dr } : { ...origin, w: origin.w + dc, h: origin.h + dr };
+    };
+    const onMove = (move) => {
+      if (move.pointerId !== drag.pointerId) return;
+      if (!moved && Math.hypot(move.clientX - drag.startX, move.clientY - drag.startY) < DRAG_THRESHOLD) return;
+      moved = true;
+      const placed = placeCanvasItem(live.current.layout, item.id, targetFor(move)).find((candidate) => candidate.id === item.id);
+      if (!placed) return;
+      last = { col: placed.col, row: placed.row, w: placed.w, h: placed.h };
+      setPreview({ id: item.id, placement: last });
+    };
+    const finish = (drop) => {
+      drag.stop();
+      dragRef.current = null;
+      setPreview(null);
+      const changed = last.col !== origin.col || last.row !== origin.row || last.w !== origin.w || last.h !== origin.h;
+      if (drop && moved && changed) commit(item.id, last, kind, "pointer");
+    };
+    const onUp = (up) => {
+      if (up.pointerId === drag.pointerId) finish(true);
+    };
+    const onCancel = (cancel) => {
+      if (cancel.pointerId === drag.pointerId) finish(false);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    const drag = {
+      id: item.id,
+      kind,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      origin,
+      colPitch,
+      rowPitch,
+      stop: () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onCancel);
+      }
+    };
+    dragRef.current = drag;
+  };
+  const placementStyle = (placement, readingIndex) => ({
+    "--uix-dashboard-canvas-col": placement.col + 1,
+    "--uix-dashboard-canvas-row-start": placement.row + 1,
+    "--uix-dashboard-canvas-w": placement.w,
+    "--uix-dashboard-canvas-h": placement.h,
+    "--uix-dashboard-canvas-order": readingIndex
+  });
+  const rootStyle = rowHeight ? { ...style, "--uix-dashboard-canvas-row": rowHeight } : style;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: gridRef,
+      role: "region",
+      "aria-label": labels.region,
+      className: cx(
+        "uix-dashboard-canvas",
+        gap === "sm" && "uix-dashboard-canvas--gap-sm",
+        gap === "lg" && "uix-dashboard-canvas--gap-lg",
+        editable && "uix-dashboard-canvas--editing",
+        preview && "uix-dashboard-canvas--dragging",
+        className
+      ),
+      style: rootStyle,
+      children: [
+        layout.map((item) => {
+          const name = itemLabel(item);
+          const dragging = preview?.id === item.id;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx("uix-dashboard-canvas__item", dragging && "uix-dashboard-canvas__item--dragging"),
+              style: placementStyle(item, order.get(item.id) ?? 0),
+              "data-canvas-id": item.id,
+              children: [
+                renderItem(item),
+                editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uix-dashboard-canvas__handle uix-dashboard-canvas__move",
+                      "aria-label": fillLabel(labels.move, { label: name }),
+                      "aria-describedby": instructionsId,
+                      onKeyDown: (event) => onHandleKeyDown(event, item, "move"),
+                      onPointerDown: (event) => onHandlePointerDown(event, item, "move"),
+                      children: /* @__PURE__ */ jsx(GripVerticalIcon, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "uix-dashboard-canvas__handle uix-dashboard-canvas__resize",
+                      "aria-label": fillLabel(labels.resize, { label: name }),
+                      "aria-describedby": instructionsId,
+                      onKeyDown: (event) => onHandleKeyDown(event, item, "resize"),
+                      onPointerDown: (event) => onHandlePointerDown(event, item, "resize"),
+                      children: /* @__PURE__ */ jsx(Maximize2Icon, { "aria-hidden": "true" })
+                    }
+                  )
+                ] }) : null
+              ]
+            },
+            item.id
+          );
+        }),
+        preview ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "uix-dashboard-canvas__preview",
+            style: placementStyle(preview.placement, order.get(preview.id) ?? 0),
+            "aria-hidden": "true"
+          }
+        ) : null,
+        editable ? /* @__PURE__ */ jsx("span", { id: instructionsId, className: "uix-visually-hidden", children: labels.instructions }) : null,
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_DASHBOARD_CANVAS_LABELS,
+  DashboardCanvas
+};

package/dist/dashboard-canvas-model.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Pure model for `DashboardCanvas` (TENSOR HAR-1823): a free dashboard layout on a 12-column
+ * grid. Every item has a place and a size in grid units — `col` and `row` (0-based), `w`
+ * columns wide and `h` rows tall — and may declare the smallest and largest size it accepts.
+ *
+ * The canvas is free: an item stays where it is put, and nothing floats up into a gap. When a
+ * move or a resize lands on other items, they are pushed down below it, in reading order, and
+ * whatever they then land on is pushed in turn. `compactCanvas` is the separate, explicit
+ * "close the gaps" step for a product that wants one (after removing a widget, say).
+ *
+ * The same functions back the pointer drag in the component and the keyboard alternative a
+ * product puts in each item's menu (Move up / down / left / right, Wider / Narrower, Taller /
+ * Shorter), so dragging is never the only way to arrange the canvas (WCAG 2.5.7).
+ */
+/** The canvas has twelve columns: 12 divides into halves, thirds, quarters and sixths. */
+declare const DASHBOARD_CANVAS_COLUMNS = 12;
+interface DashboardCanvasItem {
+    /** Stable id: the key of the cell and of every change reported for it. */
+    readonly id: string;
+    /** First column, 0-based (0 – 11). */
+    readonly col: number;
+    /** First row, 0-based. */
+    readonly row: number;
+    /** Width in columns. */
+    readonly w: number;
+    /** Height in rows. */
+    readonly h: number;
+    /** Narrowest the item may be, in columns. Default 1. */
+    readonly minW?: number;
+    /** Widest the item may be, in columns. Default 12. */
+    readonly maxW?: number;
+    /** Shortest the item may be, in rows. Default 1. */
+    readonly minH?: number;
+    /** Tallest the item may be, in rows. Default: no limit. */
+    readonly maxH?: number;
+}
+/** A keyboard move: one column or one row at a time. */
+type DashboardCanvasDirection = 'up' | 'down' | 'left' | 'right';
+/** A keyboard resize: one column or one row at a time. */
+type DashboardCanvasResize = 'wider' | 'narrower' | 'taller' | 'shorter';
+/** Where and how big an item is, in grid units. */
+interface DashboardCanvasPlacement {
+    readonly col: number;
+    readonly row: number;
+    readonly w: number;
+    readonly h: number;
+}
+/** An item's size limits, made sane: whole numbers, inside the canvas, minimum never above maximum. */
+declare function canvasItemLimits(item: DashboardCanvasItem): {
+    readonly minW: number;
+    readonly maxW: number;
+    readonly minH: number;
+    readonly maxH: number;
+};
+/**
+ * The item made valid: whole numbers, its size inside its own limits and the canvas, and its
+ * place inside the twelve columns (a too-wide item at the right edge moves left). Limits from
+ * an untyped caller are made sane too: a maximum below the minimum is raised to it.
+ */
+declare function clampCanvasItem<T extends DashboardCanvasItem>(item: T): T;
+/** True when two different items share at least one cell. */
+declare function canvasItemsOverlap(a: DashboardCanvasPlacement & {
+    readonly id: string;
+}, b: DashboardCanvasPlacement & {
+    readonly id: string;
+}): boolean;
+/**
+ * Reading order: row by row from the top, left to right in a row. Ties keep the order they
+ * came in. This is the order the canvas collapses to on a narrow screen and the order a
+ * screen reader meets the items in.
+ */
+declare function canvasReadingOrder<T extends DashboardCanvasItem>(items: readonly T[]): T[];
+/** The number of rows the canvas uses: one past the lowest item's last row. */
+declare function canvasRowCount(items: readonly DashboardCanvasItem[]): number;
+/**
+ * A layout with every item valid and no two sharing a cell. Use it on a stored layout before
+ * showing it: an overlap someone saved elsewhere is settled the same way a move settles one.
+ */
+declare function normalizeCanvas<T extends DashboardCanvasItem>(items: readonly T[]): T[];
+/**
+ * Puts one item at a new place and size (clamped to its limits and the canvas) and pushes
+ * what it lands on down. Every other item keeps its place unless it had to move. Returns the
+ * items in the order they came in; an unknown id returns them unchanged.
+ */
+declare function placeCanvasItem<T extends DashboardCanvasItem>(items: readonly T[], id: string, placement: Partial<DashboardCanvasPlacement>): T[];
+/** One step of a keyboard move, as a new place. Null when the item is already at that edge. */
+declare function canvasMoveTarget(item: DashboardCanvasItem, direction: DashboardCanvasDirection): DashboardCanvasPlacement | null;
+/**
+ * One step of a keyboard resize, as a new place and size. `wider` grows to the right, or to the
+ * left when the item already touches the right edge. Null when the item is at its limit.
+ */
+declare function canvasResizeTarget(item: DashboardCanvasItem, change: DashboardCanvasResize): DashboardCanvasPlacement | null;
+/** Moves an item one column or row. At an edge the items come back unchanged. */
+declare function moveCanvasItem<T extends DashboardCanvasItem>(items: readonly T[], id: string, direction: DashboardCanvasDirection): T[];
+/** Resizes an item by one column or row. At a limit the items come back unchanged. */
+declare function resizeCanvasItem<T extends DashboardCanvasItem>(items: readonly T[], id: string, change: DashboardCanvasResize): T[];
+/**
+ * Closes the gaps: in reading order, each item rises as far as it can without landing on one
+ * above it. Columns and sizes never change. Not called by the canvas itself — a free canvas
+ * keeps the gaps a person leaves — but by a product that wants a tidy layout.
+ */
+declare function compactCanvas<T extends DashboardCanvasItem>(items: readonly T[]): T[];
+
+export { DASHBOARD_CANVAS_COLUMNS, type DashboardCanvasDirection, type DashboardCanvasItem, type DashboardCanvasPlacement, type DashboardCanvasResize, canvasItemLimits, canvasItemsOverlap, canvasMoveTarget, canvasReadingOrder, canvasResizeTarget, canvasRowCount, clampCanvasItem, compactCanvas, moveCanvasItem, normalizeCanvas, placeCanvasItem, resizeCanvasItem };

package/dist/dashboard-canvas-model.js

@@ -0,0 +1,113 @@
+const DASHBOARD_CANVAS_COLUMNS = 12;
+const whole = (value, fallback) => typeof value === "number" && Number.isFinite(value) ? Math.round(value) : fallback;
+const clampTo = (value, low, high) => Math.min(high, Math.max(low, value));
+function canvasItemLimits(item) {
+  const minW = clampTo(whole(item.minW, 1), 1, DASHBOARD_CANVAS_COLUMNS);
+  const maxW = clampTo(whole(item.maxW, DASHBOARD_CANVAS_COLUMNS), minW, DASHBOARD_CANVAS_COLUMNS);
+  const minH = Math.max(1, whole(item.minH, 1));
+  const maxH = Math.max(minH, whole(item.maxH, Number.POSITIVE_INFINITY));
+  return { minW, maxW, minH, maxH };
+}
+function clampCanvasItem(item) {
+  const { minW, maxW, minH, maxH } = canvasItemLimits(item);
+  const w = clampTo(whole(item.w, minW), minW, maxW);
+  const h = clampTo(whole(item.h, minH), minH, maxH);
+  const col = clampTo(whole(item.col, 0), 0, DASHBOARD_CANVAS_COLUMNS - w);
+  const row = Math.max(0, whole(item.row, 0));
+  if (col === item.col && row === item.row && w === item.w && h === item.h) return item;
+  return { ...item, col, row, w, h };
+}
+function canvasItemsOverlap(a, b) {
+  return a.id !== b.id && a.col < b.col + b.w && b.col < a.col + a.w && a.row < b.row + b.h && b.row < a.row + a.h;
+}
+function canvasReadingOrder(items) {
+  return items.map((item, index) => ({ item, index })).sort((a, b) => a.item.row - b.item.row || a.item.col - b.item.col || a.index - b.index).map(({ item }) => item);
+}
+function canvasRowCount(items) {
+  return items.reduce((rows, item) => Math.max(rows, item.row + item.h), 0);
+}
+function settle(fixed, rest) {
+  const settled = [...fixed];
+  for (const item of canvasReadingOrder(rest)) {
+    let candidate = item;
+    for (; ; ) {
+      const below = settled.filter((other) => canvasItemsOverlap(candidate, other)).reduce((lowest, other) => Math.max(lowest, other.row + other.h), -1);
+      if (below < 0) break;
+      candidate = { ...candidate, row: below };
+    }
+    settled.push(candidate);
+  }
+  return settled;
+}
+const inInputOrder = (items, settled) => {
+  const byId = new Map(settled.map((item) => [item.id, item]));
+  return items.map((item) => byId.get(item.id) ?? item);
+};
+function normalizeCanvas(items) {
+  const clamped = items.map((item) => clampCanvasItem(item));
+  return inInputOrder(clamped, settle([], clamped));
+}
+function placeCanvasItem(items, id, placement) {
+  const target = items.find((item) => item.id === id);
+  if (!target) return [...items];
+  const moved = clampCanvasItem({ ...target, ...placement });
+  const others = items.filter((item) => item.id !== id).map((item) => clampCanvasItem(item));
+  return inInputOrder(items, settle([moved], others));
+}
+function canvasMoveTarget(item, direction) {
+  const current = clampCanvasItem(item);
+  const col = current.col + (direction === "left" ? -1 : direction === "right" ? 1 : 0);
+  const row = current.row + (direction === "up" ? -1 : direction === "down" ? 1 : 0);
+  if (col < 0 || col + current.w > DASHBOARD_CANVAS_COLUMNS || row < 0) return null;
+  return { col, row, w: current.w, h: current.h };
+}
+function canvasResizeTarget(item, change) {
+  const current = clampCanvasItem(item);
+  const limits = canvasItemLimits(current);
+  if (change === "wider") {
+    if (current.w >= limits.maxW) return null;
+    const col = current.col + current.w < DASHBOARD_CANVAS_COLUMNS ? current.col : current.col - 1;
+    return { col, row: current.row, w: current.w + 1, h: current.h };
+  }
+  if (change === "narrower") {
+    return current.w <= limits.minW ? null : { col: current.col, row: current.row, w: current.w - 1, h: current.h };
+  }
+  if (change === "taller") {
+    return current.h >= limits.maxH ? null : { col: current.col, row: current.row, w: current.w, h: current.h + 1 };
+  }
+  return current.h <= limits.minH ? null : { col: current.col, row: current.row, w: current.w, h: current.h - 1 };
+}
+function moveCanvasItem(items, id, direction) {
+  const item = items.find((candidate) => candidate.id === id);
+  const target = item ? canvasMoveTarget(item, direction) : null;
+  return target ? placeCanvasItem(items, id, target) : [...items];
+}
+function resizeCanvasItem(items, id, change) {
+  const item = items.find((candidate) => candidate.id === id);
+  const target = item ? canvasResizeTarget(item, change) : null;
+  return target ? placeCanvasItem(items, id, target) : [...items];
+}
+function compactCanvas(items) {
+  const settled = [];
+  for (const item of canvasReadingOrder(normalizeCanvas(items))) {
+    let row = item.row;
+    while (row > 0 && !settled.some((other) => canvasItemsOverlap({ ...item, row: row - 1 }, other))) row -= 1;
+    settled.push(row === item.row ? item : { ...item, row });
+  }
+  return inInputOrder(items, settled);
+}
+export {
+  DASHBOARD_CANVAS_COLUMNS,
+  canvasItemLimits,
+  canvasItemsOverlap,
+  canvasMoveTarget,
+  canvasReadingOrder,
+  canvasResizeTarget,
+  canvasRowCount,
+  clampCanvasItem,
+  compactCanvas,
+  moveCanvasItem,
+  normalizeCanvas,
+  placeCanvasItem,
+  resizeCanvasItem
+};