@celestia-island/hikari 0.55.304 → 0.55.306

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.304",
+  "version": "0.55.306",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkBreadcrumb.tsx

@@ -1,3 +1,5 @@
+import { ChevronRight } from "lucide-vue-next";
+
 import { computed, defineComponent, type PropType } from "vue";
 import { safeHref } from "../utils/safeHref";
 import { useI18n } from "../i18n/context";
@@ -26,9 +28,7 @@ export default defineComponent({
               )}
               {index < props.items.length - 1 && (
                 <span class="hk-breadcrumb-separator">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
-                    <polyline points="9 18 15 12 9 6" />
-                  </svg>
+                  <ChevronRight />
                 </span>
               )}
             </li>

package/src/components/HkDraggableGrid.tsx

@@ -1,3 +1,5 @@
+import { GripVertical } from "lucide-vue-next";
+
 import { defineComponent, onBeforeUnmount, ref, shallowRef, watch, type PropType } from "vue";
 import { onceFrame } from "../runtime/animationBus";
 import { useReportedTransition } from "../composables/useReportedTransition";
@@ -271,14 +273,7 @@ export default defineComponent({
                         }}
                       >
                         {slots.handle ? slots.handle() : (
-                          <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-                            <circle cx="4" cy="3" r="1.2" />
-                            <circle cx="4" cy="7" r="1.2" />
-                            <circle cx="4" cy="11" r="1.2" />
-                            <circle cx="10" cy="3" r="1.2" />
-                            <circle cx="10" cy="7" r="1.2" />
-                            <circle cx="10" cy="11" r="1.2" />
-                          </svg>
+                          <GripVertical size={14} />
                         )}
                       </span>
                       <div class="hk-draggable-grid-content">

package/src/components/HkDraggableList.tsx

@@ -1,3 +1,5 @@
+import { GripVertical } from "lucide-vue-next";
+
 import { defineComponent, onBeforeUnmount, onMounted, ref, shallowRef, type PropType } from "vue";
 import { onceFrame } from "../runtime/animationBus";
 import { useReportedTransition } from "../composables/useReportedTransition";
@@ -349,14 +351,7 @@ export default defineComponent({
                   }}
                 >
                   {slots.handle ? slots.handle() : (
-                    <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
-                      <circle cx="4" cy="3" r="1.2" />
-                      <circle cx="4" cy="7" r="1.2" />
-                      <circle cx="4" cy="11" r="1.2" />
-                      <circle cx="10" cy="3" r="1.2" />
-                      <circle cx="10" cy="7" r="1.2" />
-                      <circle cx="10" cy="11" r="1.2" />
-                    </svg>
+                    <GripVertical size={14} />
                   )}
                 </span>
                 <div class="hk-draggable-list-content">

package/src/components/HkEmptyState.tsx

@@ -1,3 +1,5 @@
+import { Package } from "lucide-vue-next";
+
 import { defineComponent, h, type Component, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
@@ -56,19 +58,7 @@ export default defineComponent({
               ) : props.icon ? (
                 h(props.icon, { size: 32, "aria-hidden": true })
               ) : (
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  width="48"
-                  height="48"
-                >
-                  <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
-                  <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
-                </svg>
+                <Package size={48} stroke-width={1.5} />
               )}
             </div>
             {props.title ? <p class="hk-empty-title">{props.title}</p> : null}

package/src/components/HkExpansionPanel.tsx

@@ -1,3 +1,5 @@
+import { ChevronDown } from "lucide-vue-next";
+
 import { computed, defineComponent, ref, watch } from "vue";
 import "./HkExpansionPanel.scss";
 
@@ -87,9 +89,7 @@ export default defineComponent({
             </div>
           )}
           <span class="hk-expansion-panel-chevron" aria-hidden="true">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <polyline points="6 9 12 15 18 9" />
-            </svg>
+            <ChevronDown />
           </span>
         </button>
         <div class="hk-expansion-panel-body">

package/src/components/HkFab.test.tsx

@@ -64,11 +64,12 @@ afterEach(() => {
 });
 
 describe("HkFab shell", () => {
-  it("renders a round button with the aria label and the default chevron svg", () => {
+  it("renders a round button with the aria label and the default chevron glyph", () => {
     const m = mountFab({ ariaLabel: "Jump to latest" });
     expect(m.button.getAttribute("aria-label")).toBe("Jump to latest");
-    // No icon prop -> inline chevron-down fallback svg.
-    expect(m.button.querySelector("svg polyline")).not.toBeNull();
+    // No icon prop -> the standard lucide chevron-down (wave B4: the
+    // hand-drawn inline fallback retired).
+    expect(m.button.querySelector("svg.lucide-chevron-down")).not.toBeNull();
   });
 
   it("mirrors positioning/corner/size/variant props onto data attributes", () => {

package/src/components/HkFab.tsx

@@ -1,3 +1,5 @@
+import { ChevronDown } from "lucide-vue-next";
+
 import {
   defineComponent,
   h,
@@ -141,19 +143,9 @@ export default defineComponent({
             : RegistryIcon
               ? h(RegistryIcon)
               : (
-                // Inline chevron-down fallback (kept local to avoid
-                // pulling the lucide symbol through a non-registry path).
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  aria-hidden="true"
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                // Wave B4: the hand-drawn fallback retired — the standard
+                // lucide component, same channel as every other control.
+                <ChevronDown aria-hidden="true" />
               )}
         </span>
       );

package/src/components/HkLocalePicker.tsx

@@ -1,3 +1,5 @@
+import { ChevronDown } from "lucide-vue-next";
+
 import { defineComponent, ref, type PropType } from "vue";
 
 import HkLocalePickerPopup from "./HkLocalePickerPopup";
@@ -50,14 +52,7 @@ export const HkLocalePicker = defineComponent({
           onClick={() => (open.value = !open.value)}
         >
           {props.currentLocale.toUpperCase()}
-          <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
-            <path
-              d="M2 3.5l3 3 3-3"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="1.2"
-            />
-          </svg>
+          <ChevronDown size={10} aria-hidden="true" />
         </button>
         <HkLocalePickerPopup
           open={open.value}

package/src/components/HkModal.open-close-scale.test.ts

@@ -2,21 +2,19 @@
  * Behavioral contract for the DESKTOP modal open/close choreography — run
  * against the COMPILED stylesheet, not the source text.
  *
- * User direction 2026-11-06 (supersedes the 2026-11-05 content-only ride):
- * the window's own HEIGHT rides the open/close — the frame settles
- * `translate(…) scaleY(0.9) → translate(…) scaleY(1)` about its center, so
- * the box grows symmetrically and anything centered in it (the content
- * region above all) stays horizontally AND vertically centered at every t;
- * the translate prefix is byte-identical in every state so the ride can
- * never re-seat the frame. `.hk-modal-body` keeps a ride of its own:
- * `scale(0.95, 1) → scale(1, 1)` — the horizontal factor starts slightly
- * NARROW and spreads out to fill the window (user direction 2026-11-06,
- * revising the first cut: a 1.1 overshoot read as uglier than a slight
- * pinch), while its vertical factor stays 1 because the body's Y already
- * rides the frame's scaleY (own 0.9 would compound to 0.81). The retired
- * grammars: the 2026-11-04 whole-frame `scale(1, 0.9)`, the 2026-11-05
- * body-only uniform `scale(0.9)`, and the 2026-11-06 `scale(1.1, 1)`
- * overshoot.
+ * User direction 2026-11-07 (supersedes the 2026-11-05 content-only ride
+ * and the 2026-11-06 body scales): ONLY THE HEIGHT COMPRESSES — width is
+ * never scaled. The frame settles `translate(…) scaleY(0.9) →
+ * translate(…) scaleY(1)` about its center, so the box grows symmetrically
+ * and anything centered in it (the content region above all) stays
+ * horizontally AND vertically centered at every t; the translate prefix is
+ * byte-identical in every state so the ride can never re-seat the frame.
+ * `.hk-modal-body` carries NO transform rule of its own: its vertical ride
+ * is entirely the frame's scaleY, so its width stays exactly 100% while its
+ * height follows the 0.9 → 1 compression. The retired grammars, oldest
+ * first: the 2026-11-04 whole-frame `scale(1, 0.9)`, the 2026-11-05
+ * body-only uniform `scale(0.9)`, the 2026-11-06 `scale(1.1, 1)` overshoot
+ * and its same-day `scale(0.95, 1)` pinch.
  *
  * Why compile: a source-text scanner can be dodged by a later duplicate
  * rule, a block comment, SCSS interpolation, `@extend` or an `@use`d
@@ -343,12 +341,8 @@ const ENTER_TRANSITION =
 const LEAVE_TRANSITION =
   "opacity var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)), " +
   "transform var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1))";
-const BODY_ENTER_TRANSITION =
-  "transform var(--hk-modal-duration, 0.42s) var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1))";
-const BODY_LEAVE_TRANSITION =
-  "transform var(--hk-modal-duration, 0.32s) var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1))";
 
-describe("HkModal desktop open/close contract (compiled cascade, user direction 2026-11-06)", () => {
+describe("HkModal desktop open/close contract (compiled cascade, user direction 2026-11-07)", () => {
   it("compiles into a stylesheet with the ride rules present (known-positive)", () => {
     // Guard against a vacuous suite: the compiled sheet must really contain
     // the frame rule, the body rule and the reduced-motion flatten.
@@ -437,49 +431,27 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     expect(leaveWill).toBe("opacity, transform");
   });
 
-  it("rides the content region X 0.95→1 with Y pinned at 1, about its center", () => {
-    // 2026-11-06 (revised): the content starts slightly NARROW (95% of the
-    // window width) and spreads to 100%; the vertical factor stays 1 — the
-    // body's Y already rides the frame's scaleY, so its own 1 keeps the
-    // compound at exactly 0.9→1.
-    const expect_ = (state: string, value: string) => {
-      const frame = frameWith(...RIDE.find((r) => r.name === state)!.classes);
-      const body = child(frame, "hk-modal-body");
-      expect(winner(body, "transform", DESKTOP), state).toBe(value);
-      // `center center` / `center` / `50%` all compute to the same origin.
-      const origin = (winner(body, "transform-origin", DESKTOP) ?? "")
-        .replace(/\bcenter\b/g, "50%")
-        .split(/\s+/)
-        .filter(Boolean);
-      const [x = "50%", y = "50%"] = origin;
-      expect([x, y], state).toEqual(["50%", "50%"]);
-    };
-    expect_("enter-from", "scale(0.95, 1)");
-    expect_("leave-to", "scale(0.95, 1)");
-    expect_("enter-to", "scale(1, 1)");
-    expect_("leave-from", "scale(1, 1)");
-    // …and the same with the opt-in draggable flag on, where an
-    // attribute-qualified rule could otherwise slip past the mocks.
-    for (const state of RIDE) {
-      const frame = draggableFrameWith(...state.classes);
-      const body = child(frame, "hk-modal-body");
-      const expected =
-        state.name === "enter-from" || state.name === "leave-to" ? "scale(0.95, 1)" : "scale(1, 1)";
-      expect(winner(body, "transform", DESKTOP), `draggable ${state.name}`).toBe(expected);
+  it("never scales the content region: width stays 100% at every t", () => {
+    // 2026-11-07: only the height compresses. The body must carry no
+    // transform of its own in ANY ride state — its vertical ride is the
+    // frame's scaleY inherited down the tree, so a body transform here
+    // would either re-scale the width or double the Y compression.
+    const REST_OR_RIDE = [...RIDE, { name: "rest", classes: [] as string[] }];
+    // The whole transform family, on BOTH branches (R2 finding 2026-11-07
+    // (S2): the draggable branch used to pin `transform` only, so a
+    // `[data-draggable] … { scale: … }` longhand stayed green).
+    const PROPS = ["transform", "transform-origin", "scale", "translate", "rotate", "zoom", "perspective"];
+    for (const state of REST_OR_RIDE) {
+      for (const [label, frame] of [
+        ["", frameWith(...state.classes)],
+        ["draggable ", draggableFrameWith(...state.classes)],
+      ] as const) {
+        const body = child(frame, "hk-modal-body");
+        for (const prop of PROPS) {
+          expect(winner(body, prop, DESKTOP), `${label}${state.name} body ${prop}`).toBeUndefined();
+        }
+      }
     }
-    // At rest the body carries no transform at all.
-    expect(winner(child(frameWith(), "hk-modal-body"), "transform", DESKTOP)).toBeUndefined();
-  });
-
-  it("rides the content scale on the family timing tokens", () => {
-    const body = (state: string, prop: string) => {
-      const frame = frameWith(...RIDE.find((r) => r.name === state)!.classes);
-      return winner(child(frame, "hk-modal-body"), prop, DESKTOP);
-    };
-    // Whole-value pins, same rationale as the frame transitions above.
-    expect(body("enter-from", "transition")).toBe(BODY_ENTER_TRANSITION);
-    expect(body("leave-to", "transition")).toBe(BODY_LEAVE_TRANSITION);
-    expect(body("enter-from", "will-change")).toBe("transform");
   });
 
   it("never transforms the chrome: title bar, sub-header, footer, close button, title glyph", () => {
@@ -509,7 +481,7 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     }
   });
 
-  it("flattens the content scale under prefers-reduced-motion", () => {
+  it("flattens the frame ride (and any stray body transform) under prefers-reduced-motion", () => {
     const frame = frameWith("hk-modal-content-enter-from", "hk-modal-content-enter-active");
     const body = child(frame, "hk-modal-body");
     expect(winner(body, "transform", DESKTOP_REDUCED)).toBe("none");
@@ -562,6 +534,35 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     ).toBeUndefined();
   });
 
+  it("never lets ANY rule put a ride transform on the content region", () => {
+    // Fail-closed sweep, selector-level and media-independent (R2 finding
+    // 2026-11-07 (S2): the cascade mock cannot match `:not()`, a type
+    // qualifier, an extra media gate or a pseudo-element, so twelve such
+    // mutations stayed green). Every rule that targets the body — in any
+    // media query, at any specificity — must never SCALE it. Allowed
+    // anywhere: an inert `transform: none` (the reduced-motion guard) and
+    // any `transform-origin`, which does nothing without a transform.
+    //
+    // Class-TOKEN based, not class-dot based: `div.hk-modal-body` (the same
+    // compound, type-qualified) puts a letter before the dot and slipped
+    // through the first cut, as did `[class~="hk-modal-body"]` (R3 finding
+    // 2026-11-07 (S2)). The trailing guard keeps -scroll / -inner out.
+    const BODY_TARGET = /(^|[^\w-])hk-modal-body(?![\w-])/;
+    const TRANSFORM_FAMILY = /^(transform|transform-origin|translate|scale|rotate|zoom|perspective)$/;
+    const INERT = new Set(["none", "auto"]);
+    const offenders: string[] = [];
+    for (const rule of RULES) {
+      if (!BODY_TARGET.test(rule.selector)) continue;
+      for (const prop of rule.declarations.keys()) {
+        if (!TRANSFORM_FAMILY.test(prop)) continue;
+        if (prop === "transform-origin") continue;
+        const value = (rule.declarations.get(prop) ?? "").replace(/\s+/g, " ").trim();
+        if (!INERT.has(value)) offenders.push(`${rule.selector} { ${prop}: ${value} }`);
+      }
+    }
+    expect(offenders, "the content region must never be scaled").toEqual([]);
+  });
+
   it("never lets ANY rule put a transform on a chrome surface", () => {
     // Fail-closed sweep: selector-level and media-independent, so a chrome
     // transform is caught whatever the combinator, grouping, attribute
@@ -598,9 +599,11 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
     const CHROME_ALLOWED = new Set(["opacity", "transition", "will-change", "transform"]);
     // The contracted transform values a ride rule may carry. Frame: the
     // three translate+scaleY states (reduced-motion flatten included);
-    // body: the two two-arg scales.
+    // body: nothing (its width is never scaled — 2026-11-07).
     const LEGAL_FRAME = new Set([CENTERING, FRAME_FROM, FRAME_TO]);
-    const LEGAL_BODY = new Set(["scale(0.95, 1)", "scale(1, 1)"]);
+    // The body carries no transform contract any more (2026-11-07): any
+    // ride rule targeting it is an offender outright.
+    const LEGAL_BODY = new Set<string>([]);
     const offenders: string[] = [];
     // Media-independent on purpose: a ride selector declared at top level
     // (no media query) applies at every width, so it must obey the same
@@ -641,19 +644,19 @@ describe("HkModal desktop open/close contract (compiled cascade, user direction
   });
 
   it("keeps the contracted per-axis grammar (no alternate syntax escapes)", () => {
-    // 2026-11-06 grammar: the frame rides `translate(…) scaleY(s)`; the
-    // body rides two-arg `scale(x, 1)`. Any other expression of the same
-    // idea — single-arg scale on the frame list, per-axis longhand
-    // functions, scale3d, a computed matrix, or the independent transform
-    // properties — would break the contracted interpolation shape and must
-    // be impossible.
+    // 2026-11-07 grammar: the FRAME rides `translate(…) scaleY(s)` and the
+    // body rides nothing. Any other expression of the same idea — a
+    // single-arg scale or a scaleX on the frame list, a two-arg scale, any
+    // body transform, scale3d, a computed matrix, or the independent
+    // transform properties — would break the contracted shape (or the
+    // width contract) and must be impossible.
     const BODY_ESCAPES = /scale[XYZ]\(|scale3d\(|matrix[23]d?\(/;
     const FRAME_ESCAPES = /scale\([^)]*,|scaleX\(|scale3d\(|matrix[23]d?\(|\brotate\(/;
     for (const state of RIDE) {
       const frame = frameWith(...state.classes);
       const body = child(frame, "hk-modal-body");
       const bodyTransform = winner(body, "transform", DESKTOP) ?? "";
-      expect(bodyTransform, `body ${state.name}`).toMatch(/^scale\(([\d.]+), 1\)$/);
+      expect(bodyTransform, `body ${state.name}`).toBe("");
       expect(bodyTransform, `body ${state.name}`).not.toMatch(BODY_ESCAPES);
       expect(winner(body, "scale", DESKTOP), `body ${state.name}`).toBeUndefined();
       expect(winner(body, "translate", DESKTOP), `body ${state.name}`).toBeUndefined();

package/src/components/HkModal.scss

@@ -113,23 +113,21 @@
 // transform rule of its own; it inherits this single frame scale, which
 // IS the window-height motion the user asked for.
 //
-// The content region keeps a ride of its own: `.hk-modal-body` settles
-// `scale(0.95, 1) → scale(1, 1)` about its center. The horizontal factor
-// starts slightly NARROW (user direction 2026-11-06, after reviewing the
-// first cut: a 1.1 overshoot read as uglier than a slight pinch, so the
-// content starts at 95% width and spreads out to fill the window). The
-// vertical factor stays exactly 1: the body's Y dimension already rides
-// the frame's `scaleY`, so its own 1 makes the compound 0.9 → 1 — the
-// same vertical ride as before, never the doubled 0.81 a second Y factor
-// would produce.
+// The content region does NOT ride on its own (user direction 2026-11-07,
+// superseding the body scale that shipped in 0.55.303 / 0.55.304): width
+// is never scaled, only height is. `.hk-modal-body` therefore carries NO
+// transform rule in any ride state — its vertical ride is entirely the
+// frame's `scaleY` above, so during the open/close its width stays exactly
+// 100% of the window while its height follows the 0.9 → 1 compression. Two
+// retired grammars before this one: the two-arg `scale(0.95, 1)` pinch and
+// the `scale(1.1, 1)` overshoot.
 //
 // Hosts retune the ride through the `--hk-modal-*` tokens (duration /
 // easing) or the body padding vars — NOT by setting `transform` on
-// `.hk-modal-body` or the frame: the state rules pair matched function
-// lists (`translate+scaleY` on the frame, two-arg `scale` on the body)
-// so both ends of every interpolation ride the same shape, and a host's
-// single-class transform would be overridden mid-ride and again under
-// reduced motion.
+// `.hk-modal-body` or the frame: the frame's state rules pair a matched
+// function list (`translate + scaleY`) so both ends of the interpolation
+// ride the same shape, and a host's single-class transform would be
+// overridden mid-ride and again under reduced motion.
 //
 // No clip-path and no Y offset ride the open/close: the visible box IS the
 // frame at every t, so nothing is ever sliced off (the 2026-09-14 clip
@@ -153,7 +151,7 @@
   }
 
   // Close: the reveal's TRUE reverse — same chrome fade, while the window
-  // settles back toward 90% height and the content pinches back in.
+  // settles back toward 90% height, width untouched in both directions.
   .hk-modal-content-leave-active {
     transition:
       opacity var(--hk-modal-duration, 0.32s)
@@ -185,37 +183,6 @@
         )
         scaleY(1);
   }
-
-  // Content region: the one surface with its own transform. The timing
-  // lives on the per-state transition so the enter and the leave can
-  // differ (0.42s open / 0.32s close) exactly like the chrome fade does.
-  .hk-modal-content-enter-active .hk-modal-body {
-    transform-origin: 50% 50%;
-    transition:
-      transform var(--hk-modal-duration, 0.42s)
-        var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
-    will-change: transform;
-  }
-
-  .hk-modal-content-leave-active .hk-modal-body {
-    transform-origin: 50% 50%;
-    transition:
-      transform var(--hk-modal-duration, 0.32s)
-        var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
-    will-change: transform;
-  }
-
-  // Both ends two-arg `scale`: X starts at 95% and spreads to 1, Y stays 1
-  // (the body's vertical ride comes from the frame's scaleY, not itself).
-  .hk-modal-content-enter-from .hk-modal-body,
-  .hk-modal-content-leave-to .hk-modal-body {
-    transform: scale(0.95, 1);
-  }
-
-  .hk-modal-content-enter-to .hk-modal-body,
-  .hk-modal-content-leave-from .hk-modal-body {
-    transform: scale(1, 1);
-  }
 }
 
 // ------
@@ -704,14 +671,13 @@
       calc(-50% + var(--hk-modal-shift-y, 0px))
     );
   }
-  // The content-scale reveal flattens with it. Both selectors sit at the
-  // same specificity as the desktop pairs above and this block comes
-  // later in the sheet, so the flattened state wins by source order.
+  // The content region carries no transform of its own any more (width is
+  // never scaled — 2026-11-07), so only the frame needs flattening above.
+  // The body lines stay as a fail-closed guard: if a future state rule ever
+  // reintroduces a body transform, reduced motion still flattens it.
   .hk-modal-content .hk-modal-body {
     transform: none;
     transition: none;
-    // …and drop the compositor hint the ride would otherwise leave on
-    // the (tall) content block for the flattened frame.
     will-change: auto;
   }
 }

package/src/components/HkModalBreadcrumb.tsx

@@ -1,3 +1,5 @@
+import { ChevronRight } from "lucide-vue-next";
+
 import {
   computed,
   defineComponent,
@@ -626,18 +628,7 @@ export default defineComponent({
         .join(" ");
 
     const separator = () => (
-      <svg
-        class="hk-modal-breadcrumb-sep"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-      >
-        <polyline points="9 18 15 12 9 6" />
-      </svg>
+      <ChevronRight class="hk-modal-breadcrumb-sep" size={12} />
     );
 
     return () =>

package/src/components/HkRangeRibbon.scss

@@ -23,6 +23,12 @@
   // ONE label column for both surfaces: the overview paints through an
   // empty gutter of this width, so an x% bar sits at the same inline
   // position in the strip and in its lane (the strip locates segments).
+  // Wave (2026-11-06 raw-records five): the label column is JS-MEASURED —
+  // the component publishes the widest rendered label as a px value on the
+  // root (two-phase free/measure/pin). THIS fixed column is the no-JS /
+  // pre-measure fallback: a shared width keeps strip-lane x% alignment
+  // before the measurement lands (a bare max-content here would resolve
+  // 0px in the empty gutter and misalign everything).
   --hk-range-ribbon-label-col: minmax(48px, 84px);
 
   display: flex;
@@ -42,7 +48,9 @@
   min-width: 0;
 }
 
-// The empty first cell that lines the strip up with the lane tracks.
+// The empty first cell that lines the strip up with the lane tracks. Its
+// width comes from the shared var, which the component JS-measures and
+// publishes on the root (two-phase free/measure/pin).
 .hk-range-ribbon-overview-gutter {
   display: block;
   min-width: 0;
@@ -55,6 +63,29 @@
   min-width: 0;
 }
 
+.hk-range-ribbon[data-minimal] {
+  gap: 0;
+
+  /* Bare-bar layout: single column, gutter probe out of the way — the
+     strip spans the full width (its in-flow content is absolute, so
+     without this the max-content column would collapse to zero). */
+  .hk-range-ribbon-overview {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .hk-range-ribbon-overview-gutter {
+    display: none;
+  }
+}
+
+.hk-range-ribbon[data-minimal] .hk-range-ribbon-strip {
+  // Minimal mode (raw-records five): the track reads through muted-based
+  // tokens — the surface-based track read whitish inside dark phone
+  // modals. The inset hairline keeps the frame visible but quiet.
+  background: rgb(var(--color-muted) / 25%);
+  box-shadow: inset 0 0 0 1px rgb(var(--color-border) / 40%);
+}
+
 .hk-range-ribbon-strip {
   position: relative;
   display: block;

package/src/components/HkRangeRibbon.test.tsx

@@ -1466,7 +1466,7 @@ describe("HkRangeRibbon stylesheet contract", () => {
   it("shares one label column between the overview and the lanes", () => {
     expect(
       declaration(ruleBody(css, ".hk-range-ribbon"), "--hk-range-ribbon-label-col"),
-      "the root declares the shared label column",
+      "the root declares the shared fallback column (JS publishes the measured px on top)",
     ).toBe("minmax(48px, 84px)");
     const overviewColumns = declaration(
       ruleBody(css, ".hk-range-ribbon-overview"),
@@ -1494,4 +1494,57 @@ describe("HkRangeRibbon stylesheet contract", () => {
     expect(declaration(endAnchor, "right")).toBe("0");
     expect(declaration(endAnchor, "transform")).toBe("none");
   });
+
+  // Wave (2026-11-06 raw-records five): MINIMAL MODE - the bare dual-handle
+  // bar. Contract: data-minimal on the root, strip present + windowed at
+  // the full domain, ZERO lane chrome (no lanes block, no lane rows, no
+  // overview minimap, no gutter probe), and the standard mode keeps its
+  // lane chrome + alignment probe.
+  it("minimal mode renders the bare dual-handle bar (no lane chrome)", () => {
+    const root = mountRibbon({ minimal: true });
+    expect(root.getAttribute("data-minimal")).toBe("true");
+    const stripEl = root.querySelector(".hk-range-ribbon-strip")!;
+    expect(stripEl).not.toBeNull();
+    // The strip carries the slider a11y (role/tabindex/label/valuenow).
+    expect(stripEl.getAttribute("aria-label")).toBe("Observation range");
+    // Uncontrolled default window = the FULL domain: valuenow sits at 0
+    // (domain start) and the valuetext reads the whole range.
+    expect(stripEl.getAttribute("aria-valuenow")).toBe("0");
+    expect(stripEl.getAttribute("aria-valuetext")).toContain("0%");
+    // The lanes BLOCK is skipped entirely (no lane rows at all).
+    expect(root.querySelector(".hk-range-ribbon-lanes")).toBeNull();
+    expect(root.querySelector(".hk-range-ribbon-lane")).toBeNull();
+    // The overview minimap container shells remain but render EMPTY, and
+    // the gutter probe is display:none (visibility is the semantic).
+    const minimap = root.querySelector(".hk-range-ribbon-overview-lanes");
+    expect(minimap!.children.length).toBe(0);
+    // (The gutter probe's display:none in minimal mode is enforced by the
+    //  static scss assertion at the end of this file — happy-dom cannot
+    //  resolve the nested attribute selector.)
+    expect(root.querySelector(".hk-range-ribbon-overview-segment")).toBeNull();
+    // Uncontrolled default window = the FULL domain (edge to edge).
+    // Standard consumers keep the lane chrome + the alignment probe.
+    const std = mountRibbon({});
+    expect(std.querySelector(".hk-range-ribbon-lane")).not.toBeNull();
+    expect(std.querySelector(".hk-range-ribbon-overview-gutter")).not.toBeNull();
+    // Default LANES vocabulary (cpu/boot/parse/io/write/flush).
+    expect(std.textContent).toContain("CPU");
+  });
+
+  // Static scss contract: in minimal mode the gutter probe is display:none
+  // and the overview collapses to a single column (the strip spans the
+  // full width).
+  it("minimal mode overrides the overview grid in the sheet", () => {
+    const scss = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "HkRangeRibbon.scss"), "utf-8");
+    // The nested scss compiles to a single-column overview + a hidden
+    // gutter probe in minimal mode; assert the SOURCE structure (the flat
+    // compiled selector does not appear verbatim in the nested sheet).
+    expect(scss).toContain(".hk-range-ribbon[data-minimal] {");
+    expect(scss).toMatch(
+      /[\s\S]*?\.hk-range-ribbon\[data-minimal\] \{[\s\S]*?grid-template-columns: minmax\(0, 1fr\)/,
+    );
+    expect(scss).toMatch(
+      /\.hk-range-ribbon\[data-minimal\] \{[\s\S]*?\.hk-range-ribbon-overview-gutter \{[\s\S]*?display: none/,
+    );
+  });
 });

package/src/components/HkRangeRibbon.tsx

@@ -1,14 +1,5 @@
 import { RotateCcw } from "lucide-vue-next";
-import {
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  useId,
-  watch,
-  type PropType,
-} from "vue";
+import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, type PropType, useId, watch } from "vue";
 
 import { useI18n } from "../i18n/context";
 import HIconButton from "./HkIconButton";
@@ -269,6 +260,14 @@ export default defineComponent({
     windowEnabled: { type: Boolean, default: true },
     /** Narrowest window the ribbon will produce, in domain fractions. */
     minWindow: { type: Number, default: MIN_WINDOW_FALLBACK },
+    /** Wave (2026-11-06 raw-records five): MINIMAL MODE — a bare dual-handle
+     *  range bar. No lane rows, no overview minimap, no label gutter; the
+     *  strip spans the full width and its track uses muted-based tokens
+     *  (the surface-based track read whitish inside dark phone modals).
+     *  The uncontrolled default window is already the FULL domain, so a
+     *  minimal bar starts pinned edge to edge. `segments` / `selectedId`
+     *  are IGNORED in this mode (no segment DOM to select from). */
+    minimal: { type: Boolean, default: false },
   },
   emits: {
     select: (_id: string) => true,
@@ -277,6 +276,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
     const stripRef = ref<HTMLElement | null>(null);
+
     const internalWindow = ref<WindowRange | null>(null);
     /** Id of the segment whose tip card is floating (hover or focus). */
     const tipSegmentId = ref<string | null>(null);
@@ -548,6 +548,53 @@ export default defineComponent({
       if (tipSegmentId.value === id) tipSegmentId.value = null;
     }
 
+    // Wave (raw-records five): the label column is JS-MEASURED. The fixed
+    // minmax(48px,84px) floor left a dead band next to short labels, and a
+    // CSS max-content cannot align two independent grids (each lane sizes
+    // to its own label; the overview gutter has no text to size from — a
+    // hidden-probe attempt measured misaligned in real Chrome). Measuring
+    // the widest rendered label and publishing it as the shared var gives
+    // BOTH surfaces the same resolved column: adaptive and aligned.
+    const rootRef = ref<HTMLElement | null>(null);
+    const pinnedCol = ref<string | null>(null);
+    /** TWO-PHASE measure: FREE the column first. A pinned px width clips
+     *  long labels, and a clipped label's offsetWidth equals the clip - so
+     *  a naive offsetWidth max can never GROW after the first pin (and a
+     *  smaller max leaves the dead band). Freeing lets labels reflow to
+     *  natural width; the next frame reads the true text width
+     *  (scrollWidth == offsetWidth when unclipped) and re-pins only when
+     *  the value changed (converges - no ResizeObserver loop). */
+    const syncLabelCol = () => {
+      const root = rootRef.value;
+      if (!root) return;
+      root.style.setProperty("--hk-range-ribbon-label-col", "max-content");
+      requestAnimationFrame(() => {
+        const r = rootRef.value;
+        if (!r) return;
+        const labels = r.querySelectorAll<HTMLElement>(".hk-range-ribbon-lane-label");
+        let max = 0;
+        for (const el of labels) {
+          max = Math.max(max, el.offsetWidth, el.scrollWidth);
+        }
+        if (max <= 0) return;
+        const next = `${max}px`;
+        // Guard on the CURRENT INLINE value, not the last measurement:
+        // after the FREE phase the inline value is "max-content", and an
+        // unchanged measurement must STILL re-pin (the re-pin restores the
+        // px column the free took away - skipping it because "40px == 40px"
+        // left the bar resting misaligned at freed max-content, measured in
+        // real Chrome: field 20 vs tracks 41/60).
+        if (r.style.getPropertyValue("--hk-range-ribbon-label-col") !== next) {
+          pinnedCol.value = next;
+          r.style.setProperty("--hk-range-ribbon-label-col", next);
+        }
+      });
+    };
+    const labelObserver =
+      typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(() => syncLabelCol())
+        : null;
+
     onMounted(() => {
       // Window-level listeners: a pointer captured by a drag target still
       // emits moves/ups here, and a drag that leaves the strip keeps
@@ -556,9 +603,22 @@ export default defineComponent({
       window.addEventListener("pointermove", onPointerMove);
       window.addEventListener("pointerup", endGesture);
       window.addEventListener("pointercancel", endGesture);
+      // Publish the measured label column (see syncLabelCol above): after
+      // the first paint, on any lane-label resize (locale swap, viewport
+      // font change), and when the lanes vocabulary itself changes.
+      syncLabelCol();
+      labelObserver?.observe(rootRef.value!);
+      watch(
+        lanes,
+        () => {
+          nextTick(syncLabelCol);
+        },
+        { deep: true },
+      );
     });
 
     onBeforeUnmount(() => {
+      labelObserver?.disconnect();
       window.removeEventListener("pointermove", onPointerMove);
       window.removeEventListener("pointerup", endGesture);
       window.removeEventListener("pointercancel", endGesture);
@@ -657,7 +717,7 @@ export default defineComponent({
           {/* The overview paints the FULL domain only — it never follows
               the zoom, so the window's position stays locatable. */}
           <div class="hk-range-ribbon-overview-lanes" aria-hidden="true">
-            {lanes.value.map((lane) => (
+            {!props.minimal && lanes.value.map((lane) => (
               <div class="hk-range-ribbon-overview-row" key={lane.key} data-lane={lane.key}>
                 {(byLane.get(lane.key) ?? []).map((placed) => {
                   const box = fullDomainBox(placed);
@@ -701,7 +761,9 @@ export default defineComponent({
 
       return (
         <div
+          ref={rootRef}
           class="hk-range-ribbon"
+          data-minimal={props.minimal || undefined}
           data-windowed={win ? "true" : undefined}
           data-window-enabled={props.windowEnabled ? "true" : "false"}
           onKeydown={onRootKeyDown}
@@ -710,6 +772,11 @@ export default defineComponent({
               (empty gutter first), so x% means the same inline position on
               both surfaces — the strip can be used to locate a bar. */}
           <div class="hk-range-ribbon-overview">
+            {/* The gutter's width IS the shared label column: the
+                component JS-measures the widest rendered label and
+                publishes it on the root (two-phase free/measure/pin), so
+                this empty cell keeps the strip's x% aligned with the
+                lanes' x% at any label width. */}
             <span class="hk-range-ribbon-overview-gutter" aria-hidden="true" />
             <div class="hk-range-ribbon-overview-field">
               {strip}
@@ -780,6 +847,7 @@ export default defineComponent({
               </span>
             )}
           </div>
+          {!props.minimal && (
           <div class="hk-range-ribbon-lanes">
             {lanes.value.map((lane) => (
               <div class="hk-range-ribbon-lane" key={lane.key} data-lane={lane.key}>
@@ -795,6 +863,7 @@ export default defineComponent({
               </div>
             ))}
           </div>
+          )}
         </div>
       );
     };

package/src/components/HkSignInCard.tsx

@@ -1,3 +1,5 @@
+import { User } from "lucide-vue-next";
+
 import { credentialAutocomplete } from "../runtime/credentialAutofill";
 import { defineComponent, ref } from "vue";
 import { useI18n } from "../i18n/context";
@@ -131,20 +133,7 @@ export const HkSignInCard = defineComponent({
                     slots.usernameIcon ? (
                       slots.usernameIcon()
                     ) : (
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class="s-auth-card-field-icon"
-                        aria-hidden="true"
-                      >
-                        <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
-                        <circle cx="12" cy="7" r="4"></circle>
-                      </svg>
+                      <User class="s-auth-card-field-icon" aria-hidden="true" />
                     ),
                 }}
               </HkInput>

package/src/components/HkStepGuide.tsx

@@ -1,3 +1,5 @@
+import { Check } from "lucide-vue-next";
+
 import { defineComponent, h, type Component, type PropType } from "vue";
 
 import "./HkStepGuide.scss";
@@ -77,20 +79,7 @@ export default defineComponent({
                 >
                   <span class="hk-step-guide-ordinal">
                     {isDone ? (
-                      <svg
-                        class="hk-step-guide-check"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                      >
-                        <path
-                          d="M20 6L9 17l-5-5"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="3"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        />
-                      </svg>
+                      <Check class="hk-step-guide-check" stroke-width={3} aria-hidden="true" />
                     ) : (
                       idx + 1
                     )}

package/src/components/HkTable.tsx

@@ -1,3 +1,5 @@
+import { Check, ChevronUp, GripVertical } from "lucide-vue-next";
+
 import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
@@ -770,17 +772,7 @@ export default defineComponent({
                       ]}
                     >
                       {allChecked.value && (
-                        <svg
-                          class="hk-table-checkbox-icon"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-width="3"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <polyline points="20 6 9 17 4 12" />
-                        </svg>
+                        <Check class="hk-table-checkbox-icon" stroke-width={3} />
                       )}
                     </span>
                   </label>
@@ -802,20 +794,10 @@ export default defineComponent({
                   >
                     <span class="hk-table-header-label">{col.title}</span>
                     {canSort && sortKey.value === col.key && (
-                      <svg
-                        class={[
+                      <ChevronUp class={[
                           "hk-table-sort-icon",
                           sortDirection.value === "desc" ? "hk-table-sort-icon-desc" : "",
-                        ]}
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <polyline points="18 15 12 9 6 15" />
-                      </svg>
+                        ]} />
                     )}
                   </th>
                 );
@@ -874,14 +856,7 @@ export default defineComponent({
                           onPointerdown={(e: PointerEvent) => onHandlePointerdown(e, index)}
                           onKeydown={(e: KeyboardEvent) => onHandleKeydown(e, index)}
                         >
-                          <svg width="12" height="14" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true">
-                            <circle cx="3.5" cy="3" r="1.2" />
-                            <circle cx="8.5" cy="3" r="1.2" />
-                            <circle cx="3.5" cy="7" r="1.2" />
-                            <circle cx="8.5" cy="7" r="1.2" />
-                            <circle cx="3.5" cy="11" r="1.2" />
-                            <circle cx="8.5" cy="11" r="1.2" />
-                          </svg>
+                          <GripVertical size={14} aria-hidden="true" />
                         </span>
                       </td>
                     )}
@@ -902,17 +877,7 @@ export default defineComponent({
                             ]}
                           >
                             {selectedRowKeys.value.has(rowKey) && (
-                              <svg
-                                class="hk-table-checkbox-icon"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="3"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              >
-                                <polyline points="20 6 9 17 4 12" />
-                              </svg>
+                              <Check class="hk-table-checkbox-icon" stroke-width={3} />
                             )}
                           </span>
                         </label>

package/src/components/HkTree.tsx

@@ -1,3 +1,5 @@
+import { ChevronRight } from "lucide-vue-next";
+
 import { defineComponent, ref, watch, h, type Component, type PropType, type VNodeChild } from "vue";
 
 import "./HkTree.scss";
@@ -158,9 +160,7 @@ const TreeNodeRow = ({
           onClick={(e: MouseEvent) => { e.stopPropagation(); if (hasChildren) onToggle(node.id); }}
         >
           {hasChildren ? (
-            <svg viewBox="0 0 16 16" width="12" height="12" class="hk-tree-chevron" data-open={isExpanded || undefined}>
-              <path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
+            <ChevronRight class="hk-tree-chevron" data-open={isExpanded || undefined} size={12} stroke-width={1.5} />
           ) : (
             <span class="hk-tree-leaf" />
           )}