@gxp-dev/app-ui 0.1.6

package/dist/composables/useStreamingAudio.js

@@ -0,0 +1,121 @@
+import { ref as b, onBeforeUnmount as G } from "vue";
+const W = (r) => {
+  const o = atob(r), u = new Uint8Array(o.length);
+  for (let f = 0; f < o.length; f++) u[f] = o.charCodeAt(f);
+  return u;
+}, H = (r) => {
+  const o = new Float32Array(r.length);
+  for (let u = 0; u < r.length; u++) o[u] = r[u] / 32768;
+  return o;
+};
+function K(r = {}) {
+  const o = r.sampleRate ?? 48e3, u = r.speechThreshold ?? 15, f = r.speechDebounceMs ?? 300, z = r.fftSize ?? 2048, l = b(null), n = b(null), c = b(null), w = b(!1), S = b(!1), T = b(0);
+  let p = null, v = null, s = 0;
+  const d = [];
+  let A = null, k = 0, m = null;
+  const B = async () => {
+    if (l.value) return l.value;
+    const e = window.AudioContext || window.webkitAudioContext, t = new e({ sampleRate: o });
+    l.value = t;
+    const a = t.createAnalyser();
+    return a.fftSize = z, a.smoothingTimeConstant = 0.8, n.value = a, p = t.createMediaStreamDestination(), v = document.createElement("audio"), v.srcObject = p.stream, v.autoplay = !0, t;
+  }, I = () => {
+    const e = n.value;
+    if (!e) return;
+    const t = new Uint8Array(e.frequencyBinCount), a = () => {
+      if (!w.value || !n.value) {
+        m = null;
+        return;
+      }
+      n.value.getByteFrequencyData(t);
+      const y = t.reduce((i, h) => i + h, 0) / t.length, C = Math.round(y / 255 * 100);
+      if (T.value = C, C > u && A) {
+        const i = Date.now();
+        i - k > f && (k = i, A(C));
+      }
+      m = requestAnimationFrame(a);
+    };
+    m = requestAnimationFrame(a);
+  }, E = async (e = {}) => {
+    l.value || await B();
+    const t = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: !0,
+        noiseSuppression: !0,
+        autoGainControl: !0,
+        sampleRate: o,
+        channelCount: 1,
+        ...e
+      }
+    });
+    return c.value = t, l.value.createMediaStreamSource(t).connect(n.value), w.value = !0, S.value = !1, I(), t;
+  }, M = () => {
+    c.value && (c.value.getTracks().forEach((e) => e.stop()), c.value = null), w.value = !1, T.value = 0, m !== null && (cancelAnimationFrame(m), m = null);
+  }, O = () => {
+    if (!c.value) return;
+    const e = c.value.getAudioTracks()[0];
+    e && (e.enabled = !e.enabled, S.value = !e.enabled);
+  }, P = (e, t) => {
+    const a = l.value;
+    if (!a) return;
+    let y, C = t ?? o;
+    if (typeof e == "string") {
+      const D = W(e);
+      y = new Int16Array(D.buffer);
+    } else e instanceof Int16Array ? y = e : y = new Int16Array(e);
+    const i = H(y), h = a.createBuffer(1, i.length, C);
+    h.getChannelData(0).set(i);
+    const F = a.currentTime;
+    (s === 0 || s < F) && (s = F);
+    const g = a.createBufferSource();
+    g.buffer = h, p ? g.connect(p) : g.connect(a.destination), g.start(s);
+    const U = { source: g, endTime: s + h.duration };
+    d.push(U), g.onended = () => {
+      const D = d.indexOf(U);
+      D !== -1 && d.splice(D, 1);
+    }, s += h.duration;
+  }, x = () => {
+    if (d.length !== 0) {
+      for (const e of d)
+        try {
+          e.source.stop();
+        } catch {
+        }
+      d.length = 0, s = 0;
+    }
+  }, R = () => {
+    if (!n.value) return new Uint8Array(0);
+    const e = new Uint8Array(n.value.frequencyBinCount);
+    return n.value.getByteTimeDomainData(e), e;
+  }, j = () => {
+    if (!n.value) return new Uint8Array(0);
+    const e = new Uint8Array(n.value.frequencyBinCount);
+    return n.value.getByteFrequencyData(e), e;
+  }, L = (e) => {
+    A = e;
+  }, q = () => {
+    M(), x(), v && (v.srcObject = null, v = null), p = null, l.value && (l.value.close().catch(() => {
+    }), l.value = null), n.value = null, A = null;
+  };
+  return G(q), {
+    audioContext: l,
+    analyser: n,
+    audioStream: c,
+    isCapturing: w,
+    isMuted: S,
+    audioLevel: T,
+    initialize: B,
+    startCapture: E,
+    stopCapture: M,
+    toggleMute: O,
+    cleanup: q,
+    playPCMChunk: P,
+    interruptPlayback: x,
+    getWaveformData: R,
+    getFrequencyData: j,
+    setSpeechDetectionCallback: L
+  };
+}
+export {
+  K as useStreamingAudio
+};

package/dist/composables/useToast.js

@@ -0,0 +1,16 @@
+import { toast as r } from "vue-sonner";
+function n() {
+  return {
+    success: (s, o) => r.success(s, o),
+    error: (s, o) => r.error(s, o),
+    warning: (s, o) => r.warning(s, o),
+    info: (s, o) => r.info(s, o),
+    show: (s, o) => r(s, o),
+    loading: (s, o) => r.loading(s, o),
+    dismiss: (s) => r.dismiss(s),
+    promise: (s, o) => r.promise(s, o)
+  };
+}
+export {
+  n as useToast
+};

package/dist/composables/useWebSocket.js

@@ -0,0 +1,114 @@
+import { ref as m, onUnmounted as $, readonly as b } from "vue";
+function z(p = {}) {
+  const {
+    authType: J = "auth",
+    authResponseType: L = "authenticated",
+    maxReconnectAttempts: E = 5,
+    reconnectDelay: M = 2e3,
+    reconnectBackoff: P = 1.5,
+    autoReconnect: x = !0,
+    autoDisconnect: A = !0,
+    protocols: W,
+    onOpen: y,
+    onClose: g,
+    onError: S
+  } = p, e = m(null), t = m("idle"), r = m(0), u = m(null), v = /* @__PURE__ */ new Map();
+  let T = "", k = "", c = null, d = !1;
+  async function N(n, o) {
+    const h = (o == null ? void 0 : o.token) ?? p.authToken;
+    return c && (clearTimeout(c), c = null), T = n, k = h ?? "", d = !1, t.value = "connecting", u.value = null, new Promise((R, f) => {
+      try {
+        e.value = W ? new WebSocket(n, W) : new WebSocket(n), e.value.onopen = (a) => {
+          if (y == null || y(a), h) {
+            e.value.send(JSON.stringify({ type: J, token: h }));
+            const s = (w) => {
+              try {
+                const l = JSON.parse(w.data);
+                if (l.type === L)
+                  e.value.removeEventListener("message", s), t.value = "connected", r.value = 0, R();
+                else if (l.type === "error") {
+                  e.value.removeEventListener("message", s);
+                  const i = l.message || "Authentication failed";
+                  u.value = i, t.value = "disconnected", e.value.close(4001, i), e.value = null, f(new Error(i));
+                }
+              } catch (l) {
+                e.value.removeEventListener("message", s), f(l);
+              }
+            };
+            e.value.addEventListener("message", s);
+          } else
+            t.value = "connected", r.value = 0, R();
+        }, e.value.onmessage = (a) => {
+          try {
+            const s = JSON.parse(a.data), { type: w, ...l } = s, i = v.get(w);
+            i && i(l);
+          } catch {
+          }
+        }, e.value.onerror = (a) => {
+          u.value = "WebSocket connection error", S == null || S(a), f(new Error("WebSocket connection error"));
+        }, e.value.onclose = (a) => {
+          g == null || g(a), !d && x && (t.value === "connected" || t.value === "connecting") ? (t.value = "reconnecting", D()) : d || (t.value = "disconnected");
+        };
+      } catch (a) {
+        t.value = "disconnected", u.value = a instanceof Error ? a.message : "Failed to create WebSocket", f(a);
+      }
+    });
+  }
+  function D() {
+    if (r.value >= E) {
+      t.value = "failed", u.value = `Max reconnection attempts (${E}) reached`;
+      return;
+    }
+    const n = M * Math.pow(P, r.value);
+    r.value++, c = setTimeout(async () => {
+      try {
+        await N(T, k ? { token: k } : void 0);
+      } catch {
+      }
+    }, n);
+  }
+  function H(n, o = {}) {
+    if (!e.value || e.value.readyState !== WebSocket.OPEN) {
+      console.warn("[useWebSocket] Cannot send — not connected");
+      return;
+    }
+    e.value.send(JSON.stringify({ type: n, ...o }));
+  }
+  function O(n) {
+    if (!e.value || e.value.readyState !== WebSocket.OPEN) {
+      console.warn("[useWebSocket] Cannot send — not connected");
+      return;
+    }
+    e.value.send(n);
+  }
+  function U(n, o) {
+    v.set(n, o);
+  }
+  function B(n) {
+    v.delete(n);
+  }
+  function C(n = 1e3, o = "Client disconnecting") {
+    d = !0, c && (clearTimeout(c), c = null), e.value && (e.value.close(n, o), e.value = null), v.clear(), t.value = "disconnected";
+  }
+  function F() {
+    var n;
+    return ((n = e.value) == null ? void 0 : n.readyState) === WebSocket.OPEN;
+  }
+  return A && $(() => {
+    C();
+  }), {
+    status: b(t),
+    reconnectCount: b(r),
+    lastError: b(u),
+    connect: N,
+    send: H,
+    sendRaw: O,
+    on: U,
+    off: B,
+    disconnect: C,
+    isConnected: F
+  };
+}
+export {
+  z as useWebSocket
+};

package/dist/experience/ExperienceFlow.vue.js

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

package/dist/experience/ExperienceFlow.vue2.js

@@ -0,0 +1,94 @@
+import { defineComponent as k, computed as s, openBlock as n, createElementBlock as i, normalizeClass as h, unref as N, createVNode as c, Transition as u, withCtx as a, createBlock as C, resolveDynamicComponent as E, mergeProps as P, createSlots as B, renderList as _, renderSlot as d, normalizeProps as $, guardReactiveProps as z, createCommentVNode as m, createElementVNode as l, toDisplayString as j } from "vue";
+import { cn as D } from "../lib/utils.js";
+const S = ["data-page"], V = {
+  key: 0,
+  class: "experience-flow__busy absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-sm",
+  "data-testid": "experience-busy"
+}, L = {
+  key: 0,
+  class: "experience-flow__error absolute inset-0 z-20 flex items-center justify-center bg-background/80 p-6",
+  "data-testid": "experience-error"
+}, F = { class: "max-w-sm rounded-lg border border-destructive/40 bg-card p-6 text-center shadow-lg" }, K = { class: "mb-4 text-sm text-destructive" }, q = /* @__PURE__ */ k({
+  __name: "ExperienceFlow",
+  props: {
+    flow: {},
+    transitionName: { default: "experience-fade" },
+    class: {}
+  },
+  setup(t) {
+    const r = t, f = s(() => r.flow.pageName.value ?? "__none__"), p = s(() => {
+      var e;
+      return ((e = r.flow.currentPage.value) == null ? void 0 : e.component) ?? null;
+    }), b = s(() => {
+      var e;
+      return ((e = r.flow.currentPage.value) == null ? void 0 : e.props) ?? {};
+    }), g = (e) => {
+      r.flow.next(e);
+    }, v = () => {
+      r.flow.back();
+    };
+    return (e, o) => (n(), i("div", {
+      class: h(N(D)("experience-flow relative w-full h-full", r.class)),
+      "data-page": f.value
+    }, [
+      c(u, {
+        name: t.transitionName,
+        mode: "out-in"
+      }, {
+        default: a(() => [
+          p.value ? (n(), C(E(p.value), P({ key: f.value }, b.value, {
+            context: t.flow.context,
+            onNext: g,
+            onBack: v,
+            onExit: v
+          }), B({ _: 2 }, [
+            _(e.$slots, (w, x) => ({
+              name: x,
+              fn: a((y) => [
+                d(e.$slots, x, $(z(y ?? {})), void 0, !0)
+              ])
+            }))
+          ]), 1040, ["context"])) : m("", !0)
+        ]),
+        _: 3
+      }, 8, ["name"]),
+      c(u, { name: "experience-fade" }, {
+        default: a(() => [
+          t.flow.busy.value ? (n(), i("div", V, [
+            d(e.$slots, "loading", {}, () => [
+              o[1] || (o[1] = l("div", {
+                class: "h-10 w-10 animate-spin rounded-full border-4 border-current border-r-transparent text-primary",
+                role: "status",
+                "aria-label": "Loading"
+              }, null, -1))
+            ], !0)
+          ])) : m("", !0)
+        ]),
+        _: 3
+      }),
+      c(u, { name: "experience-fade" }, {
+        default: a(() => [
+          t.flow.error.value ? (n(), i("div", L, [
+            d(e.$slots, "error", {
+              error: t.flow.error.value,
+              retry: () => t.flow.clearError()
+            }, () => [
+              l("div", F, [
+                l("p", K, j(t.flow.error.value.message), 1),
+                l("button", {
+                  type: "button",
+                  class: "inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+                  onClick: o[0] || (o[0] = (w) => t.flow.clearError())
+                }, " Dismiss ")
+              ])
+            ], !0)
+          ])) : m("", !0)
+        ]),
+        _: 3
+      })
+    ], 10, S));
+  }
+});
+export {
+  q as default
+};

package/dist/experience/pages/audio-capture/AudioCapturePage.vue.js

@@ -0,0 +1,86 @@
+import { defineComponent as R, ref as f, computed as _, watch as C, onMounted as B, onBeforeUnmount as L, openBlock as p, createElementBlock as v, normalizeClass as $, unref as x, renderSlot as g, createElementVNode as s, toDisplayString as l, createVNode as j, createCommentVNode as I } from "vue";
+import { cn as M } from "../../../lib/utils.js";
+import { useMedia as N } from "../../../composables/useMedia.js";
+import V from "../../../components/domain/audio-visualizer/AudioVisualizer.vue.js";
+const z = { class: "text-2xl font-bold tracking-tight text-foreground" }, A = { class: "flex h-32 w-full max-w-md items-center justify-center" }, E = {
+  key: 0,
+  class: "text-sm text-muted-foreground",
+  "data-testid": "audio-capture-timer"
+}, q = ["data-testid"], J = /* @__PURE__ */ R({
+  __name: "AudioCapturePage",
+  props: {
+    maxDurationSeconds: { default: 30 },
+    title: { default: "Record audio" },
+    recordLabel: { default: "Record" },
+    stopLabel: { default: "Stop" },
+    class: {}
+  },
+  emits: ["next", "back", "exit"],
+  setup(r, { emit: h }) {
+    const t = r, y = h, {
+      audioStream: S,
+      audioBlob: b,
+      setAudioDevice: D,
+      startRecording: k,
+      stopRecording: u,
+      resetState: w
+    } = N(), e = f(!1), n = f(0);
+    let a;
+    const c = _(
+      () => t.maxDurationSeconds > 0 ? Math.max(0, t.maxDurationSeconds - n.value) : null
+    );
+    C(b, (o) => {
+      o && y("next", o);
+    }), B(async () => {
+      try {
+        await D();
+      } catch {
+      }
+    }), L(() => {
+      a && clearInterval(a), e.value && u(), w();
+    });
+    const d = () => {
+      e.value = !0, n.value = 0, k({ audio: !0 }), a = setInterval(() => {
+        n.value += 1, t.maxDurationSeconds > 0 && n.value >= t.maxDurationSeconds && i();
+      }, 1e3);
+    }, i = () => {
+      e.value && (e.value = !1, a && clearInterval(a), u());
+    };
+    return (o, m) => (p(), v("section", {
+      class: $(x(M)(
+        "experience-page experience-page--audio-capture flex h-full w-full flex-col items-center justify-center gap-6 p-8",
+        t.class
+      )),
+      "data-testid": "audio-capture-page"
+    }, [
+      g(o.$slots, "header", {}, () => [
+        s("h1", z, l(r.title), 1)
+      ]),
+      s("div", A, [
+        j(V, {
+          active: e.value,
+          stream: x(S),
+          mode: "frequency",
+          class: "h-24 w-24 text-primary",
+          "data-testid": "audio-capture-visualizer"
+        }, null, 8, ["active", "stream"])
+      ]),
+      c.value !== null && e.value ? (p(), v("p", E, l(c.value) + "s ", 1)) : I("", !0),
+      g(o.$slots, "controls", {
+        start: d,
+        stop: i,
+        isRecording: e.value
+      }, () => [
+        s("button", {
+          type: "button",
+          class: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-3 text-base font-medium text-primary-foreground transition-colors hover:bg-primary/90",
+          "data-testid": e.value ? "audio-capture-stop" : "audio-capture-record",
+          onClick: m[0] || (m[0] = (P) => e.value ? i() : d())
+        }, l(e.value ? r.stopLabel : r.recordLabel), 9, q)
+      ])
+    ], 2));
+  }
+});
+export {
+  J as default
+};

package/dist/experience/pages/audio-capture/AudioCapturePage.vue2.js

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

package/dist/experience/pages/audio-capture/index.js

@@ -0,0 +1,8 @@
+import e from "./AudioCapturePage.vue.js";
+import { withExperienceDefaults as o } from "../../withDefaults.js";
+const i = o(e, {
+  resultKey: "audioBlob"
+});
+export {
+  i as AudioCapturePage
+};

package/dist/experience/pages/audio-review/AudioReviewPage.vue.js

@@ -0,0 +1,102 @@
+import { defineComponent as w, ref as f, computed as g, watch as k, onBeforeUnmount as h, openBlock as s, createElementBlock as u, normalizeClass as B, unref as L, renderSlot as c, createCommentVNode as b, withDirectives as U, createElementVNode as d, vModelText as j, toDisplayString as v } from "vue";
+import { cn as C } from "../../../lib/utils.js";
+const R = ["src"], S = {
+  key: 0,
+  class: "w-full max-w-md"
+}, $ = ["placeholder"], O = { class: "flex w-full max-w-md justify-between gap-3" }, A = ["disabled"], D = /* @__PURE__ */ w({
+  __name: "AudioReviewPage",
+  props: {
+    audioBlob: { type: [Object, null], default: null },
+    context: { type: Object, default: () => ({}) },
+    allowCaption: { type: Boolean, default: !1 },
+    captionPlaceholder: { type: String, default: "Add a caption…" },
+    acceptLabel: { type: String, default: "Use audio" },
+    retakeLabel: { type: String, default: "Retake" },
+    class: { type: String, default: void 0 }
+  },
+  emits: ["next", "back", "exit"],
+  setup(a, { emit: y }) {
+    const l = a, x = y, i = f(""), n = g(() => {
+      var t;
+      if (l.audioBlob instanceof Blob) return l.audioBlob;
+      const e = (t = l.context) == null ? void 0 : t.audioBlob;
+      return e instanceof Blob ? e : null;
+    }), o = f(null);
+    k(
+      n,
+      (e, t, r) => {
+        if (!e) {
+          o.value = null;
+          return;
+        }
+        const m = URL.createObjectURL(e);
+        o.value = m, r(() => URL.revokeObjectURL(m));
+      },
+      { immediate: !0 }
+    ), h(() => {
+      o.value && URL.revokeObjectURL(o.value);
+    });
+    const p = () => {
+      n.value && x("next", {
+        blob: n.value,
+        caption: l.allowCaption && i.value ? i.value : void 0
+      });
+    };
+    return (e, t) => (s(), u("section", {
+      class: B(L(C)(
+        "experience-page experience-page--audio-review flex h-full w-full flex-col items-center justify-center gap-6 p-8",
+        l.class
+      )),
+      "data-testid": "audio-review-page"
+    }, [
+      c(e.$slots, "preview", {
+        url: o.value,
+        blob: n.value
+      }, () => [
+        o.value ? (s(), u("audio", {
+          key: 0,
+          src: o.value,
+          controls: "",
+          class: "w-full max-w-md",
+          "data-testid": "audio-review-preview"
+        }, null, 8, R)) : b("", !0)
+      ]),
+      c(e.$slots, "caption", {}, () => [
+        a.allowCaption ? (s(), u("div", S, [
+          U(d("input", {
+            "onUpdate:modelValue": t[0] || (t[0] = (r) => i.value = r),
+            type: "text",
+            placeholder: a.captionPlaceholder,
+            class: "w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-card-foreground placeholder:text-muted-foreground",
+            "data-testid": "audio-review-caption"
+          }, null, 8, $), [
+            [j, i.value]
+          ])
+        ])) : b("", !0)
+      ]),
+      c(e.$slots, "actions", {
+        accept: p,
+        retake: () => e.$emit("back")
+      }, () => [
+        d("div", O, [
+          d("button", {
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground transition-colors hover:bg-secondary/80",
+            "data-testid": "audio-review-retake",
+            onClick: t[1] || (t[1] = (r) => e.$emit("back"))
+          }, v(a.retakeLabel), 1),
+          d("button", {
+            type: "button",
+            class: "inline-flex items-center justify-center rounded-md bg-primary px-6 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:pointer-events-none",
+            disabled: !n.value,
+            "data-testid": "audio-review-accept",
+            onClick: p
+          }, v(a.acceptLabel), 9, A)
+        ])
+      ])
+    ], 2));
+  }
+});
+export {
+  D as default
+};

package/dist/experience/pages/audio-review/AudioReviewPage.vue2.js

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

package/dist/experience/pages/audio-review/index.js

@@ -0,0 +1,9 @@
+import e from "./AudioReviewPage.vue.js";
+import { withExperienceDefaults as o } from "../../withDefaults.js";
+const r = o(e, {
+  action: "publishPost",
+  resultKey: "post"
+});
+export {
+  r as AudioReviewPage
+};