@celestia-island/hikari 0.43.16 → 0.43.17

package/package.json

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

package/src/styles/theme/_tokens.scss

@@ -1,70 +0,0 @@
-// Vendored byte-identical from packages/theme/styles/_tokens.scss (hikari repo) so npm registry installs can resolve it — edit the upstream file, then re-copy; do not hand-edit here.
-
-// _tokens.scss — Design tokens adopted from shittim-chest's theme system.
-// These supplement hikari's existing foundation.scss tokens with the
-// detail-oriented tokens that make shittim-chest's UI feel polished:
-// z-index hierarchy, blur/opacity tiers, shittim-chest easings, and
-// scrollbar geometry.
-
-:root {
-  // ── Z-Index Hierarchy (from shittim-chest) ──────────────────────
-  --hi-z-base: 0;
-  --hi-z-above: 1;
-  --hi-z-content: 10;
-  --hi-z-header: 30;
-  --hi-z-sidebar: 40;
-  --hi-z-floating: 50;
-  --hi-z-header-popup: 150;
-  --hi-z-modal: 1000;
-  --hi-z-modal-step: 2;
-  --hi-z-toast: 9999;
-  --hi-z-tooltip: 10000;
-
-  // ── Blur Scale ──────────────────────────────────────────────────
-  --hi-blur-xs: 4px;
-  --hi-blur-sm: 8px;
-  --hi-blur-md: 16px;
-  --hi-blur-lg: 24px;
-
-  // ── Opacity Tiers ───────────────────────────────────────────────
-  --hi-opacity-faded: 0.45;
-  --hi-opacity-less: 0.85;
-  --hi-opacity-half: 0.92;
-  --hi-opacity-more: 0.96;
-
-  // ── Extended Easing (shittim-chest style) ───────────────────────
-  --hi-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-  --hi-ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
-  --hi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  // ── Extended Duration ───────────────────────────────────────────
-  --hi-duration-instant: 0.1s;
-  --hi-duration-short: 0.15s;
-  --hi-duration-fade: 0.15s;
-
-  // ── Motion Tokens ───────────────────────────────────────────────
-  --hi-motion-popup-scale: 0.98;
-  --hi-motion-popup-offset: 4px;
-  --hi-motion-drawer-offset: 0.5rem;
-
-  // ── Extended Shadow Ladder (shittim-chest style) ────────────────
-  --hi-shadow-panel: 0 4px 32px rgb(0 0 0 / 20%), 0 0 0 1px rgb(255 255 255 / 4%);
-  --hi-shadow-elevated: 0 8px 32px rgb(0 0 0 / 15%);
-  --hi-shadow-modal: 0 20px 60px rgb(0 0 0 / 25%), 0 0 0 1px rgb(255 255 255 / 5%);
-  --hi-shadow-dropdown: 0 4px 24px rgb(0 0 0 / 12%), 0 0 0 1px rgb(255 255 255 / 4%);
-  --hi-shadow-tooltip: 0 2px 8px rgb(0 0 0 / 20%);
-  --hi-shadow-focus: 0 0 0 3px rgb(255 107 157 / 12%);
-  --hi-shadow-focus-ring: 0 0 0 2px rgb(240 244 248), 0 0 0 4px rgb(238 162 164);
-  --hi-shadow-focus-ring-error: 0 0 0 2px rgb(240 244 248), 0 0 0 4px rgb(255 76 0);
-  --hi-shadow-button: 0 4px 14px rgb(238 162 164 / 35%);
-  --hi-shadow-button-danger: 0 4px 14px rgb(255 76 0 / 35%);
-
-  // ── Scrollbar Geometry (overlay scrollbar system) ───────────────
-  --hi-scroll-inset: 4px;
-  --hi-scroll-size: 8px;
-  --hi-scroll-size-hover: 14px;
-  --hi-scroll-thumb: 4px;
-  --hi-scroll-thumb-hover: 6px;
-  --hi-scroll-thumb-min: 20px;
-  --hi-scroll-edge: 1px;
-}