@zendir/ui 0.1.0

package/dist/react/core/PacketViewer.js

@@ -0,0 +1,431 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { memo, useState, useMemo, useCallback } from "react";
+import { useTheme } from "../theme/ThemeProvider.js";
+function getLimitsColor(state, tokens) {
+  switch (state) {
+    case "RED":
+    case "RED_LOW":
+    case "RED_HIGH":
+      return tokens.colors.status.critical;
+    case "YELLOW":
+    case "YELLOW_LOW":
+    case "YELLOW_HIGH":
+      return tokens.colors.status.caution;
+    case "GREEN":
+      return tokens.colors.status.normal;
+    case "BLUE":
+      return tokens.colors.status.standby;
+    case "STALE":
+      return tokens.colors.status.off;
+    default:
+      return tokens.colors.text.primary;
+  }
+}
+function getLimitsBg(state, tokens) {
+  const color = getLimitsColor(state, tokens);
+  return state ? `${color}18` : "transparent";
+}
+function getLimitsShapeStyle(state, color) {
+  const base = {
+    width: 8,
+    height: 8,
+    display: "inline-block",
+    background: color,
+    boxShadow: `0 0 4px ${color}66`
+  };
+  switch (state) {
+    case "GREEN":
+      return { ...base, borderRadius: "50%" };
+    case "YELLOW":
+    case "YELLOW_LOW":
+    case "YELLOW_HIGH":
+      return { ...base, borderRadius: "1px" };
+    case "RED":
+    case "RED_LOW":
+    case "RED_HIGH":
+      return {
+        ...base,
+        borderRadius: 0,
+        // critical → triangle down
+        clipPath: "polygon(50% 100%, 0% 0%, 100% 0%)"
+      };
+    case "BLUE":
+      return {
+        ...base,
+        borderRadius: "50%",
+        width: 6,
+        height: 6,
+        // standby → hollow ring
+        background: "transparent",
+        border: `2px solid ${color}`,
+        boxShadow: "none"
+      };
+    case "STALE":
+      return {
+        ...base,
+        borderRadius: "50%",
+        width: 5,
+        height: 5,
+        // off → small dot
+        opacity: 0.6
+      };
+    default:
+      return { ...base, borderRadius: "50%" };
+  }
+}
+function getDisplayValue(item, mode) {
+  switch (mode) {
+    case "raw":
+      return String(item.value);
+    case "converted":
+      return String(item.convertedValue ?? item.value);
+    case "formatted":
+      return item.formattedValue ?? String(item.convertedValue ?? item.value);
+    case "with_units": {
+      const val = item.formattedValue ?? String(item.convertedValue ?? item.value);
+      return item.units ? `${val} ${item.units}` : val;
+    }
+  }
+}
+const PacketViewer = memo(function PacketViewer2({
+  target,
+  packet,
+  items,
+  viewMode: initialViewMode = "converted",
+  height = 500,
+  derivedLast = true,
+  showSearch = true,
+  showViewMode = true,
+  compact = false,
+  onItemClick,
+  className = "",
+  bordered = true,
+  style: styleProp
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const [searchQuery, setSearchQuery] = useState("");
+  const [viewMode, setViewMode] = useState(initialViewMode);
+  const [selectedItem, setSelectedItem] = useState(null);
+  const [showDetails, setShowDetails] = useState(false);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(240);
+  const listRef = React.useRef(null);
+  const sortedItems = useMemo(() => {
+    let filtered = items;
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      filtered = items.filter((i) => i.name.toLowerCase().includes(q) || i.description && i.description.toLowerCase().includes(q));
+    }
+    if (derivedLast) {
+      const regular = filtered.filter((i) => !i.derived);
+      const derived = filtered.filter((i) => i.derived);
+      return [...regular, ...derived];
+    }
+    return filtered;
+  }, [items, searchQuery, derivedLast]);
+  const handleItemClick = useCallback((item) => {
+    setSelectedItem(item);
+    setShowDetails(true);
+    onItemClick == null ? void 0 : onItemClick(item);
+  }, [onItemClick]);
+  const rowHeight = compact ? 26 : 32;
+  const overscanRows = 12;
+  const totalRows = sortedItems.length;
+  const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - overscanRows);
+  const visibleRows = Math.ceil(viewportHeight / rowHeight) + overscanRows * 2;
+  const endRow = Math.min(totalRows, startRow + visibleRows);
+  const visibleItems = useMemo(
+    () => sortedItems.slice(startRow, endRow),
+    [sortedItems, startRow, endRow]
+  );
+  React.useEffect(() => {
+    const el = listRef.current;
+    if (!el) return void 0;
+    const updateHeight = () => setViewportHeight(Math.max(rowHeight * 4, el.clientHeight || 240));
+    updateHeight();
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(updateHeight);
+      observer.observe(el);
+      return () => observer.disconnect();
+    }
+    window.addEventListener("resize", updateHeight);
+    return () => window.removeEventListener("resize", updateHeight);
+  }, [rowHeight]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `packet-viewer ${className}`,
+      style: {
+        height: typeof height === "number" ? height : void 0,
+        background: tokens.colors.background.base,
+        ...bordered ? tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` } : { border: "none" },
+        borderRadius: tokens.borderRadius.lg,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: tokens.typography.fontFamily.primary,
+        color: tokens.colors.text.primary,
+        backdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+        WebkitBackdropFilter: isTransparentTheme ? "blur(10px)" : void 0,
+        ...styleProp
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          padding: "8px 12px",
+          borderBottom: `1px solid ${tokens.colors.border.muted}`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          background: tokens.colors.background.surface,
+          backdropFilter: "blur(8px)",
+          flexWrap: "wrap",
+          gap: 8
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            target && /* @__PURE__ */ jsx("span", { style: {
+              background: `${tokens.colors.interactive.default}22`,
+              color: tokens.colors.interactive.default,
+              padding: "2px 8px",
+              borderRadius: tokens.borderRadius.md,
+              fontSize: tokens.typography.fontSize.xxs,
+              fontWeight: 600
+            }, children: target }),
+            packet && /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: tokens.typography.fontSize.sm }, children: packet }),
+            /* @__PURE__ */ jsxs("span", { style: { fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted }, children: [
+              sortedItems.length,
+              " items"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+            showViewMode && /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: viewMode,
+                onChange: (e) => setViewMode(e.target.value),
+                "aria-label": "Packet view mode",
+                style: {
+                  background: tokens.colors.background.base,
+                  color: tokens.colors.text.primary,
+                  border: `1px solid ${tokens.colors.border.muted}`,
+                  borderRadius: tokens.borderRadius.md,
+                  padding: "3px 8px",
+                  fontSize: tokens.typography.fontSize.xxs
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "raw", children: "Raw" }),
+                  /* @__PURE__ */ jsx("option", { value: "converted", children: "Converted" }),
+                  /* @__PURE__ */ jsx("option", { value: "formatted", children: "Formatted" }),
+                  /* @__PURE__ */ jsx("option", { value: "with_units", children: "With Units" })
+                ]
+              }
+            ),
+            showSearch && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                placeholder: "Filter items...",
+                "aria-label": "Filter packet items",
+                style: {
+                  background: tokens.colors.background.base,
+                  color: tokens.colors.text.primary,
+                  border: `1px solid ${tokens.colors.border.muted}`,
+                  borderRadius: tokens.borderRadius.md,
+                  padding: "3px 8px",
+                  fontSize: tokens.typography.fontSize.xxs,
+                  outline: "none",
+                  minWidth: 120
+                }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { role: "row", style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr auto",
+          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,
+          borderBottom: `1px solid ${tokens.colors.border.muted}`,
+          background: tokens.colors.background.surface,
+          fontSize: tokens.typography.fontSize.xxs,
+          color: tokens.colors.text.muted,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px",
+          fontWeight: tokens.typography.fontWeight.medium
+        }, children: [
+          /* @__PURE__ */ jsx("span", { role: "columnheader", children: "Item" }),
+          /* @__PURE__ */ jsx("span", { role: "columnheader", style: { textAlign: "right" }, children: "Value" }),
+          /* @__PURE__ */ jsx("span", { role: "columnheader", style: { minWidth: 50, textAlign: "center" }, children: "Limits" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            role: "rowgroup",
+            onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+            style: { flex: 1, overflow: "auto" },
+            children: /* @__PURE__ */ jsx("div", { style: { height: totalRows * rowHeight, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: startRow * rowHeight, left: 0, right: 0 }, children: visibleItems.map((item, visibleIdx) => {
+              var _a, _b, _c, _d;
+              const idx = startRow + visibleIdx;
+              const limitsColor = item.stale ? tokens.colors.status.off : getLimitsColor(((_a = item.limits) == null ? void 0 : _a.state) ?? null, tokens);
+              const limitsBg = item.stale ? `${tokens.colors.status.off}14` : getLimitsBg(((_b = item.limits) == null ? void 0 : _b.state) ?? null, tokens);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "row",
+                  tabIndex: 0,
+                  onClick: () => handleItemClick(item),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleItemClick(item);
+                    }
+                  },
+                  "aria-label": `${item.name}: ${getDisplayValue(item, viewMode)}${((_c = item.limits) == null ? void 0 : _c.state) ? `, ${item.limits.state}` : ""}`,
+                  style: {
+                    display: "grid",
+                    gridTemplateColumns: "1fr 1fr auto",
+                    padding: `0 ${tokens.spacing.smd}`,
+                    height: rowHeight,
+                    alignItems: "center",
+                    borderBottom: `1px solid ${tokens.colors.border.muted}`,
+                    cursor: "pointer",
+                    transition: "background 150ms ease",
+                    background: item.derived ? `${tokens.colors.background.surface}44` : "transparent"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.background = tokens.colors.background.surface;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.background = item.derived ? `${tokens.colors.background.surface}44` : "transparent";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: {
+                      fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,
+                      fontWeight: 500,
+                      color: item.derived ? tokens.colors.text.muted : tokens.colors.text.primary,
+                      fontStyle: item.derived ? "italic" : "normal",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    }, children: item.name }),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      textAlign: "right",
+                      fontFamily: tokens.typography.fontFamily.mono,
+                      fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,
+                      fontWeight: 600,
+                      color: limitsColor,
+                      background: limitsBg,
+                      padding: "2px 8px",
+                      borderRadius: tokens.borderRadius.sm,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap"
+                    }, children: getDisplayValue(item, viewMode) }),
+                    /* @__PURE__ */ jsx("div", { style: { minWidth: 50, display: "flex", justifyContent: "center" }, children: ((_d = item.limits) == null ? void 0 : _d.state) && /* @__PURE__ */ jsxs("div", { style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 3
+                    }, children: [
+                      /* @__PURE__ */ jsx("span", { style: getLimitsShapeStyle(item.limits.state, limitsColor) }),
+                      /* @__PURE__ */ jsx("span", { style: { fontSize: tokens.typography.fontSize.micro, color: limitsColor, fontWeight: 600 }, children: item.limits.state.replace(/_/g, " ") })
+                    ] }) })
+                  ]
+                },
+                item.name + idx
+              );
+            }) }) })
+          }
+        ),
+        showDetails && selectedItem && /* @__PURE__ */ jsxs("div", { style: {
+          borderTop: `1px solid ${tokens.colors.border.muted}`,
+          background: tokens.colors.background.surface,
+          padding: 12,
+          maxHeight: 200,
+          overflow: "auto"
+        }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: tokens.spacing.sm }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: tokens.typography.fontWeight.bold, fontSize: tokens.typography.fontSize.sm }, children: selectedItem.name }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setShowDetails(false),
+                "aria-label": "Close details panel",
+                style: { background: "none", border: "none", color: tokens.colors.text.muted, cursor: "pointer", fontSize: tokens.typography.fontSize.lg, padding: tokens.spacing.xs, lineHeight: 1 },
+                children: "✕"
+              }
+            )
+          ] }),
+          selectedItem.description && /* @__PURE__ */ jsx("p", { style: { color: tokens.colors.text.secondary, fontSize: tokens.typography.fontSize.xs, marginBottom: 8 }, children: selectedItem.description }),
+          /* @__PURE__ */ jsxs("div", { style: {
+            display: "grid",
+            gridTemplateColumns: "auto 1fr",
+            gap: "4px 12px",
+            fontSize: tokens.typography.fontSize.xxs,
+            fontFamily: tokens.typography.fontFamily.mono
+          }, children: [
+            /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Raw:" }),
+            /* @__PURE__ */ jsx("span", { children: String(selectedItem.value) }),
+            selectedItem.convertedValue !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Converted:" }),
+              /* @__PURE__ */ jsx("span", { children: String(selectedItem.convertedValue) })
+            ] }),
+            selectedItem.units && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Units:" }),
+              /* @__PURE__ */ jsx("span", { children: selectedItem.units })
+            ] }),
+            selectedItem.dataType && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Type:" }),
+              /* @__PURE__ */ jsx("span", { children: selectedItem.dataType })
+            ] }),
+            selectedItem.bitSize !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Bit Size:" }),
+              /* @__PURE__ */ jsx("span", { children: selectedItem.bitSize })
+            ] }),
+            selectedItem.bitOffset !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Bit Offset:" }),
+              /* @__PURE__ */ jsx("span", { children: selectedItem.bitOffset })
+            ] }),
+            selectedItem.conversion && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Conversion:" }),
+              /* @__PURE__ */ jsx("span", { children: selectedItem.conversion })
+            ] }),
+            selectedItem.limits && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Limits State:" }),
+              /* @__PURE__ */ jsx("span", { style: { color: getLimitsColor(selectedItem.limits.state, tokens) }, children: selectedItem.limits.state }),
+              selectedItem.limits.redLow !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Red Low:" }),
+                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.redLow })
+              ] }),
+              selectedItem.limits.yellowLow !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Yellow Low:" }),
+                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.yellowLow })
+              ] }),
+              selectedItem.limits.greenHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Green High:" }),
+                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.greenHigh })
+              ] }),
+              selectedItem.limits.yellowHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Yellow High:" }),
+                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.yellowHigh })
+              ] }),
+              selectedItem.limits.redHigh !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "Red High:" }),
+                /* @__PURE__ */ jsx("span", { children: selectedItem.limits.redHigh })
+              ] })
+            ] }),
+            selectedItem.states && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.muted }, children: "States:" }),
+              /* @__PURE__ */ jsx("span", { children: Object.entries(selectedItem.states).map(([k, v]) => `${k}=${v}`).join(", ") })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  PacketViewer
+};
+//# sourceMappingURL=PacketViewer.js.map

package/dist/react/core/PacketViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PacketViewer.js","sources":["../../../src/react/core/PacketViewer.tsx"],"sourcesContent":["/**\n * @zendir/ui - PacketViewer Component\n * \n * Live telemetry packet viewer for spacecraft data analysis and monitoring.\n * Displays telemetry items with limits coloring, raw/converted/formatted views,\n * item details, and search filtering.\n * \n * Features:\n * - Table of telemetry items with name, value, limits status\n * - Limits coloring (blue, green, yellow, red) on values\n * - View modes: raw, converted, formatted, with-units\n * - Item search/filter\n * - Item details on click (type, conversion, limits, description)\n * - Stale data detection\n * - Configurable refresh rate display\n * - Compact mode for high-density displays\n * \n * @example\n * ```tsx\n * <PacketViewer\n *   target=\"INST\"\n *   packet=\"HEALTH_STATUS\"\n *   items={[\n *     { name: 'TEMP1', value: 72.5, limits: { state: 'GREEN', redLow: 0, yellowLow: 20, greenLow: 40, greenHigh: 80, yellowHigh: 90, redHigh: 100 } },\n *     { name: 'VOLTAGE', value: 28.1, units: 'V' },\n *   ]}\n * />\n * ```\n */\n\nimport React, { useState, useMemo, useCallback, memo } from 'react';\nimport { useTheme } from '../theme';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type PacketItemLimitsState = 'BLUE' | 'GREEN' | 'YELLOW' | 'YELLOW_LOW' | 'YELLOW_HIGH' | 'RED' | 'RED_LOW' | 'RED_HIGH' | 'STALE' | null;\nexport type PacketViewMode = 'raw' | 'converted' | 'formatted' | 'with_units';\n\nexport interface PacketItemLimits {\n  state: PacketItemLimitsState;\n  redLow?: number;\n  yellowLow?: number;\n  greenLow?: number;\n  greenHigh?: number;\n  yellowHigh?: number;\n  redHigh?: number;\n}\n\nexport interface PacketItem {\n  /** Item name (e.g., TEMP1, VOLTAGE) */\n  name: string;\n  /** Raw value */\n  value: number | string | boolean;\n  /** Converted value (after read conversion) */\n  convertedValue?: number | string;\n  /** Formatted value (with format string applied) */\n  formattedValue?: string;\n  /** Units string */\n  units?: string;\n  /** Limits definition and current state */\n  limits?: PacketItemLimits;\n  /** Item description */\n  description?: string;\n  /** Data type (e.g., UINT, INT, FLOAT, STRING, BLOCK, DERIVED) */\n  dataType?: string;\n  /** Bit size */\n  bitSize?: number;\n  /** Bit offset */\n  bitOffset?: number;\n  /** Whether this is a derived item */\n  derived?: boolean;\n  /** Conversion applied */\n  conversion?: string;\n  /** States map (for state items) */\n  states?: Record<string, number | string>;\n  /** Whether value is stale */\n  stale?: boolean;\n}\n\nexport interface PacketViewerProps {\n  /** Target name */\n  target?: string;\n  /** Packet name */\n  packet?: string;\n  /** Array of packet items */\n  items: PacketItem[];\n  /** View mode (default: 'converted') */\n  viewMode?: PacketViewMode;\n  /** Height (default: 500) */\n  height?: number | string;\n  /** Show derived items last (default: true) */\n  derivedLast?: boolean;\n  /** Show search bar (default: true) */\n  showSearch?: boolean;\n  /** Show view mode selector (default: true) */\n  showViewMode?: boolean;\n  /** Compact mode */\n  compact?: boolean;\n  /** Called when an item is clicked */\n  onItemClick?: (item: PacketItem) => void;\n  /** CSS class */\n  className?: string;\n  /** Show outer container border (default: true). Set false when embedded inside a Container/card. */\n  bordered?: boolean;\n  /** Custom style overrides for the outer container */\n  style?: React.CSSProperties;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nfunction getLimitsColor(state: PacketItemLimitsState, tokens: ReturnType<typeof useTheme>['tokens']): string {\n  switch (state) {\n    case 'RED': case 'RED_LOW': case 'RED_HIGH': return tokens.colors.status.critical;\n    case 'YELLOW': case 'YELLOW_LOW': case 'YELLOW_HIGH': return tokens.colors.status.caution;\n    case 'GREEN': return tokens.colors.status.normal;\n    case 'BLUE': return tokens.colors.status.standby;\n    case 'STALE': return tokens.colors.status.off;\n    default: return tokens.colors.text.primary;\n  }\n}\n\nfunction getLimitsBg(state: PacketItemLimitsState, tokens: ReturnType<typeof useTheme>['tokens']): string {\n  const color = getLimitsColor(state, tokens);\n  return state ? `${color}18` : 'transparent';\n}\n\n/**\n * Return Astro UX-compliant status shape style for a limits state.\n * Maps packet limits levels to the canonical Astro status shapes:\n *   BLUE/STALE → off (small circle), GREEN → normal (filled circle),\n *   YELLOW → caution (square), RED → critical (triangle down via clip-path)\n */\nfunction getLimitsShapeStyle(state: PacketItemLimitsState, color: string): React.CSSProperties {\n  const base: React.CSSProperties = {\n    width: 8, height: 8, display: 'inline-block',\n    background: color, boxShadow: `0 0 4px ${color}66`,\n  };\n  switch (state) {\n    case 'GREEN':\n      return { ...base, borderRadius: '50%' };                  // normal → circle\n    case 'YELLOW': case 'YELLOW_LOW': case 'YELLOW_HIGH':\n      return { ...base, borderRadius: '1px' };                  // caution → square\n    case 'RED': case 'RED_LOW': case 'RED_HIGH':\n      return { ...base, borderRadius: 0,                        // critical → triangle down\n        clipPath: 'polygon(50% 100%, 0% 0%, 100% 0%)' };\n    case 'BLUE':\n      return { ...base, borderRadius: '50%', width: 6, height: 6, // standby → hollow ring\n        background: 'transparent', border: `2px solid ${color}`, boxShadow: 'none' };\n    case 'STALE':\n      return { ...base, borderRadius: '50%', width: 5, height: 5, // off → small dot\n        opacity: 0.6 };\n    default:\n      return { ...base, borderRadius: '50%' };\n  }\n}\n\nfunction getDisplayValue(item: PacketItem, mode: PacketViewMode): string {\n  switch (mode) {\n    case 'raw': return String(item.value);\n    case 'converted': return String(item.convertedValue ?? item.value);\n    case 'formatted': return item.formattedValue ?? String(item.convertedValue ?? item.value);\n    case 'with_units': {\n      const val = item.formattedValue ?? String(item.convertedValue ?? item.value);\n      return item.units ? `${val} ${item.units}` : val;\n    }\n  }\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const PacketViewer = memo(function PacketViewer({\n  target,\n  packet,\n  items,\n  viewMode: initialViewMode = 'converted',\n  height = 500,\n  derivedLast = true,\n  showSearch = true,\n  showViewMode = true,\n  compact = false,\n  onItemClick,\n  className = '',\n  bordered = true,\n  style: styleProp,\n}: PacketViewerProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [searchQuery, setSearchQuery] = useState('');\n  const [viewMode, setViewMode] = useState(initialViewMode);\n  const [selectedItem, setSelectedItem] = useState<PacketItem | null>(null);\n  const [showDetails, setShowDetails] = useState(false);\n  const [scrollTop, setScrollTop] = useState(0);\n  const [viewportHeight, setViewportHeight] = useState(240);\n  const listRef = React.useRef<HTMLDivElement>(null);\n\n  const sortedItems = useMemo(() => {\n    let filtered = items;\n    if (searchQuery.trim()) {\n      const q = searchQuery.toLowerCase();\n      filtered = items.filter(i => i.name.toLowerCase().includes(q) || (i.description && i.description.toLowerCase().includes(q)));\n    }\n    if (derivedLast) {\n      const regular = filtered.filter(i => !i.derived);\n      const derived = filtered.filter(i => i.derived);\n      return [...regular, ...derived];\n    }\n    return filtered;\n  }, [items, searchQuery, derivedLast]);\n\n  const handleItemClick = useCallback((item: PacketItem) => {\n    setSelectedItem(item);\n    setShowDetails(true);\n    onItemClick?.(item);\n  }, [onItemClick]);\n\n  const rowHeight = compact ? 26 : 32;\n  const overscanRows = 12;\n  const totalRows = sortedItems.length;\n  const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - overscanRows);\n  const visibleRows = Math.ceil(viewportHeight / rowHeight) + overscanRows * 2;\n  const endRow = Math.min(totalRows, startRow + visibleRows);\n  const visibleItems = useMemo(\n    () => sortedItems.slice(startRow, endRow),\n    [sortedItems, startRow, endRow],\n  );\n\n  React.useEffect(() => {\n    const el = listRef.current;\n    if (!el) return undefined;\n\n    const updateHeight = () => setViewportHeight(Math.max(rowHeight * 4, el.clientHeight || 240));\n    updateHeight();\n\n    if (typeof ResizeObserver !== 'undefined') {\n      const observer = new ResizeObserver(updateHeight);\n      observer.observe(el);\n      return () => observer.disconnect();\n    }\n\n    window.addEventListener('resize', updateHeight);\n    return () => window.removeEventListener('resize', updateHeight);\n  }, [rowHeight]);\n\n  return (\n    <div\n      className={`packet-viewer ${className}`}\n      style={{\n        height: typeof height === 'number' ? height : undefined,\n        background: tokens.colors.background.base,\n        ...(bordered ? (tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }) : { border: 'none' }),\n        borderRadius: tokens.borderRadius.lg,\n        overflow: 'hidden',\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: tokens.colors.text.primary,\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        ...styleProp,\n      }}\n    >\n      {/* Header */}\n      <div style={{\n        padding: '8px 12px',\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        background: tokens.colors.background.surface,\n        backdropFilter: 'blur(8px)',\n        flexWrap: 'wrap',\n        gap: 8,\n      }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n          {target && (\n            <span style={{\n              background: `${tokens.colors.interactive.default}22`,\n              color: tokens.colors.interactive.default,\n              padding: '2px 8px', borderRadius: tokens.borderRadius.md, fontSize: tokens.typography.fontSize.xxs, fontWeight: 600,\n            }}>\n              {target}\n            </span>\n          )}\n          {packet && (\n            <span style={{ fontWeight: 600, fontSize: tokens.typography.fontSize.sm }}>{packet}</span>\n          )}\n          <span style={{ fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted }}>\n            {sortedItems.length} items\n          </span>\n        </div>\n        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n          {showViewMode && (\n            <select\n              value={viewMode}\n              onChange={e => setViewMode(e.target.value as PacketViewMode)}\n              aria-label=\"Packet view mode\"\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md, padding: '3px 8px', fontSize: tokens.typography.fontSize.xxs,\n              }}\n            >\n              <option value=\"raw\">Raw</option>\n              <option value=\"converted\">Converted</option>\n              <option value=\"formatted\">Formatted</option>\n              <option value=\"with_units\">With Units</option>\n            </select>\n          )}\n          {showSearch && (\n            <input\n              type=\"text\"\n              value={searchQuery}\n              onChange={e => setSearchQuery(e.target.value)}\n              placeholder=\"Filter items...\"\n              aria-label=\"Filter packet items\"\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md, padding: '3px 8px', fontSize: tokens.typography.fontSize.xxs,\n                outline: 'none', minWidth: 120,\n              }}\n            />\n          )}\n        </div>\n      </div>\n\n      {/* Column headers */}\n      <div role=\"row\" style={{\n        display: 'grid',\n        gridTemplateColumns: '1fr 1fr auto',\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        background: tokens.colors.background.surface,\n        fontSize: tokens.typography.fontSize.xxs,\n        color: tokens.colors.text.muted,\n        textTransform: 'uppercase',\n        letterSpacing: '0.5px',\n        fontWeight: tokens.typography.fontWeight.medium,\n      }}>\n        <span role=\"columnheader\">Item</span>\n        <span role=\"columnheader\" style={{ textAlign: 'right' }}>Value</span>\n        <span role=\"columnheader\" style={{ minWidth: 50, textAlign: 'center' }}>Limits</span>\n      </div>\n\n      {/* Items list */}\n      <div\n        ref={listRef}\n        role=\"rowgroup\"\n        onScroll={e => setScrollTop(e.currentTarget.scrollTop)}\n        style={{ flex: 1, overflow: 'auto' }}\n      >\n        <div style={{ height: totalRows * rowHeight, position: 'relative' }}>\n          <div style={{ position: 'absolute', top: startRow * rowHeight, left: 0, right: 0 }}>\n            {visibleItems.map((item, visibleIdx) => {\n              const idx = startRow + visibleIdx;\n              const limitsColor = item.stale\n                ? tokens.colors.status.off\n                : getLimitsColor(item.limits?.state ?? null, tokens);\n              const limitsBg = item.stale\n                ? `${tokens.colors.status.off}14`\n                : getLimitsBg(item.limits?.state ?? null, tokens);\n\n              return (\n                <div\n                  role=\"row\"\n                  tabIndex={0}\n                  key={item.name + idx}\n                  onClick={() => handleItemClick(item)}\n                  onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleItemClick(item); } }}\n                  aria-label={`${item.name}: ${getDisplayValue(item, viewMode)}${item.limits?.state ? `, ${item.limits.state}` : ''}`}\n                  style={{\n                    display: 'grid',\n                    gridTemplateColumns: '1fr 1fr auto',\n                    padding: `0 ${tokens.spacing.smd}`,\n                    height: rowHeight,\n                    alignItems: 'center',\n                    borderBottom: `1px solid ${tokens.colors.border.muted}`,\n                    cursor: 'pointer',\n                    transition: 'background 150ms ease',\n                    background: item.derived ? `${tokens.colors.background.surface}44` : 'transparent',\n                  }}\n                  onMouseEnter={e => { (e.currentTarget as HTMLDivElement).style.background = tokens.colors.background.surface; }}\n                  onMouseLeave={e => { (e.currentTarget as HTMLDivElement).style.background = item.derived ? `${tokens.colors.background.surface}44` : 'transparent'; }}\n                >\n                  {/* Item name */}\n                  <span style={{\n                    fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,\n                    fontWeight: 500,\n                    color: item.derived ? tokens.colors.text.muted : tokens.colors.text.primary,\n                    fontStyle: item.derived ? 'italic' : 'normal',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace: 'nowrap',\n                  }}>\n                    {item.name}\n                  </span>\n\n                  {/* Value */}\n                  <span style={{\n                    textAlign: 'right',\n                    fontFamily: tokens.typography.fontFamily.mono,\n                    fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs,\n                    fontWeight: 600,\n                    color: limitsColor,\n                    background: limitsBg,\n                    padding: '2px 8px',\n                    borderRadius: tokens.borderRadius.sm,\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace: 'nowrap',\n                  }}>\n                    {getDisplayValue(item, viewMode)}\n                  </span>\n\n                  {/* Limits indicator — Astro UX status shape */}\n                  <div style={{ minWidth: 50, display: 'flex', justifyContent: 'center' }}>\n                    {item.limits?.state && (\n                      <div style={{\n                        display: 'flex', alignItems: 'center', gap: 3,\n                      }}>\n                        <span style={getLimitsShapeStyle(item.limits.state, limitsColor)} />\n                        <span style={{ fontSize: tokens.typography.fontSize.micro, color: limitsColor, fontWeight: 600 }}>\n                          {item.limits.state.replace(/_/g, ' ')}\n                        </span>\n                      </div>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n\n      {/* Details panel */}\n      {showDetails && selectedItem && (\n        <div style={{\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          background: tokens.colors.background.surface,\n          padding: 12,\n          maxHeight: 200,\n          overflow: 'auto',\n        }}>\n          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: tokens.spacing.sm }}>\n            <span style={{ fontWeight: tokens.typography.fontWeight.bold, fontSize: tokens.typography.fontSize.sm }}>{selectedItem.name}</span>\n            <button\n              onClick={() => setShowDetails(false)}\n              aria-label=\"Close details panel\"\n              style={{ background: 'none', border: 'none', color: tokens.colors.text.muted, cursor: 'pointer', fontSize: tokens.typography.fontSize.lg, padding: tokens.spacing.xs, lineHeight: 1 }}\n            >\n              &#x2715;\n            </button>\n          </div>\n          {selectedItem.description && (\n            <p style={{ color: tokens.colors.text.secondary, fontSize: tokens.typography.fontSize.xs, marginBottom: 8 }}>\n              {selectedItem.description}\n            </p>\n          )}\n          <div style={{\n            display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '4px 12px',\n            fontSize: tokens.typography.fontSize.xxs, fontFamily: tokens.typography.fontFamily.mono,\n          }}>\n            <span style={{ color: tokens.colors.text.muted }}>Raw:</span>\n            <span>{String(selectedItem.value)}</span>\n            {selectedItem.convertedValue !== undefined && (\n              <><span style={{ color: tokens.colors.text.muted }}>Converted:</span><span>{String(selectedItem.convertedValue)}</span></>\n            )}\n            {selectedItem.units && (\n              <><span style={{ color: tokens.colors.text.muted }}>Units:</span><span>{selectedItem.units}</span></>\n            )}\n            {selectedItem.dataType && (\n              <><span style={{ color: tokens.colors.text.muted }}>Type:</span><span>{selectedItem.dataType}</span></>\n            )}\n            {selectedItem.bitSize !== undefined && (\n              <><span style={{ color: tokens.colors.text.muted }}>Bit Size:</span><span>{selectedItem.bitSize}</span></>\n            )}\n            {selectedItem.bitOffset !== undefined && (\n              <><span style={{ color: tokens.colors.text.muted }}>Bit Offset:</span><span>{selectedItem.bitOffset}</span></>\n            )}\n            {selectedItem.conversion && (\n              <><span style={{ color: tokens.colors.text.muted }}>Conversion:</span><span>{selectedItem.conversion}</span></>\n            )}\n            {selectedItem.limits && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>Limits State:</span>\n                <span style={{ color: getLimitsColor(selectedItem.limits.state, tokens) }}>\n                  {selectedItem.limits.state}\n                </span>\n                {selectedItem.limits.redLow !== undefined && (\n                  <><span style={{ color: tokens.colors.text.muted }}>Red Low:</span><span>{selectedItem.limits.redLow}</span></>\n                )}\n                {selectedItem.limits.yellowLow !== undefined && (\n                  <><span style={{ color: tokens.colors.text.muted }}>Yellow Low:</span><span>{selectedItem.limits.yellowLow}</span></>\n                )}\n                {selectedItem.limits.greenHigh !== undefined && (\n                  <><span style={{ color: tokens.colors.text.muted }}>Green High:</span><span>{selectedItem.limits.greenHigh}</span></>\n                )}\n                {selectedItem.limits.yellowHigh !== undefined && (\n                  <><span style={{ color: tokens.colors.text.muted }}>Yellow High:</span><span>{selectedItem.limits.yellowHigh}</span></>\n                )}\n                {selectedItem.limits.redHigh !== undefined && (\n                  <><span style={{ color: tokens.colors.text.muted }}>Red High:</span><span>{selectedItem.limits.redHigh}</span></>\n                )}\n              </>\n            )}\n            {selectedItem.states && (\n              <>\n                <span style={{ color: tokens.colors.text.muted }}>States:</span>\n                <span>{Object.entries(selectedItem.states).map(([k, v]) => `${k}=${v}`).join(', ')}</span>\n              </>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default PacketViewer;\n"],"names":["PacketViewer"],"mappings":"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"}

package/dist/react/core/Pagination.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+
+export interface PaginationProps {
+    /** Current page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Change handler */
+    onChange: (page: number) => void;
+    /** Number of page buttons to show */
+    siblingCount?: number;
+    /** Show first/last buttons */
+    showFirstLast?: boolean;
+    /** Show prev/next buttons */
+    showPrevNext?: boolean;
+    /** Size variant */
+    size?: 'small' | 'medium';
+    /**
+     * Display mode.
+     * - `'buttons'` — numbered page buttons with ellipsis (default).
+     * - `'text'`    — compact "Page X of Y" label with prev/next arrows.
+     */
+    displayMode?: 'buttons' | 'text';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare const Pagination: React.NamedExoticComponent<PaginationProps>;
+export default Pagination;