@celestia-island/hikari 0.55.285 → 0.55.288

package/package.json

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

package/src/components/HkCornerBadge.scss

@@ -1,11 +1,18 @@
 /**
- * HkCornerBadge — the generic corner mark (dot / count / label) pinned
- * to one corner of the default-slot anchor (see HkCornerBadge.tsx for
- * the contract). Geometry follows the house pattern the trigger dots
- * and the Rust family's .hk-badge-wrapper established: the anchor is a
- * relative inline-flex wrapper (the badge escapes nothing — hosts wrap
- * ANY child), the mark centers ON the corner via translate(50%,-50%)
- * with an optional --hk-corner-badge-offset clearance.
+ * HkCornerBadge — the generic anchored mark (dot / count / label) for the
+ * default-slot anchor (see HkCornerBadge.tsx for the contract). Geometry
+ * has TWO placement families, selected by `data-placement`:
+ *
+ *   corners (bottom-right / …) OVERLAY the anchor: the anchor is a
+ *   relative inline-flex wrapper (the badge escapes nothing), the mark
+ *   centers ON the corner via translate(±50%) with an optional
+ *   --hk-corner-badge-offset clearance — the subscript mark;
+ *
+ *   sides (`right` / `left`) put the mark in the wrapper's FLOW beside the
+ *   anchor, vertically centered, so the anchor's own box (and text) is
+ *   never covered. The wrapper is already a row; the mark spaces ITSELF
+ *   (margin = --hk-corner-badge-gap + --hk-corner-badge-offset, default
+ *   6px + 0), so a multi-child anchor's own layout is never touched.
  */
 
 .hk-corner-badge-anchor {
@@ -15,41 +22,70 @@
 
 .hk-corner-badge {
   position: absolute;
-  /* Centered on the corner; the corner data-attribute flips the axes
-   * and the offset var adds clearance without re-deriving transforms. */
+  /* Corner placements center ON the corner; the side placement rules
+   * below return the mark to the flow (static, no transform). */
   transform: translate(var(--hk-corner-badge-tx, 50%), var(--hk-corner-badge-ty, -50%));
   pointer-events: none;
   white-space: nowrap;
 }
 
-.hk-corner-badge[data-corner="top-right"] {
+.hk-corner-badge[data-placement="top-right"] {
   top: var(--hk-corner-badge-offset, 0px);
   right: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: 50%;
   --hk-corner-badge-ty: -50%;
 }
 
-.hk-corner-badge[data-corner="top-left"] {
+.hk-corner-badge[data-placement="top-left"] {
   top: var(--hk-corner-badge-offset, 0px);
   left: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: -50%;
   --hk-corner-badge-ty: -50%;
 }
 
-.hk-corner-badge[data-corner="bottom-right"] {
+.hk-corner-badge[data-placement="bottom-right"] {
   bottom: var(--hk-corner-badge-offset, 0px);
   right: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: 50%;
   --hk-corner-badge-ty: 50%;
 }
 
-.hk-corner-badge[data-corner="bottom-left"] {
+.hk-corner-badge[data-placement="bottom-left"] {
   bottom: var(--hk-corner-badge-offset, 0px);
   left: var(--hk-corner-badge-offset, 0px);
   --hk-corner-badge-tx: -50%;
   --hk-corner-badge-ty: 50%;
 }
 
+/* Side placements: the mark rides the wrapper's row. `right` stays after
+ * the anchor (DOM order), `left` flips ahead of it; `align-self` centers
+ * the mark on the row and the mark's own margin spaces it from the anchor,
+ * so the anchor's other children keep their default alignment. The flex
+ * row follows the writing direction, so an RTL host mirrors the side for
+ * free (the house flex-row convention, see HkNumberSteppers). The two
+ * sides are written out separately (rather than one shared rule) so each
+ * side's block stays a single, greppable declaration. */
+.hk-corner-badge[data-placement="right"] {
+  position: static;
+  transform: none;
+  align-self: center;
+  margin-inline-start: calc(
+    var(--hk-corner-badge-gap, var(--space-6, 6px)) +
+      var(--hk-corner-badge-offset, 0px)
+  );
+}
+
+.hk-corner-badge[data-placement="left"] {
+  position: static;
+  transform: none;
+  align-self: center;
+  order: -1;
+  margin-inline-end: calc(
+    var(--hk-corner-badge-gap, var(--space-6, 6px)) +
+      var(--hk-corner-badge-offset, 0px)
+  );
+}
+
 /* Dot form: a filled circle in the variant's tone (same token trio
  * HkBadge uses — variant classes below set all three channels). */
 .hk-corner-badge--dot {

package/src/components/HkCornerBadge.styles.test.ts

@@ -7,9 +7,14 @@ import { describe, expect, it } from "vitest";
 
 /**
  * Compiled-stylesheet guard for HkCornerBadge — the anchoring contract
- * (2026-10-15): the anchor wrapper is a relative inline-flex host (any
- * child can carry the mark), the mark centers ON its corner via
- * translate(±50%,±50%), and each data-corner flips the right axes.
+ * (2026-10-15, two placement families since 2026-11-05): the anchor
+ * wrapper is a relative inline-flex host (any child can carry the mark);
+ * the four CORNER placements overlay it, centering ON the corner via
+ * translate(±50%,±50%) with each data-placement flipping the right axes;
+ * the SIDE placements (`right` / `left`) return the mark to the flow,
+ * centered on the wrapper's row by `align-self: center`, and the mark's
+ * own margin spaces it from the anchor (gap + offset), so the anchor's
+ * own box — and its other children's alignment — is never touched.
  * Vitest stubs CSS, so the runtime suite can never catch a lost rule.
  */
 
@@ -46,10 +51,23 @@ describe("HkCornerBadge stylesheet contract", () => {
   });
 
   it("each corner flips the translate axes", () => {
-    expect(ruleFor('.hk-corner-badge[data-corner=top-right] {')).toContain("--hk-corner-badge-tx: 50%");
-    expect(ruleFor('.hk-corner-badge[data-corner=top-left] {')).toContain("--hk-corner-badge-tx: -50%");
-    expect(ruleFor('.hk-corner-badge[data-corner=bottom-right] {')).toContain("--hk-corner-badge-ty: 50%");
-    expect(ruleFor('.hk-corner-badge[data-corner=bottom-left] {')).toContain("--hk-corner-badge-tx: -50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=top-right] {')).toContain("--hk-corner-badge-tx: 50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=top-left] {')).toContain("--hk-corner-badge-tx: -50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=bottom-right] {')).toContain("--hk-corner-badge-ty: 50%");
+    expect(ruleFor('.hk-corner-badge[data-placement=bottom-left] {')).toContain("--hk-corner-badge-tx: -50%");
+  });
+
+  it("side placements return to the flow and space themselves from the anchor", () => {
+    const right = ruleFor('.hk-corner-badge[data-placement=right] {');
+    expect(right).toContain("position: static");
+    expect(right).toContain("transform: none");
+    expect(right).toContain("align-self: center");
+    expect(right).toContain("margin-inline-start: calc(var(--hk-corner-badge-gap");
+    const left = ruleFor('.hk-corner-badge[data-placement=left] {');
+    expect(left).toContain("position: static");
+    expect(left).toContain("align-self: center");
+    expect(left).toContain("order: -1");
+    expect(left).toContain("margin-inline-end: calc(var(--hk-corner-badge-gap");
   });
 
   it("the dot is round and the pill is a tabular-numbers chip", () => {

package/src/components/HkCornerBadge.test.tsx

@@ -21,7 +21,7 @@ afterEach(() => {
   }
 });
 
-describe("HkCornerBadge — the generic corner mark (2026-10-15)", () => {
+describe("HkCornerBadge — the generic anchored mark (2026-10-15)", () => {
   it("anchors the default slot in a relative wrapper with no mark by default", () => {
     const c = mount(h(HkCornerBadge, null, () => h("button", { class: "probe" }, "x")));
     const anchor = c.querySelector(".hk-corner-badge-anchor")!;
@@ -32,19 +32,34 @@ describe("HkCornerBadge — the generic corner mark (2026-10-15)", () => {
     expect(c.querySelector(".hk-corner-badge")).toBeNull();
   });
 
+  it("defaults to the subscript overlay (bottom-right) exactly like an avatar mark", () => {
+    const c = mount(h(HkCornerBadge, { count: 2 }, () => h("i")));
+    const anchor = c.querySelector(".hk-corner-badge-anchor")!;
+    expect(anchor.getAttribute("data-placement")).toBe("bottom-right");
+    expect(c.querySelector(".hk-corner-badge")!.getAttribute("data-placement")).toBe("bottom-right");
+  });
+
   it("dot form: a variant-colored dot at the requested corner, decorative by default", () => {
     const c = mount(
-      h(HkCornerBadge, { dot: true, variant: "success", corner: "bottom-right" }, () => h("i")),
+      h(HkCornerBadge, { dot: true, variant: "success", placement: "top-right" }, () => h("i")),
     );
     const badge = c.querySelector(".hk-corner-badge")!;
     expect(badge).toBeTruthy();
     expect(badge.className).toContain("hk-corner-badge--dot");
     expect(badge.className).toContain("hk-corner-badge-success");
-    expect(badge.getAttribute("data-corner")).toBe("bottom-right");
+    expect(badge.getAttribute("data-placement")).toBe("top-right");
     expect(badge.getAttribute("aria-hidden")).toBe("true");
     expect(badge.getAttribute("role")).toBeNull();
   });
 
+  it("side placements carry the same data attribute on anchor and mark (button-group default)", () => {
+    const c = mount(
+      h(HkCornerBadge, { count: 4, placement: "right" }, () => h("span", "Active")),
+    );
+    expect(c.querySelector(".hk-corner-badge-anchor")!.getAttribute("data-placement")).toBe("right");
+    expect(c.querySelector(".hk-corner-badge")!.getAttribute("data-placement")).toBe("right");
+  });
+
   it("count form: renders the number, caps past max, hides zero unless showZero", () => {
     const c = mount(h(HkCornerBadge, { count: 7 }, () => h("i")));
     expect(c.querySelector(".hk-corner-badge")!.textContent).toBe("7");

package/src/components/HkCornerBadge.tsx

@@ -13,17 +13,41 @@ export type CornerBadgeVariant =
   | "info"
   | "muted";
 
-/** Which corner of the anchor the mark hangs on. Exported so hosts that
- *  embed the shell (HkTabs' trigger badge) share the one vocabulary
- *  instead of re-spelling the union; HkIconButton's dot borrows the tone
- *  channels but is an inset span of its own, not a corner mark. */
-export type CornerBadgeCorner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+/**
+ * Where the mark sits relative to the anchor — TWO families, not just
+ * corners (user direction 2026-11-05: a corner overlay on every anchor
+ * was wrong; "（n）" replaced by a badge must not cover the trigger's own
+ * label).
+ *
+ * - `top-right` / `top-left` / `bottom-right` / `bottom-left` OVERLAY the
+ *   anchor: the mark centers ON the anchor's edge (half of it straddles
+ *   the corner) — the classic subscript / notification mark for a fixed
+ *   box (an avatar, an icon button).
+ * - `right` / `left` place the mark BESIDE the anchor in the flow,
+ *   vertically centered, so the anchor's own box (and text) is never
+ *   covered; the wrapper grows to fit both — the button-group / tab
+ *   trigger default.
+ *
+ * Scenario defaults follow the same line: an anchor that can grow (a
+ * trigger inside a button group / tab strip) wants a side placement, a
+ * fixed-box anchor (an avatar) wants the bottom-right overlay. The
+ * component default is `bottom-right` (the subscript mark); hosts whose
+ * scenario is a button group pass `right` as their own default (HkTabs).
+ */
+export type CornerBadgePlacement =
+  | "top-right"
+  | "top-left"
+  | "bottom-right"
+  | "bottom-left"
+  | "right"
+  | "left";
 
 /**
- * HkCornerBadge — the generic corner mark for ANY anchor (user
+ * HkCornerBadge — the generic anchored mark for ANY anchor (user
  * direction 2026-10-15): a green/red/traffic dot, a notification count
- * ("9+"), or a custom text label pinned to one corner of whatever sits
- * in the default slot. The Vue package had every consumer hand-rolling
+ * ("9+"), or a custom text label pinned to a corner of — or beside —
+ * whatever sits in the default slot (see CornerBadgePlacement). The Vue
+ * package had every consumer hand-rolling
  * its own absolute span (the filter/search trigger dots, the icon-group
  * marker, chest's dock time-range pill); this is the one component they
  * converge on — API parity with the Rust family's badge.rs (dot / count
@@ -48,13 +72,18 @@ export default defineComponent({
      *  ANCHOR, never the label — overloading it made every anchored
      *  child's own text leak into the badge. */
     text: { type: String, default: undefined },
-    /** Which corner of the anchor. */
-    corner: {
-      type: String as PropType<CornerBadgeCorner>,
-      default: "top-right",
+    /** Where the mark hangs (see CornerBadgePlacement). The four corners
+     *  overlay the anchor; `right` / `left` sit beside it, vertically
+     *  centered and never covering it. Default `bottom-right` = the
+     *  subscript mark (avatar / icon). Button-group hosts (HkTabs)
+     *  default to `right` instead. */
+    placement: {
+      type: String as PropType<CornerBadgePlacement>,
+      default: "bottom-right",
     },
-    /** Extra clearance from the corner in px (0 = sit ON the corner,
-     * the translate(50%,-50%) centering). */
+    /** Extra clearance in px. Corner placements: clearance from the
+     *  corner (0 = the mark centers ON it via translate(±50%,±50%));
+     *  side placements: the gap beyond the shared --hk-corner-badge-gap. */
     offset: { type: Number, default: 0 },
     /** Accessible name for the mark (without it the badge is
      * aria-hidden decoration). */
@@ -73,7 +102,7 @@ export default defineComponent({
     const show = computed(() => props.dot || text.value !== null);
 
     return () => (
-      <span class="hk-corner-badge-anchor">
+      <span class="hk-corner-badge-anchor" data-placement={props.placement}>
         {slots.default?.()}
         {show.value && (
           <span
@@ -82,7 +111,7 @@ export default defineComponent({
               `hk-corner-badge-${props.variant}`,
               props.dot ? "hk-corner-badge--dot" : "hk-corner-badge--pill",
             ]}
-            data-corner={props.corner}
+            data-placement={props.placement}
             style={props.offset ? { "--hk-corner-badge-offset": `${props.offset}px` } : undefined}
             aria-hidden={props.label ? undefined : "true"}
             role={props.label ? "img" : undefined}

package/src/components/HkFilterTrigger.tsx

@@ -68,7 +68,7 @@ export default defineComponent({
       const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
       return (
         <span ref={anchorRef} class="hk-filter-trigger">
-          <HkCornerBadge dot={active.value} variant="success" corner="bottom-right" offset={1}>
+          <HkCornerBadge dot={active.value} variant="success" placement="bottom-right" offset={1}>
             <HkIconButton
               size={chromeSize.value}
               variant="ghost"

package/src/components/HkSearchTrigger.tsx

@@ -96,7 +96,7 @@ const HkSearchTrigger = defineComponent({
           {/* The active-keyword marker rides the generic corner badge —
            * the same green bottom-right dot the filter trigger wears
            * (2026-10-15: was a hand-rolled primary dot, top-right). */}
-          <HkCornerBadge dot={active.value} variant="success" corner="bottom-right" offset={1}>
+          <HkCornerBadge dot={active.value} variant="success" placement="bottom-right" offset={1}>
           <HkIconButton
             size={chromeSize.value}
             variant="ghost"

package/src/components/HkSolarLocationSetting.scss

@@ -15,6 +15,10 @@
   align-items: center;
   gap: var(--space-8, 0.5rem);
   min-width: 0;
+  /* The row's cross size is the icon-button square (28px), so the summary
+   * line and the action share ONE geometric center independent of the
+   * host's line-height. */
+  min-height: var(--space-28, 1.75rem);
 }
 
 .hk-solar-summary {
@@ -25,6 +29,13 @@
   flex: 1 1 auto;
   color: rgb(var(--color-text-secondary, var(--color-muted)));
   font-size: var(--text-sm);
+  /* The text clips at the ellipsis (`overflow: hidden` below), so the
+   * line box must cover the FONT'S OWN metrics: a fixed 1em/1.2em value
+   * cut descenders in tall fallback faces (Latin 1.17em, Arabic 1.36em,
+   * Noto CJK 1.46em). `normal` makes the box equal the resolved font's
+   * ascent+descent by construction; the row's 28px min-height and flex
+   * centering own the geometry around it. */
+  line-height: normal;
 }
 
 .hk-solar-summary-icon {
@@ -32,6 +43,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  line-height: 0;
   color: rgb(var(--color-muted));
 }
 
@@ -45,6 +57,15 @@
   white-space: nowrap;
 }
 
+/* The icon-only action's tooltip host: the button itself is disabled in
+ * manual modes and therefore loses pointer events (native `disabled`), so
+ * the title has to live on this wrapper. */
+.hk-solar-edit-wrap {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
 .hk-solar-edit {
   flex-shrink: 0;
 }

package/src/components/HkSolarLocationSetting.test.tsx

@@ -18,6 +18,7 @@ import {
   type SolarLocationStrategy,
 } from "../theme/useSolarTime";
 import { cityKey, sectorForZone, sectorNameKey, standardOffsetHours } from "../theme/solarTimeZones";
+import { useTheme } from "../theme/useTheme";
 
 // The locale dictionaries, loaded the same way the locales-coverage suite
 // reads them (import.meta.glob; readFileSync resolves wrong under vitest's
@@ -68,6 +69,9 @@ function resetEngineState(): void {
   setSolarLocationStrategy("timezone");
   setSolarManualLocation(null);
   resetSolarIpInsight();
+  // The card's Edit gate reads the singleton theme mode; every case starts
+  // in AUTO ("system") so the action is enabled by default.
+  useTheme().setMode("system");
 }
 
 function mountSetting(): HTMLElement {
@@ -229,12 +233,66 @@ describe("HkSolarLocationSetting card", () => {
     expect(summary.textContent).not.toContain(systemTimeZoneId());
     expect(summary.querySelector("svg"), "strategy glyph renders").toBeTruthy();
 
+    // The Edit affordance is an ICON-ONLY HkIconButton (ghost/28) — the
+    // square matches the row's 28px cross size; the accessible name and
+    // the tooltip carry the action (the wrapper owns the title because a
+    // disabled button loses pointer events).
     const btn = editButton(container);
-    expect(btn.textContent?.trim()).toBe("Edit");
+    expect(btn.classList.contains("hk-icon-button")).toBe(true);
+    expect(btn.classList.contains("hk-icon-button-28")).toBe(true);
+    expect(btn.classList.contains("hk-icon-button-ghost")).toBe(true);
+    expect(
+      btn.querySelector(".hk-icon-button-icon svg.lucide-pencil"),
+      "the Pencil glyph (not IconButton's fallback circle) renders",
+    ).toBeTruthy();
+    expect(btn.textContent?.trim(), "no text label in the icon button").toBe("");
+    expect(btn.getAttribute("aria-label")).toBe("Edit");
+    expect(btn.disabled, "auto mode enables the editor").toBe(false);
+    expect(btn.closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe("Edit");
     // No editor in the DOM before the first open.
     expect(document.body.querySelector(".hk-solar-editor")).toBeNull();
   });
 
+  it("grays the edit action outside auto mode and re-enables it in auto", async () => {
+    const { setMode } = useTheme();
+    // Mount in AUTO first, then drive the live mode transitions a host's
+    // own switch performs — this is the user path and it keeps the test
+    // independent of which mode the singleton happened to carry at mount.
+    const container = mountSetting();
+    await settle();
+    expect(editButton(container).disabled, "auto mode enables the editor").toBe(false);
+    expect(editButton(container).closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe(
+      "Edit",
+    );
+
+    setMode("light");
+    await settle();
+    const btn = editButton(container);
+    expect(btn.disabled, "manual modes disable the solar editor").toBe(true);
+    expect(btn.getAttribute("aria-label")).toBe("Edit");
+    expect(btn.closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe(
+      "Switch to Auto mode to change the daylight location",
+    );
+
+    // A disabled native button cannot open the editor.
+    btn.click();
+    await settle();
+    expect(modalHeader(), "disabled edit never opens the modal").toBeNull();
+
+    // Back to auto: the SAME mounted card re-enables on the live mode ref.
+    setMode("system");
+    await settle();
+    expect(editButton(container).disabled).toBe(false);
+    expect(editButton(container).closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe(
+      "Edit",
+    );
+
+    // Dark is just another manual side of the same gate.
+    setMode("dark");
+    await settle();
+    expect(editButton(container).disabled).toBe(true);
+  });
+
   it("is a standard hikari card: localized default title, overridable, hideable", async () => {
     const container = mountSetting();
     await settle();
@@ -573,7 +631,9 @@ describe("HkSolarLocationSetting i18n", () => {
     expect(card?.querySelector(".hk-card-title")?.textContent?.trim()).toBe("日照位置");
     const summary = rowSummary(container);
     expect(summary.textContent).toContain("自动 · 基于时区");
-    expect(editButton(container).textContent?.trim()).toBe("编辑");
+    // The icon button localizes its accessible name/tooltip, not a text label.
+    expect(editButton(container).getAttribute("aria-label")).toBe("编辑");
+    expect(editButton(container).closest(".hk-solar-edit-wrap")?.getAttribute("title")).toBe("编辑");
 
     await openEditor(container);
     expect(modalHeader()!.textContent).toContain("太阳钟定位");

package/src/components/HkSolarLocationSetting.tsx

@@ -1,9 +1,9 @@
 // AI-generated: developed with the ZCode agent (model GLM-5.3); human-directed.
 import { computed, defineAsyncComponent, defineComponent, ref, watch } from "vue";
-import { Clock, Globe2, MapPin } from "lucide-vue-next";
+import { Clock, Globe2, MapPin, Pencil } from "lucide-vue-next";
 
 import { useI18n } from "../i18n/context";
-import { refreshThemeClock } from "../theme/useTheme";
+import { refreshThemeClock, useTheme } from "../theme/useTheme";
 import {
   hydrateSolarLocationState,
   manualLocationOf,
@@ -25,6 +25,7 @@ import {
   standardOffsetHours,
 } from "../theme/solarTimeZones";
 import HkButton from "./HkButton";
+import HkIconButton from "./HkIconButton";
 import HkCard from "./HkCard";
 import HkCopyBadge from "./HkCopyBadge";
 import HkModal, { type ModalAction } from "./HkModal";
@@ -136,9 +137,10 @@ export function solarTimezoneDetectedRows(
  *  - the card is a standard HkCard titled "Daylight location" (the
  *    `title` prop overrides or, with an empty string, hides the header
  *    for hosts that already label their section), its body carrying the
- *    live strategy summary and an Edit button — the summary names the
- *    POLICY in a fixed shape ("Auto · By time zone" / "Auto · IP
- *    location" / "Manual · {zone} · {hemisphere}");
+ *    live strategy summary and an ICON-ONLY Edit button (HkIconButton
+ *    ghost/28, the row's own cross size) — the summary names the POLICY
+ *    in a fixed shape ("Auto · By time zone" / "Auto · IP location" /
+ *    "Manual · {zone} · {hemisphere}");
  *  - the modal drafts a strategy (segmented Clock/Globe2/MapPin tabs).
  *    The first line under the tabs states the strategy's PRINCIPLE; for
  *    the non-manual strategies a detected-value readout follows, one
@@ -154,6 +156,14 @@ export function solarTimezoneDetectedRows(
  *    setSolarLocationStrategy → refreshThemeClock() (the setters drop
  *    the engine's geo memo but do not re-resolve on their own), and the
  *    card's summary reflects the new state immediately.
+ *
+ * The Edit affordance is AUTO-MODE ONLY (2026-11-05 user direction): the
+ * solar clock only drives the theme in `currentMode === "system"`; in a
+ * manual light/dark mode the button is disabled (gray) and its tooltip
+ * says so. The component reads the singleton theme state itself, so a
+ * host that drops it under its own mode switch gets the behavior without
+ * wiring anything. The Rust mirror takes the same state as an
+ * `editor_disabled` prop (it has no theme engine).
  */
 export const HkSolarLocationSetting = defineComponent({
   name: "HkSolarLocationSetting",
@@ -168,6 +178,9 @@ export const HkSolarLocationSetting = defineComponent({
   },
   setup(props, { emit }) {
     const { t } = useI18n();
+    // AUTO-mode gate: the sun clock only drives the theme in "system".
+    const { currentMode } = useTheme();
+    const editorDisabled = computed(() => currentMode.value !== "system");
     // The engine hydrates lazily (storage-silent imports): a host that
     // mounts this card before initTheme() still sees the stored strategy.
     hydrateSolarLocationState();
@@ -433,14 +446,29 @@ export const HkSolarLocationSetting = defineComponent({
             <span class="hk-solar-summary-icon" aria-hidden="true">{summaryIcon()}</span>
             <span class="hk-solar-summary-text">{summaryText.value}</span>
           </div>
-          <HkButton
-            size="sm"
-            variant="outline"
-            class="hk-solar-edit"
-            onClick={openEditor}
+          {/* Icon-only Edit (2026-11-05): the row's action is the standard
+              ghost icon-button square, not a text pill. Disabled outside
+              auto mode; the wrapper owns the tooltip because a disabled
+              button drops pointer events. */}
+          <span
+            class="hk-solar-edit-wrap"
+            title={
+              editorDisabled.value
+                ? t("hikari::theme.solar.editAutoOnly")
+                : t("hikari::theme.solar.edit")
+            }
           >
-            {t("hikari::theme.solar.edit")}
-          </HkButton>
+            <HkIconButton
+              size={28}
+              variant="ghost"
+              class="hk-solar-edit"
+              aria-label={t("hikari::theme.solar.edit")}
+              disabled={editorDisabled.value}
+              onClick={openEditor}
+            >
+              {{ icon: () => <Pencil size={16} /> }}
+            </HkIconButton>
+          </span>
         </div>
 
         <HkModal

package/src/components/HkTabs.test.ts

@@ -691,24 +691,47 @@ describe("HkTabs trigger corner badge", () => {
     return { container };
   }
 
-  it("renders the count through HkCornerBadge inside the trigger (no hand-rolled suffix)", () => {
+  it("renders the count through HkCornerBadge BESIDE the label (side default, no hand-rolled suffix)", () => {
     const { container } = mountBadge({ count: 3, label: "3 items" });
     const trig = container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[0]!;
-    // The mark is the family's corner-badge pill, anchored bottom-right
-    // (the subscript corner) of the label, not a "(3)" text suffix.
+    // The mark is the family's pill, placed on the BUTTON-GROUP default:
+    // `right` — beside the label, vertically centered, never covering
+    // it (user direction 2026-11-05: the corner overlay read as "歪了/
+    // 盖住了" on a tab trigger). Not a "(3)" text suffix either.
     const mark = trig.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
     expect(mark).not.toBeNull();
     expect(mark.textContent).toBe("3");
-    expect(mark.dataset.corner).toBe("bottom-right");
+    expect(mark.dataset.placement).toBe("right");
+    expect(trig.querySelector(".hk-corner-badge-anchor")!.getAttribute("data-placement")).toBe("right");
     expect(trig.textContent).not.toContain("(3)");
-    // Default clearance: the straddling pill must stay inside the
-    // scroller's 6px vertical clearance below the label (see
-    // TabItem.badge.offset) — the offset var pins that contract.
-    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("4px");
+    // Side placement needs no corner clearance: the wrapper gap is the
+    // spacing, so the tab default writes no offset var.
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("");
+    // Side flow order: the label comes first, the mark after it.
+    const anchor = trig.querySelector(".hk-corner-badge-anchor")!;
+    expect(anchor.firstElementChild!.textContent).toBe("Alpha");
+    expect(anchor.lastElementChild).toBe(mark);
     // The sibling trigger stays badge-free.
     expect(container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[1]!.querySelector(".hk-corner-badge")).toBeNull();
   });
 
+  it("keeps the explicit corner override, with the corner clearance default", () => {
+    // A host that opts back into the overlay must still get the 4px
+    // clearance the scroller viewport needs (the placement-aware default),
+    // without restating it.
+    const { container } = mountBadge({ count: 3, label: "3 items", placement: "bottom-right" });
+    const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.dataset.placement).toBe("bottom-right");
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("4px");
+  });
+
+  it("honours an explicit offset in either placement family", () => {
+    const side = mountBadge({ count: 3, label: "3 items", offset: 2 });
+    const mark = side.container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.dataset.placement).toBe("right");
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("2px");
+  });
+
   it("keeps zero visible (presence count, not notification noise)", () => {
     const { container } = mountBadge({ count: 0, label: "0 items" });
     const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;