@dumiflex/wp-kit 0.3.0 → 0.4.0

package/src/Textarea.vue

@@ -1,57 +1,57 @@
-<script setup lang="ts">
-import { nextTick, ref, watch } from "vue";
-
-interface Props {
-  modelValue: string;
-  rows?: number | undefined;
-  placeholder?: string | undefined;
-  autoResize?: boolean | undefined;
-  disabled?: boolean | undefined;
-  error?: boolean | undefined;
-  id?: string | undefined;
-  ariaLabel?: string | undefined;
-}
-const props = withDefaults(defineProps<Props>(), { rows: 3 });
-
-const emit = defineEmits<{
-  (e: "update:modelValue", v: string): void;
-  (e: "blur", evt: FocusEvent): void;
-  (e: "focus", evt: FocusEvent): void;
-}>();
-
-const taRef = ref<HTMLTextAreaElement | null>(null);
-
-function autosize() {
-  if (!props.autoResize) return;
-  const el = taRef.value;
-  if (!el) return;
-  el.style.height = "auto";
-  el.style.height = `${el.scrollHeight}px`;
-}
-
-function onInput(e: Event) {
-  emit("update:modelValue", (e.target as HTMLTextAreaElement).value);
-  if (props.autoResize) nextTick(autosize);
-}
-
-watch(() => props.modelValue, () => {
-  if (props.autoResize) nextTick(autosize);
-});
-</script>
-
-<template>
-  <textarea
-    :id="id"
-    ref="taRef"
-    class="wp-textarea"
-    :rows="rows"
-    :value="modelValue"
-    :placeholder="placeholder"
-    :disabled="disabled"
-    :aria-label="ariaLabel"
-    :aria-invalid="error || undefined"
-    @input="onInput"
-    @blur="(e) => emit('blur', e)"
-    @focus="(e) => emit('focus', e)"
-  />
-</template>
+<script setup lang="ts">
+import { nextTick, ref, watch } from "vue";
+
+interface Props {
+  modelValue: string;
+  rows?: number | undefined;
+  placeholder?: string | undefined;
+  autoResize?: boolean | undefined;
+  disabled?: boolean | undefined;
+  error?: boolean | undefined;
+  id?: string | undefined;
+  ariaLabel?: string | undefined;
+}
+const props = withDefaults(defineProps<Props>(), { rows: 3 });
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: string): void;
+  (e: "blur", evt: FocusEvent): void;
+  (e: "focus", evt: FocusEvent): void;
+}>();
+
+const taRef = ref<HTMLTextAreaElement | null>(null);
+
+function autosize() {
+  if (!props.autoResize) return;
+  const el = taRef.value;
+  if (!el) return;
+  el.style.height = "auto";
+  el.style.height = `${el.scrollHeight}px`;
+}
+
+function onInput(e: Event) {
+  emit("update:modelValue", (e.target as HTMLTextAreaElement).value);
+  if (props.autoResize) nextTick(autosize);
+}
+
+watch(() => props.modelValue, () => {
+  if (props.autoResize) nextTick(autosize);
+});
+</script>
+
+<template>
+  <textarea
+    :id="id"
+    ref="taRef"
+    class="wp-textarea"
+    :rows="rows"
+    :value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    :aria-invalid="error || undefined"
+    @input="onInput"
+    @blur="(e) => emit('blur', e)"
+    @focus="(e) => emit('focus', e)"
+  />
+</template>

package/src/Timeline.vue

@@ -1,92 +1,92 @@
-<script setup lang="ts">
-/**
- * Timeline: events in order, each a dot on one line with its time, title
- * and an optional body (History, an AI trace, a pack build log). Works on
- * the canvas and in the manager.
- *
- *   <Timeline :items="[{ id: 1, title: 'Saved Hair colour', time: '5 min ago', tone: 'success', icon: 'pi-check' }]" />
- *   <Timeline :items="steps"><template #body="{ item }"><CodeBlock :code="item.args" bare /></template></Timeline>
- *
- * It is an ordered list. `#body` and `#time` slots let a screen draw its own
- * body (a diff, a code block) or a RelativeDate. The last item can be
- * `pending` (a pulsing dot) while a job is still running.
- */
-export interface TimelineItem {
-  id: string | number;
-  title: string;
-  /** Shown after the title, e.g. "5 min ago". */
-  time?: string | undefined;
-  /** A line or two of text under the title. */
-  body?: string | undefined;
-  tone?: "neutral" | "info" | "success" | "warn" | "danger" | "accent" | undefined;
-  /** A PrimeIcons class inside the dot. */
-  icon?: string | undefined;
-  /** Still running: the dot pulses. */
-  pending?: boolean | undefined;
-}
-
-withDefaults(defineProps<{
-  items: TimelineItem[];
-  size?: "sm" | "md" | undefined;
-  ariaLabel?: string | undefined;
-}>(), { size: "md", ariaLabel: undefined });
-</script>
-
-<template>
-  <ol class="wp-timeline" :data-size="size" :aria-label="ariaLabel">
-    <li
-      v-for="it in items"
-      :key="it.id"
-      class="wp-timeline__item"
-      :data-tone="it.tone ?? 'neutral'"
-      :data-pending="it.pending || undefined"
-      :data-icon="it.icon ? 'true' : undefined"
-    >
-      <span class="wp-timeline__dot" aria-hidden="true"><i v-if="it.icon" class="pi" :class="it.icon" /></span>
-      <div class="wp-timeline__main">
-        <div class="wp-timeline__head">
-          <span class="wp-timeline__title">{{ it.title }}</span>
-          <span v-if="it.time || $slots.time" class="wp-timeline__time"><slot name="time" :item="it">{{ it.time }}</slot></span>
-        </div>
-        <div v-if="it.body || $slots.body" class="wp-timeline__body"><slot name="body" :item="it">{{ it.body }}</slot></div>
-      </div>
-    </li>
-  </ol>
-</template>
-
-<style scoped>
-.wp-timeline { --_dot: 20px; margin: 0; padding: 0; list-style: none; font: 400 var(--wp-text-sm)/1.45 var(--wp-font-sans); min-width: 0; }
-.wp-timeline[data-size="sm"] { --_dot: 16px; font-size: var(--wp-text-xs); }
-.wp-timeline__item { --_tone: var(--wp-text-dim); position: relative; display: flex; gap: var(--wp-space-4); padding-bottom: var(--wp-space-5); }
-.wp-timeline[data-size="sm"] .wp-timeline__item { gap: var(--wp-space-3); padding-bottom: var(--wp-space-4); }
-.wp-timeline__item:last-child { padding-bottom: 0; }
-.wp-timeline__item[data-tone="info"] { --_tone: var(--wp-info); }
-.wp-timeline__item[data-tone="success"] { --_tone: var(--wp-success); }
-.wp-timeline__item[data-tone="warn"] { --_tone: var(--wp-warn); }
-.wp-timeline__item[data-tone="danger"] { --_tone: var(--wp-danger); }
-.wp-timeline__item[data-tone="accent"] { --_tone: var(--wp-accent); }
-.wp-timeline__item:not(:last-child)::before {
-  content: ""; position: absolute; top: calc(var(--_dot) + 2px); bottom: 2px; left: calc(var(--_dot) / 2 - 1px);
-  width: 2px; border-radius: min(1px, var(--wp-radius-cap, 999px)); background: var(--wp-border);
-}
-.wp-timeline__dot {
-  position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box;
-  width: var(--_dot); height: var(--_dot); margin-top: 1px; border-radius: 50%; /* round: timeline dot */
-  border: 2px solid var(--_tone); background: var(--wp-bg-1); color: var(--_tone);
-}
-.wp-timeline__item:not([data-icon]) .wp-timeline__dot { transform: scale(0.6); background: var(--_tone); }
-.wp-timeline__dot .pi { font-size: calc(var(--_dot) * 0.45); }
-.wp-timeline__item[data-pending] .wp-timeline__dot::after {
-  content: ""; position: absolute; inset: -4px; border-radius: 50%; /* round: timeline dot ring */ border: 2px solid var(--_tone);
-  animation: wp-timeline-pulse 1.6s ease-out infinite;
-}
-@keyframes wp-timeline-pulse { from { opacity: 0.7; transform: scale(0.8); } to { opacity: 0; transform: scale(1.4); } }
-.wp-timeline__main { flex: 1; min-width: 0; }
-.wp-timeline__head { display: flex; align-items: baseline; gap: var(--wp-space-3); flex-wrap: wrap; }
-.wp-timeline__title { color: var(--wp-text); font-weight: 500; }
-.wp-timeline__time { color: var(--wp-text-dim); font-size: var(--wp-text-xs); font-variant-numeric: tabular-nums; }
-.wp-timeline__body { margin-top: 2px; color: var(--wp-text-muted); overflow-wrap: anywhere; }
-@media (prefers-reduced-motion: reduce) {
-  .wp-timeline__item[data-pending] .wp-timeline__dot::after { animation: none; display: none; }
-}
-</style>
+<script setup lang="ts">
+/**
+ * Timeline: events in order, each a dot on one line with its time, title
+ * and an optional body (History, an AI trace, a pack build log). Works on
+ * the canvas and in the manager.
+ *
+ *   <Timeline :items="[{ id: 1, title: 'Saved Hair colour', time: '5 min ago', tone: 'success', icon: 'pi-check' }]" />
+ *   <Timeline :items="steps"><template #body="{ item }"><CodeBlock :code="item.args" bare /></template></Timeline>
+ *
+ * It is an ordered list. `#body` and `#time` slots let a screen draw its own
+ * body (a diff, a code block) or a RelativeDate. The last item can be
+ * `pending` (a pulsing dot) while a job is still running.
+ */
+export interface TimelineItem {
+  id: string | number;
+  title: string;
+  /** Shown after the title, e.g. "5 min ago". */
+  time?: string | undefined;
+  /** A line or two of text under the title. */
+  body?: string | undefined;
+  tone?: "neutral" | "info" | "success" | "warn" | "danger" | "accent" | undefined;
+  /** A PrimeIcons class inside the dot. */
+  icon?: string | undefined;
+  /** Still running: the dot pulses. */
+  pending?: boolean | undefined;
+}
+
+withDefaults(defineProps<{
+  items: TimelineItem[];
+  size?: "sm" | "md" | undefined;
+  ariaLabel?: string | undefined;
+}>(), { size: "md", ariaLabel: undefined });
+</script>
+
+<template>
+  <ol class="wp-timeline" :data-size="size" :aria-label="ariaLabel">
+    <li
+      v-for="it in items"
+      :key="it.id"
+      class="wp-timeline__item"
+      :data-tone="it.tone ?? 'neutral'"
+      :data-pending="it.pending || undefined"
+      :data-icon="it.icon ? 'true' : undefined"
+    >
+      <span class="wp-timeline__dot" aria-hidden="true"><i v-if="it.icon" class="pi" :class="it.icon" /></span>
+      <div class="wp-timeline__main">
+        <div class="wp-timeline__head">
+          <span class="wp-timeline__title">{{ it.title }}</span>
+          <span v-if="it.time || $slots.time" class="wp-timeline__time"><slot name="time" :item="it">{{ it.time }}</slot></span>
+        </div>
+        <div v-if="it.body || $slots.body" class="wp-timeline__body"><slot name="body" :item="it">{{ it.body }}</slot></div>
+      </div>
+    </li>
+  </ol>
+</template>
+
+<style scoped>
+.wp-timeline { --_dot: 20px; margin: 0; padding: 0; list-style: none; font: 400 var(--wp-text-sm)/1.45 var(--wp-font-sans); min-width: 0; }
+.wp-timeline[data-size="sm"] { --_dot: 16px; font-size: var(--wp-text-xs); }
+.wp-timeline__item { --_tone: var(--wp-text-dim); position: relative; display: flex; gap: var(--wp-space-4); padding-bottom: var(--wp-space-5); }
+.wp-timeline[data-size="sm"] .wp-timeline__item { gap: var(--wp-space-3); padding-bottom: var(--wp-space-4); }
+.wp-timeline__item:last-child { padding-bottom: 0; }
+.wp-timeline__item[data-tone="info"] { --_tone: var(--wp-info); }
+.wp-timeline__item[data-tone="success"] { --_tone: var(--wp-success); }
+.wp-timeline__item[data-tone="warn"] { --_tone: var(--wp-warn); }
+.wp-timeline__item[data-tone="danger"] { --_tone: var(--wp-danger); }
+.wp-timeline__item[data-tone="accent"] { --_tone: var(--wp-accent); }
+.wp-timeline__item:not(:last-child)::before {
+  content: ""; position: absolute; top: calc(var(--_dot) + 2px); bottom: 2px; left: calc(var(--_dot) / 2 - 1px);
+  width: 2px; border-radius: min(1px, var(--wp-radius-cap, 999px)); background: var(--wp-border);
+}
+.wp-timeline__dot {
+  position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box;
+  width: var(--_dot); height: var(--_dot); margin-top: 1px; border-radius: 50%; /* round: timeline dot */
+  border: 2px solid var(--_tone); background: var(--wp-bg-1); color: var(--_tone);
+}
+.wp-timeline__item:not([data-icon]) .wp-timeline__dot { transform: scale(0.6); background: var(--_tone); }
+.wp-timeline__dot .pi { font-size: calc(var(--_dot) * 0.45); }
+.wp-timeline__item[data-pending] .wp-timeline__dot::after {
+  content: ""; position: absolute; inset: -4px; border-radius: 50%; /* round: timeline dot ring */ border: 2px solid var(--_tone);
+  animation: wp-timeline-pulse 1.6s ease-out infinite;
+}
+@keyframes wp-timeline-pulse { from { opacity: 0.7; transform: scale(0.8); } to { opacity: 0; transform: scale(1.4); } }
+.wp-timeline__main { flex: 1; min-width: 0; }
+.wp-timeline__head { display: flex; align-items: baseline; gap: var(--wp-space-3); flex-wrap: wrap; }
+.wp-timeline__title { color: var(--wp-text); font-weight: 500; }
+.wp-timeline__time { color: var(--wp-text-dim); font-size: var(--wp-text-xs); font-variant-numeric: tabular-nums; }
+.wp-timeline__body { margin-top: 2px; color: var(--wp-text-muted); overflow-wrap: anywhere; }
+@media (prefers-reduced-motion: reduce) {
+  .wp-timeline__item[data-pending] .wp-timeline__dot::after { animation: none; display: none; }
+}
+</style>

package/src/ToastCard.vue

@@ -1,119 +1,119 @@
-<script setup lang="ts">
-/**
- * One toast: the look both toast stacks share.
- *
- * The manager (`ui/ToastHost.vue`, fed by `useToast()`) and the canvas
- * (`shared/Toast.vue`, fed by `toast-store`) used to draw toasts two ways:
- * different surfaces, borders, icons and action buttons. Now each host keeps
- * only its own store and its own place on screen, and renders this card.
- * It reads only SHARED_TOKENS, so it wears the colours of the side it is on.
- *
- * `tone` follows the kit's names; the canvas store's `warning` maps to
- * `warn` in its host.
- */
-const props = defineProps<{
-  tone: "info" | "success" | "warn" | "error";
-  summary: string;
-  detail?: string | undefined;
-  /** Label of the inline action (Undo, Open…); emits `action`. */
-  actionLabel?: string | undefined;
-}>();
-
-const emit = defineEmits<{ action: []; dismiss: [] }>();
-
-const ICONS = {
-  info: "pi-info-circle",
-  success: "pi-check-circle",
-  warn: "pi-exclamation-triangle",
-  error: "pi-times-circle",
-} as const;
-</script>
-
-<template>
-  <div :class="['wp-toast', `wp-toast--${props.tone}`]" role="status" data-test="toast">
-    <i :class="['pi', ICONS[props.tone], 'wp-toast__icon']" aria-hidden="true" />
-    <div class="wp-toast__text">
-      <div class="wp-toast__summary">{{ summary }}</div>
-      <div v-if="detail" class="wp-toast__detail">{{ detail }}</div>
-    </div>
-    <button
-      v-if="actionLabel"
-      type="button"
-      class="wp-toast__action"
-      data-test="toast-action"
-      @click="emit('action')"
-    >{{ actionLabel }}</button>
-    <button
-      type="button"
-      class="wp-toast__close"
-      aria-label="Dismiss"
-      @click="emit('dismiss')"
-    ><i class="pi pi-times" aria-hidden="true" /></button>
-  </div>
-</template>
-
-<style scoped>
-.wp-toast {
-  --toast-tone: var(--wp-info);
-  pointer-events: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--wp-space-4);
-  min-width: 220px;
-  max-width: 420px;
-  padding: var(--wp-space-4) var(--wp-space-4) var(--wp-space-4) var(--wp-space-5);
-  /* Slightly see-through with a blur, so it reads as floating over
-     whatever is underneath without a heavy shadow. */
-  background: color-mix(in oklab, var(--wp-bg-3) 94%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid var(--wp-border-strong);
-  border-left: 3px solid var(--toast-tone);
-  border-radius: var(--wp-radius-md);
-  box-shadow: var(--wp-shadow-md);
-  color: var(--wp-text);
-  font-family: var(--wp-font-sans);
-  font-size: var(--wp-text-sm);
-  line-height: 1.4;
-}
-.wp-toast--success { --toast-tone: var(--wp-success); }
-.wp-toast--warn { --toast-tone: var(--wp-warn); }
-.wp-toast--error { --toast-tone: var(--wp-danger); }
-
-.wp-toast__icon { flex-shrink: 0; font-size: 14px; color: var(--toast-tone); }
-.wp-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.wp-toast__summary { font-weight: 600; }
-.wp-toast__detail { margin-top: 1px; color: var(--wp-text-muted); font-size: var(--wp-text-xs); }
-
-.wp-toast__action {
-  flex-shrink: 0;
-  height: var(--wp-control-h-sm);
-  padding: 0 var(--wp-space-4);
-  background: transparent;
-  border: 1px solid var(--wp-border-strong);
-  border-radius: var(--wp-radius-sm);
-  color: var(--wp-text);
-  font: 600 var(--wp-text-xs) var(--wp-font-sans);
-  cursor: pointer;
-  transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick);
-}
-.wp-toast__action:hover { background: var(--wp-bg-4); border-color: var(--wp-accent-500); }
-
-.wp-toast__close {
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  background: none;
-  border: 0;
-  border-radius: var(--wp-radius-sm);
-  color: var(--wp-text-dim);
-  cursor: pointer;
-}
-.wp-toast__close .pi { font-size: 10px; }
-.wp-toast__close:hover { color: var(--wp-text); background: var(--wp-bg-4); }
-.wp-toast__action:focus-visible,
-.wp-toast__close:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
-</style>
+<script setup lang="ts">
+/**
+ * One toast: the look both toast stacks share.
+ *
+ * The manager (`ui/ToastHost.vue`, fed by `useToast()`) and the canvas
+ * (`shared/Toast.vue`, fed by `toast-store`) used to draw toasts two ways:
+ * different surfaces, borders, icons and action buttons. Now each host keeps
+ * only its own store and its own place on screen, and renders this card.
+ * It reads only SHARED_TOKENS, so it wears the colours of the side it is on.
+ *
+ * `tone` follows the kit's names; the canvas store's `warning` maps to
+ * `warn` in its host.
+ */
+const props = defineProps<{
+  tone: "info" | "success" | "warn" | "error";
+  summary: string;
+  detail?: string | undefined;
+  /** Label of the inline action (Undo, Open…); emits `action`. */
+  actionLabel?: string | undefined;
+}>();
+
+const emit = defineEmits<{ action: []; dismiss: [] }>();
+
+const ICONS = {
+  info: "pi-info-circle",
+  success: "pi-check-circle",
+  warn: "pi-exclamation-triangle",
+  error: "pi-times-circle",
+} as const;
+</script>
+
+<template>
+  <div :class="['wp-toast', `wp-toast--${props.tone}`]" role="status" data-test="toast">
+    <i :class="['pi', ICONS[props.tone], 'wp-toast__icon']" aria-hidden="true" />
+    <div class="wp-toast__text">
+      <div class="wp-toast__summary">{{ summary }}</div>
+      <div v-if="detail" class="wp-toast__detail">{{ detail }}</div>
+    </div>
+    <button
+      v-if="actionLabel"
+      type="button"
+      class="wp-toast__action"
+      data-test="toast-action"
+      @click="emit('action')"
+    >{{ actionLabel }}</button>
+    <button
+      type="button"
+      class="wp-toast__close"
+      aria-label="Dismiss"
+      @click="emit('dismiss')"
+    ><i class="pi pi-times" aria-hidden="true" /></button>
+  </div>
+</template>
+
+<style scoped>
+.wp-toast {
+  --toast-tone: var(--wp-info);
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--wp-space-4);
+  min-width: 220px;
+  max-width: 420px;
+  padding: var(--wp-space-4) var(--wp-space-4) var(--wp-space-4) var(--wp-space-5);
+  /* Slightly see-through with a blur, so it reads as floating over
+     whatever is underneath without a heavy shadow. */
+  background: color-mix(in oklab, var(--wp-bg-3) 94%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--wp-border-strong);
+  border-left: 3px solid var(--toast-tone);
+  border-radius: var(--wp-radius-md);
+  box-shadow: var(--wp-shadow-md);
+  color: var(--wp-text);
+  font-family: var(--wp-font-sans);
+  font-size: var(--wp-text-sm);
+  line-height: 1.4;
+}
+.wp-toast--success { --toast-tone: var(--wp-success); }
+.wp-toast--warn { --toast-tone: var(--wp-warn); }
+.wp-toast--error { --toast-tone: var(--wp-danger); }
+
+.wp-toast__icon { flex-shrink: 0; font-size: 14px; color: var(--toast-tone); }
+.wp-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.wp-toast__summary { font-weight: 600; }
+.wp-toast__detail { margin-top: 1px; color: var(--wp-text-muted); font-size: var(--wp-text-xs); }
+
+.wp-toast__action {
+  flex-shrink: 0;
+  height: var(--wp-control-h-sm);
+  padding: 0 var(--wp-space-4);
+  background: transparent;
+  border: 1px solid var(--wp-border-strong);
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text);
+  font: 600 var(--wp-text-xs) var(--wp-font-sans);
+  cursor: pointer;
+  transition: background var(--wp-motion-quick), border-color var(--wp-motion-quick);
+}
+.wp-toast__action:hover { background: var(--wp-bg-4); border-color: var(--wp-accent-500); }
+
+.wp-toast__close {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: var(--wp-radius-sm);
+  color: var(--wp-text-dim);
+  cursor: pointer;
+}
+.wp-toast__close .pi { font-size: 10px; }
+.wp-toast__close:hover { color: var(--wp-text); background: var(--wp-bg-4); }
+.wp-toast__action:focus-visible,
+.wp-toast__close:focus-visible { outline: none; box-shadow: var(--wp-focus-ring); }
+</style>

package/src/ToastHost.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-/**
- * The manager's toast stack (bottom right). The toast itself is the shared
- * ToastCard, the same one the canvas stack draws.
- */
-import { useToast } from "./useToast";
-import ToastCard from "./ToastCard.vue";
-
-const { toasts, push, dismiss } = useToast();
-
-async function runAction(id: string, handler: () => void | Promise<void>) {
-  try {
-    await handler();
-  } catch (e) {
-    push({
-      severity: "error",
-      summary: "Undo failed",
-      detail: e instanceof Error ? e.message : String(e),
-      life: 4000,
-    });
-  } finally {
-    dismiss(id);
-  }
-}
-</script>
-
-<template>
-  <div class="wp-toast-stack" aria-live="polite" aria-atomic="true">
-    <ToastCard
-      v-for="t in toasts"
-      :key="t.id"
-      :tone="t.severity"
-      :summary="t.summary"
-      :detail="t.detail"
-      :action-label="t.action?.label"
-      @action="t.action && runAction(t.id, t.action.run)"
-      @dismiss="dismiss(t.id)"
-    />
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * The manager's toast stack (bottom right). The toast itself is the shared
+ * ToastCard, the same one the canvas stack draws.
+ */
+import { useToast } from "./useToast";
+import ToastCard from "./ToastCard.vue";
+
+const { toasts, push, dismiss } = useToast();
+
+async function runAction(id: string, handler: () => void | Promise<void>) {
+  try {
+    await handler();
+  } catch (e) {
+    push({
+      severity: "error",
+      summary: "Undo failed",
+      detail: e instanceof Error ? e.message : String(e),
+      life: 4000,
+    });
+  } finally {
+    dismiss(id);
+  }
+}
+</script>
+
+<template>
+  <div class="wp-toast-stack" aria-live="polite" aria-atomic="true">
+    <ToastCard
+      v-for="t in toasts"
+      :key="t.id"
+      :tone="t.severity"
+      :summary="t.summary"
+      :detail="t.detail"
+      :action-label="t.action?.label"
+      @action="t.action && runAction(t.id, t.action.run)"
+      @dismiss="dismiss(t.id)"
+    />
+  </div>
+</template>