ink-hud 0.1.1 → 0.1.3

package/README.md

@@ -189,6 +189,23 @@ Real-time scrolling log display with syntax highlighting.
 />
 ```
 
+#### PulseBar
+Heartbeat-style connection status history.
+
+![PulseBar](./docs/images/pulsebar.png)
+
+```tsx
+<PulseBar 
+    records={[
+        { status: 'good' },
+        { status: 'unstable' },
+        { status: 'bad' },
+    ]}
+    maxBars={30}
+    variant="unicode"
+/>
+```
+
 ### Layout Components
 
 #### Panel
@@ -250,6 +267,7 @@ pnpm install
 npx tsx examples/dashboard.tsx
 
 # Run individual components
+npx tsx examples/basic/pulsebar.tsx
 npx tsx examples/basic/linechart.tsx
 npx tsx examples/basic/piechart.tsx
 npx tsx examples/basic/table.tsx

package/dist/index.cjs

@@ -3015,6 +3015,51 @@ var Table = ({
     })
   );
 };
+var CHAR_SETS3 = {
+  unicode: {
+    bar: "\u258C",
+    left: "\u256D",
+    right: "\u256E",
+    leftBottom: "\u2570",
+    rightBottom: "\u256F",
+    horizontal: "\u2500",
+    vertical: "\u2502"
+  },
+  ascii: {
+    bar: "|",
+    left: "/",
+    right: "\\",
+    leftBottom: "\\",
+    rightBottom: "/",
+    horizontal: "-",
+    vertical: "|"
+  }
+};
+var PulseBar = ({
+  records = [],
+  maxBars = 30,
+  variant = "unicode",
+  colors
+}) => {
+  const theme = useTheme();
+  const chars = CHAR_SETS3[variant];
+  const getColor = (status) => {
+    switch (status) {
+      case "good":
+        return colors?.good ?? theme.semantic.success;
+      case "unstable":
+        return colors?.unstable ?? theme.semantic.warning;
+      case "bad":
+        return colors?.bad ?? theme.semantic.error;
+    }
+  };
+  const displayRecords = records.slice(-maxBars);
+  const paddingCount = maxBars - displayRecords.length;
+  const borderColor = theme.semantic.muted;
+  const topBorder = chars.left + chars.horizontal.repeat(maxBars) + chars.right;
+  const bottomBorder = chars.leftBottom + chars.horizontal.repeat(maxBars) + chars.rightBottom;
+  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, topBorder), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, chars.vertical), paddingCount > 0 && /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, chars.bar.repeat(paddingCount)), displayRecords.map((record, index) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: index, color: getColor(record.status) }, chars.bar)), /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, chars.vertical)), /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, bottomBorder));
+};
 
 exports.AreaChart = AreaChart;
 exports.AsciiRenderer = AsciiRenderer;
@@ -3034,6 +3079,7 @@ exports.LogStream = LogStream;
 exports.ONE_DARK_THEME = ONE_DARK_THEME;
 exports.Panel = Panel;
 exports.PieChart = PieChart;
+exports.PulseBar = PulseBar;
 exports.Renderer = Renderer;
 exports.RendererSelector = RendererSelector;
 exports.Sparkline = Sparkline;