@leavepulse/ui 0.22.4 → 0.22.5

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/{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/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/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

@@ -26,7 +26,7 @@ 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";
@@ -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.5",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

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;