@oneb/ui-vue 0.4.0 → 0.4.2

package/dist/errorsPage/index.js

@@ -1,11 +1,10 @@
-import { defineComponent as O, computed as x, resolveComponent as U, openBlock as a, createElementBlock as c, createElementVNode as s, toDisplayString as r, createCommentVNode as h, createTextVNode as C, createVNode as E, withCtx as z, useSlots as ae, normalizeClass as R, renderSlot as F, ref as _, onMounted as le, onUnmounted as ue, normalizeStyle as ie, Fragment as ce, renderList as de, createSlots as Y, createBlock as P, unref as I, onBeforeUnmount as Z, watch as ve } from "vue";
+import { defineComponent as T, computed as b, resolveComponent as N, openBlock as n, createElementBlock as u, createElementVNode as t, toDisplayString as r, createCommentVNode as h, createTextVNode as C, createVNode as I, withCtx as q, useSlots as re, normalizeClass as G, renderSlot as z, createBlock as Q, ref as x, onMounted as ae, onUnmounted as ne, normalizeStyle as le, Fragment as ue, renderList as ie, createSlots as W, onBeforeUnmount as X, watch as ce, unref as de } from "vue";
 import { useOnebI18n as L } from "../i18n/index.js";
-import { _ as ee } from "../_plugin-vue_export-helper-dad06003.js";
-import { useRouter as fe } from "vue-router";
-import { OneButton as M } from "../button/index.js";
-import { c as me } from "../clipboard-733b79a1.js";
-import "../SpinnerIcon-516264ba.js";
-const ye = {
+import { _ as Y } from "../_plugin-vue_export-helper-dad06003.js";
+import { useRouter as me } from "vue-router";
+import { L as ve } from "../LogoOneb-ddb388a4.js";
+import { c as fe } from "../clipboard-733b79a1.js";
+const ge = {
   statusMessage: {
     type: String,
     required: !1
@@ -26,69 +25,61 @@ const ye = {
     type: Function,
     default: void 0
   }
-}, ge = O({
+}, ye = T({
   name: "ErrorPage",
-  props: ye,
+  props: ge,
   setup(e) {
     const o = L();
-    return { t: x(() => e.t ?? o) };
+    return { t: b(() => e.t ?? o) };
   }
 });
-const pe = { class: "error-container" }, _e = { class: "text-8xl text-secondary-content" }, he = { key: 0 }, xe = {
+const pe = { class: "error-container" }, xe = { class: "text-8xl text-secondary-content" }, he = { key: 0 }, _e = {
   key: 1,
   class: "pt-5"
 }, be = { class: "request-info hidden" };
-function ke(e, o, y, t, f, d) {
-  const l = U("router-link");
-  return a(), c("div", pe, [
-    s("h1", _e, r(e.statusCode), 1),
-    e.statusMessage ? (a(), c("p", he, r(e.statusMessage), 1)) : h("", !0),
-    o[3] || (o[3] = s("div", { class: "border-b border-secondary-stroke w-full pt-10" }, null, -1)),
-    e.statusText ? (a(), c("p", xe, r(e.statusText), 1)) : h("", !0),
-    s("div", be, [
-      s("p", null, [
-        o[0] || (o[0] = s("strong", null, "Request ID:", -1)),
+function ke(e, o, g, s, v, f) {
+  const i = N("router-link");
+  return n(), u("div", pe, [
+    t("h1", xe, r(e.statusCode), 1),
+    e.statusMessage ? (n(), u("p", he, r(e.statusMessage), 1)) : h("", !0),
+    o[3] || (o[3] = t("div", { class: "border-b border-secondary-stroke w-full pt-10" }, null, -1)),
+    e.statusText ? (n(), u("p", _e, r(e.statusText), 1)) : h("", !0),
+    t("div", be, [
+      t("p", null, [
+        o[0] || (o[0] = t("strong", null, "Request ID:", -1)),
         C(" " + r(e.requestId), 1)
       ]),
-      o[1] || (o[1] = s("button", { class: "copy-btn" }, "Скопіювати", -1)),
-      o[2] || (o[2] = s("p", null, [
+      o[1] || (o[1] = t("button", { class: "copy-btn" }, "Скопіювати", -1)),
+      o[2] || (o[2] = t("p", null, [
         C(" Передайте цю інформацію розробнику або напишіть в "),
-        s("a", {
+        t("a", {
           href: "https://t.me/telegram_bot",
           target: "_blank"
         }, "Telegram-бот")
       ], -1))
     ]),
-    E(l, {
+    I(i, {
       to: "/",
       class: "home-link"
     }, {
-      default: z(() => [
+      default: q(() => [
         C(r(e.t("ui.errors.go_home")), 1)
       ]),
       _: 1
     })
   ]);
 }
-const gt = /* @__PURE__ */ ee(ge, [["render", ke], ["__scopeId", "data-v-4ac01274"]]), we = { class: "flex items-center justify-center gap-2 sm:gap-4" }, Se = {
-  key: 0,
-  class: "relative"
-}, $e = { class: "one-error-logo-bounce" }, Ce = ["src"], Ee = {
+const gt = /* @__PURE__ */ Y(ye, [["render", ke], ["__scopeId", "data-v-4ac01274"]]), we = { class: "flex items-center justify-center gap-2 sm:gap-4" }, Se = { class: "relative" }, $e = { class: "one-error-logo-bounce" }, Ce = ["src"], Ee = {
   key: 0,
   class: "absolute inset-0 animate-ping opacity-20",
   "aria-hidden": "true"
-}, Te = ["src"], D = "text-[100px] sm:text-[160px] font-bold text-secondary-stroke leading-none select-none", Oe = /* @__PURE__ */ O({
+}, Te = ["src"], J = "text-[100px] sm:text-[160px] font-bold text-slate-200 leading-none select-none", Oe = /* @__PURE__ */ T({
   __name: "OneErrorHero",
   props: {
     left: {
       type: String,
       required: !0
     },
-    /** Fallback digit shown when there is no logo (neither slot nor logoSrc). */
-    middle: {
-      type: String,
-      required: !0
-    },
     right: {
       type: String,
       required: !0
@@ -99,60 +90,61 @@ const gt = /* @__PURE__ */ ee(ge, [["render", ke], ["__scopeId", "data-v-4ac0127
     }
   },
   setup(e) {
-    const o = e, y = ae(), t = x(() => !!y.default), f = x(() => t.value || !!o.logoSrc);
-    return (d, l) => (a(), c("div", we, [
-      s("span", {
-        class: R(D)
+    const o = re(), g = b(() => !!o.default);
+    return (s, v) => (n(), u("div", we, [
+      t("span", {
+        class: G(J)
       }, r(e.left), 1),
-      f.value ? (a(), c("div", Se, [
-        s("div", $e, [
-          F(d.$slots, "default", {}, () => [
-            s("img", {
+      t("div", Se, [
+        t("div", $e, [
+          z(s.$slots, "default", {}, () => [
+            e.logoSrc ? (n(), u("img", {
+              key: 0,
               src: e.logoSrc,
-              class: "w-20 h-20 sm:w-28 sm:h-28",
+              class: "w-24 h-24 sm:w-36 sm:h-36",
               alt: "Logo"
-            }, null, 8, Ce)
+            }, null, 8, Ce)) : (n(), Q(ve, {
+              key: 1,
+              class: "w-24 h-24 sm:w-36 sm:h-36"
+            }))
           ], !0)
         ]),
-        e.logoSrc && !t.value ? (a(), c("div", Ee, [
-          s("img", {
+        e.logoSrc && !g.value ? (n(), u("div", Ee, [
+          t("img", {
             src: e.logoSrc,
-            class: "w-20 h-20 sm:w-28 sm:h-28",
+            class: "w-24 h-24 sm:w-36 sm:h-36",
             alt: ""
           }, null, 8, Te)
         ])) : h("", !0)
-      ])) : (a(), c("span", {
-        key: 1,
-        class: R(D)
-      }, r(e.middle), 1)),
-      s("span", {
-        class: R(D)
+      ]),
+      t("span", {
+        class: G(J)
       }, r(e.right), 1)
     ]));
   }
 });
-const te = /* @__PURE__ */ ee(Oe, [["__scopeId", "data-v-59d54d25"]]), qe = { class: "w-full" }, Ie = { class: "flex items-center justify-between mb-4" }, ze = { class: "flex items-center gap-4" }, Fe = { class: "text-sm text-secondary-base" }, Le = {
-  class: "text-success-content",
+const Z = /* @__PURE__ */ Y(Oe, [["__scopeId", "data-v-957a8a83"]]), Ie = { class: "w-full" }, qe = { class: "flex items-center justify-between mb-4" }, ze = { class: "flex items-center gap-4" }, Le = { class: "text-sm text-slate-600" }, Fe = {
+  class: "text-emerald-700",
   "data-test": "snake-score"
 }, je = {
   key: 0,
-  class: "text-sm text-danger-base font-medium",
+  class: "text-sm text-rose-600 font-medium",
   "data-test": "snake-status"
-}, Be = {
+}, Re = {
   key: 1,
-  class: "text-sm text-success-content",
+  class: "text-sm text-emerald-700",
   "data-test": "snake-status"
-}, Re = {
+}, Me = {
   key: 2,
-  class: "text-sm text-secondary-content",
+  class: "text-sm text-slate-500",
   "data-test": "snake-status"
-}, Me = { class: "flex gap-2" }, Ge = { class: "bg-secondary-body-active border border-secondary-stroke rounded-20 p-4 shadow-sm" }, Ne = ["data-snake"], De = {
+}, Be = { class: "flex gap-2" }, Ge = { class: "bg-slate-50 border border-slate-200 rounded-2xl p-4 shadow-sm" }, Ne = ["data-snake"], De = {
   key: 0,
-  class: "absolute inset-1 rounded-md border border-success-active/40"
+  class: "absolute inset-1 rounded-md border border-emerald-800/40"
 }, He = {
   key: 1,
-  class: "absolute inset-2 rounded-sm bg-danger-base"
-}, Pe = { class: "text-xs text-secondary-content text-center mt-3" }, Ue = /* @__PURE__ */ O({
+  class: "absolute inset-2 rounded-sm bg-rose-600"
+}, Pe = { class: "text-xs text-slate-500 text-center mt-3" }, Ue = /* @__PURE__ */ T({
   __name: "OneSnakeGame",
   props: {
     gridSize: {
@@ -169,62 +161,62 @@ const te = /* @__PURE__ */ ee(Oe, [["__scopeId", "data-v-59d54d25"]]), qe = { cl
     }
   },
   emits: ["score", "game-over"],
-  setup(e, { expose: o, emit: y }) {
-    const t = e, f = y, d = L(), l = x(() => t.t ?? d), m = _([]), g = _({ x: 1, y: 0 }), k = _({ x: 1, y: 0 }), p = _({ x: 0, y: 0 }), w = _(0), b = _(!1), v = _(!1);
-    let T = null;
-    const oe = x(
-      () => Array.from({ length: t.gridSize * t.gridSize }, (u, n) => ({
-        x: n % t.gridSize,
-        y: Math.floor(n / t.gridSize)
+  setup(e, { expose: o, emit: g }) {
+    const s = e, v = g, f = L(), i = b(() => s.t ?? f), m = x([]), y = x({ x: 1, y: 0 }), k = x({ x: 1, y: 0 }), p = x({ x: 0, y: 0 }), w = x(0), _ = x(!1), d = x(!1);
+    let E = null;
+    const te = b(
+      () => Array.from({ length: s.gridSize * s.gridSize }, (l, a) => ({
+        x: a % s.gridSize,
+        y: Math.floor(a / s.gridSize)
       }))
-    ), G = (u) => {
-      var n, i;
-      return ((n = m.value[0]) == null ? void 0 : n.x) === u.x && ((i = m.value[0]) == null ? void 0 : i.y) === u.y;
-    }, A = (u) => m.value.some((n, i) => i !== 0 && n.x === u.x && n.y === u.y), N = (u) => p.value.x === u.x && p.value.y === u.y, V = (u) => {
-      const n = [];
-      for (let S = 0; S < t.gridSize; S += 1)
-        for (let $ = 0; $ < t.gridSize; $ += 1)
-          u.some((X) => X.x === $ && X.y === S) || n.push({ x: $, y: S });
-      if (n.length === 0)
+    ), R = (l) => {
+      var a, c;
+      return ((a = m.value[0]) == null ? void 0 : a.x) === l.x && ((c = m.value[0]) == null ? void 0 : c.y) === l.y;
+    }, D = (l) => m.value.some((a, c) => c !== 0 && a.x === l.x && a.y === l.y), M = (l) => p.value.x === l.x && p.value.y === l.y, H = (l) => {
+      const a = [];
+      for (let S = 0; S < s.gridSize; S += 1)
+        for (let $ = 0; $ < s.gridSize; $ += 1)
+          l.some((K) => K.x === $ && K.y === S) || a.push({ x: $, y: S });
+      if (a.length === 0)
         return { x: 0, y: 0 };
-      const i = Math.floor(Math.random() * n.length);
-      return n[i];
-    }, j = () => {
-      T != null && (clearInterval(T), T = null), b.value = !1;
-    }, K = () => {
-      j(), v.value = !0, f("game-over", w.value);
-    }, q = () => {
-      j(), m.value = [
+      const c = Math.floor(Math.random() * a.length);
+      return a[c];
+    }, F = () => {
+      E != null && (clearInterval(E), E = null), _.value = !1;
+    }, P = () => {
+      F(), d.value = !0, v("game-over", w.value);
+    }, O = () => {
+      F(), m.value = [
         {
-          x: Math.floor(t.gridSize / 2),
-          y: Math.floor(t.gridSize / 2)
+          x: Math.floor(s.gridSize / 2),
+          y: Math.floor(s.gridSize / 2)
         }
-      ], g.value = { x: 1, y: 0 }, k.value = { x: 1, y: 0 }, p.value = V(m.value), w.value = 0, v.value = !1;
-    }, ne = (u) => {
-      g.value.x + u.x === 0 && g.value.y + u.y === 0 || (k.value = u);
-    }, re = () => {
-      g.value = k.value;
-      const u = m.value[0], n = { x: u.x + g.value.x, y: u.y + g.value.y };
-      if (n.x < 0 || n.x >= t.gridSize || n.y < 0 || n.y >= t.gridSize) {
-        K();
+      ], y.value = { x: 1, y: 0 }, k.value = { x: 1, y: 0 }, p.value = H(m.value), w.value = 0, d.value = !1;
+    }, se = (l) => {
+      y.value.x + l.x === 0 && y.value.y + l.y === 0 || (k.value = l);
+    }, oe = () => {
+      y.value = k.value;
+      const l = m.value[0], a = { x: l.x + y.value.x, y: l.y + y.value.y };
+      if (a.x < 0 || a.x >= s.gridSize || a.y < 0 || a.y >= s.gridSize) {
+        P();
         return;
       }
-      if (m.value.some(($) => $.x === n.x && $.y === n.y)) {
-        K();
+      if (m.value.some(($) => $.x === a.x && $.y === a.y)) {
+        P();
         return;
       }
-      const S = [n, ...m.value];
-      n.x === p.value.x && n.y === p.value.y ? (w.value += 1, f("score", w.value), p.value = V(S)) : S.pop(), m.value = S;
-    }, J = () => {
-      T != null || v.value || (b.value = !0, T = setInterval(re, t.tickMs));
-    }, Q = () => {
-      if (v.value) {
-        q();
+      const S = [a, ...m.value];
+      a.x === p.value.x && a.y === p.value.y ? (w.value += 1, v("score", w.value), p.value = H(S)) : S.pop(), m.value = S;
+    }, U = () => {
+      E != null || d.value || (_.value = !0, E = setInterval(oe, s.tickMs));
+    }, A = () => {
+      if (d.value) {
+        O();
         return;
       }
-      b.value ? j() : J();
-    }, W = (u) => {
-      const n = u.key.toLowerCase(), i = {
+      _.value ? F() : U();
+    }, V = (l) => {
+      const a = l.key.toLowerCase(), c = {
         arrowup: { x: 0, y: -1 },
         w: { x: 0, y: -1 },
         arrowdown: { x: 0, y: 1 },
@@ -234,57 +226,57 @@ const te = /* @__PURE__ */ ee(Oe, [["__scopeId", "data-v-59d54d25"]]), qe = { cl
         arrowright: { x: 1, y: 0 },
         d: { x: 1, y: 0 }
       };
-      i[n] ? (ne(i[n]), !b.value && !v.value && J()) : n === " " ? (u.preventDefault(), v.value || Q()) : n === "enter" && v.value && q();
+      c[a] ? (se(c[a]), !_.value && !d.value && U()) : a === " " ? (l.preventDefault(), d.value || A()) : a === "enter" && d.value && O();
     };
-    return le(() => {
-      q(), window.addEventListener("keydown", W);
-    }), ue(() => {
-      j(), window.removeEventListener("keydown", W);
-    }), o({ score: w, isRunning: b, isGameOver: v, resetGame: q }), (u, n) => (a(), c("div", qe, [
-      s("div", Ie, [
-        s("div", ze, [
-          s("span", Fe, [
-            C(r(l.value("ui.errors.snake_score")) + ": ", 1),
-            s("strong", Le, r(w.value), 1)
+    return ae(() => {
+      O(), window.addEventListener("keydown", V);
+    }), ne(() => {
+      F(), window.removeEventListener("keydown", V);
+    }), o({ score: w, isRunning: _, isGameOver: d, resetGame: O }), (l, a) => (n(), u("div", Ie, [
+      t("div", qe, [
+        t("div", ze, [
+          t("span", Le, [
+            C(r(i.value("ui.errors.snake_score")) + ": ", 1),
+            t("strong", Fe, r(w.value), 1)
           ]),
-          v.value ? (a(), c("span", je, r(l.value("ui.errors.snake_game_over")), 1)) : b.value ? (a(), c("span", Be, r(l.value("ui.errors.snake_running")), 1)) : (a(), c("span", Re, r(l.value("ui.errors.snake_paused")), 1))
+          d.value ? (n(), u("span", je, r(i.value("ui.errors.snake_game_over")), 1)) : _.value ? (n(), u("span", Re, r(i.value("ui.errors.snake_running")), 1)) : (n(), u("span", Me, r(i.value("ui.errors.snake_paused")), 1))
         ]),
-        s("div", Me, [
-          s("button", {
+        t("div", Be, [
+          t("button", {
             type: "button",
-            class: "px-3 py-1.5 rounded-lg text-sm text-white bg-success-base hover:bg-success-hover transition",
+            class: "px-3 py-1.5 rounded-lg text-sm text-white bg-emerald-600 hover:bg-emerald-700 transition",
             "data-test": "snake-toggle",
-            onClick: Q
-          }, r(v.value ? l.value("ui.errors.snake_restart") : b.value ? l.value("ui.errors.snake_pause") : l.value("ui.errors.snake_start")), 1),
-          s("button", {
+            onClick: A
+          }, r(d.value ? i.value("ui.errors.snake_restart") : _.value ? i.value("ui.errors.snake_pause") : i.value("ui.errors.snake_start")), 1),
+          t("button", {
             type: "button",
-            class: "px-3 py-1.5 rounded-lg text-sm border border-secondary-stroke text-secondary-base hover:bg-secondary-body-hover transition",
+            class: "px-3 py-1.5 rounded-lg text-sm border border-slate-300 text-slate-700 hover:bg-slate-50 transition",
             "data-test": "snake-reset",
-            onClick: q
-          }, r(l.value("ui.errors.snake_reset")), 1)
+            onClick: O
+          }, r(i.value("ui.errors.snake_reset")), 1)
         ])
       ]),
-      s("div", Ge, [
-        s("div", {
+      t("div", Ge, [
+        t("div", {
           class: "w-full mx-auto",
-          style: ie({ display: "grid", gridTemplateColumns: `repeat(${e.gridSize}, minmax(0, 1fr))` })
+          style: le({ display: "grid", gridTemplateColumns: `repeat(${e.gridSize}, minmax(0, 1fr))` })
         }, [
-          (a(!0), c(ce, null, de(oe.value, (i) => (a(), c("div", {
-            key: `${i.x}-${i.y}`,
-            class: R(["relative aspect-square border border-secondary-stroke/60", [
-              G(i) ? "bg-success-active shadow-inner" : A(i) ? "bg-success-25" : N(i) ? "bg-danger-glow" : "bg-white"
+          (n(!0), u(ue, null, ie(te.value, (c) => (n(), u("div", {
+            key: `${c.x}-${c.y}`,
+            class: G(["relative aspect-square border border-slate-200/60", [
+              R(c) ? "bg-emerald-600 shadow-inner" : D(c) ? "bg-emerald-300" : M(c) ? "bg-rose-400" : "bg-white"
             ]]),
             "data-test": "snake-cell",
-            "data-snake": G(i) ? "head" : A(i) ? "body" : N(i) ? "food" : void 0
+            "data-snake": R(c) ? "head" : D(c) ? "body" : M(c) ? "food" : void 0
           }, [
-            G(i) ? (a(), c("div", De)) : N(i) ? (a(), c("div", He)) : h("", !0)
+            R(c) ? (n(), u("div", De)) : M(c) ? (n(), u("div", He)) : h("", !0)
           ], 10, Ne))), 128))
         ], 4)
       ]),
-      s("p", Pe, r(l.value("ui.errors.snake_instructions")), 1)
+      t("p", Pe, r(i.value("ui.errors.snake_instructions")), 1)
     ]));
   }
-}), Ae = { class: "flex flex-col items-center justify-center p-4" }, Ve = { class: "text-center mb-8" }, Ke = { class: "text-xl text-secondary-base mt-2" }, Je = { class: "flex gap-4 mt-4" }, pt = /* @__PURE__ */ O({
+}), Ae = { class: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4" }, Ve = { class: "text-center mb-8" }, Ke = { class: "text-xl text-gray-600 mt-2" }, Je = { class: "flex gap-4 mt-4" }, yt = /* @__PURE__ */ T({
   __name: "OneNotFoundPage",
   props: {
     /** App logo shown between the digits; the #logo slot takes priority. */
@@ -306,68 +298,66 @@ const te = /* @__PURE__ */ ee(Oe, [["__scopeId", "data-v-59d54d25"]]), qe = { cl
     }
   },
   setup(e) {
-    const o = e, y = L(), t = x(() => o.t ?? y), f = fe(), d = _(!1), l = () => {
-      f ? f.back() : typeof window < "u" && window.history.back();
+    const o = e, g = L(), s = b(() => o.t ?? g), v = me(), f = x(!1), i = () => {
+      v ? v.back() : typeof window < "u" && window.history.back();
     };
-    return (m, g) => {
-      const k = U("RouterLink");
-      return a(), c("div", Ae, [
-        s("div", Ve, [
-          E(te, {
+    return (m, y) => {
+      const k = N("RouterLink");
+      return n(), u("div", Ae, [
+        t("div", Ve, [
+          I(Z, {
             left: "4",
-            middle: "0",
             right: "4",
             "logo-src": e.logoSrc
-          }, Y({ _: 2 }, [
+          }, W({ _: 2 }, [
             m.$slots.logo ? {
               name: "default",
-              fn: z(() => [
-                F(m.$slots, "logo")
+              fn: q(() => [
+                z(m.$slots, "logo")
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["logo-src"]),
-          s("p", Ke, r(t.value("ui.errors.page_not_found")), 1)
+          t("p", Ke, r(s.value("ui.errors.page_not_found")), 1)
         ]),
-        e.withGame && !d.value ? (a(), P(I(M), {
+        e.withGame && !f.value ? (n(), u("button", {
           key: 0,
-          variant: "success",
-          size: "lg",
-          label: t.value("ui.errors.play_snake"),
+          type: "button",
+          class: "px-6 py-2.5 rounded-xl text-white bg-emerald-600 hover:bg-emerald-700 transition font-medium shadow-lg",
           "data-test": "nf-play",
-          onClick: g[0] || (g[0] = (p) => d.value = !0)
-        }, null, 8, ["label"])) : h("", !0),
-        d.value ? (a(), P(Ue, {
+          onClick: y[0] || (y[0] = (p) => f.value = !0)
+        }, r(s.value("ui.errors.play_snake")), 1)) : h("", !0),
+        f.value ? (n(), Q(Ue, {
           key: 1,
           class: "max-w-2xl",
-          t: t.value
+          t: s.value
         }, null, 8, ["t"])) : h("", !0),
-        s("div", Je, [
-          E(k, {
+        t("div", Je, [
+          I(k, {
             to: e.homeTo,
-            class: "text-info-base hover:text-info-active underline text-sm",
+            class: "text-blue-600 hover:text-blue-700 underline text-sm",
             "data-test": "nf-home"
           }, {
-            default: z(() => [
-              C(r(t.value("ui.errors.go_home")), 1)
+            default: q(() => [
+              C(r(s.value("ui.errors.go_home")), 1)
             ]),
             _: 1
           }, 8, ["to"]),
-          s("button", {
+          t("button", {
             type: "button",
-            class: "text-secondary-base hover:text-secondary-hover underline text-sm",
+            class: "text-gray-600 hover:text-gray-700 underline text-sm",
             "data-test": "nf-back",
-            onClick: l
-          }, r(t.value("ui.errors.go_back")), 1)
+            onClick: i
+          }, r(s.value("ui.errors.go_back")), 1)
         ])
       ]);
     };
   }
-}), Qe = { class: "flex flex-col items-center justify-center p-4" }, We = { class: "text-center mb-8" }, Xe = { class: "text-xl text-secondary-base mt-2" }, Ye = { class: "text-sm text-secondary-content mt-2 max-w-md mx-auto" }, Ze = {
+}), Qe = { class: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4" }, We = { class: "text-center mb-8" }, Xe = { class: "text-xl text-gray-600 mt-2" }, Ye = { class: "text-sm text-gray-500 mt-2 max-w-md mx-auto" }, Ze = {
   key: 0,
-  class: "mb-6 text-sm text-secondary-base text-center",
+  class: "mb-6 text-sm text-gray-600 text-center",
   "data-test": "se-request"
-}, et = { class: "flex flex-col items-center gap-4" }, _t = /* @__PURE__ */ O({
+}, et = { class: "flex flex-col items-center gap-4" }, pt = /* @__PURE__ */ T({
   __name: "OneServerErrorPage",
   props: {
     /** App logo shown between the digits; the #logo slot takes priority. */
@@ -390,64 +380,62 @@ const te = /* @__PURE__ */ ee(Oe, [["__scopeId", "data-v-59d54d25"]]), qe = { cl
     }
   },
   setup(e) {
-    const o = e, y = L(), t = x(() => o.t ?? y), f = _(!1);
-    let d = null;
-    const l = async () => {
-      !o.requestId || !await me(o.requestId) || (f.value = !0, d != null && clearTimeout(d), d = setTimeout(() => {
-        f.value = !1, d = null;
+    const o = e, g = L(), s = b(() => o.t ?? g), v = x(!1);
+    let f = null;
+    const i = async () => {
+      !o.requestId || !await fe(o.requestId) || (v.value = !0, f != null && clearTimeout(f), f = setTimeout(() => {
+        v.value = !1, f = null;
       }, 2e3));
     }, m = () => {
       window.location.reload();
     };
-    return Z(() => {
-      d != null && clearTimeout(d);
-    }), (g, k) => {
-      const p = U("RouterLink");
-      return a(), c("div", Qe, [
-        s("div", We, [
-          E(te, {
+    return X(() => {
+      f != null && clearTimeout(f);
+    }), (y, k) => {
+      const p = N("RouterLink");
+      return n(), u("div", Qe, [
+        t("div", We, [
+          I(Z, {
             left: "5",
-            middle: "0",
             right: "0",
             "logo-src": e.logoSrc
-          }, Y({ _: 2 }, [
-            g.$slots.logo ? {
+          }, W({ _: 2 }, [
+            y.$slots.logo ? {
               name: "default",
-              fn: z(() => [
-                F(g.$slots, "logo")
+              fn: q(() => [
+                z(y.$slots, "logo")
               ]),
               key: "0"
             } : void 0
           ]), 1032, ["logo-src"]),
-          s("p", Xe, r(t.value("ui.errors.server_error")), 1),
-          s("p", Ye, r(t.value("ui.errors.server_error_hint")), 1)
+          t("p", Xe, r(s.value("ui.errors.server_error")), 1),
+          t("p", Ye, r(s.value("ui.errors.server_error_hint")), 1)
         ]),
-        e.requestId ? (a(), c("div", Ze, [
-          C(r(t.value("ui.errors.request_id")) + ": ", 1),
-          s("strong", null, r(e.requestId), 1),
-          s("button", {
+        e.requestId ? (n(), u("div", Ze, [
+          C(r(s.value("ui.errors.request_id")) + ": ", 1),
+          t("strong", null, r(e.requestId), 1),
+          t("button", {
             type: "button",
-            class: "ml-2 text-info-base hover:text-info-active underline",
+            class: "ml-2 text-blue-600 hover:text-blue-700 underline",
             "data-test": "se-copy",
-            onClick: l
-          }, r(f.value ? t.value("ui.errors.copied") : t.value("ui.errors.copy")), 1)
+            onClick: i
+          }, r(v.value ? s.value("ui.errors.copied") : s.value("ui.errors.copy")), 1)
         ])) : h("", !0),
-        s("div", et, [
-          E(I(M), {
-            variant: "primary",
-            size: "lg",
-            label: t.value("ui.errors.reload_page"),
+        t("div", et, [
+          t("button", {
+            type: "button",
+            class: "px-6 py-3 rounded-xl text-white bg-emerald-600 hover:bg-emerald-700 transition text-lg font-medium shadow-lg",
             "data-test": "se-reload",
             onClick: m
-          }, null, 8, ["label"]),
-          F(g.$slots, "support"),
-          E(p, {
+          }, r(s.value("ui.errors.reload_page")), 1),
+          z(y.$slots, "support"),
+          I(p, {
             to: e.homeTo,
-            class: "text-info-base hover:text-info-active underline text-sm",
+            class: "text-blue-600 hover:text-blue-700 underline text-sm",
             "data-test": "se-home"
           }, {
-            default: z(() => [
-              C(r(t.value("ui.errors.go_home")), 1)
+            default: q(() => [
+              C(r(s.value("ui.errors.go_home")), 1)
             ]),
             _: 1
           }, 8, ["to"])
@@ -455,31 +443,31 @@ const te = /* @__PURE__ */ ee(Oe, [["__scopeId", "data-v-59d54d25"]]), qe = { cl
       ]);
     };
   }
-}), B = _(!1), H = _(null);
-function se() {
-  return { show: B, error: H, trigger: (y) => {
-    B.value || (H.value = y, B.value = !0);
+}), j = x(!1), B = x(null);
+function ee() {
+  return { show: j, error: B, trigger: (g) => {
+    j.value || (B.value = g, j.value = !0);
   }, dismiss: () => {
-    B.value = !1, H.value = null;
+    j.value = !1, B.value = null;
   } };
 }
 const tt = {
   key: 0,
-  class: "fixed inset-0 z-[10000] flex items-center justify-center bg-secondary-body p-6",
+  class: "fixed inset-0 z-[10000] flex items-center justify-center bg-[#f5f7fb] p-6",
   role: "alert",
   "aria-live": "assertive",
   "data-test": "crash-screen"
 }, st = { class: "flex w-full max-w-[480px] flex-col items-center text-center" }, ot = {
   key: 0,
   class: "mb-6"
-}, nt = ["src"], rt = { class: "mb-3 text-2xl font-semibold" }, at = {
-  class: "mb-8 text-base text-secondary-base",
+}, rt = ["src"], at = { class: "mb-3 text-2xl font-semibold text-gray-900" }, nt = {
+  class: "mb-8 text-base text-gray-600",
   "data-test": "crash-message"
 }, lt = {
   key: 2,
   "data-test": "crash-details",
-  class: "mt-6 text-xs text-secondary-content"
-}, ht = /* @__PURE__ */ O({
+  class: "mt-6 text-xs text-gray-400"
+}, xt = /* @__PURE__ */ T({
   __name: "OneCrashScreen",
   props: {
     /** App logo above the title; the #logo slot takes priority. */
@@ -515,78 +503,76 @@ const tt = {
     }
   },
   setup(e) {
-    const o = e, y = L(), t = x(() => o.t ?? y), { show: f, error: d } = se(), l = _(o.autoReloadSeconds);
+    const o = e, g = L(), s = b(() => o.t ?? g), { show: v, error: f } = ee(), i = x(o.autoReloadSeconds);
     let m = null;
-    const g = x(() => {
-      const v = d.value;
-      return v instanceof Error ? `${v.name}: ${v.message}` : String(v ?? "Unknown error");
-    }), k = x(() => o.persistent ? t.value("ui.crash.persistent") : l.value > 0 ? t.value("ui.crash.countdown", { n: l.value }) : t.value("ui.crash.reloading")), p = () => {
+    const y = b(() => {
+      const d = f.value;
+      return d instanceof Error ? `${d.name}: ${d.message}` : String(d ?? "Unknown error");
+    }), k = b(() => o.persistent ? s.value("ui.crash.persistent") : i.value > 0 ? s.value("ui.crash.countdown", { n: i.value }) : s.value("ui.crash.reloading")), p = () => {
       m != null && (clearInterval(m), m = null);
     }, w = () => {
       p(), window.location.reload();
-    }, b = () => {
+    }, _ = () => {
       o.accountUrl && (p(), window.location.href = o.accountUrl);
     };
-    return ve(
-      f,
-      (v) => {
-        p(), v && (l.value = o.autoReloadSeconds, !o.persistent && (m = setInterval(() => {
-          l.value -= 1, l.value <= 0 && (p(), window.location.reload());
+    return ce(
+      v,
+      (d) => {
+        p(), d && (i.value = o.autoReloadSeconds, !o.persistent && (m = setInterval(() => {
+          i.value -= 1, i.value <= 0 && (p(), window.location.reload());
         }, 1e3)));
       },
       { immediate: !0 }
-    ), Z(() => {
+    ), X(() => {
       p();
-    }), (v, T) => I(f) ? (a(), c("div", tt, [
-      s("div", st, [
-        e.logoSrc || v.$slots.logo ? (a(), c("div", ot, [
-          F(v.$slots, "logo", {}, () => [
-            s("img", {
+    }), (d, E) => de(v) ? (n(), u("div", tt, [
+      t("div", st, [
+        e.logoSrc || d.$slots.logo ? (n(), u("div", ot, [
+          z(d.$slots, "logo", {}, () => [
+            t("img", {
               src: e.logoSrc,
               alt: "",
               class: "h-20 w-20"
-            }, null, 8, nt)
+            }, null, 8, rt)
           ])
         ])) : h("", !0),
-        s("h1", rt, r(t.value("ui.crash.title")), 1),
-        s("p", at, r(k.value), 1),
-        E(I(M), {
-          class: "w-full mb-3",
-          variant: "primary",
-          label: t.value("ui.crash.reload_now"),
+        t("h1", at, r(s.value("ui.crash.title")), 1),
+        t("p", nt, r(k.value), 1),
+        t("button", {
+          type: "button",
+          class: "mb-3 w-full rounded-lg bg-gradient-to-r from-[#E1A508] to-[#E04040] px-6 py-3 text-base font-medium text-white transition hover:opacity-90",
           "data-test": "crash-reload",
           onClick: w
-        }, null, 8, ["label"]),
-        e.accountUrl ? (a(), P(I(M), {
+        }, r(s.value("ui.crash.reload_now")), 1),
+        e.accountUrl ? (n(), u("button", {
           key: 1,
-          class: "w-full",
-          variant: "secondary",
-          label: t.value("ui.crash.open_account"),
+          type: "button",
+          class: "w-full rounded-lg border border-gray-300 bg-white px-6 py-3 text-base font-medium text-gray-700 transition hover:bg-gray-50",
           "data-test": "crash-account",
-          onClick: b
-        }, null, 8, ["label"])) : h("", !0),
-        e.showDetails ? (a(), c("p", lt, r(g.value), 1)) : h("", !0)
+          onClick: _
+        }, r(s.value("ui.crash.open_account")), 1)) : h("", !0),
+        e.showDetails ? (n(), u("p", lt, r(y.value), 1)) : h("", !0)
       ])
     ])) : h("", !0);
   }
 });
-function xt(e = {}) {
+function ht(e = {}) {
   const o = e.criticalInfos ?? ["setup function", "render function"];
-  return (y, t, f) => {
-    var d;
+  return (g, s, v) => {
+    var f;
     try {
-      (d = e.onError) == null || d.call(e, y, f);
+      (f = e.onError) == null || f.call(e, g, v);
     } catch {
     }
-    console.error("[Vue Error]", y, f), o.includes(f) && (e.onCritical ?? se().trigger)(y);
+    console.error("[Vue Error]", g, v), o.includes(v) && (e.onCritical ?? ee().trigger)(g);
   };
 }
 export {
-  ht as OneCrashScreen,
+  xt as OneCrashScreen,
   gt as OneErrorPage,
-  pt as OneNotFoundPage,
-  _t as OneServerErrorPage,
+  yt as OneNotFoundPage,
+  pt as OneServerErrorPage,
   Ue as OneSnakeGame,
-  xt as createAppErrorHandler,
-  se as useCrashState
+  ht as createAppErrorHandler,
+  ee as useCrashState
 };