@celestia-island/hikari 0.40.13 → 0.40.15

package/package.json

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

package/src/components/HkModal.transition-completion.test.tsx

@@ -0,0 +1,179 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkModal from "./HkModal";
+
+const mounts: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(async () => {
+  for (const app of mounts.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+const here = join(dirname(fileURLToPath(import.meta.url)));
+
+/** Freeze rAF entirely: Vue's <Transition> engine double-raf's the
+ *  leave-from → leave-to class flip before it even arms its
+ *  transitionend wait, so a frozen rAF reproduces the occluded-webview
+ *  pathology exactly — the leave can NEVER complete on its own and only
+ *  the component's watchdog can finalize it. */
+function freezeRaf(): void {
+  vi.stubGlobal("requestAnimationFrame", (_cb: FrameRequestCallback) => 0 as unknown as number);
+  vi.stubGlobal("cancelAnimationFrame", () => {});
+}
+
+/** Mount an open modal wired to an `open` ref we can flip from the test. */
+async function mountOpenModal() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const open = ref(true);
+  const afterLeaveEvents: number[] = [];
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkModal, {
+          modelValue: open.value,
+          closable: true,
+          "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+          onAfterLeave: () => { afterLeaveEvents.push(1); },
+        }, { default: () => h("div", "content") });
+      },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  await nextTick();
+  return { open, afterLeaveEvents };
+}
+
+describe("HkModal leave-completion watchdog", () => {
+  // Regression for the field-reported frozen modal (2026-09): with rAF
+  // starved, the Transition leave can never complete on its own and the
+  // panel used to stay over the page forever — undismissable, only a
+  // full reload escaped it. The watchdog must finalize within its
+  // budget, unmount both surface layers, and emit afterLeave exactly
+  // the way a real transition would.
+  it("force-finalizes a stalled leave within the watchdog budget", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+
+    open.value = false;
+    await nextTick();
+    // Just inside the budget nothing else can have completed the leave.
+    await vi.advanceTimersByTimeAsync(590);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+
+    await vi.advanceTimersByTimeAsync(100);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(document.querySelector(".hk-modal-overlay")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+  });
+
+  // The finalize flag must reset on reopen: without the reset a second
+  // close after a forced first finalize would be a no-op and the modal
+  // would freeze open forever instead.
+  // Vue resolves an OPEN-INTERRUPTED leave without a cancelled flag: a
+  // reopen patching over a still-live leave fires the old leave's
+  // onAfterLeave. The finalize must bail out while the surface is open
+  // again, or the stale completion kills the freshly reopened modal
+  // (unregisters its handle, unmounts the panel, emits a spurious
+  // afterLeave).
+  it("ignores a stale leave completion firing during reopen", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(50); // leave live, nothing finalized
+    open.value = true; // reopen patches over the live leave
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700); // past the watchdog budget
+    await nextTick();
+    // The reopened modal must survive both the stale onAfterLeave and
+    // the (disarmed) watchdog from the aborted close.
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+    expect(afterLeaveEvents).toHaveLength(0);
+
+    // And the surface still closes normally afterwards.
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+  });
+
+  it("re-arms across open/close cycles after a forced finalize", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+
+    open.value = true;
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).not.toBeNull();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(2);
+  });
+
+  // On a healthy surface (real rAF, no transitionend needed — happy-dom
+  // reports no CSS transitions so Vue completes instantly) the real
+  // path owns finalization and the watchdog is a silent no-op: exactly
+  // one afterLeave per close, no duplicates from the pending timer.
+  it("leaves normal completion to the Transition engine without double-emitting", async () => {
+    vi.useFakeTimers();
+    const { open, afterLeaveEvents } = await mountOpenModal();
+
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(document.querySelector(".hk-modal-content")).toBeNull();
+    expect(afterLeaveEvents).toHaveLength(1);
+
+    open.value = true;
+    await nextTick();
+    open.value = false;
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(700);
+    await nextTick();
+    expect(afterLeaveEvents).toHaveLength(2);
+  });
+
+  // Contract pin: the watchdog must stay armed on the close path and
+  // its budget must stay bigger than any themed CSS leave
+  // (--hk-modal-duration defaults to 0.25s; a theme may raise it). A
+  // refactor that drops the arming — or shrinks the budget under the
+  // CSS timing — silently re-opens the frozen-modal failure mode.
+  it("pins the watchdog wiring and budget in the source", () => {
+    const src = readFileSync(join(here, "HkModal.tsx"), "utf-8");
+    expect(src).toContain("const LEAVE_WATCHDOG_MS = 600;");
+    expect(src).toContain("if (shouldRender.value) armLeaveWatchdog();");
+    expect(src).toContain("disarmLeaveWatchdog();");
+    expect(src).toContain("onAfterLeaveFinalize();");
+  });
+});

package/src/components/HkModal.tsx

@@ -194,6 +194,41 @@ export default defineComponent({
     let previouslyFocused: HTMLElement | null = null;
     let unmounted = false;
 
+    // ── Leave-completion watchdog ─────────────────────────────────────
+    // The close path hands unmounting to <Transition>'s leave, whose
+    // engine is rAF-driven: it double-raf's the leave-from → leave-to
+    // class flip and only THEN arms its transitionend wait. In an
+    // occluded/backgrounded webview rAF can starve for the whole leave
+    // window, the classes freeze in leave-from/leave-active, and the
+    // modal stays over the page forever — undismissable, only a full
+    // reload escaped it (field-reported 2026-09). The watchdog bounds
+    // the wait: if the leave has not finalized within a budget larger
+    // than any themed CSS leave (--hk-modal-duration defaults to 0.25s,
+    // themes may raise it), onAfterLeaveFinalize runs the exact same
+    // finalization the Transition would have. Normal closes disarm it;
+    // late or stale completions (post-watchdog real onAfterLeave, or
+    // the open-interrupted leave Vue resolves without a cancelled flag)
+    // are no-ops through the finalize and modelValue guards.
+    const LEAVE_WATCHDOG_MS = 600;
+    let leaveWatchdog: ReturnType<typeof setTimeout> | null = null;
+    let leaveFinalized = false;
+
+    function armLeaveWatchdog(): void {
+      disarmLeaveWatchdog();
+      leaveWatchdog = setTimeout(() => {
+        leaveWatchdog = null;
+        if (unmounted || props.modelValue || !shouldRender.value) return;
+        onAfterLeaveFinalize();
+      }, LEAVE_WATCHDOG_MS);
+    }
+
+    function disarmLeaveWatchdog(): void {
+      if (leaveWatchdog !== null) {
+        clearTimeout(leaveWatchdog);
+        leaveWatchdog = null;
+      }
+    }
+
     const overlayZ = computed(() => handle.value?.zIndex ?? 0);
     const contentZ = computed(() => (handle.value?.zIndex ?? 0) + 1);
     const resolvedWidth = computed(() => resolveModalWidth(props.width));
@@ -275,7 +310,15 @@ export default defineComponent({
       }
     }
 
-    function onAfterLeave() {
+    function onAfterLeaveFinalize() {
+      // Finalizing while the surface is OPEN means this is a stale
+      // completion: Vue fires the interrupted leave's onAfterLeave (no
+      // cancelled flag) when a reopen patches over a still-live leave,
+      // and the watchdog callback separately guards on props.modelValue.
+      // Finalizing either of those would tear down the reopened modal.
+      if (unmounted || props.modelValue || leaveFinalized) return;
+      leaveFinalized = true;
+      disarmLeaveWatchdog();
       if (handle.value) {
         manager.unregister(handle.value.id);
         handle.value = null;
@@ -580,6 +623,8 @@ export default defineComponent({
           if (handle.value) {
             manager.unregister(handle.value.id);
           }
+          leaveFinalized = false;
+          disarmLeaveWatchdog();
           shouldRender.value = true;
           // Windows always block, so the kind alone lists this layer in
           // the modal-stack breadcrumb on every form factor.
@@ -594,6 +639,12 @@ export default defineComponent({
           // (e.g. immediate), clean up now.
           overlay.close();
           backGuard.release();
+          // Bound the Transition leave: if rAF starvation froze the
+          // class flip, the watchdog finalizes in the watchdog's place
+          // (see LEAVE_WATCHDOG_MS above). Only an actually-mounted
+          // surface can stall — a never-opened modal has nothing to
+          // finalize.
+          if (shouldRender.value) armLeaveWatchdog();
         }
       },
       { immediate: true },
@@ -626,6 +677,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       unmounted = true;
+      disarmLeaveWatchdog();
       detachBodyScrollbar();
       teardownWindowed();
       teardownAutoFollow();
@@ -709,7 +761,7 @@ export default defineComponent({
               }}
               onAfterLeave={() => {
                 contentHooks.onAfterLeave();
-                onAfterLeave();
+                onAfterLeaveFinalize();
               }}
             >
               {props.modelValue && (

package/src/components/HkProtocolModal.scss

@@ -2,17 +2,6 @@
   position: relative;
 }
 
-.s-protocol-modal-copied {
-  position: absolute;
-  top: -0.25rem;
-  right: 0;
-  margin: 0;
-  padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
-  border-radius: var(--radius-sm, 6px);
-  background: rgb(var(--color-success) / 15%);
-  color: rgb(var(--color-success));
-  font-size: var(--text-xs, 0.75rem);
-}
 
 /* With `bodyHeight` set the body becomes its own scroll region (nested
  * inside HkModal's body scroller) — overlay chrome only. */

package/src/components/HkProtocolModal.tsx

@@ -1,5 +1,12 @@
 import { computed, defineComponent, onBeforeUnmount, ref, watch, type PropType } from "vue";
-import { HMarkdownRenderer, HModal, useClipboard, type ModalAction, type ModalWidth } from "@celestia-island/hikari";
+import {
+  HMarkdownRenderer,
+  HModal,
+  useClipboardWithToast,
+  useToast,
+  type ModalAction,
+  type ModalWidth,
+} from "@celestia-island/hikari";
 
 import { useI18n } from "../i18n/context";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
@@ -40,8 +47,7 @@ export const HkProtocolModal = defineComponent({
   },
   setup(props, { emit }) {
     const { t } = useI18n();
-    const clipboard = useClipboard();
-    const copied = computed(() => clipboard.copied.value);
+    const clipboard = useClipboardWithToast(useToast());
 
     const footerActions = computed<ModalAction[]>(() => [
       {
@@ -103,7 +109,6 @@ export const HkProtocolModal = defineComponent({
           class="s-protocol-modal"
           style={props.bodyHeight ? { maxHeight: props.bodyHeight } : undefined}
         >
-          {copied.value && <p class="s-protocol-modal-copied">{t("hikari::protocol.copied", "Copied")}</p>}
           <HMarkdownRenderer content={props.content} />
         </div>
       </HModal>

package/src/components/HkSecretRevealModal.scss

@@ -50,10 +50,6 @@
   filter: brightness(1.1);
 }
 
-.s-secret-modal-copy[data-copied] {
-  background: rgb(var(--color-success));
-  color: rgb(var(--color-on-solid-text, 255 255 255));
-}
 
 .s-secret-modal-copy:disabled {
   opacity: 0.5;

package/src/components/HkSecretRevealModal.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, ref, watch } from "vue";
-import { TriangleAlert as AlertTriangle, Check, Copy } from "lucide-vue-next";
-import { HModal, useClipboard, useI18n } from "@celestia-island/hikari";
+import { defineComponent } from "vue";
+import { TriangleAlert as AlertTriangle, Copy } from "lucide-vue-next";
+import { HModal, useClipboardWithToast, useI18n, useToast } from "@celestia-island/hikari";
 
 import "./HkSecretRevealModal.scss";
 
@@ -9,9 +9,10 @@ import "./HkSecretRevealModal.scss";
  * HkSecretRevealModal — show-once secret / API-key reveal panel.
  *
  * Displays a one-time secret (API key, token, password) with a "shown
- * only once" notice and a copy button. `copied` fires on successful copy.
- * The value is a prop: the caller decides how to obtain/discard it (e.g.
- * clear it once the modal closes).
+ * only once" notice and a copy button. `copied` fires on successful copy;
+ * the copy itself is confirmed via a localized toast (the button label
+ * stays stable). The value is a prop: the caller decides how to
+ * obtain/discard it (e.g. clear it once the modal closes).
  */
 export const HkSecretRevealModal = defineComponent({
   name: "HkSecretRevealModal",
@@ -33,23 +34,12 @@ export const HkSecretRevealModal = defineComponent({
   },
   setup(props, { emit }) {
     const { t } = useI18n();
-    const clipboard = useClipboard();
-    const copied = ref(false);
-
-    watch(
-      () => props.modelValue,
-      (open) => {
-        if (open) copied.value = false;
-      },
-    );
+    const clipboard = useClipboardWithToast(useToast());
 
     async function handleCopy() {
       if (!props.value) return;
       const ok = await clipboard.copy(props.value);
-      if (ok) {
-        copied.value = true;
-        emit("copied");
-      }
+      if (ok) emit("copied");
     }
 
     return () => (
@@ -76,12 +66,11 @@ export const HkSecretRevealModal = defineComponent({
             <button
               type="button"
               class="s-secret-modal-copy"
-              data-copied={copied.value || undefined}
               onClick={() => void handleCopy()}
               disabled={!props.value}
             >
-              {copied.value ? <Check size={14} /> : <Copy size={14} />}
-              {copied.value ? t("hikari::secret.copied") : props.copyLabel ?? t("hikari::secret.copy")}
+              <Copy size={14} />
+              {props.copyLabel ?? t("hikari::secret.copy")}
             </button>
           </div>
         </div>

package/src/components/HkThemeToggle.scss

@@ -222,3 +222,33 @@
     margin-right: 2.75rem;
   }
 }
+
+/* ── Host-provided row anatomy (item-leading / item-trailing) ───────────
+ * When the host renders the item-leading slot, EVERY row carries the
+ * fixed icon cell (not just the active row's check), so names align
+ * across the list; the cell keeps the unified menu-item icon metrics.
+ */
+.s-theme-item-lead {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  color: inherit;
+}
+
+/* When the host renders the item-trailing slot, every row reserves a
+ * REAL trailing column (the slot owns it — the built-in custom-delete
+ * overlay is suppressed), so trailing affordances align across rows
+ * instead of floating over the pill's edge. The custom-name clearance
+ * for the overlay delete no longer applies in this mode. */
+.s-theme-item-trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  flex-shrink: 0;
+  margin-inline-start: var(--space-4, 0.25rem);
+}
+
+.s-theme-item-row[data-trailing="slot"] .s-theme-item-name {
+  margin-right: 0;
+}

package/src/components/HkThemeToggle.test.ts

@@ -229,3 +229,91 @@ describe("HkThemeToggle color-mode group", () => {
     expect(activeBtn?.querySelector(".s-theme-item-check")).toBeTruthy();
   });
 });
+
+describe("HkThemeToggle item slots", () => {
+  function mountSlotted(
+    lead: (scope: { id: string }) => unknown,
+    trail: (scope: { id: string }) => unknown,
+  ): HTMLElement {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkThemeToggle, {
+          externalCustomize: true,
+        }, {
+          "item-leading": lead,
+          "item-trailing": trail,
+        }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    return container;
+  }
+
+  it("renders the leading slot on every row in place of the selected-check cell", async () => {
+    const seen: string[] = [];
+    const container = mountSlotted(
+      (scope) => { seen.push(scope.id); return h("i", { class: "lead-mark" }); },
+      () => null,
+    );
+    await settle();
+    openMenu(container);
+    await settle();
+
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-theme-menu .s-theme-item-row")];
+    expect(rows.length).toBeGreaterThanOrEqual(2);
+    // Every row — active or not — carries the slot cell; no check cell is
+    // rendered alongside (the slot owns the leading zone).
+    for (const row of rows) {
+      expect(row.querySelector(".s-theme-item-lead .lead-mark")).toBeTruthy();
+      expect(row.querySelector(".s-theme-item-check")).toBeNull();
+    }
+    expect(seen.length).toBe(rows.length);
+  });
+
+  it("reserves the trailing column and suppresses the built-in delete overlay", async () => {
+    useTheme().addCustomTheme(anyPresetTokens());
+    const container = mountSlotted(
+      () => null,
+      (scope) => h("i", { class: "trail-mark", "data-id": scope.id }),
+    );
+    await settle();
+    openMenu(container);
+    await settle();
+
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-theme-menu .s-theme-item-row")];
+    expect(rows.length).toBeGreaterThanOrEqual(3);
+    let customRows = 0;
+    for (const row of rows) {
+      expect(row.hasAttribute("data-trailing")).toBe(true);
+      expect(row.getAttribute("data-trailing")).toBe("slot");
+      expect(row.querySelector(".s-theme-item-trailing .trail-mark")).toBeTruthy();
+      // The slot owns the trailing zone: the built-in overlay is gone
+      // even on custom rows.
+      expect(row.querySelector(".s-theme-item-delete")).toBeNull();
+      if (row.hasAttribute("data-custom")) customRows += 1;
+    }
+    expect(customRows).toBe(1);
+  });
+
+  it("scopes each row with its resolved preset definition", async () => {
+    const presets: Array<unknown> = [];
+    const container = mountSlotted(
+      (scope) => { presets.push((scope as { preset?: unknown }).preset); return null; },
+      () => null,
+    );
+    await settle();
+    openMenu(container);
+    await settle();
+
+    // Built-in rows resolve to their preset table entry (tokens present).
+    expect(presets.length).toBeGreaterThanOrEqual(2);
+    for (const preset of presets) {
+      const p = preset as { dark?: { primary?: unknown }; light?: { primary?: unknown } } | undefined;
+      expect(p).toBeTruthy();
+      expect(p!.dark?.primary).toBeTruthy();
+      expect(p!.light?.primary).toBeTruthy();
+    }
+  });
+});

package/src/components/HkThemeToggle.tsx

@@ -4,10 +4,13 @@ import {
   HDivider,
   HPopover,
   solarAltitude,
+  themePresets,
   useI18n,
   useTheme,
+  type CustomThemePreset,
   type PopupPlacement,
   type ThemeId,
+  type ThemePreset,
 } from "@celestia-island/hikari";
 
 import { HColorSchemeDialog, type HCustomTheme } from "./HkColorSchemeDialog";
@@ -19,6 +22,18 @@ import "./HkThemeToggle.scss";
  *  refresh) on every altitude tick. */
 const AUTO_MERGE_KEYS = ["light", "dark"];
 
+/** Scoped payload handed to the `item-leading` / `item-trailing` slots:
+ *  one object per theme row, carrying enough identity for the host to
+ *  render swatches or affordances without re-deriving the preset. */
+export interface ThemeItemScope {
+  id: ThemeId;
+  name: string;
+  isCustom: boolean;
+  /** The row's full definition — the built-in preset table entry for
+   *  stock/registered themes, the user's stored scheme for customs. */
+  preset: ThemePreset | CustomThemePreset | undefined;
+}
+
 /**
  * HkThemeToggle — light/dark/auto theme control over hikari's theme engine.
  *
@@ -28,6 +43,15 @@ const AUTO_MERGE_KEYS = ["light", "dark"];
  * color-mode group and preset/custom theme selection (custom themes are
  * removable), and opens HColorSchemeDialog to create a new custom scheme.
  *
+ * Theme rows are host-customizable through two scoped slots (both render
+ * in the popover AND the mobile bottom sheet — same DOM):
+ *  · `item-leading` — replaces the selected-check cell; renders for
+ *    every row in the fixed icon cell so names align regardless of the
+ *    active row. Scope: `ThemeItemScope` (id/name/isCustom/preset).
+ *  · `item-trailing` — reserves a trailing column on every row and owns
+ *    it entirely; the built-in custom-delete overlay is suppressed, so
+ *    the host renders delete/edit itself where it wants them.
+ *
  * Color-mode group: the unified HTabs strip in segmented (radiogroup)
  * working mode (Auto | Light | Dark) — same pill chrome as every other
  * group. In AUTO mode the Light/Dark halves merge into the strip's
@@ -58,7 +82,15 @@ export const HkThemeToggle = defineComponent({
   },
   setup(props, { emit, slots }) {
     const { t } = useI18n();
-    const { currentTheme, currentMode, effectiveMode, geo, setTheme, setMode, toggleMode, allThemeList, addCustomTheme, removeCustomTheme } = useTheme();
+    const { currentTheme, currentMode, effectiveMode, geo, setTheme, setMode, toggleMode, allThemeList, addCustomTheme, removeCustomTheme, customThemes } = useTheme();
+
+    /** Resolve a row's full definition for the item slots: the live
+     *  preset table first (stock + registered brand themes), then the
+     *  user's stored custom schemes. */
+    function presetOf(id: ThemeId): ThemePreset | CustomThemePreset | undefined {
+      if (id in themePresets) return themePresets[id as keyof typeof themePresets];
+      return customThemes.value.find((c) => c.id === id);
+    }
 
     const menuOpen = ref(false);
     const triggerRef = ref<HTMLElement | null>(null);
@@ -227,37 +259,61 @@ export const HkThemeToggle = defineComponent({
             <HDivider spacing="md" />
 
             <div class="s-theme-menu-label">{t("hikari::theme.themes")}</div>
-            {allThemeList.value.map((th) => (
-              // One full-width pill per row — the delete affordance for
-              // custom themes OVERLAYS the pill's trailing edge instead
-              // of reserving a trailing column, so built-in rows carry
-              // no dead space (a bottom sheet once showed a permanent
-              // ~40px empty strip right of every row) and every pill
-              // and highlight shares the exact same width.
-              <div key={th.id} class="s-theme-item-row" data-custom={th.isCustom || undefined}>
-                <button
-                  type="button"
-                  class="s-theme-item-btn"
-                  data-active={currentTheme.value === th.id || undefined}
-                  onClick={() => onSelectTheme(th.id)}
+            {allThemeList.value.map((th) => {
+              // Host-customizable row anatomy. `item-leading` replaces the
+              // selected-check cell and renders for EVERY row (fixed icon
+              // cell, so names stay aligned); `item-trailing` reserves a
+              // real trailing column for every row and takes full
+              // ownership of the affordances there — the built-in custom
+              // delete overlay is suppressed in that mode, so the host
+              // renders delete (and anything else) itself. Without the
+              // slots the rows behave exactly as before: check only on
+              // the active row, delete overlaid on custom rows only.
+              const scope: ThemeItemScope = {
+                id: th.id,
+                name: th.name,
+                isCustom: th.isCustom,
+                preset: presetOf(th.id),
+              };
+              const leadingSlot = slots["item-leading"];
+              const trailingSlot = slots["item-trailing"];
+              return (
+                <div
+                  key={th.id}
+                  class="s-theme-item-row"
+                  data-custom={th.isCustom || undefined}
+                  data-trailing={trailingSlot ? "slot" : undefined}
                 >
-                  {currentTheme.value === th.id && (
-                    <span class="hk-menu-item-icon s-theme-item-check"><Check size={14} /></span>
-                  )}
-                  <span class="s-theme-item-name">{th.name}</span>
-                </button>
-                {th.isCustom && (
                   <button
                     type="button"
-                    class="s-theme-item-delete"
-                    title={t("hikari::theme.deleteTheme")}
-                    onClick={() => removeCustomTheme(th.id)}
+                    class="s-theme-item-btn"
+                    data-active={currentTheme.value === th.id || undefined}
+                    onClick={() => onSelectTheme(th.id)}
                   >
-                    <Trash2 size={12} />
+                    {leadingSlot ? (
+                      <span class="hk-menu-item-icon s-theme-item-lead">
+                        {leadingSlot(scope)}
+                      </span>
+                    ) : currentTheme.value === th.id ? (
+                      <span class="hk-menu-item-icon s-theme-item-check"><Check size={14} /></span>
+                    ) : null}
+                    <span class="s-theme-item-name">{th.name}</span>
                   </button>
-                )}
-              </div>
-            ))}
+                  {trailingSlot ? (
+                    <span class="s-theme-item-trailing">{trailingSlot(scope)}</span>
+                  ) : th.isCustom ? (
+                    <button
+                      type="button"
+                      class="s-theme-item-delete"
+                      title={t("hikari::theme.deleteTheme")}
+                      onClick={() => removeCustomTheme(th.id)}
+                    >
+                      <Trash2 size={12} />
+                    </button>
+                  ) : null}
+                </div>
+              );
+            })}
 
             <button
               type="button"

package/src/i18n/locales/ar/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "رفض",
     "hikari::protocol.copy": "نسخ",
     "hikari::protocol.copied": "تم النسخ",
+    "hikari::clipboard.copied": "تم النسخ",
+    "hikari::clipboard.copyFailed": "فشل النسخ",
     "hikari::about.title": "حول",
     "hikari::about.version": "الإصدار",
     "hikari::about.buildHash": "البناء",

package/src/i18n/locales/de/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "Ablehnen",
     "hikari::protocol.copy": "Kopieren",
     "hikari::protocol.copied": "Kopiert",
+    "hikari::clipboard.copied": "Kopiert",
+    "hikari::clipboard.copyFailed": "Kopieren fehlgeschlagen",
     "hikari::about.title": "Über",
     "hikari::about.version": "Version",
     "hikari::about.buildHash": "Build",

package/src/i18n/locales/en/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "Decline",
     "hikari::protocol.copy": "Copy",
     "hikari::protocol.copied": "Copied",
+    "hikari::clipboard.copied": "Copied",
+    "hikari::clipboard.copyFailed": "Copy failed",
     "hikari::about.title": "About",
     "hikari::about.version": "Version",
     "hikari::about.buildHash": "Build",

package/src/i18n/locales/es/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "Rechazar",
     "hikari::protocol.copy": "Copiar",
     "hikari::protocol.copied": "Copiado",
+    "hikari::clipboard.copied": "Copiado",
+    "hikari::clipboard.copyFailed": "Error al copiar",
     "hikari::about.title": "Acerca de",
     "hikari::about.version": "Versión",
     "hikari::about.buildHash": "Compilación",

package/src/i18n/locales/fr/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "Refuser",
     "hikari::protocol.copy": "Copier",
     "hikari::protocol.copied": "Copié",
+    "hikari::clipboard.copied": "Copié",
+    "hikari::clipboard.copyFailed": "Échec de la copie",
     "hikari::about.title": "À propos",
     "hikari::about.version": "Version",
     "hikari::about.buildHash": "Build",

package/src/i18n/locales/ja/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "拒否",
     "hikari::protocol.copy": "コピー",
     "hikari::protocol.copied": "コピーしました",
+    "hikari::clipboard.copied": "コピーしました",
+    "hikari::clipboard.copyFailed": "コピーに失敗しました",
     "hikari::about.title": "このアプリについて",
     "hikari::about.version": "バージョン",
     "hikari::about.buildHash": "ビルド",

package/src/i18n/locales/ko/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "거부",
     "hikari::protocol.copy": "복사",
     "hikari::protocol.copied": "복사됨",
+    "hikari::clipboard.copied": "복사됨",
+    "hikari::clipboard.copyFailed": "복사 실패",
     "hikari::about.title": "정보",
     "hikari::about.version": "버전",
     "hikari::about.buildHash": "빌드",

package/src/i18n/locales/pt/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "Recusar",
     "hikari::protocol.copy": "Copiar",
     "hikari::protocol.copied": "Copiado",
+    "hikari::clipboard.copied": "Copiado",
+    "hikari::clipboard.copyFailed": "Falha ao copiar",
     "hikari::about.title": "Sobre",
     "hikari::about.version": "Versão",
     "hikari::about.buildHash": "Build",

package/src/i18n/locales/ru/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "Отклонить",
     "hikari::protocol.copy": "Копировать",
     "hikari::protocol.copied": "Скопировано",
+    "hikari::clipboard.copied": "Скопировано",
+    "hikari::clipboard.copyFailed": "Не удалось скопировать",
     "hikari::about.title": "О программе",
     "hikari::about.version": "Версия",
     "hikari::about.buildHash": "Сборка",

package/src/i18n/locales/zh-Hans/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "拒绝",
     "hikari::protocol.copy": "复制",
     "hikari::protocol.copied": "已复制",
+    "hikari::clipboard.copied": "已复制",
+    "hikari::clipboard.copyFailed": "复制失败",
     "hikari::about.title": "关于",
     "hikari::about.version": "版本",
     "hikari::about.buildHash": "构建",

package/src/i18n/locales/zh-Hant/platform.json

@@ -10,6 +10,8 @@
     "hikari::protocol.decline": "拒絕",
     "hikari::protocol.copy": "複製",
     "hikari::protocol.copied": "已複製",
+    "hikari::clipboard.copied": "已複製",
+    "hikari::clipboard.copyFailed": "複製失敗",
     "hikari::about.title": "關於",
     "hikari::about.version": "版本",
     "hikari::about.buildHash": "建置",

package/src/runtime/useClipboard.test.ts

@@ -0,0 +1,66 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useClipboardWithToast } from "./useClipboard";
+
+// `navigator.clipboard` does not exist under happy-dom — install a
+// controllable stub and restore whatever was there before.
+let writeText: ReturnType<typeof vi.fn>;
+const originalClipboard = navigator.clipboard;
+const originalExecCommand = document.execCommand;
+
+beforeEach(() => {
+  writeText = vi.fn();
+  Object.defineProperty(navigator, "clipboard", {
+    value: { writeText },
+    configurable: true,
+  });
+});
+
+afterEach(() => {
+  Object.defineProperty(navigator, "clipboard", {
+    value: originalClipboard,
+    configurable: true,
+  });
+  document.execCommand = originalExecCommand;
+});
+
+describe("useClipboardWithToast", () => {
+  it("toasts the localized default message and resolves true on success", async () => {
+    const toast = { success: vi.fn(), error: vi.fn() };
+    const { copy } = useClipboardWithToast(toast);
+
+    const ok = await copy("secret");
+
+    expect(ok).toBe(true);
+    expect(writeText).toHaveBeenCalledWith("secret");
+    expect(toast.success).toHaveBeenCalledWith("Copied");
+    expect(toast.error).not.toHaveBeenCalled();
+  });
+
+  it("prefers the per-call message, then the call-site default thunk", async () => {
+    const toast = { success: vi.fn(), error: vi.fn() };
+    const { copy } = useClipboardWithToast(toast, () => "site default");
+
+    await copy("a", "per call");
+    await copy("b");
+
+    expect(toast.success).toHaveBeenNthCalledWith(1, "per call");
+    expect(toast.success).toHaveBeenNthCalledWith(2, "site default");
+  });
+
+  it("toasts the localized failure message when the clipboard rejects", async () => {
+    writeText.mockRejectedValue(new Error("denied"));
+    // The base composable falls back to a textarea + execCommand path;
+    // force that fallback to fail too so the error toast fires.
+    document.execCommand = vi.fn(() => false) as unknown as typeof document.execCommand;
+
+    const toast = { success: vi.fn(), error: vi.fn() };
+    const { copy } = useClipboardWithToast(toast);
+
+    const ok = await copy("secret");
+
+    expect(ok).toBe(false);
+    expect(toast.error).toHaveBeenCalledWith("Copy failed");
+    expect(toast.success).not.toHaveBeenCalled();
+  });
+});

package/src/runtime/useClipboard.ts

@@ -1,5 +1,7 @@
 import { ref } from "vue";
 
+import { useI18n } from "../i18n/context";
+
 export function useClipboard() {
   const copied = ref(false);
 
@@ -19,7 +21,10 @@ export function useClipboard() {
       document.body.appendChild(textarea);
       textarea.select();
       try {
-        document.execCommand("copy");
+        // execCommand reports failure by RETURNING false (it only throws
+        // on unsupported commands) — treating that as success surfaced
+        // "Copied" toasts for writes that never landed.
+        if (!document.execCommand("copy")) return false;
         copied.value = true;
         setTimeout(() => {
           copied.value = false;
@@ -44,21 +49,31 @@ export function useClipboard() {
  * `execCommand` outside secure contexts) and adds toast feedback;
  * `copied` reflects the 2s copied state. The `toast` argument matches
  * hikari's `useToast()` surface (`success` / `error` message pushers).
+ *
+ * Default toast messages come from hikari's own i18n
+ * (`hikari::clipboard.copied` / `hikari::clipboard.copyFailed`) so a
+ * bare `useClipboardWithToast(useToast())` is already localized; pass
+ * thunks to override per call site. `copy` resolves to whether the
+ * clipboard write succeeded.
  */
 export function useClipboardWithToast(
   toast: { success: (msg: string) => void; error: (msg: string) => void },
   defaultSuccessMessage?: () => string,
   defaultErrorMessage?: () => string,
 ) {
+  const { t } = useI18n();
   const { copy: baseCopy, copied } = useClipboard();
 
-  async function copy(text: string, successMessage?: string) {
+  async function copy(text: string, successMessage?: string): Promise<boolean> {
     const ok = await baseCopy(text);
     if (ok) {
-      toast.success(successMessage ?? defaultSuccessMessage?.() ?? "Copied");
+      toast.success(
+        successMessage ?? defaultSuccessMessage?.() ?? t("hikari::clipboard.copied", "Copied"),
+      );
     } else {
-      toast.error(defaultErrorMessage?.() ?? "Copy failed");
+      toast.error(defaultErrorMessage?.() ?? t("hikari::clipboard.copyFailed", "Copy failed"));
     }
+    return ok;
   }
 
   return { copy, copied };