@zendir/ui 0.1.0

package/dist/react/core/HeaderIconWithStatus.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { AstroIcon } from "./AstroIcon.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const STATUS_BORDER_COLORS = {
+  off: "#3c3e42",
+  standby: "#285766",
+  normal: "#005a00",
+  caution: "#645600",
+  serious: "#664618",
+  critical: "#661102"
+};
+const StatusShape = ({ status, size, color, borderColor, glow = true }) => {
+  const hasBorder = !!borderColor;
+  const strokeWidth = hasBorder ? 1 : 0;
+  const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : void 0;
+  const renderShape = () => {
+    switch (status) {
+      case "off":
+        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: hasBorder ? 2.5 : 3, fill: color, stroke: borderColor, strokeWidth });
+      case "standby":
+        return /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" });
+      case "normal":
+        return /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "6",
+            cy: "6",
+            r: hasBorder ? 4.5 : 5,
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      case "caution":
+        return /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: hasBorder ? 1.5 : 1,
+            y: hasBorder ? 1.5 : 1,
+            width: hasBorder ? 9 : 10,
+            height: hasBorder ? 9 : 10,
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      case "serious":
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: "6,1 11,6 6,11 1,6",
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      case "critical":
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: "6,11 1,2 11,2",
+            fill: color,
+            stroke: borderColor,
+            strokeWidth
+          }
+        );
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 12 12",
+      width: size,
+      height: size,
+      style: { filter: glowFilter },
+      children: renderShape()
+    }
+  );
+};
+const HeaderIconWithStatus = memo(function HeaderIconWithStatus2({
+  icon,
+  size = 24,
+  status,
+  statusColor: statusColorProp,
+  isLightTheme: isLightThemeProp,
+  className,
+  style
+}) {
+  const { tokens, mode } = useTheme();
+  const isLightTheme = isLightThemeProp ?? mode === "light";
+  const statusColor = statusColorProp ?? tokens.colors.status[status] ?? "#a4abb6";
+  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : void 0;
+  const badgeSize = Math.max(7, Math.min(12, Math.round(size * 0.38)));
+  const transformOffset = "translate(-35%, -35%)";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "img",
+      "aria-label": `${icon} — status: ${status}`,
+      className,
+      style: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: size,
+        height: size,
+        flexShrink: 0,
+        color: statusColor,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          AstroIcon,
+          {
+            name: icon,
+            size,
+            color: statusColor,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              transform: transformOffset,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(
+              StatusShape,
+              {
+                status,
+                size: badgeSize,
+                color: statusColor,
+                borderColor,
+                glow: !isLightTheme
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  HeaderIconWithStatus
+};
+//# sourceMappingURL=HeaderIconWithStatus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderIconWithStatus.js","sources":["../../../src/react/core/HeaderIconWithStatus.tsx"],"sourcesContent":["/**\n * @zendir/ui - HeaderIconWithStatus Component\n * \n * Shared component for card/chart header icons with status indicator.\n * Follows MonitoringIcon pattern for Astro UX compliance.\n * \n * Features:\n * - Status indicator positioned at top-left with transform offset\n * - Glow effect in dark mode for visibility\n * - Border in light mode for WCAG AA compliance\n * - Theme-aware colors\n * - Consistent sizing across all usages\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../theme';\nimport { type StatusLevel } from '../utils';\nimport { AstroIcon, type AstroIconName } from './AstroIcon';\n\n// =============================================================================\n// Astro UX Status Border Colors - Required for light theme WCAG compliance\n// https://www.astrouxds.com/patterns/status-system/\n// =============================================================================\n\nconst STATUS_BORDER_COLORS: Record<StatusLevel, string> = {\n  off: '#3c3e42',\n  standby: '#285766',\n  normal: '#005a00',\n  caution: '#645600',\n  serious: '#664618',\n  critical: '#661102',\n};\n\n// =============================================================================\n// Status Shape SVG - Matches MonitoringIcon exactly\n// =============================================================================\n\ninterface StatusShapeProps {\n  status: StatusLevel;\n  size: number;\n  color: string;\n  borderColor?: string;\n  glow?: boolean;\n}\n\nconst StatusShape = ({ status, size, color, borderColor, glow = true }: StatusShapeProps) => {\n  const hasBorder = !!borderColor;\n  const strokeWidth = hasBorder ? 1 : 0;\n  const glowFilter = glow && !hasBorder ? `drop-shadow(0 0 3px ${color})` : undefined;\n  \n  const renderShape = () => {\n    switch (status) {\n      case 'off':\n        return <circle cx=\"6\" cy=\"6\" r={hasBorder ? 2.5 : 3} fill={color} stroke={borderColor} strokeWidth={strokeWidth} />;\n      case 'standby':\n        return <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />;\n      case 'normal':\n        return (\n          <circle\n            cx=\"6\"\n            cy=\"6\"\n            r={hasBorder ? 4.5 : 5}\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'caution':\n        return (\n          <rect\n            x={hasBorder ? 1.5 : 1}\n            y={hasBorder ? 1.5 : 1}\n            width={hasBorder ? 9 : 10}\n            height={hasBorder ? 9 : 10}\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'serious':\n        return (\n          <polygon\n            points=\"6,1 11,6 6,11 1,6\"\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      case 'critical':\n        return (\n          <polygon\n            points=\"6,11 1,2 11,2\"\n            fill={color}\n            stroke={borderColor}\n            strokeWidth={strokeWidth}\n          />\n        );\n      default:\n        return null;\n    }\n  };\n  \n  return (\n    <svg \n      viewBox=\"0 0 12 12\" \n      width={size} \n      height={size}\n      style={{ filter: glowFilter }}\n    >\n      {renderShape()}\n    </svg>\n  );\n};\n\n// =============================================================================\n// HeaderIconWithStatus Component\n// =============================================================================\n\nexport interface HeaderIconWithStatusProps {\n  /** Astro icon name */\n  icon: AstroIconName | string;\n  /** Icon size in pixels */\n  size?: number;\n  /** Status level */\n  status: StatusLevel;\n  /** Custom status color (optional - defaults to theme status color) */\n  statusColor?: string;\n  /** Override light theme detection */\n  isLightTheme?: boolean;\n  /** Additional CSS class */\n  className?: string;\n  /** Additional inline styles */\n  style?: React.CSSProperties;\n}\n\n/**\n * HeaderIconWithStatus - Card/Chart header icon with status indicator\n * \n * Follows MonitoringIcon pattern exactly:\n * - Icon colored by status\n * - Status symbol at top-left with transform offset\n * - Glow in dark mode, border in light mode\n * \n * @example\n * ```tsx\n * <HeaderIconWithStatus\n *   icon=\"satellite-transmit\"\n *   status=\"normal\"\n *   size={24}\n * />\n * ```\n */\nexport const HeaderIconWithStatus = memo(function HeaderIconWithStatus({\n  icon,\n  size = 24,\n  status,\n  statusColor: statusColorProp,\n  isLightTheme: isLightThemeProp,\n  className,\n  style,\n}: HeaderIconWithStatusProps) {\n  const { tokens, mode } = useTheme();\n  \n  // Theme detection\n  const isLightTheme = isLightThemeProp ?? mode === 'light';\n  \n  // Status color from theme or prop\n  const statusColor = statusColorProp ?? tokens.colors.status[status] ?? '#a4abb6';\n  \n  // Border color for light theme (WCAG compliance)\n  const borderColor = isLightTheme ? STATUS_BORDER_COLORS[status] : undefined;\n  \n  // ═══════════════════════════════════════════════════════════════════════════\n  // SIZING CONTROLS - Adjust these to match MonitoringIcon proportions\n  // ═══════════════════════════════════════════════════════════════════════════\n  // Badge size: ~35% of icon size (same ratio as MonitoringIcon's 9px badge on 24px icon)\n  const badgeSize = Math.max(7, Math.min(12, Math.round(size * 0.38)));\n  \n  // Transform offset: translate(-35%, -35%) matches MonitoringIcon exactly\n  const transformOffset = 'translate(-35%, -35%)';\n  \n  return (\n    <div\n      role=\"img\"\n      aria-label={`${icon} — status: ${status}`}\n      className={className}\n      style={{\n        position: 'relative',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: size,\n        height: size,\n        flexShrink: 0,\n        color: statusColor,\n        ...style,\n      }}\n    >\n      {/* Icon - colored by status */}\n      <AstroIcon \n        name={icon as AstroIconName} \n        size={size} \n        color={statusColor}\n        aria-hidden=\"true\"\n      />\n      \n      {/* Status symbol - top-left corner with transform offset */}\n      <span\n        aria-hidden=\"true\"\n        style={{\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          transform: transformOffset,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        <StatusShape \n          status={status} \n          size={badgeSize} \n          color={statusColor} \n          borderColor={borderColor}\n          glow={!isLightTheme} \n        />\n      </span>\n    </div>\n  );\n});\n\nexport default HeaderIconWithStatus;\n"],"names":["HeaderIconWithStatus"],"mappings":"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"}

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

@@ -0,0 +1,143 @@
+import { default as React } from 'react';
+
+export interface HexHighlight {
+    /** Start byte offset (inclusive) */
+    start: number;
+    /** End byte offset (inclusive) */
+    end: number;
+    /** Highlight color (CSS color) */
+    color: string;
+    /** Optional label for the highlight region */
+    label?: string;
+}
+/**
+ * Named region for structural packet analysis (e.g., CCSDS Primary Header,
+ * Secondary Header, User Data). Regions provide persistent background color
+ * and a legend entry, unlike transient highlights.
+ */
+export interface HexRegion {
+    /** Start byte offset (inclusive) */
+    start: number;
+    /** End byte offset (exclusive) */
+    end: number;
+    /** Region display name (e.g., "Primary Header") */
+    label: string;
+    /** Background fill color (CSS rgba recommended) */
+    color: string;
+    /** Border/accent color for the region */
+    borderColor?: string;
+}
+/**
+ * A decoded field within the packet payload for the fields table.
+ * Enables cross-highlighting: hover a field row → highlight its bytes,
+ * hover hex bytes → highlight the corresponding field row.
+ */
+export interface DecodedField {
+    /** Field name */
+    name: string;
+    /** Decoded value (displayed via toString) */
+    value: string | number | boolean | null;
+    /** Engineering units (e.g., "°C", "V", "rpm") */
+    unit?: string;
+    /** Byte offset within the packet where this field starts */
+    byteOffset?: number;
+    /** Size in bits */
+    sizeBits?: number;
+    /** Optional description / tooltip */
+    description?: string;
+}
+/**
+ * Packet header key-value pairs shown in a collapsible summary panel.
+ * Supports CCSDS-style primary + secondary header display.
+ */
+export interface PacketHeaderEntry {
+    /** Label (e.g., "APID", "Sequence Count", "Spacecraft ID") */
+    label: string;
+    /** Value */
+    value: string | number;
+    /** Render value in monospace font */
+    mono?: boolean;
+}
+/** Pre-defined region color palette for space packet headers */
+export declare const REGION_COLORS: {
+    readonly primary: "rgba(96, 165, 250, 0.15)";
+    readonly secondary: "rgba(168, 85, 247, 0.15)";
+    readonly tertiary: "rgba(251, 191, 36, 0.15)";
+    readonly userData: "rgba(34, 197, 94, 0.15)";
+    readonly error: "rgba(255, 56, 56, 0.15)";
+};
+export declare const REGION_BORDER_COLORS: {
+    readonly primary: "rgba(96, 165, 250, 0.5)";
+    readonly secondary: "rgba(168, 85, 247, 0.5)";
+    readonly tertiary: "rgba(251, 191, 36, 0.5)";
+    readonly userData: "rgba(34, 197, 94, 0.5)";
+    readonly error: "rgba(255, 56, 56, 0.5)";
+};
+export type ByteGrouping = 1 | 2 | 4 | 8;
+export type OffsetBase = 'hex' | 'decimal';
+export type Endianness = 'big' | 'little';
+export interface HexViewerProps {
+    /** Binary data to display */
+    data: Uint8Array | number[];
+    /** Bytes per row (default: 16) */
+    bytesPerRow?: 8 | 16 | 32;
+    /** Byte grouping for hex display (default: 1) */
+    byteGrouping?: ByteGrouping;
+    /** Offset display base (default: 'hex') */
+    offsetBase?: OffsetBase;
+    /** Highlighted byte regions (transient, e.g., search results or field hover) */
+    highlights?: HexHighlight[];
+    /** Named structural regions (persistent background, e.g., Primary/Secondary Header) */
+    regions?: HexRegion[];
+    /** Decoded fields for the fields table (cross-highlights with hex bytes) */
+    decodedFields?: DecodedField[];
+    /** Packet header entries for the summary panel */
+    packetHeaders?: PacketHeaderEntry[];
+    /** External hover highlight range (for cross-component linking) */
+    externalHighlight?: {
+        start: number;
+        end: number;
+    } | null;
+    /** Whether to show the ASCII column (default: true) */
+    showAscii?: boolean;
+    /** Whether to show the offset column (default: true) */
+    showOffset?: boolean;
+    /** Whether to show the status/info bar (default: true) */
+    showStatusBar?: boolean;
+    /** Whether to show the search bar (default: true) */
+    showSearch?: boolean;
+    /** Whether to show the toolbar (default: true) */
+    showToolbar?: boolean;
+    /** Whether to show the decoded fields table (default: true if decodedFields provided) */
+    showFieldsTable?: boolean;
+    /** Whether to show the packet header summary (default: true if packetHeaders provided) */
+    showHeaderSummary?: boolean;
+    /**
+     * Height of the viewer (default: 400).
+     * When constrained, HexViewer enables outer scroll fallback so expanded
+     * panels (headers/decoded fields) never trap lower sections.
+     */
+    height?: number | string;
+    /** Title for the viewer */
+    title?: string;
+    /** Whether data is streaming (auto-scroll to bottom) */
+    streaming?: boolean;
+    /** Endianness for multi-byte interpretation (default: 'big') */
+    endianness?: Endianness;
+    /** Called when byte selection changes */
+    onSelectionChange?: (start: number, end: number) => void;
+    /** Called when a byte is clicked */
+    onByteClick?: (offset: number, value: number) => void;
+    /** Called when hovering a byte (for external cross-highlighting) */
+    onByteHover?: (byteIndex: number) => void;
+    /** Called when mouse leaves hex area */
+    onByteLeave?: () => void;
+    /** CSS class name */
+    className?: string;
+    /** Show outer container border (default: true). Set false when embedded inside a Container/card. */
+    bordered?: boolean;
+    /** Custom style overrides for the outer container */
+    style?: React.CSSProperties;
+}
+export declare function HexViewer({ data: rawData, bytesPerRow, byteGrouping, offsetBase, highlights, regions, decodedFields, packetHeaders, externalHighlight, showAscii, showOffset, showStatusBar, showSearch, showToolbar, showFieldsTable, showHeaderSummary, height, title, streaming, endianness, onSelectionChange, onByteClick, onByteHover, onByteLeave, className, bordered, style: styleProp, }: HexViewerProps): React.ReactElement;
+export default HexViewer;