@danxbot/ui 2.5.0 → 2.6.0

package/dist/index.js

@@ -38648,6 +38648,90 @@ const vx = kt({
     laneHint: "truncate text-2xs text-secondary",
     /* The scroller AND the drop container: one element, per the banner. */
     laneItems: "min-h-40 flex-col gap-2 overflow-y-auto p-2",
+    /* THE CARD IS THE FULL WIDTH OF ITS LANE, AND THE GRIP SITS ON TOP OF IT.
+    
+           The grip used to be a FLEX SIBLING of the card — `flex items-start gap-1`
+           with a 24px handle and a `flex-1` card — which took the handle's width
+           plus the gap off the card. Two things were wrong with that and only one
+           of them was reported.
+    
+           THE ONE THAT WAS REPORTED. A 286px lane rendered a 242px card, so every
+           card was inset 28px from the left edge its own lane header was flush
+           with, and the grip floated in the resulting dead space, vertically
+           centred against the card's full height rather than sitting near anything.
+           The two columns of a board — the header row and the cards under it — did
+           not line up.
+    
+           THE ONE THAT WAS NOT. A `flex-1` card is sized by what is left after its
+           siblings, so ANYTHING that changes a sibling's contribution comes off the
+           card instead of being absorbed. The handle is `shrink-0` and `dx-tap`, so
+           its width is `--tap-target` — `auto` on a mouse, 44px on a coarse
+           pointer. The same board therefore drew a 242px card on a laptop and a
+           222px one on a tablet, from the same lane. Sizing a card from its
+           siblings is the shape of that defect; taking the grip out of flow removes
+           the shape, not just the instance.
+    
+           So the card is the only IN-FLOW child here, and a flex column stretches
+           it to the lane.
+    
+           AND THE WIDTH IS THEN ASSERTED, because being the only in-flow child is
+           not sufficient on its own. 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 this
+           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.
+    
+           `w-full` on whatever the consumer rendered is the board asserting 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` happened to return.
+    
+           The result is that nothing about the card — emphasis, selection, a ring,
+           how many chips it carries, whether it is a button or a div — can reach
+           its width. `probe-kanban.mjs` measures that 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.
+    
+           `relative` IS DECLARED HERE, DELIBERATELY. The grip is absolute, so it
+           resolves against the nearest positioned ancestor — and inheriting one by
+           luck from somewhere up the consumer's tree means the day that ancestor
+           stops being positioned, every grip on the board jumps to the page.
+    
+           THE CORNER IS RESERVED ON THE CARD, RATHER THAN THE GRIP SITTING IN THE
+           CARD'S OWN PADDING GUTTER — and that is a choice between two imperfect
+           options, so here is why.
+    
+           The card comes from `renderItem` and is opaque: the board cannot reach
+           inside it, and its padding is whatever the consumer chose. `RecordCard`
+           is `p-3`, so its gutter is 12px and its first line — the identifier, at
+           the top-left — starts there. The grip is 24px. Dropping it in that gutter
+           lands it on the identifier of every card on the board, which is the one
+           thing on a record card that is never optional.
+    
+           So the board reserves the corner instead, on whatever the consumer
+           rendered. `:not([data-dnd-handle])` rather than a positional selector
+           because the grip is a child of this element too, and `pl-` on the grip
+           would push its own glyph out of its own box.
+    
+           `pointer-coarse:pl-(--tap-target)` for the same reason `Input`'s leading
+           adornment carries the pair: `dx-tap` grows the grip to 44px under a
+           finger, and a reservation measured against the mouse size would let the
+           hit target cover the identifier it was moved off. */
+    card: [
+      "relative min-w-0",
+      "[&>:not([data-dnd-handle])]:w-full",
+      "[&>:not([data-dnd-handle])]:pl-8",
+      "pointer-coarse:[&>:not([data-dnd-handle])]:pl-(--tap-target)"
+    ],
+    /* Overlaid on the card's top-left corner, in the space `card` reserves.
+       Not `z-*`: the card is in normal flow and this is positioned, so it
+       already paints above — and a z-index here would open a stacking context
+       for a 24px grip. */
+    cardHandle: "absolute top-0 left-0",
     /* 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. */
@@ -38759,15 +38843,15 @@ function G3({
                     id: n(w),
                     index: x,
                     label: r(w),
-                    children: /* @__PURE__ */ M("div", { className: "flex items-start gap-1", children: [
+                    children: /* @__PURE__ */ M("div", { className: m.card(), children: [
                       /* @__PURE__ */ p(
                         wh,
                         {
                           label: `Move ${r(w)}`,
-                          className: "mt-2 shrink-0"
+                          className: m.cardHandle()
                         }
                       ),
-                      /* @__PURE__ */ p("div", { className: "min-w-0 flex-1", children: o(w) })
+                      o(w)
                     ] })
                   },
                   n(w)