@gxp-dev/app-ui 0.1.0

package/dist/components/domain/leaderboard/ActivityNotifications.vue2.js

@@ -0,0 +1,74 @@
+import { defineComponent as $, ref as x, watch as k, onUnmounted as y, openBlock as d, createBlock as C, TransitionGroup as D, normalizeClass as h, unref as E, withCtx as N, createElementBlock as g, Fragment as Q, renderList as A, createElementVNode as l, toDisplayString as i, createTextVNode as B } from "vue";
+import { cn as M } from "../../../lib/utils.js";
+const P = ["onClick"], z = { class: "min-w-0 flex-1" }, F = { class: "text-sm leading-snug" }, L = /* @__PURE__ */ $({
+  __name: "ActivityNotifications",
+  props: {
+    activityData: { default: () => [] },
+    maxToasts: { default: 3 },
+    maxQueued: { default: 5 },
+    displayDuration: { default: 5e3 },
+    class: {}
+  },
+  setup(_, { expose: v }) {
+    const a = _, o = x([]), r = x([]), s = /* @__PURE__ */ new Map(), T = (e) => ({
+      ...e,
+      id: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+      name: e.name || "Player"
+    }), u = (e) => {
+      o.value.unshift(e);
+      const t = setTimeout(() => {
+        c(e.id), s.delete(e.id);
+      }, a.displayDuration);
+      s.set(e.id, t);
+    }, c = (e) => {
+      const t = o.value.findIndex((n) => n.id === e);
+      t > -1 && (o.value.splice(t, 1), s.has(e) && (clearTimeout(s.get(e)), s.delete(e)), b());
+    }, b = () => {
+      if (o.value.length < a.maxToasts && r.value.length > 0) {
+        const e = r.value.shift();
+        u(e);
+      }
+    }, m = (e) => {
+      const t = T(e);
+      o.value.length < a.maxToasts ? u(t) : r.value.length < a.maxQueued && r.value.push(t);
+    }, p = (e) => new Intl.NumberFormat().format(Math.abs(e)), w = (e) => {
+      const t = e.transaction_type === "deducted" ? "lost" : "earned", n = `${p(e.points)} points`;
+      return e.game_rule_name ? `${t} ${n} from ${e.game_rule_name}` : `${t} ${n}`;
+    }, f = () => {
+      s.forEach((e) => clearTimeout(e)), s.clear(), o.value = [], r.value = [];
+    };
+    return k(
+      () => a.activityData,
+      (e) => {
+        e && e.length > 0 && e.forEach((t) => m(t));
+      },
+      { deep: !0 }
+    ), y(() => f()), v({ addToast: m, removeToast: c, clearAll: f }), (e, t) => (d(), C(D, {
+      name: "activity-toast",
+      tag: "div",
+      class: h(E(M)("pointer-events-none fixed right-8 top-8 z-50 flex flex-col gap-2", a.class))
+    }, {
+      default: N(() => [
+        (d(!0), g(Q, null, A(o.value, (n) => (d(), g("div", {
+          key: n.id,
+          class: "pointer-events-auto flex min-w-[280px] cursor-pointer items-center gap-3 rounded-xl border border-white/20 bg-slate-800/95 px-4 py-3 text-white shadow-lg backdrop-blur-xl transition-all hover:-translate-y-0.5 hover:border-white/30",
+          onClick: (S) => c(n.id)
+        }, [
+          l("div", z, [
+            l("div", F, [
+              l("strong", null, i(n.name || "Player"), 1),
+              B(" " + i(w(n)), 1)
+            ]),
+            l("div", {
+              class: h(["mt-1 text-sm font-bold", n.transaction_type === "deducted" ? "text-red-500" : "text-emerald-500"])
+            }, i(n.transaction_type === "deducted" ? "-" : "+") + i(p(n.points)), 3)
+          ])
+        ], 8, P))), 128))
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+});
+export {
+  L as default
+};

package/dist/components/domain/leaderboard/AwardIcon.vue.js

@@ -0,0 +1,44 @@
+import { defineComponent as o, openBlock as l, createElementBlock as s, normalizeClass as c, unref as a, createElementVNode as n } from "vue";
+import { cn as p } from "../../../lib/utils.js";
+const d = /* @__PURE__ */ o({
+  __name: "AwardIcon",
+  props: {
+    class: {}
+  },
+  setup(t) {
+    const r = t;
+    return (m, e) => (l(), s("svg", {
+      class: c(a(p)("h-full w-full", r.class)),
+      version: "1.0",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 200 200",
+      preserveAspectRatio: "xMidYMid meet"
+    }, [...e[0] || (e[0] = [
+      n("g", {
+        transform: "translate(0.000000,200.000000) scale(0.100000,-0.100000)",
+        fill: "currentColor",
+        stroke: "none"
+      }, [
+        n("path", { d: `M790 1942 c-19 -11 -48 -37 -65 -60 -33 -45 -58 -58 -124 -65 -74 -9
+  -129 -64 -138 -138 -7 -65 -20 -93 -53 -113 -79 -46 -108 -137 -71 -221 26
+  -59 26 -71 0 -130 -37 -84 -8 -175 71 -221 33 -20 46 -48 53 -113 9 -74 64
+  -129 138 -138 65 -7 93 -20 113 -53 46 -79 137 -108 221 -71 59 26 71 26 130
+  0 84 -37 175 -8 221 71 20 33 48 46 113 53 74 9 129 64 138 138 7 65 20 93 53
+  113 79 46 108 137 71 221 -26 59 -26 71 0 130 37 84 8 175 -71 221 -33 20 -46
+  48 -53 113 -9 74 -64 129 -138 138 -65 7 -93 20 -113 53 -46 79 -137 108 -221
+  71 -59 -26 -72 -26 -126 -1 -55 25 -104 25 -149 2z` }),
+        n("path", { d: `M450 484 c-47 -102 -86 -192 -88 -200 -9 -37 16 -44 159 -44 l138 0
+  81 -100 c79 -98 105 -116 128 -87 5 6 55 115 110 242 l100 229 -40 18 c-36 16
+  -42 16 -69 2 -45 -23 -122 -29 -176 -13 -35 9 -63 28 -105 70 -49 48 -64 57
+  -105 63 l-48 6 -85 -186z` }),
+        n("path", { d: `M1403 663 c-23 -3 -49 -21 -90 -62 -44 -43 -69 -60 -104 -69 l-46
+  -12 -57 -131 c-41 -93 -56 -139 -51 -156 3 -13 23 -62 45 -109 51 -111 59
+  -110 164 18 l79 98 136 0 c139 0 161 5 161 39 0 9 -39 100 -87 204 -61 132
+  -91 187 -102 185 -9 0 -31 -3 -48 -5z` })
+      ], -1)
+    ])], 2));
+  }
+});
+export {
+  d as default
+};

package/dist/components/domain/leaderboard/AwardIcon.vue2.js

@@ -0,0 +1,4 @@
+import f from "./AwardIcon.vue.js";
+export {
+  f as default
+};

package/dist/components/domain/leaderboard/Leaderboard.vue.js

@@ -0,0 +1,7 @@
+import o from "./Leaderboard.vue2.js";
+/* empty css                 */
+import a from "../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ a(o, [["__scopeId", "data-v-7780da8a"]]);
+export {
+  e as default
+};

package/dist/components/domain/leaderboard/Leaderboard.vue2.js

@@ -0,0 +1,131 @@
+import { defineComponent as v, computed as m, openBlock as l, createElementBlock as o, normalizeStyle as f, normalizeClass as c, unref as y, createElementVNode as r, renderSlot as h, toDisplayString as n, createCommentVNode as d, createVNode as x, TransitionGroup as P, withCtx as C, Fragment as k, renderList as T } from "vue";
+import { cn as w } from "../../../lib/utils.js";
+import S from "./AwardIcon.vue.js";
+const E = { class: "leaderboard-card" }, $ = { class: "mb-4 text-center" }, B = { class: "text-2xl font-extrabold tracking-tight" }, F = {
+  key: 0,
+  class: "mt-1 text-sm text-muted-foreground"
+}, N = {
+  key: 0,
+  class: "mb-3 rounded-xl border border-amber-400/40 bg-amber-500/15 px-5 py-3 text-center text-sm font-medium"
+}, L = {
+  key: 1,
+  class: "flex flex-1 flex-col items-center justify-center py-10"
+}, V = {
+  key: 2,
+  class: "flex flex-1 flex-col items-center justify-center py-10 text-destructive"
+}, j = {
+  key: 3,
+  class: "flex flex-1 flex-col"
+}, q = { class: "award-rank-number" }, A = {
+  key: 1,
+  class: "rank-number"
+}, D = { class: "min-w-0 flex-1 text-left" }, R = { class: "truncate text-sm font-normal" }, z = {
+  key: 0,
+  class: "truncate text-xs text-muted-foreground"
+}, G = {
+  key: 1,
+  class: "text-xs text-muted-foreground/60"
+}, I = { class: "flex-shrink-0 text-right" }, M = { class: "text-sm font-normal tabular-nums" }, K = /* @__PURE__ */ v({
+  __name: "Leaderboard",
+  props: {
+    entries: { default: () => [] },
+    title: { default: "Leaderboard" },
+    description: {},
+    maxEntries: { default: 10 },
+    showPlaceholders: { type: Boolean, default: !0 },
+    topThreeStyle: { default: "square" },
+    firstPlaceColor: { default: "#FFD700" },
+    secondPlaceColor: { default: "#C0C0C0" },
+    thirdPlaceColor: { default: "#CD7F32" },
+    showAllTimeRank: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    error: {},
+    lockText: {},
+    class: {}
+  },
+  setup(s) {
+    const t = s, p = (a) => new Intl.NumberFormat().format(Math.abs(a)), b = m(() => {
+      const a = t.maxEntries, i = [];
+      for (let e = 0; e < t.entries.length && e < a; e++)
+        t.entries[e].points > 0 && i.push({ ...t.entries[e], isPlaceholder: !1 });
+      if (t.showPlaceholders)
+        for (let e = i.length; e < a; e++)
+          i.push({
+            rank: e + 1,
+            name: "---",
+            points: 0,
+            isPlaceholder: !0,
+            key: `placeholder-${e}`,
+            member_id: `placeholder-${e}`
+          });
+      return i;
+    }), g = (a) => {
+      const i = a.rank <= 3 && !a.isPlaceholder, e = [`rank-${i ? a.rank : "other"}`];
+      return i && (t.topThreeStyle === "square" ? e.push("square-style") : t.topThreeStyle === "circle" ? e.push("circle-style") : t.topThreeStyle === "number_only" ? e.push("number-only") : t.topThreeStyle === "badge" && e.push("award-badge")), e;
+    }, _ = m(() => ({
+      "--first-place-color": t.firstPlaceColor,
+      "--second-place-color": t.secondPlaceColor,
+      "--third-place-color": t.thirdPlaceColor,
+      "--max-entries": t.maxEntries
+    }));
+    return (a, i) => (l(), o("div", {
+      class: c(y(w)("flex w-full flex-col items-center", t.class)),
+      style: f(_.value)
+    }, [
+      r("div", E, [
+        r("div", $, [
+          h(a.$slots, "header", {}, () => [
+            r("h2", B, n(s.title), 1),
+            s.description ? (l(), o("p", F, n(s.description), 1)) : d("", !0)
+          ], !0)
+        ]),
+        s.lockText ? (l(), o("div", N, n(s.lockText), 1)) : d("", !0),
+        s.loading && !s.entries.length ? (l(), o("div", L, [...i[0] || (i[0] = [
+          r("div", { class: "mb-4 h-8 w-8 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-muted-foreground/80" }, null, -1),
+          r("p", { class: "text-sm text-muted-foreground" }, "Loading scores...", -1)
+        ])])) : s.error ? (l(), o("div", V, [
+          r("p", null, n(s.error), 1)
+        ])) : (l(), o("div", j, [
+          x(P, {
+            name: "leaderboard-item",
+            tag: "div",
+            class: "flex flex-1 flex-col justify-evenly gap-1"
+          }, {
+            default: C(() => [
+              (l(!0), o(k, null, T(b.value, (e, u) => (l(), o("div", {
+                key: e.key || e.member_id || `entry-${u}`,
+                class: c(["leaderboard-entry", {
+                  highlight: e.isNewEntry || e.isPointsUpdated,
+                  "opacity-50": e.isPlaceholder
+                }]),
+                style: f({ "--item-index": u })
+              }, [
+                r("div", {
+                  class: c(["rank-badge", g(e)])
+                }, [
+                  s.topThreeStyle === "badge" && e.rank <= 3 && !e.isPlaceholder ? (l(), o(k, { key: 0 }, [
+                    x(S),
+                    r("span", q, n(e.rank), 1)
+                  ], 64)) : (l(), o("span", A, n(e.rank), 1))
+                ], 2),
+                r("div", D, [
+                  r("div", R, n(e.name), 1),
+                  e.subtitle && !e.isPlaceholder ? (l(), o("div", z, n(e.subtitle), 1)) : d("", !0),
+                  e.all_time_rank && s.showAllTimeRank && !e.isPlaceholder ? (l(), o("div", G, " All-time: #" + n(e.all_time_rank), 1)) : d("", !0)
+                ]),
+                r("div", I, [
+                  r("span", M, n(e.isPlaceholder ? "-" : p(e.points)), 1)
+                ])
+              ], 6))), 128))
+            ]),
+            _: 1
+          })
+        ])),
+        h(a.$slots, "footer", {}, void 0, !0)
+      ])
+    ], 6));
+  }
+});
+export {
+  K as default
+};

package/dist/components/domain/leaderboard/RecentActivity.vue.js

@@ -0,0 +1,7 @@
+import t from "./RecentActivity.vue2.js";
+/* empty css                    */
+import o from "../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ o(t, [["__scopeId", "data-v-6f4ca1c5"]]);
+export {
+  e as default
+};

package/dist/components/domain/leaderboard/RecentActivity.vue2.js

@@ -0,0 +1,101 @@
+import { defineComponent as C, ref as x, watch as $, openBlock as l, createElementBlock as n, normalizeClass as f, unref as N, createElementVNode as t, createTextVNode as v, toDisplayString as i, createCommentVNode as w, createVNode as A, Transition as M, withCtx as j, withModifiers as V, Fragment as B, renderList as z } from "vue";
+import { cn as E } from "../../../lib/utils.js";
+const F = {
+  key: 0,
+  class: "min-w-[1.25rem] rounded-full bg-red-500 px-1.5 py-0.5 text-center text-xs font-medium text-white"
+}, L = { class: "flex items-center justify-between border-b border-white/10 px-6 py-4" }, P = { class: "text-lg font-semibold text-white" }, R = { class: "flex-1 overflow-y-auto p-6" }, S = {
+  key: 0,
+  class: "flex justify-center py-4"
+}, I = {
+  key: 1,
+  class: "flex flex-col gap-4"
+}, q = { class: "min-w-[60px] text-xs text-white/60" }, D = { class: "min-w-0 flex-1 text-sm text-white" }, G = {
+  key: 2,
+  class: "py-8 text-center text-white/60"
+}, K = /* @__PURE__ */ C({
+  __name: "RecentActivity",
+  props: {
+    activities: { default: () => [] },
+    loading: { type: Boolean, default: !1 },
+    buttonText: { default: "Activity" },
+    modalTitle: { default: "Recent Activity" },
+    class: {}
+  },
+  emits: ["open", "close"],
+  setup(r, { expose: g, emit: y }) {
+    const b = r, u = y, a = x(!1), d = x(!1), c = x(0), h = () => {
+      a.value = !a.value, a.value ? (d.value = !1, c.value = 0, u("open")) : u("close");
+    }, m = () => {
+      a.value = !1, u("close");
+    }, p = (e) => new Intl.NumberFormat().format(Math.abs(e)), _ = (e) => {
+      const o = e.transaction_type === "deducted" ? "lost" : "earned", s = `${p(e.points)} points`;
+      return e.game_rule_name ? `${o} ${s} from ${e.game_rule_name}` : `${o} ${s}`;
+    }, k = (e) => e ? new Date(e * 1e3).toLocaleTimeString() : "";
+    return $(
+      () => b.activities,
+      (e) => {
+        e && e.length > 0 && (d.value = !0, c.value = Math.min(e.length, 99));
+      },
+      { deep: !0 }
+    ), g({ toggleModal: h, closeModal: m }), (e, o) => (l(), n("div", {
+      class: f(N(E)("relative", b.class))
+    }, [
+      t("button", {
+        class: f(["relative flex items-center gap-2 rounded-lg border border-white/15 bg-slate-800/40 px-4 py-2 text-sm text-white transition-all hover:bg-slate-800/60 hover:border-white/25", { "border-amber-500/60 shadow-[0_0_0_2px_rgba(245,158,11,0.2)]": d.value }]),
+        onClick: h
+      }, [
+        o[1] || (o[1] = t("span", { class: "text-base" }, "⚡", -1)),
+        v(" " + i(r.buttonText) + " ", 1),
+        d.value ? (l(), n("span", F, i(c.value > 9 ? "9+" : c.value), 1)) : w("", !0)
+      ], 2),
+      A(M, { name: "modal" }, {
+        default: j(() => [
+          a.value ? (l(), n("div", {
+            key: 0,
+            class: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm",
+            onClick: m
+          }, [
+            t("div", {
+              class: "flex max-h-[85%] w-full max-w-md flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-800/95 backdrop-blur-xl",
+              onClick: o[0] || (o[0] = V(() => {
+              }, ["stop"]))
+            }, [
+              t("div", L, [
+                t("h3", P, i(r.modalTitle), 1),
+                t("button", {
+                  class: "flex h-8 w-8 items-center justify-center rounded text-white/70 transition-all hover:bg-white/10 hover:text-white",
+                  onClick: m
+                }, " × ")
+              ]),
+              t("div", R, [
+                r.loading ? (l(), n("div", S, [...o[2] || (o[2] = [
+                  t("div", { class: "h-5 w-5 animate-spin rounded-full border-2 border-white/20 border-t-white/80" }, null, -1)
+                ])])) : r.activities.length ? (l(), n("div", I, [
+                  (l(!0), n(B, null, z(r.activities, (s, T) => (l(), n("div", {
+                    key: `${s.member_id}-${s.timestamp}-${T}`,
+                    class: "flex items-center gap-4 rounded-lg border border-white/10 bg-white/5 p-4"
+                  }, [
+                    t("div", q, i(k(s.timestamp)), 1),
+                    t("div", D, [
+                      t("strong", null, i(s.name || "Player"), 1),
+                      v(" " + i(_(s)), 1)
+                    ]),
+                    t("div", {
+                      class: f(["text-sm font-bold", s.transaction_type === "deducted" ? "text-red-500" : "text-emerald-500"])
+                    }, i(s.transaction_type === "deducted" ? "-" : "+") + i(p(s.points)), 3)
+                  ]))), 128))
+                ])) : (l(), n("div", G, [...o[3] || (o[3] = [
+                  t("p", null, "No recent activity", -1)
+                ])]))
+              ])
+            ])
+          ])) : w("", !0)
+        ]),
+        _: 1
+      })
+    ], 2));
+  }
+});
+export {
+  K as default
+};

package/dist/components/domain/live-countdown/LiveCountdown.vue.js

@@ -0,0 +1,7 @@
+import o from "./LiveCountdown.vue2.js";
+/* empty css                   */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d5c8261b"]]);
+export {
+  _ as default
+};

package/dist/components/domain/live-countdown/LiveCountdown.vue2.js

@@ -0,0 +1,80 @@
+import { defineComponent as D, ref as I, computed as n, watch as A, onBeforeUnmount as N, openBlock as T, createElementBlock as y, normalizeClass as m, unref as f, createElementVNode as g, createVNode as P, toDisplayString as V, normalizeStyle as $, createCommentVNode as z } from "vue";
+import { cn as S } from "../../../lib/utils.js";
+import L from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/clock.js";
+const R = { class: "flex items-center gap-2" }, U = {
+  key: 0,
+  class: "h-2 w-full overflow-hidden rounded-full bg-muted",
+  "data-testid": "progress-bar"
+}, F = /* @__PURE__ */ D({
+  __name: "LiveCountdown",
+  props: {
+    endAt: {},
+    durationSeconds: { default: 30 },
+    showProgress: { type: Boolean, default: !0 },
+    warningThreshold: { default: 10 },
+    dangerThreshold: { default: 5 },
+    class: {}
+  },
+  emits: ["expired", "tick", "warning", "danger"],
+  setup(v, { expose: b, emit: k }) {
+    const t = v, r = k, e = I(0);
+    let a, l = !1, d = !1, i = !1;
+    const h = () => {
+      const o = new Date(t.endAt).getTime(), s = Date.now();
+      return Math.max(0, Math.ceil((o - s) / 1e3));
+    }, _ = n(() => t.durationSeconds <= 0 ? 0 : Math.max(0, Math.min(100, e.value / t.durationSeconds * 100))), p = n(
+      () => e.value <= t.warningThreshold && e.value > t.dangerThreshold
+    ), w = n(
+      () => e.value <= t.dangerThreshold && e.value > 0
+    ), x = n(() => e.value <= 0), C = n(() => {
+      const o = Math.max(0, e.value), s = Math.floor(o / 60), B = o % 60;
+      return `${s}:${B.toString().padStart(2, "0")}`;
+    }), E = n(() => x.value ? "bg-muted-foreground" : w.value ? "bg-red-500 live-countdown-pulse" : p.value ? "bg-yellow-500" : "bg-primary"), M = () => {
+      e.value = h(), r("tick", e.value), !d && e.value <= t.warningThreshold && (d = !0, r("warning")), !i && e.value <= t.dangerThreshold && (i = !0, r("danger")), !l && e.value <= 0 && (l = !0, c(), r("expired"));
+    }, u = () => {
+      a && clearInterval(a), e.value = h(), l = !1, d = !1, i = !1, e.value > 0 ? a = setInterval(M, 1e3) : (l = !0, r("expired"));
+    }, c = () => {
+      a && (clearInterval(a), a = void 0);
+    };
+    return A(
+      () => t.endAt,
+      () => {
+        u();
+      }
+    ), u(), N(() => {
+      c();
+    }), b({
+      remainingSeconds: e,
+      startTimer: u,
+      stopTimer: c
+    }), (o, s) => (T(), y("div", {
+      class: m(f(S)("flex flex-col gap-2", t.class)),
+      "data-testid": "live-countdown"
+    }, [
+      g("div", R, [
+        P(f(L), {
+          class: "h-4 w-4 text-muted-foreground",
+          "data-testid": "clock-icon"
+        }),
+        g("span", {
+          class: m(["text-lg font-semibold tabular-nums", {
+            "text-yellow-800": p.value,
+            "text-red-800": w.value,
+            "text-muted-foreground": x.value
+          }]),
+          "data-testid": "time-display"
+        }, V(C.value), 3)
+      ]),
+      v.showProgress ? (T(), y("div", U, [
+        g("div", {
+          class: m(f(S)("h-full rounded-full transition-all duration-1000", E.value)),
+          style: $({ width: `${_.value}%` }),
+          "data-testid": "progress-fill"
+        }, null, 6)
+      ])) : z("", !0)
+    ], 2));
+  }
+});
+export {
+  F as default
+};

package/dist/components/domain/live-countdown-sync/LiveCountdownSync.vue.js

@@ -0,0 +1,126 @@
+import { defineComponent as $, ref as D, computed as a, watch as I, onMounted as A, onBeforeUnmount as E, openBlock as m, createElementBlock as g, normalizeClass as w, unref as y, renderSlot as f, createElementVNode as u, createCommentVNode as x, toDisplayString as P, normalizeStyle as z } from "vue";
+import { cn as b } from "../../../lib/utils.js";
+const V = ["aria-live", "data-severity"], j = {
+  key: 0,
+  class: "h-5 w-5",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  "aria-hidden": "true"
+}, L = {
+  class: "min-w-[3rem] tabular-nums",
+  "data-testid": "live-countdown-sync-time"
+}, U = {
+  key: 0,
+  class: "h-1 min-w-[60px] flex-1 overflow-hidden rounded-full bg-black/10 dark:bg-white/10",
+  "data-testid": "live-countdown-sync-progress"
+}, F = /* @__PURE__ */ $({
+  __name: "LiveCountdownSync",
+  props: {
+    endAt: {},
+    durationSeconds: { default: 30 },
+    showProgress: { type: Boolean, default: !0 },
+    warningThreshold: { default: 10 },
+    dangerThreshold: { default: 5 },
+    hideIcon: { type: Boolean, default: !1 },
+    class: {}
+  },
+  emits: ["tick", "warning", "danger", "expired"],
+  setup(d, { expose: k, emit: S }) {
+    const n = d, s = S, c = () => {
+      const t = new Date(n.endAt).getTime();
+      return Number.isNaN(t) ? 0 : Math.max(0, Math.floor((t - Date.now()) / 1e3));
+    }, e = D(c());
+    let o;
+    const T = a(() => {
+      if (e.value <= 0) return "0:00";
+      const t = Math.floor(e.value / 60), l = e.value % 60;
+      return `${t}:${l.toString().padStart(2, "0")}`;
+    }), p = a(
+      () => n.durationSeconds > 0 ? Math.max(0, e.value / n.durationSeconds * 100) : 0
+    ), B = a(() => e.value <= 0), h = a(
+      () => e.value <= n.dangerThreshold && e.value > 0
+    ), C = a(
+      () => e.value <= n.warningThreshold && e.value > n.dangerThreshold
+    ), r = a(() => B.value ? "expired" : h.value ? "danger" : C.value ? "warning" : "normal"), i = () => {
+      o && (clearInterval(o), o = void 0);
+    }, M = () => {
+      const t = r.value;
+      e.value = c(), s("tick", e.value), t !== "warning" && r.value === "warning" && s("warning", e.value), t !== "danger" && r.value === "danger" && s("danger", e.value), e.value <= 0 && (s("expired"), i());
+    }, v = () => {
+      if (i(), e.value = c(), e.value <= 0) {
+        s("expired");
+        return;
+      }
+      o = setInterval(M, 1e3);
+    };
+    I(() => n.endAt, v), A(v), E(i);
+    const N = a(() => {
+      switch (r.value) {
+        case "danger":
+          return "bg-destructive/15 text-destructive animate-pulse";
+        case "warning":
+          return "bg-amber-100 text-amber-900 dark:bg-amber-500/20 dark:text-amber-200";
+        case "expired":
+          return "bg-muted text-muted-foreground";
+        default:
+          return "bg-muted text-foreground";
+      }
+    }), _ = a(() => {
+      switch (r.value) {
+        case "danger":
+          return "bg-destructive";
+        case "warning":
+          return "bg-amber-500";
+        default:
+          return "bg-primary";
+      }
+    });
+    return k({ remainingSeconds: e, startTimer: v, stopTimer: i }), (t, l) => (m(), g("div", {
+      class: w(y(b)(
+        "inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-sm font-semibold transition-colors",
+        N.value,
+        n.class
+      )),
+      role: "timer",
+      "aria-live": h.value ? "assertive" : "polite",
+      "data-severity": r.value,
+      "data-testid": "live-countdown-sync"
+    }, [
+      f(t.$slots, "icon", { severity: r.value }, () => [
+        d.hideIcon ? x("", !0) : (m(), g("svg", j, [...l[0] || (l[0] = [
+          u("circle", {
+            cx: "12",
+            cy: "12",
+            r: "10"
+          }, null, -1),
+          u("polyline", { points: "12 6 12 12 16 14" }, null, -1)
+        ])]))
+      ]),
+      f(t.$slots, "time", {
+        remainingSeconds: e.value,
+        severity: r.value
+      }, () => [
+        u("span", L, P(T.value), 1)
+      ]),
+      f(t.$slots, "progress", {
+        percent: p.value,
+        severity: r.value,
+        remainingSeconds: e.value
+      }, () => [
+        d.showProgress ? (m(), g("div", U, [
+          u("div", {
+            class: w(y(b)("h-full transition-[width] duration-1000 ease-linear", _.value)),
+            style: z({ width: p.value + "%" })
+          }, null, 6)
+        ])) : x("", !0)
+      ])
+    ], 10, V));
+  }
+});
+export {
+  F as default
+};

package/dist/components/domain/live-countdown-sync/LiveCountdownSync.vue2.js

@@ -0,0 +1,4 @@
+import f from "./LiveCountdownSync.vue.js";
+export {
+  f as default
+};

package/dist/components/domain/local-preview/LocalPreview.vue.js

@@ -0,0 +1,7 @@
+import o from "./LocalPreview.vue2.js";
+/* empty css                  */
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-894fab71"]]);
+export {
+  f as default
+};