@leavepulse/ui 0.22.1 → 0.22.3

package/dist/chunks/{LpAddressInput-Dah7asXy.js → LpAddressInput-BWuIOt_4.js}

@@ -6,7 +6,7 @@ import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$5 } from "./LpInput-BauZRyzm.js";
-import { _ as _sfc_main$7 } from "./LpModal-CNAFRgCU.js";
+import { _ as _sfc_main$7 } from "./LpModal-CF7G_0D_.js";
 import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };
 const _hoisted_2 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpConfirmDialog-CkMzeKdp.js → LpConfirmDialog-B_3ML33f.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-CNAFRgCU.js";
+import { _ as _sfc_main$1 } from "./LpModal-CF7G_0D_.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpModal-CNAFRgCU.js → LpModal-CF7G_0D_.js}

@@ -47,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const bodyPad = computed(
       () => [
         "px-5",
-        props.title || slots.title ? "" : "pt-5",
+        props.title || slots.title ? "pt-1" : "pt-5",
         slots.footer ? "" : "pb-5"
       ].filter(Boolean).join(" ")
     );

package/dist/chunks/{LpTopologyCanvas-DVwyQfKa.js → LpTopologyCanvas-DCQINTZE.js}

@@ -1,4 +1,4 @@
-import { defineComponent, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
@@ -22,6 +22,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     connectable: { type: Boolean, default: false },
     selectable: { type: Boolean, default: false },
     legend: { type: Boolean, default: true },
+    legendPosition: { default: "bottom-left" },
     lanes: { default: () => [] }
   },
   emits: ["connect", "node-select", "node-contextmenu", "edge-contextmenu", "pane-click", "selection-change", "update:nodes", "node-drag-stop", "viewport-change"],
@@ -102,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           source: e.source,
           target: e.target,
           type: "default",
-          animated: obs !== "applied",
+          animated: obs !== "applied" && !e.dimmed,
           label: e.kind,
           labelBgStyle: { fill: "var(--color-surface)" },
           labelStyle: { fill: "var(--color-muted-strong)", fontSize: "10px" },
@@ -110,7 +111,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             stroke: color,
             strokeWidth: cat === "structural" ? 1.5 : 2,
             strokeDasharray: edgeDash(cat, obs),
-            strokeLinecap: "round"
+            strokeLinecap: "round",
+            opacity: e.dimmed ? 0.12 : 1
           },
           markerEnd: { type: MarkerType.ArrowClosed, color }
         };
@@ -149,6 +151,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       e.preventDefault?.();
       emit("node-contextmenu", { id: node.id, x: e.clientX, y: e.clientY });
     });
+    const legendOffset = computed(() => {
+      if (props.legendPosition === "bottom-left") return "!left-12";
+      if (props.legendPosition === "bottom-right") return "!bottom-40";
+      return "";
+    });
     const legendItems = [
       { label: "Network", color: CATEGORY_COLOR.network, width: 2, dash: "0" },
       { label: "Depends-on", color: CATEGORY_COLOR.structural, width: 1.5, dash: "1 5" },
@@ -198,7 +205,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(Controls)),
           __props.legend ? (openBlock(), createBlock(unref(Panel), {
             key: 0,
-            position: "top-right"
+            position: __props.legendPosition,
+            class: normalizeClass(legendOffset.value)
           }, {
             default: withCtx(() => [
               createElementVNode("div", _hoisted_1, [
@@ -225,7 +233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ]),
             _: 1
-          })) : createCommentVNode("", true)
+          }, 8, ["position", "class"])) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["nodes", "edges", "nodes-connectable", "selection-on-drag", "pan-on-drag", "selection-key-code", "selection-mode"]);

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-Dah7asXy.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-BWuIOt_4.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CkMzeKdp.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-B_3ML33f.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-CNAFRgCU.js";
+import { _ as _sfc_main } from "../chunks/LpModal-CF7G_0D_.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-CNAFRgCU.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-CF7G_0D_.js";
 import { appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
 import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };

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

@@ -40,6 +40,12 @@ export interface TopologyEdge {
     /** Semantic class driving colour + dash. Inferred from `kind` if omitted. */
     category?: EdgeCategory;
     observed?: EdgeObserved;
+    /**
+     * Push the edge into the background, matching the node data's `dimmed`. A
+     * focus highlight has to fade the edges too — dimming only the nodes leaves
+     * every unrelated line at full strength.
+     */
+    dimmed?: boolean;
 }
 /**
  * A background swimlane: a sized zone (one per project / overlay network) drawn
@@ -78,6 +84,12 @@ type __VLS_Props = {
     selectable?: boolean;
     /** Show the edge-type legend (Network / Depends-on / Pending / Drift). */
     legend?: boolean;
+    /**
+     * Where the legend sits. Defaults to bottom-left: hosts commonly float a
+     * toolbar across the top, which would cover a top-anchored legend, and the
+     * minimap owns the bottom-right.
+     */
+    legendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     /**
      * Background swimlanes drawn beneath the nodes (one per project / overlay).
      * Non-interactive; pan/zoom with the graph. Empty = no lanes.
@@ -148,6 +160,7 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {
     legend: boolean;
     connectable: boolean;
     selectable: boolean;
+    legendPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     lanes: TopologyLane[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpTopologyCanvas.vue.js

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

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-Dah7asXy.js";
+import { _ as _2 } from "./chunks/LpAddressInput-BWuIOt_4.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
@@ -14,7 +14,7 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-CkMzeKdp.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-B_3ML33f.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
@@ -32,7 +32,7 @@ import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _30 } from "./chunks/LpLogViewer-B1aLUVdz.js";
-import { _ as _31 } from "./chunks/LpModal-CNAFRgCU.js";
+import { _ as _31 } from "./chunks/LpModal-CF7G_0D_.js";
 import { _ as _32 } from "./chunks/LpNotificationBell-HSGo1pcf.js";
 import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.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-DVwyQfKa.js";
+import { _ as _60 } from "./chunks/LpTopologyCanvas-DCQINTZE.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.1",
+  "version": "0.22.3",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpModal.vue

@@ -72,10 +72,16 @@ const widthClass = computed(() => {
 // inset horizontally; top only when there's no header, bottom only when there's
 // no footer (header/footer own those edges).
 const slots = useSlots()
+/*
+ * The body clips its overflow, and a focus ring is drawn OUTSIDE the control it
+ * belongs to — so a field sitting flush against the top of the body had its
+ * ring sliced off. Under a header the gap is only the ring's width plus a
+ * hair; without one the existing pt-5 already clears it.
+ */
 const bodyPad = computed(() =>
   [
     "px-5",
-    props.title || slots.title ? "" : "pt-5",
+    props.title || slots.title ? "pt-1" : "pt-5",
     slots.footer ? "" : "pb-5",
   ]
     .filter(Boolean)

package/src/components/LpTopologyCanvas.vue

@@ -71,6 +71,12 @@ export interface TopologyEdge {
   /** Semantic class driving colour + dash. Inferred from `kind` if omitted. */
   category?: EdgeCategory
   observed?: EdgeObserved
+  /**
+   * Push the edge into the background, matching the node data's `dimmed`. A
+   * focus highlight has to fade the edges too — dimming only the nodes leaves
+   * every unrelated line at full strength.
+   */
+  dimmed?: boolean
 }
 
 /**
@@ -113,13 +119,25 @@ const props = withDefaults(
     selectable?: boolean
     /** Show the edge-type legend (Network / Depends-on / Pending / Drift). */
     legend?: boolean
+    /**
+     * Where the legend sits. Defaults to bottom-left: hosts commonly float a
+     * toolbar across the top, which would cover a top-anchored legend, and the
+     * minimap owns the bottom-right.
+     */
+    legendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right"
     /**
      * Background swimlanes drawn beneath the nodes (one per project / overlay).
      * Non-interactive; pan/zoom with the graph. Empty = no lanes.
      */
     lanes?: TopologyLane[]
   }>(),
-  { connectable: false, selectable: false, legend: true, lanes: () => [] },
+  {
+    connectable: false,
+    selectable: false,
+    legend: true,
+    legendPosition: "bottom-left",
+    lanes: () => [],
+  },
 )
 
 const emit = defineEmits<{
@@ -236,7 +254,7 @@ const flowEdges = computed(() =>
       source: e.source,
       target: e.target,
       type: "default",
-      animated: obs !== "applied",
+      animated: obs !== "applied" && !e.dimmed,
       label: e.kind,
       labelBgStyle: { fill: "var(--color-surface)" },
       labelStyle: { fill: "var(--color-muted-strong)", fontSize: "10px" },
@@ -245,6 +263,7 @@ const flowEdges = computed(() =>
         strokeWidth: cat === "structural" ? 1.5 : 2,
         strokeDasharray: edgeDash(cat, obs),
         strokeLinecap: "round" as const,
+        opacity: e.dimmed ? 0.12 : 1,
       },
       markerEnd: { type: MarkerType.ArrowClosed, color },
     }
@@ -290,6 +309,14 @@ onNodeContextMenu(({ node, event }) => {
   e.preventDefault?.()
   emit("node-contextmenu", { id: node.id, x: e.clientX, y: e.clientY })
 })
+// Vue Flow's zoom Controls sit bottom-left and the MiniMap bottom-right; clear
+// whichever the legend shares a corner with so they don't stack.
+const legendOffset = computed(() => {
+  if (props.legendPosition === "bottom-left") return "!left-12"
+  if (props.legendPosition === "bottom-right") return "!bottom-40"
+  return ""
+})
+
 // Legend rows mirror the edge encoding exactly (same colours/dashes).
 const legendItems = [
   { label: "Network", color: CATEGORY_COLOR.network, width: 2, dash: "0" },
@@ -338,7 +365,7 @@ defineExpose({ fitView, setViewport: applyViewport })
     <Controls />
 
     <!-- Edge-type legend: makes the colour/dash encoding self-explanatory. -->
-    <Panel v-if="legend" position="top-right">
+    <Panel v-if="legend" :position="legendPosition" :class="legendOffset">
       <div
         class="flex flex-col gap-1.5 rounded-card border border-line bg-surface-overlay/90 px-3 py-2 text-[11px] backdrop-blur"
       >