@genai-fi/base 4.1.3 → 4.2.0

package/dist/Close-BGAFHd7i.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as r } from "./createSvgIcon-DQhMxTx4.js";
+const c = r(/* @__PURE__ */ o("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Close");
+export {
+  c as C
+};

package/dist/assets/PercentageBar.css

@@ -1 +1 @@
-._outer_1pzwa_1{position:relative;overflow:hidden;border-radius:4px;color:#fff}._outer_1pzwa_1._orange_1pzwa_8{background-color:#c6840c33}._orange_1pzwa_8._progress_1pzwa_11{background-color:#c6840c}._outer_1pzwa_1._purple_1pzwa_15{background-color:#a751c933}._purple_1pzwa_15._progress_1pzwa_11{background-color:#a751c9}._outer_1pzwa_1._blue_1pzwa_22{background-color:#5165c933}._blue_1pzwa_22._progress_1pzwa_11{background-color:#5165c9}._outer_1pzwa_1._green_1pzwa_29{background-color:#53a52733}._green_1pzwa_29._progress_1pzwa_11{background-color:#53a527}._outer_1pzwa_1._red_1pzwa_36{background-color:#db491d33}._red_1pzwa_36._progress_1pzwa_11{background-color:#db491d}._progress_1pzwa_11{position:absolute;left:0;top:0;bottom:0;width:100%;background:#1976d2;transition:width .5s}._label_1pzwa_53{position:relative;font-weight:700;text-align:right;padding:.2rem .5rem;box-sizing:border-box;font-size:12pt;transition:width .5s}
+._outer_161yr_1{position:relative;overflow:hidden;border-radius:4px;color:#fff}._outer_161yr_1._orange_161yr_8{background-color:#c6840c33}._orange_161yr_8._progress_161yr_11{background-color:#c6840c}._outer_161yr_1._purple_161yr_15{background-color:#a751c933}._purple_161yr_15._progress_161yr_11{background-color:#a751c9}._outer_161yr_1._blue_161yr_22{background-color:#5165c933}._blue_161yr_22._progress_161yr_11{background-color:#5165c9}._outer_161yr_1._green_161yr_29{background-color:#53a52733}._green_161yr_29._progress_161yr_11{background-color:#53a527}._outer_161yr_1._red_161yr_36{background-color:#db491d33}._red_161yr_36._progress_161yr_11{background-color:#db491d}._progress_161yr_11{position:absolute;left:0;top:0;bottom:0;width:100%;background:#1976d2;transition:width .5s,height .5s}._label_161yr_53{position:relative;font-weight:700;text-align:right;padding:.2rem .5rem;box-sizing:border-box;font-size:12pt;transition:width .5s,height .5s}._horizontal_161yr_63{width:100%;min-height:20px}._vertical_161yr_68{width:min-content;height:100%}._vertical_161yr_68 ._label_161yr_53{display:flex;align-items:flex-end}._vertical_161yr_68 ._progress_161yr_11{height:100%;bottom:unset}

package/dist/assets/SidePanel.css

@@ -0,0 +1 @@
+._sidePanel_1j2co_1{background:#fff;display:flex;z-index:2;flex-shrink:0;position:relative;transition:opacity .3s ease-in;opacity:0}._sidePanel_1j2co_1._closed_1j2co_14{opacity:0;transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-out}._sidePanel_1j2co_1._opening_1j2co_19{opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-in}._sidePanel_1j2co_1._open_1j2co_19{opacity:1}._resizer_1j2co_28{width:30px;cursor:ew-resize;background-color:transparent;box-sizing:border-box;position:absolute;left:-8px;opacity:1;touch-action:none;-webkit-user-select:none;user-select:none;top:0;bottom:0;z-index:2}._noSelect_1j2co_43{-webkit-user-select:none;user-select:none}._resizerBar_1j2co_47{position:absolute;top:0;left:7px;width:2px;height:100%;background-color:#ddd;touch-action:none;-webkit-user-select:none;user-select:none}._resizer_1j2co_28:hover ._resizerBar_1j2co_47{background-color:#75a4e288}._resizer_1j2co_28._resizing_1j2co_62 ._resizerBar_1j2co_47{background-color:#75a4e2}._resizerHandle_1j2co_66{position:absolute;top:50%;left:2px;width:10px;height:60px;transform:translateY(-50%);background-color:#fff;border-radius:3px;border:2px solid #ddd;box-shadow:0 0 4px #ccc;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHandle_1j2co_66._minimised_1j2co_84{left:-15px;width:20px}._resizerHandle_1j2co_66:focus{outline:2px solid #75a4e2;outline-offset:2px}._resizerHandle_1j2co_66:before{content:"";display:block;width:4px;height:20px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 2px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 8px,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 0 14px;background-repeat:no-repeat;background-size:4px 4px}._resizer_1j2co_28:hover ._resizerHandle_1j2co_66,._resizer_1j2co_28._resizing_1j2co_62 ._resizerHandle_1j2co_66{border-color:#75a4e2}._expand_1j2co_114{position:absolute;top:2rem;right:0;height:40px;width:30px;background-color:#fff;border-radius:3px;border:2px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center}._content_1j2co_130{flex-grow:1;overflow:auto;min-width:300px!important;position:relative}._closeButton_1j2co_137{position:absolute;top:.5rem;right:.5rem}

package/dist/components/ConnectionStatus/ConnectionStatus.d.ts

@@ -1,8 +1,9 @@
 interface Props {
     api: string;
+    checkURL?: string;
     appName: string;
     visibility?: number;
     noCheck?: boolean;
 }
-export default function ConnectionStatus({ api, appName, visibility, noCheck }: Props): import("react/jsx-runtime").JSX.Element;
+export default function ConnectionStatus({ api, checkURL, appName, visibility, noCheck }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ConnectionStatus/ConnectionStatus.js

@@ -1,24 +1,24 @@
-import { jsx as r, Fragment as I, jsxs as L } from "react/jsx-runtime";
-import { iceConfig as W, webrtcActive as q } from "../../state/webrtcState.js";
-import { useRef as F, useState as g, useEffect as o } from "react";
-import { getRTConfig as P } from "./ice.js";
-import { W as R, F as z } from "../../FlashWifi-DkGhdWqj.js";
-import { useTranslation as E } from "react-i18next";
-import { c as b } from "../../createSvgIcon-DQhMxTx4.js";
-import { checkP2P as j } from "./check.js";
-import { usePeerObject as x } from "../../hooks/peer.js";
-import { a as T } from "../../react-D_xU5dL6.js";
-import '../../assets/ConnectionStatus.css';const A = "_containerConnecting_1p4sr_15 _container_1p4sr_3", U = "_containerSuccess_1p4sr_20 _container_1p4sr_3", k = "_containerMedium_1p4sr_25 _container_1p4sr_3", w = "_containerBad_1p4sr_30 _container_1p4sr_3", D = "_message_1p4sr_35", a = {
-  containerConnecting: A,
-  containerSuccess: U,
-  containerMedium: k,
-  containerBad: w,
-  message: D
-}, O = b(/* @__PURE__ */ r("path", {
+import { jsx as r, Fragment as W, jsxs as q } from "react/jsx-runtime";
+import { iceConfig as F, webrtcActive as L } from "../../state/webrtcState.js";
+import { useRef as P, useState as g, useEffect as o } from "react";
+import { getRTConfig as z } from "./ice.js";
+import { W as E, F as R } from "../../FlashWifi-DkGhdWqj.js";
+import { useTranslation as b } from "react-i18next";
+import { c as j } from "../../createSvgIcon-DQhMxTx4.js";
+import { checkP2P as x } from "./check.js";
+import { usePeerObject as A } from "../../hooks/peer.js";
+import { a as B } from "../../react-D_xU5dL6.js";
+import '../../assets/ConnectionStatus.css';const w = "_containerConnecting_1p4sr_15 _container_1p4sr_3", D = "_containerSuccess_1p4sr_20 _container_1p4sr_3", O = "_containerMedium_1p4sr_25 _container_1p4sr_3", U = "_containerBad_1p4sr_30 _container_1p4sr_3", $ = "_message_1p4sr_35", a = {
+  containerConnecting: w,
+  containerSuccess: D,
+  containerMedium: O,
+  containerBad: U,
+  message: $
+}, k = j(/* @__PURE__ */ r("path", {
   d: "M24 8.98C20.93 5.9 16.69 4 12 4S3.07 5.9 0 8.98L12 21v-9h8.99zM19.59 14l-2.09 2.09L15.41 14 14 15.41l2.09 2.09L14 19.59 15.41 21l2.09-2.08L19.59 21 21 19.59l-2.08-2.09L21 15.41z"
-}), "SignalWifiBad"), $ = 6e4;
-function ee({ api: f, appName: h, visibility: S, noCheck: v }) {
-  const { t: p } = E(), e = x(), [u, y] = T(W), [C, l] = T(q), m = F(), [n, d] = g("connecting"), [s, _] = g(0), [, B] = g(!1), [c, M] = g(!1), i = n === "ready";
+}), "SignalWifiBad"), N = 6e4;
+function te({ api: f, checkURL: S, appName: h, visibility: v, noCheck: y }) {
+  const { t: p } = b(), e = A(), [u, C] = B(F), [M, l] = B(L), m = P(), [n, d] = g("connecting"), [s, _] = g(0), [, I] = g(!1), [c, T] = g(!1), i = n === "ready";
   return o(() => {
     if (e)
       return e.on("status", d), e.on("quality", _), d(e.status), _(e.quality), () => {
@@ -26,48 +26,48 @@ function ee({ api: f, appName: h, visibility: S, noCheck: v }) {
       };
     _(0), d("connecting");
   }, [e]), o(() => {
-    u || P(f, h, (t) => {
-      y(t);
+    u || z(f, h, (t) => {
+      C(t);
     });
-  }, [u, y, f, h]), o(() => {
+  }, [u, C, f, h]), o(() => {
     if (n !== "ready") {
       const t = setTimeout(() => {
-        M(!0);
-      }, $);
+        T(!0);
+      }, N);
       return () => {
         clearTimeout(t);
       };
     } else
-      M(!1);
+      T(!1);
   }, [n]), o(() => {
-    u && C === "unset" && (navigator != null && navigator.mediaDevices ? navigator.mediaDevices.getUserMedia({ video: !0 }).then((t) => {
+    u && M === "unset" && (navigator != null && navigator.mediaDevices ? navigator.mediaDevices.getUserMedia({ video: !0 }).then((t) => {
       m.current = t, l("full");
     }).catch(() => {
       l("relay");
     }) : l("relay"));
-  }, [u, C, l]), o(() => {
+  }, [u, M, l]), o(() => {
     i && m.current && (m.current.getTracks().forEach(function(t) {
       t.stop();
     }), m.current = void 0);
   }, [i, n]), o(() => {
-    i && e && !v && e.code && j(f, e.code).then((t) => {
-      B(t);
+    i && e && !y && e.code && x(S || f, e.code).then((t) => {
+      I(t);
     });
-  }, [i, e, f, v]), /* @__PURE__ */ r(I, { children: (S === void 0 || s <= S) && /* @__PURE__ */ L(
+  }, [i, e, f, S, y]), /* @__PURE__ */ r(W, { children: (v === void 0 || s <= v) && /* @__PURE__ */ q(
     "div",
     {
       className: n === "connecting" && !c ? a.containerConnecting : s === 3 ? a.containerSuccess : s === 2 ? a.containerMedium : a.containerBad,
       children: [
         !c && s > 0 && /* @__PURE__ */ r(
-          R,
+          E,
           {
             fontSize: "large",
             color: "inherit"
           }
         ),
-        !c && s <= 0 && /* @__PURE__ */ r(z, {}),
+        !c && s <= 0 && /* @__PURE__ */ r(R, {}),
         c && /* @__PURE__ */ r(
-          O,
+          k,
           {
             fontSize: "large",
             color: "inherit"
@@ -79,5 +79,5 @@ function ee({ api: f, appName: h, visibility: S, noCheck: v }) {
   ) });
 }
 export {
-  ee as default
+  te as default
 };

package/dist/components/Motd/Motd.js

@@ -1,39 +1,37 @@
-import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { useState as l, useEffect as d, useMemo as m } from "react";
-import { c as _ } from "../../createSvgIcon-DQhMxTx4.js";
+import { C as _ } from "../../Close-BGAFHd7i.js";
 import { IconButton as a } from "@mui/material";
-import '../../assets/Motd.css';const g = "#e04f66", h = "#fd9d32", b = "#e8f0fe", j = "_motd_1rn2j_3", v = "_info_1rn2j_15 _motd_1rn2j_3", w = "_warn_1rn2j_21 _motd_1rn2j_3", C = "_error_1rn2j_26 _motd_1rn2j_3", M = {
+import '../../assets/Motd.css';const g = "#e04f66", b = "#fd9d32", h = "#e8f0fe", j = "_motd_1rn2j_3", v = "_info_1rn2j_15 _motd_1rn2j_3", w = "_warn_1rn2j_21 _motd_1rn2j_3", C = "_error_1rn2j_26 _motd_1rn2j_3", M = {
   bgColourful3: g,
-  bgColourful2: h,
-  bgSubdued1: b,
+  bgColourful2: b,
+  bgSubdued1: h,
   motd: j,
   info: v,
   warn: w,
   error: C
-}, p = _(/* @__PURE__ */ r("path", {
-  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "Close");
-function k({ message: t }) {
-  const [o, i] = l(t || ""), [f, c] = l(!0);
+};
+function k({ message: o }) {
+  const [r, i] = l(o || ""), [f, u] = l(!0);
   d(() => {
-    t || fetch("undefined/motd").then((s) => {
-      s.ok && s.json().then((e) => {
-        e && e.motd && i(e.motd);
+    o || fetch("undefined/motd").then((s) => {
+      s.ok && s.json().then((t) => {
+        t && t.motd && i(t.motd);
       });
     }).catch(() => {
       console.warn("MOTD Failed");
     });
-  }, [t]);
-  const n = m(() => o.startsWith("info:") ? { msg: o.substring(5), level: "info" } : o.startsWith("warn:") ? { msg: o.substring(5), level: "warn" } : o.startsWith("error:") ? { msg: o.substring(6), level: "error" } : { msg: o, level: "info" }, [o]);
-  return o.length > 0 && f ? /* @__PURE__ */ u("div", { className: M[n.level], children: [
-    /* @__PURE__ */ r("div", { style: { flexGrow: 1 }, children: n.msg }),
-    /* @__PURE__ */ r(
+  }, [o]);
+  const n = m(() => r.startsWith("info:") ? { msg: r.substring(5), level: "info" } : r.startsWith("warn:") ? { msg: r.substring(5), level: "warn" } : r.startsWith("error:") ? { msg: r.substring(6), level: "error" } : { msg: r, level: "info" }, [r]);
+  return r.length > 0 && f ? /* @__PURE__ */ c("div", { className: M[n.level], children: [
+    /* @__PURE__ */ e("div", { style: { flexGrow: 1 }, children: n.msg }),
+    /* @__PURE__ */ e(
       a,
       {
         color: "inherit",
-        onClick: () => c(!1),
-        children: /* @__PURE__ */ r(
-          p,
+        onClick: () => u(!1),
+        children: /* @__PURE__ */ e(
+          _,
           {
             fontSize: "large",
             color: "inherit"

package/dist/components/PercentageBar/PercentageBar.d.ts

@@ -2,6 +2,10 @@ export type Colours = 'purple' | 'green' | 'blue' | 'red' | 'orange';
 interface Props {
     colour: Colours;
     value: number;
+    hideLabel?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    thickness?: number;
+    style?: React.CSSProperties;
 }
-export default function PercentageBar({ colour, value }: Props): import("react/jsx-runtime").JSX.Element;
+export default function PercentageBar({ colour, value, hideLabel, orientation, thickness, style: cssStyle }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PercentageBar/PercentageBar.js

@@ -1,37 +1,43 @@
-import { jsxs as a, jsx as o } from "react/jsx-runtime";
-import '../../assets/PercentageBar.css';const _ = "_outer_1pzwa_1", n = "_orange_1pzwa_8", l = "_progress_1pzwa_11", p = "_purple_1pzwa_15", c = "_blue_1pzwa_22", u = "_green_1pzwa_29", d = "_red_1pzwa_36", g = "_label_1pzwa_53", e = {
-  outer: _,
-  orange: n,
-  progress: l,
-  purple: p,
-  blue: c,
+import { jsxs as n, jsx as s } from "react/jsx-runtime";
+import '../../assets/PercentageBar.css';const i = "_outer_161yr_1", p = "_orange_161yr_8", g = "_progress_161yr_11", h = "_purple_161yr_15", d = "_blue_161yr_22", u = "_green_161yr_29", y = "_red_161yr_36", $ = "_label_161yr_53", v = "_horizontal_161yr_63", b = "_vertical_161yr_68", r = {
+  outer: i,
+  orange: p,
+  progress: g,
+  purple: h,
+  blue: d,
   green: u,
-  red: d,
-  label: g
+  red: y,
+  label: $,
+  horizontal: v,
+  vertical: b
 };
-function i({ colour: s, value: t }) {
-  const r = Math.round(t);
-  return /* @__PURE__ */ a("div", { className: `${e.outer} ${e[s]}`, children: [
-    /* @__PURE__ */ o(
-      "div",
-      {
-        className: `${e.progress} ${e[s]}`,
-        style: { width: `${r}%` }
-      }
-    ),
-    /* @__PURE__ */ a(
-      "div",
-      {
-        className: e.label,
-        style: { width: `${r}%` },
-        children: [
-          r,
-          "%"
-        ]
-      }
-    )
-  ] });
+function x({ colour: o, value: a, hideLabel: c, orientation: t, thickness: l, style: _ }) {
+  const e = Math.round(a);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: `${r.outer} ${r[o]} ${r[t || "horizontal"]}`,
+      style: l ? t === "vertical" ? { width: `${l}px`, ..._ } : { height: `${l}px`, ..._ } : _,
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: `${r.progress} ${r[o]}`,
+            style: t === "vertical" ? { height: `${e}%` } : { width: `${e}%` }
+          }
+        ),
+        !c && /* @__PURE__ */ s(
+          "div",
+          {
+            className: r.label,
+            style: t === "vertical" ? { height: `${e}%` } : { width: `${e}%` },
+            children: `${e}%`
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  i as default
+  x as default
 };

package/dist/components/SidePanel/SidePanel.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+interface Props extends PropsWithChildren {
+    open?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    position?: 'left' | 'right';
+}
+export default function SidePanel({ children, open, onClose, onOpen, position }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SidePanel/SidePanel.js

@@ -0,0 +1,117 @@
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { useState as d, useRef as x, useEffect as w } from "react";
+import { C as E } from "../../Close-BGAFHd7i.js";
+import { IconButton as H } from "@mui/material";
+import '../../assets/SidePanel.css';const L = "_sidePanel_1j2co_1", N = "_closed_1j2co_14", P = "_opening_1j2co_19", $ = "_open_1j2co_19", C = "_resizer_1j2co_28", A = "_noSelect_1j2co_43", k = "_resizerBar_1j2co_47", X = "_resizing_1j2co_62", K = "_resizerHandle_1j2co_66", O = "_minimised_1j2co_84", U = "_content_1j2co_130", F = "_closeButton_1j2co_137", e = {
+  sidePanel: L,
+  closed: N,
+  opening: P,
+  open: $,
+  resizer: C,
+  noSelect: A,
+  resizerBar: k,
+  resizing: X,
+  resizerHandle: K,
+  minimised: O,
+  content: U,
+  closeButton: F
+}, g = 30, v = Math.max(300, Math.floor(window.innerWidth * 0.25)), z = "sidePanelWidth";
+function Q({ children: y, open: n, onClose: p, onOpen: M, position: c = "right" }) {
+  const [m, i] = d(n ? v : 0), u = x(null), [a, j] = d(!1), [_, I] = d(!1), [D, S] = d(!n), W = x(
+    window.sessionStorage.getItem(z) ? Number(window.sessionStorage.getItem(z)) : v
+  ), o = Math.floor(window.innerWidth / 2);
+  w(() => {
+    if (n)
+      I(!0), S(!1);
+    else {
+      i(0);
+      const t = setTimeout(() => {
+        S(!0);
+      }, 300);
+      return () => clearTimeout(t);
+    }
+  }, [n]), w(() => {
+    if (_) {
+      i(W.current || v);
+      const t = setTimeout(() => {
+        I(!1);
+      }, 300);
+      return () => clearTimeout(t);
+    }
+  }, [_]), w(() => {
+    if (a) {
+      let t = function(f) {
+        if (a && u.current) {
+          const T = u.current.getBoundingClientRect(), b = c === "right" ? T.right - f.clientX : f.clientX - T.left, l = Math.max(Math.min(b, o), g);
+          l - b > 10 ? i(0) : (W.current = l, i(l), window.sessionStorage.setItem(z, l.toString())), f.preventDefault();
+        }
+      }, s = function() {
+        j(!1);
+      };
+      return window.addEventListener("pointermove", t, { passive: !1 }), window.addEventListener("pointerup", s), document.body.classList.add(e.noSelect), () => {
+        window.removeEventListener("pointermove", t), window.removeEventListener("pointerup", s), document.body.classList.remove(e.noSelect);
+      };
+    }
+  }, [a, c, o]);
+  const B = m === 0, R = /* @__PURE__ */ h(
+    "div",
+    {
+      className: `${e.resizer} ${a ? e.resizing : ""}`,
+      onPointerDown: () => {
+        j(!0), M && M();
+      },
+      children: [
+        /* @__PURE__ */ r("div", { className: e.resizerBar }),
+        n && /* @__PURE__ */ r(
+          "div",
+          {
+            className: `${e.resizerHandle} ${B ? e.minimised : ""}`,
+            role: "separator",
+            "aria-orientation": "vertical",
+            "aria-label": "Resize sidebar",
+            tabIndex: 0,
+            "aria-valuenow": m,
+            "aria-valuemin": g,
+            "aria-valuemax": o,
+            onKeyDown: (t) => {
+              t.key === "ArrowRight" ? i((s) => Math.min(o, Math.max(0, s - 50))) : t.key === "ArrowLeft" && i((s) => Math.max(g, Math.min(o, s + 50)));
+            }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ h(
+    "section",
+    {
+      className: `${e.sidePanel} ${n ? e.open : e.closed} ${_ ? e.opening : ""}`,
+      style: { width: B ? 0 : m, visibility: D ? "hidden" : void 0 },
+      ref: u,
+      "aria-hidden": !n,
+      children: [
+        c === "right" && R,
+        /* @__PURE__ */ h("div", { className: e.content, children: [
+          p && /* @__PURE__ */ r("div", { className: e.closeButton, children: /* @__PURE__ */ r(
+            H,
+            {
+              onClick: p,
+              "data-testid": "sidepanel-close-button",
+              children: /* @__PURE__ */ r(
+                E,
+                {
+                  fontSize: "medium",
+                  htmlColor: "#444"
+                }
+              )
+            }
+          ) }),
+          y
+        ] }),
+        c === "left" && R
+      ]
+    }
+  );
+}
+export {
+  Q as default
+};

package/dist/main.d.ts

@@ -18,6 +18,7 @@ export { default as BusyButton } from './components/BusyButton/BusyButton';
 export { default as AlertPara } from './components/AlertPara/AlertPara';
 export { default as QRCode } from './components/QRCode/QRCode';
 export { default as Webcam } from './components/Webcam/Webcam';
+export { default as SidePanel } from './components/SidePanel/SidePanel';
 export { default as ContentLoader } from './components/ContentLoader/ContentLoader';
 export { WorkflowLayout, type IConnection, Widget, SvgLayer, type ILine, generateLines, extractNodesFromElements, } from './components/WorkflowLayout';
 export { default as LangSelect } from './components/LangSelect/LangSelect';

package/dist/main.js

@@ -1,13 +1,13 @@
 import { default as o } from "./components/ConnectionStatus/ConnectionStatus.js";
 import { Button as t, LargeButton as f, VerticalButton as m } from "./components/Button/Button.js";
 import { default as p } from "./hooks/peer.js";
-import { default as l } from "./services/peer2peer/Peer2Peer.js";
+import { default as u } from "./services/peer2peer/Peer2Peer.js";
 import { useID as x } from "./hooks/id.js";
 import { useOnlyOnce as c } from "./hooks/onlyOnce.js";
 import { default as F } from "./hooks/random.js";
 import { theme as I } from "./style/theme.js";
-import { default as B } from "./util/randomId.js";
-import { canvasFromDataTransfer as P, canvasFromFile as S, canvasFromImage as y, canvasFromURL as T, canvasesFromFiles as b, cropTo as A, urlFromDataTransfer as C } from "./util/canvas.js";
+import { default as S } from "./util/randomId.js";
+import { canvasFromDataTransfer as B, canvasFromFile as L, canvasFromImage as y, canvasFromURL as T, canvasesFromFiles as b, cropTo as A, urlFromDataTransfer as C } from "./util/canvas.js";
 import { createZipBlob as M, loadZipFile as R, saveZipFile as W } from "./util/zip.js";
 import { useTabActive as O } from "./hooks/useTabActive.js";
 import { default as k } from "./components/Spinner/Spinner.js";
@@ -16,18 +16,19 @@ import { default as Q } from "./components/BusyButton/BusyButton.js";
 import { default as V } from "./components/AlertPara/AlertPara.js";
 import { default as q } from "./components/QRCode/QRCode.js";
 import { default as G } from "./components/Webcam/Webcam.js";
-import { default as J } from "./components/ContentLoader/ContentLoader.js";
-import { default as X } from "./components/WorkflowLayout/Layout.js";
-import { extractNodesFromElements as _, generateLines as $ } from "./components/WorkflowLayout/lines.js";
-import { Widget as re } from "./components/WorkflowLayout/Widget.js";
-import { S as ae } from "./SvgLayer-DHFiKVQ9.js";
-import { default as fe } from "./components/LangSelect/LangSelect.js";
-import { default as se } from "./components/IconMenu/Spacer.js";
-import { default as ue } from "./components/IconMenu/IconMenu.js";
-import { default as ne } from "./components/IconMenu/IconMenuInline.js";
-import { default as de } from "./components/IconMenu/Item.js";
-import { default as ie } from "./components/PercentageBar/PercentageBar.js";
-import { default as ve } from "./components/PieScore/PieScore.js";
+import { default as J } from "./components/SidePanel/SidePanel.js";
+import { default as X } from "./components/ContentLoader/ContentLoader.js";
+import { default as _ } from "./components/WorkflowLayout/Layout.js";
+import { extractNodesFromElements as ee, generateLines as re } from "./components/WorkflowLayout/lines.js";
+import { Widget as ae } from "./components/WorkflowLayout/Widget.js";
+import { S as fe } from "./SvgLayer-DHFiKVQ9.js";
+import { default as se } from "./components/LangSelect/LangSelect.js";
+import { default as le } from "./components/IconMenu/Spacer.js";
+import { default as ne } from "./components/IconMenu/IconMenu.js";
+import { default as de } from "./components/IconMenu/IconMenuInline.js";
+import { default as ie } from "./components/IconMenu/Item.js";
+import { default as ve } from "./components/PercentageBar/PercentageBar.js";
+import { default as Pe } from "./components/PieScore/PieScore.js";
 import { default as ge } from "./components/Application/Application.js";
 export {
   V as AlertPara,
@@ -35,35 +36,36 @@ export {
   Q as BusyButton,
   t as Button,
   o as ConnectionStatus,
-  J as ContentLoader,
-  ue as IconMenu,
-  ne as IconMenuInline,
-  de as IconMenuItem,
-  fe as LangSelect,
+  X as ContentLoader,
+  ne as IconMenu,
+  de as IconMenuInline,
+  ie as IconMenuItem,
+  se as LangSelect,
   f as LargeButton,
-  l as Peer2Peer,
-  ie as PercentageBar,
-  ve as PieScore,
+  u as Peer2Peer,
+  ve as PercentageBar,
+  Pe as PieScore,
   E as Privacy,
   q as QRCode,
-  se as Spacer,
+  J as SidePanel,
+  le as Spacer,
   k as Spinner,
-  ae as SvgLayer,
+  fe as SvgLayer,
   m as VerticalButton,
   G as Webcam,
-  re as Widget,
-  X as WorkflowLayout,
-  P as canvasFromDataTransfer,
-  S as canvasFromFile,
+  ae as Widget,
+  _ as WorkflowLayout,
+  B as canvasFromDataTransfer,
+  L as canvasFromFile,
   y as canvasFromImage,
   T as canvasFromURL,
   b as canvasesFromFiles,
   M as createZipBlob,
   A as cropTo,
-  _ as extractNodesFromElements,
-  $ as generateLines,
+  ee as extractNodesFromElements,
+  re as generateLines,
   R as loadZipFile,
-  B as randomId,
+  S as randomId,
   W as saveZipFile,
   I as theme,
   C as urlFromDataTransfer,

package/dist/services/peer2peer/PeerConnection.js

@@ -2,13 +2,13 @@ var u = Object.defineProperty;
 var f = (h, c, e) => c in h ? u(h, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[c] = e;
 var o = (h, c, e) => f(h, typeof c != "symbol" ? c + "" : c, e);
 import { E as m } from "../../index-SOhdqzHq.js";
-import { createAsym as w } from "../../util/crypto.js";
+import { createAsym as T } from "../../util/crypto.js";
 import { base64ToBytes as d, bytesToBase64 as l } from "../../util/base64.js";
 import y from "./error.js";
-const T = 1e4;
+const w = 1e4;
 class K extends m {
   /** Create a connection. If the dataConnection parameter is missing then it uses the websocket as a relay. */
-  constructor(e, s, r, t, a) {
+  constructor(e, s, r, t, p) {
     super();
     o(this, "dataConnection");
     o(this, "peerInstance");
@@ -27,8 +27,8 @@ class K extends m {
         clearTimeout(this.connectTimeout), this.connectTimeout = -1, t.peerConnection.getStats().then((i) => {
           i.forEach((n) => {
             if (n.type === "candidate-pair" && (n.state === "succeeded" || n.state === "in-progress")) {
-              const p = i.get(n.remoteCandidateId);
-              (p == null ? void 0 : p.candidateType) === "relay" ? this._connType = "relay" : p && (this._connType = "p2p");
+              const a = i.get(n.remoteCandidateId);
+              (a == null ? void 0 : a.candidateType) === "relay" ? this._connType = "relay" : a && (this._connType = "p2p");
             }
           }), this._connType === "server" && console.warn("Failed to find p2p candidate", Array.from(i)), this.emit("open", this);
         });
@@ -39,11 +39,11 @@ class K extends m {
       }), t.on("error", (i) => {
         this.emit("error", i, this);
       }), t.on("iceStateChanged", (i) => {
-        i === "disconnected" && t.open && t.close(), a && i === "checking" && (t.close(), this.emit("close", this, !1));
+        i === "disconnected" && t.open && t.close(), p && i === "checking" && (t.close(), this.emit("close", this, !1));
       });
     else {
-      this._connType = "server", w().then(({ createSymCrypto: n, publicKey: p }) => {
-        this.createCrypto = n, this.pubKey = p, this.sendCryptoHandshake(), this.emit("crypto");
+      this._connType = "server", T().then(({ createSymCrypto: n, publicKey: a }) => {
+        this.createCrypto = n, this.pubKey = a, this.sendCryptoHandshake(), this.emit("crypto");
       }).catch(() => {
         this.emit("error", { type: "no-crypto" }, this), this.close();
       });
@@ -56,7 +56,7 @@ class K extends m {
     }
     this.initiated && (this.connectTimeout = window.setTimeout(() => {
       this.connectTimeout = -1, this.open ? console.warn("Timeout, but already open") : (console.warn("Connect timeout", this), this.close(), this.emit("timeout", this));
-    }, T));
+    }, w));
   }
   get connectionType() {
     return this._connType;
@@ -113,8 +113,8 @@ class K extends m {
       if (!s || !s.data || !s.iv) throw new y("Invalid encrypted packet");
       const r = await d(s.data), t = await d(s.iv);
       try {
-        const a = await this.decrypt(new Uint8Array(r), new Uint8Array(t));
-        this.emit("data", JSON.parse(a), this);
+        const p = await this.decrypt(r, t);
+        this.emit("data", JSON.parse(p), this);
       } catch {
         console.error("Decryption error");
       }
@@ -125,7 +125,7 @@ class K extends m {
   }
   async sendEncrypted(e) {
     if (this.encrypt) {
-      const s = await this.encrypt(JSON.stringify(e)), r = await l(s[0]), t = await l(s[1]), a = JSON.stringify({
+      const s = await this.encrypt(JSON.stringify(e)), r = await l(s[0]), t = await l(s[1]), p = JSON.stringify({
         data: r,
         iv: t
       });
@@ -133,7 +133,7 @@ class K extends m {
         type: "DATA",
         src: this.peerInstance.id,
         dst: this.peer,
-        payload: a
+        payload: p
       });
     } else
       throw new y("Failed to send, no key");

package/dist/util/crypto.d.ts

@@ -1,7 +1,7 @@
 export declare function createAsym(): Promise<{
     createSymCrypto: (rkey: string) => Promise<{
-        encrypt: (data: string) => Promise<[ArrayBuffer, Uint8Array]>;
-        decrypt: (data: ArrayBuffer, iv: Uint8Array) => Promise<string>;
+        encrypt: (data: string) => Promise<[ArrayBuffer, ArrayBuffer]>;
+        decrypt: (data: ArrayBuffer, iv: ArrayBuffer) => Promise<string>;
     }>;
     publicKey: string;
 }>;

package/dist/util/crypto.js

@@ -4,7 +4,7 @@ function y(e) {
 function o(e) {
   return new TextEncoder().encode(e);
 }
-async function s() {
+async function u() {
   const e = await crypto.subtle.generateKey(
     {
       name: "ECDH",
@@ -36,7 +36,7 @@ async function s() {
       );
       return {
         encrypt: async (c) => {
-          const t = crypto.getRandomValues(new Uint8Array(12));
+          const t = crypto.getRandomValues(new Uint8Array(12)).buffer;
           return [await crypto.subtle.encrypt({ name: "AES-GCM", iv: t }, a, o(c)), t];
         },
         decrypt: async (c, t) => y(await crypto.subtle.decrypt({ name: "AES-GCM", iv: t }, a, c))
@@ -46,5 +46,5 @@ async function s() {
   };
 }
 export {
-  s as createAsym
+  u as createAsym
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genai-fi/base",
-    "version": "4.1.3",
+    "version": "4.2.0",
     "license": "MIT",
     "type": "module",
     "main": "dist/main.js",
@@ -50,7 +50,10 @@
     "devDependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@ladle/react": "^5.0.3",
+        "@eslint/compat": "^2.0.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "^9.39.1",
+        "@ladle/react": "^5.1.1",
         "@mui/icons-material": "^7.3.1",
         "@mui/material": "^7.3.1",
         "@mui/x-charts": "^8.5.2",
@@ -62,15 +65,16 @@
         "@types/qrcode": "^1.5.5",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
-        "@typescript-eslint/eslint-plugin": "^7.13.1",
-        "@typescript-eslint/parser": "^7.13.1",
+        "@typescript-eslint/eslint-plugin": "^8.48.0",
+        "@typescript-eslint/parser": "^8.48.0",
         "@vitejs/plugin-react-swc": "^3.5.0",
         "@vitest/coverage-v8": "^3.0.4",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react": "^7.34.3",
-        "eslint-plugin-react-hooks": "^4.6.2",
-        "eslint-plugin-react-refresh": "^0.4.7",
+        "eslint": "^9.39.1",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.4.24",
         "glob": "^11.0.0",
+        "globals": "^16.5.0",
         "jsdom": "^26.1.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",