@leavepulse/ui 0.92.1 → 0.93.0

package/dist/chunks/{LpInfraNode-BYiMFDnA.js → LpInfraNode-tD5x5YOy.js}

@@ -2,6 +2,8 @@ import { defineComponent, computed, openBlock, createElementBlock, normalizeStyl
 import { Handle, Position } from "@vue-flow/core";
 import { _ as _sfc_main$2 } from "./LpBadge-Bh5roBr_.js";
 import { _ as _sfc_main$1 } from "./LpStatus-C6GqSHJj.js";
+import { TONE_COLOR } from "../components/meter.js";
+import { STATUS_LOOK } from "../components/status.js";
 const _hoisted_1 = { class: "px-[11px] pb-2.5 pt-[9px]" };
 const _hoisted_2 = { class: "flex items-center gap-[7px]" };
 const _hoisted_3 = { class: "text-[13px] text-[var(--accent)]" };
@@ -74,15 +76,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const accentLine = computed(
       () => `color-mix(in srgb, ${accent.value} 35%, var(--color-line))`
     );
+    const state = computed(
+      () => props.data.status ?? (props.data.online === void 0 ? void 0 : props.data.online ? "online" : "down")
+    );
+    const troubled = computed(() => state.value !== void 0 && state.value !== "online");
+    const lost = computed(() => state.value === "down" || state.value === "offline");
+    const stateColor = computed(
+      () => state.value ? `color-mix(in srgb, ${TONE_COLOR[STATUS_LOOK[state.value].tone]} 50%, transparent)` : void 0
+    );
     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)]" : __props.data.online === false ? "border-dashed border-danger/50" : "border-[var(--accent-line)]"
+        class: normalizeClass(["w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow,opacity] duration-medium ease-[var(--ease-emphasized)]", [
+          __props.selected ? "border-[var(--accent)]" : troubled.value ? "border-[var(--state-line)]" : "border-[var(--accent-line)]",
+          !__props.selected && lost.value ? "border-dashed" : ""
         ]]),
         style: normalizeStyle({
           "--accent": accent.value,
           "--accent-line": accentLine.value,
-          opacity: __props.data.dimmed ? 0.3 : __props.data.online === false ? 0.75 : 1,
+          "--state-line": stateColor.value,
+          opacity: __props.data.dimmed ? 0.3 : lost.value ? 0.75 : 1,
           ...__props.selected ? { boxShadow: "0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)" } : {}
         })
       }, [
@@ -97,18 +109,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           class: "!size-2 !border-2 !border-[var(--accent)] !bg-surface"
         }, null, 8, ["position"]),
         createElementVNode("div", {
-          class: normalizeClass(["h-[3px]", __props.data.online === false ? "bg-danger/50" : "bg-[var(--accent)]"])
+          class: normalizeClass(["h-[3px] transition-[background-color] duration-medium ease-[var(--ease-emphasized)]", troubled.value ? "bg-[var(--state-line)]" : "bg-[var(--accent)]"])
         }, null, 2),
         createElementVNode("div", _hoisted_1, [
           createElementVNode("div", _hoisted_2, [
             createElementVNode("span", _hoisted_3, toDisplayString(icon.value), 1),
             createElementVNode("span", _hoisted_4, toDisplayString(__props.data.name), 1),
-            __props.data.online !== void 0 ? (openBlock(), createBlock(_sfc_main$1, {
+            state.value ? (openBlock(), createBlock(_sfc_main$1, {
               key: 0,
-              state: __props.data.online ? "online" : "down",
-              pulse: __props.data.online,
+              state: state.value,
               "hide-label": ""
-            }, null, 8, ["state", "pulse"])) : createCommentVNode("", true)
+            }, null, 8, ["state"])) : createCommentVNode("", true)
           ]),
           createElementVNode("div", _hoisted_5, [
             createElementVNode("span", _hoisted_6, toDisplayString(__props.data.roleLabel ?? __props.data.role), 1),

package/dist/chunks/{LpTopologyCanvas-CQ0l6A5h.js → LpTopologyCanvas-B1YFfMaq.js}

@@ -10,7 +10,7 @@ import { nodeWindow, isHTMLElement } from "../composables/realm.js";
 import { backgroundOf, resolveCssColor, svgToPng } from "../components/exportData.js";
 import { _ as _sfc_main$6 } from "./LpButton-BvVoF-PO.js";
 import { _ as _sfc_main$7 } from "./LpIcon-CxHFPwKt.js";
-import { _ as _sfc_main$3 } from "./LpInfraNode-BYiMFDnA.js";
+import { _ as _sfc_main$3 } from "./LpInfraNode-tD5x5YOy.js";
 import { _ as _sfc_main$5 } from "./LpInput-DGMpxrcg.js";
 import { _ as _sfc_main$1 } from "./LpLaneNode-Bqcdm8Rf.js";
 import { _ as _sfc_main$2 } from "./LpServiceNode-Cln2ntdw.js";

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

@@ -8,6 +8,7 @@
  * component doesn't reach apps that only import the kit's token css.
  */
 import { type NodeProps } from "@vue-flow/core";
+import { type StatusKind } from "./status";
 export interface InfraNodeData {
     name: string;
     /** Role key: selects the colour/glyph, and shown as-is unless `roleLabel`. */
@@ -18,7 +19,15 @@ export interface InfraNodeData {
      */
     roleLabel?: string;
     overlay?: string;
+    /** Up or down. Superseded by `status` when that is set. */
     online?: boolean;
+    /**
+     * The node's state in the kit's status words, for a fleet that knows more
+     * than up and down: a box that serves but takes no instruction, one merely
+     * unreachable, one starting. Drawn with LpStatus's light and tone; only
+     * `down` and `offline` take the dashed, faded frame of a lost machine.
+     */
+    status?: StatusKind;
     kind?: string;
     project?: string;
     /** Control-plane firewall rule count on this host (badge when > 0). */

package/dist/components/LpInfraNode.vue.js

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

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

@@ -14,7 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     /** Always show the CSS still, never start WebGL: for a low-power mode or a screenshot. */
     still?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    fallback: (reason: "compile" | "unavailable" | "slow" | "lost") => any;
+    fallback: (reason: "compile" | "unavailable" | "lost" | "slow") => any;
 }, string, import("vue").PublicProps, Readonly<{
     preset?: ShaderPreset;
     /** How strongly the theme colours show over the surface, 0–1. Lower for a backdrop under body text. */
@@ -28,7 +28,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     /** Always show the CSS still, never start WebGL: for a low-power mode or a screenshot. */
     still?: boolean;
 }> & Readonly<{
-    onFallback?: ((reason: "compile" | "unavailable" | "slow" | "lost") => any) | undefined;
+    onFallback?: ((reason: "compile" | "unavailable" | "lost" | "slow") => any) | undefined;
 }>, {
     speed: number;
     paused: boolean;

package/dist/components/LpTopologyCanvas.vue.js

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

package/dist/index.js

@@ -54,7 +54,7 @@ import { _ as _31 } from "./chunks/LpFormField-jbM7K1Hg.js";
 import { _ as _32 } from "./chunks/LpIcon-CxHFPwKt.js";
 import { i, b, a, c } from "./chunks/icons-C8ccRCKw.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
-import { _ as _33 } from "./chunks/LpInfraNode-BYiMFDnA.js";
+import { _ as _33 } from "./chunks/LpInfraNode-tD5x5YOy.js";
 import { _ as _34 } from "./chunks/LpInput-DGMpxrcg.js";
 import { _ as _35 } from "./chunks/LpLightbox-a24V_0Wk.js";
 import { fileNameOf, isVideoItem } from "./components/lightbox.js";
@@ -131,7 +131,7 @@ import { _ as _87 } from "./chunks/LpHintLayer-nuMqfzvy.js";
 import { _ as _88 } from "./chunks/LpHints-ByAd3a76.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _89 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _90 } from "./chunks/LpTopologyCanvas-CQ0l6A5h.js";
+import { _ as _90 } from "./chunks/LpTopologyCanvas-B1YFfMaq.js";
 import { clusterGraph, diffTopology, findPath, layeredLayout, neighborhood, topologyToSvg } from "./components/topologyGraph.js";
 import { _ as _91 } from "./chunks/LpUptimeBar-Dt6SY_-m.js";
 import { addLeaf, addTab, countBlocks, countLeaves, deserializeLayout, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, serializeLayout, setActiveTab } from "./layout/tree.js";

package/package.json

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

package/src/components/LpInfraNode.vue

@@ -12,6 +12,8 @@ import { Handle, Position, type NodeProps } from "@vue-flow/core"
 import { computed } from "vue"
 import LpBadge from "./LpBadge.vue"
 import LpStatus from "./LpStatus.vue"
+import { TONE_COLOR } from "./meter"
+import { STATUS_LOOK, type StatusKind } from "./status"
 
 export interface InfraNodeData {
   name: string
@@ -23,7 +25,15 @@ export interface InfraNodeData {
    */
   roleLabel?: string
   overlay?: string
+  /** Up or down. Superseded by `status` when that is set. */
   online?: boolean
+  /**
+   * The node's state in the kit's status words, for a fleet that knows more
+   * than up and down: a box that serves but takes no instruction, one merely
+   * unreachable, one starting. Drawn with LpStatus's light and tone; only
+   * `down` and `offline` take the dashed, faded frame of a lost machine.
+   */
+  status?: StatusKind
   kind?: string
   project?: string
   /** Control-plane firewall rule count on this host (badge when > 0). */
@@ -126,6 +136,18 @@ const icon = computed(() => role.value.icon)
 const accentLine = computed(
   () => `color-mix(in srgb, ${accent.value} 35%, var(--color-line))`,
 )
+
+/** `status` when given, else the old up/down flag read as a status. */
+const state = computed<StatusKind | undefined>(
+  () => props.data.status ?? (props.data.online === undefined ? undefined : props.data.online ? "online" : "down"),
+)
+/** A state other than healthy takes the frame and the role bar in its own tone. */
+const troubled = computed(() => state.value !== undefined && state.value !== "online")
+/** No contact at all: dashed and faded, the way a lost machine has always looked. */
+const lost = computed(() => state.value === "down" || state.value === "offline")
+const stateColor = computed(() =>
+  state.value ? `color-mix(in srgb, ${TONE_COLOR[STATUS_LOOK[state.value].tone]} 50%, transparent)` : undefined,
+)
 </script>
 
 <template>
@@ -139,18 +161,16 @@ const accentLine = computed(
     signals on a node agree instead of arguing.
   -->
   <div
-    class="w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow]"
+    class="w-[168px] overflow-hidden rounded-card border bg-surface-raised shadow-panel transition-[border-color,box-shadow,opacity] duration-medium ease-[var(--ease-emphasized)]"
     :class="[
-      selected
-        ? 'border-[var(--accent)]'
-        : data.online === false
-          ? 'border-dashed border-danger/50'
-          : 'border-[var(--accent-line)]',
+      selected ? 'border-[var(--accent)]' : troubled ? 'border-[var(--state-line)]' : 'border-[var(--accent-line)]',
+      !selected && lost ? 'border-dashed' : '',
     ]"
     :style="{
       '--accent': accent,
       '--accent-line': accentLine,
-      opacity: data.dimmed ? 0.3 : data.online === false ? 0.75 : 1,
+      '--state-line': stateColor,
+      opacity: data.dimmed ? 0.3 : lost ? 0.75 : 1,
       ...(selected
         ? { boxShadow: '0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow-panel)' }
         : {}),
@@ -167,23 +187,18 @@ const accentLine = computed(
       class="!size-2 !border-2 !border-[var(--accent)] !bg-surface"
     />
 
-    <!-- The role bar reads as "this node is alive and is a proxy"; on an
-         offline host it must not keep asserting the first half. -->
+    <!-- The role bar reads as "this node is alive and is a proxy"; on a host
+         in trouble it must not keep asserting the first half. -->
     <div
-      class="h-[3px]"
-      :class="data.online === false ? 'bg-danger/50' : 'bg-[var(--accent)]'"
+      class="h-[3px] transition-[background-color] duration-medium ease-[var(--ease-emphasized)]"
+      :class="troubled ? 'bg-[var(--state-line)]' : 'bg-[var(--accent)]'"
     />
     <div class="px-[11px] pb-2.5 pt-[9px]">
       <div class="flex items-center gap-[7px]">
         <span class="text-[13px] text-[var(--accent)]">{{ icon }}</span>
         <span class="flex-1 truncate text-[13px] font-semibold text-ink">{{ data.name }}</span>
-        <!-- The kit's status light: a live host breathes, a lost one is a steady red. -->
-        <LpStatus
-          v-if="data.online !== undefined"
-          :state="data.online ? 'online' : 'down'"
-          :pulse="data.online"
-          hide-label
-        />
+        <!-- The kit's status light, with LpStatus's own tone and pulse for each state. -->
+        <LpStatus v-if="state" :state="state" hide-label />
       </div>
       <div class="mt-1.5 flex items-center justify-between">
         <span class="text-[10px] font-semibold uppercase tracking-wide text-[var(--accent)]">