@celestia-island/hikari 0.43.15 → 0.43.17

package/package.json

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

package/src/animation/registerAnimations.ts

@@ -103,20 +103,6 @@ registerCssAnimation("s-voice-wave-bounce", { infinite: true });
 // components/HkPlaceholderMarquee.scss — overflowing placeholder sweep
 // (loops forever; pure CSS, loop geometry on inline custom properties).
 registerCssAnimation("hk-placeholder-marquee-scroll", { infinite: true });
-// styles/theme/mixins.scss — ambient/glow pulses (loop forever) and the
-// one-shot entrance/exit grammar, vendored byte-identical from
-// packages/theme. #353 brought the file under src/ without registering
-// its keyframes — the parity test caught the gap 6 days later.
-registerCssAnimation("pulse", { infinite: true });
-registerCssAnimation("ambient-move", { infinite: true });
-registerCssAnimation("pulse-glow-animation", { infinite: true });
-registerCssAnimation("expand-horizontal");
-registerCssAnimation("collapse-vertical");
-registerCssAnimation("slide-in-left");
-registerCssAnimation("slide-in-right");
-registerCssAnimation("slide-in-top");
-registerCssAnimation("slide-in-bottom");
-registerCssAnimation("fade-in-scale");
-registerCssAnimation("fade-out-scale");
-registerCssAnimation("blur-in");
-registerCssAnimation("bounce-in");
+// The styles/theme/mixins.scss ambient/glow/entrance keyframes were
+// retired with the legacy Gen-1 sheet vendoring (hikari #476) — their
+// registrar entries went with them.

package/src/components/HkAuthMethodList.test.tsx

@@ -97,20 +97,25 @@ describe("HkAuthMethodList", () => {
     await nextTick();
     const wrapper = c.querySelector<HTMLElement>(".s-auth-methods-list")!;
     const spans = [...wrapper.querySelectorAll<HTMLElement>(".s-auth-methods-label")];
-    Object.defineProperty(spans[0]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 58 }) });
-    Object.defineProperty(spans[1]!, "getBoundingClientRect", { configurable: true, value: () => ({ width: 61.4 }) });
-    // The list is drawn twice the size it is laid out at.
-    Object.defineProperty(wrapper, "getBoundingClientRect", {
-      configurable: true,
-      value: () => ({ left: 0, top: 0, right: 400, bottom: 200, width: 400, height: 200, x: 0, y: 0 }) as DOMRect,
-    });
-    Object.defineProperty(wrapper, "offsetWidth", { configurable: true, get: () => 200 });
-    Object.defineProperty(wrapper, "offsetHeight", { configurable: true, get: () => 100 });
+    // The scale has to come from a LABEL: the list is `display: contents` and
+    // generates no box at all (Blink reports offsetWidth 0 and a 0x0 rect), so
+    // stubbing a box on the list would only ever be green by accident.
+    for (const [i, drawn] of [58, 61.4].entries()) {
+      Object.defineProperty(spans[i]!, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({ left: 0, top: 0, right: drawn * 2, bottom: 40, width: drawn * 2, height: 40, x: 0, y: 0 }) as DOMRect,
+      });
+      // Laid out at half: the label is drawn twice the size it is laid out at.
+      Object.defineProperty(spans[i]!, "offsetWidth", { configurable: true, get: () => drawn });
+      Object.defineProperty(spans[i]!, "offsetHeight", { configurable: true, get: () => 20 });
+    }
     const instance = (wrapper as unknown as { __vueParentComponent?: { exposed?: Record<string, unknown> } })
       .__vueParentComponent?.exposed;
     (instance!.measure as () => void)();
-    // 61.4 drawn are 30.7 of the column's own: ceil 31, plus the 1px headroom.
-    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("32px");
+    // 122.8 drawn are 61.4 of the column's own: ceil 62, plus the 1px headroom.
+    // Reading the scale off the LIST instead — the shape this shipped with —
+    // yields 1 for a `display: contents` element and publishes the drawn 124px.
+    expect(wrapper.style.getPropertyValue("--auth-methods-label-width")).toBe("63px");
   });
 
   it("leaves the column fallback intact when no text metrics are available", async () => {

package/src/components/HkAuthMethodList.tsx

@@ -86,12 +86,21 @@ export default defineComponent({
       // published as a CSS length the column is laid out with: in a scaled or
       // zoomed root the two differ by the scale of the space, so the column
       // would come out that many times too wide (see `layoutGeometry`).
-      const space = drawnScale(root);
-      const factor = root.offsetWidth > 0 ? space.x : root.offsetHeight > 0 ? space.y : 1;
+      //
+      // The scale is read from the LABEL — the element the box was measured
+      // on. Reading it from the list itself cannot work: the list is
+      // `display: contents`, so it generates no box at all (measured in Blink:
+      // `offsetWidth` 0, a 0x0 rect, computed width `auto`), and every reader
+      // of a box reports nothing to divide by.
       for (const label of root.querySelectorAll<HTMLElement>(".s-auth-methods-label")) {
         const previous = label.style.width;
         label.style.width = "max-content";
-        widest = Math.max(widest, label.getBoundingClientRect().width / (factor > 0 ? factor : 1));
+        const drawn = label.getBoundingClientRect().width;
+        const scale = drawnScale(label);
+        const factor = Number.isFinite(scale.x) && scale.x > 0 ? scale.x : 1;
+        // `offsetWidth` is the laid-out fallback — already in the units the
+        // published length is used in, so it needs no division.
+        widest = Math.max(widest, factor > 0 ? drawn / factor : label.offsetWidth);
         label.style.width = previous;
       }
       // Guard: only publish when real text metrics were observed, so a

package/src/composables/layoutGeometry.ts

@@ -110,6 +110,13 @@ export function layoutOffset(el: HTMLElement, frame?: HTMLElement | null): Layou
  *  while the drawn-box equivalent (`rect.top - frameRect.top + frame.scrollTop`)
  *  is `k` times too large at zoom `k`.
  *
+ *  The frame's own border is excluded exactly when the walk passed THROUGH it
+ *  (`through`): a positioned frame measures its children from its padding edge,
+ *  so the difference does too, while a frame that is not in the chain (a
+ *  `position: static` scroller) is measured from its border box. The result is
+ *  the value `scrollTop`/`scrollLeft` want in both cases — those are offsets
+ *  into the scrollable area, whose origin is the padding edge.
+ *
  *  `y` (and `x`) are `NaN` when the chain cannot be added up or when `frame` is
  *  not an ancestor of `el` — the difference is meaningless then, and callers
  *  check `Number.isFinite` before scrolling with it. */

package/src/composables/useOverlayScrollbar.test.ts

@@ -208,6 +208,34 @@ describe("attachOverlayScrollbars", () => {
     expect(viewport.scrollTop).toBe(150);
   });
 
+  it("maps a horizontal track click onto the RTL scroll range", () => {
+    const { viewport, wrapper, handle } = mountViewport("horizontal");
+    stubGeometry(viewport, {
+      scrollHeight: 100, clientHeight: 100, scrollTop: 0,
+      scrollWidth: 400, clientWidth: 100, scrollLeft: 0,
+    });
+    // An RTL scroller counts `scrollLeft` down from 0 to −max (see the thumb
+    // mirroring): the track's LEFT end is the content's end, so a click at the
+    // halfway point must land at −150, not +150.
+    viewport.style.direction = "rtl";
+    handle.update();
+    const track = wrapper.querySelector<HTMLElement>(".hk-scrollbar-track")!;
+    vi.spyOn(track, "getBoundingClientRect").mockReturnValue({
+      top: 0, left: 0, width: 100, height: 6,
+      bottom: 6, right: 100, x: 0, y: 0, toJSON: () => ({}),
+    } as DOMRect);
+    track.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: 25 }));
+    // A quarter along the track, measured from its left = three quarters into
+    // the content from its (right-hand) start: −0.75 × 300.
+    expect(viewport.scrollLeft).toBe(-225);
+    // The magnitude is what the thumb's own mirroring reads back as progress
+    // (|scrollLeft| / max), so click and thumb now agree on the position.
+    // The LTR bar keeps mapping straight through.
+    viewport.style.direction = "ltr";
+    track.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: 25 }));
+    expect(viewport.scrollLeft).toBe(75);
+  });
+
   it("marks and unmarks a static parent with inline position:relative (guard)", () => {
     const { wrapper, handle } = mountViewport("vertical");
     // happy-dom computes no CSS → position computes "static" → the

package/src/composables/useOverlayScrollbar.ts

@@ -266,8 +266,16 @@ export function attachOverlayScrollbars(
         : (e.clientY - rect.top) / rect.height;
       const { scrollSize, clientSize } = axisMetrics(viewport, horizontal);
       const max = scrollSize - clientSize;
-      if (horizontal) viewport.scrollLeft = ratio * max;
-      else viewport.scrollTop = ratio * max;
+      if (horizontal) {
+        // RTL: the track's left end is the content's END, and `scrollLeft`
+        // runs 0 → −max (see the thumb mirroring in `update`), so a click at
+        // `ratio` from the left asks for `(ratio - 1) * max`. Without this the
+        // thumb and the click disagreed in RTL: the thumb was mirrored but the
+        // click still mapped LTR, so clicking right of the thumb scrolled the
+        // other way.
+        const rtl = isRtlAxis(viewport, true);
+        viewport.scrollLeft = rtl ? (ratio - 1) * max : ratio * max;
+      } else viewport.scrollTop = ratio * max;
     };
     const onEnter = () => s.track.classList.add("is-hovering");
     const onLeave = () => s.track.classList.remove("is-hovering");

package/src/styles/admin-tokens.scss

@@ -19,7 +19,6 @@
   --c-primary-light: rgb(var(--color-primary, 255 107 157) / 15%);
   --c-primary-subtle: rgb(var(--color-primary, 255 107 157) / 8%);
   --c-primary-overlay: rgb(var(--color-primary, 255 107 157) / 15%);
-  --border-faint: rgb(var(--color-border, 100 100 100) / 10%);
 
   /* ── Hikari color bridge ─ */
   --hi-color-primary: rgb(var(--color-primary, 255 107 157));

package/src/styles/tokenInventory.test.ts

@@ -70,13 +70,6 @@ const scaleSource = stripProvenanceHeader(
   read(resolve(stylesDir, "theme/scale.scss")),
 );
 const adminSource = read(resolve(stylesDir, "admin-tokens.scss"));
-const legacySheets = [
-  "base.scss",
-  "foundation.scss",
-  "themes.scss",
-  "_tokens.scss",
-  "_layout.scss",
-].map((b) => [`theme/${b}`, stripProvenanceHeader(read(resolve(stylesDir, "theme", b)))] as [string, string]);
 
 const seedFiles: Array<[string, string]> = [
   ["theme/channels.scss", seedSource],
@@ -151,80 +144,19 @@ describe("theme token inventory", () => {
 
   it("scale tokens are single-defined across the normalized sheets", () => {
     // Current legacy debt: these names still multi-define across the
-    // legacy sheets + admin-tokens (frozen 2026-09-12 census, 56 names).
+    // legacy sheets + admin-tokens (frozen 2026-09-12 census).
     // Each entry must die in its wave; adding a NEW name here is a
     // regression.
+        // Intentional dual faces: the plana-ui brand aliases in admin-tokens
+    // (pink no-JS face) vs the channel seed (standalone face).
     const KNOWN_MULTI_SCALE = new Set([
-      "--blur-lg",
-      "--blur-md",
-      "--blur-sm",
-      "--border-faint",
-      "--border-input",
-      "--border-subtle",
-      "--c-primary",
       "--c-primary-light",
       "--c-primary-overlay",
       "--c-primary-subtle",
-      "--duration-fast",
-      "--duration-instant",
-      "--duration-normal",
-      "--duration-short",
-      "--ease-in-expo",
-      "--ease-in-out",
-      "--ease-out-expo",
-      "--ease-standard",
-      "--font-mono",
-      "--font-reading",
-      "--font-sans",
-      "--hi-bg-surface-dark",
-      "--hi-border-color-focus",
-      "--hi-duration-instant",
-      "--hi-ease-default",
-      "--hi-icon-color",
-      "--hi-icon-size-lg",
-      "--hi-icon-size-md",
-      "--hi-icon-size-sm",
-      "--hi-icon-size-xs",
-      "--hi-radius-lg",
-      "--hi-radius-md",
-      "--hi-radius-sm",
-      "--hi-radius-xl",
-      "--hi-shadow-button",
-      "--hi-shadow-elevated",
-      "--hi-shadow-lg",
-      "--hi-shadow-md",
-      "--hi-shadow-sm",
-      "--hi-shadow-xl",
-      "--opacity-half",
-      "--radius-md",
-      "--radius-sm",
-      "--space-10",
-      "--space-12",
-      "--space-14",
-      "--space-16",
-      "--space-2",
-      "--space-20",
-      "--space-24",
-      "--space-28",
-      "--space-32",
-      "--space-4",
-      "--space-40",
-      "--space-6",
-      "--space-8",
-      "--text-2xs",
-      "--text-base",
-      "--text-lg",
-      "--text-md",
-      "--text-sm",
-      "--text-xs",
-      "--z-base",
-      "--z-header",
-      "--z-sidebar",
     ]);
 
     const defs = harvestDefinitions([
-      seedFiles[0],
-      ...legacySheets,
+      ...seedFiles,
       ["admin-tokens.scss", adminSource],
     ]);
     const scaleRe = /^--(space-|text-|radius-|blur-|duration-|ease-|z-|border-|c-|opacity-|shadow-(?!dropdown|focus|button-danger)|font-|hi-(duration|ease|radius|icon|blur|opacity|shadow-(?!dropdown|focus)|z-|border-color))/;
@@ -286,5 +218,38 @@ describe("theme token inventory", () => {
       }
     }
     expect(deviants, "non-canonical hex fallbacks").toEqual([]);
+
+    // rgba() fallbacks: the color channels must equal the seed triplet
+    // (alpha is the caller's choice and stays untouched).
+    const seedTripletValues: Record<string, [number, number, number]> = {};
+    for (const [name, sites] of seedTriplets) {
+      if (!name.startsWith("--color-")) continue;
+      const [r, g, b] = sites[0].value.split(" ").map((n) => Number(n));
+      seedTripletValues[name] = [r, g, b];
+    }
+    const rgbaDeviants: string[] = [];
+    for (const f of files) {
+      const css = read(resolve(componentsDir, f));
+      for (const m of css.matchAll(
+        /var\((--hi-color-[a-z0-9-]+),\s*rgba\((\d+),\s*(\d+),\s*(\d+),/g,
+      )) {
+        const token = m[1];
+        // danger is the one alias whose channel is named differently.
+        const channel = token
+          .replace("--hi-color-", "--color-")
+          .replace("danger", "error")
+          .replace(/-dark$/, "");
+        const seed = seedTripletValues[channel];
+        if (!seed) continue;
+        if (
+          Number(m[2]) !== seed[0] ||
+          Number(m[3]) !== seed[1] ||
+          Number(m[4]) !== seed[2]
+        ) {
+          rgbaDeviants.push(`${f}: var(${token}, rgba(${m[2]},${m[3]},${m[4]},…))`);
+        }
+      }
+    }
+    expect(rgbaDeviants, "non-canonical rgba fallbacks").toEqual([]);
   });
 });

package/src/styles/vendoredSync.test.ts

@@ -7,12 +7,12 @@ import { describe, expect, it } from "vitest";
 /**
  * Vendored-copy drift guard.
  *
- * Two file families in src/styles are byte-identical re-copies of upstream
- * sources (registry installs can only resolve paths inside this package):
+ * The vendored theme copies in src/styles are byte-identical re-copies of
+ * upstream sources (registry installs can only resolve paths inside this
+ * package):
  *
- *   1. styles/theme/channels.scss  ← src/tokens.scss
- *   2. styles/theme/{base,foundation,themes,_tokens,_layout,variables,
- *      mixins,_glass,_scrollbar}.scss  ← packages/theme/styles/*
+ *   styles/theme/channels.scss  ← src/tokens.scss
+ *   styles/theme/scale.scss     ← src/scale.scss
  *
  * The re-copy adds exactly one provenance header comment block; everything
  * after it must match the upstream byte-for-byte. Edit the UPSTREAM, then
@@ -50,17 +50,6 @@ const VENDORED_FROM_VUE: Array<[string, string]> = [
   ["theme/scale.scss", "scale.scss"],
 ];
 
-const VENDORED_FROM_THEME_PKG = [
-  "base.scss",
-  "foundation.scss",
-  "themes.scss",
-  "_tokens.scss",
-  "_layout.scss",
-  "variables.scss",
-  "mixins.scss",
-  "_glass.scss",
-  "_scrollbar.scss",
-];
 
 describe("vendored theme copies match their upstream sources", () => {
   it.each(VENDORED_FROM_VUE)(
@@ -76,16 +65,4 @@ describe("vendored theme copies match their upstream sources", () => {
     },
   );
 
-  it.each(VENDORED_FROM_THEME_PKG)(
-    "styles/theme/%s is the headered copy of packages/theme/styles/%s",
-    (basename) => {
-      const upstreamSource = readTrimmed(
-        resolve(stylesDir, "../../../theme/styles", basename),
-      );
-      const vendoredBody = stripProvenanceHeader(
-        readTrimmed(resolve(stylesDir, "theme", basename)),
-      );
-      expect(vendoredBody).toBe(upstreamSource);
-    },
-  );
 });

package/src/styles/theme/_glass.scss

@@ -1,34 +0,0 @@
-// Vendored byte-identical from packages/theme/styles/_glass.scss (hikari repo) so npm registry installs can resolve it — edit the upstream file, then re-copy; do not hand-edit here.
-
-// _glass.scss — Glass-morphism utility classes adopted from shittim-chest.
-// These provide the frosted-glass aesthetic that makes panels feel layered
-// without heavy borders.
-
-.hk-glass {
-  background: rgb(30 30 30 / var(--hi-opacity-half, 0.92));
-  backdrop-filter: blur(var(--hi-blur-md, 16px));
-  -webkit-backdrop-filter: blur(var(--hi-blur-md, 16px));
-}
-
-.hk-glass-header {
-  background: rgb(30 30 30 / var(--hi-opacity-more, 0.96));
-  backdrop-filter: blur(var(--hi-blur-sm, 8px));
-  -webkit-backdrop-filter: blur(var(--hi-blur-sm, 8px));
-}
-
-.hk-glass-panel {
-  background: rgb(30 30 30 / var(--hi-opacity-half, 0.92));
-  backdrop-filter: blur(var(--hi-blur-lg, 24px));
-  -webkit-backdrop-filter: blur(var(--hi-blur-lg, 24px));
-  border: 1px solid rgb(255 255 255 / 8%);
-  border-radius: var(--hi-radius-lg, 12px);
-  box-shadow: var(--hi-shadow-panel);
-}
-
-.hk-glass-float {
-  background: rgb(30 30 30 / var(--hi-opacity-more, 0.96));
-  backdrop-filter: blur(var(--hi-blur-md, 16px));
-  -webkit-backdrop-filter: blur(var(--hi-blur-md, 16px));
-  border: 1px solid rgb(255 255 255 / 6%);
-  box-shadow: var(--hi-shadow-elevated);
-}

package/src/styles/theme/_layout.scss

@@ -1,124 +0,0 @@
-// Vendored byte-identical from packages/theme/styles/_layout.scss (hikari repo) so npm registry installs can resolve it — edit the upstream file, then re-copy; do not hand-edit here.
-
-// _layout.scss — Shared unprefixed design tokens for hikari + plana components.
-// Originally sourced from shittim-chest's theme system; extracted here so
-// any project importing @celestia-island/hikari/styles gets them automatically.
-//
-// Prefixed --hi-* equivalents exist in _tokens.scss and foundation.scss;
-// these unprefixed tokens are what hikari Hk* components and plana Plana*
-// components reference at call sites (with var(--token, fallback) pattern).
-
-:root {
-  // ── Typography scale (HkTabs, HkButton, and plana components depend on these) ─
-  --text-2xs: 0.625rem;
-  --text-xs: 0.75rem;
-  --text-sm: 0.8125rem;
-  --text-base: 0.875rem;
-  --text-md: 1rem;
-  --text-lg: 1.125rem;
-  --text-xl: 1.25rem;
-  --text-2xl: 1.5rem;
-
-  // ── Font families (body text, mono for version/numbers) ─
-  /* Apple-style stack + CJK UI tail — keep in sync with packages/vue/src/theme/fontContext.ts */
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
-  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
-  --font-reading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
-
-  // ── Spacing scale (0—96, named by px value for self-documenting call sites) ─
-  --space-1: 0.0625rem;
-  --space-2: 0.125rem;
-  --space-4: 0.25rem;
-  --space-6: 0.375rem;
-  --space-8: 0.5rem;
-  --space-10: 0.625rem;
-  --space-12: 0.75rem;
-  --space-14: 0.875rem;
-  --space-16: 1rem;
-  --space-20: 1.25rem;
-  --space-24: 1.5rem;
-  --space-28: 1.75rem;
-  --space-32: 2rem;
-  --space-40: 2.5rem;
-  --space-48: 3rem;
-  --space-64: 4rem;
-  --space-80: 5rem;
-  --space-96: 6rem;
-
-  // ── Border radius scale ─
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-full: 9999px;
-
-  // ── Blur scale (glass/backdrop effects) ─
-  --blur-xs: 4px;
-  --blur-sm: 8px;
-  --blur-md: 16px;
-  --blur-lg: 24px;
-
-  // ── Opacity tiers ─
-  --opacity-faded: 0.45;
-  --opacity-less: 0.85;
-  --opacity-half: 0.92;
-  --opacity-more: 0.96;
-
-  // ── Z-index hierarchy (group bands) ─
-  // One registered context: every layer family owns a band. Members inside
-  // a band stack by DOM order (browser default) — only the band boundaries
-  // are managed. Overlay-class components (modal/drawer/popover/select
-  // popout/menu sheet/locale picker) MUST register with usePopupManager,
-  // which allocates from the popup band (1000 + 2n, reset when the stack
-  // empties); fixed layers above the stack (toast/tooltip/fatal/titlebar)
-  // never register.
-  //   0–9      local — intra-component stacking (self-contained contexts)
-  //   10–99    content float — sticky columns, in-page lifts, minimaps
-  //   100–199  app chrome — header, footer, header popups
-  //   200–899  app overlay — reserved for app-level decorations
-  //   900–999  app sheet — drawer sidebars, bottom sheets
-  //   1000–1999 popup stack — manager-allocated (modal/drawer/popover/…)
-  //   9999     toast   10000 tooltip   10001 fatal
-  //   100001   native titlebar (Tauri caption)   100002 modal breadcrumb
-  --z-base: 0;
-  --z-above: 1;
-  --z-overlay: 2;
-  --z-top: 3;
-  --z-content: 10;
-  --z-floating: 50;
-  --z-header: 100;
-  --z-footer: 110;
-  --z-header-popup: 150;
-  --z-sheet: 900;
-  --z-sidebar: 900;
-  --z-modal: 1000;
-  --z-modal-base: 1000;
-  --z-modal-step: 2;
-  --z-toast: 9999;
-  --z-tooltip: 10000;
-
-  // ── Layout dimensions ─
-  --s-header-height: 3rem;
-  --s-footer-height: 3rem;
-
-  // ── Semantic border tokens ─
-  --border-faint: rgb(var(--color-border) / 10%);
-  --border-subtle: rgb(var(--color-border) / 12%);
-
-  // ── Duration / easing ─
-  --duration-fast: 0.15s;
-  --duration-short: 0.15s;
-  --duration-normal: 0.3s;
-  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
-
-  // ── Semantic accent colors (used by plana components) ─
-  --c-primary: rgb(var(--color-primary));
-  --c-primary-light: rgb(var(--color-primary) / 15%);
-  --c-primary-subtle: rgb(var(--color-primary) / 8%);
-  --c-primary-overlay: rgb(var(--color-primary) / 15%);
-
-  // ── Shadow scale ─
-  --shadow-modal: 0 12px 40px rgb(0 0 0 / 20%), 0 0 0 1px rgb(255 255 255 / 4%);
-}

package/src/styles/theme/_scrollbar.scss

@@ -1,74 +0,0 @@
-// Vendored byte-identical from packages/theme/styles/_scrollbar.scss (hikari repo) so npm registry installs can resolve it — edit the upstream file, then re-copy; do not hand-edit here.
-
-// _scrollbar.scss — the shared overlay scrollbar chrome.
-//
-// ONE scrollbar system for the whole library: the `.hk-scrollbar-track` /
-// `.hk-scrollbar-thumb` DOM is created imperatively by
-// packages/vue/src/composables/useOverlayScrollbar.ts
-// (attachOverlayScrollbars) and styled here. HkScrollContainer keeps its
-// container-specific rules in HkScrollContainer.scss; every other scroll
-// region in the library attaches the same overlay and hides its native
-// bar with the standard two-liner:
-//
-//   scrollbar-width: none;
-//   &::-webkit-scrollbar { display: none; }
-
-.hk-scrollbar-track {
-  position: absolute;
-  z-index: 10;
-  background: transparent;
-  /* Click-through while faded: an invisible rail must never steal
-     clicks from the content beneath it (the track hugs the region's
-     edge, exactly where end-of-line links/buttons live). The rail
-     becomes interactive only while it is visible — the flash window
-     after a scroll (and while hovered/dragged within that window). */
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity var(--hi-duration-fast, 0.15s) ease;
-
-  &[data-axis="horizontal"] {
-    left: 4px;
-    right: 4px;
-    bottom: 2px;
-    height: 6px;
-  }
-
-  &:not([data-axis="horizontal"]) {
-    top: 4px;
-    bottom: 4px;
-    right: 2px;
-    width: 6px;
-  }
-
-  &.is-scrolling,
-  &.is-hovering {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
-
-.hk-scrollbar-thumb {
-  position: absolute;
-  border-radius: 3px;
-  background: color-mix(in srgb, var(--hi-color-muted) 35%, transparent);
-  transition: background var(--hi-duration-fast, 0.15s) ease;
-
-  .is-hovering &,
-  &.is-dragging {
-    background: color-mix(in srgb, var(--hi-color-muted) 55%, transparent);
-  }
-}
-
-.hk-scrollbar-track[data-axis="horizontal"] .hk-scrollbar-thumb {
-  top: 0;
-  left: 0;
-  height: 100%;
-  min-width: 20px;
-}
-
-.hk-scrollbar-track:not([data-axis="horizontal"]) .hk-scrollbar-thumb {
-  top: 0;
-  left: 0;
-  width: 100%;
-  min-height: 20px;
-}