@antontranelis/money-printer 1.0.1 → 1.0.3

package/dist/index.js

@@ -1,8 +1,8 @@
-import { jsxs as h, jsx as o, Fragment as z } from "react/jsx-runtime";
-import { create as le } from "zustand";
-import { persist as se } from "zustand/middleware";
-import { useState as C, useCallback as E, useRef as _, useEffect as O } from "react";
-import ce from "jspdf";
+import { jsxs as m, jsx as i, Fragment as K } from "react/jsx-runtime";
+import { create as fe } from "zustand";
+import { persist as be } from "zustand/middleware";
+import { useState as C, useCallback as S, useRef as T, useEffect as q } from "react";
+import ye from "jspdf";
 const V = {
   personalInfo: {
     name: "",
@@ -23,27 +23,27 @@ const V = {
   currentSide: "front",
   isEnhancing: !1,
   isExporting: !1
-}, g = le()(
-  se(
+}, f = fe()(
+  be(
     (e) => ({
       ...V,
-      setPersonalInfo: (t) => e((n) => ({
-        personalInfo: { ...n.personalInfo, ...t }
+      setPersonalInfo: (t) => e((a) => ({
+        personalInfo: { ...a.personalInfo, ...t }
       })),
-      setVoucherConfig: (t) => e((n) => ({
-        voucherConfig: { ...n.voucherConfig, ...t }
+      setVoucherConfig: (t) => e((a) => ({
+        voucherConfig: { ...a.voucherConfig, ...t }
       })),
-      setPortrait: (t, n = null) => e({
+      setPortrait: (t, a = null) => e({
         portrait: {
           original: t,
-          enhanced: n,
+          enhanced: a,
           useEnhanced: !1,
           zoom: 1
         }
       }),
-      setEnhancedPortrait: (t) => e((n) => ({
+      setEnhancedPortrait: (t) => e((a) => ({
         portrait: {
-          ...n.portrait,
+          ...a.portrait,
           enhanced: t,
           useEnhanced: t !== null
         }
@@ -54,9 +54,9 @@ const V = {
           useEnhanced: t.portrait.enhanced ? !t.portrait.useEnhanced : !1
         }
       })),
-      setPortraitZoom: (t) => e((n) => ({
+      setPortraitZoom: (t) => e((a) => ({
         portrait: {
-          ...n.portrait,
+          ...a.portrait,
           zoom: t
         }
       })),
@@ -66,11 +66,11 @@ const V = {
       })),
       setIsEnhancing: (t) => e({ isEnhancing: t }),
       setIsExporting: (t) => e({ isExporting: t }),
-      setLanguage: (t) => e((n) => ({
-        voucherConfig: { ...n.voucherConfig, language: t }
+      setLanguage: (t) => e((a) => ({
+        voucherConfig: { ...a.voucherConfig, language: t }
       })),
-      setHours: (t) => e((n) => ({
-        voucherConfig: { ...n.voucherConfig, hours: t }
+      setHours: (t) => e((a) => ({
+        voucherConfig: { ...a.voucherConfig, hours: t }
       })),
       reset: () => e(V)
     }),
@@ -82,7 +82,7 @@ const V = {
       })
     }
   )
-), de = {
+), we = {
   header: {
     title: "Money Generator",
     subtitle: "Erstelle deinen persönlichen Zeitgutschein"
@@ -129,7 +129,7 @@ const V = {
   bill: {
     descriptionText: "Für diesen Schein erhältst du {hours} {hourLabel} meiner Zeit oder ein gleichwertiges Dankeschön"
   }
-}, he = {
+}, ve = {
   header: {
     title: "Money Generator",
     subtitle: "Create your personal time voucher"
@@ -176,161 +176,250 @@ const V = {
   bill: {
     descriptionText: "This voucher entitles you to {hours} {hourLabel} of my time or an equivalent thank you"
   }
-}, pe = { de, en: he };
-function S(e) {
-  return pe[e];
+}, xe = { de: we, en: ve };
+function _(e) {
+  return xe[e];
 }
-function G(e, t, n) {
-  if (n && n.trim())
-    return n;
-  const a = S(e), r = t === 1 ? a.form.voucher.hourLabel : a.form.voucher.hoursLabel;
-  return a.bill.descriptionText.replace("{hours}", t.toString()).replace("{hourLabel}", r);
+function Q(e, t, a) {
+  if (a && a.trim())
+    return a;
+  const n = _(e), r = t === 1 ? n.form.voucher.hourLabel : n.form.voucher.hoursLabel;
+  return n.bill.descriptionText.replace("{hours}", t.toString()).replace("{hourLabel}", r);
 }
-function Be() {
-  const e = g((r) => r.voucherConfig.language), t = g((r) => r.personalInfo), n = g((r) => r.setPersonalInfo), a = S(e);
-  return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ h("div", { className: "form-control", children: [
-      /* @__PURE__ */ o("label", { className: "label", children: /* @__PURE__ */ o("span", { className: "label-text font-medium", children: a.form.personalInfo.name }) }),
-      /* @__PURE__ */ o(
+function Ze() {
+  const e = f((r) => r.voucherConfig.language), t = f((r) => r.personalInfo), a = f((r) => r.setPersonalInfo), n = _(e);
+  return /* @__PURE__ */ m("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ m("div", { className: "form-control", children: [
+      /* @__PURE__ */ i("label", { className: "label", children: /* @__PURE__ */ i("span", { className: "label-text font-medium", children: n.form.personalInfo.name }) }),
+      /* @__PURE__ */ i(
         "input",
         {
           type: "text",
-          placeholder: a.form.personalInfo.namePlaceholder,
+          placeholder: n.form.personalInfo.namePlaceholder,
           className: "input input-bordered w-full",
           value: t.name,
-          onChange: (r) => n({ name: r.target.value })
+          onChange: (r) => a({ name: r.target.value })
         }
       )
     ] }),
-    /* @__PURE__ */ h("div", { className: "form-control", children: [
-      /* @__PURE__ */ o("label", { className: "label", children: /* @__PURE__ */ o("span", { className: "label-text font-medium", children: a.form.personalInfo.email }) }),
-      /* @__PURE__ */ o(
+    /* @__PURE__ */ m("div", { className: "form-control", children: [
+      /* @__PURE__ */ i("label", { className: "label", children: /* @__PURE__ */ i("span", { className: "label-text font-medium", children: n.form.personalInfo.email }) }),
+      /* @__PURE__ */ i(
         "input",
         {
           type: "email",
-          placeholder: a.form.personalInfo.emailPlaceholder,
+          placeholder: n.form.personalInfo.emailPlaceholder,
           className: "input input-bordered w-full",
           value: t.email,
-          onChange: (r) => n({ email: r.target.value })
+          onChange: (r) => a({ email: r.target.value })
         }
       )
     ] }),
-    /* @__PURE__ */ h("div", { className: "form-control", children: [
-      /* @__PURE__ */ o("label", { className: "label", children: /* @__PURE__ */ o("span", { className: "label-text font-medium", children: a.form.personalInfo.phone }) }),
-      /* @__PURE__ */ o(
+    /* @__PURE__ */ m("div", { className: "form-control", children: [
+      /* @__PURE__ */ i("label", { className: "label", children: /* @__PURE__ */ i("span", { className: "label-text font-medium", children: n.form.personalInfo.phone }) }),
+      /* @__PURE__ */ i(
         "input",
         {
           type: "tel",
-          placeholder: a.form.personalInfo.phonePlaceholder,
+          placeholder: n.form.personalInfo.phonePlaceholder,
           className: "input input-bordered w-full",
           value: t.phone,
-          onChange: (r) => n({ phone: r.target.value })
+          onChange: (r) => a({ phone: r.target.value })
         }
       )
     ] })
   ] });
 }
-const F = {}, me = "https://api.stability.ai/v1/generation", ue = {
+const D = {}, ke = "https://api.stability.ai/v1/generation", Ie = "https://clipdrop-api.co/remove-background/v1", ee = "stability_api_key", te = "clipdrop_api_key", Pe = {
   vintage: "portrait in the style of vintage currency engraving, fine line work, crosshatching, sepia tones, detailed stippling, classic bank note portrait style",
   engraved: "portrait as detailed intaglio engraving, currency bill style, fine parallel lines, high contrast, official government portrait",
   currency: "portrait rendered as US dollar bill engraving, official currency portrait style, green tint, fine line engraving technique"
-};
-function ge(e) {
-  var i;
-  const t = e.split(","), n = ((i = t[0].match(/:(.*?);/)) == null ? void 0 : i[1]) || "image/png", a = atob(t[1]), r = a.length, s = new Uint8Array(r);
-  for (let d = 0; d < r; d++)
-    s[d] = a.charCodeAt(d);
-  return new Blob([s], { type: n });
+}, G = [
+  { width: 1024, height: 1024 },
+  { width: 1152, height: 896 },
+  { width: 1216, height: 832 },
+  { width: 1344, height: 768 },
+  { width: 1536, height: 640 },
+  { width: 640, height: 1536 },
+  { width: 768, height: 1344 },
+  { width: 832, height: 1216 },
+  { width: 896, height: 1152 }
+];
+function Ee(e, t) {
+  const a = e / t;
+  let n = G[0], r = 1 / 0;
+  for (const o of G) {
+    const d = o.width / o.height, l = Math.abs(a - d);
+    l < r && (r = l, n = o);
+  }
+  return n;
+}
+function Ne(e) {
+  return new Promise((t, a) => {
+    const n = new Image();
+    n.onload = () => {
+      const r = Ee(n.width, n.height), o = document.createElement("canvas");
+      o.width = r.width, o.height = r.height;
+      const d = o.getContext("2d");
+      if (!d) {
+        a(new Error("Failed to get canvas context"));
+        return;
+      }
+      const l = n.width / n.height, s = r.width / r.height;
+      let c = 0, u = 0, g = n.width, b = n.height;
+      l > s ? (g = n.height * s, c = (n.width - g) / 2) : (b = n.width / s, u = (n.height - b) / 2), d.drawImage(n, c, u, g, b, 0, 0, r.width, r.height), t(o.toDataURL("image/png"));
+    }, n.onerror = () => a(new Error("Failed to load image")), n.src = e;
+  });
+}
+function ne(e) {
+  var d;
+  const t = e.split(","), a = ((d = t[0].match(/:(.*?);/)) == null ? void 0 : d[1]) || "image/png", n = atob(t[1]), r = n.length, o = new Uint8Array(r);
+  for (let l = 0; l < r; l++)
+    o[l] = n.charCodeAt(l);
+  return new Blob([o], { type: a });
 }
-function X() {
+function ae() {
   var t;
-  const e = typeof import.meta < "u" && (F == null ? void 0 : F.VITE_STABILITY_API_KEY) || typeof process < "u" && ((t = process.env) == null ? void 0 : t.NEXT_PUBLIC_STABILITY_API_KEY);
-  return e && e !== "your-api-key-here" ? e : typeof localStorage < "u" ? localStorage.getItem("stability_api_key") : null;
+  const e = typeof import.meta < "u" && (D == null ? void 0 : D.VITE_STABILITY_API_KEY) || typeof process < "u" && ((t = process.env) == null ? void 0 : t.NEXT_PUBLIC_STABILITY_API_KEY);
+  return e && e !== "your-api-key-here" ? e : typeof localStorage < "u" ? localStorage.getItem(ee) : null;
 }
-function fe(e) {
-  localStorage.setItem("stability_api_key", e);
+function Ce(e) {
+  localStorage.setItem(ee, e);
 }
-function Y() {
-  return X() !== null;
+function Z() {
+  return ae() !== null;
 }
-async function be(e) {
-  const t = X();
+function re() {
+  var t;
+  const e = typeof import.meta < "u" && (D == null ? void 0 : D.VITE_CLIPDROP_API_KEY) || typeof process < "u" && ((t = process.env) == null ? void 0 : t.NEXT_PUBLIC_CLIPDROP_API_KEY);
+  return e && e !== "your-api-key-here" ? e : typeof localStorage < "u" ? localStorage.getItem(te) : null;
+}
+function Se(e) {
+  localStorage.setItem(te, e);
+}
+function Ae() {
+  return re() !== null;
+}
+async function Le(e) {
+  const t = ae();
   if (!t)
     throw new Error("No Stability AI API key configured");
-  const { imageDataUrl: n, style: a, strength: r = 0.35 } = e, s = ge(n), i = new FormData();
-  i.append("init_image", s, "portrait.png"), i.append("init_image_mode", "IMAGE_STRENGTH"), i.append("image_strength", String(1 - r)), i.append("text_prompts[0][text]", ue[a]), i.append("text_prompts[0][weight]", "1"), i.append("cfg_scale", "7"), i.append("samples", "1"), i.append("steps", "30");
-  const l = await fetch(`${me}/stable-diffusion-xl-1024-v1-0/image-to-image`, {
+  const { imageDataUrl: a, style: n, strength: r = 0.35 } = e, o = await Ne(a), d = ne(o), l = new FormData();
+  l.append("init_image", d, "portrait.png"), l.append("init_image_mode", "IMAGE_STRENGTH"), l.append("image_strength", String(1 - r)), l.append("text_prompts[0][text]", Pe[n]), l.append("text_prompts[0][weight]", "1"), l.append("cfg_scale", "7"), l.append("samples", "1"), l.append("steps", "30");
+  const c = await fetch(`${ke}/stable-diffusion-xl-1024-v1-0/image-to-image`, {
     method: "POST",
     headers: {
       Authorization: `Bearer ${t}`,
       Accept: "application/json"
     },
-    body: i
+    body: l
   });
-  if (!l.ok) {
-    const f = await l.text();
-    throw console.error("Stability AI error:", f), l.status === 401 ? new Error("Invalid API key") : l.status === 402 ? new Error("Insufficient credits") : l.status === 429 ? new Error("Rate limit exceeded. Please try again later.") : new Error(`API error: ${l.status}`);
+  if (!c.ok) {
+    const g = await c.text();
+    throw console.error("Stability AI error:", g), c.status === 401 ? new Error("Invalid API key") : c.status === 402 ? new Error("Insufficient credits") : c.status === 429 ? new Error("Rate limit exceeded. Please try again later.") : new Error(`API error: ${c.status}`);
   }
-  const c = await l.json();
-  if (!c.artifacts || c.artifacts.length === 0)
+  const u = await c.json();
+  if (!u.artifacts || u.artifacts.length === 0)
     throw new Error("No image generated");
-  return `data:image/png;base64,${c.artifacts[0].base64}`;
+  return `data:image/png;base64,${u.artifacts[0].base64}`;
+}
+async function Te(e) {
+  const t = re();
+  if (!t)
+    throw new Error("No Clipdrop API key configured");
+  const a = ne(e), n = new FormData();
+  n.append("image_file", a, "image.png");
+  const r = await fetch(Ie, {
+    method: "POST",
+    headers: {
+      "x-api-key": t
+    },
+    body: n
+  });
+  if (!r.ok) {
+    const d = await r.text();
+    throw console.error("Clipdrop error:", d), r.status === 401 ? new Error("Invalid API key") : r.status === 402 ? new Error("Insufficient credits") : r.status === 429 ? new Error("Rate limit exceeded. Please try again later.") : new Error(`API error: ${r.status}`);
+  }
+  const o = await r.blob();
+  return new Promise((d, l) => {
+    const s = new FileReader();
+    s.onload = () => d(s.result), s.onerror = () => l(new Error("Failed to read result")), s.readAsDataURL(o);
+  });
 }
-async function q(e) {
-  return new Promise((t, n) => {
-    const a = new Image();
-    a.onload = () => {
-      const r = document.createElement("canvas"), s = r.getContext("2d");
-      if (!s) {
-        n(new Error("Failed to get canvas context"));
+async function X(e) {
+  return new Promise((t, a) => {
+    const n = new Image();
+    n.onload = () => {
+      const r = document.createElement("canvas"), o = r.getContext("2d");
+      if (!o) {
+        a(new Error("Failed to get canvas context"));
         return;
       }
-      r.width = a.width, r.height = a.height, s.filter = "sepia(0.3) contrast(1.1) saturate(0.9)", s.drawImage(a, 0, 0), t(r.toDataURL("image/png"));
-    }, a.onerror = () => n(new Error("Failed to load image")), a.src = e;
+      r.width = n.width, r.height = n.height, o.filter = "sepia(0.3) contrast(1.1) saturate(0.9)", o.drawImage(n, 0, 0), t(r.toDataURL("image/png"));
+    }, n.onerror = () => a(new Error("Failed to load image")), n.src = e;
   });
 }
-function ve() {
-  const [e, t] = C(!1), [n, a] = C(null), [r, s] = C(Y()), i = E(() => a(null), []), d = E((c) => {
-    fe(c), s(!0), a(null);
-  }, []);
+function De() {
+  const [e, t] = C(!1), [a, n] = C(!1), [r, o] = C(null), [d, l] = C(Z()), [s, c] = C(Ae()), u = S(() => o(null), []), g = S((x) => {
+    Ce(x), l(!0), o(null);
+  }, []), b = S((x) => {
+    Se(x), c(!0), o(null);
+  }, []), w = S(
+    async (x, k = "vintage") => {
+      t(!0), o(null);
+      try {
+        return Z() ? await Le({
+          imageDataUrl: x,
+          style: k,
+          strength: 0.35
+        }) : await X(x);
+      } catch (v) {
+        const E = v instanceof Error ? v.message : "Enhancement failed";
+        if (o(E), E.includes("API") || E.includes("key"))
+          try {
+            return await X(x);
+          } catch {
+            throw v;
+          }
+        throw v;
+      } finally {
+        t(!1);
+      }
+    },
+    []
+  ), h = S(
+    async (x) => {
+      n(!0), o(null);
+      try {
+        return await Te(x);
+      } catch (k) {
+        const v = k instanceof Error ? k.message : "Background removal failed";
+        throw o(v), k;
+      } finally {
+        n(!1);
+      }
+    },
+    []
+  );
   return {
-    enhance: E(
-      async (c, f = "vintage") => {
-        t(!0), a(null);
-        try {
-          return Y() ? await be({
-            imageDataUrl: c,
-            style: f,
-            strength: 0.35
-          }) : await q(c);
-        } catch (m) {
-          const b = m instanceof Error ? m.message : "Enhancement failed";
-          if (a(b), b.includes("API") || b.includes("key"))
-            try {
-              return await q(c);
-            } catch {
-              throw m;
-            }
-          throw m;
-        } finally {
-          t(!1);
-        }
-      },
-      []
-    ),
+    enhance: w,
+    removeBg: h,
     isEnhancing: e,
-    error: n,
-    hasKey: r,
-    setApiKey: d,
-    clearError: i
+    isRemovingBg: a,
+    error: r,
+    hasKey: d,
+    setApiKey: g,
+    hasClipdropKey: s,
+    setClipdropKey: b,
+    clearError: u
   };
 }
-function ye({ isOpen: e, onClose: t, onSubmit: n }) {
-  const a = g((c) => c.voucherConfig.language), [r, s] = C("");
+function _e({ isOpen: e, onClose: t, onSubmit: a }) {
+  const n = f((c) => c.voucherConfig.language), [r, o] = C("");
   if (!e) return null;
-  const i = (c) => {
-    c.preventDefault(), r.trim() && (n(r.trim()), s(""), t());
-  }, l = {
+  const d = (c) => {
+    c.preventDefault(), r.trim() && (a(r.trim()), o(""), t());
+  }, s = {
     de: {
       title: "Stability AI API Key",
       description: "Um die AI-Bildverbesserung zu nutzen, benötigst du einen Stability AI API Key. Du kannst ihn auf platform.stability.ai erhalten.",
@@ -347,108 +436,116 @@ function ye({ isOpen: e, onClose: t, onSubmit: n }) {
       cancel: "Cancel",
       hint: "The key is stored locally in your browser."
     }
-  }[a];
-  return /* @__PURE__ */ h("dialog", { className: "modal modal-open", children: [
-    /* @__PURE__ */ h("div", { className: "modal-box", children: [
-      /* @__PURE__ */ o("h3", { className: "font-bold text-lg", children: l.title }),
-      /* @__PURE__ */ o("p", { className: "py-4 text-sm opacity-80", children: l.description }),
-      /* @__PURE__ */ h("form", { onSubmit: i, children: [
-        /* @__PURE__ */ h("div", { className: "form-control", children: [
-          /* @__PURE__ */ o(
+  }[n];
+  return /* @__PURE__ */ m("dialog", { className: "modal modal-open", children: [
+    /* @__PURE__ */ m("div", { className: "modal-box", children: [
+      /* @__PURE__ */ i("h3", { className: "font-bold text-lg", children: s.title }),
+      /* @__PURE__ */ i("p", { className: "py-4 text-sm opacity-80", children: s.description }),
+      /* @__PURE__ */ m("form", { onSubmit: d, children: [
+        /* @__PURE__ */ m("div", { className: "form-control", children: [
+          /* @__PURE__ */ i(
             "input",
             {
               type: "password",
-              placeholder: l.placeholder,
+              placeholder: s.placeholder,
               className: "input input-bordered w-full",
               value: r,
-              onChange: (c) => s(c.target.value),
+              onChange: (c) => o(c.target.value),
               autoFocus: !0
             }
           ),
-          /* @__PURE__ */ o("label", { className: "label", children: /* @__PURE__ */ o("span", { className: "label-text-alt", children: l.hint }) })
+          /* @__PURE__ */ i("label", { className: "label", children: /* @__PURE__ */ i("span", { className: "label-text-alt", children: s.hint }) })
         ] }),
-        /* @__PURE__ */ h("div", { className: "modal-action", children: [
-          /* @__PURE__ */ o("button", { type: "button", className: "btn btn-ghost", onClick: t, children: l.cancel }),
-          /* @__PURE__ */ o("button", { type: "submit", className: "btn btn-primary", disabled: !r.trim(), children: l.submit })
+        /* @__PURE__ */ m("div", { className: "modal-action", children: [
+          /* @__PURE__ */ i("button", { type: "button", className: "btn btn-ghost", onClick: t, children: s.cancel }),
+          /* @__PURE__ */ i("button", { type: "submit", className: "btn btn-primary", disabled: !r.trim(), children: s.submit })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ o("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ o("button", { onClick: t, children: "close" }) })
+    /* @__PURE__ */ i("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ i("button", { onClick: t, children: "close" }) })
   ] });
 }
-function Re() {
-  const e = g((p) => p.voucherConfig.language), t = g((p) => p.portrait), n = g((p) => p.setPortrait), a = g((p) => p.setEnhancedPortrait), r = g((p) => p.toggleUseEnhanced), s = g((p) => p.setPortraitZoom), { enhance: i, isEnhancing: d, error: l, hasKey: c, setApiKey: f } = ve(), m = S(e), b = _(null), [y, u] = C(!1), [P, N] = C(!1), k = E(
-    (p) => {
+function Xe() {
+  const e = f((p) => p.voucherConfig.language), t = f((p) => p.portrait), a = f((p) => p.setPortrait), n = f((p) => p.setEnhancedPortrait), r = f((p) => p.toggleUseEnhanced), o = f((p) => p.setPortraitZoom), { enhance: d, removeBg: l, isEnhancing: s, isRemovingBg: c, error: u, hasKey: g, setApiKey: b, hasClipdropKey: w } = De(), h = _(e), x = T(null), [k, v] = C(!1), [E, y] = C(!1), N = S(
+    async (p) => {
       if (!p.type.startsWith("image/"))
         return;
-      const w = new FileReader();
-      w.onload = (H) => {
-        var K;
-        const ie = (K = H.target) == null ? void 0 : K.result;
-        n(ie);
-      }, w.readAsDataURL(p);
+      const I = new FileReader();
+      I.onload = async ($) => {
+        var Y;
+        const F = (Y = $.target) == null ? void 0 : Y.result;
+        if (w)
+          try {
+            const O = await l(F);
+            a(O);
+          } catch (O) {
+            console.error("Background removal failed, using original:", O), a(F);
+          }
+        else
+          a(F);
+      }, I.readAsDataURL(p);
     },
-    [n]
-  ), L = E(
+    [a, w, l]
+  ), R = S(
     (p) => {
-      p.preventDefault(), u(!1);
-      const w = p.dataTransfer.files[0];
-      w && k(w);
+      p.preventDefault(), v(!1);
+      const I = p.dataTransfer.files[0];
+      I && N(I);
     },
-    [k]
-  ), v = E((p) => {
-    p.preventDefault(), u(!0);
-  }, []), I = E((p) => {
-    p.preventDefault(), u(!1);
-  }, []), D = () => {
+    [N]
+  ), B = S((p) => {
+    p.preventDefault(), v(!0);
+  }, []), U = S((p) => {
+    p.preventDefault(), v(!1);
+  }, []), M = () => {
     var p;
-    (p = b.current) == null || p.click();
-  }, $ = (p) => {
-    var H;
-    const w = (H = p.target.files) == null ? void 0 : H[0];
-    w && k(w);
-  }, M = async () => {
+    (p = x.current) == null || p.click();
+  }, he = (p) => {
+    var $;
+    const I = ($ = p.target.files) == null ? void 0 : $[0];
+    I && N(I);
+  }, pe = async () => {
     if (t.original) {
-      if (!c) {
-        N(!0);
+      if (!g) {
+        y(!0);
         return;
       }
       try {
-        const p = await i(t.original, "vintage");
-        a(p);
+        const p = await d(t.original, "vintage");
+        n(p);
       } catch (p) {
         console.error("Enhancement failed:", p);
       }
     }
-  }, U = async (p) => {
-    if (f(p), t.original)
+  }, ue = async (p) => {
+    if (b(p), t.original)
       try {
-        const w = await i(t.original, "vintage");
-        a(w);
-      } catch (w) {
-        console.error("Enhancement failed:", w);
+        const I = await d(t.original, "vintage");
+        n(I);
+      } catch (I) {
+        console.error("Enhancement failed:", I);
       }
-  }, re = () => {
-    n(null);
-  }, oe = t.useEnhanced && t.enhanced ? t.enhanced : t.original;
-  return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
-    t.original ? /* @__PURE__ */ h("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ o("div", { className: "flex justify-center", children: /* @__PURE__ */ h("div", { className: "relative", children: [
-        /* @__PURE__ */ o("div", { className: "w-32 h-32 rounded-full overflow-hidden border-4 border-currency-gold shadow-lg", children: /* @__PURE__ */ o(
+  }, me = () => {
+    a(null);
+  }, ge = t.useEnhanced && t.enhanced ? t.enhanced : t.original;
+  return /* @__PURE__ */ m("div", { className: "space-y-4", children: [
+    t.original ? /* @__PURE__ */ m("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ i("div", { className: "flex justify-center", children: /* @__PURE__ */ m("div", { className: "relative", children: [
+        /* @__PURE__ */ i("div", { className: "w-32 h-32 rounded-full overflow-hidden border-4 border-currency-gold shadow-lg", children: /* @__PURE__ */ i(
           "img",
           {
-            src: oe || "",
+            src: ge || "",
             alt: "Portrait",
             className: "w-full h-full object-cover",
             style: { transform: `scale(${t.zoom})` }
           }
         ) }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ i(
           "button",
           {
             className: "btn btn-circle btn-xs btn-error absolute -top-1 -right-1",
-            onClick: re,
-            children: /* @__PURE__ */ o(
+            onClick: me,
+            children: /* @__PURE__ */ i(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -456,7 +553,7 @@ function Re() {
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                children: /* @__PURE__ */ o(
+                children: /* @__PURE__ */ i(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -470,15 +567,15 @@ function Re() {
           }
         )
       ] }) }),
-      /* @__PURE__ */ h("div", { className: "form-control", children: [
-        /* @__PURE__ */ h("label", { className: "label", children: [
-          /* @__PURE__ */ o("span", { className: "label-text", children: m.form.portrait.zoom }),
-          /* @__PURE__ */ h("span", { className: "label-text-alt", children: [
+      /* @__PURE__ */ m("div", { className: "form-control", children: [
+        /* @__PURE__ */ m("label", { className: "label", children: [
+          /* @__PURE__ */ i("span", { className: "label-text", children: h.form.portrait.zoom }),
+          /* @__PURE__ */ m("span", { className: "label-text-alt", children: [
             Math.round(t.zoom * 100),
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ i(
           "input",
           {
             type: "range",
@@ -486,23 +583,23 @@ function Re() {
             max: "2",
             step: "0.05",
             value: t.zoom,
-            onChange: (p) => s(parseFloat(p.target.value)),
+            onChange: (p) => o(parseFloat(p.target.value)),
             className: "range range-primary range-sm"
           }
         )
       ] }),
-      c && /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ o(
+      g && /* @__PURE__ */ m("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ i(
           "button",
           {
-            className: `btn btn-secondary ${d ? "loading" : ""}`,
-            onClick: M,
-            disabled: d,
-            children: d ? /* @__PURE__ */ h(z, { children: [
-              /* @__PURE__ */ o("span", { className: "loading loading-spinner loading-sm" }),
-              m.form.portrait.enhancing
-            ] }) : /* @__PURE__ */ h(z, { children: [
-              /* @__PURE__ */ o(
+            className: `btn btn-secondary ${s ? "loading" : ""}`,
+            onClick: pe,
+            disabled: s,
+            children: s ? /* @__PURE__ */ m(K, { children: [
+              /* @__PURE__ */ i("span", { className: "loading loading-spinner loading-sm" }),
+              h.form.portrait.enhancing
+            ] }) : /* @__PURE__ */ m(K, { children: [
+              /* @__PURE__ */ i(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -510,7 +607,7 @@ function Re() {
                   fill: "none",
                   viewBox: "0 0 24 24",
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ o(
+                  children: /* @__PURE__ */ i(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -521,16 +618,16 @@ function Re() {
                   )
                 }
               ),
-              m.form.portrait.enhance
+              h.form.portrait.enhance
             ] })
           }
         ),
-        l && /* @__PURE__ */ h("div", { className: "alert alert-warning text-sm py-2", children: [
-          /* @__PURE__ */ o("svg", { xmlns: "http://www.w3.org/2000/svg", className: "stroke-current shrink-0 h-5 w-5", fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
-          /* @__PURE__ */ o("span", { children: l })
+        u && /* @__PURE__ */ m("div", { className: "alert alert-warning text-sm py-2", children: [
+          /* @__PURE__ */ i("svg", { xmlns: "http://www.w3.org/2000/svg", className: "stroke-current shrink-0 h-5 w-5", fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ i("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }),
+          /* @__PURE__ */ i("span", { children: u })
         ] }),
-        t.enhanced && /* @__PURE__ */ o("div", { className: "form-control", children: /* @__PURE__ */ h("label", { className: "label cursor-pointer justify-start gap-3", children: [
-          /* @__PURE__ */ o(
+        t.enhanced && /* @__PURE__ */ i("div", { className: "form-control", children: /* @__PURE__ */ m("label", { className: "label cursor-pointer justify-start gap-3", children: [
+          /* @__PURE__ */ i(
             "input",
             {
               type: "checkbox",
@@ -539,30 +636,33 @@ function Re() {
               onChange: r
             }
           ),
-          /* @__PURE__ */ o("span", { className: "label-text", children: t.useEnhanced ? m.form.portrait.useEnhanced : m.form.portrait.useOriginal })
+          /* @__PURE__ */ i("span", { className: "label-text", children: t.useEnhanced ? h.form.portrait.useEnhanced : h.form.portrait.useOriginal })
         ] }) })
       ] })
-    ] }) : /* @__PURE__ */ h(
+    ] }) : /* @__PURE__ */ m(
       "div",
       {
-        className: `border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${y ? "border-primary bg-primary/10" : "border-base-300 hover:border-primary hover:bg-base-200"}`,
-        onDrop: L,
-        onDragOver: v,
-        onDragLeave: I,
-        onClick: D,
+        className: `border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${c ? "border-primary bg-primary/10 pointer-events-none" : k ? "border-primary bg-primary/10" : "border-base-300 hover:border-primary hover:bg-base-200"}`,
+        onDrop: R,
+        onDragOver: B,
+        onDragLeave: U,
+        onClick: M,
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             "input",
             {
-              ref: b,
+              ref: x,
               type: "file",
               accept: "image/*",
               className: "hidden",
-              onChange: $
+              onChange: he
             }
           ),
-          /* @__PURE__ */ h("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ o(
+          c ? /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ i("span", { className: "loading loading-spinner loading-lg text-primary" }),
+            /* @__PURE__ */ i("p", { className: "font-medium", children: e === "de" ? "Hintergrund wird entfernt..." : "Removing background..." })
+          ] }) : /* @__PURE__ */ m("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ i(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -570,7 +670,7 @@ function Re() {
                 fill: "none",
                 viewBox: "0 0 24 24",
                 stroke: "currentColor",
-                children: /* @__PURE__ */ o(
+                children: /* @__PURE__ */ i(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -581,106 +681,67 @@ function Re() {
                 )
               }
             ),
-            /* @__PURE__ */ o("p", { className: "font-medium", children: m.form.portrait.upload }),
-            /* @__PURE__ */ o("p", { className: "text-sm text-base-content/60", children: m.form.portrait.dragDrop })
+            /* @__PURE__ */ i("p", { className: "font-medium", children: h.form.portrait.upload }),
+            /* @__PURE__ */ i("p", { className: "text-sm text-base-content/60", children: h.form.portrait.dragDrop })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ o(
-      ye,
+    /* @__PURE__ */ i(
+      _e,
       {
-        isOpen: P,
-        onClose: () => N(!1),
-        onSubmit: U
+        isOpen: E,
+        onClose: () => y(!1),
+        onSubmit: ue
       }
     )
   ] });
 }
-const we = [1, 5, 10];
-function Me() {
-  const e = g((i) => i.voucherConfig.language), t = g((i) => i.voucherConfig), n = g((i) => i.setHours), a = g((i) => i.setVoucherConfig), r = S(e), s = (i) => i === 1 ? r.form.voucher.hourLabel : r.form.voucher.hoursLabel;
-  return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ h("div", { className: "form-control", children: [
-      /* @__PURE__ */ o("label", { className: "label", children: /* @__PURE__ */ o("span", { className: "label-text font-medium", children: r.form.voucher.hours }) }),
-      /* @__PURE__ */ o("div", { className: "join w-full", children: we.map((i) => /* @__PURE__ */ h(
-        "button",
-        {
-          className: `join-item btn flex-1 ${t.hours === i ? "btn-primary" : "btn-outline"}`,
-          onClick: () => n(i),
-          children: [
-            i,
-            " ",
-            s(i)
-          ]
-        },
-        i
-      )) })
-    ] }),
-    /* @__PURE__ */ h("div", { className: "form-control", children: [
-      /* @__PURE__ */ o("label", { className: "label", children: /* @__PURE__ */ o("span", { className: "label-text font-medium", children: r.form.voucher.description }) }),
-      /* @__PURE__ */ o(
-        "textarea",
-        {
-          className: "textarea textarea-bordered h-24 resize-none w-full",
-          placeholder: r.form.voucher.descriptionPlaceholder,
-          value: t.description,
-          onChange: (i) => a({ description: i.target.value }),
-          maxLength: 200
-        }
-      ),
-      /* @__PURE__ */ h("label", { className: "label", children: [
-        /* @__PURE__ */ o("span", { className: "label-text-alt" }),
-        /* @__PURE__ */ h("span", { className: "label-text-alt", children: [
-          t.description.length,
-          "/200"
-        ] })
-      ] })
-    ] })
-  ] });
+function Je() {
+  return null;
 }
-const x = typeof import.meta < "u" && "/" || "/", xe = {
+const P = typeof import.meta < "u" && "/" || "/", Re = {
   en: {
     1: {
-      front: `${x}templates/front_ldpi_en.png`,
-      back: `${x}templates/back_ldpi_en.png`,
+      front: `${P}templates/front_ldpi_en.png`,
+      back: `${P}templates/back_ldpi_en.png`,
       width: 1536,
       height: 1024
     },
     5: {
-      front: `${x}templates/front_ldpi_en.png`,
-      back: `${x}templates/back_ldpi_en.png`,
+      front: `${P}templates/front_ldpi_en.png`,
+      back: `${P}templates/back_ldpi_en.png`,
       width: 1536,
       height: 1024
     },
     10: {
-      front: `${x}templates/front_ldpi_en.png`,
-      back: `${x}templates/back_ldpi_en.png`,
+      front: `${P}templates/front_ldpi_en.png`,
+      back: `${P}templates/back_ldpi_en.png`,
       width: 1536,
       height: 1024
     }
   },
   de: {
     1: {
-      front: `${x}templates/front_hdpi_de.webp`,
-      back: `${x}templates/back_hdpi_de.webp`,
+      front: `${P}templates/front_hdpi_de.webp`,
+      back: `${P}templates/back_hdpi_de.webp`,
       width: 6144,
       height: 3200
     },
     5: {
-      front: `${x}templates/front_hdpi_de.webp`,
-      back: `${x}templates/back_hdpi_de.webp`,
+      front: `${P}templates/front_hdpi_de.webp`,
+      back: `${P}templates/back_hdpi_de.webp`,
       width: 6144,
       height: 3200
     },
     10: {
-      front: `${x}templates/front_hdpi_de.webp`,
-      back: `${x}templates/back_hdpi_de.webp`,
+      front: `${P}templates/front_hdpi_de.webp`,
+      back: `${P}templates/back_hdpi_de.webp`,
       width: 6144,
       height: 3200
     }
   }
-}, T = {
+}, A = {
   front: {
     portrait: {
       x: 768,
@@ -726,7 +787,7 @@ const x = typeof import.meta < "u" && "/" || "/", xe = {
       align: "center"
     }
   }
-}, A = {
+}, L = {
   front: {
     portrait: {
       x: 3074,
@@ -773,140 +834,140 @@ const x = typeof import.meta < "u" && "/" || "/", xe = {
     }
   }
 };
-function J(e) {
-  return e === "de" ? A : T;
+function oe(e) {
+  return e === "de" ? L : A;
 }
-function Q(e, t) {
-  return xe[e][t];
+function ie(e, t) {
+  return Re[e][t];
 }
 const W = /* @__PURE__ */ new Map();
 async function j(e) {
-  return W.has(e) ? W.get(e) : new Promise((t, n) => {
-    const a = new Image();
-    a.crossOrigin = "anonymous", a.onload = () => {
-      W.set(e, a), t(a);
-    }, a.onerror = n, a.src = e;
+  return W.has(e) ? W.get(e) : new Promise((t, a) => {
+    const n = new Image();
+    n.crossOrigin = "anonymous", n.onload = () => {
+      W.set(e, n), t(n);
+    }, n.onerror = a, n.src = e;
   });
 }
-function ee(e, t, n, a) {
-  e.drawImage(t, 0, 0, n, a);
+function se(e, t, a, n) {
+  e.drawImage(t, 0, 0, a, n);
 }
-function ke(e, t, n, a, r, s, i = 1) {
-  e.save(), e.beginPath(), e.ellipse(n, a, r, s, 0, 0, Math.PI * 2), e.closePath(), e.clip();
-  const d = t.width / t.height, l = r / s, c = r * 2, f = s * 2;
-  let m, b;
-  d > l ? (b = f, m = f * d) : (m = c, b = c / d), m *= i, b *= i;
-  const y = n - m / 2, u = a - b / 2;
-  e.drawImage(t, y, u, m, b), e.restore();
+function Be(e, t, a, n, r, o, d = 1) {
+  e.save(), e.beginPath(), e.ellipse(a, n, r, o, 0, 0, Math.PI * 2), e.closePath(), e.clip();
+  const l = t.width / t.height, s = r / o, c = r * 2, u = o * 2;
+  let g, b;
+  l > s ? (b = u, g = u * l) : (g = c, b = c / l), g *= d, b *= d;
+  const w = a - g / 2, h = n - b / 2;
+  e.drawImage(t, w, h, g, b), e.restore();
 }
-function te(e, t, n, a = "#2a3a2a") {
-  e.save(), e.font = `${n.fontSize}px "Times New Roman", serif`, e.textAlign = n.align || "center", e.textBaseline = "middle", e.fillStyle = a, n.maxWidth ? e.fillText(t, n.x, n.y, n.maxWidth) : e.fillText(t, n.x, n.y), e.restore();
+function le(e, t, a, n = "#2a3a2a") {
+  e.save(), e.font = `${a.fontSize}px "Times New Roman", serif`, e.textAlign = a.align || "center", e.textBaseline = "middle", e.fillStyle = n, a.maxWidth ? e.fillText(t, a.x, a.y, a.maxWidth) : e.fillText(t, a.x, a.y), e.restore();
 }
-function Ne(e, t, n, a = "#2a3a2a") {
-  e.save(), e.font = `${n.fontSize}px "Times New Roman", serif`, e.textAlign = n.align || "center", e.textBaseline = "top", e.fillStyle = a;
-  const r = n.maxWidth || 400, s = n.lineHeight || n.fontSize * 1.4, i = t.split(" "), d = [];
-  let l = "";
-  for (const m of i) {
-    const b = l ? `${l} ${m}` : m;
-    e.measureText(b).width > r && l ? (d.push(l), l = m) : l = b;
+function $e(e, t, a, n = "#2a3a2a") {
+  e.save(), e.font = `${a.fontSize}px "Times New Roman", serif`, e.textAlign = a.align || "center", e.textBaseline = "top", e.fillStyle = n;
+  const r = a.maxWidth || 400, o = a.lineHeight || a.fontSize * 1.4, d = t.split(" "), l = [];
+  let s = "";
+  for (const g of d) {
+    const b = s ? `${s} ${g}` : g;
+    e.measureText(b).width > r && s ? (l.push(s), s = g) : s = b;
   }
-  l && d.push(l);
-  const c = d.length * s;
-  let f = n.y - c / 2;
-  for (const m of d)
-    e.fillText(m, n.x, f), f += s;
+  s && l.push(s);
+  const c = l.length * o;
+  let u = a.y - c / 2;
+  for (const g of l)
+    e.fillText(g, a.x, u), u += o;
   e.restore();
 }
-function Ie(e, t, n, a, r, s = "#2a3a2a") {
-  e.save(), e.font = `${r.fontSize}px "Times New Roman", serif`, e.textAlign = r.align || "center", e.textBaseline = "middle", e.fillStyle = s;
-  const i = r.lineHeight || r.fontSize * 1.8, d = [t, n, a].filter(Boolean), l = (d.length - 1) * i;
-  let c = r.y - l / 2;
-  for (const f of d)
-    f && (e.fillText(f, r.x, c), c += i);
+function Ke(e, t, a, n, r, o = "#2a3a2a") {
+  e.save(), e.font = `${r.fontSize}px "Times New Roman", serif`, e.textAlign = r.align || "center", e.textBaseline = "middle", e.fillStyle = o;
+  const d = r.lineHeight || r.fontSize * 1.8, l = [t, a, n].filter(Boolean), s = (l.length - 1) * d;
+  let c = r.y - s / 2;
+  for (const u of l)
+    u && (e.fillText(u, r.x, c), c += d);
   e.restore();
 }
-async function ne(e, t, n, a, r, s, i, d = 1) {
-  const l = e.getContext("2d");
-  if (!l) return;
-  e.width = s, e.height = i, l.clearRect(0, 0, s, i);
+async function ce(e, t, a, n, r, o, d, l = 1) {
+  const s = e.getContext("2d");
+  if (!s) return;
+  e.width = o, e.height = d, s.clearRect(0, 0, o, d);
   const c = await j(t);
-  if (ee(l, c, s, i), n)
+  if (se(s, c, o, d), a)
     try {
-      const f = await j(n);
-      ke(
-        l,
-        f,
+      const u = await j(a);
+      Be(
+        s,
+        u,
         r.portrait.x,
         r.portrait.y,
         r.portrait.radiusX,
         r.portrait.radiusY,
-        d
+        l
       );
-    } catch (f) {
-      console.error("Failed to load portrait:", f);
+    } catch (u) {
+      console.error("Failed to load portrait:", u);
     }
-  a && te(l, a, r.namePlate);
+  n && le(s, n, r.namePlate);
 }
-async function ae(e, t, n, a, r, s, i, d, l) {
+async function de(e, t, a, n, r, o, d, l, s) {
   const c = e.getContext("2d");
   if (!c) return;
-  e.width = d, e.height = l, c.clearRect(0, 0, d, l);
-  const f = await j(t);
-  ee(c, f, d, l), i.contactInfo && (n || a || r) && Ie(c, n, a, r, i.contactInfo), i.description && s && Ne(c, s, i.description), n && te(c, n, i.namePlate);
+  e.width = l, e.height = s, c.clearRect(0, 0, l, s);
+  const u = await j(t);
+  se(c, u, l, s), d.contactInfo && (a || n || r) && Ke(c, a, n, r, d.contactInfo), d.description && o && $e(c, o, d.description), a && le(c, a, d.namePlate);
 }
-function Ue() {
-  const e = g((v) => v.voucherConfig.language), t = g((v) => v.voucherConfig.hours), n = g((v) => v.voucherConfig.description), a = g((v) => v.personalInfo), r = g((v) => v.portrait), s = g((v) => v.currentSide), i = g((v) => v.flipSide), d = S(e), l = _(null), c = _(null), f = _(null), [m, b] = C(!1), y = Q(e, t), u = J(e), P = r.useEnhanced && r.enhanced ? r.enhanced : r.original, N = G(e, t, n);
-  O(() => {
-    l.current && ne(
-      l.current,
-      y.front,
-      P,
-      a.name,
-      u.front,
-      y.width,
-      y.height,
+function Qe() {
+  const e = f((y) => y.voucherConfig.language), t = f((y) => y.voucherConfig.hours), a = f((y) => y.voucherConfig.description), n = f((y) => y.personalInfo), r = f((y) => y.portrait), o = f((y) => y.currentSide), d = f((y) => y.flipSide), l = _(e), s = T(null), c = T(null), u = T(null), [g, b] = C(!1), w = ie(e, t), h = oe(e), x = r.useEnhanced && r.enhanced ? r.enhanced : r.original, k = Q(e, t, a);
+  q(() => {
+    s.current && ce(
+      s.current,
+      w.front,
+      x,
+      n.name,
+      h.front,
+      w.width,
+      w.height,
       r.zoom
     );
-  }, [y, P, a.name, u, r.zoom]), O(() => {
-    c.current && ae(
+  }, [w, x, n.name, h, r.zoom]), q(() => {
+    c.current && de(
       c.current,
-      y.back,
-      a.name,
-      a.email,
-      a.phone,
-      N,
-      u.back,
-      y.width,
-      y.height
+      w.back,
+      n.name,
+      n.email,
+      n.phone,
+      k,
+      h.back,
+      w.width,
+      w.height
     );
-  }, [y, a, N, u]);
-  const k = () => {
+  }, [w, n, k, h]);
+  const v = () => {
     b(!0), setTimeout(() => {
-      i(), b(!1);
+      d(), b(!1);
     }, 150);
-  }, L = y.width / y.height;
-  return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ h("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ h("div", { className: "tabs tabs-boxed bg-base-200", children: [
-        /* @__PURE__ */ o(
+  }, E = w.width / w.height;
+  return /* @__PURE__ */ m("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ m("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ m("div", { className: "tabs tabs-boxed bg-base-200", children: [
+        /* @__PURE__ */ i(
           "button",
           {
-            className: `tab ${s === "front" ? "tab-active bg-primary text-primary-content font-semibold" : ""}`,
-            onClick: () => s !== "front" && k(),
-            children: d.preview.front
+            className: `tab ${o === "front" ? "tab-active bg-primary text-primary-content font-semibold" : ""}`,
+            onClick: () => o !== "front" && v(),
+            children: l.preview.front
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ i(
           "button",
           {
-            className: `tab ${s === "back" ? "tab-active bg-primary text-primary-content font-semibold" : ""}`,
-            onClick: () => s !== "back" && k(),
-            children: d.preview.back
+            className: `tab ${o === "back" ? "tab-active bg-primary text-primary-content font-semibold" : ""}`,
+            onClick: () => o !== "back" && v(),
+            children: l.preview.back
           }
         )
       ] }),
-      /* @__PURE__ */ h("button", { className: "btn btn-ghost btn-sm", onClick: k, children: [
-        /* @__PURE__ */ o(
+      /* @__PURE__ */ m("button", { className: "btn btn-ghost btn-sm", onClick: v, children: [
+        /* @__PURE__ */ i(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -914,7 +975,7 @@ function Ue() {
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ i(
               "path",
               {
                 strokeLinecap: "round",
@@ -925,28 +986,28 @@ function Ue() {
             )
           }
         ),
-        d.preview.flip
+        l.preview.flip
       ] })
     ] }),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ m(
       "div",
       {
-        ref: f,
+        ref: u,
         className: "relative w-full overflow-hidden  shadow-lg",
-        style: { aspectRatio: L },
+        style: { aspectRatio: E },
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             "canvas",
             {
-              ref: l,
-              className: `absolute inset-0 w-full h-full transition-all duration-300 ${s === "front" ? m ? "opacity-0 scale-95" : "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`
+              ref: s,
+              className: `absolute inset-0 w-full h-full transition-all duration-300 ${o === "front" ? g ? "opacity-0 scale-95" : "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             "canvas",
             {
               ref: c,
-              className: `absolute inset-0 w-full h-full transition-all duration-300 ${s === "back" ? m ? "opacity-0 scale-95" : "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`
+              className: `absolute inset-0 w-full h-full transition-all duration-300 ${o === "back" ? g ? "opacity-0 scale-95" : "opacity-100 scale-100" : "opacity-0 scale-95 pointer-events-none"}`
             }
           )
         ]
@@ -954,86 +1015,86 @@ function Ue() {
     )
   ] });
 }
-function Fe() {
-  const e = _(null), t = _(null);
+function et() {
+  const e = T(null), t = T(null);
   return { frontCanvasRef: e, backCanvasRef: t };
 }
-async function Pe(e) {
+async function ze(e) {
   const {
     frontTemplateSrc: t,
-    backTemplateSrc: n,
-    templateWidth: a,
+    backTemplateSrc: a,
+    templateWidth: n,
     templateHeight: r,
-    layout: s,
-    portrait: i,
-    portraitZoom: d = 1,
-    name: l,
+    layout: o,
+    portrait: d,
+    portraitZoom: l = 1,
+    name: s,
     email: c,
-    phone: f,
-    description: m
-  } = e, b = document.createElement("canvas"), y = document.createElement("canvas");
+    phone: u,
+    description: g
+  } = e, b = document.createElement("canvas"), w = document.createElement("canvas");
   await Promise.all([
-    ne(b, t, i, l, s.front, a, r, d),
-    ae(y, n, l, c, f, m, s.back, a, r)
+    ce(b, t, d, s, o.front, n, r, l),
+    de(w, a, s, c, u, g, o.back, n, r)
   ]);
-  const u = new ce({
+  const h = new ye({
     orientation: "landscape",
     unit: "mm",
     format: "a4"
-  }), P = 297, N = 210, k = 10, L = a / r;
-  let v = P - k * 2, I = v / L;
-  I > N - k * 2 && (I = N - k * 2, v = I * L);
-  const D = (P - v) / 2, $ = (N - I) / 2, M = b.toDataURL("image/jpeg", 0.95);
-  u.addImage(M, "JPEG", D, $, v, I), u.addPage();
-  const U = y.toDataURL("image/jpeg", 0.95);
-  return u.addImage(U, "JPEG", D, $, v, I), u.output("blob");
+  }), x = 297, k = 210, v = 10, E = n / r;
+  let y = x - v * 2, N = y / E;
+  N > k - v * 2 && (N = k - v * 2, y = N * E);
+  const R = (x - y) / 2, B = (k - N) / 2, U = b.toDataURL("image/jpeg", 0.95);
+  h.addImage(U, "JPEG", R, B, y, N), h.addPage();
+  const M = w.toDataURL("image/jpeg", 0.95);
+  return h.addImage(M, "JPEG", R, B, y, N), h.output("blob");
 }
-function Ee(e, t) {
-  const n = URL.createObjectURL(e), a = document.createElement("a");
-  a.href = n, a.download = t, document.body.appendChild(a), a.click(), document.body.removeChild(a), URL.revokeObjectURL(n);
+function He(e, t) {
+  const a = URL.createObjectURL(e), n = document.createElement("a");
+  n.href = a, n.download = t, document.body.appendChild(n), n.click(), document.body.removeChild(n), URL.revokeObjectURL(a);
 }
-async function Ce(e) {
-  const t = await Pe(e);
-  Ee(t, e.filename);
+async function Ue(e) {
+  const t = await ze(e);
+  He(t, e.filename);
 }
-function We() {
-  const e = g((u) => u.voucherConfig.language), t = g((u) => u.voucherConfig.hours), n = g((u) => u.voucherConfig.description), a = g((u) => u.personalInfo), r = g((u) => u.portrait), s = g((u) => u.isExporting), i = g((u) => u.setIsExporting), d = S(e), l = Q(e, t), c = J(e), f = r.useEnhanced && r.enhanced ? r.enhanced : r.original, m = G(e, t, n), b = a.name.trim().length > 0 && a.email.trim().length > 0 && a.phone.trim().length > 0 && r.original !== null;
-  return /* @__PURE__ */ o(
+function tt() {
+  const e = f((h) => h.voucherConfig.language), t = f((h) => h.voucherConfig.hours), a = f((h) => h.voucherConfig.description), n = f((h) => h.personalInfo), r = f((h) => h.portrait), o = f((h) => h.isExporting), d = f((h) => h.setIsExporting), l = _(e), s = ie(e, t), c = oe(e), u = r.useEnhanced && r.enhanced ? r.enhanced : r.original, g = Q(e, t, a), b = n.name.trim().length > 0 && n.email.trim().length > 0 && n.phone.trim().length > 0 && r.original !== null;
+  return /* @__PURE__ */ i(
     "button",
     {
-      className: `btn btn-primary flex-1 ${s ? "loading" : ""}`,
+      className: `btn btn-primary flex-1 ${o ? "loading" : ""}`,
       onClick: async () => {
-        if (!(!b || s)) {
-          i(!0);
+        if (!(!b || o)) {
+          d(!0);
           try {
-            const u = `zeitgutschein-${t}h-${a.name.replace(/\s+/g, "-").toLowerCase()}.pdf`;
-            await Ce({
-              frontTemplateSrc: l.front,
-              backTemplateSrc: l.back,
-              templateWidth: l.width,
-              templateHeight: l.height,
+            const h = `zeitgutschein-${t}h-${n.name.replace(/\s+/g, "-").toLowerCase()}.pdf`;
+            await Ue({
+              frontTemplateSrc: s.front,
+              backTemplateSrc: s.back,
+              templateWidth: s.width,
+              templateHeight: s.height,
               layout: c,
-              portrait: f,
+              portrait: u,
               portraitZoom: r.zoom,
-              name: a.name,
-              email: a.email,
-              phone: a.phone,
-              description: m,
-              filename: u
+              name: n.name,
+              email: n.email,
+              phone: n.phone,
+              description: g,
+              filename: h
             });
-          } catch (u) {
-            console.error("PDF export failed:", u);
+          } catch (h) {
+            console.error("PDF export failed:", h);
           } finally {
-            i(!1);
+            d(!1);
           }
         }
       },
-      disabled: !b || s,
-      children: s ? /* @__PURE__ */ h(z, { children: [
-        /* @__PURE__ */ o("span", { className: "loading loading-spinner loading-sm" }),
-        d.export.exporting
-      ] }) : /* @__PURE__ */ h(z, { children: [
-        /* @__PURE__ */ o(
+      disabled: !b || o,
+      children: o ? /* @__PURE__ */ m(K, { children: [
+        /* @__PURE__ */ i("span", { className: "loading loading-spinner loading-sm" }),
+        l.export.exporting
+      ] }) : /* @__PURE__ */ m(K, { children: [
+        /* @__PURE__ */ i(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -1041,7 +1102,7 @@ function We() {
             fill: "none",
             viewBox: "0 0 24 24",
             stroke: "currentColor",
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ i(
               "path",
               {
                 strokeLinecap: "round",
@@ -1052,50 +1113,50 @@ function We() {
             )
           }
         ),
-        d.export.button
+        l.export.button
       ] })
     }
   );
 }
-function Se() {
-  const e = g((a) => a.voucherConfig.language), t = g((a) => a.setLanguage), n = (a) => {
-    t(a);
+function Me() {
+  const e = f((n) => n.voucherConfig.language), t = f((n) => n.setLanguage), a = (n) => {
+    t(n);
   };
-  return /* @__PURE__ */ h("div", { className: "join", children: [
-    /* @__PURE__ */ o(
+  return /* @__PURE__ */ m("div", { className: "join", children: [
+    /* @__PURE__ */ i(
       "button",
       {
         className: `join-item btn btn-sm ${e === "de" ? "btn-active btn-primary" : "btn-ghost"}`,
-        onClick: () => n("de"),
+        onClick: () => a("de"),
         children: "DE"
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ i(
       "button",
       {
         className: `join-item btn btn-sm ${e === "en" ? "btn-active btn-primary" : "btn-ghost"}`,
-        onClick: () => n("en"),
+        onClick: () => a("en"),
         children: "EN"
       }
     )
   ] });
 }
-function je() {
-  const e = g((n) => n.voucherConfig.language), t = S(e);
-  return /* @__PURE__ */ h("div", { className: "navbar bg-currency-green text-currency-cream shadow-lg", children: [
-    /* @__PURE__ */ o("div", { className: "navbar-start", children: /* @__PURE__ */ o("a", { className: "btn btn-ghost text-xl font-currency font-bold", children: t.header.title }) }),
-    /* @__PURE__ */ o("div", { className: "navbar-center hidden sm:flex", children: /* @__PURE__ */ o("span", { className: "text-sm opacity-80", children: t.header.subtitle }) }),
-    /* @__PURE__ */ o("div", { className: "navbar-end", children: /* @__PURE__ */ o(Se, {}) })
+function nt() {
+  const e = f((a) => a.voucherConfig.language), t = _(e);
+  return /* @__PURE__ */ m("div", { className: "navbar bg-currency-green text-currency-cream shadow-lg", children: [
+    /* @__PURE__ */ i("div", { className: "navbar-start", children: /* @__PURE__ */ i("a", { className: "btn btn-ghost text-xl font-currency font-bold", children: t.header.title }) }),
+    /* @__PURE__ */ i("div", { className: "navbar-center hidden sm:flex", children: /* @__PURE__ */ i("span", { className: "text-sm opacity-80", children: t.header.subtitle }) }),
+    /* @__PURE__ */ i("div", { className: "navbar-end", children: /* @__PURE__ */ i(Me, {}) })
   ] });
 }
-const B = "/", Le = {
+const z = "/", Fe = {
   id: "time-voucher-classic-de",
   name: "Zeitgutschein Classic",
   type: "time-voucher",
   category: "classic",
   images: {
-    front: `${B}templates/front_hdpi_de.jpg`,
-    back: `${B}templates/back_hdpi_de.jpg`,
+    front: `${z}templates/front_hdpi_de.jpg`,
+    back: `${z}templates/back_hdpi_de.jpg`,
     width: 6144,
     height: 4096
   },
@@ -1142,24 +1203,24 @@ const B = "/", Le = {
   ],
   layout: {
     front: {
-      portrait: A.front.portrait,
-      name: A.front.namePlate
+      portrait: L.front.portrait,
+      name: L.front.namePlate
     },
     back: {
-      name: A.back.namePlate,
-      contactInfo: A.back.contactInfo,
-      description: A.back.description
+      name: L.back.namePlate,
+      contactInfo: L.back.contactInfo,
+      description: L.back.description
     }
   },
   languages: ["de"]
-}, Te = {
+}, Oe = {
   id: "time-voucher-classic-en",
   name: "Time Voucher Classic",
   type: "time-voucher",
   category: "classic",
   images: {
-    front: `${B}templates/front_ldpi_en.png`,
-    back: `${B}templates/back_ldpi_en.png`,
+    front: `${z}templates/front_ldpi_en.png`,
+    back: `${z}templates/back_ldpi_en.png`,
     width: 1536,
     height: 1024
   },
@@ -1206,85 +1267,89 @@ const B = "/", Le = {
   ],
   layout: {
     front: {
-      portrait: T.front.portrait,
-      name: T.front.namePlate
+      portrait: A.front.portrait,
+      name: A.front.namePlate
     },
     back: {
-      name: T.back.namePlate,
-      contactInfo: T.back.contactInfo,
-      description: T.back.description
+      name: A.back.namePlate,
+      contactInfo: A.back.contactInfo,
+      description: A.back.description
     }
   },
   languages: ["en"]
-}, Z = [
-  Le,
-  Te
-], Ae = {
+}, J = [
+  Fe,
+  Oe
+], We = {
   async listTemplates(e) {
-    let t = [...Z];
-    return e != null && e.type && (t = t.filter((n) => n.type === e.type)), e != null && e.category && (t = t.filter((n) => n.category === e.category)), e != null && e.language && (t = t.filter((n) => n.languages.includes(e.language))), t;
+    let t = [...J];
+    return e != null && e.type && (t = t.filter((a) => a.type === e.type)), e != null && e.category && (t = t.filter((a) => a.category === e.category)), e != null && e.language && (t = t.filter((a) => a.languages.includes(e.language))), t;
   },
   async getTemplate(e) {
-    const t = Z.find((n) => n.id === e);
+    const t = J.find((a) => a.id === e);
     if (!t)
       throw new Error(`Template not found: ${e}`);
     return t;
   }
 };
-function Ke(e) {
+function at(e) {
   return e === "de" ? "time-voucher-classic-de" : "time-voucher-classic-en";
 }
-let R = Ae;
-function Oe(e) {
-  R = e;
+let H = We;
+function rt(e) {
+  H = e;
 }
-function Ve() {
-  return R;
+function ot() {
+  return H;
 }
-async function Ye(e) {
-  return R.listTemplates(e);
+async function it(e) {
+  return H.listTemplates(e);
 }
-async function qe(e) {
-  return R.getTemplate(e);
+async function st(e) {
+  return H.getTemplate(e);
 }
 export {
-  ye as ApiKeyModal,
-  Ue as BillPreview,
-  We as ExportButton,
-  je as Header,
-  A as LAYOUT_HDPI,
-  T as LAYOUT_LDPI,
-  Se as LanguageToggle,
-  Be as PersonalInfoForm,
-  Re as PortraitUpload,
-  xe as TEMPLATES,
-  Me as VoucherConfig,
-  Ee as downloadBlob,
-  Ie as drawContactInfo,
-  Ne as drawMultilineText,
-  ke as drawOvalPortrait,
-  ee as drawTemplate,
-  te as drawText,
-  be as enhancePortrait,
-  q as enhancePortraitFallback,
-  Ce as exportBillAsPDF,
-  G as formatDescription,
-  Pe as generateBillPDF,
-  X as getApiKey,
-  Ke as getDefaultTemplateId,
-  J as getLayout,
-  Q as getTemplate,
-  qe as getTemplateById,
-  Ve as getTemplateProvider,
-  Y as hasApiKey,
-  Ye as listTemplates,
+  _e as ApiKeyModal,
+  Qe as BillPreview,
+  tt as ExportButton,
+  nt as Header,
+  L as LAYOUT_HDPI,
+  A as LAYOUT_LDPI,
+  Me as LanguageToggle,
+  Ze as PersonalInfoForm,
+  Xe as PortraitUpload,
+  Re as TEMPLATES,
+  Je as VoucherConfig,
+  He as downloadBlob,
+  Ke as drawContactInfo,
+  $e as drawMultilineText,
+  Be as drawOvalPortrait,
+  se as drawTemplate,
+  le as drawText,
+  Le as enhancePortrait,
+  X as enhancePortraitFallback,
+  Ue as exportBillAsPDF,
+  Q as formatDescription,
+  ze as generateBillPDF,
+  ae as getApiKey,
+  re as getClipdropApiKey,
+  at as getDefaultTemplateId,
+  oe as getLayout,
+  ie as getTemplate,
+  st as getTemplateById,
+  ot as getTemplateProvider,
+  Z as hasApiKey,
+  Ae as hasClipdropApiKey,
+  it as listTemplates,
   j as loadImage,
-  ae as renderBackSide,
-  ne as renderFrontSide,
-  fe as setApiKey,
-  Oe as setTemplateProvider,
-  Ae as staticTemplateProvider,
-  S as t,
-  Fe as useBillCanvasRefs,
-  g as useBillStore
+  Te as removeBackground,
+  de as renderBackSide,
+  ce as renderFrontSide,
+  Ce as setApiKey,
+  Se as setClipdropApiKey,
+  rt as setTemplateProvider,
+  We as staticTemplateProvider,
+  _ as t,
+  et as useBillCanvasRefs,
+  f as useBillStore
 };