gridsmith-ui 0.29.1 → 0.30.0

package/dist/kanban.d.ts

@@ -1,5 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import { D as DropdownMenuSubmenu, a as DropdownMenuEntry } from './DropdownMenu-DqT7ZQ0D.js';
+import './icons.js';
 
 interface KanbanCard {
     id: string;
@@ -13,6 +15,12 @@ interface KanbanColumn {
     title: string;
     cards: KanbanCard[];
     color?: string;
+    /**
+     * The column's work-in-progress limit, in cards: the header shows its count against it ("4/3"), and a column holding
+     * more is marked with a warning icon, its count's words saying so to a screen reader. A limit informs and never refuses
+     * a drop; a page that must refuse a move still can, in onCardMove. Default: no limit, the count alone.
+     */
+    limit?: number;
 }
 interface KanbanBoardProps {
     /**
@@ -28,19 +36,22 @@ interface KanbanBoardProps {
      */
     onColumnsChange?: (columns: KanbanColumn[]) => unknown;
     /**
-     * A card was dropped at a new place: its column and its index there, once on drop — a move between columns, into an
-     * empty one, or a reorder within one. Save the move here (or in onColumnsChange); a board with neither saves nothing.
-     * The index counts the cards the board shows: when `columns` is filtered, it is the place among the cards passed.
+     * A card was moved to a new place: its column and its index there, once on drop, or on a choice from the card's Move
+     * menu (the button beside each card that moves it without dragging: to the top of another column, or a step up or
+     * down) — a move between columns, into an empty one, or a reorder within one. Save the move here (or in
+     * onColumnsChange); a board with neither saves nothing. The index counts the cards the board shows: when `columns` is
+     * filtered, it is the place among the cards passed.
      *
      * Return the save's promise (an async function, or a mutation's mutateAsync) and the card stays where it was dropped
      * while it saves, and while an earlier move of the same card still saves, whatever `columns` arrive meanwhile; when
      * it rejects, the card goes back to where `columns` has it, a screen reader hears so, and the app says why (a toast
      * inside the app shell). The save must settle (give a request a timeout): one that never does holds the card. A
-     * handler that throws refuses a move the same way (a column that is full). An app that updates `columns` at once,
-     * then saves, puts the card back itself when its save fails; the board still says the move was not saved.
+     * handler that throws refuses a move the same way (one the person isn't allowed to make). An app that updates
+     * `columns` at once, then saves, puts the card back itself when its save fails; the board still says the move was not
+     * saved.
      */
     onCardMove?: (card: KanbanCard, toColumnId: string, index: number) => unknown;
-    /** A board to look at, not rearrange: no dragging and no grab cursor; cards still open with onCardClick. */
+    /** A board to look at, not rearrange: no dragging, no grab cursor and no Move menu; cards still open with onCardClick. */
     readOnly?: boolean;
     renderCard?: (card: KanbanCard) => ReactNode;
     /**
@@ -49,8 +60,15 @@ interface KanbanBoardProps {
      * renderCard — a role="button" div fights the drag listeners and the judge cites it (Sprint 25.4 K-1).
      */
     onCardClick?: (card: KanbanCard) => void;
+    /**
+     * A card's own actions (open, edit its labels, copy a link, delete…), for its ⋯ menu. `move` is the board's Move entry,
+     * a submenu of the columns the card can go to and its steps up and down: put it where it belongs among the actions;
+     * left out, the board adds it at the end, since it is the way to move a card without dragging (WCAG 2.5.7). Without
+     * cardActions the menu is the move choices alone. On a read-only board the menu holds the actions, with no Move.
+     */
+    cardActions?: (card: KanbanCard, move: DropdownMenuSubmenu) => DropdownMenuEntry[];
     className?: string;
 }
-declare function KanbanBoard({ columns: columnsProp, onColumnsChange, onCardMove, readOnly, renderCard, onCardClick, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
+declare function KanbanBoard({ columns: columnsProp, onColumnsChange, onCardMove, readOnly, renderCard, onCardClick, cardActions, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
 
-export { KanbanBoard };
+export { KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn };

package/dist/kanban.js

@@ -1,12 +1,15 @@
 "use client";
-import { useFillHeight, FillContext, useKeyboardScroll } from './chunk-FD4YED7O.js';
-import { Badge } from './chunk-RECCCA7Z.js';
-import { useFramesItself } from './chunk-QM4SJKWV.js';
+import { DropdownMenu } from './chunk-Z4MCD73B.js';
+import { useFillHeight, FillContext, useKeyboardScroll } from './chunk-RHWTMTU5.js';
+import { Badge } from './chunk-NLXQ323J.js';
+import { useFramesItself, Button } from './chunk-Q36JVJX4.js';
+import './chunk-NKUCS67T.js';
+import './chunk-ZHUVLBCC.js';
 import { useRevealFocus } from './chunk-HTXP5BMM.js';
-import './chunk-ZI3OQDET.js';
-import { useTextOverflow, AutoTooltip } from './chunk-37WOC7F7.js';
+import './chunk-OIOII5L6.js';
+import { useTextOverflow, AutoTooltip } from './chunk-GQVBZ4GW.js';
 import './chunk-7Q46JXSK.js';
-import { Icon } from './chunk-MKFWHWBK.js';
+import { Icon } from './chunk-L6HWACK7.js';
 import './chunk-HP7WUZPK.js';
 import './chunk-WH2FUFAC.js';
 import { cn, FOCUS_INSET, FOCUS_RING } from './chunk-JTU7OBYJ.js';
@@ -16,11 +19,33 @@ import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrate
 import { CSS } from '@dnd-kit/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var MOVE_ROOM_TITLE = "pr-[var(--ds-control-height-sm)]";
+var MOVE_ROOM_CARD = "pr-[calc(var(--ds-space-3)+var(--ds-control-height-sm))]";
+function cardMenuOf(card, moveEntries, cardActions) {
+  if (!cardActions) return moveEntries;
+  const move = { label: "Move", items: moveEntries };
+  const own = cardActions(card, move);
+  const isMove = (e) => e === move || "items" in e && e.items === move.items;
+  const divider = { type: "divider" };
+  const entries = moveEntries.length === 0 ? own.filter((e) => !isMove(e)) : own.some(isMove) ? own : [...own, divider, move];
+  const isDivider = (e) => !!e && "type" in e && e.type === "divider";
+  return entries.reduce((acc, e) => isDivider(e) && (acc.length === 0 || isDivider(acc[acc.length - 1])) ? acc : [...acc, e], []).filter((e, i, all) => !(isDivider(e) && i === all.length - 1));
+}
+function menuOf(moves, choose) {
+  const entry = (m) => ({ label: m.label, onClick: () => choose(m) });
+  const others = moves.filter((m) => m.step === 0).map(entry);
+  const steps = moves.filter((m) => m.step !== 0).map(entry);
+  return others.length && steps.length ? [...others, { type: "divider" }, ...steps] : [...others, ...steps];
+}
+var MOVE_PLACE = "absolute top-ds-1.5 right-ds-1.5";
 function SortableCard({
   card,
   renderCard,
   onCardClick,
-  readOnly
+  readOnly,
+  moves,
+  onMove,
+  cardActions
 }) {
   const {
     attributes,
@@ -30,9 +55,34 @@ function SortableCard({
     transition,
     isDragging
   } = useSortable({ id: card.id, disabled: readOnly });
+  const entries = cardMenuOf(card, readOnly ? [] : menuOf(moves, (m) => onMove(card.id, m.to, m.step)), cardActions);
+  const renderMenu = (style2, faded) => /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      items: entries,
+      trigger: (
+        // the library's icon button: its name says what its menu is for, and it shows that name as its one tooltip;
+        // shown at all times, since a phone has no hover; quiet, as a Card's ⋯ is
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": cardActions ? `Actions for ${card.title}` : `Move ${card.title}`,
+            "data-kanban-move": card.id,
+            style: style2,
+            className: cn(MOVE_PLACE, "text-[var(--ds-text-muted)] hover:text-[var(--ds-text-primary)]", faded && "opacity-30"),
+            children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 14 })
+          }
+        )
+      )
+    }
+  );
+  const menu = entries.length > 0 ? renderMenu : null;
   if (readOnly) {
     const open = onCardClick ? () => onCardClick(card) : void 0;
-    return /* @__PURE__ */ jsx(
+    const surface = /* @__PURE__ */ jsx(
       "div",
       {
         ref: setNodeRef,
@@ -48,47 +98,63 @@ function SortableCard({
         className: cn(
           "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
           "bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-button)]",
+          // a card with its actions' ⋯ keeps the button's room clear, as a card that moves does
+          menu && renderCard && MOVE_ROOM_CARD,
           open ? "cursor-pointer" : "cursor-default",
           FOCUS_RING
         ),
-        children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card })
+        children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card, moveRoom: !!menu })
       }
     );
+    return menu ? /* @__PURE__ */ jsxs("div", { className: "relative", "data-kanban-item": card.id, children: [
+      surface,
+      menu(void 0, false)
+    ] }) : surface;
   }
   const style = {
     transform: CSS.Transform.toString(transform),
     transition
   };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: setNodeRef,
-      style,
-      ...attributes,
-      ...listeners,
-      onClick: onCardClick ? () => onCardClick(card) : void 0,
-      onKeyDown: (e) => {
-        if (onCardClick && e.key === "Enter") {
-          e.preventDefault();
-          onCardClick(card);
-          return;
+  const movable = !!menu;
+  return (
+    // Sprint 25.8.7 item 3 (WCAG 2.5.7): the card's slot holds the card and, beside it, its Move button, never one
+    // inside the other (a control inside a control: the card is the drag's button). The card stays the node the drag
+    // measures and moves; the button takes the same transform, so it travels with the card as the list sorts.
+    /* @__PURE__ */ jsxs("div", { className: "relative", "data-kanban-item": card.id, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setNodeRef,
+          style,
+          ...attributes,
+          ...listeners,
+          onClick: onCardClick ? () => onCardClick(card) : void 0,
+          onKeyDown: (e) => {
+            if (onCardClick && e.key === "Enter") {
+              e.preventDefault();
+              onCardClick(card);
+              return;
+            }
+            listeners?.onKeyDown?.(e);
+          },
+          "data-kanban-card": card.id,
+          className: cn(
+            "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+            "bg-[var(--ds-bg-surface)] p-ds-3 active:cursor-grabbing",
+            movable && renderCard && MOVE_ROOM_CARD,
+            onCardClick ? "cursor-pointer" : "cursor-grab",
+            "shadow-[var(--ds-shadow-button)]",
+            "transition-shadow duration-[var(--ds-transition-speed)]",
+            FOCUS_RING,
+            // no scale on the card left behind: the drag overlay takes its size from it, and 2% wider made the cards
+            // below count as "to the right" of it, so a keyboard drag's arrow keys landed on them (Sprint 25.7, C2)
+            isDragging && "opacity-30"
+          ),
+          children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card, moveRoom: movable })
         }
-        listeners?.onKeyDown?.(e);
-      },
-      "data-kanban-card": card.id,
-      className: cn(
-        "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-        "bg-[var(--ds-bg-surface)] p-ds-3 active:cursor-grabbing",
-        onCardClick ? "cursor-pointer" : "cursor-grab",
-        "shadow-[var(--ds-shadow-button)]",
-        "transition-shadow duration-[var(--ds-transition-speed)]",
-        FOCUS_RING,
-        // no scale on the card left behind: the drag overlay takes its size from it, and 2% wider made the cards
-        // below count as "to the right" of it, so a keyboard drag's arrow keys landed on them (Sprint 25.7, C2)
-        isDragging && "opacity-30"
       ),
-      children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card })
-    }
+      menu && menu(style, isDragging)
+    ] })
   );
 }
 function ClampedDescription({ children }) {
@@ -97,31 +163,36 @@ function ClampedDescription({ children }) {
   if (!isTruncated) return el;
   return /* @__PURE__ */ jsx(AutoTooltip, { content: children, children: el });
 }
-function TruncTitle({ children }) {
+function TruncTitle({ children, className }) {
   const { ref, isTruncated } = useTextOverflow({ lines: 1 });
-  const el = /* @__PURE__ */ jsx("p", { ref, className: "text-sm font-medium text-[var(--ds-text-primary)] truncate", children });
+  const el = /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm font-medium text-[var(--ds-text-primary)] truncate", className), children });
   if (!isTruncated) return el;
   return /* @__PURE__ */ jsx(AutoTooltip, { content: children, children: el });
 }
-function DefaultCard({ card }) {
+function DefaultCard({ card, moveRoom }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-ds-2", children: [
-    /* @__PURE__ */ jsx(TruncTitle, { children: card.title }),
+    /* @__PURE__ */ jsx(TruncTitle, { className: moveRoom ? MOVE_ROOM_TITLE : void 0, children: card.title }),
     card.description && /* @__PURE__ */ jsx(ClampedDescription, { children: card.description }),
     card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-1", children: card.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "subtle", size: "sm", children: tag }, tag)) })
   ] });
 }
 function OverlayCard({
   card,
-  renderCard
+  renderCard,
+  moveRoom
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-        "bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-card)]"
+        "relative rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        "bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-card)]",
+        moveRoom && renderCard && MOVE_ROOM_CARD
       ),
-      children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card })
+      children: [
+        renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card, moveRoom }),
+        moveRoom && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(MOVE_PLACE, "inline-flex items-center justify-center h-[var(--ds-control-height-sm)] w-[var(--ds-control-height-sm)] text-[var(--ds-text-muted)]"), children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: 14 }) })
+      ]
     }
   );
 }
@@ -194,6 +265,21 @@ function keptHolds(holds, cols) {
 var replayHolds = (cols, holds) => holds.reduce(place, cols);
 var isThenable = (value) => value != null && typeof value.then === "function";
 var placeWords = (at) => `${at.col.title}, position ${at.index + 1} of ${at.col.cards.length}`;
+var overLimit = (col) => col.limit != null && col.cards.length > col.limit;
+var overLimitWords = (col) => overLimit(col) ? ` ${col.title} is over its limit of ${col.limit}.` : "";
+var countWords = (count, limit) => `${count} ${count === 1 ? "card" : "cards"}, ${count > limit ? `over the limit of ${limit}` : `limit ${limit}`}`;
+function ColumnCount({ count, limit }) {
+  if (limit == null) return /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)] tabular-nums", children: count });
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-ds-1 text-xs text-[var(--ds-text-muted)] tabular-nums", children: [
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+      count,
+      "/",
+      limit
+    ] }),
+    count > limit && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-kanban-over-limit": "", className: "inline-flex shrink-0 text-[var(--ds-status-warning)]", children: /* @__PURE__ */ jsx(Icon, { name: "warning", size: 14 }) }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: countWords(count, limit) })
+  ] });
+}
 var MOVE_INSTRUCTIONS = "Press Space to pick up the card. Use the Left and Right arrow keys to move it between columns, and the Up and Down arrow keys to move it within a column. Press Space again to drop it, or Escape to cancel.";
 function BoardColumn({
   col,
@@ -228,7 +314,7 @@ function BoardColumn({
               }
             ),
             /* @__PURE__ */ jsx("span", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: col.title }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)] tabular-nums", children: col.cards.length })
+            /* @__PURE__ */ jsx(ColumnCount, { count: col.cards.length, limit: col.limit })
           ] }),
           /* @__PURE__ */ jsx(Icon, { name: "plus", size: 14, className: "text-[var(--ds-text-muted)]" })
         ] }),
@@ -266,6 +352,7 @@ function KanbanBoard({
   readOnly,
   renderCard,
   onCardClick,
+  cardActions,
   className
 }) {
   useFramesItself();
@@ -329,13 +416,13 @@ function KanbanBoard({
   const fill = useFillHeight(rootRef);
   const inPane = useContext(FillContext);
   const filled = fill != null || inPane;
+  const cardPart = (attr, id) => [...rootRef.current?.querySelectorAll(`[${attr}]`) ?? []].find((el) => el.getAttribute(attr) === id);
   const refocus = useRef(null);
   useLayoutEffect(() => {
-    const id = refocus.current;
-    if (id == null) return;
+    const target = refocus.current;
+    if (target == null) return;
     refocus.current = null;
-    const cards = rootRef.current?.querySelectorAll("[data-kanban-card]") ?? [];
-    [...cards].find((el) => el.getAttribute("data-kanban-card") === id)?.focus();
+    cardPart(target.part === "move" ? "data-kanban-move" : "data-kanban-card", target.id)?.focus();
   });
   const holdKey = useRef(0);
   const sensors = useSensors(
@@ -389,8 +476,11 @@ function KanbanBoard({
     const back = locate(shown, hold.cardId);
     const card = back?.col.cards[back.index];
     const focused = document.activeElement;
-    if (focused && rootRef.current?.contains(focused) && focused.closest?.("[data-kanban-card]")?.getAttribute("data-kanban-card") === hold.cardId) {
-      refocus.current = hold.cardId;
+    const inSlot = !!focused && !!rootRef.current?.contains(focused) && focused.closest?.("[data-kanban-item]")?.getAttribute("data-kanban-item") === hold.cardId;
+    const menuOpen = cardPart("data-kanban-move", hold.cardId)?.getAttribute("aria-expanded") === "true";
+    if (inSlot) refocus.current = { id: hold.cardId, part: focused?.hasAttribute("data-kanban-move") ? "move" : "card" };
+    else if (menuOpen && locate(replayHolds(columnsRef.current, holdsRef.current), hold.cardId)?.col.id !== back?.col.id) {
+      refocus.current = { id: hold.cardId, part: "move" };
     }
     setHolds(rest);
     if (previewRef.current && activeRef.current) setPreview(rebase(shown, previewRef.current, activeRef.current));
@@ -406,32 +496,20 @@ function KanbanBoard({
     const next = holdsRef.current.map((h) => h === hold ? { ...h, inFlight, layout: inFlight > 0 ? h.layout : layoutOf(columnsRef.current) } : h);
     setHolds(inFlight > 0 ? next : keptHolds(next, columnsRef.current));
   };
-  const handleDragEnd = (event) => {
-    const { active, over } = event;
-    const activeId = String(active.id);
-    const cols = previewRef.current ?? committed;
-    activeRef.current = null;
-    setActiveCard(null);
-    setPreview(null);
-    const final = over ? landing(cols, activeId, String(over.id)) : committed;
-    const before = locate(committed, activeId);
-    const after = locate(final, activeId);
-    if (!before || !after || before.col.id === after.col.id && before.index === after.index) {
-      if (before) said.current = `Dropped ${before.col.cards[before.index].title} back in ${placeWords(before)}.`;
-      return;
-    }
-    said.current = `Dropped ${after.col.cards[after.index].title} in ${placeWords(after)}.`;
+  const commit = (final, cardId) => {
+    const after = locate(final, cardId);
+    if (!after) return;
     const key = ++holdKey.current;
-    const prev = holdsRef.current.find((h) => h.cardId === activeId);
+    const prev = holdsRef.current.find((h) => h.cardId === cardId);
     const hold = {
-      ...placementIn(final, activeId),
+      ...placementIn(final, cardId),
       key,
       inFlight: prev?.inFlight ?? 0,
-      origin: prev?.origin ?? placementIn(columnsProp, activeId) ?? placementIn(committed, activeId),
+      origin: prev?.origin ?? placementIn(columnsProp, cardId) ?? placementIn(committed, cardId),
       earlier: prev ? [...prev.earlier, { cardId: prev.cardId, toColumnId: prev.toColumnId, beforeId: prev.beforeId, index: prev.index }] : [],
       layout: layoutOf(columnsProp)
     };
-    setHolds([...holdsRef.current.filter((h) => h.cardId !== activeId), hold]);
+    setHolds([...holdsRef.current.filter((h) => h.cardId !== cardId), hold]);
     const saves = [];
     try {
       for (const result of [onColumnsChange?.(final), onCardMove?.(after.col.cards[after.index], after.col.id, after.index)]) {
@@ -443,8 +521,51 @@ function KanbanBoard({
     }
     if (!saves.length) return;
     setHolds(holdsRef.current.map((h) => h.key === key ? { ...h, inFlight: h.inFlight + 1 } : h));
-    Promise.allSettled(saves).then((results) => settle(activeId, key, results.every((r) => r.status === "fulfilled")));
+    Promise.allSettled(saves).then((results) => settle(cardId, key, results.every((r) => r.status === "fulfilled")));
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    const activeId = String(active.id);
+    const cols = previewRef.current ?? committed;
+    activeRef.current = null;
+    setActiveCard(null);
+    setPreview(null);
+    const final = over ? landing(cols, activeId, String(over.id)) : committed;
+    const before = locate(committed, activeId);
+    const after = locate(final, activeId);
+    if (!before || !after || before.col.id === after.col.id && before.index === after.index) {
+      if (before) said.current = `Dropped ${before.col.cards[before.index].title} back in ${placeWords(before)}.`;
+      return;
+    }
+    said.current = `Dropped ${after.col.cards[after.index].title} in ${placeWords(after)}.${overLimitWords(after.col)}`;
+    commit(final, activeId);
+  };
+  const moveFromMenu = (cardId, toColumnId, step = 0) => {
+    const at = locate(committed, cardId);
+    const to = committed.find((col) => col.id === toColumnId);
+    if (!at || !to) return;
+    const index = to.id === at.col.id ? at.index + step : 0;
+    const beforeId = to.cards.filter((c) => c.id !== cardId)[index]?.id ?? null;
+    const final = place(committed, { cardId, toColumnId, beforeId, index });
+    const after = locate(final, cardId);
+    if (!after || after.col.id === at.col.id && after.index === at.index) return;
+    noticeParts.current = [];
+    setNotice(`Moved ${at.col.cards[at.index].title} to ${placeWords(after)}.${overLimitWords(after.col)}`);
+    commit(final, cardId);
+    refocus.current = { id: cardId, part: "card" };
+  };
+  const movesFor = (col, index) => {
+    if (readOnly) return [];
+    const others = columns.filter((c) => c.id !== col.id).map((c) => ({ label: `Move to ${c.title}`, to: c.id, step: 0 }));
+    const steps = [
+      ...index > 0 ? [{ label: "Move up", to: col.id, step: -1 }] : [],
+      ...index < col.cards.length - 1 ? [{ label: "Move down", to: col.id, step: 1 }] : []
+    ];
+    return [...others, ...steps];
   };
+  const activeAt = activeCard ? locate(columns, activeCard.id) : null;
+  const activeMovable = !!activeAt && cardMenuOf(activeAt.col.cards[activeAt.index], menuOf(movesFor(activeAt.col, activeAt.index), () => {
+  }), cardActions).length > 0;
   const handleDragCancel = (event) => {
     activeRef.current = null;
     setActiveCard(null);
@@ -464,19 +585,22 @@ function KanbanBoard({
       onDragCancel: handleDragCancel,
       children: [
         /* @__PURE__ */ jsxs("div", { ref: setRoot, "data-fill": fill != null ? "" : void 0, className: cn("relative flex gap-ds-4 overflow-x-auto pb-ds-2 scroll-px-[4px] snap-x snap-mandatory sm:snap-none", inPane && "h-full min-h-0", className), style: fill != null ? { height: fill } : void 0, children: [
-          columns.map((col) => /* @__PURE__ */ jsx(BoardColumn, { col, readOnly, filled, children: col.cards.map((card) => /* @__PURE__ */ jsx(
+          columns.map((col) => /* @__PURE__ */ jsx(BoardColumn, { col, readOnly, filled, children: col.cards.map((card, index) => /* @__PURE__ */ jsx(
             SortableCard,
             {
               card,
               renderCard,
               onCardClick,
-              readOnly
+              readOnly,
+              moves: movesFor(col, index),
+              onMove: moveFromMenu,
+              cardActions
             },
             card.id
           )) }, col.id)),
           /* @__PURE__ */ jsx("div", { role: "status", className: "sr-only", children: notice })
         ] }),
-        /* @__PURE__ */ jsx(DragOverlay, { children: activeCard && /* @__PURE__ */ jsx(OverlayCard, { card: activeCard, renderCard }) })
+        /* @__PURE__ */ jsx(DragOverlay, { children: activeCard && /* @__PURE__ */ jsx(OverlayCard, { card: activeCard, renderCard, moveRoom: activeMovable }) })
       ]
     }
   );