@leavepulse/ui 0.22.10 → 0.22.12

package/dist/chunks/{LpTopologyCanvas-D_EsMgCg.js → LpTopologyCanvas-ebP67CLx.js}

@@ -6,6 +6,7 @@ import { MiniMap } from "@vue-flow/minimap";
 import { _ as _sfc_main$3 } from "./LpInfraNode-qIL3l7IO.js";
 import { _ as _sfc_main$1 } from "./LpLaneNode-HtnQf2FF.js";
 import { _ as _sfc_main$2 } from "./LpServiceNode-D8uJ8sGk.js";
+import { _ as _sfc_main$4 } from "./LpWaypointEdge-D8yHlQiw.js";
 const _hoisted_1 = { class: "flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur" };
 const _hoisted_2 = {
   width: "22",
@@ -23,6 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     selectable: { type: Boolean, default: false },
     legend: { type: Boolean, default: true },
     legendPosition: { default: "bottom-left" },
+    edgeType: {},
     legendLabels: {},
     lanes: { default: () => [] },
     minimap: { type: Boolean, default: true },
@@ -37,6 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       service: markRaw(_sfc_main$2),
       lane: markRaw(_sfc_main$1)
     };
+    const edgeTypes = { waypoints: markRaw(_sfc_main$4) };
     const laneNodes = computed(
       () => props.lanes.map(
         (l) => ({
@@ -105,7 +108,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           id: e.id,
           source: e.source,
           target: e.target,
-          type: "default",
+          type: props.edgeType ?? "default",
+          data: { waypoints: e.waypoints },
           animated: obs !== "applied" && !e.dimmed,
           label: e.kind,
           labelBgStyle: { fill: "var(--color-surface)" },
@@ -188,6 +192,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         nodes: flowNodes.value,
         edges: flowEdges.value,
         "node-types": nodeTypes,
+        "edge-types": edgeTypes,
         "nodes-connectable": __props.connectable,
         "selection-on-drag": __props.selectable,
         "pan-on-drag": __props.selectable ? [1, 2] : true,

package/dist/chunks/LpWaypointEdge-D8yHlQiw.js

@@ -0,0 +1,67 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeStyle } from "vue";
+import { getBezierPath, Position, BaseEdge } from "@vue-flow/core";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpWaypointEdge",
+  props: {
+    id: {},
+    sourceX: {},
+    sourceY: {},
+    targetX: {},
+    targetY: {},
+    sourcePosition: {},
+    targetPosition: {},
+    data: {},
+    markerEnd: {},
+    style: {}
+  },
+  setup(__props) {
+    const props = __props;
+    function splineThrough(points) {
+      if (points.length < 2) return "";
+      const p = [points[0], ...points, points[points.length - 1]];
+      let d = `M${points[0].x},${points[0].y}`;
+      for (let i = 1; i < p.length - 2; i++) {
+        const p0 = p[i - 1];
+        const p1 = p[i];
+        const p2 = p[i + 1];
+        const p3 = p[i + 2];
+        const c1x = p1.x + (p2.x - p0.x) / 6;
+        const c1y = p1.y + (p2.y - p0.y) / 6;
+        const c2x = p2.x - (p3.x - p1.x) / 6;
+        const c2y = p2.y - (p3.y - p1.y) / 6;
+        d += ` C${c1x},${c1y} ${c2x},${c2y} ${p2.x},${p2.y}`;
+      }
+      return d;
+    }
+    const path = computed(() => {
+      const via = props.data?.waypoints ?? [];
+      if (!via.length) {
+        const [d] = getBezierPath({
+          sourceX: props.sourceX,
+          sourceY: props.sourceY,
+          targetX: props.targetX,
+          targetY: props.targetY,
+          sourcePosition: props.sourcePosition ?? Position.Right,
+          targetPosition: props.targetPosition ?? Position.Left
+        });
+        return d;
+      }
+      return splineThrough([
+        { x: props.sourceX, y: props.sourceY },
+        ...via,
+        { x: props.targetX, y: props.targetY }
+      ]);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(BaseEdge), {
+        id: __props.id,
+        path: path.value,
+        "marker-end": __props.markerEnd,
+        style: normalizeStyle(__props.style)
+      }, null, 8, ["id", "path", "marker-end", "style"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpScrollArea", "LpSegmented", "LpSelect", "LpServiceNode", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpScrollArea", "LpSegmented", "LpSelect", "LpServiceNode", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];

package/dist/components/LpTopologyCanvas.vue.d.ts

@@ -46,6 +46,14 @@ export interface TopologyEdge {
      * every unrelated line at full strength.
      */
     dimmed?: boolean;
+    /**
+     * Points the edge should curve through, when the host's layout knows where
+     * the gaps are. Requires `edgeType: "waypoints"`; ignored otherwise.
+     */
+    waypoints?: {
+        x: number;
+        y: number;
+    }[];
 }
 /**
  * A background swimlane: a sized zone (one per project / overlay network) drawn
@@ -90,6 +98,13 @@ type __VLS_Props = {
      * minimap owns the bottom-right.
      */
     legendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /**
+     * Edge shape. The default bezier bulges away from the straight line between
+     * its ends, which suits a free-form graph and cuts through everything in a
+     * LAYERED one — a long edge crosses the cards standing between its columns.
+     * `smoothstep` routes orthogonally through the gaps instead.
+     */
+    edgeType?: "default" | "smoothstep" | "step" | "straight" | "waypoints";
     /** Rename legend rows to match what this graph's edges actually mean. */
     legendLabels?: Partial<Record<"network" | "structural" | "pending" | "drift", string>>;
     /**

package/dist/components/LpTopologyCanvas.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-D_EsMgCg.js";
+import { _ as _sfc_main } from "../chunks/LpTopologyCanvas-ebP67CLx.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpWaypointEdge.vue.d.ts

@@ -0,0 +1,21 @@
+import { Position } from '@vue-flow/core';
+type __VLS_Props = {
+    id: string;
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    data?: {
+        waypoints?: {
+            x: number;
+            y: number;
+        }[];
+    };
+    markerEnd?: string;
+    style?: Record<string, unknown>;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/LpWaypointEdge.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpWaypointEdge-D8yHlQiw.js";
+export {
+  _sfc_main as default
+};

package/dist/index.js

@@ -64,7 +64,7 @@ import { D, _ as _56, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v }
 import { _ as _57 } from "./chunks/LpTilt-DuyKbpkA.js";
 import { _ as _58 } from "./chunks/LpToaster-gDB1EaU3.js";
 import { _ as _59 } from "./chunks/LpTooltip-D1hbjQWG.js";
-import { _ as _60 } from "./chunks/LpTopologyCanvas-D_EsMgCg.js";
+import { _ as _60 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
 import { _ as _61 } from "./chunks/LpUptimeBar-CB366k0O.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.22.10",
+  "version": "0.22.12",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -68,5 +68,6 @@ export const COMPONENT_NAMES = [
   "LpToaster",
   "LpTooltip",
   "LpTopologyCanvas",
-  "LpUptimeBar"
+  "LpUptimeBar",
+  "LpWaypointEdge"
 ] as const

package/src/components/LpTopologyCanvas.vue

@@ -26,6 +26,7 @@ import { computed, markRaw, watch, type Component } from "vue"
 import LpInfraNode, { type InfraNodeData } from "./LpInfraNode.vue"
 import LpLaneNode from "./LpLaneNode.vue"
 import LpServiceNode, { type ServiceNodeData } from "./LpServiceNode.vue"
+import LpWaypointEdge from "./LpWaypointEdge.vue"
 
 // Vue Flow base CSS + canvas chrome theming is shipped via the kit's
 // "@leavepulse/ui/canvas.css" export (a plain CSS file). Component-local CSS
@@ -77,6 +78,11 @@ export interface TopologyEdge {
    * every unrelated line at full strength.
    */
   dimmed?: boolean
+  /**
+   * Points the edge should curve through, when the host's layout knows where
+   * the gaps are. Requires `edgeType: "waypoints"`; ignored otherwise.
+   */
+  waypoints?: { x: number; y: number }[]
 }
 
 /**
@@ -125,6 +131,13 @@ const props = withDefaults(
      * minimap owns the bottom-right.
      */
     legendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
+    /**
+     * Edge shape. The default bezier bulges away from the straight line between
+     * its ends, which suits a free-form graph and cuts through everything in a
+     * LAYERED one — a long edge crosses the cards standing between its columns.
+     * `smoothstep` routes orthogonally through the gaps instead.
+     */
+    edgeType?: "default" | "smoothstep" | "step" | "straight" | "waypoints"
     /** Rename legend rows to match what this graph's edges actually mean. */
     legendLabels?: Partial<
       Record<"network" | "structural" | "pending" | "drift", string>
@@ -185,6 +198,9 @@ const nodeTypes: NodeTypesObject = {
   service: markRaw(LpServiceNode) as Component,
   lane: markRaw(LpLaneNode) as Component,
 }
+// `waypoints` curves through the points an edge carries, for layouts that know
+// where the gaps are; with none it falls back to the plain bezier.
+const edgeTypes = { waypoints: markRaw(LpWaypointEdge) as Component }
 
 // Lanes render as non-interactive Vue Flow nodes BENEATH the graph: prepended
 // so they paint first, with selecting/dragging/connecting off and a low z so
@@ -268,7 +284,8 @@ const flowEdges = computed(() =>
       id: e.id,
       source: e.source,
       target: e.target,
-      type: "default",
+      type: props.edgeType ?? "default",
+      data: { waypoints: e.waypoints },
       animated: obs !== "applied" && !e.dimmed,
       label: e.kind,
       labelBgStyle: { fill: "var(--color-surface)" },
@@ -375,6 +392,7 @@ defineExpose({ fitView, setViewport: applyViewport })
     :nodes="flowNodes"
     :edges="flowEdges"
     :node-types="nodeTypes"
+    :edge-types="edgeTypes"
     :nodes-connectable="connectable"
     :selection-on-drag="selectable"
     :pan-on-drag="selectable ? [1, 2] : true"

package/src/components/LpWaypointEdge.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+/**
+ * An edge that curves THROUGH a list of waypoints.
+ *
+ * The built-in shapes each fail one way in a layered graph: a bezier bulges off
+ * the line between its ends and cuts through whatever stands between the
+ * columns, and orthogonal routing clears the cards but draws the graph as a
+ * grid of right angles. Given the gaps a layout already knows about, a curve
+ * threaded through them is both — clear of the cards and still a curve.
+ *
+ * Waypoints ride on the edge's `data.waypoints`; with none, this is a plain
+ * bezier, so the type is safe to use for every edge in a graph.
+ */
+import { BaseEdge, getBezierPath, Position } from "@vue-flow/core"
+import { computed } from "vue"
+
+const props = defineProps<{
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition?: Position
+  targetPosition?: Position
+  data?: { waypoints?: { x: number; y: number }[] }
+  markerEnd?: string
+  style?: Record<string, unknown>
+}>()
+
+/*
+ * Catmull-Rom through the points, converted to cubic beziers — the standard way
+ * to get a curve that actually passes through its control points rather than
+ * being pulled towards them. Tension 0.5 keeps it taut enough not to loop back
+ * on itself between closely spaced waypoints.
+ */
+function splineThrough(points: { x: number; y: number }[]): string {
+  if (points.length < 2) return ""
+  const p = [points[0]!, ...points, points[points.length - 1]!]
+  let d = `M${points[0]!.x},${points[0]!.y}`
+  for (let i = 1; i < p.length - 2; i++) {
+    const p0 = p[i - 1]!
+    const p1 = p[i]!
+    const p2 = p[i + 1]!
+    const p3 = p[i + 2]!
+    const c1x = p1.x + (p2.x - p0.x) / 6
+    const c1y = p1.y + (p2.y - p0.y) / 6
+    const c2x = p2.x - (p3.x - p1.x) / 6
+    const c2y = p2.y - (p3.y - p1.y) / 6
+    d += ` C${c1x},${c1y} ${c2x},${c2y} ${p2.x},${p2.y}`
+  }
+  return d
+}
+
+const path = computed(() => {
+  const via = props.data?.waypoints ?? []
+  if (!via.length) {
+    const [d] = getBezierPath({
+      sourceX: props.sourceX,
+      sourceY: props.sourceY,
+      targetX: props.targetX,
+      targetY: props.targetY,
+      sourcePosition: props.sourcePosition ?? Position.Right,
+      targetPosition: props.targetPosition ?? Position.Left,
+    })
+    return d
+  }
+  return splineThrough([
+    { x: props.sourceX, y: props.sourceY },
+    ...via,
+    { x: props.targetX, y: props.targetY },
+  ])
+})
+</script>
+
+<template>
+  <BaseEdge :id="id" :path="path" :marker-end="markerEnd" :style="style" />
+</template>