@celestia-island/hikari 0.55.343 → 0.55.344

package/package.json

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

package/src/components/HkThemePanelContent.tsx

@@ -1,7 +1,8 @@
 import HkIconButton from "./HkIconButton";
+import HkAddTile from "./HkAddTile";
 
 import { computed, defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
-import { Monitor, MoonStar, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
+import { Monitor, MoonStar, Sun, Trash as Trash2 } from "lucide-vue-next";
 import {
   HDivider,
   solarAltitude,
@@ -309,9 +310,18 @@ export const HkThemePanelContent = defineComponent({
             );
           })}
 
-          <button
-            type="button"
-            class="s-theme-item-btn s-theme-item-customize"
+          {/* The customize entry is the standard add tile (2026-11-11
+              family migration): the compact dashed form riding the END of
+              the theme list — the same "add one more" gesture semantics
+              as every other list-end affordance, so hosts stop
+              hand-painting it (chest's centered dashed hand-roll retires
+              with this). The s-theme-item-customize class stays as the
+              host hook (host scopes and tests target it); the default
+              Plus glyph replaces the palette mark — creating a scheme is
+              an add gesture. */}
+          <HkAddTile
+            compact
+            class="s-theme-item-customize"
             onClick={() => {
               if (props.externalCustomize) {
                 emit("request-close");
@@ -321,9 +331,8 @@ export const HkThemePanelContent = defineComponent({
               }
             }}
           >
-            <span class="hk-menu-item-icon"><Palette size={14} /></span>
-            <span class="s-theme-item-name">{t("hikari::theme.customize")}</span>
-          </button>
+            {t("hikari::theme.customize")}
+          </HkAddTile>
         </div>
         {(() => {
           const extra = slots["menu-extra"]?.() ?? [];

package/src/components/HkThemeToggle.contract.test.ts

@@ -9,13 +9,15 @@
  *
  * The widened cell must stay scoped (2026-09-12 field report): shipped
  * first as a bare `.s-theme-item-btn .hk-menu-item-icon` rule, it also
- * matched the 自定义 row and every host row reusing s-theme-item-btn —
- * and mi.icon normalizes those cells' svg to the cell, so their 14px
- * glyphs rendered 28px wide. The widening therefore targets named scopes
- * (lead slot, customize row) plus the toggle-owned mode-extra strip, the
- * last one widening the CELL while pinning the glyph back to the
- * standard box so host strip rows (chest's DPI entry) align their labels
- * with the theme rows' names without rescaling their icons.
+ * matched every host row reusing s-theme-item-btn — and mi.icon
+ * normalizes those cells' svg to the cell, so their 14px glyphs rendered
+ * 28px wide. The widening therefore targets named scopes (lead slot)
+ * plus the toggle-owned mode-extra strip, the last one widening the CELL
+ * while pinning the glyph back to the standard box so host strip rows
+ * (chest's DPI entry) align their labels with the theme rows' names
+ * without rescaling their icons. (The customize row left this contract
+ * 2026-11-11: the entry is the standard HkAddTile compact form now — a
+ * self-contained dashed tile, not a lead-column row.)
  */
 import { describe, expect, it } from "vitest";
 import { readFileSync } from "node:fs";
@@ -105,30 +107,27 @@ describe("HkThemeToggle row lead-cell contract", () => {
 
   it("does not widen icon cells with a bare unscoped theme-row rule", () => {
     const css = read("HkThemeToggle.scss");
-    // A bare `.s-theme-item-btn .hk-menu-item-icon {` rule also hits the
-    // customize row and host mode-extra rows; the widened cell may only
-    // target named scopes (lead slot, customize row, mode-extra strip).
+    // A bare `.s-theme-item-btn .hk-menu-item-icon {` rule also hits
+    // host mode-extra rows; the widened cell may only target named
+    // scopes (lead slot, mode-extra strip).
     expect(css).not.toMatch(/^\.s-theme-item-btn \.hk-menu-item-icon\s*\{/m);
   });
 
-  it("aligns the customize row to the lead column without rescaling its glyph", () => {
+  it("renders the customize entry as the standard HkAddTile compact form", () => {
+    // 2026-11-11 family migration: the entry rides the standard dashed
+    // add tile below the theme list (same "add one more" semantics as
+    // every other list-end affordance) instead of a lead-aligned menu
+    // row — the old .hk-menu-item-icon lead-column alignment rules are
+    // retired with the markup that needed them.
+    const panel = read("HkThemePanelContent.tsx");
+    const entry = panel.match(/<HkAddTile[\s\S]*?s-theme-item-customize[\s\S]*?>[\s\S]*?<\/HkAddTile>/);
+    expect(entry).not.toBeNull();
+    expect(entry![0]).toContain("compact");
+    expect(entry![0]).not.toContain("hk-menu-item-icon");
+    // The toggle's own sheet carries no customize-specific icon cell
+    // rules anymore (the alignment contract retired with the row).
     const css = read("HkThemeToggle.scss");
-    // The customize affordance joins the 28px lead column (2026-09-11
-    // field report: its palette sat a full cell left of the rows' bitmap
-    // marks), but the glyph must keep the standard menu icon size —
-    // mi.icon normalizes svg to the cell, so the box is pinned back.
-    const block = css.match(
-      /\.s-theme-item-customize \.hk-menu-item-icon\s*\{[^}]*\}/,
-    );
-    expect(block).not.toBeNull();
-    expect(block![0]).toContain("width: 28px");
-    expect(block![0]).toContain("height: 28px");
-
-    const svgBlock = css.match(
-      /\.s-theme-item-customize \.hk-menu-item-icon > svg\s*\{[^}]*\}/,
-    );
-    expect(svgBlock).not.toBeNull();
-    expect(svgBlock![0]).toContain("var(--hk-menu-item-icon-box)");
+    expect(css).not.toMatch(/\.s-theme-item-customize \.hk-menu-item-icon/);
   });
 
   it("aligns mode-extra host rows to the lead column without rescaling their glyph", () => {

package/src/components/HkThemeToggle.scss

@@ -288,24 +288,13 @@
   height: 28px;
 }
 
-/* The customize affordance joins the theme rows' 28px lead column so the
- * palette glyph and the row marks sit on one line and every name starts
- * at the same x (2026-09-11 field report: with the lead cell at 28px and
- * this row at the generic box, the selected theme's bitmap mark read a
- * full cell to the right of the customize palette). The cell widens but
- * the GLYPH keeps the standard menu icon size — mi.icon normalizes svg
- * to the cell, so the box is pinned back explicitly; widening a cell
- * must never re-scale its glyph (the 0.42.2 regression class). */
-.s-theme-item-customize .hk-menu-item-icon {
-  @include mi.icon;
-
-  width: 28px;
-  height: 28px;
-}
+/* (The customize row's lead-column alignment rules retired 2026-11-11:
+ * the entry itself is the standard HkAddTile compact form now — a
+ * self-contained dashed tile below the list, not a row in the lead
+ * column — so it carries no .hk-menu-item-icon cell to widen.) */
 
-.s-theme-item-customize .hk-menu-item-icon > svg {
-  width: var(--hk-menu-item-icon-box);
-  height: var(--hk-menu-item-icon-box);
+.s-theme-item-customize {
+  margin-top: var(--space-8, 0.5rem);
 }
 
 /* Host rows in the mode-extra strip (chest's DPI entry row reuses
@@ -314,9 +303,9 @@
  * (2026-09-12 field report: with the strip row at the generic 16px cell
  * its label sat a full cell-width left of the theme rows' names). The
  * strip container is the toggle's own, so the scope needs no host
- * class-name contract. As with the customize row, the cell widens but
- * the GLYPH keeps the standard menu icon size — widening a cell must
- * never re-scale its glyph (the 0.42.2 regression class). */
+ * class-name contract. The cell widens but the GLYPH keeps the standard
+ * menu icon size — widening a cell must never re-scale its glyph (the
+ * 0.42.2 regression class). */
 .s-theme-mode-extra .s-theme-item-btn .hk-menu-item-icon {
   @include mi.icon;
 

package/src/components/HkThemeToggle.test.ts

@@ -75,8 +75,11 @@ function triggerButton(container: HTMLElement): HTMLButtonElement {
 }
 
 function paletteButton(): HTMLButtonElement {
-  const btn = [...document.body.querySelectorAll<HTMLButtonElement>(".s-theme-menu .s-theme-item-btn")].find(
-    (b) => b.textContent?.includes("Customize"),
+  // The entry rides the standard HkAddTile (2026-11-11 family migration)
+  // and no longer carries s-theme-item-btn — the stable host hook class
+  // is the query surface.
+  const btn = document.body.querySelector<HTMLButtonElement>(
+    ".s-theme-menu .s-theme-item-customize",
   );
   return btn!;
 }