@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/kanban/KanbanBoard.js

@@ -0,0 +1,219 @@
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { useState as L, useMemo as u, useCallback as C } from "react";
+import { cn as O } from "../../lib/cn.js";
+import { useFillHeight as V } from "../../lib/use-fill-height.js";
+import { numberFormat as b } from "../../lib/intl-cache.js";
+import { Badge as W } from "../Badge.js";
+import { Icon as G } from "../Icon.js";
+import { Tooltip as J } from "../Popover.js";
+import { DragDrop as P, DragDropContainer as Q, DragDropItem as X, DragDropSurface as Y } from "../DragDrop.js";
+import { kanban as E } from "./recipe.js";
+import { useUiStrings as Z, useUiLocale as _ } from "../../lib/i18n/provider.js";
+import { useBoard as oo } from "../../lib/board/use-board.js";
+import { describeMoveRejection as ro } from "../../lib/board/rejection.js";
+function xo({
+  label: B,
+  lanes: i,
+  getItemId: e,
+  itemLabel: p,
+  renderItem: x,
+  renderDragging: R,
+  onMove: v,
+  onRefuse: j,
+  emptyLane: H,
+  fill: S = !0,
+  className: I,
+  ...K
+}) {
+  const s = E({ fill: S }), h = Z(), g = h.kanban, w = h.board, m = _(), q = V(S), [z, N] = L(null), D = u(() => i.flatMap((o) => o.items), [i]), A = u(
+    () => i.map((o) => ({
+      id: o.id,
+      label: o.label,
+      /* `limit` and `wipLimit` are the same idea under two names, and both
+         are deliberately SOFT — exceeding one is a visual event, never a
+         blocked drop. A board that refuses the drop teaches people to work
+         around the board. */
+      wipLimit: o.limit
+    })),
+    [i]
+  ), y = u(() => {
+    const o = /* @__PURE__ */ new Map();
+    for (const r of i)
+      for (const c of r.items) o.set(String(e(c)), r.id);
+    return o;
+  }, [i, e]), F = u(
+    () => ({
+      getId: (o) => e(o),
+      /* An id with no lane cannot happen from `lanes` by construction. If it
+         ever does, returning the empty string lands the item in the model's
+         `unassigned` bucket, which warns once with the ids — louder than a
+         silent drop and quieter than a throw on every render. */
+      getColumnId: (o) => y.get(String(e(o))) ?? ""
+    }),
+    [e, y]
+  ), T = C(
+    (o) => {
+      for (const r of o.moves) {
+        if (r.to.columnId === r.from.columnId && !r.to.lane && r.to.index === r.from.index) continue;
+        const t = i.find((a) => a.id === r.to.columnId);
+        if (t?.refusal !== void 0)
+          return { ok: !1, reason: t.refusal };
+      }
+      return { ok: !0 };
+    },
+    [i]
+  ), U = C(
+    (o) => {
+      for (const r of o.moves) {
+        if (r.to.lane)
+          throw new Error(`KanbanBoard: got a lane move for "${String(r.itemId)}", which it never requests.`);
+        v({
+          id: String(r.itemId),
+          from: { lane: String(r.from.columnId), index: r.from.index },
+          to: { lane: String(r.to.columnId), index: r.to.index }
+        });
+      }
+    },
+    [v]
+  ), k = oo({
+    items: D,
+    columns: A,
+    accessors: F,
+    validateMove: T,
+    onMove: U
+  }), M = (o) => D.find((r) => String(e(r)) === o);
+  return (
+    /* THE HEIGHT CHAIN STARTS HERE, ONE ELEMENT ABOVE THE BOARD.
+    
+           `DragDrop` renders a root of its own — it has to, because the live region
+           and the instructions need a home that cannot be forgotten — so the board
+           `div` below is a GRANDCHILD of whatever the consumer put this in. A
+           `flex-1` on the board alone would resolve against that intermediate root,
+           which has no height of its own, and the board would size to content
+           however bounded the parent was. So the root is made a flex column that
+           fills, and the board fills it in turn.
+    
+           Inert outside a bounded flex parent, exactly like the rest of the chain:
+           `flex-1` on a child of a block container does nothing, and the root takes
+           the height of the board inside it.
+    
+           WHICH IS NOW THE COMMON CASE, AND IT IS WHY THIS ROOT KEEPS ITS `flex-1`
+           WHILE THE BOARD BELOW GIVES ITS UP. Under `fill` the board carries a
+           measured inline height, so the root's own `flex-1` has nothing to
+           distribute in an unbounded tree and simply wraps it — while in a bounded
+           one it still fills, which is what lets the board's `max-h-full` resolve
+           against a definite parent height and clamp. The two elements share a top
+           edge, so which of them is measured does not change the number. */
+    /* @__PURE__ */ d(
+      P,
+      {
+        ...K,
+        onDragEnd: (o) => {
+          if (!i.find((t) => t.id === o.to.container))
+            throw new Error(
+              `KanbanBoard: a card was dropped in "${String(o.to.container)}", which is not one of its lanes.`
+            );
+          const c = k.requestMove({
+            moves: [
+              {
+                itemId: o.id,
+                from: { columnId: o.from.container, index: o.from.index },
+                to: { columnId: o.to.container, index: o.to.index }
+              }
+            ],
+            source: o.mode
+          });
+          if (c.ok)
+            N(null);
+          else {
+            const t = M(String(o.id)), a = t === void 0 ? String(o.id) : p(t), f = ro(h.moveRejected, m, c.reason);
+            N(g.notMoved(a, f)), j?.({
+              id: String(o.id),
+              lane: String(o.to.container),
+              reason: f
+            });
+          }
+        },
+        renderCarried: (o) => {
+          const r = M(String(o));
+          return r === void 0 ? null : (R ?? x)(r);
+        },
+        className: "flex min-h-0 min-w-0 flex-1 flex-col",
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              ref: q,
+              className: O(s.root(), I),
+              tabIndex: 0,
+              role: "group",
+              "aria-label": B,
+              children: i.map((o) => {
+                const r = o.refusal !== void 0, c = E({ refusing: r }), t = k.columns.find((l) => l.id === o.id), a = t?.count ?? 0, f = t?.overWip ?? !1;
+                return /* @__PURE__ */ d("section", { className: c.lane(), "aria-label": o.label, children: [
+                  /* @__PURE__ */ d("div", { className: s.laneHeader(), children: [
+                    /* @__PURE__ */ d("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                      /* @__PURE__ */ n("span", { className: s.laneLabel(), children: o.label }),
+                      o.hint && /* @__PURE__ */ n("span", { className: s.laneHint(), children: o.hint })
+                    ] }),
+                    o.refusal !== void 0 && /* @__PURE__ */ n(J, { content: o.refusal, children: /* @__PURE__ */ n(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": g.whyRefused(o.label),
+                        className: "dx-tap shrink-0 cursor-pointer rounded-full text-tertiary outline-none transition-colors duration-(--dur-fast) hover:text-secondary focus-visible:ring-2 focus-visible:ring-focus-ring",
+                        children: /* @__PURE__ */ n(G, { name: "lock", size: "xs" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ n(
+                      W,
+                      {
+                        size: "sm",
+                        tone: f ? "danger" : a === 0 ? "neutral" : "accent",
+                        children: o.limit === void 0 ? b(m, {}).format(a) : w.wipCount(b(m, {}).format(a), b(m, {}).format(o.limit))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ d(
+                    Q,
+                    {
+                      id: o.id,
+                      label: o.label,
+                      axis: "y",
+                      className: s.laneItems(),
+                      children: [
+                        o.items.map((l, $) => /* @__PURE__ */ n(
+                          X,
+                          {
+                            id: e(l),
+                            index: $,
+                            label: p(l),
+                            children: /* @__PURE__ */ n(
+                              Y,
+                              {
+                                label: w.moveCard(p(l)),
+                                className: s.card(),
+                                children: x(l)
+                              }
+                            )
+                          },
+                          e(l)
+                        )),
+                        a === 0 && /* @__PURE__ */ n("p", { className: s.laneEmpty(), children: o.empty ?? H ?? g.empty })
+                      ]
+                    }
+                  )
+                ] }, o.id);
+              })
+            }
+          ),
+          /* @__PURE__ */ n("div", { role: "status", "aria-live": "polite", className: "sr-only", children: z })
+        ]
+      }
+    )
+  );
+}
+export {
+  xo as KanbanBoard
+};
+//# sourceMappingURL=KanbanBoard.js.map

package/dist/components/kanban/KanbanBoard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.js","sources":["../../../src/components/kanban/KanbanBoard.tsx"],"sourcesContent":["import { useCallback, useMemo, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useFillHeight } from \"../../lib/use-fill-height\";\nimport type { DragEndEvent, DragId, DragSessionCallbacks } from \"../../lib/dnd\";\nimport { describeMoveRejection, useBoard } from \"../../lib/board\";\nimport { useUiLocale, useUiStrings } from \"../../lib/i18n\";\nimport { numberFormat } from \"../../lib/intl-cache\";\nimport type {\n  BoardAccessors,\n  BoardColumnDef,\n  BoardMoveRequest,\n  BoardMoveVerdict,\n} from \"../../lib/board\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport { Tooltip } from \"../Popover\";\nimport {\n  DragDrop,\n  DragDropContainer,\n  DragDropItem,\n  DragDropSurface,\n} from \"../DragDrop\";\nimport { kanban } from \"./recipe\";\nimport type { KanbanLane, KanbanMove, KanbanRefusal } from \"./types\";\n\nexport type { KanbanLane, KanbanMove, KanbanRefusal };\n\n/* ============================================================================\n   KANBAN BOARD — records in lanes, with a ceiling and a refusal.\n\n   WHAT THIS ADDS OVER `DragDrop`. The engine and its component layer already\n   handle carrying a card, opening a gap, the keyboard, the announcements and\n   the auto-scroll. What every board then rebuilds on top is the same four\n   things: lanes with a heading, a count read against a work-in-progress\n   ceiling, a message in an empty lane, and — the one that is always got wrong\n   last — what happens when a card is dropped somewhere it is not allowed to go.\n\n   ONE MODEL UNDERNEATH, AND THIS COMPONENT NO LONGER OWNS ONE. Grouping, move\n   resolution, index bounds, the no-op filter and the veto all live in\n   `lib/board` — the same core `Board` uses. This file is the OPINIONATED\n   half: lanes with a heading, a ceiling read against a count, a refusal shown\n   before anyone drags, an empty-lane message, and the whole card as the drag\n   source. That split is the point. Two board engines in one library meant every\n   drag, a11y or validation fix had to be made twice, and the second one is the\n   one that gets forgotten.\n\n   `lanes` STAYS THE API even though the core takes a flat list plus accessors.\n   Pre-grouped lanes are the right shape for a kanban — the consumer already has\n   them grouped, and asking them to flatten and then supply a `getColumnId` that\n   re-derives the grouping they just destroyed is work for nobody's benefit. The\n   conversion happens here, once, at the edge.\n\n   THE REFUSAL IS THE REASON THIS EXISTS. `DragSessionCallbacks.onDragEnd`\n   returns `void` and the session has already committed by the time it fires, so\n   there is no veto in the engine and adding one there would mean an async gate\n   inside a pointer event. The honest place for the decision is here, where the\n   lanes are known: a lane that will not accept a drop says so BEFORE the drag,\n   and a drop into it calls `onRefuse` instead of `onMove` — so the consumer,\n   which has not moved anything, has nothing to undo.\n\n   It is expressed as the core's own `validateMove`, not as a second mechanism\n   beside it — so a lane's refusal and a consumer's per-item veto are the same\n   decision arriving through the same funnel, and a consumer that outgrows\n   `refusal` has somewhere to go rather than a wall.\n\n   ORDER MATTERS HERE AND IT IS EASY TO GET BACKWARDS: the core runs\n   `validateMove` BEFORE it filters no-ops. A card picked up in a refusing lane\n   and put straight back has changed nothing, and reporting a refusal for it\n   would announce a rule to somebody who did not break it — so the veto below\n   ignores no-ops explicitly. Reordering WITHIN a refusing lane is still refused,\n   because that lane refused to be written to at all.\n\n   That shape is what keeps a permission-gated board from lying. The pattern it\n   replaces is optimistic-move-then-revert, where the card visibly lands, the\n   server refuses, and the card jumps back — which is indistinguishable from a\n   bug, and which quietly asserts for a moment that the move happened.\n\n   `onRefuse` IS NOT ENFORCEMENT. It is the first of two gates and the weaker\n   one: it decides what this surface offers. Whatever `onMove` writes to must\n   check the same rule again, because a lane's `refusal` is a prop and a prop is\n   a suggestion. A board is not an access-control model.\n\n   THE ITEMS ARE ALREADY GROUPED AND ALREADY ORDERED. This component does no\n   filtering and no sorting — `lane.items` is rendered in the order given, and\n   its index IS the index reported back on a move. Handing it a filtered list\n   and expecting the indices to mean something about the unfiltered one is the\n   way this goes wrong; the engine's own note on `DragDropItem.index` says the\n   same thing for the same reason.\n   ========================================================================= */\n\nexport interface KanbanBoardProps<T> extends Omit<\n  DragSessionCallbacks,\n  \"onDragEnd\"\n> {\n  /**\n   * What this board is a board OF — \"Case pipeline\", \"Release queue\".\n   *\n   * It names the horizontal scroller, which is a tab stop because a board wider\n   * than the screen is otherwise unreachable by keyboard. An unlabelled stop\n   * announces as \"group\" and gives nobody a reason to be there, which is why\n   * this is required rather than optional.\n   */\n  label: string;\n  lanes: readonly KanbanLane<T>[];\n  getItemId: (item: T) => string;\n  /**\n   * A speakable name for one record — \"SS-2026-0412, M.R.\".\n   *\n   * Required rather than optional. It is what every announcement says, and the\n   * fallback for a missing one is the id, which is speakable and never right.\n   */\n  itemLabel: (item: T) => string;\n  renderItem: (item: T) => ReactNode;\n  /**\n   * The card while it is being carried. Defaults to `renderItem`.\n   *\n   * Worth overriding when the resting card is dense: the clone is moving, often\n   * under a cursor, and the two or three fields that identify the record are\n   * the only ones anybody reads off it.\n   *\n   * It changes what the carried card SHOWS and nothing else. Whether a card is\n   * carried, and how, is not a board's decision — `DragDrop` lifts every card\n   * into a portalled clone, and a board that omitted the piece that did the\n   * carrying used to get cards that could not leave their own lane.\n   */\n  renderDragging?: (item: T) => ReactNode;\n  onMove: (move: KanbanMove) => void;\n  /** Called INSTEAD of `onMove` when the destination lane carries a `refusal`. */\n  onRefuse?: (refusal: KanbanRefusal) => void;\n  /** Shown in a lane with no cards. Omitted, the provider's `kanban.empty`. */\n  emptyLane?: ReactNode;\n  /**\n   * Fill the space between the board's own top and the bottom of whatever\n   * scrolls it, so the lanes are the only thing that scrolls down.\n   *\n   * `true` — the default, and what a board IS. It was not the default until\n   * 3.7.0, and the reason is worth keeping: the height was expressed purely as\n   * a `flex-1 min-h-0` chain, which is correct and is correct only while every\n   * ancestor cooperates. One ordinary page wrapper above the board — a bare\n   * `<div className=\"flex flex-col gap-10\">`, which is this package's own demo\n   * layout — makes `flex-1` inert, the board sizes to its tallest lane, and the\n   * PAGE takes the scrollbar that was supposed to belong to a column. Reported\n   * from a running board: \"the columns should fill to the full remaining height\n   * of the page. No scroll bar vertically. Only scroll vertically per column.\"\n   *\n   * The height is MEASURED (`lib/use-fill-height`), not computed from a token,\n   * and re-measured whenever anything above the board changes size. It is\n   * paired with `max-h-full`, so an ancestor that genuinely does bound the board\n   * still wins and a board in a short box does not overflow it.\n   *\n   * `false` — the board is as tall as the box it is given, or as its tallest\n   * lane if nothing gives it one. For a board deliberately sized by its\n   * container (`h-[60dvh]`, a fixed-height card) or embedded in a page that is\n   * meant to scroll as a document.\n   *\n   * @default true\n   */\n  fill?: boolean;\n  className?: string;\n}\n\nexport function KanbanBoard<T>({\n  label,\n  lanes,\n  getItemId,\n  itemLabel,\n  renderItem,\n  renderDragging,\n  onMove,\n  onRefuse,\n  emptyLane,\n  fill = true,\n  className,\n  ...callbacks\n}: KanbanBoardProps<T>) {\n  const s = kanban({ fill });\n  const uiStrings = useUiStrings();\n  const strings = uiStrings.kanban;\n  const boardStrings = uiStrings.board;\n  const locale = useUiLocale();\n  const fillRef = useFillHeight(fill);\n  const [refusalAnnouncement, setRefusalAnnouncement] = useState<string | null>(null);\n\n  /* THE EDGE CONVERSION, and all of it is here so nothing downstream has to\n     know `lanes` was ever a different shape from the core's flat list. */\n  const items = useMemo(() => lanes.flatMap((lane) => lane.items), [lanes]);\n\n  const columns = useMemo<BoardColumnDef[]>(\n    () =>\n      lanes.map((lane) => ({\n        id: lane.id,\n        label: lane.label,\n        /* `limit` and `wipLimit` are the same idea under two names, and both\n           are deliberately SOFT — exceeding one is a visual event, never a\n           blocked drop. A board that refuses the drop teaches people to work\n           around the board. */\n        wipLimit: lane.limit,\n      })),\n    [lanes],\n  );\n\n  /* An item's lane is a fact about where the consumer put it, not a field on\n     the item — `lanes` IS the grouping. So the accessor reads a map built from\n     the same array, rather than demanding the consumer add a lane id to their\n     own objects to satisfy a shape they never chose. */\n  const laneOfItem = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const lane of lanes) {\n      for (const item of lane.items) map.set(String(getItemId(item)), lane.id);\n    }\n    return map;\n  }, [lanes, getItemId]);\n\n  const accessors = useMemo<BoardAccessors<T>>(\n    () => ({\n      getId: (item) => getItemId(item),\n      /* An id with no lane cannot happen from `lanes` by construction. If it\n         ever does, returning the empty string lands the item in the model's\n         `unassigned` bucket, which warns once with the ids — louder than a\n         silent drop and quieter than a throw on every render. */\n      getColumnId: (item) => laneOfItem.get(String(getItemId(item))) ?? \"\",\n    }),\n    [getItemId, laneOfItem],\n  );\n\n  const validateMove = useCallback(\n    (request: BoardMoveRequest): BoardMoveVerdict => {\n      for (const move of request.moves) {\n        const sameSlot =\n          move.to.columnId === move.from.columnId && !move.to.lane && move.to.index === move.from.index;\n        if (sameSlot) continue;\n        const destination = lanes.find((lane) => lane.id === move.to.columnId);\n        if (destination?.refusal !== undefined) {\n          return { ok: false, reason: destination.refusal };\n        }\n      }\n      return { ok: true };\n    },\n    [lanes],\n  );\n\n  /* THE CONSUMER'S `onMove` TAKES ONE MOVE, and that is honest rather than a\n     narrowing: this component renders no selection, so nothing can produce a\n     multi-move request through it. The core supports bulk and will hand it over\n     the day a lane grows checkboxes — until then, mapping over `moves` here\n     would be code no input can reach, written to look complete. */\n  const handleValidatedMove = useCallback(\n    (request: BoardMoveRequest) => {\n      for (const move of request.moves) {\n        /* DX-4583: this board never turns on `crossLaneDrop`, so a lane move here\n           means the board and its core disagree — ours to fix, not to guess at. */\n        if (move.to.lane) {\n          throw new Error(`KanbanBoard: got a lane move for \"${String(move.itemId)}\", which it never requests.`);\n        }\n        onMove({\n          id: String(move.itemId),\n          from: { lane: String(move.from.columnId), index: move.from.index },\n          to: { lane: String(move.to.columnId), index: move.to.index },\n        });\n      }\n    },\n    [onMove],\n  );\n\n  const board = useBoard({\n    items,\n    columns,\n    accessors,\n    validateMove,\n    onMove: handleValidatedMove,\n  });\n\n  const findItem = (id: string): T | undefined =>\n    items.find((item) => String(getItemId(item)) === id);\n\n  /* EXACTLY ONE OF THE TWO CALLBACKS FIRES, OR NEITHER — never both. That was\n     the load-bearing claim of the resolver this replaces, and it is now\n     structural rather than something this file has to remember: the core calls\n     `onMove` itself, and only for a request that both passed `validateMove`\n     and had something real left after the no-op filter. The refusal below can\n     only run on the branch where it did not.\n\n     A verdict carries a reason and not a lane, because the core has no idea a\n     lane is a thing. The lane and the card are recovered from the event, which\n     is where they came from — reconstructing them from the reason string would\n     be parsing our own prose. */\n  const handleDragEnd = (event: DragEndEvent) => {\n    /* LOUD, AND DELIBERATELY NOT LEFT TO THE CORE. The core would refuse this\n       too — it bounds-checks against its declared columns — but it would refuse\n       it the way it refuses anything, with a reason meant for a person, and\n       that reason would be handed to `onRefuse` and shown to somebody who did\n       nothing wrong. A container the board never rendered means the board and\n       the engine disagree about what exists, which is ours to fix and nobody\n       else's to read about. */\n    const destination = lanes.find((lane) => lane.id === event.to.container);\n    if (!destination) {\n      throw new Error(\n        `KanbanBoard: a card was dropped in \"${String(event.to.container)}\", which is not one of its lanes.`,\n      );\n    }\n\n    const verdict = board.requestMove({\n      moves: [\n        {\n          itemId: event.id,\n          from: { columnId: event.from.container, index: event.from.index },\n          to: { columnId: event.to.container, index: event.to.index },\n        },\n      ],\n      source: event.mode,\n    });\n    if (!verdict.ok) {\n      /* THE ENGINE HAS ALREADY SAID THE CARD LANDED, AND IT IS WRONG. Its live\n         region is `aria-live=\"assertive\"` and fires on commit — \"Dropped X.\n         Position 1 of 3 in Released\" — which happens BEFORE the board gets to\n         refuse the write. So a screen-reader user is told the move happened\n         when nothing moved, and nothing else on the page contradicts it: a\n         consumer's `onRefuse` banner is ordinary markup and announces nothing.\n         This corrects the record. */\n      /* The id is the fallback name, not a cast. `findItem` genuinely can\n         return undefined — an id the engine still holds for a card the\n         consumer removed mid-gesture — and casting that away would turn a\n         missing card into a crash inside an announcement nobody can see. An id\n         is a poor thing to hear and a better one than nothing. */\n      const moved = findItem(String(event.id));\n      const name = moved === undefined ? String(event.id) : itemLabel(moved);\n      const reasonText = describeMoveRejection(uiStrings.moveRejected, locale, verdict.reason);\n      setRefusalAnnouncement(strings.notMoved(name, reasonText));\n      onRefuse?.({\n        id: String(event.id),\n        lane: String(event.to.container),\n        reason: reasonText,\n      });\n    } else {\n      /* Cleared on the next successful move so a stale refusal cannot be\n         re-read out of the live region by a screen reader reviewing the page. */\n      setRefusalAnnouncement(null);\n    }\n  };\n\n  /* The carried card is a RECORD, looked up by id, which is why this is stated\n     here rather than left to the default. `DragDrop`'s default clone is the\n     row's own children, which is the version that cannot drift from the row it\n     stands for — but a card in the air is being read at a glance while it\n     moves, and `renderDragging` is the board's own affordance for showing less\n     of it than the resting card does. */\n  const carried = (id: DragId) => {\n    const item = findItem(String(id));\n    if (item === undefined) return null;\n    return (renderDragging ?? renderItem)(item);\n  };\n\n  return (\n    /* THE HEIGHT CHAIN STARTS HERE, ONE ELEMENT ABOVE THE BOARD.\n\n       `DragDrop` renders a root of its own — it has to, because the live region\n       and the instructions need a home that cannot be forgotten — so the board\n       `div` below is a GRANDCHILD of whatever the consumer put this in. A\n       `flex-1` on the board alone would resolve against that intermediate root,\n       which has no height of its own, and the board would size to content\n       however bounded the parent was. So the root is made a flex column that\n       fills, and the board fills it in turn.\n\n       Inert outside a bounded flex parent, exactly like the rest of the chain:\n       `flex-1` on a child of a block container does nothing, and the root takes\n       the height of the board inside it.\n\n       WHICH IS NOW THE COMMON CASE, AND IT IS WHY THIS ROOT KEEPS ITS `flex-1`\n       WHILE THE BOARD BELOW GIVES ITS UP. Under `fill` the board carries a\n       measured inline height, so the root's own `flex-1` has nothing to\n       distribute in an unbounded tree and simply wraps it — while in a bounded\n       one it still fills, which is what lets the board's `max-h-full` resolve\n       against a definite parent height and clamp. The two elements share a top\n       edge, so which of them is measured does not change the number. */\n    <DragDrop\n      {...callbacks}\n      onDragEnd={handleDragEnd}\n      renderCarried={carried}\n      className=\"flex min-h-0 min-w-0 flex-1 flex-col\"\n    >\n      {/* THE BOARD SCROLLS SIDEWAYS, SO IT HAS TO BE REACHABLE BY KEYBOARD.\n          Six lanes do not fit a laptop, and without a tab stop on the scroller\n          itself there is no key that moves it — a keyboard user simply cannot\n          see the last lane. The cards inside are focusable, but focusing one\n          only scrolls far enough to reveal that card, which is not the same as\n          being able to look at the board.\n\n          It needs a name to go with the tab stop: an unlabelled stop announces\n          as \"group\" and gives no reason to be there. Caught by `a11y-scan`\n          (`scrollable-region-focusable`) — the class of defect with no symptom\n          at all for anyone using a mouse.\n\n          It is a child of `DragDrop` rather than its root because `DragDrop`\n          spreads everything it does not recognise into the drag session: an\n          attribute passed there would be read as a callback and never reach the\n          DOM. */}\n      <div\n        /* THE MEASURED ELEMENT IS THIS ONE, not `DragDrop`'s root above it, and\n           the reason is the flex algorithm rather than convenience. An item with\n           `flex: 1 1 0%` takes its main size from `flex-basis`, so an inline\n           `height` on it is simply ignored — the fill variant drops `flex-1`\n           from this element for exactly that reason, and the root above keeps\n           its own `flex-1` so a bounded consumer still bounds the pair. The two\n           elements share a top edge either way, so measuring from here measures\n           the same distance. */\n        ref={fillRef}\n        className={cn(s.root(), className)}\n        tabIndex={0}\n        role=\"group\"\n        aria-label={label}\n      >\n        {lanes.map((lane) => {\n          const refusing = lane.refusal !== undefined;\n          const l = kanban({ refusing });\n          /* COUNT AND CEILING COME FROM THE MODEL, not from `lane.items.length`\n             recomputed here. They are the same number today and the point is\n             that they cannot stop being: the badge, the announcements and any\n             future veto that reads a count all read one derivation. */\n          const column = board.columns.find((candidate) => candidate.id === lane.id);\n          const count = column?.count ?? 0;\n          const over = column?.overWip ?? false;\n\n          return (\n            <section key={lane.id} className={l.lane()} aria-label={lane.label}>\n              <div className={s.laneHeader()}>\n                <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n                  <span className={s.laneLabel()}>{lane.label}</span>\n                  {lane.hint && (\n                    <span className={s.laneHint()}>{lane.hint}</span>\n                  )}\n                </div>\n                {lane.refusal !== undefined && (\n                  <Tooltip content={lane.refusal}>\n                    <button\n                      type=\"button\"\n                      aria-label={strings.whyRefused(lane.label)}\n                      className=\"dx-tap shrink-0 cursor-pointer rounded-full text-tertiary outline-none transition-colors duration-(--dur-fast) hover:text-secondary focus-visible:ring-2 focus-visible:ring-focus-ring\"\n                    >\n                      <Icon name=\"lock\" size=\"xs\" />\n                    </button>\n                  </Tooltip>\n                )}\n                <Badge\n                  size=\"sm\"\n                  tone={over ? \"danger\" : count === 0 ? \"neutral\" : \"accent\"}\n                >\n                  {lane.limit === undefined ? numberFormat(locale, {}).format(count) : boardStrings.wipCount(numberFormat(locale, {}).format(count), numberFormat(locale, {}).format(lane.limit))}\n                </Badge>\n              </div>\n\n              <DragDropContainer\n                id={lane.id}\n                label={lane.label}\n                axis=\"y\"\n                className={s.laneItems()}\n              >\n                {lane.items.map((item, index) => (\n                  <DragDropItem\n                    key={getItemId(item)}\n                    id={getItemId(item)}\n                    index={index}\n                    label={itemLabel(item)}\n                  >\n                    {/* THE WHOLE CARD IS THE DRAG SOURCE, AND THE BOARD SAYS SO\n                        — the consumer does not.\n\n                        `DragDrop`'s rule is that rendering a drag source is what\n                        makes a row draggable — the configuration is the switch.\n                        That is right for a generic list, where some rows are\n                        meant to be fixed. It is wrong here: a card on a kanban\n                        board is draggable by definition, so leaving it to the\n                        consumer means the one who forgets gets a board that\n                        renders perfectly, announces itself correctly, passes\n                        every test — and cannot be dragged at all. No error,\n                        nothing to see. Not hypothetical: that is exactly what\n                        the first consumer of this component shipped, and it was\n                        caught by opening the page.\n\n                        A `DragDropSurface` RATHER THAN A GRIP, and this\n                        reverses what stood here. The grip was chosen because \"a\n                        record card usually opens something when it is clicked\n                        and a card that is entirely a drag handle swallows that\n                        click\" — true of a drag source that starts on\n                        `pointerdown`, and false of this one. The engine holds a\n                        press in `pending` until it passes an activation\n                        constraint (5px of travel for a mouse, a 250ms dwell for\n                        a finger), so a press that does not move IS still a\n                        click, and one that does becomes a drag with its\n                        trailing click swallowed. The card can be both.\n\n                        Reported, and the reason the grip is gone rather than\n                        merely optional: \"I should be able to drag anywhere on\n                        the card and it should drag the card. Get rid of the drag\n                        handle entirely. Cards are just draggable. Click opens\n                        them, drag drags them.\"\n\n                        THE CARD'S OWN CORNER IS ITS OWN AGAIN. The grip was\n                        absolutely positioned over the top-left and the wrapper\n                        reserved that corner with a left inset on whatever\n                        `renderItem` returned — which existed only so the grip\n                        would not sit on the identifier. Both are gone with it;\n                        what stays is the `w-full` assertion, which was never\n                        about the grip (see `recipe.ts`). */}\n                    <DragDropSurface\n                      label={boardStrings.moveCard(itemLabel(item))}\n                      className={s.card()}\n                    >\n                      {renderItem(item)}\n                    </DragDropSurface>\n                  </DragDropItem>\n                ))}\n\n                {/* INSIDE THE SCROLLER, not below it — see `recipe.ts`. It is\n                    an ordinary child of the drop container and carries no\n                    `data-dnd-item`, so the engine's snapshot does not see it\n                    and no insertion index counts it. */}\n                {count === 0 && (\n                  <p className={s.laneEmpty()}>{lane.empty ?? emptyLane ?? strings.empty}</p>\n                )}\n              </DragDropContainer>\n            </section>\n          );\n        })}\n      </div>\n\n      {/* SR-ONLY, and that is the difference from `Board`'s own rejection line.\n          `Board` renders its refusal visibly, because `validateMove` is opaque\n          to the consumer's UI and nothing else would ever show the reason. Here\n          the reason is already on the page twice over — the lane states it\n          before anyone drags, and `onRefuse` hands it to the consumer to\n          present however they choose. A second visible copy would compete with\n          the consumer's own. What is missing is only the ANNOUNCEMENT, so that\n          is all this adds. */}\n      <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {refusalAnnouncement}\n      </div>\n    </DragDrop>\n  );\n}\n"],"names":["KanbanBoard","label","lanes","getItemId","itemLabel","renderItem","renderDragging","onMove","onRefuse","emptyLane","fill","className","callbacks","kanban","uiStrings","useUiStrings","strings","boardStrings","locale","useUiLocale","fillRef","useFillHeight","refusalAnnouncement","setRefusalAnnouncement","useState","items","useMemo","lane","columns","laneOfItem","map","item","accessors","validateMove","useCallback","request","move","destination","handleValidatedMove","board","useBoard","findItem","id","jsxs","DragDrop","event","verdict","moved","name","reasonText","describeMoveRejection","jsx","cn","refusing","l","column","candidate","count","over","Tooltip","Icon","Badge","numberFormat","DragDropContainer","index","DragDropItem","DragDropSurface"],"mappings":"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"}

package/dist/components/kanban/recipe.js

@@ -0,0 +1,144 @@
+import { tv as e } from "tailwind-variants";
+const r = e({
+  slots: {
+    /* `min-h-0`: be allowed to be SHORTER than the lanes inside, so the
+       overflow has somewhere to go. Whether this box also GROWS is the `fill`
+       variant's job — the two ways it can be given a height are mutually
+       exclusive, and stating both here is what made the wrong one silently
+       win. */
+    root: "flex min-h-0 min-w-0 gap-3 overflow-x-auto pb-2",
+    /* NO `h-full`, AND IT USED TO BE HERE ON A REASON THAT WAS BACKWARDS.
+    
+           The note it replaces said `h-full` "states what stretch already implies,
+           and it is not redundant: stretch is defeated by anything that gives the
+           lane a definite cross size, and a consumer's `className` reaches this
+           element". Both halves are wrong. `className` reaches the board ROOT
+           (`cn(s.root(), className)`) — there is no prop that reaches a lane. And
+           the rule it invokes runs the other way: `align-self: stretch` applies
+           only while the cross-size property is `auto`, so writing `height: 100%`
+           is not a restatement of stretch, it is what DEFEATS it.
+    
+           Measured in Chromium, two flex rows with identical content, differing
+           only in this declaration: against an INDEFINITE container, `auto` lanes
+           came out 242 / 242 and `height: 100%` lanes came out 242 / 2 — the empty
+           lane collapsed to its own borders, and the row's remaining space belonged
+           to no lane at all. Against a bounded container both came out 398 / 398,
+           which is why this survived so long: it is invisible in exactly the
+           arrangement the demo shipped.
+    
+           That collapse is not only a layout blemish. The lane the person sees is
+           what they aim at, and a lane that stops short of the board leaves a band
+           of the board belonging to nothing — reported from a real board as lane
+           sections of 173.55px beside 1071.59px, with the space between them
+           swallowing drops. `resolveTarget` no longer resolves such a point to the
+           last lane crossed (see `lib/dnd/geometry.ts`), and the region should not
+           be there in the first place.
+    
+           `min-h-0` is the half that always did the work — without it a flex item's
+           automatic minimum is its content, so a lane full of cards refuses to be
+           shorter than the cards and pushes the board taller instead of
+           scrolling. */
+    lane: "flex min-h-0 w-72 shrink-0 flex-col rounded-xl border border-border-subtle bg-surface-sunken",
+    laneHeader: "flex shrink-0 items-start gap-2 border-b border-border-subtle px-3 py-2.5",
+    laneLabel: "text-2xs font-semibold uppercase tracking-widest text-tertiary",
+    laneHint: "truncate text-2xs text-secondary",
+    /* The scroller AND the drop container: one element, per the banner. It is
+           also the ONLY element in the board that scrolls vertically.
+    
+           THE FLOOR IS 6rem AND IT USED TO BE 10rem. A minimum height is a refusal
+           to shrink, so on a short viewport a 10rem floor was enough to push a lane
+           past a bounded board and hand the board back the vertical scrollbar this
+           change exists to remove. 6rem still leaves an empty lane an obvious
+           target in an unbounded board, which is the only case the floor is for. */
+    laneItems: "min-h-24 min-w-0 flex-1 flex-col gap-2 overflow-y-auto p-2",
+    /* THE CARD IS THE FULL WIDTH OF ITS LANE.
+    
+           THE ELEMENT IS NOW A `DragDropSurface` — the whole card is the drag
+           source, so this class list is applied to it rather than to a wrapper that
+           holds a grip beside it. What that removed and what it did NOT remove are
+           worth stating separately, because the two were tangled here for a while.
+    
+           REMOVED WITH THE GRIP: `relative`, which existed so the absolutely
+           positioned grip resolved against the card rather than against whatever
+           ancestor up the consumer's tree happened to be positioned; and the left
+           inset (`pl-8`, and `pl-(--tap-target)` under a coarse pointer) that
+           reserved the top-left corner so the grip did not land on the identifier
+           every `RecordCard` puts there. Neither has anything left to do, and the
+           corner is the card's own again.
+    
+           KEPT, AND IT WAS NEVER ABOUT THE GRIP: `w-full` on the card. A `<button>`
+           in a block container is sized SHRINK-TO-FIT, and `display: flex` does not
+           change that — so an `interactive` `RecordCard`, which renders a real
+           `<button>` precisely so Enter and Space work, sizes itself from its own
+           content. Measured in a lane: a button card carrying two words was 61.73px
+           next to a 270px div card in the same column, and one carrying a long
+           title was 270px. Every card a different width, from nothing but how much
+           text it holds, on a board where a card being interactive is the normal
+           case.
+    
+           So the board asserts the geometry it owns. Not on `RecordCard`, which is
+           also used in flex rows and pickers where filling the container is not the
+           right default — the column is this component's to guarantee, so it
+           guarantees it here rather than depending on what `renderItem` returned.
+    
+           The selector no longer has to exclude the grip, because there is no grip
+           left to exclude: the surface has exactly one child, and it is the card.
+           `probe-kanban.mjs` measures the result in a browser, because
+           `getBoundingClientRect` is zero in happy-dom and a suite with no layout
+           engine cannot tell equal widths from no widths at all. */
+    card: "min-w-0 [&>*]:w-full",
+    /* Not `hidden` when a lane fills up — an empty lane still has to be a
+           visible target, and a message is what tells somebody the lane is empty
+           rather than still loading.
+    
+           IT IS RENDERED INSIDE THE LANE BODY, not under it. It used to be a
+           sibling below the scroller, which was invisible while the scroller was
+           sized by its own content and became absurd the moment the body started
+           filling the lane: the message ended up pinned to the bottom of a
+           full-height column with the empty drop area above it. Inside the
+           scroller it sits where the first card would be, which is where a reader
+           looking for cards is already looking. It is not a `[data-dnd-item]`, so
+           the engine does not see it and no index counts it. */
+    laneEmpty: "shrink-0 px-3 py-8 text-center text-2xs text-tertiary"
+  },
+  variants: {
+    /* Whether this lane will accept a drop. The whole lane dims rather than
+       just the note: the cards inside are still draggable OUT, and the surface
+       has to read as "nothing lands here" without reading as "nothing here
+       works". */
+    refusing: {
+      true: { lane: "border-dashed bg-transparent" },
+      false: {}
+    },
+    /* WHERE THE HEIGHT COMES FROM, and there are exactly two answers.
+    
+           `true` — MEASURED. `KanbanBoard` writes an inline `height` from
+           `useFillHeight`: the distance from this element's top to the bottom of
+           whatever scrolls it. No `flex-1` here, deliberately — an item with
+           `flex: 1 1 0%` takes its main size from `flex-basis`, so the inline height
+           would be ignored and the board would go back to sizing from its content
+           while carrying a height that reads as intent and does nothing.
+    
+           `max-h-full` IS THE HALF THAT KEEPS THE MEASUREMENT HONEST. The measured
+           distance answers "how far to the bottom of the screen", which is the wrong
+           number for a board inside a box shorter than that — a 200px card, a
+           dialog. A percentage max-height resolves against a parent with a definite
+           height and computes to `none` against one without, so the bounded case
+           clamps and the unbounded case is untouched, with nothing to detect and no
+           second mode.
+    
+           `false` — INHERITED, which is what the whole slot used to be: `flex-1`
+           against a bounded flex parent, and content sizing when there is not one.
+           Correct while every ancestor cooperates, which is why it is no longer the
+           default — see `KanbanBoardProps.fill`. */
+    fill: {
+      true: { root: "max-h-full" },
+      false: { root: "flex-1" }
+    }
+  },
+  defaultVariants: { refusing: !1, fill: !0 }
+});
+export {
+  r as kanban
+};
+//# sourceMappingURL=recipe.js.map

package/dist/components/kanban/recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipe.js","sources":["../../../src/components/kanban/recipe.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\n/* ----------------------------------------------------------------------------\n   The slots for `KanbanBoard`.\n\n   THE BOARD SCROLLS SIDEWAYS, THE LANE SCROLLS DOWN, AND THEY ARE DIFFERENT\n   ELEMENTS. Six lanes do not fit a laptop, and a lane of forty cards does not\n   fit a screen — but the drop container has to BE the scroller for auto-scroll\n   to find its edges (see `drag-drop/recipe.ts`), so the vertical scroller is\n   the container the engine registers and the horizontal one is the board around\n   it. Putting both on one element gives auto-scroll two axes to fight over on\n   the same box, and the lane drifts sideways while you are carrying a card down\n   it.\n\n   THE LANE HEADER DOES NOT SCROLL WITH THE CARDS. It carries the count against\n   the ceiling, which is the one thing a person is checking while they drag —\n   so it sits outside the scroller rather than at the top of it.\n\n   THE LANE HAS A FIXED WIDTH. A board of `1fr` lanes re-lays-out every time a\n   card moves between them, which moves the card you are aiming at while you\n   aim. A fixed width means the only thing that moves during a drag is the gap\n   that opens.\n\n   THE BOARD FILLS THE HEIGHT IT IS GIVEN, AND THE LANE BODY IS THE ONLY THING\n   THAT SCROLLS DOWN. Reported from a running board: dragging a card into a\n   lane opened the drop placeholder, pushed the resident card out of sight, and\n   put a vertical scrollbar inside a column whose own box had not grown — \"the\n   entire board should fill the remaining screen height. I do not want to be\n   able to scroll the whole page down. I should only be able to scroll\n   individual columns.\"\n\n   Every lane used to be as tall as the tallest one — flex `align-items:\n   stretch` on a row whose height came from its content — so the board grew and\n   shrank as cards moved between lanes, and a lane's `overflow-y-auto` only ever\n   engaged on a lane that had been stretched past its own content by a taller\n   neighbour. That is why the scrollbar appeared exactly when a placeholder\n   opened and never at rest.\n\n   The first fix made the height DERIVED rather than intrinsic: `flex-1` and\n   `min-h-0` chaining from whatever bounded box the consumer put the board in,\n   down through the lane to the lane body, so the body was the one element with\n   a definite height and somewhere to put the extra row.\n\n   THAT WAS RIGHT AND IT WAS NOT ENOUGH, and the shortfall is the reason the\n   report above came back a second time. The chain is only as strong as the\n   ancestor that breaks it: `flex-1` against a block parent is inert, `h-full`\n   against an auto-height parent is `auto`, and ONE ordinary page wrapper above\n   the board — a bare `<div className=\"flex flex-col gap-10\">`, which is this\n   package's own demo layout — collapses the whole thing back to content sizing\n   with nothing reporting a fault. Measured in that state: a 473px board whose\n   lanes scrolled nothing at all (404 against 404), inside a shell column that\n   took the scrollbar instead.\n\n   So the height is now MEASURED by default and derived only on request. The\n   `fill` variant below is where the two live; `KanbanBoardProps.fill` is where\n   the choice is documented. The chain above it is unchanged and still does all\n   the work once this element has a definite height — lane, lane body, floor and\n   all.\n   -------------------------------------------------------------------------- */\n\nexport const kanban = tv({\n  slots: {\n    /* `min-h-0`: be allowed to be SHORTER than the lanes inside, so the\n       overflow has somewhere to go. Whether this box also GROWS is the `fill`\n       variant's job — the two ways it can be given a height are mutually\n       exclusive, and stating both here is what made the wrong one silently\n       win. */\n    root: \"flex min-h-0 min-w-0 gap-3 overflow-x-auto pb-2\",\n\n    /* NO `h-full`, AND IT USED TO BE HERE ON A REASON THAT WAS BACKWARDS.\n\n       The note it replaces said `h-full` \"states what stretch already implies,\n       and it is not redundant: stretch is defeated by anything that gives the\n       lane a definite cross size, and a consumer's `className` reaches this\n       element\". Both halves are wrong. `className` reaches the board ROOT\n       (`cn(s.root(), className)`) — there is no prop that reaches a lane. And\n       the rule it invokes runs the other way: `align-self: stretch` applies\n       only while the cross-size property is `auto`, so writing `height: 100%`\n       is not a restatement of stretch, it is what DEFEATS it.\n\n       Measured in Chromium, two flex rows with identical content, differing\n       only in this declaration: against an INDEFINITE container, `auto` lanes\n       came out 242 / 242 and `height: 100%` lanes came out 242 / 2 — the empty\n       lane collapsed to its own borders, and the row's remaining space belonged\n       to no lane at all. Against a bounded container both came out 398 / 398,\n       which is why this survived so long: it is invisible in exactly the\n       arrangement the demo shipped.\n\n       That collapse is not only a layout blemish. The lane the person sees is\n       what they aim at, and a lane that stops short of the board leaves a band\n       of the board belonging to nothing — reported from a real board as lane\n       sections of 173.55px beside 1071.59px, with the space between them\n       swallowing drops. `resolveTarget` no longer resolves such a point to the\n       last lane crossed (see `lib/dnd/geometry.ts`), and the region should not\n       be there in the first place.\n\n       `min-h-0` is the half that always did the work — without it a flex item's\n       automatic minimum is its content, so a lane full of cards refuses to be\n       shorter than the cards and pushes the board taller instead of\n       scrolling. */\n    lane: \"flex min-h-0 w-72 shrink-0 flex-col rounded-xl border border-border-subtle bg-surface-sunken\",\n\n    laneHeader: \"flex shrink-0 items-start gap-2 border-b border-border-subtle px-3 py-2.5\",\n    laneLabel: \"text-2xs font-semibold uppercase tracking-widest text-tertiary\",\n    laneHint: \"truncate text-2xs text-secondary\",\n\n    /* The scroller AND the drop container: one element, per the banner. It is\n       also the ONLY element in the board that scrolls vertically.\n\n       THE FLOOR IS 6rem AND IT USED TO BE 10rem. A minimum height is a refusal\n       to shrink, so on a short viewport a 10rem floor was enough to push a lane\n       past a bounded board and hand the board back the vertical scrollbar this\n       change exists to remove. 6rem still leaves an empty lane an obvious\n       target in an unbounded board, which is the only case the floor is for. */\n    laneItems: \"min-h-24 min-w-0 flex-1 flex-col gap-2 overflow-y-auto p-2\",\n\n    /* THE CARD IS THE FULL WIDTH OF ITS LANE.\n\n       THE ELEMENT IS NOW A `DragDropSurface` — the whole card is the drag\n       source, so this class list is applied to it rather than to a wrapper that\n       holds a grip beside it. What that removed and what it did NOT remove are\n       worth stating separately, because the two were tangled here for a while.\n\n       REMOVED WITH THE GRIP: `relative`, which existed so the absolutely\n       positioned grip resolved against the card rather than against whatever\n       ancestor up the consumer's tree happened to be positioned; and the left\n       inset (`pl-8`, and `pl-(--tap-target)` under a coarse pointer) that\n       reserved the top-left corner so the grip did not land on the identifier\n       every `RecordCard` puts there. Neither has anything left to do, and the\n       corner is the card's own again.\n\n       KEPT, AND IT WAS NEVER ABOUT THE GRIP: `w-full` on the card. A `<button>`\n       in a block container is sized SHRINK-TO-FIT, and `display: flex` does not\n       change that — so an `interactive` `RecordCard`, which renders a real\n       `<button>` precisely so Enter and Space work, sizes itself from its own\n       content. Measured in a lane: a button card carrying two words was 61.73px\n       next to a 270px div card in the same column, and one carrying a long\n       title was 270px. Every card a different width, from nothing but how much\n       text it holds, on a board where a card being interactive is the normal\n       case.\n\n       So the board asserts the geometry it owns. Not on `RecordCard`, which is\n       also used in flex rows and pickers where filling the container is not the\n       right default — the column is this component's to guarantee, so it\n       guarantees it here rather than depending on what `renderItem` returned.\n\n       The selector no longer has to exclude the grip, because there is no grip\n       left to exclude: the surface has exactly one child, and it is the card.\n       `probe-kanban.mjs` measures the result in a browser, because\n       `getBoundingClientRect` is zero in happy-dom and a suite with no layout\n       engine cannot tell equal widths from no widths at all. */\n    card: \"min-w-0 [&>*]:w-full\",\n\n    /* Not `hidden` when a lane fills up — an empty lane still has to be a\n       visible target, and a message is what tells somebody the lane is empty\n       rather than still loading.\n\n       IT IS RENDERED INSIDE THE LANE BODY, not under it. It used to be a\n       sibling below the scroller, which was invisible while the scroller was\n       sized by its own content and became absurd the moment the body started\n       filling the lane: the message ended up pinned to the bottom of a\n       full-height column with the empty drop area above it. Inside the\n       scroller it sits where the first card would be, which is where a reader\n       looking for cards is already looking. It is not a `[data-dnd-item]`, so\n       the engine does not see it and no index counts it. */\n    laneEmpty: \"shrink-0 px-3 py-8 text-center text-2xs text-tertiary\",\n  },\n  variants: {\n    /* Whether this lane will accept a drop. The whole lane dims rather than\n       just the note: the cards inside are still draggable OUT, and the surface\n       has to read as \"nothing lands here\" without reading as \"nothing here\n       works\". */\n    refusing: {\n      true: { lane: \"border-dashed bg-transparent\" },\n      false: {},\n    },\n\n    /* WHERE THE HEIGHT COMES FROM, and there are exactly two answers.\n\n       `true` — MEASURED. `KanbanBoard` writes an inline `height` from\n       `useFillHeight`: the distance from this element's top to the bottom of\n       whatever scrolls it. No `flex-1` here, deliberately — an item with\n       `flex: 1 1 0%` takes its main size from `flex-basis`, so the inline height\n       would be ignored and the board would go back to sizing from its content\n       while carrying a height that reads as intent and does nothing.\n\n       `max-h-full` IS THE HALF THAT KEEPS THE MEASUREMENT HONEST. The measured\n       distance answers \"how far to the bottom of the screen\", which is the wrong\n       number for a board inside a box shorter than that — a 200px card, a\n       dialog. A percentage max-height resolves against a parent with a definite\n       height and computes to `none` against one without, so the bounded case\n       clamps and the unbounded case is untouched, with nothing to detect and no\n       second mode.\n\n       `false` — INHERITED, which is what the whole slot used to be: `flex-1`\n       against a bounded flex parent, and content sizing when there is not one.\n       Correct while every ancestor cooperates, which is why it is no longer the\n       default — see `KanbanBoardProps.fill`. */\n    fill: {\n      true: { root: \"max-h-full\" },\n      false: { root: \"flex-1\" },\n    },\n  },\n  defaultVariants: { refusing: false, fill: true },\n});\n"],"names":["kanban","tv"],"mappings":";AA4DO,MAAMA,IAASC,EAAG;AAAA,EACvB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAML,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiCN,MAAM;AAAA,IAEN,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAqCX,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcN,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKR,UAAU;AAAA,MACR,MAAM,EAAE,MAAM,+BAAA;AAAA,MACd,OAAO,CAAA;AAAA,IAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBV,MAAM;AAAA,MACJ,MAAM,EAAE,MAAM,aAAA;AAAA,MACd,OAAO,EAAE,MAAM,SAAA;AAAA,IAAS;AAAA,EAC1B;AAAA,EAEF,iBAAiB,EAAE,UAAU,IAAO,MAAM,GAAA;AAC5C,CAAC;"}