From 67e5f6a4724bfe657b138dbbc2704a8cf1fcf3da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Tue, 15 Sep 2026 22:01:48 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(sonner):=20=E6=94=AF=E6=8C=81=E4=BF=9D?=
 =?UTF-8?q?=E7=95=99=E4=B8=9A=E5=8A=A1=E6=93=8D=E4=BD=9C=E7=9A=84=E7=BC=96?=
 =?UTF-8?q?=E5=8F=B7=E6=96=87=E5=AD=97=E5=A4=8D=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sonner/Toaster.vue | 89 +++++++++++++++++++++++++++----
 src/components/sonner/toast.ts    | 13 +++++
 2 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/src/components/sonner/Toaster.vue b/src/components/sonner/Toaster.vue
index 709a54f..0cf87d4 100644
--- a/src/components/sonner/Toaster.vue
+++ b/src/components/sonner/Toaster.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { Component } from 'vue'
-import { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
-import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { CheckIcon, CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
+import { computed, onBeforeUnmount, onMounted, reactive, watch } from 'vue'
 import { Button } from '#/components/button'
+import { TextButton } from '#/components/text-button'
 import { cn } from '#/lib/utils'
-import { dismiss, pauseAll, resumeAll, toast as toastApi, toasts, type ToastRecord, type ToastVariant } from './toast'
+import { dismiss, pauseAll, resumeAll, toast as toastApi, toasts, type ToastRecord, type ToastTextAction, type ToastVariant } from './toast'
 
 export type ToasterPosition =
   | 'top-right'
@@ -54,13 +55,50 @@ const isTop = computed(() => props.position.startsWith('top'))
 // the bottom for a bottom dock. The store is chronological; we only flip the view.
 const ordered = computed(() => (isTop.value ? [...toasts].reverse() : toasts))
 
+const actionStates = reactive(new Map<string, { action: ToastTextAction; phase: 'pending' | 'success' | 'failure' }>())
+const feedbackTimers = new Map<string, ReturnType<typeof setTimeout>>()
+let disposed = false
+
+function clearActionState(id: string) {
+  clearTimeout(feedbackTimers.get(id))
+  feedbackTimers.delete(id)
+  actionStates.delete(id)
+}
+
+function actionPhase(t: ToastRecord) {
+  const state = actionStates.get(t.id)
+  return state && state.action === t.textAction ? state.phase : undefined
+}
+
+async function runTextAction(t: ToastRecord) {
+  const action = t.textAction
+  if (!action || actionPhase(t) === 'pending') return
+  clearActionState(t.id)
+  actionStates.set(t.id, { action, phase: 'pending' })
+  let succeeded = false
+  try { succeeded = await action.onClick() } catch { /* The local failure label remains available for retry. */ }
+  if (disposed || toasts.find(current => current.id === t.id)?.textAction !== action) return
+  actionStates.set(t.id, { action, phase: succeeded ? 'success' : 'failure' })
+  if (succeeded) feedbackTimers.set(t.id, setTimeout(() => clearActionState(t.id), 1500))
+}
+
+watch(() => toasts.map(t => [t.id, t.textAction] as const), (current) => {
+  for (const [id, state] of actionStates) {
+    if (!current.some(([key, action]) => key === id && action === state.action)) clearActionState(id)
+  }
+})
+
 function onVisibilityChange() {
   if (document.hidden) pauseAll()
   else resumeAll()
 }
 
 onMounted(() => document.addEventListener('visibilitychange', onVisibilityChange))
-onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisibilityChange))
+onBeforeUnmount(() => {
+  disposed = true
+  document.removeEventListener('visibilitychange', onVisibilityChange)
+  for (const id of actionStates.keys()) clearActionState(id)
+})
 </script>
 
 <template>
@@ -75,14 +113,14 @@ onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisibil
         <!--
           Two layout variants — selected purely from data, no CSS hacks needed:
 
-          single  : no description, action optional  → flat row, everything center-aligned
-          rich    : has description                  → icon+× pin to first line (flex-start);
-                                                       body is a column: title → desc → action?
+          single  : no description/text action      → flat row, everything center-aligned
+          rich    : description or text action      → icon+× pin to first line (flex-start);
+                                                       body is a column: title → desc? → text action? → action?
         -->
         <li
           v-for="t in ordered"
           :key="t.id"
-          :class="cn('memoh-toast', t.description ? 'memoh-toast--rich' : 'memoh-toast--single')"
+          :class="cn('memoh-toast', t.description || t.textAction ? 'memoh-toast--rich' : 'memoh-toast--single')"
           :data-variant="t.variant"
           role="status"
           aria-live="polite"
@@ -96,7 +134,7 @@ onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisibil
                Everything in one flat row, vertically centered.
                icon · title · (action) · ×
           ──────────────────────────────────────────────────────────────────────── -->
-          <template v-if="!t.description">
+          <template v-if="!t.description && !t.textAction">
             <component
               :is="semanticIcon[t.variant]"
               v-if="semanticIcon[t.variant]"
@@ -140,9 +178,40 @@ onBeforeUnmount(() => document.removeEventListener('visibilitychange', onVisibil
             />
             <div class="memoh-toast__body">
               <span class="memoh-toast__title">{{ headingFor(t) }}</span>
-              <p class="memoh-toast__desc">
+              <p
+                v-if="t.description"
+                class="memoh-toast__desc"
+              >
                 {{ t.description }}
               </p>
+              <div
+                v-if="t.textAction"
+                class="flex min-w-0 flex-wrap items-center gap-1"
+              >
+                <TextButton
+                  type="button"
+                  class="min-w-0 max-w-full text-caption"
+                  :aria-label="t.textAction.ariaLabel"
+                  :aria-busy="actionPhase(t) === 'pending' || undefined"
+                  @click="runTextAction(t)"
+                >
+                  <span class="min-w-0 break-all whitespace-normal text-left">{{ t.textAction.label }}</span>
+                  <CheckIcon
+                    v-if="actionPhase(t) === 'success'"
+                    aria-hidden="true"
+                  />
+                </TextButton>
+                <span
+                  v-if="actionPhase(t) === 'success'"
+                  role="status"
+                  class="sr-only"
+                >{{ t.textAction.successLabel }}</span>
+                <span
+                  v-else-if="actionPhase(t) === 'failure'"
+                  role="status"
+                  class="text-caption"
+                >{{ t.textAction.failureLabel }}</span>
+              </div>
               <Button
                 v-if="t.action"
                 variant="outline"
diff --git a/src/components/sonner/toast.ts b/src/components/sonner/toast.ts
index ea4f51e..c5366ee 100644
--- a/src/components/sonner/toast.ts
+++ b/src/components/sonner/toast.ts
@@ -13,6 +13,15 @@ export interface ToastAction {
   onClick: () => void
 }
 
+export interface ToastTextAction {
+  label: string
+  ariaLabel?: string
+  /** A local action leaves the notification open and reports its own result. */
+  onClick: () => boolean | Promise<boolean>
+  successLabel: string
+  failureLabel: string
+}
+
 export interface ToastOptions {
   /** Secondary line under the title. */
   description?: string
@@ -20,6 +29,8 @@ export interface ToastOptions {
   duration?: number
   /** Optional trailing action button. */
   action?: ToastAction
+  /** Low-emphasis action under the message, independent of the trailing action. */
+  textAction?: ToastTextAction
   /** Stable id — re-using one updates the existing toast in place. */
   id?: string | number
 }
@@ -32,6 +43,7 @@ export interface ToastRecord {
   title: string
   description?: string
   action?: ToastAction
+  textAction?: ToastTextAction
   /** True when `title` is a synthesized variant heading (the long-blob auto-shape
    *  below), NOT caller copy. `<Toaster>` swaps it for a localized label when one
    *  is supplied via the `headings` prop; the English `title` here is the fallback. */
@@ -157,6 +169,7 @@ function create(variant: ToastVariant, message: string, options?: ToastOptions):
     title,
     description,
     action: options?.action,
+    textAction: options?.textAction,
     autoHeading,
   }
 

From 7053d1ea66d67febf4fc12b07f32a099076a552a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Wed, 16 Sep 2026 00:42:48 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20Toast=20=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E5=8A=A8=E4=BD=9C=E7=BB=84=E4=BB=B6=E5=AF=BC=E5=85=A5?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sonner/Toaster.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sonner/Toaster.vue b/src/components/sonner/Toaster.vue
index 0cf87d4..a770154 100644
--- a/src/components/sonner/Toaster.vue
+++ b/src/components/sonner/Toaster.vue
@@ -3,7 +3,7 @@ import type { Component } from 'vue'
 import { CheckIcon, CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, onMounted, reactive, watch } from 'vue'
 import { Button } from '#/components/button'
-import { TextButton } from '#/components/text-button'
+import { TextButton } from '../text-button'
 import { cn } from '#/lib/utils'
 import { dismiss, pauseAll, resumeAll, toast as toastApi, toasts, type ToastRecord, type ToastTextAction, type ToastVariant } from './toast'
 

From 03de78bcfaa3636103f4bbc5d51008306e5aca5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B8=85=E5=87=A4?= <qingf622@outlook.com>
Date: Wed, 16 Sep 2026 02:07:53 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix(ui):=20=E8=B0=83=E6=95=B4=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E9=80=9A=E7=9F=A5=E5=A4=8D=E5=88=B6=E5=85=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=B9=B6=E5=85=B1=E4=BA=AB=E8=81=8A=E5=A4=A9=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../copy-connected-icon/CopyConnectedIcon.vue | 33 +++++++++
 src/components/copy-connected-icon/index.ts   |  1 +
 src/components/sonner/Toaster.vue             | 70 +++++++++++--------
 src/index.ts                                  |  1 +
 4 files changed, 77 insertions(+), 28 deletions(-)
 create mode 100644 src/components/copy-connected-icon/CopyConnectedIcon.vue
 create mode 100644 src/components/copy-connected-icon/index.ts

diff --git a/src/components/copy-connected-icon/CopyConnectedIcon.vue b/src/components/copy-connected-icon/CopyConnectedIcon.vue
new file mode 100644
index 0000000..55b2773
--- /dev/null
+++ b/src/components/copy-connected-icon/CopyConnectedIcon.vue
@@ -0,0 +1,33 @@
+<!-- Custom copy glyph. lucide's `Copy` draws the back square as a bracket that
+     stops ~4px short of the front square, leaving a visible gap that reads as two
+     disconnected shapes. This redraws the same two-square copy mark in lucide's
+     exact stroke language (24px box, 2px round stroke, currentColor) but runs the
+     bracket's two open ends onto the front square's left and top edges, so the
+     back square reads as continuously joined to the front one. Single <svg> root,
+     so it inherits the button's [&_svg] sizing and any passed size-* class. -->
+<template>
+  <svg
+    data-slot="copy-connected-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    :stroke-width="strokeWidth"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <rect
+      width="14"
+      height="14"
+      x="8"
+      y="8"
+      rx="3"
+    />
+    <path d="M8 16H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{ strokeWidth?: number }>(), { strokeWidth: 2 })
+</script>
diff --git a/src/components/copy-connected-icon/index.ts b/src/components/copy-connected-icon/index.ts
new file mode 100644
index 0000000..41a7c07
--- /dev/null
+++ b/src/components/copy-connected-icon/index.ts
@@ -0,0 +1 @@
+export { default as CopyConnectedIcon } from './CopyConnectedIcon.vue'
diff --git a/src/components/sonner/Toaster.vue b/src/components/sonner/Toaster.vue
index a770154..dfbab3d 100644
--- a/src/components/sonner/Toaster.vue
+++ b/src/components/sonner/Toaster.vue
@@ -3,7 +3,7 @@ import type { Component } from 'vue'
 import { CheckIcon, CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon, XIcon } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, onMounted, reactive, watch } from 'vue'
 import { Button } from '#/components/button'
-import { TextButton } from '../text-button'
+import { CopyConnectedIcon } from '../copy-connected-icon'
 import { cn } from '#/lib/utils'
 import { dismiss, pauseAll, resumeAll, toast as toastApi, toasts, type ToastRecord, type ToastTextAction, type ToastVariant } from './toast'
 
@@ -115,7 +115,7 @@ onBeforeUnmount(() => {
 
           single  : no description/text action      → flat row, everything center-aligned
           rich    : description or text action      → icon+× pin to first line (flex-start);
-                                                       body is a column: title → desc? → text action? → action?
+                                                       text action sits below × in the right column
         -->
         <li
           v-for="t in ordered"
@@ -162,11 +162,11 @@ onBeforeUnmount(() => {
             </Button>
           </template>
 
-          <!-- ── RICH (has description) ─────────────────────────────────────────
+          <!-- ── RICH (has description or text action) ──────────────────────────
                icon and × pin to the top (first-line height).
                Action always goes BELOW the desc — never inline with the title.
                icon · title               · ×
-                       desc
+                       desc / ID          · (copy)
                        (action)
           ──────────────────────────────────────────────────────────────────────── -->
           <template v-else>
@@ -186,21 +186,9 @@ onBeforeUnmount(() => {
               </p>
               <div
                 v-if="t.textAction"
-                class="flex min-w-0 flex-wrap items-center gap-1"
+                class="min-w-0 text-body text-muted-foreground"
               >
-                <TextButton
-                  type="button"
-                  class="min-w-0 max-w-full text-caption"
-                  :aria-label="t.textAction.ariaLabel"
-                  :aria-busy="actionPhase(t) === 'pending' || undefined"
-                  @click="runTextAction(t)"
-                >
-                  <span class="min-w-0 break-all whitespace-normal text-left">{{ t.textAction.label }}</span>
-                  <CheckIcon
-                    v-if="actionPhase(t) === 'success'"
-                    aria-hidden="true"
-                  />
-                </TextButton>
+                <span class="block min-w-0 select-text break-all whitespace-normal">{{ t.textAction.label }}</span>
                 <span
                   v-if="actionPhase(t) === 'success'"
                   role="status"
@@ -209,7 +197,7 @@ onBeforeUnmount(() => {
                 <span
                   v-else-if="actionPhase(t) === 'failure'"
                   role="status"
-                  class="text-caption"
+                  class="text-body"
                 >{{ t.textAction.failureLabel }}</span>
               </div>
               <Button
@@ -222,15 +210,41 @@ onBeforeUnmount(() => {
                 {{ t.action.label }}
               </Button>
             </div>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              class="memoh-toast__close memoh-toast__close--rich"
-              aria-label="Dismiss notification"
-              @click="dismiss(t.id)"
-            >
-              <XIcon class="size-4" />
-            </Button>
+            <div class="flex shrink-0 flex-col items-center">
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                class="memoh-toast__close memoh-toast__close--rich"
+                aria-label="Dismiss notification"
+                @click="dismiss(t.id)"
+              >
+                <XIcon class="size-4" />
+              </Button>
+              <Button
+                v-if="t.textAction"
+                type="button"
+                variant="ghost"
+                tone="muted"
+                size="icon-sm"
+                :aria-label="t.textAction.ariaLabel"
+                :title="t.textAction.ariaLabel"
+                :aria-busy="actionPhase(t) === 'pending' || undefined"
+                @click="runTextAction(t)"
+              >
+                <CheckIcon
+                  v-if="actionPhase(t) === 'success'"
+                  class="size-[18px]"
+                  :stroke-width="1.75"
+                  aria-hidden="true"
+                />
+                <CopyConnectedIcon
+                  v-else
+                  class="size-[18px] -scale-x-100"
+                  :stroke-width="1.75"
+                  aria-hidden="true"
+                />
+              </Button>
+            </div>
           </template>
         </li>
       </TransitionGroup>
diff --git a/src/index.ts b/src/index.ts
index c3266c4..3949377 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,6 +18,7 @@ export { useClipboard } from './lib/clipboard'
 export * from './components/confirm-delete-dialog/index'
 export * from './components/confirm-popover/index'
 export * from './components/context-menu/index'
+export * from './components/copy-connected-icon/index'
 export * from './components/date-range-picker/index'
 export * from './components/device-code-panel/index'
 export * from './components/dialog/index'