@celestia-island/hikari 0.40.14 → 0.40.16

package/package.json

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

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/index.ts

@@ -303,7 +303,7 @@ export { deepMerge, isPlainObject, getPath, setPath, delPath } from "./utils/obj
 export { HkAdminShell as HAdminShell } from "./components/HkAdminShell";
 export { HkAdminHeader as HAdminHeader } from "./components/HkAdminHeader";
 export { HkNavSidebar as HNavSidebar } from "./components/HkNavSidebar";
-export { HkThemeToggle as HThemeToggle } from "./components/HkThemeToggle";
+export { HkThemeToggle as HThemeToggle, type ThemeItemScope } from "./components/HkThemeToggle";
 export { HkAuthCard as HAuthCard } from "./components/HkAuthCard";
 export { default as HAuthMethodList } from "./components/HkAuthMethodList";
 export { HkSignInCard as HSignInCard } from "./components/HkSignInCard";

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 };