@leavepulse/ui 0.92.0 → 0.93.0

package/dist/assets/{LpTable-B3hNJQVl.css → LpTable-gpdZSVMX.css}

@@ -6,19 +6,28 @@
  * outside and only the dots between facts are seen. A cell whose slot drew
  * nothing (a v-if that failed, an empty value) is left out, dot and all.
  */
-.lp-line[data-v-62285817] {
+.lp-line[data-v-5ac91b9e] {
   --lp-line-sep: 1rem;
 }
-.lp-line-row[data-v-62285817] {
+.lp-line-row[data-v-5ac91b9e] {
   margin-left: calc(-1 * var(--lp-line-sep));
 }
-.lp-line-field[data-v-62285817]::before {
+
+/* The dot lives in the field's own left padding, so whatever the cell draws,
+   a word or a block of two lines, starts after it and never in the clipped
+   strip. */
+.lp-line-field[data-v-5ac91b9e] {
+  position: relative;
+  padding-left: var(--lp-line-sep);
+}
+.lp-line-field[data-v-5ac91b9e]::before {
   content: "·" / "";
-  display: inline-block;
+  position: absolute;
+  left: 0;
   width: var(--lp-line-sep);
   text-align: center;
 }
-.lp-line-field[data-v-62285817]:has(> .lp-line-value:empty) {
+.lp-line-field[data-v-5ac91b9e]:has(> .lp-line-value:empty) {
   display: none;
 }
 
@@ -34,17 +43,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-62285817],
-.lp-row-leave-active[data-v-62285817] {
+.lp-row-enter-active[data-v-5ac91b9e],
+.lp-row-leave-active[data-v-5ac91b9e] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-62285817] {
+.lp-row-move[data-v-5ac91b9e] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-62285817],
-.lp-row-leave-to[data-v-62285817] {
+.lp-row-enter-from[data-v-5ac91b9e],
+.lp-row-leave-to[data-v-5ac91b9e] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -58,7 +67,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-62285817] {
+.lp-row-empty.lp-row-leave-active[data-v-5ac91b9e] {
   display: none;
 }
 
@@ -77,7 +86,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-62285817] {
+.lp-tick[data-v-5ac91b9e] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -89,17 +98,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-62285817] {
+.lp-tick-open[data-v-5ac91b9e] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-62285817],
-.lp-tick-cue[data-v-62285817] {
+.lp-tick-hidden[data-v-5ac91b9e],
+.lp-tick-cue[data-v-5ac91b9e] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-62285817],
-.lp-tick-cue[data-v-62285817]:focus-within {
+tr:hover .lp-tick-cue[data-v-5ac91b9e],
+.lp-tick-cue[data-v-5ac91b9e]:focus-within {
   opacity: 1;
 }
 
@@ -107,15 +116,15 @@ tr:hover .lp-tick-cue[data-v-62285817],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-62285817] {
+tr:hover .lp-tick-cue[data-v-5ac91b9e] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-62285817],
-  .lp-tick-cue[data-v-62285817] {
+.lp-tick-hidden[data-v-5ac91b9e],
+  .lp-tick-cue[data-v-5ac91b9e] {
     max-width: 0;
     padding-inline: 0;
 }
@@ -125,7 +134,7 @@ tr:hover .lp-tick-cue[data-v-62285817] {
  * A list line's tick opens from nothing, as the table's column does, so lines
  * do not carry an empty gap until selection starts.
  */
-.lp-tick-line[data-v-62285817] {
+.lp-tick-line[data-v-5ac91b9e] {
   max-width: 2rem;
   opacity: 1;
 }
@@ -135,28 +144,28 @@ tr:hover .lp-tick-cue[data-v-62285817] {
  * open; a cue shows it only while
  * the card is pointed at or holds focus, the same rule as a row's.
  */
-.lp-tick-card[data-v-62285817] {
+.lp-tick-card[data-v-5ac91b9e] {
   max-width: none;
   padding-inline: 0;
   opacity: 1;
 }
-.lp-tick[data-cue][data-v-62285817] {
+.lp-tick[data-cue][data-v-5ac91b9e] {
   opacity: 0;
 }
-.lp-item:hover .lp-tick[data-cue][data-v-62285817],
-.lp-tick[data-cue][data-v-62285817]:focus-within {
+.lp-item:hover .lp-tick[data-cue][data-v-5ac91b9e],
+.lp-tick[data-cue][data-v-5ac91b9e]:focus-within {
   opacity: 1;
 }
 @media (hover: none) {
-.lp-item:hover .lp-tick[data-cue][data-v-62285817] {
+.lp-item:hover .lp-tick[data-cue][data-v-5ac91b9e] {
     opacity: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-62285817],
-  .lp-row-leave-active[data-v-62285817],
-  .lp-row-move[data-v-62285817],
-  .lp-tick[data-v-62285817] {
+.lp-row-enter-active[data-v-5ac91b9e],
+  .lp-row-leave-active[data-v-5ac91b9e],
+  .lp-row-move[data-v-5ac91b9e],
+  .lp-tick[data-v-5ac91b9e] {
     transition: none;
 }
 }

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/LpTable.vue.js

@@ -34,7 +34,7 @@ import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { toHiddenSets, sameHidden, summarizeShown, parseTableState, mergeRestored, serializeTableState, fromHiddenSets } from "./tableFilter.js";
 import { resolveRowMenu } from "./tableRowMenu.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-B3hNJQVl.css';const _hoisted_1 = {
+import '../assets/LpTable-gpdZSVMX.css';const _hoisted_1 = {
   key: 0,
   class: "flex min-h-8 flex-wrap items-center gap-x-3 gap-y-2 pb-3 text-xs"
 };
@@ -1898,7 +1898,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-62285817"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5ac91b9e"]]);
 export {
   LpTable as default
 };

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.0",
+  "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)]">

package/src/components/LpTable.vue

@@ -2444,9 +2444,18 @@ usePaletteCommands(() => {
   margin-left: calc(-1 * var(--lp-line-sep));
 }
 
+/* The dot lives in the field's own left padding, so whatever the cell draws,
+   a word or a block of two lines, starts after it and never in the clipped
+   strip. */
+.lp-line-field {
+  position: relative;
+  padding-left: var(--lp-line-sep);
+}
+
 .lp-line-field::before {
   content: "·" / "";
-  display: inline-block;
+  position: absolute;
+  left: 0;
   width: var(--lp-line-sep);
   text-align: center;
 }