@celestia-island/hikari 0.55.305 → 0.55.306

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.305",
+  "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/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>
       );
     };