@celestia-island/hikari 0.55.59 → 0.55.64

package/package.json

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

package/src/components/HkColorSchemeDialog.scss

@@ -64,6 +64,31 @@
   padding: var(--space-4, 0.25rem) var(--space-4, 0.25rem) var(--space-8, 0.5rem);
 }
 
+/* Non-color slot cell (number slider / enum tab strip). A picker labels
+   itself; a slider and a tab strip do not, so the field supplies the slot
+   label — and the slider, whose value is otherwise only exposed through
+   aria-valuetext, prints it in the unit its cssvar is written with. */
+.s-scheme-group-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2, 0.125rem);
+  min-width: 0;
+}
+
+.s-scheme-group-field-label {
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.s-scheme-group-field-value {
+  font-size: var(--text-2xs, 0.625rem);
+  color: rgb(var(--color-muted));
+  font-variant-numeric: tabular-nums;
+}
+
 @media (max-width: 767px) {
   .s-scheme-group-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));

package/src/components/HkColorSchemeDialog.tsx

@@ -28,9 +28,9 @@ export const HColorSchemeDialog = defineComponent({
   name: "HkColorSchemeDialog",
   props: {
     modelValue: { type: Boolean, required: true },
-    /** Prefill dark tokens; defaults to the hikari synthwave dark scheme. */
+    /** Prefill dark tokens; defaults to the stock default preset's dark scheme. */
     initialDark: { type: Object as PropType<ThemeSchemeTokens>, default: undefined },
-    /** Prefill light tokens; defaults to the hikari synthwave light scheme. */
+    /** Prefill light tokens; defaults to the stock default preset's light scheme. */
     initialLight: { type: Object as PropType<ThemeSchemeTokens>, default: undefined },
     /** Prefill extension token groups (per mode); defaults to registry defaults. */
     initialGroups: { type: Object as PropType<ThemeTokenGroupModes>, default: undefined },

package/src/components/HkColorSchemeEditor.initTheme.test.ts

@@ -0,0 +1,207 @@
+/**
+ * The end-to-end chain the other two theme suites leave open:
+ * `initTheme()` → registry → `HkColorSchemeEditor` → draft → cssvars.
+ *
+ *   - src/theme/standardGroups.test.ts proves initTheme() REGISTERS `shape`.
+ *   - src/components/HkColorSchemeEditor.test.ts proves the editor RENDERS
+ *     whatever the registry holds — but it registers its own `editor-kinds`
+ *     group by hand (registerTokenGroup) and nothing under src/components/
+ *     calls initTheme() at all.
+ *
+ * So neither side notices when the halves stop agreeing: a standard group
+ * shipping slots the editor cannot render, a registry instance the editor
+ * does not share with initTheme(), or a slider edit that never reaches the
+ * emitted cssvar. That seam is this file's subject.
+ *
+ * Every case builds a FRESH module graph (vi.resetModules() + dynamic
+ * import) and never calls registerTokenGroup, so initTheme() is the only
+ * registrant in it. The reverse-control case below takes the same fresh
+ * graph but does NOT call initTheme(), which is what keeps the positive
+ * assertions from being vacuously true.
+ *
+ * Known happy-dom noise: each initTheme() call leaves the environment one
+ * pending async task that teardown aborts, so one
+ * `DOMException [AbortError]: The operation was aborted` dump is printed per
+ * call once the file finishes — and none from the reverse-control case,
+ * which never calls initTheme(). The dump is pre-existing teardown noise
+ * rather than a defect of this seam: this same branch without this file
+ * already prints four of them on a full run. Documented, not silenced.
+ */
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick, ref, type Ref } from "vue";
+
+import type { HCustomTheme } from "./HkColorSchemeEditor";
+
+interface EditorExpose {
+  getDraft: () => HCustomTheme;
+}
+
+type EditorComponent = (typeof import("./HkColorSchemeEditor"))["HkColorSchemeEditor"];
+type ThemeModule = typeof import("../theme");
+
+// The editor's first dynamic import drags in the whole src/index.ts barrel
+// (~200 components), and Vite charges that transform to whichever case runs
+// first. Warm the cache here, under a hook budget instead of a case's 5s.
+// The instances the cases use are still the fresh ones taken after
+// vi.resetModules() below; this hook only invites the transform.
+beforeAll(async () => {
+  await import("../theme");
+  await import("./HkColorSchemeEditor");
+}, 120_000);
+
+/** A fresh module graph, with initTheme() the only possible registrant. */
+async function freshGraph(): Promise<{ theme: ThemeModule; editor: EditorComponent }> {
+  vi.resetModules();
+  const theme = await import("../theme");
+  const { HkColorSchemeEditor } = await import("./HkColorSchemeEditor");
+  return { theme, editor: HkColorSchemeEditor };
+}
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountEditor(editor: EditorComponent): {
+  exposed: Ref<EditorExpose | null>;
+  container: HTMLElement;
+} {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const exposed = ref<EditorExpose | null>(null);
+  const app = createApp({ render: () => h(editor, { ref: exposed }) });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { exposed, container };
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+interface SliderFacts {
+  max: string | null;
+  label: string | null;
+  valueNow: string | null;
+  valueText: string | null;
+}
+
+/** Every rendered slider of the editor, in DOM order, by aria attribute. */
+function sliders(container: HTMLElement): SliderFacts[] {
+  return [...container.querySelectorAll(".hk-slider")].map((slider) => ({
+    max: slider.getAttribute("aria-valuemax"),
+    label: slider.getAttribute("aria-label"),
+    valueNow: slider.getAttribute("aria-valuenow"),
+    valueText: slider.getAttribute("aria-valuetext"),
+  }));
+}
+
+describe("initTheme() → registry → HkColorSchemeEditor", () => {
+  it("registers the shape group and renders its four radius sliders", async () => {
+    const { theme, editor } = await freshGraph();
+    // Fresh graph: the registry is empty until initTheme() runs, which is
+    // what makes initTheme() the only registrant of every slot asserted on.
+    expect(theme.getTokenGroups()).toEqual([]);
+
+    theme.initTheme();
+    // Pin the editing tab. The editor seeds it from `effectiveMode`, which
+    // under the default "system" mode resolves from the SOLAR PERIOD — so
+    // without this the assertions below flip with the wall clock (they read
+    // the dark side while a daytime run edits the light side). Same pin as
+    // the sibling HkColorSchemeEditor.test.ts does in its beforeEach.
+    theme.useTheme().setMode("dark");
+
+    const shape = theme
+      .getTokenGroups()
+      .find((group) => group.id === theme.STANDARD_SHAPE_GROUP_ID);
+    expect(shape, "initTheme() registered the shape group").toBeDefined();
+    // The four slots target the existing L2 scale tokens, and their maxima
+    // are the aria-valuemax values the mount below is identified by.
+    const slotFacts = (shape!.slots ?? []).map((slot) => {
+      if (!theme.isNumberSlot(slot)) {
+        throw new Error(`shape slot ${slot.key} is not a number slot`);
+      }
+      return [slot.key, slot.cssVar, slot.max];
+    });
+    expect(slotFacts).toEqual([
+      ["radius-sm", "--radius-sm", 24],
+      ["radius-md", "--radius-md", 32],
+      ["radius-lg", "--radius-lg", 40],
+      ["radius-xl", "--radius-xl", 48],
+    ]);
+
+    const { container } = mountEditor(editor);
+    await nextTick();
+
+    const rendered = sliders(container);
+    expect(rendered, "one slider per number slot, and only those").toHaveLength(4);
+    expect(rendered.map((s) => s.max)).toEqual(["24", "32", "40", "48"]);
+    // aria-label carries the LOCALIZED slot label — never the raw
+    // `hikari::theme.groups.<id>.<key>` message key or a stringified label
+    // map. The expectation is read BACK FROM THE REGISTRY rather than
+    // re-typed here: a second hand-copied list would go red on a pure copy
+    // edit while the seam stayed intact, which is the drift class this repo
+    // keeps retiring (see styles/channelFallbacks.test.ts). The controls
+    // below still pin the seam itself.
+    const expectedLabels = (shape!.slots ?? []).map((slot) =>
+      theme.resolveLocalizedText(slot.label, "en"),
+    );
+    expect(rendered.map((s) => s.label)).toEqual(expectedLabels);
+    for (const { label } of rendered) {
+      expect(label).not.toContain("hikari::");
+      expect(label).not.toContain("[object Object]");
+      expect(label!.length).toBeGreaterThan(0);
+    }
+    // Current values, unit-formatted the same way the cssvar is written.
+    expect(rendered.map((s) => s.valueNow)).toEqual(["4", "8", "12", "16"]);
+    expect(rendered.map((s) => s.valueText)).toEqual(["4px", "8px", "12px", "16px"]);
+  });
+
+  it("routes a slider edit into the dark draft only, and into the cssvars", async () => {
+    const { theme, editor } = await freshGraph();
+    theme.initTheme();
+    // Pin the editing tab. The editor seeds it from `effectiveMode`, which
+    // under the default "system" mode resolves from the SOLAR PERIOD — so
+    // without this the assertions below flip with the wall clock (they read
+    // the dark side while a daytime run edits the light side). Same pin as
+    // the sibling HkColorSchemeEditor.test.ts does in its beforeEach.
+    theme.useTheme().setMode("dark");
+    const { exposed, container } = mountEditor(editor);
+    await nextTick();
+
+    const first = container.querySelector<HTMLElement>(".hk-slider");
+    expect(first, "the sm slider rendered").not.toBeNull();
+    // The control's own update path (HkSlider's key handler → emit → the
+    // editor's updateGroupToken), not a direct draft write.
+    first!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    await nextTick();
+
+    const draft = exposed.value!.getDraft();
+    expect(draft.groups, "getDraft() carries the initTheme()-registered group").toBeTruthy();
+    expect(draft.groups!.dark!.shape["radius-sm"]).toBe(5);
+    // Per-mode isolation: the light side keeps the registry default.
+    expect(draft.groups!.light!.shape["radius-sm"]).toBe(4);
+
+    // …and the edit is what the theme layer would emit for the dark mode.
+    const darkVars = theme.groupTokensToCSSVars(draft.groups!.dark!);
+    expect(darkVars["--radius-sm"]).toBe("5px");
+    // Untouched siblings still serialize their defaults.
+    expect(darkVars["--radius-md"]).toBe("8px");
+    expect(darkVars["--radius-lg"]).toBe("12px");
+    expect(darkVars["--radius-xl"]).toBe("16px");
+    expect(theme.groupTokensToCSSVars(draft.groups!.light!)["--radius-sm"]).toBe("4px");
+  });
+
+  it("renders no slider at all when initTheme() never runs", async () => {
+    // Reverse control: the same fresh graph WITHOUT initTheme(). If the
+    // assertions above were true for any reason other than initTheme()
+    // registering the group, this case would still show four sliders.
+    const { theme, editor } = await freshGraph();
+    expect(theme.getTokenGroups()).toEqual([]);
+
+    const { container } = mountEditor(editor);
+    await nextTick();
+
+    expect(container.querySelectorAll(".hk-slider")).toHaveLength(0);
+  });
+});

package/src/components/HkColorSchemeEditor.test.ts

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { createApp, h, nextTick, onMounted, ref, type Ref } from "vue";
 
-import { registerTokenGroup, useTheme, type TokenGroupDefinition } from "../theme";
+import { registerTokenGroup, themePresets, useTheme, type ThemeTokenRGB, type TokenGroupDefinition } from "../theme";
 import { HkColorSchemeEditor, type HCustomTheme } from "./HkColorSchemeEditor";
 
 // Fresh file = fresh registry module instance: no groups are registered
@@ -90,6 +90,7 @@ const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement
 function mountEditor(initial?: {
   initialDark?: HCustomTheme["dark"];
   initialLight?: HCustomTheme["light"];
+  initialGroups?: HCustomTheme["groups"];
 }): { ref: Ref<EditorExpose | null>; container: HTMLElement } {
   const container = document.createElement("div");
   document.body.appendChild(container);
@@ -100,6 +101,7 @@ function mountEditor(initial?: {
         ref: editorRef,
         ...(initial?.initialDark ? { initialDark: initial.initialDark } : {}),
         ...(initial?.initialLight ? { initialLight: initial.initialLight } : {}),
+        ...(initial?.initialGroups ? { initialGroups: initial.initialGroups } : {}),
       }),
   });
   app.mount(container);
@@ -238,7 +240,7 @@ describe("HkColorSchemeEditor", () => {
       b: { r: 7, g: 8, b: 9 },
     });
     // Sectioned group slots also land under their group id.
-    expect(darkGroups["editor-sectioned"].l1.r).toBe(234);
+    expect((darkGroups["editor-sectioned"].l1 as ThemeTokenRGB).r).toBe(234);
     expect(lightGroups["editor-sectioned"].l2).toEqual({ r: 21, g: 128, b: 61 });
   });
 
@@ -247,14 +249,16 @@ describe("HkColorSchemeEditor", () => {
     await nextTick();
 
     const before = ref.value!.getDraft();
-    expect(before.dark.primary).toEqual({ r: 255, g: 107, b: 157 });
+    // Seeded from the stock preset table: assert against it rather than a
+    // literal that has to be re-typed every time the default scheme moves.
+    expect(before.dark.primary).toEqual(themePresets.default.dark.primary);
 
     await setPrimaryHex("00ff00");
     expect(ref.value!.getDraft().dark.primary).toEqual({ r: 0, g: 255, b: 0 });
 
     ref.value!.reset();
     await nextTick();
-    expect(ref.value!.getDraft().dark.primary).toEqual({ r: 255, g: 107, b: 157 });
+    expect(ref.value!.getDraft().dark.primary).toEqual(themePresets.default.dark.primary);
   });
 
   it("reset() re-seeds on-solid slots to white when the prefill omits them", async () => {
@@ -315,3 +319,213 @@ describe("HkColorSchemeEditor", () => {
     expect(exposed!.getDraft().name).toBe("Host owned name");
   });
 });
+
+describe("HkColorSchemeEditor seed provenance", () => {
+  /**
+   * Behavioural, not textual.
+   *
+   * An earlier cut of this guard scanned the component source for hard-coded
+   * palette literals. Mutation rounds killed it three times over: a re-spelled
+   * literal, a hex literal, a member access and a reordered key object all
+   * walked through it, while its exact-string anchors went red on a mere
+   * reformat. Text cannot pin this invariant.
+   *
+   * So pin the invariant itself — move the stock table and require the editor
+   * to follow. A hard-coded seed cannot, whatever spelling it uses, and no
+   * formatting choice can make this false-positive.
+   */
+  it("seeds the dark scheme from the live preset table", async () => {
+    const sentinel = { r: 7, g: 8, b: 9 };
+    const scheme = themePresets.default.dark;
+    const original = scheme.primary;
+    scheme.primary = sentinel;
+    try {
+      const { ref } = mountEditor();
+      await nextTick();
+      expect(ref.value!.getDraft().dark.primary).toEqual(sentinel);
+    } finally {
+      scheme.primary = original;
+    }
+  });
+
+  it("seeds the light scheme from the live preset table", async () => {
+    const sentinel = { r: 11, g: 12, b: 13 };
+    const scheme = themePresets.default.light;
+    const original = scheme.primary;
+    scheme.primary = sentinel;
+    try {
+      const { ref } = mountEditor();
+      await nextTick();
+      expect(ref.value!.getDraft().light.primary).toEqual(sentinel);
+    } finally {
+      scheme.primary = original;
+    }
+  });
+
+  it("survives a consumer that clears the stock keys", async () => {
+    // Chest does exactly this at boot: every stock key is deleted and only its
+    // brand line is registered (brandPresets.ts), so `themePresets.default` is
+    // simply absent downstream. An unconditional dereference mounts fine in
+    // every test in this repo and throws at mount inside that consumer — this
+    // case is the only thing that can see it.
+    const table = themePresets as Record<string, (typeof themePresets)[string]>;
+    const stock = table.default;
+    const brand = {
+      id: "brand",
+      name: "Brand",
+      dark: { ...stock.dark, primary: { r: 1, g: 2, b: 3 } },
+      light: { ...stock.light, primary: { r: 4, g: 5, b: 6 } },
+    };
+    for (const key of Object.keys(table)) delete table[key];
+    table.brand = brand;
+    try {
+      const { ref } = mountEditor();
+      await nextTick();
+      // Seeded from the consumer's line, not from a missing stock entry.
+      expect(ref.value!.getDraft().dark.primary).toEqual(brand.dark.primary);
+      expect(ref.value!.getDraft().light.primary).toEqual(brand.light.primary);
+    } finally {
+      delete table.brand;
+      table.default = stock;
+    }
+  });
+
+  it("still seeds when the table is empty altogether", async () => {
+    // Defensive arm: a consumer that clears the table without registering
+    // anything leaves `stockDefaultPreset` as the only reachable palette. The
+    // editor must mount rather than throw.
+    const table = themePresets as Record<string, (typeof themePresets)[string]>;
+    const stock = table.default;
+    delete table.default;
+    try {
+      const { ref } = mountEditor();
+      await nextTick();
+      expect(ref.value!.getDraft().dark.primary).toEqual(stock.dark.primary);
+    } finally {
+      table.default = stock;
+    }
+  });
+});
+
+// ── Widened slot kinds: numbers and enums next to colors ─────────────
+
+/** Registered for the cases below only, so the counting assertions of the
+ *  cases above never see it. */
+const KIND_SLOTS_GROUP: TokenGroupDefinition = {
+  id: "editor-kinds",
+  label: "Editor kinds",
+  slots: [
+    {
+      key: "radius-md",
+      cssVar: "--radius-md",
+      kind: "number",
+      label: { en: "Medium radius", "zh-Hans": "中圆角" },
+      defaults: { dark: 8, light: 8 },
+      min: 0,
+      max: 32,
+      step: 1,
+      unit: "px",
+    },
+    {
+      key: "density",
+      kind: "enum",
+      label: { en: "Density", "zh-Hans": "密度" },
+      defaults: { dark: "compact", light: "cozy" },
+      options: [
+        { value: "compact", label: { en: "Compact", "zh-Hans": "紧凑" } },
+        { value: "cozy", label: "Cozy" },
+      ],
+    },
+    {
+      key: "wire",
+      label: { en: "Wire", "zh-Hans": "导线" },
+      defaults: { dark: { r: 220, g: 60, b: 60 }, light: { r: 180, g: 40, b: 40 } },
+    },
+  ],
+};
+
+describe("HkColorSchemeEditor slot kinds", () => {
+  beforeEach(() => {
+    registerTokenGroup(KIND_SLOTS_GROUP);
+  });
+
+  /** The expansion panel holding this group's slots. */
+  function kindPanel(container: HTMLElement): HTMLElement {
+    const slider = container.querySelector(".s-scheme-group-field .hk-slider");
+    expect(slider, "the number slot renders a slider").not.toBeNull();
+    return slider!.closest(".hk-expansion-panel") as HTMLElement;
+  }
+
+  it("renders a slider for number slots and a segmented strip for enum slots", async () => {
+    const { container } = mountEditor();
+    await nextTick();
+
+    const panel = kindPanel(container);
+    // The slot's own field wrapper carries the label a slider cannot show.
+    const fields = panel.querySelectorAll(".s-scheme-group-field");
+    expect(fields).toHaveLength(2); // number + enum (the color slot keeps its picker)
+    expect(fields[0].querySelector(".s-scheme-group-field-label")!.textContent).toBe(
+      "Medium radius",
+    );
+
+    const slider = panel.querySelector(".hk-slider") as HTMLElement;
+    expect(slider.getAttribute("aria-label")).toBe("Medium radius");
+    expect(slider.getAttribute("aria-valuemin")).toBe("0");
+    expect(slider.getAttribute("aria-valuemax")).toBe("32");
+    expect(slider.getAttribute("aria-valuenow")).toBe("8");
+    // formatValue feeds aria-valuetext with the slot's unit.
+    expect(slider.getAttribute("aria-valuetext")).toBe("8px");
+    expect(fields[0].querySelector(".s-scheme-group-field-value")!.textContent).toBe("8px");
+
+    // Enum slot: one segmented trigger per option, labeled per locale.
+    const triggers = [...panel.querySelectorAll(".hk-tabs-trigger")];
+    expect(triggers.map((t) => t.textContent?.trim())).toEqual(["Compact", "Cozy"]);
+
+    // The color slot is untouched: still the picker, still in the same grid.
+    expect(panel.querySelectorAll(".hk-color-picker")).toHaveLength(1);
+    expect(panel.querySelector(".s-scheme-group-grid")).not.toBeNull();
+  });
+
+  it("writes slider and tab edits into getDraft() as primitives", async () => {
+    const { ref, container } = mountEditor();
+    await nextTick();
+
+    const seeded = ref.value!.getDraft().groups!.dark!["editor-kinds"];
+    expect(seeded["radius-md"]).toBe(8);
+    expect(seeded.density).toBe("compact");
+
+    const panel = kindPanel(container);
+    const slider = panel.querySelector(".hk-slider") as HTMLElement;
+    slider.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    await nextTick();
+    const cozy = [...panel.querySelectorAll(".hk-tabs-trigger")].find(
+      (t) => t.textContent?.trim() === "Cozy",
+    ) as HTMLElement;
+    cozy.click();
+    await settle();
+
+    const edited = ref.value!.getDraft().groups!.dark!["editor-kinds"];
+    expect(edited["radius-md"]).toBe(9);
+    expect(edited.density).toBe("cozy");
+  });
+
+  it("clamps a stored draft value back into the slot on the way out", async () => {
+    // A saved theme carrying a hand-edited / since-retired value must not
+    // leak out of the editor: getDraft() re-clamps every slot by kind.
+    const { ref } = mountEditor({
+      initialGroups: {
+        dark: { "editor-kinds": { "radius-md": 999, density: "spacious" } },
+        light: { "editor-kinds": { "radius-md": 7, density: "cozy" } },
+      },
+    });
+    await nextTick();
+
+    const draft = ref.value!.getDraft();
+    // Out of range → the slot max; out of vocabulary → the dark anchor.
+    expect(draft.groups!.dark!["editor-kinds"]["radius-md"]).toBe(32);
+    expect(draft.groups!.dark!["editor-kinds"].density).toBe("compact");
+    // In-range values ride through untouched, per mode.
+    expect(draft.groups!.light!["editor-kinds"]["radius-md"]).toBe(7);
+    expect(draft.groups!.light!["editor-kinds"].density).toBe("cozy");
+  });
+});