@celestia-island/hikari 0.55.304 → 0.55.305

package/package.json

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