@cjlapao/ui-kit 0.2.5 → 0.2.6

package/dist/index.cjs

@@ -68,6 +68,7 @@ __export(src_exports, {
   COLLAPSIBLE_HELP_VARIANTS: () => COLLAPSIBLE_HELP_VARIANTS,
   COMBOBOX_TONE_CLASSES: () => COMBOBOX_TONE_CLASSES,
   COMBOBOX_VALIDATION_STATUSES: () => COMBOBOX_VALIDATION_STATUSES,
+  CONNECTION_FLOW_CHILD_LAYOUTS: () => CONNECTION_FLOW_CHILD_LAYOUTS,
   CONNECTION_FLOW_EDGE_STYLES: () => CONNECTION_FLOW_EDGE_STYLES,
   CONNECTION_FLOW_ITEM_PROGRESS: () => CONNECTION_FLOW_ITEM_PROGRESS,
   CONNECTION_FLOW_LOADERS: () => CONNECTION_FLOW_LOADERS,
@@ -556,6 +557,7 @@ __export(src_exports, {
   mixHex: () => mixHex,
   nicePolarMax: () => nicePolarMax,
   niceRadarMax: () => niceRadarMax,
+  nodeHasFailed: () => nodeHasFailed,
   nodeIcon: () => nodeIcon,
   nodeIsActive: () => nodeIsActive,
   nodeIsSkipped: () => nodeIsSkipped,
@@ -611,6 +613,7 @@ __export(src_exports, {
   tintColor: () => tintColor,
   toBoolean: () => toBoolean,
   toDate: () => toDate,
+  toRows: () => toRows,
   toSmartVariable: () => toSmartVariable,
   tracePathTo: () => tracePathTo,
   usageTotals: () => usageTotals,
@@ -16345,12 +16348,23 @@ var ScrollArea = ({
   mask = false,
   tabIndex = 0,
   contentClassName,
+  viewportClassName,
+  viewportRef: viewportRefProp,
   children,
   className = "",
   ...rest
 }) => {
   const viewportId = (0, import_react176.useId)();
   const viewportRef = (0, import_react176.useRef)(null);
+  const setViewportRef = (0, import_react176.useCallback)(
+    (el) => {
+      viewportRef.current = el;
+      if (typeof viewportRefProp === "function") viewportRefProp(el);
+      else if (viewportRefProp)
+        viewportRefProp.current = el;
+    },
+    [viewportRefProp]
+  );
   const contentRef = (0, import_react176.useRef)(null);
   const yTrackRef = (0, import_react176.useRef)(null);
   const xTrackRef = (0, import_react176.useRef)(null);
@@ -16492,7 +16506,7 @@ var ScrollArea = ({
         /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
           "div",
           {
-            ref: viewportRef,
+            ref: setViewportRef,
             id: viewportId,
             "data-slot": "scrollarea-viewport",
             tabIndex: overflow.x || overflow.y ? tabIndex : -1,
@@ -16507,7 +16521,8 @@ var ScrollArea = ({
               // and the viewport would simply grow past the frame's cap, get
               // clipped by `overflow-hidden` and never learn it was scrollable.
               "[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-              "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400"
+              "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400",
+              viewportClassName
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
               "div",
@@ -56086,6 +56101,7 @@ var CONNECTION_FLOW_EDGE_STYLES = [
   "curved",
   "straight"
 ];
+var CONNECTION_FLOW_CHILD_LAYOUTS = ["fan", "chain"];
 var CONNECTION_FLOW_LOADERS = [
   "skeleton",
   "spinner",
@@ -56224,6 +56240,8 @@ var DEFAULT_LAYOUT_OPTIONS = {
   laneGap: 16,
   childGap: 12,
   childIndent: 28,
+  rowGap: 12,
+  gridIndent: 28,
   edgeStyle: "orthogonal",
   cornerRadius: 8,
   bypassLift: 18,
@@ -56249,6 +56267,8 @@ var NODE_CORNER_RADIUS = Object.fromEntries(
 var nodeTone = (node) => node?.tone ?? (node?.status ? STATUS_TONE[node.status] : "neutral");
 var nodeIcon = (node) => node?.icon ?? (node?.status ? STATUS_ICON2[node.status] : void 0);
 var nodeIsActive = (node) => node?.active ?? node?.status === "running";
+var nodeHasFailed = (node) => node?.status === "failed";
+var toRows = (node) => node.rows ?? (node.children ?? []).map((child) => [child]);
 var nodeIsSkipped = (node) => node?.skipped ?? (node?.status === "skipped" ? true : void 0);
 
 // ../common/connectionFlow/measure.ts
@@ -56329,6 +56349,15 @@ var nodeScrolls = (node, options, expanded) => {
 };
 var measureBranch = (node, options, expanded) => {
   const own = measureNode(node, options, expanded);
+  if (node.childLayout === "chain") {
+    const rows = toRows(node);
+    if (rows.length === 0) return own;
+    const rowsHeight = rows.reduce(
+      (sum, row, index) => sum + Math.max(0, ...row.map((c) => measureBranch(c, options, expanded))) + (index > 0 ? options.rowGap : 0),
+      0
+    );
+    return own + options.childGap + rowsHeight;
+  }
   const children = node.children ?? [];
   if (children.length === 0) return own;
   const childHeight = children.reduce(
@@ -56724,6 +56753,7 @@ var layoutConnectionFlow = (input) => {
   const skipped = resolveSkipped(columns, input.autoState ?? false);
   const laidOut = [];
   const byId = /* @__PURE__ */ new Map();
+  const chains = /* @__PURE__ */ new Map();
   let x = options.padding;
   const columnBounds = [];
   columns.forEach((column, columnIndex) => {
@@ -56774,15 +56804,68 @@ var layoutConnectionFlow = (input) => {
           placeChildren(child, depth + 1, indentX + options.childIndent);
         });
       };
-      placeChildren(node, 1, x + options.childIndent);
+      if (node.childLayout === "chain") {
+        const rows = toRows(node);
+        if (rows.length > 0) {
+          const cardWidth = options.metrics.width;
+          const gridX = x + options.gridIndent;
+          let rowY = y + ownHeight + options.childGap;
+          const walk2 = [];
+          let maxCols = 1;
+          rows.forEach((row, rowIdx) => {
+            maxCols = Math.max(maxCols, row.length);
+            let rowBottom = rowY;
+            row.forEach((card, col) => {
+              const cardHeight = measureNode(card, options, input.expanded);
+              const cardEntry = {
+                id: card.id,
+                node: card,
+                outline: "",
+                x: gridX + col * (cardWidth + options.connectorWidth),
+                y: rowY,
+                width: cardWidth,
+                height: cardHeight,
+                anchorY: cardHeight / 2,
+                column: columnIndex,
+                depth: 1,
+                tone: toneOf(card),
+                scrollable: nodeScrolls(card, options, input.expanded)
+              };
+              laidOut.push(cardEntry);
+              byId.set(card.id, cardEntry);
+              walk2.push({ card: cardEntry, row: rowIdx });
+              rowBottom = Math.max(rowBottom, rowY + cardHeight);
+            });
+            rowY = rowBottom + options.rowGap;
+          });
+          const live = walk2.filter((w) => !nodeIsSkipped(w.card.node));
+          const exitCard = live.length > 0 ? live[live.length - 1].card : null;
+          chains.set(node.id, {
+            parentNode: node,
+            walk: walk2,
+            exitCard,
+            exitHasBranch: Boolean(exitCard?.node.success?.to),
+            gridWidth: options.gridIndent + maxCols * cardWidth + (maxCols - 1) * options.connectorWidth
+          });
+        } else {
+          placeChildren(node, 1, x + options.childIndent);
+        }
+      } else {
+        placeChildren(node, 1, x + options.childIndent);
+      }
       y += heights[laneIndex] + options.laneGap;
     });
+    const chainInfo = column.parallel ? void 0 : chains.get(column.nodes[0].id);
+    const columnWidth = Math.max(
+      options.metrics.width,
+      chainInfo?.gridWidth ?? 0
+    );
     columnBounds.push({
       start: x,
-      end: x + options.metrics.width,
+      end: x + columnWidth,
       centre: options.padding + stackHeight / 2
     });
-    x += options.metrics.width + options.connectorWidth;
+    x += columnWidth + options.connectorWidth;
   });
   const edges = [];
   const connectors = /* @__PURE__ */ new Map();
@@ -56840,7 +56923,10 @@ var layoutConnectionFlow = (input) => {
     if (columnIsTerminal(sourceIndex)) return;
     if (skipped.has(columnIndex)) return;
     const isBypass = sourceIndex !== columnIndex - 1;
-    const sourceNodes = columns[sourceIndex].nodes;
+    const chainSrc = columns[sourceIndex].parallel ? void 0 : chains.get(columns[sourceIndex].nodes[0].id);
+    if (chainSrc && (!chainSrc.exitCard || chainSrc.exitHasBranch)) return;
+    if (chainSrc?.exitCard?.node.terminal === true) return;
+    const sourceNodes = chainSrc?.exitCard ? [chainSrc.exitCard.node] : columns[sourceIndex].nodes;
     const targetNodes = column.nodes;
     const state = (sourceNode, targetNode) => targetNode.connector?.state ?? (input.autoState ? toneOf(sourceNode) !== "neutral" ? nodeIsActive(targetNode) ? "flowing" : "stopped" : "disabled" : input.flowState ?? "flowing");
     const animatedFor = (cfg, edgeState) => (cfg?.animated ?? input.animated ?? true) && (edgeState === "flowing" || edgeState === "stopped" && (cfg?.animateCompleted ?? false));
@@ -56850,7 +56936,7 @@ var layoutConnectionFlow = (input) => {
       labelUsed = true;
       return label;
     };
-    const sourceSpan = columnBox(sourceIndex);
+    const sourceSpan = chainSrc?.exitCard ? boxOf(chainSrc.exitCard) : columnBox(sourceIndex);
     const targetSpan = columnBox(columnIndex);
     if (!sourceSpan || !targetSpan) return;
     const sides = selectSides(sourceSpan, targetSpan);
@@ -56934,6 +57020,7 @@ var layoutConnectionFlow = (input) => {
     });
   });
   const childEdges = (parent) => {
+    if (parent.childLayout === "chain") return;
     const parentEntry = byId.get(parent.id);
     if (!parentEntry) return;
     (parent.children ?? []).forEach((child) => {
@@ -56995,6 +57082,146 @@ var layoutConnectionFlow = (input) => {
     });
   };
   input.nodes.forEach(childEdges);
+  const emitFlowEdge = (o) => {
+    const route = routePorts(o.fromPort, o.toPort, {
+      style: o.cfg?.edgeStyle ?? options.edgeStyle,
+      stub: Math.min(18, options.connectorWidth / 3),
+      radius: options.cornerRadius,
+      trim: trimFor(o.cfg),
+      via: o.via
+    });
+    const animated = (o.cfg?.animated ?? input.animated ?? true) && (o.state === "flowing" || o.state === "stopped" && (o.cfg?.animateCompleted ?? false));
+    addConnector(o.fromEntry.id, o.fromPort, o.sourceTone, o.state, animated, o.id, o.cfg);
+    addConnector(o.toEntry.id, o.toPort, o.targetTone, o.state, animated, o.id, o.cfg);
+    edges.push({
+      id: o.id,
+      fromId: o.fromEntry.id,
+      toId: o.toEntry.id,
+      state: o.state,
+      points: route.points,
+      d: route.d,
+      sourceTone: o.sourceTone,
+      targetTone: o.targetTone,
+      bypass: false,
+      emitIndex: 0,
+      emitCount: 1,
+      emitSpan: 0,
+      animated,
+      label: o.label,
+      kind: o.kind,
+      branchKind: o.branchKind
+    });
+  };
+  const sidePort = (entry, side) => port(boxOf(entry), side, entry.anchorY / entry.height);
+  const branchToneOf = (branch, kind) => branch.tone ?? (kind === "success" ? STATUS_TONE.succeeded : STATUS_TONE.failed);
+  const emitBranch = (fromEntry, branch, kind) => {
+    if (!branch.to) return;
+    const target = byId.get(branch.to);
+    if (!target || target.id === fromEntry.id) return;
+    const tone = branchToneOf(branch, kind);
+    const state = kind === "failure" ? nodeHasFailed(fromEntry.node) ? "flowing" : "stopped" : nodeHasFailed(fromEntry.node) ? "stopped" : "flowing";
+    const srcBox = boxOf(fromEntry);
+    const tgtBox = boxOf(target);
+    const upstream = tgtBox.y + tgtBox.height <= srcBox.y + 1 || tgtBox.x + tgtBox.width <= srcBox.x + 1;
+    if (upstream && kind === "failure") {
+      emitFlowEdge({
+        id: `${fromEntry.id}~fail>${target.id}`,
+        fromEntry,
+        toEntry: target,
+        fromPort: port(srcBox, "left", fromEntry.anchorY / fromEntry.height),
+        toPort: port(tgtBox, "top", 0.5),
+        via: { x: Math.min(srcBox.x, tgtBox.x) - options.bypassLift },
+        state,
+        sourceTone: tone,
+        targetTone: tone,
+        label: branch.label,
+        kind: "branch",
+        branchKind: kind
+      });
+      return;
+    }
+    const sides = selectSides(srcBox, tgtBox);
+    emitFlowEdge({
+      id: `${fromEntry.id}~${kind === "failure" ? "fail" : "ok"}>${target.id}`,
+      fromEntry,
+      toEntry: target,
+      fromPort: sidePort(fromEntry, sides.from),
+      toPort: sidePort(target, sides.to),
+      state,
+      sourceTone: tone,
+      targetTone: tone,
+      label: branch.label,
+      kind: "branch",
+      branchKind: kind
+    });
+  };
+  chains.forEach((chain) => {
+    const parentEntry = byId.get(chain.parentNode.id);
+    if (!parentEntry) return;
+    if (nodeIsSkipped(chain.parentNode) === true) return;
+    const live = chain.walk.filter((w) => !nodeIsSkipped(w.card.node));
+    if (live.length === 0) return;
+    const first = live[0].card;
+    const parentBox = boxOf(parentEntry);
+    const firstBox = boxOf(first);
+    emitFlowEdge({
+      id: `${parentEntry.id}~in>${first.id}`,
+      fromEntry: parentEntry,
+      toEntry: first,
+      fromPort: portAt(
+        parentBox,
+        "bottom",
+        firstBox.x + firstBox.width / 2 - parentBox.x
+      ),
+      toPort: port(firstBox, "top", 0.5),
+      state: first.node.connector?.state ?? (nodeHasFailed(parentEntry.node) ? "stopped" : nodeIsActive(first.node) ? "flowing" : "stopped"),
+      sourceTone: toneOf(parentEntry.node),
+      targetTone: toneOf(first.node),
+      cfg: first.node.connector,
+      kind: "chain"
+    });
+    live.forEach((w, i) => {
+      const src = w.card;
+      if (src.node.success?.to) {
+        emitBranch(src, src.node.success, "success");
+        return;
+      }
+      const next = live[i + 1];
+      if (!next) return;
+      const tgt = next.card;
+      const srcBox = boxOf(src);
+      const tgtBox = boxOf(tgt);
+      const sameRow = next.row === w.row;
+      const gapStart = srcBox.x + srcBox.width;
+      const gapEnd = tgtBox.x;
+      emitFlowEdge({
+        id: `${src.id}~walk>${tgt.id}`,
+        fromEntry: src,
+        toEntry: tgt,
+        fromPort: sameRow ? port(srcBox, "right", src.anchorY / src.height) : port(srcBox, "bottom", 0.5),
+        toPort: sameRow ? port(tgtBox, "left", tgt.anchorY / tgt.height) : port(tgtBox, "top", 0.5),
+        via: sameRow && gapEnd > gapStart ? { x: (gapStart + gapEnd) / 2 } : void 0,
+        state: tgt.node.connector?.state ?? (nodeHasFailed(src.node) ? "stopped" : nodeIsActive(tgt.node) ? "flowing" : "stopped"),
+        sourceTone: src.node.success ? branchToneOf(src.node.success, "success") : toneOf(src.node),
+        targetTone: toneOf(tgt.node),
+        cfg: tgt.node.connector,
+        label: src.node.success?.label ?? tgt.node.connector?.label,
+        kind: "chain"
+      });
+    });
+    chain.walk.forEach((w) => {
+      if (w.card.node.failure) emitBranch(w.card, w.card.node.failure, "failure");
+    });
+  });
+  const chainCardIds = /* @__PURE__ */ new Set();
+  chains.forEach(
+    (chain) => chain.walk.forEach((w) => chainCardIds.add(w.card.id))
+  );
+  laidOut.forEach((entry) => {
+    if (chainCardIds.has(entry.id)) return;
+    if (entry.node.success?.to) emitBranch(entry, entry.node.success, "success");
+    if (entry.node.failure?.to) emitBranch(entry, entry.node.failure, "failure");
+  });
   const emittedBySource = /* @__PURE__ */ new Map();
   edges.forEach((edge) => {
     if (!edge.animated) return;
@@ -57525,6 +57752,29 @@ var ConnectionFlowSvg = ({
   const isLit = (edge) => highlightEdges.size === 0 || highlightEdges.has(edge.id);
   const nodeOpacity = (node) => highlightNodes.size === 0 || highlightNodes.has(node.id) ? 1 : 0.22;
   const connectorOpacity = (connector) => highlightEdges.size === 0 || connector.edgeIds.some((id) => highlightEdges.has(id)) ? 1 : 0.22;
+  const cardContent = (laid) => {
+    const content = renderNode ? renderNode(laid) : /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
+      ConnectionFlowNodeBody_default,
+      {
+        node: laid,
+        metrics,
+        showProgress,
+        options,
+        scrollable: laid.scrollable,
+        expanded,
+        onToggleExpanded
+      }
+    );
+    return laid.scrollable ? /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
+      ScrollArea_default,
+      {
+        variant: "auto",
+        className: "h-full w-full",
+        contentClassName: "block w-full",
+        children: content
+      }
+    ) : content;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime289.jsxs)("div", { className: "relative h-full w-full overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime289.jsxs)(
       "svg",
@@ -57688,10 +57938,6 @@ var ConnectionFlowSvg = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
           "div",
           {
-            "data-scrolls": laid.scrollable ? "" : void 0,
-            className: (0, import_classnames101.default)(
-              laid.scrollable && `overflow-y-auto ${THIN_SCROLLBAR_FIELD}`
-            ),
             style: {
               width: laid.width,
               height: laid.height,
@@ -57699,19 +57945,7 @@ var ConnectionFlowSvg = ({
               transform: `scale(${scale})`,
               transformOrigin: "top left"
             },
-            onWheel: laid.scrollable ? (event) => event.stopPropagation() : void 0,
-            children: renderNode ? renderNode(laid) : /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
-              ConnectionFlowNodeBody_default,
-              {
-                node: laid,
-                metrics,
-                showProgress,
-                options,
-                scrollable: laid.scrollable,
-                expanded,
-                onToggleExpanded
-              }
-            )
+            children: cardContent(laid)
           }
         )
       },
@@ -57930,6 +58164,21 @@ var ConnectionFlow = import_react271.default.forwardRef(function ConnectionFlow2
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
+  (0, import_react271.useEffect)(() => {
+    const element = viewportRef.current;
+    if (!element || !interactive) return;
+    const onWheel = (event) => {
+      if (!(event.ctrlKey || event.metaKey)) return;
+      event.preventDefault();
+      const rect = element.getBoundingClientRect();
+      setZoom(
+        scale * (event.deltaY < 0 ? 1.1 : 1 / 1.1),
+        { x: event.clientX - rect.left, y: event.clientY - rect.top }
+      );
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, [interactive, scale, setZoom]);
   (0, import_react271.useEffect)(() => {
     if (fitOnLoad && viewport.width) fit();
   }, [fitOnLoad, nodes, viewport.width, viewport.height]);
@@ -58043,22 +58292,17 @@ var ConnectionFlow = import_react271.default.forwardRef(function ConnectionFlow2
         style: { height: typeof height === "number" ? `${height}px` : height },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(
-            "div",
+            ScrollArea_default,
             {
-              ref: viewportRef,
-              className: `h-full w-full select-none overflow-auto overscroll-contain [&::-webkit-scrollbar]:h-2 ${THIN_SCROLLBAR_FIELD}`,
+              variant: "auto",
+              viewportRef,
+              viewportClassName: "overscroll-contain",
+              className: "h-full w-full select-none",
               style: { cursor: panning ? "grabbing" : void 0 },
-              onWheel: (event) => {
-                if (!interactive) return;
-                if (event.target.closest("[data-scrolls]")) return;
-                const rect = viewportRef.current?.getBoundingClientRect();
-                const anchor = rect ? { x: event.clientX - rect.left, y: event.clientY - rect.top } : void 0;
-                setZoom(scale * (event.deltaY < 0 ? 1.1 : 1 / 1.1), anchor);
-              },
               onPointerDown: (event) => {
                 if (!interactive || event.button !== 0) return;
                 if (event.target.closest(
-                  "button, a, input, select, textarea, [data-no-pan]"
+                  'button, a, input, select, textarea, [data-no-pan], [data-slot="scrollarea-scrollbar"]'
                 )) {
                   return;
                 }
@@ -58071,7 +58315,7 @@ var ConnectionFlow = import_react271.default.forwardRef(function ConnectionFlow2
                   scrollLeft: element.scrollLeft,
                   scrollTop: element.scrollTop
                 };
-                element.setPointerCapture(event.pointerId);
+                event.currentTarget.setPointerCapture(event.pointerId);
               },
               onPointerMove: (event) => {
                 if (!panning) return;
@@ -66071,6 +66315,7 @@ MetricBar.displayName = "MetricBar";
   COLLAPSIBLE_HELP_VARIANTS,
   COMBOBOX_TONE_CLASSES,
   COMBOBOX_VALIDATION_STATUSES,
+  CONNECTION_FLOW_CHILD_LAYOUTS,
   CONNECTION_FLOW_EDGE_STYLES,
   CONNECTION_FLOW_ITEM_PROGRESS,
   CONNECTION_FLOW_LOADERS,
@@ -66559,6 +66804,7 @@ MetricBar.displayName = "MetricBar";
   mixHex,
   nicePolarMax,
   niceRadarMax,
+  nodeHasFailed,
   nodeIcon,
   nodeIsActive,
   nodeIsSkipped,
@@ -66614,6 +66860,7 @@ MetricBar.displayName = "MetricBar";
   tintColor,
   toBoolean,
   toDate,
+  toRows,
   toSmartVariable,
   tracePathTo,
   usageTotals,