@genai-fi/base 4.1.4 → 4.2.1

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_fhsa8_1{background:#fff;display:flex;z-index:2;flex-shrink:0;position:relative;transition:opacity .3s ease-in;opacity:0}._sidePanelHorizontal_fhsa8_14{flex-direction:column;width:100%}._sidePanel_fhsa8_1._closed_fhsa8_19{opacity:0;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-out}._sidePanel_fhsa8_1._opening_fhsa8_24{opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),opacity .3s ease-in}._sidePanel_fhsa8_1._open_fhsa8_24{opacity:1}._resizer_fhsa8_33{background-color:transparent;box-sizing:border-box;position:absolute;opacity:1;touch-action:none;-webkit-user-select:none;user-select:none;z-index:2}._resizerHorizontal_fhsa8_44{height:30px;width:100%;cursor:ns-resize;left:0;top:-8px;right:0}._resizerVertical_fhsa8_53{width:30px;cursor:ew-resize;left:-8px;top:0;bottom:0}._noSelect_fhsa8_61{-webkit-user-select:none;user-select:none}._resizerBar_fhsa8_65{position:absolute;top:0;left:7px;width:2px;height:100%;background-color:#ddd;touch-action:none;-webkit-user-select:none;user-select:none}._resizerHorizontal_fhsa8_44 ._resizerBar_fhsa8_65{top:7px;left:0;width:100%;height:2px}._resizer_fhsa8_33:hover ._resizerBar_fhsa8_65{background-color:#75a4e288}._resizer_fhsa8_33._resizing_fhsa8_87 ._resizerBar_fhsa8_65{background-color:#75a4e2}._resizerHandle_fhsa8_91{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}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91{top:2px;left:50%;width:60px;height:10px;transform:translate(-50%)}._resizerHandle_fhsa8_91._minimised_fhsa8_117{left:-15px;width:20px}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91._minimised_fhsa8_117{top:-15px;height:20px;left:50%;width:60px;transform:translate(-50%)}._resizerHandle_fhsa8_91:focus{outline:2px solid #75a4e2;outline-offset:2px}._resizerVertical_fhsa8_53 ._resizerHandle_fhsa8_91: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}._resizerHorizontal_fhsa8_44 ._resizerHandle_fhsa8_91:before{content:"";display:block;width:20px;height:4px;background:radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 2px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 8px 0,radial-gradient(circle,#bbb 1.5px,transparent 1.5px) 14px 0;background-repeat:no-repeat;background-size:4px 4px}._resizer_fhsa8_33:hover ._resizerHandle_fhsa8_91,._resizer_fhsa8_33._resizing_fhsa8_87 ._resizerHandle_fhsa8_91{border-color:#75a4e2}._expand_fhsa8_167{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_fhsa8_183{flex-grow:1;overflow:auto;min-width:300px!important;position:relative}._closeButton_fhsa8_190{position:absolute;top:.5rem;right:.5rem}

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?: 'right' | 'bottom';
+}
+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,122 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { useState as m, useRef as B, useEffect as w } from "react";
+import { C as A } from "../../Close-BGAFHd7i.js";
+import { IconButton as D } from "@mui/material";
+import '../../assets/SidePanel.css';const L = "_sidePanel_fhsa8_1", T = "_sidePanelHorizontal_fhsa8_14", C = "_closed_fhsa8_19", k = "_opening_fhsa8_24", V = "_open_fhsa8_24", W = "_resizer_fhsa8_33", Z = "_resizerHorizontal_fhsa8_44", U = "_resizerVertical_fhsa8_53", X = "_noSelect_fhsa8_61", j = "_resizerBar_fhsa8_65", K = "_resizing_fhsa8_87", O = "_resizerHandle_fhsa8_91", Y = "_minimised_fhsa8_117", F = "_content_fhsa8_183", G = "_closeButton_fhsa8_190", e = {
+  sidePanel: L,
+  sidePanelHorizontal: T,
+  closed: C,
+  opening: k,
+  open: V,
+  resizer: W,
+  resizerHorizontal: Z,
+  resizerVertical: U,
+  noSelect: X,
+  resizerBar: j,
+  resizing: K,
+  resizerHandle: O,
+  minimised: Y,
+  content: F,
+  closeButton: G
+}, h = 30, N = 300, v = Math.max(N, Math.floor(window.innerWidth * 0.25)), M = "sidePanelWidth";
+function ie({ children: R, open: r, onClose: S, onOpen: I, position: t = "right" }) {
+  const [l, s] = m(r ? v : 0), _ = B(null), [c, E] = m(!1), [f, H] = m(!1), [p, P] = m(!r), b = B(
+    window.sessionStorage.getItem(M) ? Number(window.sessionStorage.getItem(M)) : v
+  ), o = Math.max(
+    N,
+    Math.floor(t === "right" ? window.innerWidth / 2 : window.innerHeight / 2)
+  );
+  w(() => {
+    if (r)
+      H(!0), P(!1);
+    else {
+      s(0);
+      const i = setTimeout(() => {
+        P(!0);
+      }, 300);
+      return () => clearTimeout(i);
+    }
+  }, [r]), w(() => {
+    if (f) {
+      s(b.current || v);
+      const i = setTimeout(() => {
+        H(!1);
+      }, 300);
+      return () => clearTimeout(i);
+    }
+  }, [f]), w(() => {
+    if (c) {
+      let i = function(u) {
+        if (c && _.current) {
+          const x = _.current.getBoundingClientRect(), y = t === "right" ? x.right - u.clientX : x.bottom - u.clientY, d = Math.max(Math.min(y, o), h);
+          d - y > 10 ? s(0) : (b.current = d, s(d), window.sessionStorage.setItem(M, d.toString())), u.preventDefault();
+        }
+      }, n = function() {
+        E(!1);
+      };
+      return window.addEventListener("pointermove", i, { passive: !1 }), window.addEventListener("pointerup", n), document.body.classList.add(e.noSelect), () => {
+        window.removeEventListener("pointermove", i), window.removeEventListener("pointerup", n), document.body.classList.remove(e.noSelect);
+      };
+    }
+  }, [c, t, o]);
+  const z = l === 0, $ = /* @__PURE__ */ g(
+    "div",
+    {
+      className: `${e.resizer} ${c ? e.resizing : ""} ${t === "right" ? e.resizerVertical : e.resizerHorizontal}`,
+      onPointerDown: () => {
+        E(!0), I && I();
+      },
+      children: [
+        /* @__PURE__ */ a("div", { className: e.resizerBar }),
+        r && /* @__PURE__ */ a(
+          "div",
+          {
+            className: `${e.resizerHandle} ${z ? e.minimised : ""}`,
+            role: "separator",
+            "aria-orientation": t === "right" ? "vertical" : "horizontal",
+            "aria-label": "Resize sidebar",
+            tabIndex: 0,
+            "aria-valuenow": l,
+            "aria-valuemin": h,
+            "aria-valuemax": o,
+            onKeyDown: (i) => {
+              t === "right" ? i.key === "ArrowRight" ? s((n) => Math.min(o, Math.max(0, n - 50))) : i.key === "ArrowLeft" && s((n) => Math.max(h, Math.min(o, n + 50))) : i.key === "ArrowDown" ? s((n) => Math.min(o, Math.max(0, n - 50))) : i.key === "ArrowUp" && s((n) => Math.max(h, Math.min(o, n + 50)));
+            }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ g(
+    "section",
+    {
+      className: `${e.sidePanel} ${r ? e.open : e.closed} ${f ? e.opening : ""} ${t === "right" ? e.sidePanelVertical : e.sidePanelHorizontal}`,
+      style: t === "right" ? { width: z ? 0 : l, visibility: p ? "hidden" : void 0 } : { height: z ? 0 : l, visibility: p ? "hidden" : void 0 },
+      ref: _,
+      "aria-hidden": !r,
+      children: [
+        (t === "right" || t === "bottom") && $,
+        /* @__PURE__ */ g("div", { className: e.content, children: [
+          S && /* @__PURE__ */ a("div", { className: e.closeButton, children: /* @__PURE__ */ a(
+            D,
+            {
+              onClick: S,
+              "data-testid": "sidepanel-close-button",
+              children: /* @__PURE__ */ a(
+                A,
+                {
+                  fontSize: "medium",
+                  htmlColor: "#444"
+                }
+              )
+            }
+          ) }),
+          R
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ie 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.4",
+    "version": "4.2.1",
     "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",