@narcisbodea/smstunnel-sdk 1.0.0

package/dist/vue/index.d.ts

@@ -0,0 +1,155 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+interface SmsTunnelLabels {
+    title: string;
+    description: string;
+    serverUrlLabel: string;
+    serverUrlPlaceholder: string;
+    saveButton: string;
+    pairedStatus: string;
+    deviceLabel: string;
+    unpairButton: string;
+    unpairConfirm: string;
+    notPairedStatus: string;
+    notPairedDescription: string;
+    connectButton: string;
+    scanQrPrompt: string;
+    waitingForPairing: string;
+    cancelButton: string;
+    qrExpired: string;
+    testSmsTitle: string;
+    testPhonePlaceholder: string;
+    testMessagePlaceholder: string;
+    sendTestButton: string;
+    smsSentSuccess: string;
+    smsError: string;
+}
+declare const EN_LABELS: SmsTunnelLabels;
+declare const RO_LABELS: SmsTunnelLabels;
+
+declare const SmsTunnelPairing: vue.DefineComponent<vue.ExtractPropTypes<{
+    apiBaseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    getAuthHeaders: {
+        type: PropType<() => Record<string, string>>;
+        default: undefined;
+    };
+    labels: {
+        type: PropType<SmsTunnelLabels>;
+        default: () => SmsTunnelLabels;
+    };
+    showTestSms: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showServerUrlInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    qrSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    routePrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("unpaired" | "paired")[], "unpaired" | "paired", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    apiBaseUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+    getAuthHeaders: {
+        type: PropType<() => Record<string, string>>;
+        default: undefined;
+    };
+    labels: {
+        type: PropType<SmsTunnelLabels>;
+        default: () => SmsTunnelLabels;
+    };
+    showTestSms: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showServerUrlInput: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    qrSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    routePrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onUnpaired?: ((...args: any[]) => any) | undefined;
+    onPaired?: ((...args: any[]) => any) | undefined;
+}>, {
+    getAuthHeaders: () => Record<string, string>;
+    routePrefix: string;
+    labels: SmsTunnelLabels;
+    showTestSms: boolean;
+    showServerUrlInput: boolean;
+    qrSize: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+declare const QrCodeCanvas: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+interface UseSmsTunnelOptions {
+    apiBaseUrl: string;
+    getAuthHeaders?: () => Record<string, string>;
+    routePrefix?: string;
+    pollInterval?: number;
+}
+interface SendSmsResult {
+    success: boolean;
+    messageId?: string;
+    error?: string;
+}
+declare function useSmsTunnel(options: UseSmsTunnelOptions): {
+    status: vue.Ref<"loading" | "unpaired" | "paired", "loading" | "unpaired" | "paired">;
+    serverUrl: vue.Ref<string, string>;
+    deviceName: vue.Ref<string, string>;
+    showQr: vue.Ref<boolean, boolean>;
+    qrData: vue.Ref<string, string>;
+    generating: vue.Ref<boolean, boolean>;
+    polling: vue.Ref<boolean, boolean>;
+    error: vue.Ref<string, string>;
+    generateQr: () => Promise<void>;
+    cancelPairing: () => void;
+    unpair: () => Promise<void>;
+    sendTestSms: (to: string, message: string) => Promise<SendSmsResult>;
+    updateServerUrl: (url: string) => Promise<void>;
+    refetch: () => Promise<void>;
+};
+
+export { EN_LABELS, QrCodeCanvas, RO_LABELS, type SendSmsResult, type SmsTunnelLabels, SmsTunnelPairing, type UseSmsTunnelOptions, useSmsTunnel };

package/dist/vue/index.js

@@ -0,0 +1,525 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vue/index.ts
+var vue_exports = {};
+__export(vue_exports, {
+  EN_LABELS: () => EN_LABELS,
+  QrCodeCanvas: () => QrCodeCanvas,
+  RO_LABELS: () => RO_LABELS,
+  SmsTunnelPairing: () => SmsTunnelPairing,
+  useSmsTunnel: () => useSmsTunnel
+});
+module.exports = __toCommonJS(vue_exports);
+
+// src/vue/SmsTunnelPairing.ts
+var import_vue3 = require("vue");
+
+// src/vue/useSmsTunnel.ts
+var import_vue = require("vue");
+function useSmsTunnel(options) {
+  const {
+    apiBaseUrl,
+    getAuthHeaders,
+    routePrefix = "smstunnel",
+    pollInterval = 3e3
+  } = options;
+  const baseUrl = apiBaseUrl.replace(/\/$/, "");
+  const status = (0, import_vue.ref)("loading");
+  const serverUrl = (0, import_vue.ref)("");
+  const deviceName = (0, import_vue.ref)("");
+  const showQr = (0, import_vue.ref)(false);
+  const qrData = (0, import_vue.ref)("");
+  const generating = (0, import_vue.ref)(false);
+  const polling = (0, import_vue.ref)(false);
+  const error = (0, import_vue.ref)("");
+  let pairingToken = "";
+  let pollTimer = null;
+  function authHeaders() {
+    return getAuthHeaders ? getAuthHeaders() : {};
+  }
+  async function fetchStatus() {
+    try {
+      const res = await fetch(`${baseUrl}/${routePrefix}/status`, {
+        headers: authHeaders()
+      });
+      const data = await res.json();
+      status.value = data.paired ? "paired" : "unpaired";
+      serverUrl.value = data.serverUrl || "";
+      deviceName.value = data.deviceName || "";
+    } catch {
+      status.value = "unpaired";
+    }
+  }
+  function startPolling() {
+    stopPolling();
+    pollTimer = setInterval(async () => {
+      if (!pairingToken) return;
+      try {
+        const res = await fetch(
+          `${baseUrl}/${routePrefix}/pairing-status/${pairingToken}`
+        );
+        const data = await res.json();
+        if (data.status === "completed") {
+          polling.value = false;
+          showQr.value = false;
+          stopPolling();
+          setTimeout(() => fetchStatus(), 2e3);
+        } else if (data.status === "expired") {
+          polling.value = false;
+          showQr.value = false;
+          error.value = "QR code expired";
+          stopPolling();
+        }
+      } catch {
+      }
+    }, pollInterval);
+  }
+  function stopPolling() {
+    if (pollTimer) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+    }
+  }
+  (0, import_vue.watch)(polling, (val) => {
+    if (val) startPolling();
+    else stopPolling();
+  });
+  async function generateQr() {
+    generating.value = true;
+    error.value = "";
+    try {
+      const res = await fetch(`${baseUrl}/${routePrefix}/create-token`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...authHeaders() }
+      });
+      const data = await res.json();
+      if (!data.success) {
+        error.value = data.error || "Failed to create QR code";
+        generating.value = false;
+        return;
+      }
+      pairingToken = data.token;
+      qrData.value = data.qrData;
+      showQr.value = true;
+      polling.value = true;
+    } catch (err) {
+      error.value = `Error: ${err.message}`;
+    } finally {
+      generating.value = false;
+    }
+  }
+  function cancelPairing() {
+    stopPolling();
+    pairingToken = "";
+    showQr.value = false;
+    polling.value = false;
+    qrData.value = "";
+  }
+  async function unpair() {
+    try {
+      await fetch(`${baseUrl}/${routePrefix}/unpair`, {
+        method: "POST",
+        headers: authHeaders()
+      });
+      status.value = "unpaired";
+      deviceName.value = "";
+    } catch (err) {
+      error.value = `Unpair failed: ${err.message}`;
+    }
+  }
+  async function sendTestSms(to, message) {
+    try {
+      const res = await fetch(`${baseUrl}/${routePrefix}/send`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...authHeaders() },
+        body: JSON.stringify({ to, message })
+      });
+      return await res.json();
+    } catch (err) {
+      return { success: false, error: err.message };
+    }
+  }
+  async function updateServerUrl(url) {
+    try {
+      await fetch(`${baseUrl}/${routePrefix}/update-config`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...authHeaders() },
+        body: JSON.stringify({ serverUrl: url })
+      });
+      serverUrl.value = url;
+    } catch (err) {
+      error.value = `Update failed: ${err.message}`;
+    }
+  }
+  (0, import_vue.onMounted)(() => fetchStatus());
+  (0, import_vue.onUnmounted)(() => stopPolling());
+  return {
+    status,
+    serverUrl,
+    deviceName,
+    showQr,
+    qrData,
+    generating,
+    polling,
+    error,
+    generateQr,
+    cancelPairing,
+    unpair,
+    sendTestSms,
+    updateServerUrl,
+    refetch: fetchStatus
+  };
+}
+
+// src/vue/QrCodeCanvas.ts
+var import_vue2 = require("vue");
+var import_qrcode_generator = __toESM(require("qrcode-generator"));
+var QrCodeCanvas = (0, import_vue2.defineComponent)({
+  name: "QrCodeCanvas",
+  props: {
+    value: { type: String, required: true },
+    size: { type: Number, default: 200 }
+  },
+  setup(props) {
+    const canvasRef = (0, import_vue2.ref)(null);
+    function render() {
+      if (!canvasRef.value || !props.value) return;
+      const canvas = canvasRef.value;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const qr = (0, import_qrcode_generator.default)(0, "M");
+      qr.addData(props.value);
+      qr.make();
+      const moduleCount = qr.getModuleCount();
+      const cellSize = props.size / moduleCount;
+      canvas.width = props.size;
+      canvas.height = props.size;
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, props.size, props.size);
+      ctx.fillStyle = "#000000";
+      for (let row = 0; row < moduleCount; row++) {
+        for (let col = 0; col < moduleCount; col++) {
+          if (qr.isDark(row, col)) {
+            ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
+          }
+        }
+      }
+    }
+    (0, import_vue2.onMounted)(render);
+    (0, import_vue2.watch)(() => [props.value, props.size], render);
+    return () => (0, import_vue2.h)("canvas", {
+      ref: canvasRef,
+      width: props.size,
+      height: props.size
+    });
+  }
+});
+
+// src/shared/labels.ts
+var EN_LABELS = {
+  title: "SMS Configuration (SMSTunnel)",
+  description: "Connect an Android phone with the SMSTunnel app to send SMS directly from the application.",
+  serverUrlLabel: "SMSTunnel Server",
+  serverUrlPlaceholder: "https://smstunnel.io",
+  saveButton: "Save",
+  pairedStatus: "Connected",
+  deviceLabel: "Device",
+  unpairButton: "Disconnect",
+  unpairConfirm: "Are you sure you want to disconnect the SMS device?",
+  notPairedStatus: "Not connected",
+  notPairedDescription: "Scan the QR code with the SMSTunnel app on your Android phone.",
+  connectButton: "Connect phone",
+  scanQrPrompt: "Scan this QR code with the SMSTunnel app on your phone:",
+  waitingForPairing: "Waiting for connection...",
+  cancelButton: "Cancel",
+  qrExpired: "QR code has expired. Generate a new one.",
+  testSmsTitle: "Send test SMS",
+  testPhonePlaceholder: "Phone number (e.g., +1234567890)",
+  testMessagePlaceholder: "Message",
+  sendTestButton: "Send",
+  smsSentSuccess: "SMS sent successfully!",
+  smsError: "Error"
+};
+var RO_LABELS = {
+  title: "Configurare SMS (SMSTunnel)",
+  description: "Conecteaza un telefon Android cu aplicatia SMSTunnel pentru a trimite SMS-uri direct din aplicatie.",
+  serverUrlLabel: "Server SMSTunnel",
+  serverUrlPlaceholder: "https://smstunnel.io",
+  saveButton: "Salveaza",
+  pairedStatus: "Conectat",
+  deviceLabel: "Dispozitiv",
+  unpairButton: "Deconecteaza",
+  unpairConfirm: "Sigur doresti sa deconectezi dispozitivul SMS?",
+  notPairedStatus: "Neconectat",
+  notPairedDescription: "Scaneaza codul QR cu aplicatia SMSTunnel de pe telefonul Android.",
+  connectButton: "Conecteaza telefon",
+  scanQrPrompt: "Scaneaza acest cod QR cu aplicatia SMSTunnel de pe telefon:",
+  waitingForPairing: "Se asteapta conectarea...",
+  cancelButton: "Anuleaza",
+  qrExpired: "Codul QR a expirat. Genereaza unul nou.",
+  testSmsTitle: "Trimite SMS de test",
+  testPhonePlaceholder: "Nr. telefon (ex: 0741234567)",
+  testMessagePlaceholder: "Mesaj",
+  sendTestButton: "Trimite",
+  smsSentSuccess: "SMS trimis cu succes!",
+  smsError: "Eroare"
+};
+
+// src/vue/SmsTunnelPairing.ts
+var s = {
+  container: { fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSize: "14px", color: "#1f2937" },
+  card: { border: "1px solid #e5e7eb", borderRadius: "12px", padding: "24px", backgroundColor: "#ffffff" },
+  title: { fontSize: "18px", fontWeight: "600", color: "#111827", marginBottom: "4px" },
+  subtitle: { fontSize: "13px", color: "#6b7280", marginBottom: "20px" },
+  section: { border: "1px solid #e5e7eb", borderRadius: "8px", padding: "16px", marginBottom: "16px" },
+  label: { display: "block", fontSize: "13px", fontWeight: "500", color: "#374151", marginBottom: "6px" },
+  inputRow: { display: "flex", gap: "8px" },
+  input: { flex: "1", border: "1px solid #d1d5db", borderRadius: "8px", padding: "6px 12px", fontSize: "13px", outline: "none" },
+  button: { padding: "6px 16px", borderRadius: "8px", border: "none", fontSize: "13px", fontWeight: "500", cursor: "pointer", backgroundColor: "#4f46e5", color: "#ffffff" },
+  buttonSecondary: { padding: "6px 16px", borderRadius: "8px", border: "1px solid #d1d5db", fontSize: "13px", fontWeight: "500", cursor: "pointer", backgroundColor: "#ffffff", color: "#374151" },
+  pairedBanner: { display: "flex", alignItems: "center", gap: "12px", border: "1px solid #bbf7d0", backgroundColor: "#f0fdf4", borderRadius: "8px", padding: "16px", marginBottom: "16px" },
+  pairedIcon: { width: "40px", height: "40px", borderRadius: "50%", backgroundColor: "#dcfce7", display: "flex", alignItems: "center", justifyContent: "center", color: "#16a34a", fontSize: "18px", flexShrink: "0" },
+  unpairedBanner: { display: "flex", alignItems: "center", gap: "12px", border: "1px solid #fde68a", backgroundColor: "#fefce8", borderRadius: "8px", padding: "16px", marginBottom: "16px" },
+  qrContainer: { textAlign: "center", padding: "16px" },
+  qrFrame: { display: "inline-block", border: "2px dashed #a5b4fc", borderRadius: "12px", padding: "16px", backgroundColor: "#ffffff", marginBottom: "12px" },
+  spinner: { display: "inline-block", width: "12px", height: "12px", border: "2px solid #d1d5db", borderTopColor: "#4f46e5", borderRadius: "50%", animation: "smstunnel-spin 0.8s linear infinite", marginRight: "8px", verticalAlign: "middle" },
+  error: { color: "#dc2626", fontSize: "13px", marginBottom: "12px" },
+  success: { color: "#16a34a", fontSize: "12px", marginTop: "8px" },
+  errorSmall: { color: "#dc2626", fontSize: "12px", marginTop: "8px" }
+};
+var stylesInjected = false;
+function injectKeyframes() {
+  if (stylesInjected || typeof document === "undefined") return;
+  const style = document.createElement("style");
+  style.textContent = "@keyframes smstunnel-spin { to { transform: rotate(360deg); } }";
+  document.head.appendChild(style);
+  stylesInjected = true;
+}
+var SmsTunnelPairing = (0, import_vue3.defineComponent)({
+  name: "SmsTunnelPairing",
+  props: {
+    apiBaseUrl: { type: String, required: true },
+    getAuthHeaders: { type: Function, default: void 0 },
+    labels: { type: Object, default: () => EN_LABELS },
+    showTestSms: { type: Boolean, default: true },
+    showServerUrlInput: { type: Boolean, default: true },
+    qrSize: { type: Number, default: 220 },
+    routePrefix: { type: String, default: "smstunnel" }
+  },
+  emits: ["paired", "unpaired"],
+  setup(props, { emit }) {
+    injectKeyframes();
+    const tunnel = useSmsTunnel({
+      apiBaseUrl: props.apiBaseUrl,
+      getAuthHeaders: props.getAuthHeaders,
+      routePrefix: props.routePrefix
+    });
+    const localServerUrl = (0, import_vue3.ref)("");
+    const savingUrl = (0, import_vue3.ref)(false);
+    const testPhone = (0, import_vue3.ref)("");
+    const testMsg = (0, import_vue3.ref)("Test SMS");
+    const testResult = (0, import_vue3.ref)(null);
+    const sendingTest = (0, import_vue3.ref)(false);
+    (0, import_vue3.watch)(tunnel.serverUrl, (val) => {
+      if (val && !localServerUrl.value) localServerUrl.value = val;
+    }, { immediate: true });
+    (0, import_vue3.watch)(tunnel.status, (val, old) => {
+      if (val === "paired" && old !== "paired") {
+        emit("paired", { deviceName: tunnel.deviceName.value });
+      }
+    });
+    async function saveUrl() {
+      if (!localServerUrl.value.trim()) return;
+      savingUrl.value = true;
+      await tunnel.updateServerUrl(localServerUrl.value.trim().replace(/\/$/, ""));
+      savingUrl.value = false;
+    }
+    async function handleUnpair() {
+      if (!confirm(props.labels.unpairConfirm)) return;
+      await tunnel.unpair();
+      emit("unpaired");
+    }
+    async function handleTestSms() {
+      if (!testPhone.value.trim()) return;
+      sendingTest.value = true;
+      testResult.value = null;
+      testResult.value = await tunnel.sendTestSms(testPhone.value.trim(), testMsg.value);
+      sendingTest.value = false;
+    }
+    return () => {
+      const L = props.labels;
+      if (tunnel.status.value === "loading") {
+        return (0, import_vue3.h)("div", { style: s.container }, [
+          (0, import_vue3.h)("div", { style: s.card }, [
+            (0, import_vue3.h)("div", { style: { textAlign: "center", padding: "24px" } }, [
+              (0, import_vue3.h)("span", { style: s.spinner })
+            ])
+          ])
+        ]);
+      }
+      const children = [];
+      children.push((0, import_vue3.h)("div", { style: s.title }, L.title));
+      children.push((0, import_vue3.h)("div", { style: s.subtitle }, L.description));
+      if (props.showServerUrlInput) {
+        children.push(
+          (0, import_vue3.h)("div", { style: s.section }, [
+            (0, import_vue3.h)("label", { style: s.label }, L.serverUrlLabel),
+            (0, import_vue3.h)("div", { style: s.inputRow }, [
+              (0, import_vue3.h)("input", {
+                value: localServerUrl.value,
+                onInput: (e) => {
+                  localServerUrl.value = e.target.value;
+                },
+                placeholder: L.serverUrlPlaceholder,
+                style: s.input
+              }),
+              (0, import_vue3.h)("button", {
+                style: { ...s.button, opacity: savingUrl.value || !localServerUrl.value.trim() ? "0.5" : "1" },
+                onClick: saveUrl,
+                disabled: savingUrl.value || !localServerUrl.value.trim()
+              }, L.saveButton)
+            ])
+          ])
+        );
+      }
+      if (tunnel.error.value) {
+        children.push((0, import_vue3.h)("div", { style: s.error }, tunnel.error.value));
+      }
+      if (tunnel.status.value === "paired") {
+        children.push(
+          (0, import_vue3.h)("div", { style: s.pairedBanner }, [
+            (0, import_vue3.h)("div", { style: s.pairedIcon }, "\u2713"),
+            (0, import_vue3.h)("div", { style: { flex: "1" } }, [
+              (0, import_vue3.h)("div", { style: { fontSize: "14px", fontWeight: "600", color: "#166534" } }, L.pairedStatus),
+              (0, import_vue3.h)(
+                "div",
+                { style: { fontSize: "12px", color: "#16a34a" } },
+                `${L.deviceLabel}: ${tunnel.deviceName.value || "Android Phone"}`
+              )
+            ]),
+            (0, import_vue3.h)("button", {
+              onClick: handleUnpair,
+              style: { padding: "6px", borderRadius: "8px", border: "none", cursor: "pointer", backgroundColor: "transparent", color: "#9ca3af" },
+              title: L.unpairButton
+            }, "\u2715")
+          ])
+        );
+        if (props.showTestSms) {
+          const testChildren = [
+            (0, import_vue3.h)("div", { style: { fontSize: "13px", fontWeight: "600", color: "#374151", marginBottom: "12px" } }, L.testSmsTitle),
+            (0, import_vue3.h)("div", { style: s.inputRow }, [
+              (0, import_vue3.h)("input", {
+                value: testPhone.value,
+                onInput: (e) => {
+                  testPhone.value = e.target.value;
+                },
+                placeholder: L.testPhonePlaceholder,
+                style: s.input
+              }),
+              (0, import_vue3.h)("input", {
+                value: testMsg.value,
+                onInput: (e) => {
+                  testMsg.value = e.target.value;
+                },
+                placeholder: L.testMessagePlaceholder,
+                style: s.input
+              }),
+              (0, import_vue3.h)("button", {
+                style: { ...s.button, opacity: sendingTest.value || !testPhone.value.trim() ? "0.5" : "1" },
+                onClick: handleTestSms,
+                disabled: sendingTest.value || !testPhone.value.trim()
+              }, sendingTest.value ? (0, import_vue3.h)("span", { style: s.spinner }) : L.sendTestButton)
+            ])
+          ];
+          if (testResult.value) {
+            testChildren.push(
+              (0, import_vue3.h)(
+                "div",
+                { style: testResult.value.success ? s.success : s.errorSmall },
+                testResult.value.success ? `${L.smsSentSuccess} (ID: ${testResult.value.messageId})` : `${L.smsError}: ${testResult.value.error}`
+              )
+            );
+          }
+          children.push((0, import_vue3.h)("div", { style: s.section }, testChildren));
+        }
+      } else {
+        children.push(
+          (0, import_vue3.h)("div", { style: s.unpairedBanner }, [
+            (0, import_vue3.h)("div", { style: { fontSize: "24px" } }, "\u{1F4F1}"),
+            (0, import_vue3.h)("div", {}, [
+              (0, import_vue3.h)("div", { style: { fontSize: "14px", fontWeight: "600", color: "#854d0e" } }, L.notPairedStatus),
+              (0, import_vue3.h)("div", { style: { fontSize: "12px", color: "#a16207" } }, L.notPairedDescription)
+            ])
+          ])
+        );
+        if (!tunnel.showQr.value) {
+          children.push(
+            (0, import_vue3.h)("button", {
+              style: { ...s.button, opacity: tunnel.generating.value ? "0.5" : "1" },
+              onClick: tunnel.generateQr,
+              disabled: tunnel.generating.value
+            }, [
+              tunnel.generating.value ? (0, import_vue3.h)("span", { style: s.spinner }) : null,
+              L.connectButton
+            ])
+          );
+        } else {
+          children.push(
+            (0, import_vue3.h)("div", { style: s.qrContainer }, [
+              (0, import_vue3.h)("div", { style: { fontSize: "13px", color: "#4b5563", marginBottom: "12px" } }, L.scanQrPrompt),
+              (0, import_vue3.h)("div", { style: s.qrFrame }, [
+                (0, import_vue3.h)(QrCodeCanvas, { value: tunnel.qrData.value, size: props.qrSize })
+              ]),
+              (0, import_vue3.h)("div", {
+                style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "8px", fontSize: "12px", color: "#9ca3af", marginBottom: "12px" }
+              }, [
+                (0, import_vue3.h)("span", { style: s.spinner }),
+                L.waitingForPairing
+              ]),
+              (0, import_vue3.h)("button", { style: s.buttonSecondary, onClick: tunnel.cancelPairing }, L.cancelButton)
+            ])
+          );
+        }
+      }
+      return (0, import_vue3.h)("div", { style: s.container }, [
+        (0, import_vue3.h)("div", { style: s.card }, children)
+      ]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EN_LABELS,
+  QrCodeCanvas,
+  RO_LABELS,
+  SmsTunnelPairing,
+  useSmsTunnel
+});
+//# sourceMappingURL=index.js.map