@genai-fi/base 4.0.4 → 4.1.0

package/dist/SvgLayer-BWQvvvqo.js

@@ -0,0 +1,50 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import './assets/SvgLayer.css';const e = "_svglayer_qfgw7_3", x = "_workspace_qfgw7_10", w = "_container_qfgw7_19", _ = "_annotation_qfgw7_48", h = {
+  svglayer: e,
+  workspace: x,
+  container: w,
+  annotation: _
+}, d = 0.4, s = 40;
+function $({ lines: y }) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      className: h.svglayer,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "100%",
+      height: "100%",
+      "aria-hidden": !0,
+      children: y.map((t, r) => {
+        const n = t.direction === "horizontal" ? Math.abs(t.x1 - t.x2) * d : 0, c = t.direction === "vertical" ? Math.abs(t.y1 - t.y2) * d : 0, a = Math.max(Math.abs(t.x1 - t.x2), Math.abs(t.y1 - t.y2));
+        return /* @__PURE__ */ g("g", { children: [
+          /* @__PURE__ */ o(
+            "path",
+            {
+              "data-testid": `line-${t.id1}-${t.id2}`,
+              d: `M ${t.x1} ${t.y1} C ${t.x1 + n} ${t.y1 + c}, ${t.x2 - n} ${t.y2 - c}, ${t.x2} ${t.y2}`,
+              fill: "none",
+              stroke: "rgb(174, 37, 174)",
+              strokeWidth: "2",
+              strokeDasharray: void 0
+            },
+            r
+          ),
+          t.annotationElement && /* @__PURE__ */ o(
+            "foreignObject",
+            {
+              x: (t.x1 + t.x2) / 2 - (a - s) / 2,
+              y: (t.y1 + t.y2) / 2 - (a - s) / 2,
+              width: a - s,
+              height: a - s,
+              children: /* @__PURE__ */ o("div", { className: h.annotation, children: t.annotationElement })
+            }
+          )
+        ] }, `annotation-${r}`);
+      })
+    }
+  );
+}
+export {
+  $ as S,
+  h as s
+};

package/dist/assets/SvgLayer.css

@@ -1 +1 @@
-._svglayer_yu6sc_3{position:absolute;left:0;top:0;pointer-events:none}._workspace_yu6sc_10{overflow:auto;max-width:100%;max-height:100%;height:100%;width:100%;position:relative}._container_yu6sc_19{overflow:auto;min-height:100%;background:#dfe5e8;display:grid;gap:3rem;padding:2rem;box-sizing:border-box;grid-template-columns:repeat(6,max-content);min-width:100%;width:max-content;justify-content:center;position:relative;align-items:center}@media only screen and (max-height: 500px),(max-width: 700px){._svglayer_yu6sc_3{display:none}._container_yu6sc_19{display:flex;flex-direction:column;padding:1rem 0;width:100%}}
+._svglayer_qfgw7_3{position:absolute;left:0;top:0;pointer-events:none}._workspace_qfgw7_10{overflow:auto;max-width:100%;max-height:100%;height:100%;width:100%;position:relative}._container_qfgw7_19{overflow:auto;min-height:100%;background:#dfe5e8;display:grid;gap:3rem;padding:2rem;box-sizing:border-box;grid-template-columns:repeat(6,max-content);min-width:100%;width:max-content;justify-content:center;position:relative;align-items:center}@media only screen and (max-height: 500px),(max-width: 700px){._svglayer_qfgw7_3{display:none}._container_qfgw7_19{display:flex;flex-direction:column;padding:1rem 0;width:100%}}._annotation_qfgw7_48{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center}

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,9 @@
 export declare const Button: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
 }, "disabled" | "className" | "style" | "classes" | "children" | "color" | "sx" | "tabIndex" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
+export declare const VerticalButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "className" | "style" | "classes" | "children" | "color" | "sx" | "tabIndex" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
 export declare const LargeButton: import('@emotion/styled').StyledComponent<import('@mui/material').ButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLButtonElement> | null | undefined;
 }, "disabled" | "className" | "style" | "classes" | "children" | "color" | "sx" | "tabIndex" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon" | "variant"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/dist/components/Button/Button.js

@@ -3,6 +3,13 @@ import { B as o } from "../../Button-BeUmwrlS.js";
 const e = t(o)({
   textTransform: "none"
 }), s = t(o)({
+  flexDirection: "column",
+  padding: "5px 8px",
+  "& .MuiButton-startIcon": {
+    margin: "0"
+  },
+  textTransform: "none"
+}), a = t(o)({
   textTransform: "none",
   fontWeight: "bold",
   fontSize: "1.2rem",
@@ -10,5 +17,6 @@ const e = t(o)({
 });
 export {
   e as Button,
-  s as LargeButton
+  a as LargeButton,
+  s as VerticalButton
 };

package/dist/components/WorkflowLayout/Layout.js

@@ -1,7 +1,7 @@
 import { jsx as a, jsxs as d } from "react/jsx-runtime";
 import { useState as p, useRef as l, useEffect as v } from "react";
 import { extractNodesFromElements as y, generateLines as g } from "./lines.js";
-import { s as u, S as h } from "../../SvgLayer-DQQ6Pb5G.js";
+import { s as u, S as h } from "../../SvgLayer-BWQvvvqo.js";
 function k({ children: n, connections: i }) {
   const [f, m] = p([]), r = l(null), t = l();
   return v(() => {

package/dist/components/WorkflowLayout/SvgLayer.d.ts

@@ -6,6 +6,7 @@ export interface ILine {
     direction: 'horizontal' | 'vertical';
     id1: string;
     id2: string;
+    annotationElement?: React.ReactNode;
 }
 interface Props {
     lines: ILine[];

package/dist/components/WorkflowLayout/SvgLayer.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { S as a } from "../../SvgLayer-DQQ6Pb5G.js";
+import { S as a } from "../../SvgLayer-BWQvvvqo.js";
 export {
   a as default
 };

package/dist/components/WorkflowLayout/index.js

@@ -1,7 +1,7 @@
 import { default as r } from "./Layout.js";
 import { extractNodesFromElements as a, generateLines as f } from "./lines.js";
 import { Widget as s } from "./Widget.js";
-import { S as p } from "../../SvgLayer-DQQ6Pb5G.js";
+import { S as p } from "../../SvgLayer-BWQvvvqo.js";
 export {
   p as SvgLayer,
   s as Widget,

package/dist/components/WorkflowLayout/lines.d.ts

@@ -11,7 +11,10 @@ export type ConnectionPoint = 'left' | 'right' | 'top' | 'bottom';
 export interface IConnection {
     start: string;
     startPoint: ConnectionPoint;
+    startOffset?: number;
     end: string;
     endPoint: ConnectionPoint;
+    endOffset?: number;
+    annotationElement?: React.ReactNode;
 }
 export declare function generateLines(data: Map<string, INode[]>, connections: IConnection[]): ILine[];

package/dist/components/WorkflowLayout/lines.js

@@ -1,39 +1,40 @@
-var d, f;
-const g = ((f = (d = globalThis == null ? void 0 : globalThis.process) == null ? void 0 : d.env) == null ? void 0 : f.NODE_ENV) === "test";
-function a(s, h) {
-  var o;
-  const n = h || /* @__PURE__ */ new Map();
-  for (let r = 0; r < s.children.length; ++r) {
-    const i = s.children[r], t = i.getAttribute("data-widget");
-    if (t === "container")
-      a(i, n);
-    else if (t) {
-      n.has(t) || n.set(t, []);
-      const e = i.offsetWidth, c = i.offsetHeight;
-      (g || e > 0 && c > 0) && ((o = n.get(t)) == null || o.push({ x: i.offsetLeft, y: i.offsetTop, width: e, height: c, id: i.id || "noid" }));
+var d, c;
+const a = ((c = (d = globalThis == null ? void 0 : globalThis.process) == null ? void 0 : d.env) == null ? void 0 : c.NODE_ENV) === "test";
+function g(s, f) {
+  var t;
+  const i = f || /* @__PURE__ */ new Map();
+  for (let h = 0; h < s.children.length; ++h) {
+    const n = s.children[h], e = n.getAttribute("data-widget");
+    if (e === "container")
+      g(n, i);
+    else if (e) {
+      i.has(e) || i.set(e, []);
+      const o = n.offsetWidth, r = n.offsetHeight;
+      (a || o > 0 && r > 0) && ((t = i.get(e)) == null || t.push({ x: n.offsetLeft, y: n.offsetTop, width: o, height: r, id: n.id || "noid" }));
     }
   }
-  return n;
+  return i;
 }
-function l(s, h) {
-  const n = [];
-  for (const o of h) {
-    const r = s.get(o.start) || [], i = s.get(o.end) || [];
-    for (const t of r)
-      for (const e of i)
-        n.push({
-          id1: t.id,
-          id2: e.id,
-          x1: o.startPoint === "left" ? t.x : o.startPoint === "right" ? t.x + t.width : t.x + t.width / 2,
-          x2: o.endPoint === "left" ? e.x : o.endPoint === "right" ? e.x + e.width : e.x + e.width / 2,
-          y1: o.startPoint === "top" ? t.y : o.startPoint === "bottom" ? t.y + t.height : t.y + t.height / 2,
-          y2: o.endPoint === "top" ? e.y : o.endPoint === "bottom" ? e.y + e.height : e.y + e.height / 2,
-          direction: o.startPoint === "top" || o.startPoint === "bottom" ? "vertical" : "horizontal"
+function l(s, f) {
+  const i = [];
+  for (const t of f) {
+    const h = s.get(t.start) || [], n = s.get(t.end) || [];
+    for (const e of h)
+      for (const o of n)
+        i.push({
+          id1: e.id,
+          id2: o.id,
+          annotationElement: t.annotationElement,
+          x1: t.startPoint === "left" ? e.x : t.startPoint === "right" ? e.x + e.width : e.x + e.width / 2 + (t.startOffset || 0) * (e.width / 2),
+          x2: t.endPoint === "left" ? o.x : t.endPoint === "right" ? o.x + o.width : o.x + o.width / 2 + (t.endOffset || 0) * (o.width / 2),
+          y1: t.startPoint === "top" ? e.y : t.startPoint === "bottom" ? e.y + e.height : e.y + e.height / 2 + (t.startOffset || 0) * (e.height / 2),
+          y2: t.endPoint === "top" ? o.y : t.endPoint === "bottom" ? o.y + o.height : o.y + o.height / 2 + (t.endOffset || 0) * (o.height / 2),
+          direction: t.startPoint === "top" || t.startPoint === "bottom" ? "vertical" : "horizontal"
         });
   }
-  return n;
+  return i;
 }
 export {
-  a as extractNodesFromElements,
+  g as extractNodesFromElements,
   l as generateLines
 };

package/dist/main.d.ts

@@ -1,5 +1,5 @@
 export { default as ConnectionStatus } from './components/ConnectionStatus/ConnectionStatus';
-export { Button, LargeButton } from './components/Button/Button';
+export { Button, LargeButton, VerticalButton } from './components/Button/Button';
 export { default as usePeer } from './hooks/peer';
 export type { SenderType, PeerEvent, PeerErrorType, PeerStatus, BuiltinEvent, Connection, PeerConnectionType, } from './services/peer2peer/types';
 export { default as Peer2Peer } from './services/peer2peer/Peer2Peer';

package/dist/main.js

@@ -1,74 +1,75 @@
 import { default as o } from "./components/ConnectionStatus/ConnectionStatus.js";
-import { Button as t, LargeButton as f } from "./components/Button/Button.js";
-import { default as s } from "./hooks/peer.js";
-import { default as u } from "./services/peer2peer/Peer2Peer.js";
-import { useID as n } from "./hooks/id.js";
-import { useOnlyOnce as d } from "./hooks/onlyOnce.js";
-import { default as i } from "./hooks/random.js";
-import { theme as v } from "./style/theme.js";
-import { default as g } from "./util/randomId.js";
-import { canvasFromDataTransfer as P, canvasFromFile as S, canvasFromImage as B, canvasFromURL as y, canvasesFromFiles as T, cropTo as b, urlFromDataTransfer as A } from "./util/canvas.js";
-import { createZipBlob as D, loadZipFile as M, saveZipFile as R } from "./util/zip.js";
-import { useTabActive as Z } from "./hooks/useTabActive.js";
-import { default as h } from "./components/Spinner/Spinner.js";
-import { default as w } from "./components/Privacy/Privacy.js";
-import { default as N } from "./components/BusyButton/BusyButton.js";
-import { default as U } from "./components/AlertPara/AlertPara.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 { 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 { 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";
+import { default as E } from "./components/Privacy/Privacy.js";
+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 V } from "./components/WorkflowLayout/Layout.js";
-import { extractNodesFromElements as Y, generateLines as _ } from "./components/WorkflowLayout/lines.js";
-import { Widget as ee } from "./components/WorkflowLayout/Widget.js";
-import { S as oe } from "./SvgLayer-DQQ6Pb5G.js";
-import { default as te } from "./components/LangSelect/LangSelect.js";
-import { default as me } from "./components/IconMenu/Spacer.js";
-import { default as pe } from "./components/IconMenu/IconMenu.js";
-import { default as le } from "./components/IconMenu/IconMenuInline.js";
-import { default as xe } from "./components/IconMenu/Item.js";
-import { default as ce } from "./components/PercentageBar/PercentageBar.js";
-import { default as Fe } from "./components/PieScore/PieScore.js";
-import { default as Ie } from "./components/Application/Application.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-BWQvvvqo.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 ge } from "./components/Application/Application.js";
 export {
-  U as AlertPara,
-  Ie as Application,
-  N as BusyButton,
+  V as AlertPara,
+  ge as Application,
+  Q as BusyButton,
   t as Button,
   o as ConnectionStatus,
   J as ContentLoader,
-  pe as IconMenu,
-  le as IconMenuInline,
-  xe as IconMenuItem,
-  te as LangSelect,
+  ue as IconMenu,
+  ne as IconMenuInline,
+  de as IconMenuItem,
+  fe as LangSelect,
   f as LargeButton,
-  u as Peer2Peer,
-  ce as PercentageBar,
-  Fe as PieScore,
-  w as Privacy,
+  l as Peer2Peer,
+  ie as PercentageBar,
+  ve as PieScore,
+  E as Privacy,
   q as QRCode,
-  me as Spacer,
-  h as Spinner,
-  oe as SvgLayer,
+  se as Spacer,
+  k as Spinner,
+  ae as SvgLayer,
+  m as VerticalButton,
   G as Webcam,
-  ee as Widget,
-  V as WorkflowLayout,
+  re as Widget,
+  X as WorkflowLayout,
   P as canvasFromDataTransfer,
   S as canvasFromFile,
-  B as canvasFromImage,
-  y as canvasFromURL,
-  T as canvasesFromFiles,
-  D as createZipBlob,
-  b as cropTo,
-  Y as extractNodesFromElements,
-  _ as generateLines,
-  M as loadZipFile,
-  g as randomId,
-  R as saveZipFile,
-  v as theme,
-  A as urlFromDataTransfer,
-  n as useID,
-  d as useOnlyOnce,
-  s as usePeer,
-  i as useRandom,
-  Z as useTabActive
+  y as canvasFromImage,
+  T as canvasFromURL,
+  b as canvasesFromFiles,
+  M as createZipBlob,
+  A as cropTo,
+  _ as extractNodesFromElements,
+  $ as generateLines,
+  R as loadZipFile,
+  B as randomId,
+  W as saveZipFile,
+  I as theme,
+  C as urlFromDataTransfer,
+  x as useID,
+  c as useOnlyOnce,
+  p as usePeer,
+  F as useRandom,
+  O as useTabActive
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genai-fi/base",
-    "version": "4.0.4",
+    "version": "4.1.0",
     "license": "MIT",
     "type": "module",
     "main": "dist/main.js",

package/dist/SvgLayer-DQQ6Pb5G.js

@@ -1,37 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import './assets/SvgLayer.css';const d = "_svglayer_yu6sc_3", n = "_workspace_yu6sc_10", y = "_container_yu6sc_19", i = {
-  svglayer: d,
-  workspace: n,
-  container: y
-}, a = 20;
-function h({ lines: c }) {
-  return /* @__PURE__ */ o(
-    "svg",
-    {
-      className: i.svglayer,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "100%",
-      height: "100%",
-      "aria-hidden": !0,
-      children: c.map((t, e) => {
-        const r = t.direction === "horizontal" ? a : 0, s = t.direction === "vertical" ? a : 0;
-        return /* @__PURE__ */ o(
-          "path",
-          {
-            "data-testid": `line-${t.id1}-${t.id2}`,
-            d: `M ${t.x1} ${t.y1} C ${t.x1 + r} ${t.y1 + s}, ${t.x2 - r} ${t.y2 - s}, ${t.x2} ${t.y2}`,
-            fill: "none",
-            stroke: "rgb(174, 37, 174)",
-            strokeWidth: "2",
-            strokeDasharray: void 0
-          },
-          e
-        );
-      })
-    }
-  );
-}
-export {
-  h as S,
-  i as s
-};