@digilogiclabs/saas-factory-ui 1.29.1 → 1.29.2

package/dist/index.js

@@ -36444,6 +36444,19 @@ var DEFAULT_LAYOUT = {
   detailMaxW: 320
 };
 var STYLE_ID4 = "dll-flow-tree-styles";
+function FlowTreeStyles() {
+  const reactHostingProps = {
+    href: STYLE_ID4,
+    precedence: "default"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+    "style",
+    {
+      ...reactHostingProps,
+      dangerouslySetInnerHTML: { __html: FLOW_TREE_CSS }
+    }
+  );
+}
 function ensureStylesInjected4() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLE_ID4)) return;
@@ -37035,162 +37048,165 @@ function FlowTree({
     placed.push({ x: ox, y: oy, w: detailW, h: detailH });
     return { n, ox, oy, detailW, detailH };
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: `ft-shell ${className}`, style, children: [
-    showHeader ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("header", { className: "ft-header", children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-header__eyebrow", children: eyebrow }) : null,
-      title ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("h2", { className: "ft-header__title", children: title }) : null,
-      tagline ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "ft-header__tagline", children: tagline }) : null
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-stage", ref: containerRef, children: [
-      !hideControls ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-controls", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              userInteractedRef.current = true;
-              setZoom((z) => Math.min(2, z + 0.1));
-            },
-            "aria-label": "Zoom in",
-            children: "+"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              userInteractedRef.current = true;
-              setZoom((z) => Math.max(0.35, z - 0.1));
-            },
-            "aria-label": "Zoom out",
-            children: "\u2212"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-          "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(FlowTreeStyles, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: `ft-shell ${className}`, style, children: [
+      showHeader ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("header", { className: "ft-header", children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-header__eyebrow", children: eyebrow }) : null,
+        title ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("h2", { className: "ft-header__title", children: title }) : null,
+        tagline ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("p", { className: "ft-header__tagline", children: tagline }) : null
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-stage", ref: containerRef, children: [
+        !hideControls ? /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: "ft-controls", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                userInteractedRef.current = true;
+                setZoom((z) => Math.min(2, z + 0.1));
+              },
+              "aria-label": "Zoom in",
+              children: "+"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                userInteractedRef.current = true;
+                setZoom((z) => Math.max(0.35, z - 0.1));
+              },
+              "aria-label": "Zoom out",
+              children: "\u2212"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "ft-controls__reset",
+              onClick: resetView,
+              children: "Fit"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-controls__hint", children: "drag to pan \xB7 \u2318/ctrl + scroll to zoom" })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+          "svg",
           {
-            type: "button",
-            className: "ft-controls__reset",
-            onClick: resetView,
-            children: "Fit"
+            className: "ft-svg",
+            width: "100%",
+            height: "100%",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            onWheel,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                "pattern",
+                {
+                  id: "ft-dots",
+                  width: "18",
+                  height: "18",
+                  patternUnits: "userSpaceOnUse",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("circle", { cx: "1", cy: "1", r: "0.7", fill: "var(--ft-grid-strong)" })
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                "rect",
+                {
+                  x: "0",
+                  y: "0",
+                  width: "100%",
+                  height: "100%",
+                  fill: "url(#ft-dots)",
+                  opacity: "0.45"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+                "g",
+                {
+                  transform: `translate(${pan.x}, ${pan.y}) scale(${zoom})`,
+                  style: {
+                    transition: dragRef.current ? "none" : "transform 380ms cubic-bezier(.2,.8,.2,1)"
+                  },
+                  children: [
+                    edgePaths.map(
+                      (e) => !e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--off" }, e.id) : null
+                    ),
+                    edgePaths.map(
+                      (e) => e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--on" }, e.id) : null
+                    ),
+                    nodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                      FlowCard,
+                      {
+                        n,
+                        colors,
+                        renderIcon,
+                        resolveHref,
+                        opts,
+                        onActivate: activate,
+                        onToggleDetail: toggleDetail,
+                        onOpen: onNodeOpen
+                      },
+                      n.pathId
+                    )),
+                    detailItems.map(({ n, ox, oy, detailW, detailH }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                      "g",
+                      {
+                        transform: `translate(${ox}, ${oy})`,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                          "foreignObject",
+                          {
+                            x: 0,
+                            y: 0,
+                            width: detailW + 8,
+                            height: detailH + 40,
+                            style: { overflow: "visible" },
+                            children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                              DetailPop,
+                              {
+                                node: n.data,
+                                resolveHref,
+                                onClose: () => closeDetail(n.data.id)
+                              }
+                            )
+                          }
+                        )
+                      },
+                      `detail-${n.pathId}`
+                    ))
+                  ]
+                }
+              )
+            ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-controls__hint", children: "drag to pan \xB7 \u2318/ctrl + scroll to zoom" })
-      ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-        "svg",
-        {
-          className: "ft-svg",
-          width: "100%",
-          height: "100%",
-          onPointerDown,
-          onPointerMove,
-          onPointerUp,
-          onPointerCancel: onPointerUp,
-          onWheel,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-              "pattern",
-              {
-                id: "ft-dots",
-                width: "18",
-                height: "18",
-                patternUnits: "userSpaceOnUse",
-                children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("circle", { cx: "1", cy: "1", r: "0.7", fill: "var(--ft-grid-strong)" })
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-              "rect",
-              {
-                x: "0",
-                y: "0",
-                width: "100%",
-                height: "100%",
-                fill: "url(#ft-dots)",
-                opacity: "0.45"
-              }
-            ),
+        !hideLegend ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-legend ft-mono", children: focusedPath.map((id, i) => {
+          const n = nodeById[id];
+          const isLast = i === focusedPath.length - 1;
+          return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(React87.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-              "g",
+              "button",
               {
-                transform: `translate(${pan.x}, ${pan.y}) scale(${zoom})`,
-                style: {
-                  transition: dragRef.current ? "none" : "transform 380ms cubic-bezier(.2,.8,.2,1)"
-                },
+                type: "button",
+                className: "ft-legend__chip",
+                onClick: () => focusPathPrefix(i + 1),
+                disabled: isLast,
+                title: isLast ? "Current focus" : `Jump back to ${n ? n.data.label : id}`,
                 children: [
-                  edgePaths.map(
-                    (e) => !e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--off" }, e.id) : null
-                  ),
-                  edgePaths.map(
-                    (e) => e.onPath ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { d: e.d, className: "ft-edge ft-edge--on" }, e.id) : null
-                  ),
-                  nodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                    FlowCard,
-                    {
-                      n,
-                      colors,
-                      renderIcon,
-                      resolveHref,
-                      opts,
-                      onActivate: activate,
-                      onToggleDetail: toggleDetail,
-                      onOpen: onNodeOpen
-                    },
-                    n.pathId
-                  )),
-                  detailItems.map(({ n, ox, oy, detailW, detailH }) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                    "g",
-                    {
-                      transform: `translate(${ox}, ${oy})`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                        "foreignObject",
-                        {
-                          x: 0,
-                          y: 0,
-                          width: detailW + 8,
-                          height: detailH + 40,
-                          style: { overflow: "visible" },
-                          children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
-                            DetailPop,
-                            {
-                              node: n.data,
-                              resolveHref,
-                              onClose: () => closeDetail(n.data.id)
-                            }
-                          )
-                        }
-                      )
-                    },
-                    `detail-${n.pathId}`
-                  ))
+                  /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__dot" }),
+                  n ? n.data.label : id
                 ]
               }
-            )
-          ]
-        }
-      ),
-      !hideLegend ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: "ft-legend ft-mono", children: focusedPath.map((id, i) => {
-        const n = nodeById[id];
-        const isLast = i === focusedPath.length - 1;
-        return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(React87.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-            "button",
-            {
-              type: "button",
-              className: "ft-legend__chip",
-              onClick: () => focusPathPrefix(i + 1),
-              disabled: isLast,
-              title: isLast ? "Current focus" : `Jump back to ${n ? n.data.label : id}`,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__dot" }),
-                n ? n.data.label : id
-              ]
-            }
-          ),
-          !isLast ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__sep", "aria-hidden": true, children: "\u203A" }) : null
-        ] }, id);
-      }) }) : null
+            ),
+            !isLast ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("span", { className: "ft-legend__sep", "aria-hidden": true, children: "\u203A" }) : null
+          ] }, id);
+        }) }) : null
+      ] })
     ] })
   ] });
 }