@gxp-dev/app-ui 0.1.0

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

@@ -0,0 +1,135 @@
+import { defineComponent as M, ref as g, watch as y, onMounted as B, onUnmounted as N, openBlock as s, createElementBlock as n, normalizeClass as x, unref as u, withDirectives as j, createElementVNode as a, vShow as L, createBlock as _, toDisplayString as b, createCommentVNode as v, createVNode as h, normalizeStyle as F } from "vue";
+import { cn as w } from "../../../lib/utils.js";
+import U from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/user.js";
+import q from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/mic-off.js";
+import z from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/video-off.js";
+const D = {
+  key: 0,
+  class: "flex h-full w-full items-center justify-center bg-muted",
+  "data-testid": "avatar-fallback"
+}, E = { class: "flex h-20 w-20 items-center justify-center rounded-full bg-primary text-primary-foreground" }, I = {
+  key: 1,
+  class: "text-3xl font-semibold"
+}, R = { class: "absolute right-3 top-3 flex gap-1.5" }, P = {
+  key: 0,
+  class: "flex items-center gap-1 rounded-full bg-destructive/90 px-2 py-1",
+  "data-testid": "muted-badge"
+}, Y = {
+  key: 1,
+  class: "flex items-center gap-1 rounded-full bg-destructive/90 px-2 py-1",
+  "data-testid": "camera-off-badge"
+}, $ = { class: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent px-3 py-2" }, G = {
+  class: "text-sm font-medium text-white",
+  "data-testid": "display-name"
+}, H = { class: "absolute bottom-2 right-3 flex h-16 w-2 flex-col-reverse overflow-hidden rounded-full bg-black/30" }, ee = /* @__PURE__ */ M({
+  __name: "LocalPreview",
+  props: {
+    videoStream: { default: void 0 },
+    audioStream: { default: void 0 },
+    isMuted: { type: Boolean, default: !1 },
+    isVideoOff: { type: Boolean, default: !1 },
+    displayName: { default: "You" },
+    class: {}
+  },
+  setup(o) {
+    const r = o, d = g(null), c = g(0);
+    let i = null, l = null, f = null;
+    y(
+      () => r.videoStream,
+      (e) => {
+        d.value && (d.value.srcObject = e ?? null);
+      },
+      { immediate: !0 }
+    ), B(() => {
+      d.value && r.videoStream && (d.value.srcObject = r.videoStream);
+    }), y(
+      () => r.audioStream,
+      (e) => {
+        p(), e && k(e);
+      },
+      { immediate: !0 }
+    );
+    function k(e) {
+      try {
+        let t = function() {
+          if (!l) return;
+          l.getByteFrequencyData(m);
+          const C = m.reduce((O, V) => O + V, 0) / m.length;
+          c.value = Math.min(100, Math.round(C / 255 * 100)), f = requestAnimationFrame(t);
+        };
+        i = new AudioContext(), l = i.createAnalyser(), l.fftSize = 256, i.createMediaStreamSource(e).connect(l);
+        const m = new Uint8Array(l.frequencyBinCount);
+        t();
+      } catch {
+      }
+    }
+    function p() {
+      f !== null && (cancelAnimationFrame(f), f = null), i && (i.close().catch(() => {
+      }), i = null), l = null, c.value = 0;
+    }
+    N(() => {
+      p();
+    });
+    function S(e) {
+      var t;
+      return ((t = e == null ? void 0 : e.charAt(0)) == null ? void 0 : t.toUpperCase()) || "?";
+    }
+    function A(e) {
+      return e >= 90 ? "bg-destructive" : e >= 70 ? "bg-yellow-500" : "bg-green-500";
+    }
+    return (e, t) => (s(), n("div", {
+      class: x(u(w)(
+        "relative overflow-hidden rounded-lg bg-muted",
+        r.class
+      ))
+    }, [
+      j(a("video", {
+        ref_key: "videoRef",
+        ref: d,
+        class: "local-preview-video h-full w-full object-cover",
+        autoplay: "",
+        playsinline: "",
+        muted: ""
+      }, null, 512), [
+        [L, !o.isVideoOff]
+      ]),
+      o.isVideoOff ? (s(), n("div", D, [
+        a("div", E, [
+          o.displayName ? (s(), n("span", I, b(S(o.displayName)), 1)) : (s(), _(u(U), {
+            key: 0,
+            class: "h-10 w-10"
+          }))
+        ])
+      ])) : v("", !0),
+      t[2] || (t[2] = a("div", {
+        class: "absolute left-3 top-3",
+        "data-testid": "live-badge"
+      }, [
+        a("span", { class: "rounded bg-destructive px-2 py-0.5 text-xs font-bold uppercase tracking-wider text-destructive-foreground" }, " LIVE ")
+      ], -1)),
+      a("div", R, [
+        o.isMuted ? (s(), n("div", P, [
+          h(u(q), { class: "h-3.5 w-3.5 text-destructive-foreground" }),
+          t[0] || (t[0] = a("span", { class: "text-xs font-medium text-destructive-foreground" }, "Muted", -1))
+        ])) : v("", !0),
+        o.isVideoOff ? (s(), n("div", Y, [
+          h(u(z), { class: "h-3.5 w-3.5 text-destructive-foreground" }),
+          t[1] || (t[1] = a("span", { class: "text-xs font-medium text-destructive-foreground" }, "Camera Off", -1))
+        ])) : v("", !0)
+      ]),
+      a("div", $, [
+        a("span", G, b(o.displayName), 1)
+      ]),
+      a("div", H, [
+        a("div", {
+          class: x(u(w)("w-full rounded-full transition-all duration-100", A(c.value))),
+          style: F({ height: `${c.value}%` }),
+          "data-testid": "audio-level-meter"
+        }, null, 6)
+      ])
+    ], 2));
+  }
+});
+export {
+  ee as default
+};

package/dist/components/domain/media-control-bar/MediaControlBar.vue.js

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

package/dist/components/domain/media-control-bar/MediaControlBar.vue2.js

@@ -0,0 +1,109 @@
+import { defineComponent as m, openBlock as r, createElementBlock as s, normalizeClass as n, unref as o, createBlock as d, createCommentVNode as u, createVNode as c, createElementVNode as f } from "vue";
+import { cn as l } from "../../../lib/utils.js";
+import h from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/mic-off.js";
+import v from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/mic.js";
+import y from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/video-off.js";
+import w from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/video.js";
+import x from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/screen-share.js";
+import k from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/hand.js";
+import p from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/log-out.js";
+const S = ["aria-label"], B = ["aria-label"], C = ["aria-label"], V = ["aria-label"], z = /* @__PURE__ */ m({
+  __name: "MediaControlBar",
+  props: {
+    isMuted: { type: Boolean, default: !1 },
+    isVideoOff: { type: Boolean, default: !1 },
+    isScreenSharing: { type: Boolean, default: !1 },
+    isHandRaised: { type: Boolean, default: !1 },
+    audioEnabled: { type: Boolean, default: !0 },
+    videoEnabled: { type: Boolean, default: !0 },
+    screenShareEnabled: { type: Boolean, default: !0 },
+    class: {}
+  },
+  emits: ["toggle-audio", "toggle-video", "toggle-screen-share", "toggle-hand", "leave"],
+  setup(e, { emit: g }) {
+    const b = e, a = g;
+    return (E, t) => (r(), s("div", {
+      class: n(o(l)(
+        "flex items-center justify-center gap-3 rounded-full bg-background/95 px-6 py-3 shadow-lg backdrop-blur-sm border border-border",
+        b.class
+      ))
+    }, [
+      e.audioEnabled ? (r(), s("button", {
+        key: 0,
+        type: "button",
+        class: n(o(l)(
+          "flex h-12 w-12 items-center justify-center rounded-full transition-colors",
+          e.isMuted ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-green-500 text-white hover:bg-green-600"
+        )),
+        "aria-label": e.isMuted ? "Unmute microphone" : "Mute microphone",
+        "data-testid": "audio-toggle",
+        onClick: t[0] || (t[0] = (i) => a("toggle-audio"))
+      }, [
+        e.isMuted ? (r(), d(o(h), {
+          key: 0,
+          class: "h-5 w-5"
+        })) : (r(), d(o(v), {
+          key: 1,
+          class: "h-5 w-5"
+        }))
+      ], 10, S)) : u("", !0),
+      e.videoEnabled ? (r(), s("button", {
+        key: 1,
+        type: "button",
+        class: n(o(l)(
+          "flex h-12 w-12 items-center justify-center rounded-full transition-colors",
+          e.isVideoOff ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-green-500 text-white hover:bg-green-600"
+        )),
+        "aria-label": e.isVideoOff ? "Turn on camera" : "Turn off camera",
+        "data-testid": "video-toggle",
+        onClick: t[1] || (t[1] = (i) => a("toggle-video"))
+      }, [
+        e.isVideoOff ? (r(), d(o(y), {
+          key: 0,
+          class: "h-5 w-5"
+        })) : (r(), d(o(w), {
+          key: 1,
+          class: "h-5 w-5"
+        }))
+      ], 10, B)) : u("", !0),
+      e.screenShareEnabled ? (r(), s("button", {
+        key: 2,
+        type: "button",
+        class: n(o(l)(
+          "flex h-12 w-12 items-center justify-center rounded-full transition-colors",
+          e.isScreenSharing ? "bg-blue-500 text-white hover:bg-blue-600 media-control-pulse" : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+        )),
+        "aria-label": e.isScreenSharing ? "Stop screen sharing" : "Share screen",
+        "data-testid": "screen-share-toggle",
+        onClick: t[2] || (t[2] = (i) => a("toggle-screen-share"))
+      }, [
+        c(o(x), { class: "h-5 w-5" })
+      ], 10, C)) : u("", !0),
+      f("button", {
+        type: "button",
+        class: n(o(l)(
+          "flex h-12 w-12 items-center justify-center rounded-full transition-colors",
+          e.isHandRaised ? "bg-yellow-500 text-white hover:bg-yellow-600 media-control-bounce" : "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+        )),
+        "aria-label": e.isHandRaised ? "Lower hand" : "Raise hand",
+        "data-testid": "hand-toggle",
+        onClick: t[3] || (t[3] = (i) => a("toggle-hand"))
+      }, [
+        c(o(k), { class: "h-5 w-5" })
+      ], 10, V),
+      t[5] || (t[5] = f("div", { class: "mx-1 h-8 w-px bg-border" }, null, -1)),
+      f("button", {
+        type: "button",
+        class: "flex h-12 w-12 items-center justify-center rounded-full bg-destructive text-destructive-foreground transition-colors hover:bg-destructive/90",
+        "aria-label": "Leave call",
+        "data-testid": "leave-button",
+        onClick: t[4] || (t[4] = (i) => a("leave"))
+      }, [
+        c(o(p), { class: "h-5 w-5" })
+      ])
+    ], 2));
+  }
+});
+export {
+  z as default
+};

package/dist/components/domain/message-composer/MessageComposer.vue.js

@@ -0,0 +1,162 @@
+import { defineComponent as N, ref as p, onBeforeUnmount as D, openBlock as i, createElementBlock as d, normalizeClass as E, unref as u, createElementVNode as n, createTextVNode as K, toDisplayString as y, createCommentVNode as h, createVNode as b, Fragment as $, renderList as z, withDirectives as M, vModelText as P } from "vue";
+import { cn as U } from "../../../lib/utils.js";
+import T from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/x.js";
+import C from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/paperclip.js";
+import L from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/send.js";
+const X = {
+  key: 0,
+  class: "flex items-center gap-2 border-b border-border bg-muted/50 px-3 py-2",
+  "data-testid": "reply-preview"
+}, q = { class: "flex-1 truncate text-sm text-muted-foreground" }, G = {
+  key: 0,
+  class: "font-medium text-foreground"
+}, H = { class: "ml-1 italic" }, J = {
+  key: 1,
+  class: "flex flex-wrap gap-2 border-b border-border px-3 py-2",
+  "data-testid": "attachment-list"
+}, O = { class: "max-w-[120px] truncate" }, Q = ["aria-label", "onClick"], W = { class: "flex items-end gap-2 p-3" }, Y = ["disabled"], Z = ["accept"], ee = ["placeholder", "disabled"], te = ["disabled"], ie = /* @__PURE__ */ N({
+  __name: "MessageComposer",
+  props: {
+    replyingTo: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    placeholder: { default: "Type a message..." },
+    maxAttachments: { default: 10 },
+    acceptedFileTypes: { default: "*" },
+    class: {}
+  },
+  emits: ["send", "cancel-reply", "typing-start", "typing-stop"],
+  setup(a, { expose: _, emit: A }) {
+    const v = a, c = A, o = p(""), t = p([]), x = p(null), w = p(null), m = p(!1);
+    let s = null;
+    function F() {
+      m.value || (m.value = !0, c("typing-start")), s && clearTimeout(s), s = setTimeout(() => {
+        m.value = !1, c("typing-stop");
+      }, 2e3);
+    }
+    function k() {
+      !o.value.trim() && t.value.length === 0 || (c("send", o.value, t.value), o.value = "", t.value = [], m.value && (m.value = !1, s && clearTimeout(s), c("typing-stop")));
+    }
+    function R(e) {
+      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), k());
+    }
+    function S() {
+      var e;
+      (e = x.value) == null || e.click();
+    }
+    function V(e) {
+      const l = e.target, f = l.files;
+      if (f) {
+        const r = v.maxAttachments - t.value.length, g = Array.from(f).slice(0, r);
+        t.value = [...t.value, ...g];
+      }
+      l.value = "";
+    }
+    function j(e) {
+      t.value.splice(e, 1);
+    }
+    function B() {
+      var e;
+      (e = w.value) == null || e.focus();
+    }
+    function I() {
+      o.value = "", t.value = [];
+    }
+    return D(() => {
+      s && clearTimeout(s);
+    }), _({ focus: B, clear: I }), (e, l) => {
+      var f;
+      return i(), d("div", {
+        class: E(u(U)(
+          "flex flex-col rounded-lg border border-border bg-background",
+          v.class
+        )),
+        "data-testid": "message-composer"
+      }, [
+        a.replyingTo ? (i(), d("div", X, [
+          n("div", q, [
+            l[2] || (l[2] = K(" Replying to ", -1)),
+            (f = a.replyingTo.sender) != null && f.display_name ? (i(), d("span", G, y(a.replyingTo.sender.display_name), 1)) : h("", !0),
+            n("span", H, '"' + y(a.replyingTo.content) + '"', 1)
+          ]),
+          n("button", {
+            type: "button",
+            class: "flex h-5 w-5 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground",
+            "aria-label": "Cancel reply",
+            "data-testid": "cancel-reply-button",
+            onClick: l[0] || (l[0] = (r) => c("cancel-reply"))
+          }, [
+            b(u(T), { class: "h-3.5 w-3.5" })
+          ])
+        ])) : h("", !0),
+        t.value.length > 0 ? (i(), d("div", J, [
+          (i(!0), d($, null, z(t.value, (r, g) => (i(), d("div", {
+            key: g,
+            class: "flex items-center gap-1.5 rounded-full bg-muted px-3 py-1 text-xs text-foreground",
+            "data-testid": "attachment-chip"
+          }, [
+            b(u(C), { class: "h-3 w-3 text-muted-foreground" }),
+            n("span", O, y(r.name), 1),
+            n("button", {
+              type: "button",
+              class: "flex h-4 w-4 items-center justify-center rounded-full text-muted-foreground hover:bg-destructive/10 hover:text-destructive",
+              "aria-label": `Remove ${r.name}`,
+              "data-testid": "remove-attachment-button",
+              onClick: (ae) => j(g)
+            }, [
+              b(u(T), { class: "h-3 w-3" })
+            ], 8, Q)
+          ]))), 128))
+        ])) : h("", !0),
+        n("div", W, [
+          n("button", {
+            type: "button",
+            class: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Attach file",
+            "data-testid": "attachment-button",
+            disabled: a.disabled || t.value.length >= a.maxAttachments,
+            onClick: S
+          }, [
+            b(u(C), { class: "h-5 w-5" })
+          ], 8, Y),
+          n("input", {
+            ref_key: "fileInputRef",
+            ref: x,
+            type: "file",
+            class: "hidden",
+            multiple: "",
+            accept: a.acceptedFileTypes,
+            "data-testid": "file-input",
+            onChange: V
+          }, null, 40, Z),
+          M(n("textarea", {
+            ref_key: "textareaRef",
+            ref: w,
+            "onUpdate:modelValue": l[1] || (l[1] = (r) => o.value = r),
+            placeholder: a.placeholder,
+            disabled: a.disabled,
+            rows: "1",
+            class: "flex-1 resize-none rounded-md border-0 bg-transparent px-2 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+            "data-testid": "message-textarea",
+            onInput: F,
+            onKeydown: R
+          }, null, 40, ee), [
+            [P, o.value]
+          ]),
+          n("button", {
+            type: "button",
+            class: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
+            "aria-label": "Send message",
+            "data-testid": "send-button",
+            disabled: a.disabled || !o.value.trim() && t.value.length === 0,
+            onClick: k
+          }, [
+            b(u(L), { class: "h-4 w-4" })
+          ], 8, te)
+        ])
+      ], 2);
+    };
+  }
+});
+export {
+  ie as default
+};

package/dist/components/domain/message-composer/MessageComposer.vue2.js

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

package/dist/components/domain/message-list/MessageList.vue.js

@@ -0,0 +1,59 @@
+import { defineComponent as h, ref as c, watch as v, nextTick as T, openBlock as l, createElementBlock as n, normalizeClass as L, unref as d, createVNode as k, createElementVNode as B, toDisplayString as m, createCommentVNode as f, renderSlot as S } from "vue";
+import { cn as w } from "../../../lib/utils.js";
+import N from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/loader-2.js";
+const C = {
+  key: 0,
+  class: "flex items-center justify-center gap-2 py-4 text-sm text-muted-foreground",
+  "data-testid": "loading-indicator"
+}, H = {
+  key: 1,
+  class: "flex flex-1 items-center justify-center py-12 text-sm text-muted-foreground",
+  "data-testid": "empty-state"
+}, A = /* @__PURE__ */ h({
+  __name: "MessageList",
+  props: {
+    messages: {},
+    hasMore: { type: Boolean, default: !1 },
+    isLoading: { type: Boolean, default: !1 },
+    emptyText: { default: "No messages yet" },
+    loadingText: { default: "Loading messages..." },
+    class: {}
+  },
+  emits: ["load-more"],
+  setup(e, { expose: u, emit: g }) {
+    const o = e, p = g, s = c(null), i = c(!0);
+    v(
+      () => o.messages.length,
+      async () => {
+        i.value && (await T(), r());
+      }
+    );
+    function r() {
+      s.value && (s.value.scrollTop = s.value.scrollHeight);
+    }
+    function x(a) {
+      const t = a.target, y = t.scrollHeight - t.scrollTop - t.clientHeight < 50;
+      i.value = y, t.scrollTop < 100 && o.hasMore && !o.isLoading && p("load-more");
+    }
+    return u({ scrollToBottom: r }), (a, t) => (l(), n("div", {
+      ref_key: "containerRef",
+      ref: s,
+      class: L(d(w)(
+        "flex flex-col overflow-y-auto",
+        o.class
+      )),
+      "data-testid": "message-list",
+      onScroll: x
+    }, [
+      e.isLoading ? (l(), n("div", C, [
+        k(d(N), { class: "h-4 w-4 animate-spin" }),
+        B("span", null, m(e.loadingText), 1)
+      ])) : f("", !0),
+      e.messages.length === 0 && !e.isLoading ? (l(), n("div", H, m(e.emptyText), 1)) : f("", !0),
+      S(a.$slots, "default")
+    ], 34));
+  }
+});
+export {
+  A as default
+};

package/dist/components/domain/message-list/MessageList.vue2.js

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

package/dist/components/domain/on-screen-keyboard/OnScreenKeyboard.vue.js

@@ -0,0 +1,106 @@
+import { defineComponent as z, ref as _, computed as i, openBlock as l, createElementBlock as n, normalizeClass as c, unref as u, createElementVNode as L, createVNode as $, createCommentVNode as j, Fragment as p, renderList as m, normalizeStyle as B, toDisplayString as N } from "vue";
+import { cn as d } from "../../../lib/utils.js";
+import { LAYOUTS as y } from "./layouts.js";
+import U from "../../../node_modules/.pnpm/lucide-vue-next@0.344.0_vue@3.5.35_typescript@5.9.3_/node_modules/lucide-vue-next/dist/esm/icons/x.js";
+const V = {
+  key: 0,
+  class: "flex justify-end"
+}, E = ["data-testid", "onClick"], T = /* @__PURE__ */ z({
+  __name: "OnScreenKeyboard",
+  props: {
+    layout: { default: "full" },
+    customKeys: {},
+    size: { default: "md" },
+    showClose: { type: Boolean, default: !1 },
+    class: {}
+  },
+  emits: ["keypress", "enter", "backspace", "close"],
+  setup(f, { emit: g }) {
+    const a = f, s = g, r = _(!1), k = i(() => a.layout === "custom" && a.customKeys ? a.customKeys.map(
+      (e) => e.map((o) => ({ label: o, value: o }))
+    ) : y[a.layout] ?? y.full), h = i(() => {
+      switch (a.size) {
+        case "sm":
+          return "h-8 min-w-8 text-xs px-1.5";
+        case "lg":
+          return "h-14 min-w-14 text-lg px-3";
+        default:
+          return "h-10 min-w-10 text-sm px-2";
+      }
+    }), v = i(() => {
+      switch (a.size) {
+        case "sm":
+          return "gap-1";
+        case "lg":
+          return "gap-2";
+        default:
+          return "gap-1.5";
+      }
+    });
+    function x(e) {
+      return e.value === "shift" || e.value === "backspace" || e.value === "enter" ? e.label : r.value ? e.label.toUpperCase() : e.label;
+    }
+    function w(e) {
+      if (e.width && e.width > 1)
+        return `flex-grow: ${e.width}; flex-basis: 0;`;
+    }
+    function C(e) {
+      return e.value === "shift" || e.value === "backspace" || e.value === "enter" || e.value === " ";
+    }
+    function K(e) {
+      if (e.value === "shift") {
+        r.value = !r.value;
+        return;
+      }
+      if (e.value === "backspace") {
+        s("backspace"), s("keypress", "backspace");
+        return;
+      }
+      if (e.value === "enter") {
+        s("enter"), s("keypress", "enter");
+        return;
+      }
+      const o = r.value ? e.value.toUpperCase() : e.value;
+      s("keypress", o), r.value && (r.value = !1);
+    }
+    return (e, o) => (l(), n("div", {
+      class: c(u(d)("inline-flex flex-col rounded-lg bg-keyboard-key p-2", v.value, a.class)),
+      "data-testid": "on-screen-keyboard"
+    }, [
+      f.showClose ? (l(), n("div", V, [
+        L("button", {
+          class: "rounded p-1 text-keyboard-key-foreground hover:bg-keyboard-key-active hover:text-keyboard-key-active-foreground",
+          "data-testid": "close-button",
+          onClick: o[0] || (o[0] = (b) => s("close"))
+        }, [
+          $(u(U), { class: "h-4 w-4" })
+        ])
+      ])) : j("", !0),
+      (l(!0), n(p, null, m(k.value, (b, S) => (l(), n("div", {
+        key: S,
+        class: c(u(d)("flex justify-center", v.value)),
+        "data-testid": "keyboard-row"
+      }, [
+        (l(!0), n(p, null, m(b, (t) => (l(), n("button", {
+          key: t.value + t.label,
+          class: c(u(d)(
+            "flex items-center justify-center rounded-lg font-medium transition-colors",
+            "bg-keyboard-key text-keyboard-key-foreground",
+            "border border-border",
+            "hover:bg-keyboard-key-active hover:text-keyboard-key-active-foreground",
+            "active:bg-keyboard-key-active active:text-keyboard-key-active-foreground",
+            h.value,
+            C(t) && "bg-keyboard-key/80",
+            t.value === "shift" && r.value && "bg-keyboard-key-active text-keyboard-key-active-foreground"
+          )),
+          style: B(w(t)),
+          "data-testid": `key-${t.value}`,
+          onClick: (O) => K(t)
+        }, N(x(t)), 15, E))), 128))
+      ], 2))), 128))
+    ], 2));
+  }
+});
+export {
+  T as default
+};

package/dist/components/domain/on-screen-keyboard/OnScreenKeyboard.vue2.js

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

package/dist/components/domain/on-screen-keyboard/layouts.js

@@ -0,0 +1,31 @@
+function e(t, c, n) {
+  return { label: t, value: c ?? t, width: n };
+}
+const s = [
+  [e("1"), e("2"), e("3"), e("4"), e("5"), e("6"), e("7"), e("8"), e("9"), e("0")],
+  [e("q"), e("w"), e("e"), e("r"), e("t"), e("y"), e("u"), e("i"), e("o"), e("p")],
+  [e("a"), e("s"), e("d"), e("f"), e("g"), e("h"), e("j"), e("k"), e("l")],
+  [e("Shift", "shift", 1.5), e("z"), e("x"), e("c"), e("v"), e("b"), e("n"), e("m"), e("Bksp", "backspace", 1.5)],
+  [e("Space", " ", 4), e("."), e(","), e("Enter", "enter", 2)]
+], r = [
+  [e("q"), e("w"), e("e"), e("r"), e("t"), e("y"), e("u"), e("i"), e("o"), e("p")],
+  [e("a"), e("s"), e("d"), e("f"), e("g"), e("h"), e("j"), e("k"), e("l")],
+  [e("Shift", "shift", 1.5), e("z"), e("x"), e("c"), e("v"), e("b"), e("n"), e("m"), e("Bksp", "backspace", 1.5)],
+  [e("Space", " ", 4), e("Enter", "enter", 2)]
+], p = [
+  [e("7"), e("8"), e("9")],
+  [e("4"), e("5"), e("6")],
+  [e("1"), e("2"), e("3")],
+  [e("."), e("0"), e("Bksp", "backspace")],
+  [e("Enter", "enter", 3)]
+], a = {
+  full: s,
+  text: r,
+  numeric: p
+};
+export {
+  s as FULL_LAYOUT,
+  a as LAYOUTS,
+  p as NUMERIC_LAYOUT,
+  r as TEXT_LAYOUT
+};