@celestia-island/hikari 0.55.121 → 0.55.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.121",
+  "version": "0.55.123",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkButton.scss

@@ -168,6 +168,135 @@
   width: 100%;
 }
 
+/* ---- Responsive label collapse ---- */
+/* A `collapseLabel` button carries icon + text at wide viewports and
+   collapses to the SAME icon-only square below the chosen breakpoint
+   (chest 2026-10-05 direction: the ad-hoc `hidden sm:inline` label-span
+   pattern left the button as a padded icon rectangle on phones — the
+   exact squat shape the icon-only contract exists to prevent). The
+   geometry mirrors the icon-only ladder above per size; the breakpoint
+   px values mirror the runtime useBreakpoint scale (sm 640 / md 768 /
+   lg 1024 / xl 1280) — a media query cannot read the TS constant, keep
+   the two tables in sync. The TS side suppresses the collapse class
+   together with `block` (a full-width button has nothing to collapse
+   into), so no block override is needed here. */
+.hk-btn-label {
+  /* Inline-flex so multi-node labels (text + inline marks) stay on one
+     row and center against the glyph box. */
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+@mixin hk-btn-collapse-geometry($square) {
+  .hk-btn-label {
+    display: none;
+  }
+
+  /* The exact icon-only geometry (all-side padding zero, width locked),
+     mirrored per size from the ladder above. */
+  padding: 0;
+  box-sizing: border-box;
+  width: $square;
+}
+
+.hk-btn-label-collapse-sm.hk-btn-xs {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-sm {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-md {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-lg {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-xs {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-sm {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-md {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-lg {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-xs {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-sm {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-md {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-lg {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-xs {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-sm {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-md {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-lg {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+
 /* ---- Primary ---- */
 
 .hk-btn-primary {

package/src/components/HkButton.test.tsx

@@ -255,3 +255,134 @@ describe("HkButton attr fallthrough (inheritAttrs: false)", () => {
     expect(cls).toContain("extra-class");
   });
 });
+
+describe("HkButton label prop + responsive collapse contract", () => {
+  it("renders the label prop in a .hk-btn-label span and keeps the button textual", () => {
+    const c = mount(h(HkButton, { icon: "gauge", label: "Test all" }));
+    const btn = button(c);
+    const label = c.querySelector(".hk-btn-label");
+    expect(label).not.toBeNull();
+    expect(label!.textContent).toBe("Test all");
+    // icon + label = a text button at wide viewports, never icon-only.
+    expect(btn.className).not.toContain("hk-btn-icon-only");
+    // The label prop is the accessible name unless one is given.
+    expect(btn.getAttribute("aria-label")).toBe("Test all");
+  });
+
+  it("prefers the label prop over the default slot and an explicit ariaLabel over the label", () => {
+    const c = mount(h(HkButton, { label: "From prop" }, () => "From slot"));
+    expect(c.querySelector(".hk-btn-label")!.textContent).toBe("From prop");
+    expect(c.textContent).not.toContain("From slot");
+
+    const named = mount(h(HkButton, { label: "Visible", ariaLabel: "Custom" }));
+    expect(button(named).getAttribute("aria-label")).toBe("Custom");
+  });
+
+  it("emits the collapse modifier class from collapseLabel", () => {
+    const c = mount(h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm" }));
+    expect(button(c).className).toContain("hk-btn-label-collapse-sm");
+  });
+
+  it("suppresses the collapse class with block or shortcut (nothing to collapse into)", () => {
+    const blocked = mount(
+      h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm", block: true }),
+    );
+    expect(button(blocked).className).not.toContain("hk-btn-label-collapse");
+
+    const withShortcut = mount(
+      h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm", shortcut: "Ctrl+B" }),
+    );
+    expect(button(withShortcut).className).not.toContain("hk-btn-label-collapse");
+  });
+
+  it("keeps label-prop buttons out of the icon-only square class", () => {
+    // The narrow-end square is the SCSS media query's job; the class
+    // must not flip at mount time or the wide viewport would square a
+    // labeled button.
+    const c = mount(h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm" }));
+    expect(button(c).className).not.toContain("hk-btn-icon-only");
+  });
+});
+
+// SCSS geometry contract for the responsive collapse (same textual style
+// as the icon-only contract above — happy-dom does not lay out): every
+// collapse breakpoint × size pair must exist, must collapse below the
+// useBreakpoint px scale (sm 640 / md 768 / lg 1024 / xl 1280), and must
+// land on the exact icon-only square width of its size.
+describe("HkButton label-collapse SCSS contract", () => {
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+
+  const breakpoints: Array<[string, string]> = [
+    ["sm", "639.98px"],
+    ["md", "767.98px"],
+    ["lg", "1023.98px"],
+    ["xl", "1279.98px"],
+  ];
+  const squares: Array<[string, string]> = [
+    ["xs", "1.375rem"],
+    ["sm", "1.75rem"],
+    ["md", "2.5rem"],
+    ["lg", "2.75rem"],
+  ];
+
+  it("collapses every breakpoint × size pair to the icon-only square", () => {
+    for (const [bp, query] of breakpoints) {
+      for (const [size, square] of squares) {
+        const rule = scss.match(
+          new RegExp(
+            `\\.hk-btn-label-collapse-${bp}\\.hk-btn-${size}\\s*{\\s*@media \\(max-width: ${query}\\) {`,
+          ),
+        )?.[0];
+        expect(rule, `${bp}×${size} collapse rule must exist`).toBeTruthy();
+      }
+    }
+  });
+
+  it("hides the label and lands on the exact square inside each media block", () => {
+    // The per-pair rules @include one shared mixin; the geometry lives in
+    // its definition (the compiled CSS materializes it per media block).
+    const start = scss.indexOf("@mixin hk-btn-collapse-geometry($square) {");
+    expect(start, "collapse mixin must exist").toBeGreaterThan(-1);
+    // Slice to the mixin's closing brace (nested rules make a [^}] scan
+    // stop early, so index from the header to the documented tail line).
+    const end = scss.indexOf("width: $square;", start);
+    const mixin = scss.slice(start, end + "width: $square;".length);
+    expect(mixin).toContain(".hk-btn-label");
+    expect(mixin).toContain("display: none;");
+    expect(mixin).toContain("padding: 0;");
+    expect(mixin).toContain("box-sizing: border-box;");
+    expect(mixin).toContain("width: $square");
+
+    const smBlock = scss.match(
+      /\.hk-btn-label-collapse-sm\.hk-btn-sm\s*{\s*@media \(max-width: 639\.98px\) {([^}]*)}/,
+    )?.[1];
+    expect(smBlock, "sm×sm collapse body must exist").toBeTruthy();
+    expect(smBlock).toContain("@include hk-btn-collapse-geometry(1.75rem)");
+  });
+
+  it("mirrors the useBreakpoint scale breakpoints in order", () => {
+    // Keep the SCSS table honest against the runtime scale document —
+    // the px values appear in ascending breakpoint order.
+    const queries = [...scss.matchAll(/@media \(max-width: (\d+(?:\.\d+)?px)\)/g)].map(
+      (m) => m[1],
+    );
+    expect(queries).toEqual([
+      "639.98px",
+      "639.98px",
+      "639.98px",
+      "639.98px",
+      "767.98px",
+      "767.98px",
+      "767.98px",
+      "767.98px",
+      "1023.98px",
+      "1023.98px",
+      "1023.98px",
+      "1023.98px",
+      "1279.98px",
+      "1279.98px",
+      "1279.98px",
+      "1279.98px",
+    ]);
+  });
+});

package/src/components/HkButton.tsx

@@ -13,6 +13,14 @@ export type ButtonVariant =
   | "outline";
 export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
+/** Breakpoints below which a `collapseLabel` button hides its label and
+ *  collapses to the icon-only square. Mirrors the runtime useBreakpoint
+ *  scale (sm 640 / md 768 / lg 1024 / xl 1280) — the SCSS side repeats
+ *  the px values because a media query cannot read a TS constant; keep
+ *  the two in sync. "xs" is deliberately absent: collapse-at-xs means
+ *  "always collapsed", which is just the icon prop + label-less button. */
+export type ButtonLabelCollapse = "sm" | "md" | "lg" | "xl";
+
 export default defineComponent({
   name: "HkButton",
   inheritAttrs: false,
@@ -26,6 +34,24 @@ export default defineComponent({
     shortcut: { type: String, default: undefined },
     icon: { type: String, default: undefined },
     suffix: { type: String, default: undefined },
+    /** Plain-text label, rendered in a `.hk-btn-label` span after the
+     *  glyph. Pairs with `collapseLabel`: at wide viewports the button
+     *  reads icon + text; below the chosen breakpoint the label hides
+     *  and the button collapses to the icon-only square. When set, the
+     *  default slot is ignored (one label source per button) and the
+     *  accessible name falls back to this text, so the button keeps its
+     *  name at breakpoints where the visible label is display:none. */
+    label: { type: String, default: undefined },
+    /** Breakpoint below which the label hides and the button collapses
+     *  to the icon-only square (see `ButtonLabelCollapse`). Requires
+     *  `label`; ignored together with `block` (a full-width button has
+     *  nothing to collapse into) and with `shortcut` (the shortcut chip
+     *  is an extra child the square width would visibly clip — the same
+     *  exclusion the icon-only contract applies). */
+    collapseLabel: {
+      type: String as PropType<ButtonLabelCollapse>,
+      default: undefined,
+    },
   },
   emits: {
     click: (_e: MouseEvent) => true,
@@ -40,6 +66,9 @@ export default defineComponent({
       props.block ? "hk-btn-block" : "",
       props.loading ? "hk-btn-loading" : "",
       props.shortcut ? "hk-btn-has-shortcut" : "",
+      props.collapseLabel && props.label && !props.block && !props.shortcut
+        ? `hk-btn-label-collapse-${props.collapseLabel}`
+        : "",
     ]);
 
     return () => {
@@ -51,9 +80,13 @@ export default defineComponent({
       // reactive, so a cached flag would go stale when a parent toggles
       // the label slot without touching the icon props. A shortcut chip
       // is excluded: it renders as an extra flex child the fixed square
-      // width would visibly clip.
+      // width would visibly clip. A `label` prop counts as text (the
+      // responsive collapse handles the narrow end via CSS instead).
       const iconOnly =
-        !slots.default && Boolean(props.icon || props.suffix) && !props.shortcut;
+        !slots.default &&
+        props.label === undefined &&
+        Boolean(props.icon || props.suffix) &&
+        !props.shortcut;
 
       return (
         <button
@@ -62,7 +95,7 @@ export default defineComponent({
           disabled={props.disabled || props.loading}
           class={[buttonClass.value, iconOnly ? "hk-btn-icon-only" : "", attrs.class]}
           style={attrs.style || undefined}
-          aria-label={props.ariaLabel}
+          aria-label={props.ariaLabel ?? props.label}
           aria-busy={props.loading || undefined}
           onClick={(e) => emit("click", e)}
         >
@@ -116,7 +149,11 @@ export default defineComponent({
               <HIcon name={props.icon} size={16} />
             </span>
           ) : null}
-          {slots.default?.()}
+          {props.label !== undefined && props.label !== "" ? (
+            <span class="hk-btn-label">{props.label}</span>
+          ) : (
+            slots.default?.()
+          )}
           {props.suffix ? (
             <span class="hk-btn-suffix">
               <HIcon name={props.suffix} size={16} />

package/src/components/HkTable.drag.test.tsx

@@ -13,9 +13,16 @@ import HTable from "./HkTable";
  *   `reorder(from, to)` as indices into `rows` (the consumer applies
  *   moveTo(rows, from, to) — insert-at-target)
  * - a pointer drag past the neighbours' midpoints emits the same pair
+ * - the drag LIFTS: a detached ghost (a snapshot of the pressed row on
+ *   <body>) follows the pointer, the pressed row stays behind as the
+ *   equal-size placeholder (dimmed), and the slot the pointer resolves to
+ *   is painted by shifting the arrangement — the placeholder translates
+ *   onto the target row's spot, the rows in between glide one across
+ * - a real drop FREEZES the arrangement until the consumer's `rows`
+ *   carries it; a cancelled gesture glides everything home and never
+ *   emits
  * - the emit is INERT while a column sort is active (a derived arrangement
  *   cannot be reproduced by a two-index move) and the grips announce it
- * - a cancelled gesture never emits
  * - HkAdminTablePage forwards `draggable` + `reorder` (source contract)
  *
  * (Repo test convention: raw createApp + document queries, no
@@ -31,6 +38,9 @@ afterEach(() => {
     app.unmount();
     container.remove();
   }
+  // A ghost fading at release is removed by a bus timer — a test that
+  // ends inside that window must not leak it into the next one.
+  document.body.querySelectorAll(".hk-table-drag-ghost").forEach((n) => n.remove());
 });
 
 interface RowsRef {
@@ -236,7 +246,7 @@ describe("HkTable drag-to-reorder", () => {
     expect(t.container.querySelectorAll('tbody [data-dragging]').length).toBe(0);
   });
 
-  it("paints the insertion cue on the row the pointer resolves to", async () => {
+  it("shifts the arrangement onto the slot the pointer resolves to", async () => {
     const t = mountTable(3);
     const grip = handles(t.container)[0]!;
     grip.dispatchEvent(pointer("pointerdown", 18, 20));
@@ -244,12 +254,264 @@ describe("HkTable drag-to-reorder", () => {
     await nextTick();
     // Pointer between rows 1 (mid 60) and 2 (mid 100): the walk stops at
     // display row 2 (main=70 < mid 100) → slot 2, from=0 → insert-at-target
-    // = 1 (drop row 0 ON row 1); the cue rides display row 1's top edge.
+    // = 1. The placeholder (row 0) rides DOWN onto row 1's spot and row 1
+    // glides UP into the vacated slot — the swap the user watches, not a
+    // line on an edge. Row 2 is untouched.
     const trs = t.container.querySelectorAll("tbody .hk-table-row");
-    expect(trs[1]?.getAttribute("data-drop")).toBe("before");
+    // The row NAMES the shift (custom property + data-shift); the
+    // stylesheet moves its cells — happy-dom computes no CSS, so the
+    // paint wiring is pinned by the source contract below.
+    expect((trs[0]?.getAttribute("style") ?? "").replace(/\s+/g, "")).toContain("--hk-drag-shift:40px");
+    expect(trs[0]?.hasAttribute("data-shift")).toBe(true);
+    expect((trs[1]?.getAttribute("style") ?? "").replace(/\s+/g, "")).toContain("--hk-drag-shift:-40px");
+    expect(trs[1]?.hasAttribute("data-shift")).toBe(true);
+    expect(trs[2]?.getAttribute("style")).toBeNull();
+    expect(trs[2]?.hasAttribute("data-shift")).toBe(false);
     window.dispatchEvent(pointer("pointerup", 18, 70));
     await nextTick();
-    expect(trs[1]?.getAttribute("data-drop")).toBeNull();
+  });
+
+  it("paints no shift while the pointer still resolves to the dragged row", async () => {
+    const t = mountTable(3);
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    // Past the threshold but still inside row 0's own band (mid 20): the
+    // resolved slot is the row's own — an arrangement equal to the strip
+    // as laid out must not paint transforms.
+    window.dispatchEvent(pointer("pointermove", 18, 26));
+    await nextTick();
+    for (const tr of t.container.querySelectorAll("tbody .hk-table-row")) {
+      expect(tr.getAttribute("style")).toBeNull();
+    }
+    window.dispatchEvent(pointer("pointerup", 18, 26));
+    await nextTick();
+    expect(t.emitted).toEqual([]);
+  });
+
+  /** One animation-bus frame: the ghost attaches on `onceFrame`, so a lift
+   *  is only observable after the bus drains a frame. */
+  async function busFrame(): Promise<void> {
+    await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+    await nextTick();
+  }
+
+  function ghost(): HTMLElement | null {
+    // The LIVE ghost only — a previous gesture's node fading out is no
+    // longer the lift.
+    return document.body.querySelector<HTMLElement>(".hk-table-drag-ghost:not([data-fading])");
+  }
+
+  it("lifts the pressed row as a detached ghost over an equal-size placeholder", async () => {
+    const t = mountTable(3);
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    window.dispatchEvent(pointer("pointermove", 18, 26));
+    await nextTick();
+    await busFrame();
+    // The ghost is a snapshot of the pressed row, mounted on <body> — NOT
+    // the strip — and carries no placeholder paint of its own.
+    const g = ghost();
+    expect(g, "the drag ghost on body").toBeTruthy();
+    expect(g!.textContent).toContain("Row-0");
+    expect(g!.querySelector("[data-dragging]")).toBeNull();
+    // The strip row it left is the placeholder: dimmed in place, same
+    // element (so exactly the size the strip laid out).
+    const trs = t.container.querySelectorAll("tbody .hk-table-row");
+    expect(trs[0]?.hasAttribute("data-dragging")).toBe(true);
+    expect(trs[0]?.getAttribute("style")).toBeNull();
+    window.dispatchEvent(pointer("pointerup", 18, 26));
+    await nextTick();
+  });
+
+  it("the ghost follows the pointer vertically and stays anchored to the row's left edge", async () => {
+    const t = mountTable(3);
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    window.dispatchEvent(pointer("pointermove", 18, 26));
+    await nextTick();
+    await busFrame();
+    const g = ghost();
+    expect(g?.style.transform).toContain("translate3d(0px, 0px");
+    // Straight down from the press (86 - 20: the grab point stays under
+    // the pointer), and a horizontal jitter must NOT slide the ghost
+    // sideways. The move rides its own task, as a real gesture's does.
+    window.dispatchEvent(pointer("pointermove", 90, 86));
+    expect(g?.style.transform).toContain("translate3d(0px, 66px");
+    window.dispatchEvent(pointer("pointerup", 90, 86));
+    await nextTick();
+  });
+
+  it("a real drop freezes the arrangement until the consumer's rows carry it", async () => {
+    const t = mountTable(3);
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    window.dispatchEvent(pointer("pointermove", 18, 70));
+    await nextTick();
+    await busFrame();
+    window.dispatchEvent(pointer("pointerup", 18, 70));
+    await nextTick();
+    // Dropped 0 → 1: the emit flew, but the consumer has not applied the
+    // move yet — the dropped arrangement must STAY painted (no snap back
+    // to the pre-drop order while the commit is in the air), the
+    // placeholder is un-dimmed, and the ghost is fading at the slot.
+    expect(t.emitted).toEqual([[0, 1]]);
+    const trs = t.container.querySelectorAll("tbody .hk-table-row");
+    expect((trs[0]?.getAttribute("style") ?? "").replace(/\s+/g, "")).toContain("--hk-drag-shift:40px");
+    expect(trs[0]?.hasAttribute("data-dragging")).toBe(false);
+    expect(document.body.querySelector(".hk-table-drag-ghost[data-fading]")).toBeTruthy();
+    expect(t.container.querySelector("table")?.hasAttribute("data-shift-held")).toBe(true);
+    // The consumer applies the emitted move: the hold lifts in the same
+    // paint that carries the new order (which is where the shift already
+    // put the rows — no jump).
+    await t.apply(0, 1);
+    const settled = t.container.querySelectorAll("tbody .hk-table-row");
+    for (const tr of settled) expect(tr.getAttribute("style")).toBeNull();
+    expect(t.container.querySelector("table")?.hasAttribute("data-shift-held")).toBe(false);
+  });
+
+  it("a cancelled gesture glides the arrangement home and never emits", async () => {
+    const t = mountTable(3);
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    window.dispatchEvent(pointer("pointermove", 18, 70));
+    await nextTick();
+    expect(
+      (t.container.querySelector("tbody .hk-table-row")?.getAttribute("style") ?? "").replace(/\s+/g, ""),
+    ).toContain("--hk-drag-shift:40px");
+    window.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true, pointerId: 7 }));
+    await nextTick();
+    // No emit, transforms off. The release beat keeps the transitions
+    // ARMED (data-releasing) for exactly one shift window — a CSS
+    // transition reads the after-change style, so without it the glide
+    // home would snap.
+    expect(t.emitted).toEqual([]);
+    expect(t.container.querySelector("table")?.hasAttribute("data-releasing")).toBe(true);
+    for (const tr of t.container.querySelectorAll("tbody .hk-table-row")) {
+      expect(tr.getAttribute("style")).toBeNull();
+    }
+    // The beat lapses: the strip is idle again, no arming left behind.
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    expect(t.container.querySelector("table")?.hasAttribute("data-releasing")).toBe(false);
+  });
+
+  it("a new drag while a held arrangement is painted measures the clean strip", async () => {
+    const t = mountTable(3);
+    // First drag: drop 0 → 1 and leave the arrangement held (the consumer
+    // has not applied it).
+    const grip0 = handles(t.container)[0]!;
+    grip0.dispatchEvent(pointer("pointerdown", 18, 20));
+    window.dispatchEvent(pointer("pointermove", 18, 70));
+    window.dispatchEvent(pointer("pointerup", 18, 70));
+    await nextTick();
+    expect(t.container.querySelector("table")?.hasAttribute("data-shift-held")).toBe(true);
+    // Second drag starts immediately: the stale shifts must not pollute
+    // the measurement — the new gesture resolves against the strip the
+    // data describes (row 0 at top 0), not against the shifted paint.
+    const grip1 = handles(t.container)[1]!;
+    grip1.dispatchEvent(pointer("pointerdown", 18, 60));
+    window.dispatchEvent(pointer("pointermove", 18, 66));
+    await nextTick();
+    // Dragging the (display) row 1 in its own band: no arrangement shift.
+    for (const tr of t.container.querySelectorAll("tbody .hk-table-row")) {
+      const style = tr.getAttribute("style") ?? "";
+      // Row 0 still carries the HELD first-drop shift only if the second
+      // gesture resolved nothing — but the hold was released by the new
+      // drag, so nothing may be painted.
+      expect(style).not.toContain("--hk-drag-shift");
+    }
+    window.dispatchEvent(pointer("pointerup", 18, 66));
+    await nextTick();
+    expect(t.emitted).toEqual([[0, 1]]);
+  });
+
+  it("shifts pixel-exact across UNEVEN rows", async () => {
+    // happy-dom pins the geometry by hand, so uneven heights are one
+    // defineProperty away: a 40/100/20 strip exercises the anchored-delta
+    // math the uniform grid cannot distinguish from a height product.
+    const t = mountTable(3);
+    const heights = [40, 100, 20];
+    const tops: number[] = [];
+    let acc = 0;
+    t.container.querySelectorAll("tbody .hk-table-row").forEach((tr, i) => {
+      tops.push(acc);
+      const box = { left: 0, right: 300, top: acc, bottom: acc + heights[i]!, width: 300, height: heights[i]!, x: 0, y: acc };
+      Object.defineProperty(tr, "getBoundingClientRect", { configurable: true, value: () => box as DOMRect });
+      acc += heights[i]!;
+    });
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    // Past row 1's midpoint (top 40 + 50 = 90) but inside row 2 (140..160):
+    // slot 2, from 0 → insert-at-target 1: the placeholder takes row 1's
+    // spot (top 40), row 1 takes the placeholder's (top 0).
+    window.dispatchEvent(pointer("pointermove", 18, 145));
+    await nextTick();
+    const trs = t.container.querySelectorAll("tbody .hk-table-row");
+    expect((trs[0]?.getAttribute("style") ?? "").replace(/\s+/g, "")).toContain(`--hk-drag-shift:${tops[1]! - tops[0]!}px`);
+    expect((trs[1]?.getAttribute("style") ?? "").replace(/\s+/g, "")).toContain(`--hk-drag-shift:${tops[0]! - tops[1]!}px`);
+    expect(trs[2]?.getAttribute("style")).toBeNull();
+    window.dispatchEvent(pointer("pointerup", 18, 145));
+    await nextTick();
+  });
+
+  it("re-measures when the consumer replaces rows UNDER a live drag", async () => {
+    const t = mountTable(3);
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    window.dispatchEvent(pointer("pointermove", 18, 70));
+    await nextTick();
+    expect(
+      (t.container.querySelector("tbody .hk-table-row")?.getAttribute("style") ?? "").replace(/\s+/g, ""),
+    ).toContain("--hk-drag-shift");
+    // The refresh lands mid-drag (a websocket push, a concurrent editor):
+    // the strip re-orders (the engine keeps the drag on the pressed
+    // ELEMENT, which now sits at display index 1) and the replacement
+    // must re-measure — the paint drops until the next resolution.
+    await t.setOrder([t.rows.value![2]!, t.rows.value![0]!, t.rows.value![1]!]);
+    // A SECOND push relayouts the strip UNEVEN (0 / 100 / 200): a shift
+    // computed against the stale 40px tops would read ±80px where the
+    // fresh measurement must read ±100px — the assertion separates
+    // re-measured from stale.
+    const trs = t.container.querySelectorAll("tbody .hk-table-row");
+    const stripTops = [0, 100, 200];
+    const stripHeights = [100, 100, 20];
+    trs.forEach((tr, i) => {
+      const start = stripTops[i]!;
+      const box = { left: 0, right: 300, top: start, bottom: start + stripHeights[i]!, width: 300, height: stripHeights[i]!, x: 0, y: start };
+      Object.defineProperty(tr, "getBoundingClientRect", { configurable: true, value: () => box as DOMRect });
+    });
+    t.rows.value = t.rows.value!.slice();
+    await nextTick();
+    // Gliding the pointer into the last row's band re-resolves the slot
+    // against the NEW strip: insert at 2 → the pressed row takes row 2's
+    // spot and row 2 takes the vacated one.
+    window.dispatchEvent(pointer("pointermove", 18, 215));
+    await nextTick();
+    const styles = [...trs].map((tr) => (tr.getAttribute("style") ?? "").replace(/\s+/g, ""));
+    expect(styles[1]).toContain("--hk-drag-shift:100px");
+    expect(styles[2]).toContain("--hk-drag-shift:-100px");
+    // Row 0 left put: no shift named. (happy-dom renders Vue's cleared
+    // style binding as an empty style="" husk; real engines drop it.)
+    expect(styles[0]).not.toContain("--hk-drag-shift");
+    window.dispatchEvent(pointer("pointerup", 18, 215));
+    await nextTick();
+    // The gesture ends with the drop against the replaced strip.
+    expect(t.emitted).toEqual([[1, 2]]);
+  });
+
+  it("the ghost is hidden from the accessibility tree and carries no focusable chrome", async () => {
+    const t = mountTable(3);
+    const grip = handles(t.container)[0]!;
+    grip.dispatchEvent(pointer("pointerdown", 18, 20));
+    window.dispatchEvent(pointer("pointermove", 18, 26));
+    await nextTick();
+    await busFrame();
+    const g = ghost();
+    expect(g?.getAttribute("aria-hidden")).toBe("true");
+    // The snapshot stripped the grip's tabindex/role: no second tab stop.
+    expect(g?.querySelector("[tabindex]")).toBeNull();
+    expect(g?.querySelector('[role="button"]')).toBeNull();
+    window.dispatchEvent(pointer("pointerup", 18, 26));
+    await nextTick();
   });
 
   it("is inert while a column sort is active — grips announce disabled and emits never fire", async () => {
@@ -293,21 +555,6 @@ describe("HkTable drag-to-reorder", () => {
     expect(t.emitted).toEqual([[0, 1]]);
   });
 
-  it("paints no insertion cue while the pointer still resolves to the dragged row", async () => {
-    const t = mountTable(3);
-    const grip = handles(t.container)[0]!;
-    grip.dispatchEvent(pointer("pointerdown", 18, 20));
-    // Past the threshold but still inside row 0's own band (mid 20): the
-    // resolved slot is the row's own — a cue there would read as a no-op
-    // target.
-    window.dispatchEvent(pointer("pointermove", 18, 26));
-    await nextTick();
-    expect(t.container.querySelectorAll("tbody [data-drop]").length).toBe(0);
-    window.dispatchEvent(pointer("pointerup", 18, 26));
-    await nextTick();
-    expect(t.emitted).toEqual([]);
-  });
-
   /** A pointer gesture against an inert table: press + travel + release. */
   function gripDragAttempt(t: RowsRef & { container: HTMLElement }): void {
     const grip = handles(t.container)[0]!;
@@ -484,6 +731,50 @@ describe("HkTable grip CSS (source contract)", () => {
     expect(scss).toMatch(/\.hk-table \.hk-table-drag-cell\s*\{/);
     expect(scss).toMatch(/\.hk-table \.hk-table-drag-col\s*\{/);
   });
+
+  it("paints the placeholder on the CELLS and rounds the end cells", () => {
+    // The regression this pins (R1 P1): <tr>-level decoration is the
+    // engine-unreliable class the predecessor's own warning ruled out —
+    // the placeholder tint and its rounding must live on the cells, whose
+    // boxes transform and round identically everywhere.
+    expect(scss).toMatch(/\.hk-table-draggable \.hk-table-row\[data-dragging\] > \.hk-table-cell \{/);
+    expect(scss).toMatch(/\[data-dragging\] > \.hk-table-cell:first-child \{[\s\S]*?border-top-left-radius: var\(--radius-md/);
+    expect(scss).toMatch(/\[data-dragging\] > \.hk-table-cell:last-child \{[\s\S]*?border-bottom-right-radius: var\(--radius-md/);
+    // The shift likewise rides the cells (named by the row's custom
+    // property), never a row transform.
+    expect(scss).toMatch(/\[data-shift\] > \.hk-table-cell \{[\s\S]*?transform: translateY\(var\(--hk-drag-shift/);
+    expect(scss).not.toMatch(/^\s*clip-path:/m);
+    // And the line-cue era is gone: no data-drop edge shadows survive.
+    expect(scss).not.toMatch(/data-drop/);
+  });
+
+  it("the shift glides ride only a live, held, or releasing strip", () => {
+    // Transitions armed by `data-dragging` / `data-shift-held` /
+    // `data-releasing` on the TABLE: idle cells carry no transform
+    // transition, so the forced stale-transform clear at a new drag's
+    // measure never glides — and `data-releasing` is what keeps the
+    // cancelled return a glide (the after-change style governs).
+    expect(scss).toMatch(/\.hk-table-draggable\[data-dragging\] \.hk-table-row > \.hk-table-cell,/);
+    expect(scss).toMatch(/\.hk-table-draggable\[data-shift-held\] \.hk-table-row > \.hk-table-cell,/);
+    expect(scss).toMatch(/\.hk-table-draggable\[data-releasing\] \.hk-table-row > \.hk-table-cell \{/);
+  });
+
+  it("the ghost is a detached, semi-transparent, rounded lift below the popup bands", () => {
+    expect(scss).toMatch(/\.hk-table-drag-ghost\s*\{/);
+    expect(scss).toMatch(/position: fixed;/);
+    expect(scss).toMatch(/border-radius: var\(--radius-md/);
+    expect(scss).toMatch(/z-index: var\(--hk-z-drag, 950\)/);
+    // The settle is a fade, driven by data-fading.
+    expect(scss).toMatch(/&\[data-fading]\s*\{/);
+  });
+
+  it("reduced motion snaps the arrangement glides and the ghost fade", () => {
+    const guard = scss.indexOf("@media (prefers-reduced-motion: reduce)");
+    expect(guard).toBeGreaterThan(-1);
+    const block = scss.slice(guard);
+    expect(block).toContain(".hk-table-drag-ghost");
+    expect(block).toContain("transition: opacity 150ms ease");
+  });
 });
 
 describe("HkAdminTablePage drag passthrough (source contract)", () => {

package/src/components/HkTable.scss

@@ -192,23 +192,62 @@
   }
 }
 
-/* The row being dragged lifts in place (house pattern: HkTagInput's drag
-   lift — no floating ghost): dimmed, primary-tinted edge. A transform on
-   a <tr> is unreliable across engines, so the lift is paint-only. */
+/* The pressed row becomes the PLACEHOLDER: the same element, so exactly
+   the size the strip laid out, dimmed and primary-tinted where it sits
+   (house pattern: HkDraggableList's source row). The paint lives on the
+   CELLS, not the <tr>: a row's cells are plain boxes in every engine,
+   while row-level decoration (a clip-path rounding a box-shadow ring)
+   rides the engine's table paint pass and is exactly the kind of <tr>
+   styling the predecessor's own warning ruled unreliable. The tint rounds
+   on the end cells' radii — the "selected border is square" fix, drawn
+   where rounding is guaranteed. */
 .hk-table-draggable .hk-table-row[data-dragging] {
-  opacity: 0.45;
+  opacity: 0.4;
+}
+
+.hk-table-draggable .hk-table-row[data-dragging] > .hk-table-cell {
   background: rgb(from var(--hi-color-primary, #7aa2f7) r g b / 0.06);
-  box-shadow: inset 0 0 0 1px var(--hi-color-primary, #7aa2f7);
 }
 
-/* Insertion cue: the slot the pointer resolves to paints a 2px line on
-   the edge the row would land across. */
-.hk-table-draggable .hk-table-row[data-drop="before"] {
-  box-shadow: inset 0 2px 0 0 var(--hi-color-primary, #7aa2f7);
+.hk-table-draggable .hk-table-row[data-dragging] > .hk-table-cell:first-child {
+  border-top-left-radius: var(--radius-md, 8px);
+  border-bottom-left-radius: var(--radius-md, 8px);
+}
+
+.hk-table-draggable .hk-table-row[data-dragging] > .hk-table-cell:last-child {
+  border-top-right-radius: var(--radius-md, 8px);
+  border-bottom-right-radius: var(--radius-md, 8px);
 }
 
-.hk-table-draggable .hk-table-row[data-drop="after"] {
-  box-shadow: inset 0 -2px 0 0 var(--hi-color-primary, #7aa2f7);
+/* The FLIP shift: the row NAMES the displacement (a custom property is
+   inert paint-wise) and its cells carry it — a <td> is a plain box, so
+   the transform is engine-proof where a <tr> transform is not (the
+   predecessor's own warning). Rows the arrangement leaves put carry no
+   [data-shift] and no property. */
+.hk-table-draggable[data-dragging] .hk-table-row[data-shift] > .hk-table-cell,
+.hk-table-draggable[data-shift-held] .hk-table-row[data-shift] > .hk-table-cell,
+.hk-table-draggable[data-releasing] .hk-table-row[data-shift] > .hk-table-cell {
+  transform: translateY(var(--hk-drag-shift, 0px));
+}
+
+/* Arrangement shifts (the placeholder onto the resolved slot, neighbours
+   gliding one slot across), the placeholder's un-dim on release and the
+   cancelled arrangement's return glide transition; they are armed only
+   while a gesture owns the strip (`data-dragging`), while a held drop
+   waits for the consumer's rows (`data-shift-held`), or for the one beat
+   a release needs to glide home (`data-releasing` — the arming attribute
+   must outlive the transform removal, since a CSS transition reads the
+   after-change style) — so the forced stale-transform clear at a NEW
+   drag's measure never glides, and idle cells never carry a transition. */
+.hk-table-draggable[data-dragging] .hk-table-row > .hk-table-cell,
+.hk-table-draggable[data-shift-held] .hk-table-row > .hk-table-cell,
+.hk-table-draggable[data-releasing] .hk-table-row > .hk-table-cell {
+  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-table-draggable[data-dragging] .hk-table-row,
+.hk-table-draggable[data-releasing] .hk-table-row {
+  transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 /* Text under a live drag must not select (the press starts on the grip,
@@ -218,8 +257,62 @@
   -webkit-user-select: none;
 }
 
-/* Reduced motion: the lift is paint-only already (no transform to snap);
-   the hover/press fades stay (house convention: HkDraggableList.scss). */
+/* The lifted row the pointer carries: a detached, semi-transparent clone
+   of the pressed row (house pattern: HkDraggableList's ghost), appended
+   to <body> and positioned via the inline translate3d the tsx writes on
+   every pointer move — no class transform could win that cascade. It is
+   a plain positioned box, so THIS is where the lift gets the rounded
+   corners and the elevation shadow the <tr> placeholder cannot draw. */
+.hk-table-drag-ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin: 0;
+  opacity: 0.88;
+  border-radius: var(--radius-md, 8px);
+  box-shadow:
+    0 8px 24px rgb(0 0 0 / 28%),
+    0 2px 6px rgb(0 0 0 / 18%),
+    inset 0 0 0 1px var(--hi-color-primary, #7aa2f7);
+  background: var(--hi-color-bg-elevated, #161b22);
+  overflow: hidden;
+  pointer-events: none;
+  /* Drag ghost: above page chrome (--z-sidebar 900) but below every
+     popup band (overlay 1000 < dropdown 2000 < tooltip 3000 < toast 4000)
+     so a drag never buries toasts or open panels. */
+  z-index: var(--hk-z-drag, 950);
+  will-change: transform;
+  transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+  &[data-fading] {
+    opacity: 0;
+  }
+
+  > .hk-table {
+    margin: 0;
+  }
+}
+
+/* Reduced motion: the arrangement glides snap instead of tweening, and
+   the ghost skips its fade (the row follows the pointer 1:1 — direct
+   manipulation, not autonomous motion — so IT is left alone; house
+   convention: HkDraggableList.scss / HkAffixPicker.scss guards). */
+@media (prefers-reduced-motion: reduce) {
+  .hk-table-draggable[data-dragging] .hk-table-row > .hk-table-cell,
+  .hk-table-draggable[data-shift-held] .hk-table-row > .hk-table-cell,
+  .hk-table-draggable[data-releasing] .hk-table-row > .hk-table-cell {
+    transition: none;
+  }
+
+  .hk-table-draggable[data-dragging] .hk-table-row,
+  .hk-table-draggable[data-releasing] .hk-table-row {
+    transition: opacity 150ms ease;
+  }
+
+  .hk-table-drag-ghost {
+    transition: none;
+  }
+}
 
 /* Alignment helpers (start/end so aligned columns mirror in RTL; the
    tsx keeps emitting the hk-text-* names) */

package/src/components/HkTable.tsx

@@ -1,8 +1,12 @@
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, type PropType } from "vue";
+import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
 import { usePointerReorder } from "../composables/usePointerReorder";
+import { useReportedTransition } from "../composables/useReportedTransition";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
+import { onceFrame } from "../runtime/animationBus";
+import { scheduleCronAfter, type CronHandle } from "../runtime/cronBus";
+import { ancestorZoom } from "../runtime/cssZoom";
 import "./HkTable.scss";
 
 interface Column {
@@ -13,6 +17,13 @@ interface Column {
   align?: "left" | "center" | "right";
 }
 
+/** Duration of every drag motion this component paints: the arrangement
+ *  shift (placeholder onto the resolved slot, neighbours gliding across)
+ *  and the ghost's settle fade on release. One number so the transition
+ *  the user sees and the animation window reported to the shared bus
+ *  (useReportedTransition) cannot drift apart. */
+const DRAG_SHIFT_MS = 150;
+
 export default defineComponent({
   name: "HkTable",
   props: {
@@ -181,6 +192,15 @@ export default defineComponent({
       if (reorderInert.value) return;
       if (from === to || from < 0 || to < 0) return;
       if (from >= props.rows.length || to >= props.rows.length) return;
+      // The arrangement the user dropped is ALREADY on screen (the live
+      // shift painted it while the pointer hovered) — freeze it, so the
+      // commit-whenever-the-consumer-lands-it is seamless: the render that
+      // carries the new order paints the rows exactly where the shift
+      // already put them. A consumer that persists over the network first
+      // (the house pattern: every admin list upsert) keeps showing the
+      // chosen order instead of snapping back to the pre-drop one.
+      arrangement.value = { from, slot: to };
+      arrangementHeld.value = true;
       emit("reorder", from, to);
     }
 
@@ -209,13 +229,306 @@ export default defineComponent({
       scrollContainer: dragScrollContainer,
     });
 
+    // ── Drag lift: ghost, placeholder and the FLIP shift ────────────────
+    // A lift no longer paints on the strip alone. The pressed row becomes
+    // the PLACEHOLDER — the same element, so exactly the size the strip
+    // laid out, dimmed and tinted where it sits — and a detached,
+    // semi-transparent GHOST (a snapshot of the row the user grabbed)
+    // floats with the pointer above the page. The slot the pointer
+    // resolves to is painted by SHIFTING the arrangement: the placeholder
+    // translates onto the target row's spot and every row in between
+    // glides one slot across, so the drop commits an arrangement the user
+    // has already watched settle — the old paint (a line on an edge) is
+    // gone. Everything runs on the shared animation context: the shifts
+    // and the settle are reported transitions (useReportedTransition, so
+    // the bus knows motion is in flight), the ghost attaches on a bus
+    // frame (onceFrame) and its removal on a bus timer
+    // (scheduleCronAfter), and the `prefers-reduced-motion` media guard in
+    // the stylesheet snaps the glides.
+
+    const anim = useReportedTransition(DRAG_SHIFT_MS);
+
+    /** The strip measured at drag start: per-row visual tops/heights plus
+     *  the cumulative CSS zoom the rows paint under (chest's root DPI
+     *  scale). The arrangement math runs in these VISUAL px (gBCR space)
+     *  and divides by the zoom once at the write layer — a transform on a
+     *  row inside a zoomed subtree paints zoom× its local px. */
+    interface StripMeasure {
+      tops: number[];
+      zoom: number;
+      left: number;
+      width: number;
+    }
+    const stripMeasure = ref<StripMeasure | null>(null);
+    /** The painted arrangement: display index `from`'s placeholder sits at
+     *  slot `slot`. Live while the drag moves; FROZEN after a real drop
+     *  (see `onReorderDrop`) until `rows` carries the emitted move. */
+    const arrangement = ref<{ from: number; slot: number } | null>(null);
+    const arrangementHeld = ref(false);
+
+    /** Row displacement (LOCAL px, ready for a transform) for display
+     *  index `index` under the live arrangement — the FLIP delta between
+     *  the slot the strip measured the row at and the slot the arrangement
+     *  puts it in. Anchored to the strip's own measured positions: the row
+     *  landing at final slot f sits exactly where the strip laid the f-th
+     *  row out, so uneven rows land pixel-exact too. */
+    function rowShift(index: number): number {
+      const m = stripMeasure.value;
+      const a = arrangement.value;
+      if (!m || !a || a.from === a.slot) return 0;
+      if (index < 0 || index >= m.tops.length) return 0;
+      const order = m.tops.map((_, i) => i);
+      order.splice(a.from, 1);
+      order.splice(a.slot, 0, a.from);
+      const finalTop = new Array<number>(m.tops.length).fill(0);
+      for (let f = 0; f < order.length; f += 1) finalTop[order[f]!] = m.tops[f]!;
+      const delta = finalTop[index]! - m.tops[index]!;
+      return Math.abs(delta) < 0.5 ? 0 : delta / m.zoom;
+    }
+
+    function measureStrip(): void {
+      const rows = liveRowEls();
+      if (rows.length === 0) {
+        stripMeasure.value = null;
+        return;
+      }
+      // A drag starting while a HELD arrangement is still painted would
+      // measure the shifted paint — force the stale transforms off first
+      // (the render will not re-apply them: the arrangement was cleared).
+      // removeProperty rather than an empty write: an empty transform
+      // value would leave a `style=""` husk on rows that never carried
+      // anything else.
+      for (const row of rows) {
+        row.style.removeProperty("transform");
+        if (!row.getAttribute("style")) row.removeAttribute("style");
+      }
+      const zoom = ancestorZoom(rows[0]!);
+      const tops: number[] = [];
+      rows.forEach((row) => {
+        tops.push(row.getBoundingClientRect().top);
+      });
+      const source = rows[rowDrag.dragFrom.value]?.getBoundingClientRect();
+      stripMeasure.value = {
+        tops,
+        zoom,
+        left: source?.left ?? 0,
+        width: source?.width ?? 0,
+      };
+    }
+
+    // ── The ghost ──
+    let ghostNode: HTMLElement | null = null;
+    let ghostFading: HTMLElement | null = null;
+    let ghostHTML = "";
+    let ghostStartTop = 0;
+    let ghostGrabOffsetY = 0;
+    let pressClientY = 0;
+    let ghostFadeTimer: CronHandle | null = null;
+
+    /** Snapshot the pressed row BEFORE the drag paint lands on it (this
+     *  runs in the pre-render watcher): the ghost is the row the user
+     *  grabbed, not the dimmed placeholder it is about to become. The
+     *  clone must not carry the row's interactive chrome — its grip keeps
+     *  `tabindex`/`role` in the snapshot HTML, and a second tabbable copy
+     *  of every row would be a keyboard trap — so the attributes come off
+     *  and the ghost root is hidden from the accessibility tree. */
+    function captureGhost(): void {
+      const row = liveRowEls()[rowDrag.dragFrom.value];
+      ghostHTML = row
+        ? row.outerHTML
+            .replace(/\sdata-dragging="[^"]*"/g, "")
+            .replace(/\sdata-drop="[^"]*"/g, "")
+            .replace(/\stabindex="[^"]*"/g, "")
+            .replace(/\srole="button"/g, "")
+        : "";
+      const rect = row?.getBoundingClientRect();
+      ghostStartTop = rect?.top ?? 0;
+      ghostGrabOffsetY = pressClientY - ghostStartTop;
+    }
+
+    /** Attach the snapshot as a fixed-position clone above the page. The
+     *  ghost lives on <body> — inside any root CSS zoom subtree its px are
+     *  LOCAL while the measured rect reports the root VISUAL space — so
+     *  every write divides by the body's cumulative zoom (house pattern:
+     *  HkDraggableList's ghost). */
+    function attachGhost(): void {
+      const m = stripMeasure.value;
+      if (!m || !ghostHTML || m.width <= 0) return;
+      detachGhost();
+      const zb = ancestorZoom(document.body);
+      const node = document.createElement("div");
+      node.className = "hk-table-drag-ghost";
+      // The clone's table carries the source table's classes, so size and
+      // bordered variants paint identically to the row it lifted.
+      const table = document.createElement("table");
+      const sourceTable = wrapperHostRef.value?.querySelector("table.hk-table");
+      if (sourceTable) table.className = sourceTable.className;
+      table.style.width = `${m.width / zb}px`;
+      table.style.tableLayout = "fixed";
+      const tbody = document.createElement("tbody");
+      tbody.className = "hk-table-body";
+      tbody.innerHTML = ghostHTML;
+      // Fixed layout takes its column spec from the first row's widths —
+      // pin each clone cell to the source's rendered width so the ghost's
+      // columns line up with the strip it floats over.
+      const sourceCells = liveRowEls()[rowDrag.dragFrom.value]?.querySelectorAll<HTMLElement>("td, th");
+      const ghostCells = tbody.querySelectorAll<HTMLElement>("td, th");
+      ghostCells.forEach((cell, i) => {
+        const w = sourceCells?.[i]?.getBoundingClientRect().width ?? 0;
+        if (w > 0) cell.style.width = `${w / zb}px`;
+      });
+      table.appendChild(tbody);
+      node.appendChild(table);
+      node.style.width = `${m.width / zb}px`;
+      moveGhostTo(node, pressClientY);
+      node.style.pointerEvents = "none";
+      node.setAttribute("aria-hidden", "true");
+      document.body.appendChild(node);
+      ghostNode = node;
+    }
+
+    function moveGhostTo(node: HTMLElement, clientY: number): void {
+      const m = stripMeasure.value;
+      if (!m) return;
+      const zb = ancestorZoom(document.body);
+      // Vertical only: the ghost stays anchored to the row's own left
+      // edge, so a sideways jitter never slides the row across columns.
+      const x = m.left / zb;
+      const y = (clientY - ghostGrabOffsetY) / zb;
+      node.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    }
+
+    function onDragPointerMove(event: PointerEvent): void {
+      if (!ghostNode) return;
+      moveGhostTo(ghostNode, event.clientY);
+    }
+
+    /** The ghost hands off to the placeholder: a short fade at the
+     *  position where the pointer released, removed on a bus timer. */
+    function fadeGhost(): void {
+      if (!ghostNode) return;
+      const node = ghostNode;
+      ghostNode = null;
+      ghostFading = node;
+      node.setAttribute("data-fading", "");
+      ghostFadeTimer?.disconnect();
+      ghostFadeTimer = scheduleCronAfter(() => {
+        ghostFadeTimer = null;
+        ghostFading?.remove();
+        ghostFading = null;
+      }, DRAG_SHIFT_MS);
+    }
+
+    function detachGhost(): void {
+      ghostFadeTimer?.disconnect();
+      ghostFadeTimer = null;
+      ghostNode?.remove();
+      ghostNode = null;
+      // A fade in flight has already left `ghostNode` — it is owned by the
+      // timer alone, so an unmount mid-fade must reap it here or it would
+      // linger on <body> with its removal cancelled.
+      ghostFading?.remove();
+      ghostFading = null;
+    }
+
+    /** The beat after a cancel / release-on-origin: the transforms come
+     *  off in the same flush that removes `data-dragging`, and a CSS
+     *  transition takes the AFTER-change style — with the arming attribute
+     *  gone the return would snap. `data-releasing` keeps the transitions
+     *  armed for exactly one shift window so the glide is real. */
+    const releasing = ref(false);
+    let releaseTimer: CronHandle | null = null;
+
+    watch(() => rowDrag.dragging.value, (active) => {
+      if (active) {
+        arrangementHeld.value = false;
+        releaseTimer?.disconnect();
+        releaseTimer = null;
+        releasing.value = false;
+        arrangement.value = null;
+        measureStrip();
+        captureGhost();
+        onceFrame(() => {
+          // The frame may land after a fast release — never paint a lift
+          // for a gesture that is already over.
+          if (!rowDrag.dragging.value) return;
+          attachGhost();
+          anim.run();
+        });
+        window.addEventListener("pointermove", onDragPointerMove);
+      } else {
+        // The engine clears its refs before `onDrop` runs, so by the time
+        // this flushes, a real drop has already frozen the arrangement.
+        window.removeEventListener("pointermove", onDragPointerMove);
+        if (!arrangementHeld.value) {
+          // Cancel / release on the origin: glide the arrangement home.
+          const moved = arrangement.value != null && arrangement.value.from !== arrangement.value.slot;
+          arrangement.value = null;
+          if (moved) {
+            releasing.value = true;
+            anim.run();
+            releaseTimer?.disconnect();
+            releaseTimer = scheduleCronAfter(() => {
+              releaseTimer = null;
+              releasing.value = false;
+            }, DRAG_SHIFT_MS);
+          }
+        }
+        fadeGhost();
+      }
+    });
+
+    watch(() => rowDrag.dragOver.value, (slot) => {
+      if (!rowDrag.dragging.value || slot < 0) return;
+      const from = rowDrag.dragFrom.value;
+      const a = arrangement.value;
+      if (a && a.from === from && a.slot === slot) return;
+      arrangement.value = { from, slot };
+      // A slot equal to the origin paints no shift — reporting motion for
+      // nothing would only tell the bus a lie.
+      if (from !== slot) anim.run();
+    });
+
+    watch(() => props.rows, () => {
+      // The consumer's array moved — the committed drop, an external edit,
+      // a refresh. The held arrangement's job is done: clearing in this
+      // same pre-render flush paints the new order and drops the shifts in
+      // one paint, which coincide (that is the freeze's whole point).
+      // NOTE the contract: reference replacement. A consumer mutating the
+      // array in place must emit a replacement (or re-key) for the hold to
+      // lift — the house consumers all do.
+      arrangementHeld.value = false;
+      if (rowDrag.dragging.value) {
+        // A strip replaced UNDER a live drag: the measurement is stale
+        // (tops were read at press time) and the engine will resolve
+        // against the NEW elements — re-measure the clean strip so the
+        // paint follows, and let the shift re-arm on the next resolution.
+        arrangement.value = null;
+        measureStrip();
+        return;
+      }
+      arrangement.value = null;
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener("pointermove", onDragPointerMove);
+      releaseTimer?.disconnect();
+      releaseTimer = null;
+      detachGhost();
+    });
+
     function onHandlePointerdown(e: PointerEvent, index: number): void {
       if (reorderInert.value) return;
       // The press's own row is looked up in the live strip: the render-time
       // index is a fallback for a handle that somehow left the table.
       const row = (e.currentTarget as HTMLElement | null)?.closest("tr");
       const strip = row ? liveRowEls().indexOf(row as HTMLElement) : index;
-      if (strip >= 0) rowDrag.start(e, strip);
+      if (strip >= 0) {
+        // Where the finger grabbed the row — the ghost hangs the strip's
+        // lift off this point so the grab stays under the pointer.
+        pressClientY = e.clientY;
+        rowDrag.start(e, strip);
+      }
     }
 
     /** Keyboard twin of the drop: move one row one slot. Runs on a focused
@@ -251,22 +564,6 @@ export default defineComponent({
       return `${before}${label}${after}`;
     }
 
-    /** Insertion cue for the slot the pointer currently resolves to:
-     *  `dragOver` is a slot (0..n) over the strip — the line paints on the
-     *  TOP edge of the row that would sit below the drop, or the BOTTOM
-     *  edge of the last row for the trailing slot. A slot that resolves
-     *  back onto the row being dragged paints nothing: the row already
-     *  carries its lift, and a "drop here" line on the row in hand reads
-     *  as a no-op target. */
-    const dropCue = computed<{ index: number; edge: "before" | "after" } | null>(() => {
-      if (!rowDrag.dragging.value || rowDrag.dragOver.value < 0) return null;
-      const slot = rowDrag.dragOver.value;
-      if (slot === rowDrag.dragFrom.value) return null;
-      const count = sortedRows.value.length;
-      if (slot >= count) return { index: count - 1, edge: "after" };
-      return { index: slot, edge: "before" };
-    });
-
     const tableCls = computed(() => [
       "hk-table",
       `hk-table-${props.size}`,
@@ -276,6 +573,19 @@ export default defineComponent({
       props.draggable ? "hk-table-draggable" : "",
     ]);
 
+    /** Drag-scoped switches the stylesheet reads: `data-dragging` arms the
+     *  shift transitions for as long as a gesture owns the strip;
+     *  `data-shift-held` keeps them armed after a drop while the frozen
+     *  arrangement waits for `rows` to carry it; `data-releasing` arms
+     *  them for the one beat a cancelled arrangement needs to glide home
+     *  (the arming attribute must OUTLIVE the transform removal, or the
+     *  after-change style snaps). */
+    const dragScope = computed(() => ({
+      "data-dragging": rowDrag.dragging.value ? "" : undefined,
+      "data-shift-held": arrangementHeld.value ? "" : undefined,
+      "data-releasing": releasing.value ? "" : undefined,
+    }));
+
     const totalCols = computed(
       () => props.columns.length + (props.selectable ? 1 : 0) + (props.draggable ? 1 : 0)
     );
@@ -284,7 +594,7 @@ export default defineComponent({
       return (
       <div ref={wrapperHostRef} class="hk-table-host">
         <div ref={wrapperRef} class="hk-table-wrapper">
-        <table class={tableCls.value}>
+        <table class={tableCls.value} {...dragScope.value}>
           {props.caption && <caption class="hk-table-sr-only">{props.caption}</caption>}
           <thead>
             <tr class="hk-table-header-row">
@@ -370,14 +680,22 @@ export default defineComponent({
             ) : (
               sortedRows.value.map((row, index) => {
                 const rowKey = getRowKey(row, index);
-                const dropCueEdge =
-                  dropCue.value && dropCue.value.index === index ? dropCue.value.edge : null;
+                // The FLIP shift this row rides under the live (or frozen)
+                // arrangement — 0 for rows the arrangement leaves put. It
+                // travels to the CELLS as a custom property, not as a row
+                // transform: `<tr>` transforms are unreliable across
+                // engines (the predecessor lift avoided them for exactly
+                // this), while a <td> is a plain box everywhere — and a
+                // custom property is inert paint-wise, so the row element
+                // only NAMES the shift and the stylesheet moves the paint.
+                const shiftPx = rowShift(index);
                 return (
                   <tr
                     key={rowKey}
                     class="hk-table-row"
+                    style={shiftPx ? { "--hk-drag-shift": `${shiftPx}px` } : undefined}
+                    data-shift={shiftPx ? "" : undefined}
                     data-dragging={rowDrag.dragging.value && rowDrag.dragFrom.value === index ? "" : undefined}
-                    data-drop={dropCueEdge || undefined}
                   >
                     {props.draggable && (
                       <td class="hk-table-cell hk-table-drag-cell">

package/src/composables/iconRegistry.ts

@@ -8,7 +8,7 @@
 // badges, nav tags) resolve without the wildcard import. Unknown names fall
 // back to `Info`, matching the previous `|| LucideIcons.Info` behavior.
 
-import { Activity, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, Battery, Bell, Bot, Box, Braces, Brain, Cable, Calendar, Camera, ChartBarBig as BarChart3, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert as AlertCircle, CircleCheck as CheckCircle, CircleCheckBig as CheckCircle2, CircleDot, Clock, Copy, Cpu, Database, Dot, Download, Ellipsis as MoreHorizontal, ExternalLink, Eye, FileArchive, FileCode, FileImage, FileText, Filter, Flag, Flame, FolderOpen, Gauge, Globe, HardDrive, History, Image, Info, Kanban, Key, KeyRound, Layers, LayoutDashboard, LoaderCircle as Loader2, LogOut, Lock, Maximize, Maximize2, MessageSquare, Mic, MicOff, Minimize, Minus, Monitor, Network, Package, Pause, Pencil, Play, Plug, Plus, Radio, RefreshCw, RotateCw, ScanSearch, Save, Search, Send, Server, Settings, Share2, Shield, Sparkles, Star, Table, Tag, Thermometer, Trash2, TriangleAlert as AlertTriangle, Upload, Video, Volume2, VolumeX, Webhook, Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { Activity, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, Battery, Bell, Bot, Box, Braces, Brain, Cable, Calendar, Camera, ChartBarBig as BarChart3, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert as AlertCircle, CircleCheck as CheckCircle, CircleCheckBig as CheckCircle2, CircleDot, Clock, Copy, Cpu, Database, Dot, Download, Ellipsis as MoreHorizontal, ExternalLink, Eye, FileArchive, FileCode, FileImage, FileText, Filter, Flag, Flame, FolderOpen, Gauge, Globe, HardDrive, History, Image, Info, Kanban, Key, KeyRound, Layers, LayoutDashboard, LoaderCircle as Loader2, LogOut, Lock, Maximize, Maximize2, MessageSquare, Mic, MicOff, Minimize, Minus, Monitor, Network, Package, Pause, Pencil, Play, Plug, Plus, Radio, RefreshCw, RotateCw, ScanSearch, Save, Search, Send, Server, Settings, Share2, Shield, SlidersHorizontal, Sparkles, Star, Table, Tag, Thermometer, Trash2, TriangleAlert as AlertTriangle, Upload, Video, Volume2, VolumeX, Webhook, Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut } from "lucide-vue-next";
 import type { Component } from "vue";
 
 
@@ -109,7 +109,7 @@ const REGISTRY: Record<string, Component> = {
   Network, Package, Pause, Pencil, Play, Plug, Plus, Radio, RefreshCw,
   RotateCw,
   ScanSearch, Save, Search, Send, Server, Settings, Share2, Shield,
-  Sparkles, Star, Table, Tag, Thermometer, Trash2, Upload, Video, Volume2,
+  SlidersHorizontal, Sparkles, Star, Table, Tag, Thermometer, Trash2, Upload, Video, Volume2,
   VolumeX, Webhook, Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut,
 };