@openrfid/shell 0.1.0

package/dist/index.mjs

@@ -0,0 +1,889 @@
+// src/views/DashboardView.tsx
+import React, { useState, useEffect } from "react";
+var LIMIT_PRESETS = [1e3, 5e3, 1e4, 5e4, 1e5];
+var card = {
+  backgroundColor: "#1E293B",
+  padding: "20px",
+  borderRadius: "10px",
+  border: "1px solid #334155"
+};
+var DashboardView = ({ simulator, storage }) => {
+  const [readers, setReaders] = useState(simulator.getAllReaders());
+  const [tags, setTags] = useState(simulator.getAllTags());
+  const [memUsage, setMemUsage] = useState(storage?.getMemoryUsage());
+  const [customLimit, setCustomLimit] = useState("");
+  const [autoTrim, setAutoTrim] = useState(true);
+  const [showWarning, setShowWarning] = useState(true);
+  const [limitInput, setLimitInput] = useState(storage?.getMemoryUsage().limit ?? 1e4);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setReaders(simulator.getAllReaders());
+      setTags(simulator.getAllTags());
+      if (storage) setMemUsage(storage.getMemoryUsage());
+    }, 2e3);
+    return () => clearInterval(interval);
+  }, [simulator, storage]);
+  const onlineCount = readers.filter((r) => r.status === "ONLINE").length;
+  const offlineCount = readers.length - onlineCount;
+  const applyLimit = (limit) => {
+    if (!storage) return;
+    storage.setMemoryLimit(limit);
+    setLimitInput(limit);
+    setMemUsage(storage.getMemoryUsage());
+  };
+  const handleApplyCustom = () => {
+    const v = parseInt(customLimit, 10);
+    if (!isNaN(v) && v >= 100) applyLimit(v);
+  };
+  const handleClearBuffer = () => {
+    storage?.clearAllEvents();
+    setMemUsage(storage?.getMemoryUsage());
+  };
+  const mem = memUsage;
+  const memPercent = mem?.percent ?? 0;
+  const memBarColor = memPercent >= 80 ? "#F59E0B" : memPercent >= 95 ? "#EF4444" : "#10B981";
+  return /* @__PURE__ */ React.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "12px", flexWrap: "wrap", marginBottom: "20px", padding: "12px 16px", backgroundColor: "#0F172A", borderRadius: "8px", border: "1px solid #334155", fontSize: "13px" } }, /* @__PURE__ */ React.createElement("span", { style: { color: "#10B981", fontWeight: "bold" } }, "\u25CF ", onlineCount, " Online"), /* @__PURE__ */ React.createElement("span", { style: { color: "#64748B" } }, "|"), /* @__PURE__ */ React.createElement("span", { style: { color: "#64748B" } }, offlineCount, " Offline"), /* @__PURE__ */ React.createElement("span", { style: { color: "#64748B" } }, "|"), /* @__PURE__ */ React.createElement("span", { style: { color: "#00E5EE" } }, "\u{1F3F7} ", tags.length.toLocaleString(), " Tags"), mem && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { style: { color: "#64748B" } }, "|"), /* @__PURE__ */ React.createElement("span", { style: { color: mem.isWarning ? "#F59E0B" : "#94A3B8" } }, mem.isWarning ? "\u26A0\uFE0F " : "", "Buffer: ", mem.current.toLocaleString(), "/", mem.limit.toLocaleString(), " (", mem.percent, "%)"))), /* @__PURE__ */ React.createElement("h2", { style: { fontSize: "20px", fontWeight: "bold", marginBottom: "20px" } }, "Dashboard Overview"), /* @__PURE__ */ React.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "16px" } }, /* @__PURE__ */ React.createElement("div", { style: card }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "13px", color: "#94A3B8" } }, "Readers Online"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "28px", fontWeight: "bold", color: "#10B981", marginTop: "4px" } }, onlineCount)), /* @__PURE__ */ React.createElement("div", { style: card }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "13px", color: "#94A3B8" } }, "Readers Offline"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "28px", fontWeight: "bold", color: "#64748B", marginTop: "4px" } }, offlineCount)), /* @__PURE__ */ React.createElement("div", { style: card }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "13px", color: "#94A3B8" } }, "Active Simulated Tags"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "28px", fontWeight: "bold", color: "#00E5EE", marginTop: "4px" } }, tags.length.toLocaleString())), /* @__PURE__ */ React.createElement("div", { style: card }, /* @__PURE__ */ React.createElement("div", { style: { fontSize: "13px", color: "#94A3B8" } }, "Event Buffer"), /* @__PURE__ */ React.createElement("div", { style: { fontSize: "28px", fontWeight: "bold", color: mem?.isWarning ? "#F59E0B" : "#FFFFFF", marginTop: "4px" } }, mem ? `${mem.current.toLocaleString()}` : "\u2014"), mem && /* @__PURE__ */ React.createElement("div", { style: { fontSize: "11px", color: "#64748B", marginTop: "2px" } }, "of ", mem.limit.toLocaleString(), " limit"))), /* @__PURE__ */ React.createElement("div", { style: { ...card, marginTop: "20px" } }, /* @__PURE__ */ React.createElement("h3", { style: { margin: "0 0 12px", fontSize: "16px" } }, "Quick Controls"), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "12px" } }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => simulator.startAll(),
+      style: { backgroundColor: "#10B981", color: "#FFF", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "\u25B6 Start All Readers"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => simulator.stopAll(),
+      style: { backgroundColor: "#EF4444", color: "#FFF", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "\u25A0 Stop All Readers"
+  ))), storage && /* @__PURE__ */ React.createElement("div", { style: { ...card, marginTop: "20px" } }, /* @__PURE__ */ React.createElement("h3", { style: { margin: "0 0 16px", fontSize: "16px" } }, "\u2699\uFE0F Storage & Memory Settings"), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "14px", fontSize: "14px", color: "#94A3B8" } }, "In-Memory Event Buffer Limit"), mem && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", marginBottom: "4px" } }, /* @__PURE__ */ React.createElement("span", { style: { color: mem.isWarning ? "#F59E0B" : "#94A3B8" } }, mem.isWarning ? "\u26A0\uFE0F " : "", mem.current.toLocaleString(), " events in buffer"), /* @__PURE__ */ React.createElement("span", { style: { color: "#64748B" } }, mem.percent, "% of ", mem.limit.toLocaleString())), /* @__PURE__ */ React.createElement("div", { style: { backgroundColor: "#0F172A", borderRadius: "6px", height: "10px", overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: {
+        width: `${Math.min(100, mem.percent)}%`,
+        height: "100%",
+        backgroundColor: memBarColor,
+        borderRadius: "6px",
+        transition: "width 0.5s ease"
+      }
+    }
+  ))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap", marginBottom: "14px" } }, LIMIT_PRESETS.map((preset) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: preset,
+      onClick: () => applyLimit(preset),
+      style: {
+        padding: "5px 12px",
+        borderRadius: "6px",
+        border: `1px solid ${limitInput === preset ? "#00E5EE" : "#334155"}`,
+        backgroundColor: limitInput === preset ? "#0E3A3F" : "#0F172A",
+        color: limitInput === preset ? "#00E5EE" : "#94A3B8",
+        cursor: "pointer",
+        fontSize: "13px",
+        fontWeight: limitInput === preset ? "bold" : "normal"
+      }
+    },
+    preset.toLocaleString()
+  ))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", marginBottom: "16px", alignItems: "center" } }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "number",
+      placeholder: "Custom limit (100\u2013500,000)",
+      value: customLimit,
+      onChange: (e) => setCustomLimit(e.target.value),
+      style: { backgroundColor: "#0F172A", border: "1px solid #334155", color: "#F8FAFC", padding: "6px 10px", borderRadius: "6px", fontSize: "13px", width: "240px" }
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: handleApplyCustom,
+      style: { backgroundColor: "#00E5EE", color: "#0F172A", border: "none", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold", fontSize: "13px" }
+    },
+    "Apply Limit"
+  )), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "10px", marginBottom: "16px", fontSize: "14px" } }, /* @__PURE__ */ React.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: autoTrim,
+      onChange: (e) => setAutoTrim(e.target.checked),
+      style: { accentColor: "#00E5EE", width: "16px", height: "16px" }
+    }
+  ), /* @__PURE__ */ React.createElement("span", { style: { color: "#CBD5E1" } }, "Auto-trim oldest events when limit is reached")), /* @__PURE__ */ React.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked: showWarning,
+      onChange: (e) => setShowWarning(e.target.checked),
+      style: { accentColor: "#00E5EE", width: "16px", height: "16px" }
+    }
+  ), /* @__PURE__ */ React.createElement("span", { style: { color: "#CBD5E1" } }, "Show \u26A0\uFE0F warning when buffer is \u226580% full"))), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: handleClearBuffer,
+      style: { backgroundColor: "#334155", color: "#F8FAFC", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold", fontSize: "13px" }
+    },
+    "\u{1F5D1} Clear Memory Buffer Now"
+  )));
+};
+
+// src/views/ReadersView.tsx
+import React2, { useState as useState2 } from "react";
+import { VirtualReader } from "@openrfid/readers";
+import { ReaderStatusBadge, AntennaPowerSlider } from "@openrfid/ui";
+var ReadersView = ({ simulator, refresh }) => {
+  const [, setTick] = useState2(0);
+  const readers = simulator.getAllReaders();
+  const [showAddForm, setShowAddForm] = useState2(false);
+  const [readerName, setReaderName] = useState2("");
+  const [vendor, setVendor] = useState2("RFID Softwares");
+  const [readerType, setReaderType] = useState2("4-Port Reader");
+  const [readMode, setReadMode] = useState2("continuous");
+  const [readIntervalValue, setReadIntervalValue] = useState2(1);
+  const [readIntervalUnit, setReadIntervalUnit] = useState2("seconds");
+  const [readRate, setReadRate] = useState2(0);
+  const [epcFilterPrefix, setEpcFilterPrefix] = useState2("");
+  const [epcFilterStart, setEpcFilterStart] = useState2("");
+  const [epcFilterEnd, setEpcFilterEnd] = useState2("");
+  const [expandedReaderId, setExpandedReaderId] = useState2(null);
+  const triggerUpdate = () => {
+    setTick((t) => t + 1);
+    refresh();
+  };
+  const getAntennasCount = (type) => {
+    if (type === "Desktop Reader") return 1;
+    if (type === "Integrated Reader") return 2;
+    if (type === "4-Port Reader") return 4;
+    if (type === "8-Port Reader") return 8;
+    if (type === "16-Port Reader") return 16;
+    return 4;
+  };
+  const handleAddReader = () => {
+    const name = readerName.trim() || `${vendor} ${readerType}`;
+    const antennasCount = getAntennasCount(readerType);
+    const reader = new VirtualReader({
+      name,
+      vendor,
+      model: readerType,
+      antennasCount,
+      readRate,
+      readMode,
+      readIntervalValue,
+      readIntervalUnit,
+      epcFilterStart,
+      epcFilterEnd,
+      epcFilterPrefix
+    });
+    simulator.addReader(reader);
+    setReaderName("");
+    setEpcFilterPrefix("");
+    setEpcFilterStart("");
+    setEpcFilterEnd("");
+    setReadRate(0);
+    setReadMode("continuous");
+    setReadIntervalValue(1);
+    setReadIntervalUnit("seconds");
+    setShowAddForm(false);
+    triggerUpdate();
+  };
+  const handleReaderSettingsChange = (reader, key, val) => {
+    reader[key] = val;
+    if (simulator.storage) {
+      simulator.storage.saveReader(reader.toJSON());
+    }
+    if (reader.status === "ONLINE") {
+      simulator.stopReader(reader.id);
+      simulator.startReader(reader.id);
+    }
+    triggerUpdate();
+  };
+  const handleToggleAntenna = (reader, index) => {
+    const antenna = reader.getAntenna(index);
+    if (antenna) {
+      antenna.enabled = !antenna.enabled;
+      if (simulator.storage) {
+        simulator.storage.saveAntenna({
+          id: antenna.id,
+          readerId: antenna.readerId,
+          index: antenna.index,
+          gain: antenna.gain,
+          power: antenna.power,
+          frequency: antenna.frequency,
+          rssiOffset: antenna.rssiOffset,
+          readZone: antenna.readZone,
+          enabled: antenna.enabled
+        });
+      }
+      triggerUpdate();
+    }
+  };
+  const handleAntennaPowerChange = (reader, index, power) => {
+    const antenna = reader.getAntenna(index);
+    if (antenna) {
+      antenna.power = power;
+      if (simulator.storage) {
+        simulator.storage.saveAntenna({
+          id: antenna.id,
+          readerId: antenna.readerId,
+          index: antenna.index,
+          gain: antenna.gain,
+          power: antenna.power,
+          frequency: antenna.frequency,
+          rssiOffset: antenna.rssiOffset,
+          readZone: antenna.readZone,
+          enabled: antenna.enabled
+        });
+      }
+      triggerUpdate();
+    }
+  };
+  const handleAntennaGainChange = (reader, index, gain) => {
+    const antenna = reader.getAntenna(index);
+    if (antenna) {
+      antenna.gain = gain;
+      if (simulator.storage) {
+        simulator.storage.saveAntenna({
+          id: antenna.id,
+          readerId: antenna.readerId,
+          index: antenna.index,
+          gain: antenna.gain,
+          power: antenna.power,
+          frequency: antenna.frequency,
+          rssiOffset: antenna.rssiOffset,
+          readZone: antenna.readZone,
+          enabled: antenna.enabled
+        });
+      }
+      triggerUpdate();
+    }
+  };
+  const handleAntennaRssiChange = (reader, index, rssiOffset) => {
+    const antenna = reader.getAntenna(index);
+    if (antenna) {
+      antenna.rssiOffset = rssiOffset;
+      if (simulator.storage) {
+        simulator.storage.saveAntenna({
+          id: antenna.id,
+          readerId: antenna.readerId,
+          index: antenna.index,
+          gain: antenna.gain,
+          power: antenna.power,
+          frequency: antenna.frequency,
+          rssiOffset: antenna.rssiOffset,
+          readZone: antenna.readZone,
+          enabled: antenna.enabled
+        });
+      }
+      triggerUpdate();
+    }
+  };
+  const handleAntennaZoneChange = (reader, index, zone) => {
+    const antenna = reader.getAntenna(index);
+    if (antenna) {
+      antenna.readZone = zone;
+      if (simulator.storage) {
+        simulator.storage.saveAntenna({
+          id: antenna.id,
+          readerId: antenna.readerId,
+          index: antenna.index,
+          gain: antenna.gain,
+          power: antenna.power,
+          frequency: antenna.frequency,
+          rssiOffset: antenna.rssiOffset,
+          readZone: antenna.readZone,
+          enabled: antenna.enabled
+        });
+      }
+      triggerUpdate();
+    }
+  };
+  return /* @__PURE__ */ React2.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" } }, /* @__PURE__ */ React2.createElement("h2", { style: { fontSize: "20px", fontWeight: "bold", margin: 0 } }, "Virtual Readers (", readers.length, ")"), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      onClick: () => setShowAddForm(!showAddForm),
+      style: { backgroundColor: "#00E5EE", color: "#0F172A", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    showAddForm ? "Close Form" : "\u2795 Add Reader"
+  )), showAddForm && /* @__PURE__ */ React2.createElement("div", { style: { backgroundColor: "#1E293B", padding: "20px", borderRadius: "8px", border: "1px solid #00E5EE", marginBottom: "20px", display: "flex", flexDirection: "column", gap: "16px" } }, /* @__PURE__ */ React2.createElement("h3", { style: { margin: 0, fontSize: "16px", color: "#00E5EE" } }, "Configure New RFID Reader"), /* @__PURE__ */ React2.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "16px" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Reader Name"), /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "e.g. Warehouse Gate A...",
+      value: readerName,
+      onChange: (e) => setReaderName(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    }
+  )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Vendor"), /* @__PURE__ */ React2.createElement(
+    "select",
+    {
+      value: vendor,
+      onChange: (e) => setVendor(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    },
+    /* @__PURE__ */ React2.createElement("option", { value: "RFID Softwares" }, "RFID Softwares"),
+    /* @__PURE__ */ React2.createElement("option", { value: "Impinj" }, "Impinj"),
+    /* @__PURE__ */ React2.createElement("option", { value: "Zebra" }, "Zebra"),
+    /* @__PURE__ */ React2.createElement("option", { value: "ID Tech" }, "ID Tech"),
+    /* @__PURE__ */ React2.createElement("option", { value: "Identium" }, "Identium"),
+    /* @__PURE__ */ React2.createElement("option", { value: "Realtime" }, "Realtime"),
+    /* @__PURE__ */ React2.createElement("option", { value: "Generic" }, "Generic")
+  )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Type & Ports"), /* @__PURE__ */ React2.createElement(
+    "select",
+    {
+      value: readerType,
+      onChange: (e) => setReaderType(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    },
+    /* @__PURE__ */ React2.createElement("option", { value: "Desktop Reader" }, "Desktop Reader (1 Port)"),
+    /* @__PURE__ */ React2.createElement("option", { value: "Integrated Reader" }, "Integrated Reader (2 Ports)"),
+    /* @__PURE__ */ React2.createElement("option", { value: "4-Port Reader" }, "4-Port Reader (4 Ports)"),
+    /* @__PURE__ */ React2.createElement("option", { value: "8-Port Reader" }, "8-Port Reader (8 Ports)"),
+    /* @__PURE__ */ React2.createElement("option", { value: "16-Port Reader" }, "16-Port Reader (16 Ports)")
+  ))), /* @__PURE__ */ React2.createElement("div", { style: { borderTop: "1px dashed #334155", paddingTop: "16px" } }, /* @__PURE__ */ React2.createElement("h4", { style: { margin: "0 0 12px 0", fontSize: "14px", color: "#00E5EE" } }, "\u2699\uFE0F Default Simulation Settings"), /* @__PURE__ */ React2.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "16px" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Read Mode"), /* @__PURE__ */ React2.createElement(
+    "select",
+    {
+      value: readMode,
+      onChange: (e) => setReadMode(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    },
+    /* @__PURE__ */ React2.createElement("option", { value: "continuous" }, "Continuous Read"),
+    /* @__PURE__ */ React2.createElement("option", { value: "periodic" }, "Periodic Read")
+  )), readMode === "periodic" && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px", flex: 1 } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Interval"), /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      type: "number",
+      min: 1,
+      value: readIntervalValue,
+      onChange: (e) => setReadIntervalValue(parseInt(e.target.value, 10)),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF", width: "100%" }
+    }
+  )), /* @__PURE__ */ React2.createElement(
+    "select",
+    {
+      value: readIntervalUnit,
+      onChange: (e) => setReadIntervalUnit(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF", height: "37px" }
+    },
+    /* @__PURE__ */ React2.createElement("option", { value: "seconds" }, "Seconds"),
+    /* @__PURE__ */ React2.createElement("option", { value: "minutes" }, "Minutes"),
+    /* @__PURE__ */ React2.createElement("option", { value: "hours" }, "Hours")
+  )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Max Read Rate Limit"), /* @__PURE__ */ React2.createElement(
+    "select",
+    {
+      value: readRate,
+      onChange: (e) => setReadRate(parseInt(e.target.value, 10)),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    },
+    /* @__PURE__ */ React2.createElement("option", { value: 0 }, "Unlimited"),
+    /* @__PURE__ */ React2.createElement("option", { value: 1 }, "1 tag/sec"),
+    /* @__PURE__ */ React2.createElement("option", { value: 10 }, "10 tags/sec"),
+    /* @__PURE__ */ React2.createElement("option", { value: 100 }, "100 tags/sec"),
+    /* @__PURE__ */ React2.createElement("option", { value: 1e3 }, "1000 tags/sec")
+  )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "EPC Filter Prefix"), /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "e.g. E200",
+      value: epcFilterPrefix,
+      onChange: (e) => setEpcFilterPrefix(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    }
+  )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "EPC Range Start"), /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "e.g. E20000000001",
+      value: epcFilterStart,
+      onChange: (e) => setEpcFilterStart(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    }
+  )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "EPC Range End"), /* @__PURE__ */ React2.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder: "e.g. E20000000010",
+      value: epcFilterEnd,
+      onChange: (e) => setEpcFilterEnd(e.target.value),
+      style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#0F172A", color: "#FFF" }
+    }
+  )))), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: "10px", marginTop: "10px" } }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      onClick: handleAddReader,
+      style: { backgroundColor: "#00E5EE", color: "#0F172A", border: "none", padding: "8px 24px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "Confirm and Add"
+  ), /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      onClick: () => setShowAddForm(false),
+      style: { backgroundColor: "#334155", color: "#FFF", border: "none", padding: "8px 24px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "Cancel"
+  ))), /* @__PURE__ */ React2.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr", gap: "16px" } }, readers.map((r) => {
+    const isExpanded = expandedReaderId === r.id;
+    return /* @__PURE__ */ React2.createElement("div", { key: r.id, style: { backgroundColor: "#1E293B", padding: "20px", borderRadius: "8px", border: "1px solid #334155" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("span", { style: { fontWeight: "bold", fontSize: "18px", marginRight: "12px" } }, r.name), /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "12px", color: "#64748B", fontFamily: "monospace" } }, "ID: ", r.id)), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React2.createElement(ReaderStatusBadge, { status: r.status }), /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => setExpandedReaderId(isExpanded ? null : r.id),
+        style: { backgroundColor: "#334155", color: "#FFF", border: "none", padding: "6px 12px", borderRadius: "6px", cursor: "pointer", fontSize: "13px" }
+      },
+      isExpanded ? "Hide Config" : "Configure Reader"
+    ))), /* @__PURE__ */ React2.createElement("div", { style: { fontSize: "13px", color: "#94A3B8", marginTop: "12px", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "16px" } }, /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("strong", null, "Vendor:"), " ", r.vendor, " (", r.model, ")"), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("strong", null, "Address:"), " ", r.ip, ":", r.port), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("strong", null, "Protocol:"), " ", r.protocol), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("strong", null, "Antenna Ports:"), " ", r.antennas.size, " ports")), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: "8px", marginTop: "16px" } }, r.status === "ONLINE" ? /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => {
+          simulator.stopReader(r.id);
+          triggerUpdate();
+        },
+        style: { backgroundColor: "#EF4444", color: "#FFF", border: "none", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontSize: "13px", fontWeight: "bold" }
+      },
+      "\u23F9 Stop Simulation"
+    ) : /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => {
+          simulator.startReader(r.id);
+          triggerUpdate();
+        },
+        style: { backgroundColor: "#10B981", color: "#FFF", border: "none", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontSize: "13px", fontWeight: "bold" }
+      },
+      "\u25B6 Start Simulation"
+    ), /* @__PURE__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => {
+          simulator.removeReader(r.id);
+          triggerUpdate();
+        },
+        style: { backgroundColor: "#334155", color: "#FFF", border: "none", padding: "6px 14px", borderRadius: "6px", cursor: "pointer", fontSize: "13px", fontWeight: "bold" }
+      },
+      "\u{1F5D1} Delete Reader"
+    )), isExpanded && /* @__PURE__ */ React2.createElement("div", { style: { marginTop: "20px", borderTop: "1px solid #334155", paddingTop: "20px" } }, /* @__PURE__ */ React2.createElement("div", { style: { marginBottom: "24px" } }, /* @__PURE__ */ React2.createElement("h4", { style: { margin: "0 0 16px", fontSize: "15px", color: "#00E5EE" } }, "\u2699\uFE0F Simulation & Filtering Settings"), /* @__PURE__ */ React2.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "16px", backgroundColor: "#0F172A", padding: "16px", borderRadius: "8px", border: "1px solid #1E293B" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Read Mode"), /* @__PURE__ */ React2.createElement(
+      "select",
+      {
+        value: r.readMode,
+        onChange: (e) => handleReaderSettingsChange(r, "readMode", e.target.value),
+        style: { padding: "6px", borderRadius: "6px", backgroundColor: "#1E293B", color: "#FFF", border: "1px solid #334155" }
+      },
+      /* @__PURE__ */ React2.createElement("option", { value: "continuous" }, "Continuous Read"),
+      /* @__PURE__ */ React2.createElement("option", { value: "periodic" }, "Periodic Read")
+    )), r.readMode === "periodic" && /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "flex-end" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px", flex: 1 } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Interval"), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "number",
+        min: 1,
+        value: r.readIntervalValue ?? 1,
+        onChange: (e) => handleReaderSettingsChange(r, "readIntervalValue", parseInt(e.target.value, 10)),
+        style: { padding: "6px", borderRadius: "6px", backgroundColor: "#1E293B", color: "#FFF", border: "1px solid #334155", width: "100%" }
+      }
+    )), /* @__PURE__ */ React2.createElement(
+      "select",
+      {
+        value: r.readIntervalUnit,
+        onChange: (e) => handleReaderSettingsChange(r, "readIntervalUnit", e.target.value),
+        style: { padding: "6px", borderRadius: "6px", backgroundColor: "#1E293B", color: "#FFF", border: "1px solid #334155", height: "33px" }
+      },
+      /* @__PURE__ */ React2.createElement("option", { value: "seconds" }, "Seconds"),
+      /* @__PURE__ */ React2.createElement("option", { value: "minutes" }, "Minutes"),
+      /* @__PURE__ */ React2.createElement("option", { value: "hours" }, "Hours")
+    )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Read Rate Limit"), /* @__PURE__ */ React2.createElement(
+      "select",
+      {
+        value: r.readRate ?? 0,
+        onChange: (e) => handleReaderSettingsChange(r, "readRate", parseInt(e.target.value, 10)),
+        style: { padding: "6px", borderRadius: "6px", backgroundColor: "#1E293B", color: "#FFF", border: "1px solid #334155" }
+      },
+      /* @__PURE__ */ React2.createElement("option", { value: 0 }, "Unlimited"),
+      /* @__PURE__ */ React2.createElement("option", { value: 1 }, "1 tag/sec"),
+      /* @__PURE__ */ React2.createElement("option", { value: 10 }, "10 tags/sec"),
+      /* @__PURE__ */ React2.createElement("option", { value: 100 }, "100 tags/sec"),
+      /* @__PURE__ */ React2.createElement("option", { value: 1e3 }, "1000 tags/sec")
+    )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "EPC Filter Prefix"), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "e.g. E200",
+        value: r.epcFilterPrefix ?? "",
+        onChange: (e) => handleReaderSettingsChange(r, "epcFilterPrefix", e.target.value),
+        style: { padding: "6px", borderRadius: "6px", backgroundColor: "#1E293B", color: "#FFF", border: "1px solid #334155" }
+      }
+    )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "EPC Range Start"), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "e.g. E20000000001",
+        value: r.epcFilterStart ?? "",
+        onChange: (e) => handleReaderSettingsChange(r, "epcFilterStart", e.target.value),
+        style: { padding: "6px", borderRadius: "6px", backgroundColor: "#1E293B", color: "#FFF", border: "1px solid #334155" }
+      }
+    )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "EPC Range End"), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "e.g. E20000000010",
+        value: r.epcFilterEnd ?? "",
+        onChange: (e) => handleReaderSettingsChange(r, "epcFilterEnd", e.target.value),
+        style: { padding: "6px", borderRadius: "6px", backgroundColor: "#1E293B", color: "#FFF", border: "1px solid #334155" }
+      }
+    )))), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("h4", { style: { margin: "0 0 16px", fontSize: "15px", color: "#00E5EE" } }, "\u{1F4E1} Antenna Configuration"), /* @__PURE__ */ React2.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "16px" } }, Array.from(r.antennas.values()).map((ant) => /* @__PURE__ */ React2.createElement("div", { key: ant.id, style: { backgroundColor: "#0F172A", padding: "16px", borderRadius: "8px", border: ant.enabled ? "1px solid #00E5EE" : "1px solid #1E293B", display: "flex", flexDirection: "column", gap: "12px" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontWeight: "bold", fontSize: "14px", color: ant.enabled ? "#FFF" : "#64748B" } }, "Port ", ant.index), /* @__PURE__ */ React2.createElement("label", { style: { display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", fontSize: "12px" } }, /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: ant.enabled,
+        onChange: () => handleToggleAntenna(r, ant.index),
+        style: { accentColor: "#00E5EE" }
+      }
+    ), /* @__PURE__ */ React2.createElement("span", { style: { color: ant.enabled ? "#00E5EE" : "#64748B" } }, ant.enabled ? "Enabled" : "Disabled"))), ant.enabled ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+      AntennaPowerSlider,
+      {
+        power: ant.power,
+        onChange: (val) => handleAntennaPowerChange(r, ant.index, val),
+        min: 0,
+        max: 33
+      }
+    ), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "#D1D5DB" } }, /* @__PURE__ */ React2.createElement("span", null, "Antenna Gain"), /* @__PURE__ */ React2.createElement("span", { style: { fontWeight: "bold", color: "#00E5EE" } }, ant.gain.toFixed(1), " dBi")), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max: 15,
+        step: 0.5,
+        value: ant.gain,
+        onChange: (e) => handleAntennaGainChange(r, ant.index, parseFloat(e.target.value)),
+        style: { accentColor: "#00E5EE", cursor: "pointer" }
+      }
+    )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "#D1D5DB" } }, /* @__PURE__ */ React2.createElement("span", null, "RSSI Offset"), /* @__PURE__ */ React2.createElement("span", { style: { fontWeight: "bold", color: "#00E5EE" } }, ant.rssiOffset >= 0 ? "+" : "", ant.rssiOffset.toFixed(1), " dB")), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "range",
+        min: -20,
+        max: 20,
+        step: 0.5,
+        value: ant.rssiOffset,
+        onChange: (e) => handleAntennaRssiChange(r, ant.index, parseFloat(e.target.value)),
+        style: { accentColor: "#00E5EE", cursor: "pointer" }
+      }
+    )), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "4px" } }, /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "13px", color: "#D1D5DB" } }, "Coverage Read Zone"), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "Zone identifier...",
+        value: ant.readZone,
+        onChange: (e) => handleAntennaZoneChange(r, ant.index, e.target.value),
+        style: { padding: "6px 10px", fontSize: "13px", borderRadius: "6px", border: "1px solid #334155", backgroundColor: "#1E293B", color: "#FFF" }
+      }
+    ))) : /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "140px", color: "#64748B", fontSize: "13px", border: "1px dashed #334155", borderRadius: "6px" } }, "Antenna port disabled")))))));
+  })));
+};
+
+// src/views/TagsView.tsx
+import React3, { useState as useState3 } from "react";
+import { TagGenerator, TagSerializer } from "@openrfid/tags";
+var TagsView = ({ simulator, refresh }) => {
+  const tags = simulator.getAllTags();
+  const [batchCount, setBatchCount] = useState3(10);
+  const [genType, setGenType] = useState3("sequential");
+  const handleGenerate = () => {
+    const batch = TagGenerator.generateBatch({ count: batchCount, type: genType });
+    simulator.addTagBatch(batch);
+    refresh();
+  };
+  const handleExportCSV = () => {
+    const csv = TagSerializer.toCSV(tags);
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "tags_export.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ React3.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" } }, /* @__PURE__ */ React3.createElement("h2", { style: { fontSize: "20px", fontWeight: "bold", margin: 0 } }, "Simulated RFID Tags (", tags.length, ")"), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React3.createElement(
+    "select",
+    {
+      value: genType,
+      onChange: (e) => setGenType(e.target.value),
+      style: { padding: "8px", borderRadius: "6px", backgroundColor: "#0F172A", color: "#FFF", border: "1px solid #334155" }
+    },
+    /* @__PURE__ */ React3.createElement("option", { value: "sequential" }, "Sequential EPC"),
+    /* @__PURE__ */ React3.createElement("option", { value: "random" }, "Random Hex"),
+    /* @__PURE__ */ React3.createElement("option", { value: "sgtin96" }, "SGTIN-96 GS1")
+  ), /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "number",
+      value: batchCount,
+      onChange: (e) => setBatchCount(parseInt(e.target.value, 10)),
+      style: { width: "60px", padding: "8px", borderRadius: "6px", backgroundColor: "#0F172A", color: "#FFF", border: "1px solid #334155" }
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: handleGenerate,
+      style: { backgroundColor: "#00E5EE", color: "#0F172A", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "Generate Tags"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: handleExportCSV,
+      style: { backgroundColor: "#334155", color: "#FFF", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "Export CSV"
+  ))), /* @__PURE__ */ React3.createElement("div", { style: { backgroundColor: "#1E293B", borderRadius: "8px", border: "1px solid #334155", overflow: "hidden" } }, /* @__PURE__ */ React3.createElement("table", { style: { width: "100%", borderCollapse: "collapse", textAlign: "left", fontSize: "13px" } }, /* @__PURE__ */ React3.createElement("thead", null, /* @__PURE__ */ React3.createElement("tr", { style: { backgroundColor: "#0F172A", borderBottom: "1px solid #334155", color: "#94A3B8" } }, /* @__PURE__ */ React3.createElement("th", { style: { padding: "12px 16px" } }, "EPC Header"), /* @__PURE__ */ React3.createElement("th", { style: { padding: "12px 16px" } }, "TID"), /* @__PURE__ */ React3.createElement("th", { style: { padding: "12px 16px" } }, "Protocol"), /* @__PURE__ */ React3.createElement("th", { style: { padding: "12px 16px" } }, "Read Count"), /* @__PURE__ */ React3.createElement("th", { style: { padding: "12px 16px" } }, "Current RSSI"), /* @__PURE__ */ React3.createElement("th", { style: { padding: "12px 16px" } }, "Action"))), /* @__PURE__ */ React3.createElement("tbody", null, tags.slice(0, 100).map((t) => /* @__PURE__ */ React3.createElement("tr", { key: t.id, style: { borderBottom: "1px solid #334155" } }, /* @__PURE__ */ React3.createElement("td", { style: { padding: "12px 16px", fontFamily: "monospace", fontWeight: "bold", color: "#00E5EE" } }, t.epc), /* @__PURE__ */ React3.createElement("td", { style: { padding: "12px 16px", fontFamily: "monospace", color: "#94A3B8" } }, t.tid), /* @__PURE__ */ React3.createElement("td", { style: { padding: "12px 16px" } }, t.protocol), /* @__PURE__ */ React3.createElement("td", { style: { padding: "12px 16px" } }, t.readCount), /* @__PURE__ */ React3.createElement("td", { style: { padding: "12px 16px", color: "#10B981" } }, t.currentRssi, " dBm"), /* @__PURE__ */ React3.createElement("td", { style: { padding: "12px 16px" } }, /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => {
+        simulator.removeTag(t.epc);
+        refresh();
+      },
+      style: { backgroundColor: "#EF4444", color: "#FFF", border: "none", padding: "4px 8px", borderRadius: "4px", cursor: "pointer" }
+    },
+    "Remove"
+  ))))))));
+};
+
+// src/views/EventMonitorView.tsx
+import React4, { useState as useState4, useEffect as useEffect2 } from "react";
+import { TagSignalMeter } from "@openrfid/ui";
+var EventMonitorView = ({ eventBus, storage, onViewHistory }) => {
+  const [events, setEvents] = useState4([]);
+  const [paused, setPaused] = useState4(false);
+  const [totalStored, setTotalStored] = useState4(0);
+  useEffect2(() => {
+    if (!storage) return;
+    const loadCount = async () => {
+      const stats = await storage.getEventStats();
+      setTotalStored(stats.totalEvents);
+    };
+    loadCount();
+    const interval = setInterval(loadCount, 2e3);
+    return () => clearInterval(interval);
+  }, [storage]);
+  useEffect2(() => {
+    const unsub = eventBus.on("TagDetected", (payload) => {
+      if (paused) return;
+      const item = {
+        id: `ev_${Date.now()}_${Math.random()}`,
+        timestamp: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
+        readerId: payload.readerId,
+        antennaId: payload.antennaId,
+        epc: payload.epc,
+        rssi: payload.rssi,
+        protocol: payload.protocol || "GEN2"
+      };
+      setEvents((prev) => [item, ...prev.slice(0, 199)]);
+    });
+    return () => unsub();
+  }, [eventBus, paused]);
+  return /* @__PURE__ */ React4.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px", flexWrap: "wrap", gap: "12px" } }, /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("h2", { style: { fontSize: "20px", fontWeight: "bold", margin: 0 } }, "Real-Time Event Stream (", events.length, ")"), storage && /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "13px", color: "#94A3B8", marginTop: "4px" } }, "Total persisted events: ", /* @__PURE__ */ React4.createElement("strong", { style: { color: "#00E5EE" } }, totalStored.toLocaleString()), " in database")), /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", gap: "8px" } }, onViewHistory && /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      onClick: onViewHistory,
+      style: { backgroundColor: "#7C3AED", color: "#FFF", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "\u{1F4CA} View Storage History"
+  ), /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      onClick: () => setPaused(!paused),
+      style: { backgroundColor: paused ? "#10B981" : "#F59E0B", color: "#FFF", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    paused ? "Resume Stream" : "Pause Stream"
+  ), /* @__PURE__ */ React4.createElement(
+    "button",
+    {
+      onClick: () => setEvents([]),
+      style: { backgroundColor: "#334155", color: "#FFF", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer", fontWeight: "bold" }
+    },
+    "Clear Stream"
+  ))), /* @__PURE__ */ React4.createElement("div", { style: { backgroundColor: "#1E293B", borderRadius: "8px", border: "1px solid #334155", overflow: "hidden" } }, /* @__PURE__ */ React4.createElement("table", { style: { width: "100%", borderCollapse: "collapse", textAlign: "left", fontSize: "13px" } }, /* @__PURE__ */ React4.createElement("thead", null, /* @__PURE__ */ React4.createElement("tr", { style: { backgroundColor: "#0F172A", borderBottom: "1px solid #334155", color: "#94A3B8" } }, /* @__PURE__ */ React4.createElement("th", { style: { padding: "12px 16px" } }, "Time"), /* @__PURE__ */ React4.createElement("th", { style: { padding: "12px 16px" } }, "Reader"), /* @__PURE__ */ React4.createElement("th", { style: { padding: "12px 16px" } }, "Antenna Port"), /* @__PURE__ */ React4.createElement("th", { style: { padding: "12px 16px" } }, "Tag EPC"), /* @__PURE__ */ React4.createElement("th", { style: { padding: "12px 16px" } }, "Signal (RSSI)"), /* @__PURE__ */ React4.createElement("th", { style: { padding: "12px 16px" } }, "Protocol"))), /* @__PURE__ */ React4.createElement("tbody", null, events.length === 0 ? /* @__PURE__ */ React4.createElement("tr", null, /* @__PURE__ */ React4.createElement("td", { colSpan: 6, style: { padding: "30px", textAlign: "center", color: "#64748B" } }, "No real-time events. Start simulated readers to see tag detections live.")) : events.map((e) => /* @__PURE__ */ React4.createElement("tr", { key: e.id, style: { borderBottom: "1px solid #334155" } }, /* @__PURE__ */ React4.createElement("td", { style: { padding: "12px 16px", color: "#94A3B8" } }, e.timestamp), /* @__PURE__ */ React4.createElement("td", { style: { padding: "12px 16px", fontWeight: "bold" } }, e.readerId), /* @__PURE__ */ React4.createElement("td", { style: { padding: "12px 16px" } }, "Port #", e.antennaId), /* @__PURE__ */ React4.createElement("td", { style: { padding: "12px 16px", fontFamily: "monospace", fontWeight: "bold", color: "#00E5EE" } }, e.epc), /* @__PURE__ */ React4.createElement("td", { style: { padding: "12px 16px" } }, /* @__PURE__ */ React4.createElement(TagSignalMeter, { rssi: e.rssi })), /* @__PURE__ */ React4.createElement("td", { style: { padding: "12px 16px" } }, e.protocol)))))));
+};
+
+// src/views/EventHistoryView.tsx
+import React5, { useState as useState5, useEffect as useEffect3, useCallback } from "react";
+var PAGE_SIZE = 1e3;
+var card2 = {
+  backgroundColor: "#1E293B",
+  borderRadius: "10px",
+  border: "1px solid #334155",
+  padding: "20px"
+};
+var btn = (color) => ({
+  backgroundColor: color,
+  color: "#fff",
+  border: "none",
+  padding: "6px 14px",
+  borderRadius: "6px",
+  cursor: "pointer",
+  fontWeight: "bold",
+  fontSize: "13px"
+});
+var EventHistoryView = ({ storage }) => {
+  const [stats, setStats] = useState5(null);
+  const [expandedDate, setExpandedDate] = useState5(null);
+  const [events, setEvents] = useState5([]);
+  const [page, setPage] = useState5(0);
+  const [totalCount, setTotalCount] = useState5(0);
+  const [filterEpc, setFilterEpc] = useState5("");
+  const [filterReader, setFilterReader] = useState5("");
+  const [filterProtocol, setFilterProtocol] = useState5("");
+  const [confirmClear, setConfirmClear] = useState5(null);
+  const [loading, setLoading] = useState5(false);
+  const loadStats = useCallback(async () => {
+    const s = await storage.getEventStats();
+    setStats(s);
+  }, [storage]);
+  useEffect3(() => {
+    loadStats();
+    const interval = setInterval(loadStats, 5e3);
+    return () => clearInterval(interval);
+  }, [loadStats]);
+  const loadDayEvents = useCallback(async (date, pageNum = 0) => {
+    setLoading(true);
+    const [evts, count] = await Promise.all([
+      storage.getEvents({
+        date,
+        epc: filterEpc || void 0,
+        readerId: filterReader || void 0,
+        protocol: filterProtocol || void 0,
+        limit: PAGE_SIZE,
+        offset: pageNum * PAGE_SIZE
+      }),
+      storage.getEventCount({
+        date,
+        epc: filterEpc || void 0,
+        readerId: filterReader || void 0,
+        protocol: filterProtocol || void 0
+      })
+    ]);
+    setEvents(evts);
+    setTotalCount(count);
+    setPage(pageNum);
+    setLoading(false);
+  }, [storage, filterEpc, filterReader, filterProtocol]);
+  const handleExpandDate = (date) => {
+    if (expandedDate === date) {
+      setExpandedDate(null);
+      setEvents([]);
+    } else {
+      setExpandedDate(date);
+      loadDayEvents(date, 0);
+    }
+  };
+  const handleDeleteDay = async (date) => {
+    if (!window.confirm(`Delete ALL events for ${date}? This cannot be undone.`)) return;
+    await storage.deleteEventsByDate(date);
+    if (expandedDate === date) {
+      setExpandedDate(null);
+      setEvents([]);
+    }
+    await loadStats();
+  };
+  const handleExportCSV = async (date) => {
+    const evts = await storage.getEvents({ date, limit: 1e5 });
+    const csv = [
+      "id,date,timestamp,readerId,antennaId,epc,rssi,protocol",
+      ...evts.map((e) => `${e.id},${e.date},${e.timestamp},${e.readerId},${e.antennaId},${e.epc},${e.rssi},${e.protocol}`)
+    ].join("\n");
+    const blob = new Blob([csv], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `openrfid-events-${date}.csv`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const handleClearEvents = async () => {
+    await storage.clearAllEvents();
+    setConfirmClear(null);
+    setExpandedDate(null);
+    setEvents([]);
+    await loadStats();
+  };
+  const handleClearAll = async () => {
+    await storage.clearAllData();
+    setConfirmClear(null);
+    setExpandedDate(null);
+    setEvents([]);
+    await loadStats();
+  };
+  const totalPages = Math.ceil(totalCount / PAGE_SIZE);
+  return /* @__PURE__ */ React5.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React5.createElement("h2", { style: { fontSize: "20px", fontWeight: "bold", marginBottom: "20px" } }, "\u{1F4CA} Event History & Storage Manager"), stats && /* @__PURE__ */ React5.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "12px", marginBottom: "20px" } }, [
+    { label: "Total Events", value: stats.totalEvents.toLocaleString(), color: "#00E5EE" },
+    { label: "Days with Data", value: String(stats.totalDays), color: "#10B981" },
+    { label: "Oldest Day", value: stats.oldestEventDate ?? "\u2014", color: "#94A3B8" },
+    { label: "Newest Day", value: stats.newestEventDate ?? "\u2014", color: "#94A3B8" }
+  ].map((stat) => /* @__PURE__ */ React5.createElement("div", { key: stat.label, style: card2 }, /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "12px", color: "#94A3B8" } }, stat.label), /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "22px", fontWeight: "bold", color: stat.color, marginTop: "4px" } }, stat.value)))), /* @__PURE__ */ React5.createElement("div", { style: { ...card2, display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ React5.createElement("span", { style: { fontWeight: "bold", fontSize: "15px" } }, "Day-by-Day Event Log"), /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React5.createElement("button", { style: btn("#EF4444"), onClick: () => setConfirmClear("events") }, "\u{1F5D1} Clear All Events"), /* @__PURE__ */ React5.createElement("button", { style: btn("#7C3AED"), onClick: () => setConfirmClear("all") }, "\u2622\uFE0F Clear All Data"))), confirmClear && /* @__PURE__ */ React5.createElement("div", { style: { ...card2, border: "1px solid #EF4444", marginBottom: "16px", backgroundColor: "#1F0A0A" } }, /* @__PURE__ */ React5.createElement("p", { style: { color: "#FCA5A5", marginBottom: "12px" } }, confirmClear === "events" ? "\u26A0\uFE0F This will permanently delete ALL event history. Readers and tags are kept." : "\u2622\uFE0F This will permanently delete ALL readers, tags, and event history. Cannot be undone."), /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React5.createElement("button", { style: btn("#EF4444"), onClick: confirmClear === "events" ? handleClearEvents : handleClearAll }, "Confirm Delete"), /* @__PURE__ */ React5.createElement("button", { style: { ...btn("#334155") }, onClick: () => setConfirmClear(null) }, "Cancel"))), stats?.eventsByDate.length === 0 && /* @__PURE__ */ React5.createElement("div", { style: { ...card2, textAlign: "center", color: "#64748B", padding: "40px" } }, "No event history yet. Start a reader and let it run to generate events."), stats?.eventsByDate.map(({ date, count }) => /* @__PURE__ */ React5.createElement("div", { key: date, style: { ...card2, marginBottom: "10px" } }, /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React5.createElement("span", { style: { fontSize: "18px", cursor: "pointer" }, onClick: () => handleExpandDate(date) }, expandedDate === date ? "\u25BC" : "\u25B6"), /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("span", { style: { fontWeight: "bold", fontSize: "15px", cursor: "pointer" }, onClick: () => handleExpandDate(date) }, date), /* @__PURE__ */ React5.createElement("span", { style: { fontSize: "13px", color: "#94A3B8", marginLeft: "10px" } }, count.toLocaleString(), " events"))), /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React5.createElement("button", { style: btn("#0EA5E9"), onClick: () => handleExpandDate(date) }, expandedDate === date ? "Collapse" : "View"), /* @__PURE__ */ React5.createElement("button", { style: btn("#10B981"), onClick: () => handleExportCSV(date) }, "Export CSV"), /* @__PURE__ */ React5.createElement("button", { style: btn("#EF4444"), onClick: () => handleDeleteDay(date) }, "Delete"))), expandedDate === date && /* @__PURE__ */ React5.createElement("div", { style: { marginTop: "16px" } }, /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", gap: "10px", marginBottom: "12px", flexWrap: "wrap" } }, /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      placeholder: "Filter by EPC...",
+      value: filterEpc,
+      onChange: (e) => setFilterEpc(e.target.value),
+      style: { backgroundColor: "#0F172A", border: "1px solid #334155", color: "#F8FAFC", padding: "6px 10px", borderRadius: "6px", fontSize: "13px", width: "180px" }
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      placeholder: "Filter by Reader...",
+      value: filterReader,
+      onChange: (e) => setFilterReader(e.target.value),
+      style: { backgroundColor: "#0F172A", border: "1px solid #334155", color: "#F8FAFC", padding: "6px 10px", borderRadius: "6px", fontSize: "13px", width: "180px" }
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "select",
+    {
+      value: filterProtocol,
+      onChange: (e) => setFilterProtocol(e.target.value),
+      style: { backgroundColor: "#0F172A", border: "1px solid #334155", color: "#F8FAFC", padding: "6px 10px", borderRadius: "6px", fontSize: "13px" }
+    },
+    /* @__PURE__ */ React5.createElement("option", { value: "" }, "All Protocols"),
+    /* @__PURE__ */ React5.createElement("option", { value: "GEN2" }, "GEN2"),
+    /* @__PURE__ */ React5.createElement("option", { value: "ISO15693" }, "ISO15693"),
+    /* @__PURE__ */ React5.createElement("option", { value: "ISO14443A" }, "ISO14443A")
+  ), /* @__PURE__ */ React5.createElement("button", { style: btn("#00E5EE"), onClick: () => loadDayEvents(date, 0) }, "Search")), /* @__PURE__ */ React5.createElement("div", { style: { overflowX: "auto" } }, /* @__PURE__ */ React5.createElement("table", { style: { width: "100%", borderCollapse: "collapse", fontSize: "13px" } }, /* @__PURE__ */ React5.createElement("thead", null, /* @__PURE__ */ React5.createElement("tr", { style: { backgroundColor: "#0F172A", color: "#94A3B8" } }, ["Time", "Reader", "Ant", "EPC", "RSSI", "Protocol"].map((h) => /* @__PURE__ */ React5.createElement("th", { key: h, style: { padding: "8px 12px", textAlign: "left", borderBottom: "1px solid #334155" } }, h)))), /* @__PURE__ */ React5.createElement("tbody", null, loading ? /* @__PURE__ */ React5.createElement("tr", null, /* @__PURE__ */ React5.createElement("td", { colSpan: 6, style: { padding: "20px", textAlign: "center", color: "#64748B" } }, "Loading...")) : events.length === 0 ? /* @__PURE__ */ React5.createElement("tr", null, /* @__PURE__ */ React5.createElement("td", { colSpan: 6, style: { padding: "20px", textAlign: "center", color: "#64748B" } }, "No events match the current filters.")) : events.map((e) => /* @__PURE__ */ React5.createElement("tr", { key: e.id, style: { borderBottom: "1px solid #1E293B" } }, /* @__PURE__ */ React5.createElement("td", { style: { padding: "7px 12px", color: "#94A3B8" } }, e.timestamp.split("T")[1]?.split(".")[0] ?? e.timestamp), /* @__PURE__ */ React5.createElement("td", { style: { padding: "7px 12px" } }, e.readerId), /* @__PURE__ */ React5.createElement("td", { style: { padding: "7px 12px", color: "#94A3B8" } }, e.antennaId), /* @__PURE__ */ React5.createElement("td", { style: { padding: "7px 12px", fontFamily: "monospace", color: "#00E5EE" } }, e.epc), /* @__PURE__ */ React5.createElement("td", { style: { padding: "7px 12px", color: e.rssi > -60 ? "#10B981" : "#F59E0B" } }, e.rssi, " dBm"), /* @__PURE__ */ React5.createElement("td", { style: { padding: "7px 12px", color: "#94A3B8" } }, e.protocol)))))), totalPages > 1 && /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginTop: "12px", justifyContent: "center" } }, /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      style: btn(page > 0 ? "#334155" : "#1E293B"),
+      disabled: page === 0,
+      onClick: () => loadDayEvents(date, page - 1)
+    },
+    "\u2190 Prev"
+  ), /* @__PURE__ */ React5.createElement("span", { style: { color: "#94A3B8", fontSize: "13px" } }, "Page ", page + 1, " of ", totalPages, " (", totalCount.toLocaleString(), " events)"), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      style: btn(page < totalPages - 1 ? "#334155" : "#1E293B"),
+      disabled: page >= totalPages - 1,
+      onClick: () => loadDayEvents(date, page + 1)
+    },
+    "Next \u2192"
+  ))))));
+};
+
+// src/views/ProtocolsPluginsView.tsx
+import React6 from "react";
+var ProtocolsPluginsView = ({ pluginManager }) => {
+  const plugins = pluginManager.getAllPlugins();
+  return /* @__PURE__ */ React6.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React6.createElement("h2", { style: { fontSize: "20px", fontWeight: "bold", marginBottom: "20px" } }, "Protocol Servers & Installed Plugins"), /* @__PURE__ */ React6.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "16px" } }, plugins.map((p) => /* @__PURE__ */ React6.createElement("div", { key: p.metadata.name, style: { backgroundColor: "#1E293B", padding: "20px", borderRadius: "10px", border: "1px solid #334155" } }, /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React6.createElement("h3", { style: { margin: 0, fontSize: "16px", color: "#00E5EE" } }, p.metadata.name), /* @__PURE__ */ React6.createElement(
+    "span",
+    {
+      style: {
+        backgroundColor: p.state === "STARTED" ? "#10B981" : "#64748B",
+        color: "#FFF",
+        fontSize: "11px",
+        padding: "2px 8px",
+        borderRadius: "10px",
+        fontWeight: "bold"
+      }
+    },
+    p.state
+  )), /* @__PURE__ */ React6.createElement("div", { style: { fontSize: "12px", color: "#94A3B8", marginTop: "8px" } }, "v", p.metadata.version), /* @__PURE__ */ React6.createElement("p", { style: { fontSize: "13px", color: "#CBD5E1", marginTop: "10px" } }, p.metadata.description)))));
+};
+export {
+  DashboardView,
+  EventHistoryView,
+  EventMonitorView,
+  ProtocolsPluginsView,
+  ReadersView,
+  TagsView
+};