@maildeno/editor 0.4.6 → 0.4.7

package/dist/SavedRowsPanel-CF-7R3q_.js

@@ -0,0 +1,492 @@
+import { I as ve, V as fe, h as ge, n as xe } from "./useEmailBuilder-CjJoxzTi.js";
+import { d as be, i as X, l as he, p as we, r as ye, s as ke } from "./useToast-DeNMwkP3.js";
+import { t as _e } from "./_plugin-vue_export-helper-Dj7HTbfw.js";
+import { Fragment as $, Transition as Ce, TransitionGroup as Re, computed as R, createBlock as H, createCommentVNode as G, createElementBlock as d, createElementVNode as t, createTextVNode as N, createVNode as O, defineAsyncComponent as Z, defineComponent as U, nextTick as $e, normalizeClass as ee, normalizeStyle as I, onBeforeUnmount as Se, onMounted as ne, openBlock as a, ref as h, renderList as z, toDisplayString as M, unref as D, vModelText as Pe, watch as W, withCtx as te, withDirectives as Ie, withKeys as re, withModifiers as j } from "vue";
+var De = {
+  key: 1,
+  style: {
+    height: "4px",
+    width: "100%"
+  }
+}, Te = /* @__PURE__ */ U({
+  __name: "RowPreviewChildren",
+  props: {
+    children: {},
+    scale: {},
+    depth: {}
+  },
+  setup(m) {
+    const w = Z(() => import("./RowPreviewRow-B91YPfoz.js")), k = Z(() => import("./RowPreviewLegacyComponent-3QuwvWmT.js"));
+    function f(v) {
+      const g = v?.backgroundGradient;
+      if (g?.useGradient === !0 && Array.isArray(g?.gradient?.colors) && g.gradient.colors.length >= 2) {
+        const { type: c, direction: _, colors: T } = g.gradient, S = T.map((r) => `${r.color} ${r.position}%`).join(", ");
+        return c === "radial" ? `radial-gradient(circle at center, ${S})` : `linear-gradient(${_}, ${S})`;
+      }
+      return v?.backgroundColor ?? v?.props?.backgroundColor ?? "transparent";
+    }
+    function p(v) {
+      return v.height ?? v.props?.height ?? 8;
+    }
+    return (v, g) => (a(!0), d($, null, z(m.children, (c, _) => (a(), d($, { key: c.id }, [(m.depth ?? 0) < 5 ? (a(), d($, { key: 0 }, [c.type === "row" ? (a(), H(D(w), {
+      key: 0,
+      row: c,
+      scale: m.scale,
+      depth: (m.depth ?? 0) + 1
+    }, null, 8, [
+      "row",
+      "scale",
+      "depth"
+    ])) : c.type === "row-spacer" ? (a(), d("div", {
+      key: 1,
+      style: I({
+        width: "100%",
+        height: p(c) + "px",
+        background: f(c),
+        flexShrink: "0"
+      })
+    }, null, 4)) : c.type === "component" ? (a(), H(D(k), {
+      key: 2,
+      comp: {
+        ...c,
+        type: c.componentType ?? c.type
+      },
+      scale: m.scale
+    }, null, 8, ["comp", "scale"])) : (a(), H(D(k), {
+      key: 3,
+      comp: c,
+      scale: m.scale
+    }, null, 8, ["comp", "scale"]))], 64)) : (a(), d("div", De))], 64))), 128));
+  }
+}), Fe = Te, Me = {
+  key: 0,
+  class: "w-full border border-dashed border-(--md-border) rounded",
+  style: { "min-height": "10px" }
+}, je = /* @__PURE__ */ U({
+  __name: "RowPreview",
+  props: {
+    row: {},
+    scale: {}
+  },
+  setup(m) {
+    const w = m, { WEB_SAFE_FONTS: k, FONTS_WITH_ITALICS: f, DEFAULT_WEIGHTS: p } = ge(), v = (r) => {
+      const i = r?.backgroundGradient;
+      if (i?.useGradient === !0 && Array.isArray(i?.gradient?.colors) && i.gradient.colors.length >= 2) {
+        const { type: l, direction: u, colors: x } = i.gradient, b = x.map((y) => `${y.color} ${y.position}%`).join(", ");
+        return l === "radial" ? `radial-gradient(circle at center, ${b})` : `linear-gradient(${u}, ${b})`;
+      }
+      return r?.backgroundColor || "transparent";
+    }, g = (r) => {
+      if (f.has(r)) {
+        const i = p.map((u) => `0,${u}`), l = p.map((u) => `1,${u}`);
+        return `ital,wght@${[...i, ...l].join(";")}`;
+      }
+      return `wght@${p.join(";")}`;
+    }, c = (r) => {
+      if (!r || typeof document > "u" || k.has(r)) return;
+      const i = `https://fonts.googleapis.com/css2?family=${r.trim().replace(/\s+/g, "+")}:${g(r)}&display=swap`;
+      if (!document.querySelector(`link[href="${i}"]`)) {
+        const l = document.createElement("link");
+        l.rel = "stylesheet", l.href = i, document.head.appendChild(l);
+      }
+    }, _ = () => {
+      function r(i) {
+        for (const l of i) if (l.type === "row") for (const u of l.columns ?? []) r(u.children ?? u.components ?? []);
+        else {
+          const u = l.props;
+          if (!u?.fontFamily) continue;
+          const x = l.componentType ?? l.type;
+          [
+            "heading",
+            "paragraph",
+            "list",
+            "menu",
+            "button",
+            "anchor"
+          ].includes(x) && c(u.fontFamily);
+        }
+      }
+      for (const i of w.row.columns ?? []) r(i.children ?? i.components ?? []);
+    };
+    W(() => w.row, () => _(), {
+      deep: !0,
+      immediate: !0
+    }), ne(() => _());
+    const T = R(() => {
+      const r = w.row, i = {
+        display: "flex",
+        flexDirection: "row",
+        background: v(r),
+        padding: `${r.padding?.top ?? 0}px ${r.padding?.right ?? 0}px ${r.padding?.bottom ?? 0}px ${r.padding?.left ?? 0}px`,
+        alignItems: "stretch",
+        border: `${r.border?.width ?? 0}px ${r.border?.style ?? "solid"} ${r.border?.color ?? "transparent"}`,
+        borderRadius: `${r.border?.radius ?? 0}px`,
+        gap: `${r.gap ?? 0}px`
+      };
+      return r.backgroundImage && (i.backgroundImage = `url(${r.backgroundImage})`, i.backgroundSize = r.backgroundSize || "cover", i.backgroundPosition = r.backgroundPosition || "center center"), i;
+    });
+    function S(r, i) {
+      const l = {
+        top: "flex-start",
+        middle: "center",
+        bottom: "flex-end"
+      }, u = r.width ?? 100, x = i?.columns?.length || 1, b = i?.gap ?? 0, y = x > 1 ? b * (x - 1) / x : 0, F = y > 0 ? `calc(${u}% - ${y}px)` : `${u}%`, C = {
+        flex: `0 0 ${F}`,
+        width: F,
+        maxWidth: F,
+        boxSizing: "border-box",
+        background: v(r),
+        padding: `${r.padding?.top ?? 10}px ${r.padding?.right ?? 10}px ${r.padding?.bottom ?? 10}px ${r.padding?.left ?? 10}px`,
+        border: `${r.border?.width ?? 0}px ${r.border?.style ?? "solid"} ${r.border?.color ?? "transparent"}`,
+        borderRadius: `${r.border?.radius ?? 0}px`,
+        overflow: "hidden",
+        minWidth: "0",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: l[r.verticalAlign] || "flex-start"
+      };
+      return r.backgroundImage && (C.backgroundImage = `url(${r.backgroundImage})`, C.backgroundSize = r.backgroundSize || "cover", C.backgroundPosition = r.backgroundPosition || "center center", C.minHeight = "14px"), C;
+    }
+    return (r, i) => (a(), d("div", {
+      style: I(T.value),
+      class: "flex w-full pointer-events-none select-none"
+    }, [(a(!0), d($, null, z(m.row.columns, (l) => (a(), d("div", {
+      key: l.id,
+      style: I(S(l, m.row)),
+      class: "overflow-hidden shrink-0"
+    }, [O(Fe, {
+      children: l.children ?? l.components ?? [],
+      scale: m.scale,
+      depth: 0
+    }, null, 8, ["children", "scale"]), (l.children ?? l.components ?? []).length === 0 ? (a(), d("div", Me)) : G("", !0)], 4))), 128))], 4));
+  }
+}), ze = je, Ee = {
+  key: 0,
+  class: "w-65 sticky top-16 h-[calc(100vh-5.25rem)] z-80"
+}, Ae = { class: "bg-(--md-surface) flex flex-col h-full border-r border-(--md-border)/80" }, Be = { class: "flex items-center justify-between px-3.5 py-3 shrink-0" }, Le = { class: "relative group/close" }, He = { class: "px-3.5 pb-2 shrink-0" }, Ve = {
+  key: 0,
+  class: "flex items-center gap-1"
+}, Ne = ["aria-pressed", "onClick"], Ge = {
+  key: 1,
+  class: "text-[11px] font-medium text-(--md-text-subtle)"
+}, Oe = { class: "flex-1 min-h-0 overflow-y-auto" }, We = {
+  key: 0,
+  class: "p-2 flex flex-col gap-2"
+}, Ue = {
+  key: 1,
+  class: "flex flex-col items-center gap-3 px-5 py-12 text-center"
+}, Ke = {
+  key: 2,
+  class: "p-2 flex flex-col gap-1.5"
+}, qe = ["onClick", "onDragstart"], Ye = ["onDblclick"], Je = ["onBlur", "onKeyup"], Qe = { class: "text-[10px] text-(--md-text-subtle) shrink-0 tabular-nums" }, Xe = {
+  key: 2,
+  class: "relative group/del"
+}, Ze = ["onClick"], et = {
+  key: 1,
+  class: "flex items-center gap-1.5 px-2 py-1.5"
+}, tt = { class: "flex-1 text-[11px] font-medium text-(--md-text-muted) truncate" }, rt = { class: "text-[10px] text-(--md-text-subtle) shrink-0 tabular-nums" }, ot = 600, oe = 25, nt = /* @__PURE__ */ U({
+  __name: "SavedRowsPanel",
+  setup(m) {
+    const { isOpen: w, close: k } = we(), f = he(), p = ke(), v = ve(), g = ye(), c = fe(), { rows: _, saveToHistoryImmediate: T } = xe(), { startLayoutDrag: S, endLayoutDrag: r } = be(), i = {
+      rows: p.systemRows,
+      isFetching: p.isFetching,
+      ensureFetched: () => p.fetchRows(),
+      rename: () => {
+        throw new Error("Shared rows are read-only");
+      },
+      remove: () => {
+        throw new Error("Shared rows are read-only");
+      },
+      cloneForCanvas: (o) => p.cloneRowForCanvas(o)
+    }, l = {
+      rows: f.productRows,
+      isFetching: f.isFetching,
+      ensureFetched: () => f.fetchRows(),
+      rename: (o, e) => f.renameProductRow(o, e),
+      remove: (o) => f.deleteProductRow(o),
+      cloneForCanvas: (o) => f.cloneRowForCanvas(o)
+    }, u = h("user"), x = R(() => p.isSupported.value && p.systemRows.value.length > 0);
+    W(x, (o) => {
+      !o && u.value === "system" && (u.value = "user");
+    });
+    const b = R(() => u.value === "system" && x.value ? i : l), y = R(() => u.value === "system"), F = R(() => !y.value && c.value.rename !== !1), C = R(() => !y.value && c.value.delete !== !1);
+    W(w, async (o) => {
+      o && await Promise.all([f.fetchRows(), p.fetchRows()]);
+    }, { immediate: !0 });
+    const ae = R(() => b.value.rows.value), V = h(null);
+    function se(o, e) {
+      V.value = e, S(o, {
+        type: "product-row",
+        entryId: e
+      });
+    }
+    function ie() {
+      V.value = null, r();
+    }
+    const K = h({}), q = h({});
+    function Y(o) {
+      const e = K.value[o];
+      return e && e > 0 ? e / ot : 0;
+    }
+    function le(o) {
+      const e = q.value[o];
+      return e ? Math.max(oe, Math.round(e * Y(o))) : oe;
+    }
+    const E = h(null), A = h(null);
+    function de(o, e) {
+      !o || !E.value || (o.dataset.entryId = e, E.value.observe(o));
+    }
+    function ue(o, e) {
+      !o || !A.value || (o.dataset.entryId = e, A.value.observe(o));
+    }
+    ne(() => {
+      E.value = new ResizeObserver((o) => {
+        for (const e of o) {
+          const n = e.target.dataset.entryId;
+          if (n) {
+            const s = e.contentRect.width;
+            s > 0 && (K.value[n] = s);
+          }
+        }
+      }), A.value = new ResizeObserver((o) => {
+        for (const e of o) {
+          const n = e.target.dataset.entryId;
+          if (n) {
+            const s = e.borderBoxSize?.[0]?.blockSize ?? e.contentRect.height;
+            s > 0 && (q.value[n] = s);
+          }
+        }
+      });
+    }), Se(() => {
+      E.value?.disconnect(), A.value?.disconnect();
+    });
+    function ce(o) {
+      if (P.value === o) return;
+      const e = b.value.cloneForCanvas(o);
+      e && (_.value.push(e), T("add-product-row"));
+    }
+    function pe(o) {
+      v.require({
+        message: "Remove this product row from the library?",
+        header: "Clear product",
+        acceptLabel: "Yes",
+        rejectLabel: "Cancel",
+        acceptClass: "!bg-[var(--md-danger)] !hover:opacity-90 !border-[var(--md-danger)] !px-6 !py-2",
+        rejectClass: "!bg-[var(--md-border)] !hover:bg-[var(--md-border-strong)] !text-[var(--md-text)] !border-[var(--md-border)] !px-6 !py-2",
+        accept: async () => {
+          try {
+            await b.value.remove(o);
+          } catch (e) {
+            console.error("[maildeno-editor] failed to delete saved row:", e), X(e) || g.add({
+              severity: "error",
+              summary: "Delete failed",
+              detail: "That row couldn't be removed.",
+              life: 4e3
+            });
+          }
+        },
+        reject: () => {
+        }
+      });
+    }
+    const P = h(null), B = h(""), L = h(null);
+    function me(o) {
+      P.value = o.id, B.value = o.name, $e(() => {
+        (Array.isArray(L.value) ? L.value[0] : L.value)?.focus();
+      });
+    }
+    async function J(o) {
+      const e = "Saved";
+      if (P.value === o) {
+        const n = B.value.trim().toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
+        try {
+          const s = await b.value.rename(o, n);
+          P.value = null, g.add({
+            severity: s ? "success" : "error",
+            summary: s ? "Rename successful" : "Save failed",
+            detail: s ? e : "Please try again",
+            life: 3e3
+          });
+        } catch (s) {
+          console.error("[maildeno-editor] failed to rename saved row:", s), X(s) || g.add({
+            severity: "error",
+            summary: "Rename failed",
+            detail: "Please try again",
+            life: 4e3
+          });
+        }
+      }
+    }
+    function Q(o) {
+      return new Date(o).toLocaleDateString(void 0, {
+        month: "short",
+        day: "numeric"
+      });
+    }
+    return (o, e) => (a(), H(Ce, { name: "panel-slide" }, {
+      default: te(() => [D(w) ? (a(), d("div", Ee, [t("div", Ae, [
+        t("div", Be, [e[8] || (e[8] = t("div", { class: "flex items-center gap-2" }, [t("svg", {
+          class: "w-3.5 h-3.5 text-(--md-text-subtle)",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, [t("path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" })]), t("span", { class: "text-[11px] font-semibold text-(--md-text-subtle) uppercase tracking-[.08em]" }, " Saved Rows ")], -1)), t("div", Le, [t("button", {
+          onClick: e[0] || (e[0] = (...n) => D(k) && D(k)(...n)),
+          class: "w-6 h-6 flex items-center justify-center rounded-md text-(--md-text-subtle) hover:text-(--md-text-muted) hover:bg-(--md-surface-muted) transition-colors focus:outline-none"
+        }, [...e[6] || (e[6] = [t("svg", {
+          class: "w-3.5 h-3.5",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, [t("path", { d: "M18 6 6 18M6 6l12 12" })], -1)])]), e[7] || (e[7] = t("div", { class: "pointer-events-none absolute right-0 top-full mt-1.5 px-2 py-1 bg-(--md-tooltip-bg) text-(--md-tooltip-text) text-[10px] font-medium rounded-md whitespace-nowrap opacity-0 group-hover/close:opacity-100 -translate-y-0.5 group-hover/close:translate-y-0 transition-all duration-150 z-50 after:content-[''] after:absolute after:bottom-full after:right-2 after:border-4 after:border-transparent after:border-b-(--md-tooltip-bg)" }, " Close panel ", -1))])]),
+        t("div", He, [x.value ? (a(), d("div", Ve, [(a(), d($, null, z(["user", "system"], (n) => t("button", {
+          key: n,
+          type: "button",
+          class: ee(["px-2 py-1 rounded-md text-[11px] font-medium transition-colors", u.value === n ? "bg-(--md-accent-bg) text-(--md-accent-text)" : "text-(--md-text-subtle) hover:text-(--md-text-muted) hover:bg-(--md-surface-muted)"]),
+          "aria-pressed": u.value === n,
+          onClick: (s) => u.value = n
+        }, M(n === "user" ? "My Rows" : "Shared"), 11, Ne)), 64))])) : (a(), d("span", Ge, "My Rows"))]),
+        t("div", Oe, [b.value.isFetching.value ? (a(), d("div", We, [(a(), d($, null, z(3, (n) => t("div", {
+          key: n,
+          class: "rounded-lg border border-(--md-border) overflow-hidden"
+        }, [t("div", {
+          class: "bg-(--md-surface-muted) animate-pulse",
+          style: I({ height: 80 + n * 20 + "px" })
+        }, null, 4), e[9] || (e[9] = t("div", { class: "flex items-center gap-2 px-2.5 py-2" }, [t("div", { class: "h-2 flex-1 rounded-full bg-(--md-surface-muted) animate-pulse" }), t("div", { class: "h-2 w-7 rounded-full bg-(--md-surface-muted) animate-pulse" })], -1))])), 64))])) : b.value.rows.value.length === 0 ? (a(), d("div", Ue, [...e[10] || (e[10] = [t("div", { class: "w-10 h-10 rounded-xl bg-(--md-surface-hover) border border-(--md-border)/80 flex items-center justify-center" }, [t("svg", {
+          class: "w-5 h-5 text-(--md-text-subtle)",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        }, [t("path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" })])], -1), t("div", { class: "space-y-1" }, [t("p", { class: "text-xs font-medium text-(--md-text-subtle)" }, " No saved rows yet "), t("p", { class: "text-[11px] text-(--md-text-subtle) leading-relaxed" }, [
+          N(" Select a row on the canvas,"),
+          t("br"),
+          N("then click "),
+          t("span", { class: "text-(--md-row-selection-fg) font-medium" }, "Save"),
+          N(" in the toolbar. ")
+        ])], -1)])])) : (a(), d("div", Ke, [O(Re, { name: "row-list" }, {
+          default: te(() => [(a(!0), d($, null, z(ae.value, (n) => (a(), d("div", {
+            key: n.id,
+            draggable: "true",
+            class: ee(["group relative rounded-lg border bg-(--md-surface) overflow-hidden transition-all duration-150 select-none cursor-grab active:cursor-grabbing", [V.value === n.id ? "ring-2 ring-(--md-row-selection) ring-offset-1 opacity-60 border-(--md-row-selection)" : "border-(--md-border)/80 hover:border-(--md-border-strong) hover:shadow-[0_2px_8px_rgba(0,0,0,0.07)]"]]),
+            onClick: (s) => ce(n.id),
+            onDragstart: (s) => se(s, n.id),
+            onDragend: ie
+          }, [t("div", {
+            ref_for: !0,
+            ref: (s) => de(s, n.id),
+            class: "relative overflow-hidden border-b border-(--md-border)",
+            style: I({
+              height: le(n.id) + "px",
+              backgroundColor: n.row.backgroundColor || "#f9fafb"
+            })
+          }, [t("div", {
+            ref_for: !0,
+            ref: (s) => ue(s, n.id),
+            class: "absolute top-0 left-0 pointer-events-none",
+            style: I({
+              width: "600px",
+              transformOrigin: "top left",
+              transform: `scale(${Y(n.id)})`
+            })
+          }, [O(ze, { row: n.row }, null, 8, ["row"])], 4), e[11] || (e[11] = t("div", { class: "absolute inset-0 bg-(--md-text)/0 group-hover:bg-(--md-text)/[0.03] transition-colors duration-150 flex items-center justify-center" }, [t("div", { class: "opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex items-center gap-1.5 bg-(--md-surface)/90 backdrop-blur-sm border border-(--md-border) rounded-full px-2.5 py-1 shadow-sm" }, [t("svg", {
+            class: "w-3 h-3 text-(--md-text-subtle)",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [t("path", { d: "M12 5v14M5 12l7-7 7 7" })]), t("span", { class: "text-[10px] font-medium text-(--md-text-muted)" }, "Click to insert")])], -1))], 4), F.value ? (a(), d("div", {
+            key: 0,
+            onClick: e[5] || (e[5] = j(() => {
+            }, ["stop"])),
+            class: "flex items-center gap-1.5 px-2 py-1.5"
+          }, [
+            e[14] || (e[14] = t("div", { class: "shrink-0 text-(--md-text-subtle) group-hover:text-(--md-text-muted) transition-colors cursor-grab active:cursor-grabbing" }, [t("svg", {
+              class: "w-3 h-3",
+              viewBox: "0 0 16 16",
+              fill: "currentColor"
+            }, [
+              t("circle", {
+                cx: "5",
+                cy: "4",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "11",
+                cy: "4",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "5",
+                cy: "8",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "11",
+                cy: "8",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "5",
+                cy: "12",
+                r: "1.2"
+              }),
+              t("circle", {
+                cx: "11",
+                cy: "12",
+                r: "1.2"
+              })
+            ])], -1)),
+            P.value !== n.id ? (a(), d("span", {
+              key: 0,
+              onDblclick: j((s) => me(n), ["stop"]),
+              onClick: e[1] || (e[1] = j(() => {
+              }, ["stop"])),
+              class: "flex-1 text-[11px] font-medium text-(--md-text-muted) truncate cursor-text"
+            }, M(n.name), 41, Ye)) : Ie((a(), d("input", {
+              key: 1,
+              "onUpdate:modelValue": e[2] || (e[2] = (s) => B.value = s),
+              onBlur: (s) => J(n.id),
+              onKeyup: [re((s) => J(n.id), ["enter"]), e[3] || (e[3] = re((s) => P.value = null, ["escape"]))],
+              onClick: e[4] || (e[4] = j(() => {
+              }, ["stop"])),
+              class: "flex-1 text-[11px] text-(--md-text) border border-(--md-row-selection) bg-(--md-row-selection-bg)/40 rounded-md px-1.5 py-0.5 focus:outline-none focus:border-(--md-row-selection)",
+              ref_for: !0,
+              ref_key: "renameInputRef",
+              ref: L
+            }, null, 40, Je)), [[Pe, B.value]]),
+            t("span", Qe, M(Q(n.createdAt)), 1),
+            C.value ? (a(), d("div", Xe, [t("button", {
+              onClick: j((s) => pe(n.id), ["stop"]),
+              class: "hidden group-hover:flex items-center justify-center w-5 h-5 shrink-0 rounded-md text-(--md-text-subtle) hover:text-(--md-danger) hover:bg-(--md-danger-bg) transition-colors focus:outline-none"
+            }, [...e[12] || (e[12] = [t("svg", {
+              class: "w-3 h-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "1.75",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }, [t("path", { d: "M3 6h18M8 6V4h8v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }), t("path", { d: "M10 11v6M14 11v6" })], -1)])], 8, Ze), e[13] || (e[13] = t("div", { class: "pointer-events-none absolute bottom-full right-0 mb-1.5 px-2 py-1 bg-(--md-tooltip-bg) text-(--md-tooltip-text) text-[10px] font-medium rounded-md whitespace-nowrap opacity-0 group-hover/del:opacity-100 translate-y-0.5 group-hover/del:translate-y-0 transition-all duration-150 z-50 after:content-[''] after:absolute after:top-full after:right-2 after:border-4 after:border-transparent after:border-t-(--md-tooltip-bg)" }, " Remove ", -1))])) : G("", !0)
+          ])) : (a(), d("div", et, [t("span", tt, M(n.name), 1), t("span", rt, M(Q(n.createdAt)), 1)]))], 42, qe))), 128))]),
+          _: 1
+        })]))])
+      ])])) : G("", !0)]),
+      _: 1
+    }));
+  }
+}), dt = /* @__PURE__ */ _e(nt, [["__scopeId", "data-v-ef885a8c"]]);
+export {
+  dt as default,
+  Fe as t
+};