@leavepulse/ui 0.22.4 → 0.22.6

package/dist/chunks/{LpAppShell-DGZv907S.js → LpAppShell-D8CAP9oF.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, watch, openBlock, createElementBlock, create
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$4 } from "./LpScrollArea-D8xyKXcF.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-JvMaaYsy.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-D3GGLSE7.js";
 const _hoisted_1 = { class: "flex h-dvh overflow-hidden bg-surface text-ink" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };
 const _hoisted_3 = { class: "flex h-16 shrink-0 items-center gap-3 border-b border-line bg-surface px-4 md:px-6" };

package/dist/chunks/{LpBadge-CXzBPnwO.js → LpBadge-BPodVcJa.js}

@@ -19,6 +19,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           brand: "bg-brand-soft text-brand",
           action: "bg-action/15 text-action",
           success: "bg-action/15 text-action",
+          // Partial trouble, which every status surface eventually needs: without
+          // it a half-failed thing has to render as either fine or broken.
+          warning: "bg-accent/15 text-accent",
           danger: "bg-danger-soft text-danger",
           outline: "border border-line text-ink"
         }

package/dist/chunks/{LpInfraNode-C_4cyGl9.js → LpInfraNode-qIL3l7IO.js}

@@ -21,29 +21,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpInfraNode",
   props: {
     data: {},
-    selected: { type: Boolean }
+    selected: { type: Boolean },
+    roles: {}
   },
   setup(__props) {
     const props = __props;
-    const roleVar = {
-      hypervisor: "var(--color-accent)",
-      game: "var(--color-action)",
-      router: "var(--color-muted-strong)",
-      edge: "var(--color-brand)"
+    const DEFAULT_ROLES = {
+      compute: { color: "var(--color-node-compute)", icon: "▣" },
+      host: { color: "var(--color-node-compute)", icon: "▣" },
+      worker: { color: "var(--color-node-compute)", icon: "◱" },
+      hypervisor: { color: "var(--color-node-compute)", icon: "▦" },
+      game: { color: "var(--color-node-compute)", icon: "◈" },
+      storage: { color: "var(--color-node-transit)", icon: "▤" },
+      database: { color: "var(--color-node-transit)", icon: "▤" },
+      router: { color: "var(--color-node-transit)", icon: "⇄" },
+      proxy: { color: "var(--color-node-transit)", icon: "⇅" },
+      edge: { color: "var(--color-node-edge)", icon: "☁" },
+      public: { color: "var(--color-node-edge)", icon: "◉" }
     };
-    const accent = computed(() => roleVar[props.data.role] ?? "var(--color-line-strong)");
-    const roleIcon = {
-      hypervisor: "▣",
-      game: "◈",
-      router: "⇄",
-      edge: "☁"
-    };
-    const icon = computed(() => roleIcon[props.data.role] ?? "●");
+    const UNKNOWN_ROLE = { color: "var(--color-node-unknown)", icon: "●" };
+    const role = computed(
+      () => ({ ...DEFAULT_ROLES, ...props.roles ?? {} })[props.data.role] ?? UNKNOWN_ROLE
+    );
+    const accent = computed(() => role.value.color);
+    const icon = computed(() => role.value.icon);
+    const accentLine = computed(
+      () => `color-mix(in srgb, ${accent.value} 35%, var(--color-line))`
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]", __props.selected ? "border-[var(--accent)]" : "border-line"]),
+        class: normalizeClass(["w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]", __props.selected ? "border-[var(--accent)]" : "border-[var(--accent-line)]"]),
         style: normalizeStyle({
           "--accent": accent.value,
+          "--accent-line": accentLine.value,
           opacity: __props.data.dimmed ? 0.3 : __props.data.online === false ? 0.5 : 1,
           ...__props.selected ? { boxShadow: "0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)" } : {}
         })

package/dist/chunks/{LpNotificationBell-HSGo1pcf.js → LpNotificationBell-DWDEkmdA.js}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, useModel, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, createVNode, createTextVNode, mergeModels } from "vue";
-import { _ as _sfc_main$7 } from "./LpBadge-CXzBPnwO.js";
+import { _ as _sfc_main$7 } from "./LpBadge-BPodVcJa.js";
 import { _ as _sfc_main$6 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpEmptyState-CrfyRJUG.js";

package/dist/chunks/{LpSidebar-JvMaaYsy.js → LpSidebar-D3GGLSE7.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createBlock } from "vue";
 import { _ as _sfc_main$2 } from "./LpDrawer-DAJN5rGK.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-BIYzk7e_.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-X14xMdPa.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-BIYzk7e_.js → LpSidebarNav-X14xMdPa.js}

@@ -1,7 +1,7 @@
 import { defineComponent, openBlock, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, createBlock, withCtx, toDisplayString, resolveDynamicComponent, normalizeClass, unref, renderSlot, createTextVNode } from "vue";
 import { Motion } from "motion-v";
 import { usePillTransition } from "../composables/usePillTransition.js";
-import { _ as _sfc_main$4 } from "./LpBadge-CXzBPnwO.js";
+import { _ as _sfc_main$4 } from "./LpBadge-BPodVcJa.js";
 import { _ as _sfc_main$2 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpScrollArea-D8xyKXcF.js";

package/dist/chunks/{LpTopologyCanvas-74i_pq4e.js → LpTopologyCanvas-BsJWyacK.js}

@@ -3,7 +3,7 @@ import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
 import { MiniMap } from "@vue-flow/minimap";
-import { _ as _sfc_main$3 } from "./LpInfraNode-C_4cyGl9.js";
+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-Dc-Ut5RS.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" };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-DGZv907S.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-D8CAP9oF.js";
 export {
   _sfc_main as default
 };

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

@@ -5,6 +5,7 @@ declare const badge: import('tailwind-variants').TVReturnType<{
         brand: string;
         action: string;
         success: string;
+        warning: string;
         danger: string;
         outline: string;
     };
@@ -14,6 +15,7 @@ declare const badge: import('tailwind-variants').TVReturnType<{
         brand: string;
         action: string;
         success: string;
+        warning: string;
         danger: string;
         outline: string;
     };
@@ -23,6 +25,7 @@ declare const badge: import('tailwind-variants').TVReturnType<{
         brand: string;
         action: string;
         success: string;
+        warning: string;
         danger: string;
         outline: string;
     };

package/dist/components/LpBadge.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpBadge-CXzBPnwO.js";
+import { _ as _sfc_main } from "../chunks/LpBadge-BPodVcJa.js";
 export {
   _sfc_main as default
 };

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

@@ -22,7 +22,14 @@ export interface InfraNodeData {
 type __VLS_Props = {
     data: InfraNodeData;
     selected?: boolean;
+    /** Extra/overriding role styles, merged over the defaults below. */
+    roles?: Record<string, InfraRoleStyle>;
 };
+export interface InfraRoleStyle {
+    /** CSS colour — normally a var() reference, e.g. var(--color-node-edge). */
+    color: string;
+    icon: string;
+}
 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/LpInfraNode.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpInfraNode-C_4cyGl9.js";
+import { _ as _sfc_main } from "../chunks/LpInfraNode-qIL3l7IO.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-HSGo1pcf.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-DWDEkmdA.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-JvMaaYsy.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-D3GGLSE7.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-BIYzk7e_.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-X14xMdPa.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTopologyCanvas.vue.js

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

package/dist/index.js

@@ -3,10 +3,10 @@ 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";
-import { _ as _5 } from "./chunks/LpAppShell-DGZv907S.js";
+import { _ as _5 } from "./chunks/LpAppShell-D8CAP9oF.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DIgXmtCA.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
-import { _ as _8 } from "./chunks/LpBadge-CXzBPnwO.js";
+import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
 import { _ as _9 } from "./chunks/LpBreadcrumbs-B7Aqatzw.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _11 } from "./chunks/LpCalendar-B7ZL0ty3.js";
@@ -26,14 +26,14 @@ import { _ as _23 } from "./chunks/LpFileTree-DWx77B1F.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
-import { _ as _26 } from "./chunks/LpInfraNode-C_4cyGl9.js";
+import { _ as _26 } from "./chunks/LpInfraNode-qIL3l7IO.js";
 import { _ as _27 } from "./chunks/LpInput-BauZRyzm.js";
 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-CF7G_0D_.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-HSGo1pcf.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-DWDEkmdA.js";
 import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
@@ -49,7 +49,7 @@ import { _ as _43 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _44 } from "./chunks/LpSelect-D5mU4cZO.js";
 import { _ as _45 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
 import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _46 } from "./chunks/LpSidebar-JvMaaYsy.js";
+import { _ as _46 } from "./chunks/LpSidebar-D3GGLSE7.js";
 import { _ as _47 } from "./chunks/LpSkeleton-eSFIo4kD.js";
 import { _ as _48 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _49 } from "./chunks/LpStat-CdbEFOvn.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-74i_pq4e.js";
+import { _ as _60 } from "./chunks/LpTopologyCanvas-BsJWyacK.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.4",
+  "version": "0.22.6",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpBadge.vue

@@ -10,6 +10,9 @@ const badge = tv({
       brand: "bg-brand-soft text-brand",
       action: "bg-action/15 text-action",
       success: "bg-action/15 text-action",
+      // Partial trouble, which every status surface eventually needs: without
+      // it a half-failed thing has to render as either fine or broken.
+      warning: "bg-accent/15 text-accent",
       danger: "bg-danger-soft text-danger",
       outline: "border border-line text-ink",
     },

package/src/components/LpInfraNode.vue

@@ -33,30 +33,59 @@ export interface InfraNodeData {
   dimmed?: boolean
 }
 
-const props = defineProps<{ data: InfraNodeData; selected?: boolean }>()
+const props = defineProps<{
+  data: InfraNodeData
+  selected?: boolean
+  /** Extra/overriding role styles, merged over the defaults below. */
+  roles?: Record<string, InfraRoleStyle>
+}>()
 
-const roleVar: Record<string, string> = {
-  hypervisor: "var(--color-accent)",
-  game: "var(--color-action)",
-  router: "var(--color-muted-strong)",
-  edge: "var(--color-brand)",
+/*
+ * Role → look. Colours are token references, never literals, so a theme (or a
+ * consumer) restyles the graph without forking this component; the glyph keeps
+ * the encoding readable without colour. `roles` overrides or extends the table
+ * for a fleet whose vocabulary differs — anything unmapped stays neutral rather
+ * than silently borrowing another role's meaning.
+ */
+export interface InfraRoleStyle {
+  /** CSS colour — normally a var() reference, e.g. var(--color-node-edge). */
+  color: string
+  icon: string
 }
-const accent = computed(() => roleVar[props.data.role] ?? "var(--color-line-strong)")
-const roleIcon: Record<string, string> = {
-  hypervisor: "▣",
-  game: "◈",
-  router: "⇄",
-  edge: "☁",
+const DEFAULT_ROLES: Record<string, InfraRoleStyle> = {
+  compute: { color: "var(--color-node-compute)", icon: "▣" },
+  host: { color: "var(--color-node-compute)", icon: "▣" },
+  worker: { color: "var(--color-node-compute)", icon: "◱" },
+  hypervisor: { color: "var(--color-node-compute)", icon: "▦" },
+  game: { color: "var(--color-node-compute)", icon: "◈" },
+  storage: { color: "var(--color-node-transit)", icon: "▤" },
+  database: { color: "var(--color-node-transit)", icon: "▤" },
+  router: { color: "var(--color-node-transit)", icon: "⇄" },
+  proxy: { color: "var(--color-node-transit)", icon: "⇅" },
+  edge: { color: "var(--color-node-edge)", icon: "☁" },
+  public: { color: "var(--color-node-edge)", icon: "◉" },
 }
-const icon = computed(() => roleIcon[props.data.role] ?? "●")
+const UNKNOWN_ROLE: InfraRoleStyle = { color: "var(--color-node-unknown)", icon: "●" }
+
+const role = computed<InfraRoleStyle>(
+  () => ({ ...DEFAULT_ROLES, ...(props.roles ?? {}) })[props.data.role] ?? UNKNOWN_ROLE,
+)
+const accent = computed(() => role.value.color)
+const icon = computed(() => role.value.icon)
+// A tinted edge rather than a grey one: with only the top stripe carrying the
+// role, a canvas of cards read as one undifferentiated grid.
+const accentLine = computed(
+  () => `color-mix(in srgb, ${accent.value} 35%, var(--color-line))`,
+)
 </script>
 
 <template>
   <div
     class="w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]"
-    :class="selected ? 'border-[var(--accent)]' : 'border-line'"
+    :class="selected ? 'border-[var(--accent)]' : 'border-[var(--accent-line)]'"
     :style="{
       '--accent': accent,
+      '--accent-line': accentLine,
       opacity: data.dimmed ? 0.3 : data.online === false ? 0.5 : 1,
       ...(selected
         ? { boxShadow: '0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)' }

package/src/tokens/tokens.css

@@ -46,6 +46,17 @@
   --color-line-strong: rgba(255, 255, 255, 0.18);
   --color-ring: rgba(0, 188, 255, 0.45);
 
+  /* ── color: infra roles ──────────────────────────
+     What a machine on a topology DOES, in three families: it runs work, it
+     carries traffic, or it is the way in from outside. Derived from the palette
+     above so a theme gets them for free, and named so a consumer whose fleet
+     doesn't split this way can repoint them without forking the component.
+     Anything unmapped falls back to --color-node-unknown. */
+  --color-node-compute: var(--color-action);
+  --color-node-transit: var(--color-accent);
+  --color-node-edge: var(--color-brand);
+  --color-node-unknown: var(--color-line-strong);
+
   /* ── shape ───────────────────────────────────── */
   --radius-control: 8px;
   --radius-card: 14px;