@celestia-island/hikari 0.55.249 → 0.55.250

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.249",
+  "version": "0.55.250",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkAffixPicker.scss

@@ -4,6 +4,8 @@
  * their own class on top via chipClass), while the popup — search,
  * selected tags, option rows, custom row — is fully standardized here. */
 
+@use "./menu-item" as mi;
+
 /* ── chip base ────────────────────────────────────────────────────────
  * Neutral clickable chip; hosts override visually via their own class
  * (HkPhoneInput's dial chip, HkLocalizedInput's badge chip, …). */
@@ -232,55 +234,25 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  padding: var(--space-4, 4px) var(--space-6, 6px) var(--space-8, 8px);
+  /* GEOMETRY-NEUTRAL band (menu-item WIDTH invariant): block-axis rhythm
+   * only, NO inline term — the hosting panel's inset (popout 8px / sheet
+   * 16px) is the one horizontal inset these rows get. The old 6px inline
+   * term stacked a second inset and pulled the rows' wash 6px inside
+   * every sibling family's in the same sheet. */
+  padding-block: var(--space-4, 4px) var(--space-8, 8px);
 }
 
 .hk-affix-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-8, 8px);
-  width: 100%;
-  min-height: 2.25rem;
-  padding: var(--space-4, 4px) var(--space-8, 8px);
-  border: none;
-  border-radius: var(--radius-sm, 6px);
-  background: transparent;
-  color: rgb(var(--color-text));
-  font-size: var(--text-sm, 0.8125rem);
-  text-align: start;
-  cursor: pointer;
-  appearance: none;
-  transition: background 0.1s ease;
-
-  &:hover {
-    background: rgb(var(--color-primary) / 10%);
-    outline: none;
-  }
-
-  /* Keyboard position is drawn INSIDE the row (HkSelectionGrid branch-fix
-   * pattern) and distinct from the hover tint, so overlapping popup/sheet
-   * chrome cannot shave a per-side outer ring and focus reads as focus. */
-  &:focus-visible {
-    background: rgb(var(--color-primary) / 10%);
-    outline: 2px solid rgb(var(--color-primary));
-    outline-offset: -2px;
-  }
-
-  &[data-active] {
-    background: rgb(var(--color-primary) / 16%);
-    font-weight: 600;
-  }
+  /* Unified menu-item spec (_menu-item.scss): one row grammar with the
+   * select options and menu rows around it — metrics (34px / 6×12,
+   * 44px / 10×16 inside sheets via the shared registration list),
+   * reserved 1px border, guarded hover, primary wash + strong border on
+   * [data-active], disabled dim, 2px inset focus ring. The sheet reach
+   * comes from the registration list, not from here. */
+  @include mi.item;
 
   &[data-disabled] {
-    opacity: 0.5;
     cursor: default;
-
-    /* The button stays keyboard-focusable (data-disabled only), so the
-     * unpickable row must not paint the pickable tint on focus either. */
-    &:hover,
-    &:focus-visible {
-      background: transparent;
-    }
   }
 
   /* The "Use <query>" free-text row reads as an add affordance. Truncation

package/src/components/HkMenuIdentityItem.scss

@@ -8,6 +8,10 @@
   gap: var(--space-10, 10px);
   width: 100%;
   padding: var(--space-8, 8px) var(--space-12, 12px);
+  /* The 1px transparent border is RESERVED, not decorative: the
+     HkMenuActionItem rows beside this block draw their content edge at
+     1px + pad-x, so an unreserved block sat 1px left of them. */
+  border: 1px solid transparent;
   border-radius: var(--radius-sm, 4px);
   min-width: 0;
 }

package/src/components/HkSolarLocationSetting.test.tsx

@@ -7,7 +7,6 @@ import { setLocale } from "../i18n/context";
 import {
   SOLAR_LOCATION_STRATEGY_STORAGE_KEY,
   SOLAR_MANUAL_LOCATION_STORAGE_KEY,
-  listTimeZones,
   manualLocationOf,
   setSolarLocationStrategy,
   setSolarManualLocation,
@@ -21,7 +20,7 @@ import {
  * HkSolarLocationSetting — the solar clock's location-strategy row.
  * The strategy engine (theme/useSolarTime.ts) has its own suite; these
  * cases pin the COMPONENT contract: the live summary row, the secondary
- * HkModal editor (strategy tabs / IANA zone select / explicit
+ * HkModal editor (strategy tabs / time-zone globe / explicit
  * hemisphere), OK applying through setSolarManualLocation →
  * setSolarLocationStrategy → refreshThemeClock with storage evidence,
  * and cancel leaving the engine untouched.
@@ -127,15 +126,18 @@ function clickStrategy(key: "timezone" | "ip" | "manual"): void {
   clickStrategyTab({ timezone: "Time zone", ip: "IP location", manual: "Manual" }[key]);
 }
 
-/** Opens the manual pane's IANA zone select and picks a zone. */
+/** Picks a zone on the manual pane's globe (the fallback sector list in
+ * the test DOM — happy-dom has no WebGL). */
 async function pickTimeZone(zone: string): Promise<void> {
-  const trigger = document.body.querySelector<HTMLButtonElement>(".hk-select-trigger");
-  expect(trigger, "zone select trigger renders").toBeTruthy();
-  trigger!.click();
-  await settle();
-  const option = [...document.body.querySelectorAll<HTMLElement>(".hk-select-option")]
-    .find((el) => el.textContent?.trim() === zone);
-  expect(option, `zone option "${zone}" renders`).toBeTruthy();
+  // The picker is a defineAsyncComponent chunk — wait it in.
+  let option: HTMLButtonElement | undefined;
+  for (let i = 0; i < 20 && !option; i++) {
+    option = document.body.querySelector<HTMLButtonElement>(
+      '[data-test="hk-timezone-globe-option"][data-zone="' + zone + '"]',
+    ) ?? undefined;
+    if (!option) await settle();
+  }
+  expect(option, `globe sector for "${zone}" renders`).toBeTruthy();
   option!.click();
   await settle();
 }
@@ -239,7 +241,13 @@ describe("HkSolarLocationSetting editor", () => {
     const editor = document.body.querySelector<HTMLElement>(".hk-solar-editor")!;
     expect(editor.getAttribute("data-strategy")).toBe("manual");
     expect(document.body.querySelector(".hk-solar-manual")).toBeTruthy();
-    expect(document.body.querySelector<HTMLButtonElement>(".hk-select-trigger")).toBeTruthy();
+    // The globe is a defineAsyncComponent chunk — wait it in.
+    let globe: HTMLElement | null = null;
+    for (let i = 0; i < 20 && !globe; i++) {
+      globe = document.body.querySelector<HTMLElement>('[data-test="hk-timezone-globe"]');
+      if (!globe) await settle();
+    }
+    expect(globe, "globe picker renders in the manual pane").toBeTruthy();
     const hemi = hemisphereTriggers();
     expect(hemi.map((b) => b.textContent?.trim())).toEqual(["Northern", "Southern"]);
     // Draft default: the system zone, northern hemisphere (explicit
@@ -357,23 +365,25 @@ describe("HkSolarLocationSetting i18n", () => {
     ]);
   });
 
-  it("seeds the zone list from the engine's listTimeZones catalog", async () => {
+  it("picks from the globe's 24-sector wheel, not the raw IANA catalog", async () => {
     const container = mountSetting();
     await openEditor(container);
     clickStrategy("manual");
     await settle();
 
-    const trigger = document.body.querySelector<HTMLButtonElement>(".hk-select-trigger");
-    trigger!.click();
-    await settle();
+    await pickTimeZone("Australia/Sydney");
 
-    const rendered = [...document.body.querySelectorAll<HTMLElement>(".hk-select-option")]
-      .map((el) => el.textContent?.trim());
-    const catalog = listTimeZones();
-    expect(rendered.length).toBe(catalog.length);
+    const rendered = [...document.body.querySelectorAll<HTMLButtonElement>('[data-test="hk-timezone-globe-option"]')]
+      .map((el) => el.dataset.zone);
+    // 24 representative zones — NOT the hundreds-of-ids IANA catalog
+    // the picker replaced.
+    expect(rendered).toHaveLength(24);
+    expect(new Set(rendered).size).toBe(24);
     expect(rendered).toContain("Asia/Shanghai");
-    // A catalog-present zone on every ICU: "UTC" itself is NOT part of
-    // Intl.supportedValuesOf("timeZone") on some ICU builds.
     expect(rendered).toContain("Australia/Sydney");
+    // The draft (and its resolved readout) carries the picked zone id.
+    const resolved = document.body.querySelector<HTMLElement>('[data-test="hk-solar-resolved"]');
+    const geo = manualLocationOf({ timeZone: "Australia/Sydney", hemisphere: "north" });
+    expect(resolved!.textContent).toContain(geo.lng.toFixed(1));
   });
 });

package/src/components/HkSolarLocationSetting.tsx

@@ -1,12 +1,11 @@
 // AI-generated: developed with the ZCode agent (model GLM-5.3); human-directed.
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineAsyncComponent, defineComponent, ref } from "vue";
 import { Clock, Globe2, MapPin } from "lucide-vue-next";
 
 import { useI18n } from "../i18n/context";
 import { refreshThemeClock } from "../theme/useTheme";
 import {
   hydrateSolarLocationState,
-  listTimeZones,
   manualLocationOf,
   setSolarLocationStrategy,
   setSolarManualLocation,
@@ -19,10 +18,15 @@ import {
 } from "../theme/useSolarTime";
 import HkButton from "./HkButton";
 import HkModal, { type ModalAction } from "./HkModal";
-import HkSelect, { type HkSelectOption } from "./HkSelect";
 import HTabs, { type TabItem } from "./HkTabs";
 import "./HkSolarLocationSetting.scss";
 
+// The globe picker loads lazily (defineAsyncComponent, module level —
+// the async wrapper is created once, import() is module-cached):
+// three.js and the board only enter the bundle graph when a host
+// actually opens the manual pane — the settings row stays weightless.
+const HkTimeZoneGlobe = defineAsyncComponent(() => import("./HkTimeZoneGlobe"));
+
 /**
  * HkSolarLocationSetting — the solar clock's location STRATEGY row
  * (2026-10-31 product direction: strategies, not a fixed cascade).
@@ -89,13 +93,6 @@ export const HkSolarLocationSetting = defineComponent({
       open.value = true;
     }
 
-    /** IANA zone list for the manual pane's select. Plain data (no
-     * vnodes), static for the process lifetime — cached once. */
-    let timeZoneOptionsCache: HkSelectOption[] | null = null;
-    function timeZoneOptions(): HkSelectOption[] {
-      timeZoneOptionsCache ??= listTimeZones().map((id) => ({ value: id, label: id }));
-      return timeZoneOptionsCache;
-    }
 
     // ── Live summary (the row's label) ────────────────────────────────
     const summaryText = computed(() => {
@@ -234,12 +231,14 @@ export const HkSolarLocationSetting = defineComponent({
             <p class="hk-solar-hint">{hintText.value}</p>
             {draftStrategy.value === "manual" && (
               <div class="hk-solar-manual">
-                <HkSelect
+                {/* The globe picker (2026-10-31): 24 equal time-sector
+                    wedges on a spinning, borderless world-plates sphere,
+                    translated tooltip included — the IANA dropdown it
+                    replaced listed hundreds of raw zone ids. Still
+                    writes the same draftTimeZone the engine applies. */}
+                <HkTimeZoneGlobe
                   modelValue={draftTimeZone.value}
                   onUpdate:modelValue={onSelectTimeZone}
-                  options={timeZoneOptions()}
-                  label={t("hikari::theme.solar.strategyTimezone")}
-                  panelTitle={t("hikari::theme.solar.strategyTimezone")}
                 />
                 <div class="hk-solar-hemisphere">
                   <label class="hk-solar-field-label">{t("hikari::theme.solar.hemisphere")}</label>

package/src/components/HkTagInput.scss

@@ -8,6 +8,7 @@
  * stretching the panel). Chips and selected rows are reorderable; the
  * drag states (`data-dragging` / `data-drop`) live at the bottom. */
 
+@use "./menu-item" as mi;
 @use "../styles/polyfill" as *;
 
 .hk-tag-input-wrapper {
@@ -231,56 +232,41 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  padding: var(--space-4, 4px) var(--space-6, 6px) var(--space-8, 8px);
+  /* GEOMETRY-NEUTRAL band (menu-item WIDTH invariant): block-axis rhythm
+   * only — the hosting panel's inset is the one horizontal inset these
+   * rows get (the old 6px inline term stacked a second inset). */
+  padding-block: var(--space-4, 4px) var(--space-8, 8px);
 }
 
 .hk-tag-input-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-8, 8px);
-  width: 100%;
-  min-height: 2.25rem;
-  padding: var(--space-4, 4px) var(--space-8, 8px);
-  border-radius: var(--radius-sm);
-  color: rgb(var(--color-text));
-  font-size: var(--text-sm);
-  text-align: start;
-  cursor: pointer;
-  transition: background 0.1s ease;
-
-  &:hover,
-  &:focus-visible {
-    background: rgb(var(--color-primary) / 10%);
-    outline: none;
-  }
-
-  /* Selected = the tag is in use; the check glyph carries the state and
-   * the row stays clickable so it can be toggled back off. */
-  &[data-selected] {
-    font-weight: 600;
-
-    &:hover {
-      background: rgb(var(--color-primary) / 16%);
-    }
-  }
-
-  /* Keyboard cursor (`aria-activedescendant`): the field's own focus-ring
-   * language, inset so the highlight never shifts the row's metrics and
-   * never clips at the list edge. Focus itself stays in the field. */
+  /* Unified menu-item spec (_menu-item.scss): one row grammar with the
+   * select options and menu rows around it — metrics, reserved border,
+   * guarded hover, checked face, focus ring; the sheet reach comes from
+   * the shared registration list. The tsx emits the grammar's
+   * `data-checked` for the selected face (so mi.item's hover guard
+   * protects it) ALONGSIDE this family's legacy `data-selected`
+   * (tests/hosts key on it). `data-active` is the field's
+   * aria-activedescendant keyboard cursor (focus itself stays in the
+   * field) — mi.item has no HIGHLIGHT face, and its SELECTED face
+   * would bleed through a partial restatement, so the cursor face is
+   * restated in full below; mi.item's hover guard already excludes
+   * data-active rows. */
+  @include mi.item;
+
+  /* [data-active] is the field's aria-activedescendant keyboard cursor —
+     the grammar's HIGHLIGHT role. mi.item has no cursor face, but its
+     [data-active]/[data-checked] SELECTED face would bleed through a
+     partial restatement, so the cursor face restates the full set back
+     to the row's resting values: wash + inset ring only, reserved
+     border transparent, normal text color and weight. */
   &[data-active] {
-    background: rgb(var(--color-primary) / 12%);
+    background: rgb(var(--color-primary) / 8%);
+    border-color: transparent;
+    color: rgb(var(--color-text) / 88%);
+    font-weight: var(--hk-menu-item-weight);
     box-shadow: inset 0 0 0 1px rgb(var(--color-focused-border));
   }
 
-  &[data-disabled] {
-    opacity: 0.5;
-    cursor: default;
-
-    &:hover {
-      background: transparent;
-    }
-  }
-
   /* The "Use “<query>”" free-text row reads as an add affordance. */
   &[data-custom="true"] {
     color: rgb(var(--color-primary));
@@ -393,13 +379,17 @@
   align-items: center;
   justify-content: center;
   flex: none;
-  /* The largest target the row rhythm allows: the row's content box is the
-     2.25rem row minus its 4px block padding, so the handle grows to that
-     without changing the option rows' height (the 44px touch guidance
-     cannot fit in a list row — the sheet scrolls through them instead). */
+  /* The largest target the row rhythm allows: the row's content box is
+     the grammar row's min-height minus its block padding (34px − 2×6px =
+     22px; 44px − 2×10px = 24px inside sheets), so the handle grows to
+     that without changing the option rows' height — the 44px touch
+     guidance cannot fit in a list row, the sheet scrolls through them
+     instead. The grip was sized for the RETIRED 2.25rem/4px stock once:
+     at 28px it overflowed the 22px box and every selected+reorderable
+     row grew 6px taller than its neighbours. */
   width: 1.5rem;
-  height: 1.75rem;
-  margin-inline-end: -4px;
+  height: 1.375rem;
+  margin-inline-end: -6px;
   color: rgb(var(--color-muted));
   opacity: 0.6;
   cursor: grab;

package/src/components/HkTagInput.tsx

@@ -1053,6 +1053,12 @@ export const HkTagInput = defineComponent({
                             aria-selected={selected}
                             aria-disabled={inert || undefined}
                             data-selected={selected || undefined}
+                            /* Grammar face attribute (_menu-item.scss):
+                             * mi.item's checked face AND its hover guard
+                             * key on data-checked — emitting it beside the
+                             * legacy data-selected keeps the selected row's
+                             * face from being flipped by the hover rule. */
+                            data-checked={selected || undefined}
                             data-disabled={inert || undefined}
                             data-active={activeId === stop.id || undefined}
                             data-reorder={reorderable ? "true" : undefined}

package/src/components/HkTemplateField.scss

@@ -173,7 +173,13 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding: var(--space-4, 4px);
+  /* GEOMETRY-NEUTRAL band (menu-item WIDTH invariant): the level's gap
+   * owns the rhythm and the hosting surface's inset is the one
+   * horizontal inset these rows get — the old 4px all-sides pad was the
+   * exact "band that pads itself" anti-pattern (a foot/head row in this
+   * level would have landed 8px offset from these rows). Flex stays:
+   * display is layout, not inset. */
+  padding-block: var(--space-4, 4px);
 }
 
 // The group is a role="group" WRAPPER carrying the accessible name in
@@ -211,21 +217,29 @@
 }
 
 .hk-tpl-row {
-  display: flex;
+  /* Unified menu-item spec (_menu-item.scss): metrics, reserved border,
+   * guarded hover, focus ring, sheet tokens via the shared registration
+   * list (this row renders in TWO sheet contexts — the vocabulary
+   * HkMenu sheet and the chip editor's sheetOnMobile popover). The
+   * stacked two-line shape restates the flex axis after the include. */
+  @include mi.item;
   flex-direction: column;
   align-items: flex-start;
   gap: 1px;
-  padding: var(--space-4, 4px) var(--space-8, 8px);
-  border: none;
-  border-radius: var(--radius-sm, 4px);
-  background: transparent;
   color: var(--hi-color-text-primary);
-  text-align: start;
-  cursor: pointer;
 
-  &:hover,
+  /* `data-active` is this family's aria-activedescendant keyboard cursor
+   * (the grammar's HIGHLIGHT role, not its selected face — mi.item's
+   * hover guard already excludes data-active rows). mi.item has no
+   * cursor face and its SELECTED face would bleed through a partial
+   * restatement, so this face restates the full set at the grammar's
+   * hover values — INCLUDING the weight back to the row's resting 500
+   * (the selected face's 600 otherwise lands on the cursor row). */
   &[data-active] {
-    background: color-mix(in srgb, var(--hi-color-primary) 10%, transparent);
+    background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
+    border-color: var(--c-primary-medium, rgb(var(--color-primary) / 25%));
+    color: rgb(var(--color-text));
+    font-weight: var(--hk-menu-item-weight);
   }
 }
 

package/src/components/HkTimeZoneGlobe.scss

@@ -0,0 +1,125 @@
+/* HkTimeZoneGlobe — the manual zone picker's globe stage, tooltip and
+ * no-WebGL fallback list. AI-generated: developed with the ZCode agent
+ * (model GLM-5.3); human-directed. */
+
+.hk-timezone-globe {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6, 0.375rem);
+  min-width: 0;
+}
+
+/* The 3D stage: a fixed-height viewport (the board's canvas and its
+ * bottom-right minimap both fill this box). */
+.hk-timezone-globe__stage {
+  position: relative;
+  height: 15rem;
+  min-height: 12rem;
+  border-radius: var(--radius-sm, 0.375rem);
+  overflow: hidden;
+  /* A whisper of surface so the transparent-background board reads as
+   * a framed instrument, not a hole in the modal. */
+  background: rgb(var(--color-muted) / 0.06);
+  touch-action: none;
+}
+
+.hk-timezone-globe__tooltip {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 0.25rem);
+  max-width: 15rem;
+  padding: var(--space-8, 0.5rem) var(--space-10, 0.625rem);
+  border: 1px solid rgb(var(--color-muted) / 0.35);
+  border-radius: var(--radius-sm, 0.375rem);
+  background: rgb(var(--color-background, 22 24 30) / 0.92);
+  color: inherit;
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1.45;
+}
+
+.hk-timezone-globe__tooltip-offset {
+  color: rgb(var(--color-text-secondary, var(--color-muted)));
+  font-weight: 600;
+}
+
+.hk-timezone-globe__tooltip-zone {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-xs, 0.75rem);
+}
+
+.hk-timezone-globe__tooltip-cities {
+  color: rgb(var(--color-text-secondary, var(--color-muted)));
+}
+
+.hk-timezone-globe__hint {
+  margin: 0;
+  color: rgb(var(--color-muted));
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1.5;
+}
+
+/* ── No-WebGL fallback: the same 24 sectors as a flat list ─────────────── */
+.hk-timezone-globe__list {
+  display: flex;
+  flex-direction: column;
+  max-height: 17rem;
+  overflow-y: auto;
+  border: 1px solid rgb(var(--color-muted) / 0.25);
+  border-radius: var(--radius-sm, 0.375rem);
+}
+
+.hk-timezone-globe__option {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas:
+    "offset name"
+    "zone   zone"
+    "cities cities";
+  gap: 0 var(--space-6, 0.375rem);
+  padding: var(--space-6, 0.375rem) var(--space-8, 0.5rem);
+  border: 0;
+  border-bottom: 1px solid rgb(var(--color-muted) / 0.12);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.hk-timezone-globe__option:last-child {
+  border-bottom: 0;
+}
+
+.hk-timezone-globe__option:hover {
+  background: rgb(var(--color-muted) / 0.08);
+}
+
+.hk-timezone-globe__option--selected {
+  background: rgb(var(--color-primary) / 0.12);
+}
+
+.hk-timezone-globe__option-offset {
+  grid-area: offset;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.hk-timezone-globe__option-name {
+  grid-area: name;
+  color: rgb(var(--color-text-secondary, var(--color-muted)));
+}
+
+.hk-timezone-globe__option-zone {
+  grid-area: zone;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-xs, 0.75rem);
+}
+
+.hk-timezone-globe__option-cities {
+  grid-area: cities;
+  color: rgb(var(--color-muted));
+  font-size: var(--text-xs, 0.75rem);
+}