@procaaso/alphinity-ui-components 1.10.0 → 1.11.0

package/dist/index.js

@@ -283,6 +283,20 @@ var FORCED_MARK_COLOR = {
   text: "#5b21b6",
   border: "#7c3aed"
 };
+var UNKNOWN_MARK_COLOR = {
+  fill: "#ebebf5",
+  stroke: "#8f8fc2",
+  bg: "#ebebf5",
+  text: "#4f4f8a",
+  border: "#8f8fc2"
+};
+var UNKNOWN_MARK_COLOR_DARK = {
+  fill: "#23263a",
+  stroke: "#6f74a3",
+  bg: "#23263a",
+  text: "#b9bbdb",
+  border: "#6f74a3"
+};
 var STATUS_ALIASES = {
   running: "normal",
   stopped: "off"
@@ -756,11 +770,15 @@ var StatusIndicator = ({
   labelPosition = "right",
   shape = "circle",
   led = true,
+  visible = true,
   forced = false,
   realValue,
   className = "",
   ...props
 }) => {
+  if (!visible) {
+    return null;
+  }
   const baseClass = "ui-status-indicator";
   const statusClass = status ? `ui-status-indicator--${status}` : "";
   const sizeClass = size ? `ui-status-indicator--${size}` : "";
@@ -3515,7 +3533,7 @@ var ThemeToggle = ({
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-import React13, { useCallback as useCallback8, useState as useState14, useEffect as useEffect12, useRef as useRef6 } from "react";
+import React13, { useCallback as useCallback8, useState as useState14, useEffect as useEffect13, useRef as useRef6 } from "react";
 
 // src/components/PIDCanvas/NodeRenderer.tsx
 import React9 from "react";
@@ -3546,6 +3564,25 @@ var mockSymbolLibrary = {
       tags: ["valve", "gate", "powered", "actuator"]
     }
   },
+  "status-indicator": {
+    id: "status-indicator",
+    name: "Status LED",
+    category: "instrument",
+    viewBox: { x: 0, y: 0, width: 24, height: 24 },
+    ports: [],
+    svgContent: `
+      <rect x="2" y="2" width="20" height="20"
+        rx="var(--led-rx, 50%)"
+        fill="var(--symbol-fill, #64748b)"
+        stroke="rgba(255,255,255,0.4)"
+        stroke-width="var(--led-bezel, 0)"
+        style="transform-box: fill-box; transform: rotate(var(--led-rotate, 0deg)); transform-origin: center; pointer-events: all;"/>
+    `,
+    metadata: {
+      description: "Status LED indicator driven by telemetry status color",
+      tags: ["status", "led", "indicator", "instrument"]
+    }
+  },
   "pump-positive-displacement": {
     id: "pump-positive-displacement",
     name: "Positive Displacement Pump",
@@ -4738,8 +4775,144 @@ function getAvailableSymbols() {
   return [...Object.keys(customSymbols), ...Object.keys(mockSymbolLibrary)];
 }
 
+// src/diagram/symbols/appearanceSchema.ts
+var COLOR_PRESETS = {
+  green: "#22c55e",
+  red: "#ef4444",
+  amber: "#f59e0b",
+  blue: "#3b82f6",
+  grey: "#64748b"
+};
+function resolvePresetColor(name) {
+  return name && COLOR_PRESETS[name] || COLOR_PRESETS.grey;
+}
+var COLOR_OPTIONS = Object.keys(COLOR_PRESETS);
+var STATUS_LED_APPEARANCE = [
+  {
+    key: "shape",
+    kind: "select",
+    label: "Shape",
+    options: ["circle", "square", "diamond"],
+    default: "circle"
+  },
+  {
+    key: "size",
+    kind: "select",
+    label: "Size",
+    target: "scale",
+    options: ["small", "medium", "large"],
+    default: "medium",
+    valueMap: { small: 0.75, medium: 1, large: 1.5 }
+  },
+  { key: "led", kind: "boolean", label: "Bezel ring", default: true },
+  { key: "glow", kind: "boolean", label: "Diffusion (glow)", default: false },
+  {
+    key: "animation",
+    kind: "select",
+    label: "Animation",
+    options: ["none", "pulse", "blink"],
+    default: "none"
+  },
+  {
+    key: "labelPosition",
+    kind: "select",
+    label: "Label position",
+    options: ["bottom", "top", "left", "right"],
+    default: "bottom"
+  },
+  // Color binding: a named signal drives the on/off color.
+  {
+    key: "colorSource",
+    kind: "tag",
+    label: "Color source (tag)",
+    default: "",
+    help: "Signal/tag that drives color. True (non-zero) shows On color; false shows Off color. Blank = unbound (grey)."
+  },
+  {
+    key: "onColor",
+    kind: "select",
+    label: "On color (true)",
+    options: COLOR_OPTIONS,
+    default: "green",
+    help: "Color when the Color source is true."
+  },
+  {
+    key: "offColor",
+    kind: "select",
+    label: "Off color (false)",
+    options: COLOR_OPTIONS,
+    default: "red",
+    help: "Color when the Color source is false."
+  },
+  // Visibility binding: an independent named signal drives show/hide.
+  {
+    key: "visibleSource",
+    kind: "tag",
+    label: "Visibility source (tag)",
+    default: "",
+    help: "Signal/tag that drives visibility. True shows the LED, false hides it. Blank = always visible (use the Visible checkbox)."
+  },
+  {
+    key: "visible",
+    kind: "boolean",
+    label: "Visible",
+    target: "visible",
+    default: true,
+    help: "Static show/hide, used only when no Visibility source is set."
+  }
+];
+var APPEARANCE_REGISTRY = {
+  "status-indicator": STATUS_LED_APPEARANCE
+};
+function getAppearanceSchema(symbolId) {
+  return APPEARANCE_REGISTRY[symbolId] ?? [];
+}
+function getAppearanceDefaults(symbolId) {
+  const out = {};
+  for (const field of getAppearanceSchema(symbolId)) {
+    if ((field.target ?? "metadata") === "metadata" && field.default !== void 0) {
+      out[field.key] = field.default;
+    }
+  }
+  return out;
+}
+function readAppearanceValue(node, field) {
+  if (field.target === "visible") {
+    return node.visible ?? field.default ?? true;
+  }
+  if (field.target === "scale") {
+    const scale = node.transform.scale ?? 1;
+    if (field.valueMap) {
+      let bestOption = field.options?.[0] ?? String(scale);
+      let bestDiff = Infinity;
+      for (const [option, value2] of Object.entries(field.valueMap)) {
+        const diff = Math.abs(value2 - scale);
+        if (diff < bestDiff) {
+          bestDiff = diff;
+          bestOption = option;
+        }
+      }
+      return bestOption;
+    }
+    return scale;
+  }
+  const value = node.metadata?.[field.key];
+  return value ?? field.default;
+}
+function writeAppearanceValue(node, field, value) {
+  if (field.target === "visible") {
+    return { visible: Boolean(value) };
+  }
+  if (field.target === "scale") {
+    const scale = field.valueMap ? field.valueMap[String(value)] ?? 1 : Number(value);
+    return { transform: { ...node.transform, scale } };
+  }
+  return { metadata: { ...node.metadata, [field.key]: value } };
+}
+
 // src/components/PIDCanvas/NodeRenderer.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+var HATCH_SIZE = 6;
 function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
@@ -4751,140 +4924,206 @@ function NodeRendererImpl({
   enableDrag = false,
   statusColorMap
 }) {
-  return /* @__PURE__ */ jsx16("g", { id: "layer-nodes", children: nodes2.filter((node) => node.visible !== false).map((node) => {
-    const symbol = getSymbolDefinition(node.symbolId);
-    const isSelected = selectedNodeIds?.has(node.id) ?? false;
-    const isDragging = draggingNodeId === node.id;
-    if (!symbol) {
-      return /* @__PURE__ */ jsxs12("g", { children: [
-        /* @__PURE__ */ jsx16(
-          "circle",
-          {
-            cx: node.transform.x,
-            cy: node.transform.y,
-            r: "15",
-            fill: "#ff0000",
-            opacity: "0.3",
-            stroke: "#ff0000",
-            strokeWidth: "2"
-          }
-        ),
-        /* @__PURE__ */ jsx16(
-          "text",
-          {
-            x: node.transform.x,
-            y: node.transform.y,
-            textAnchor: "middle",
-            dominantBaseline: "middle",
-            fontSize: "10",
-            fill: "#ff0000",
-            children: "?"
-          }
-        )
-      ] }, node.id);
-    }
-    const transforms = [];
-    const effectiveX = isDragging ? node.transform.x + dragOffset.x : node.transform.x;
-    const effectiveY = isDragging ? node.transform.y + dragOffset.y : node.transform.y;
-    transforms.push(`translate(${effectiveX}, ${effectiveY})`);
-    if (node.transform.rotation) {
-      const centerX = symbol.viewBox.width / 2;
-      const centerY = symbol.viewBox.height / 2;
-      transforms.push(`rotate(${node.transform.rotation}, ${centerX}, ${centerY})`);
-    }
-    if (node.transform.scale && node.transform.scale !== 1) {
-      const centerX = symbol.viewBox.width / 2;
-      const centerY = symbol.viewBox.height / 2;
-      transforms.push(
-        `translate(${centerX}, ${centerY}) scale(${node.transform.scale}) translate(${-centerX}, ${-centerY})`
-      );
-    }
-    if (node.transform.flipX || node.transform.flipY) {
-      const scaleX = node.transform.flipX ? -1 : 1;
-      const scaleY = node.transform.flipY ? -1 : 1;
-      const centerX = symbol.viewBox.width / 2;
-      const centerY = symbol.viewBox.height / 2;
-      transforms.push(
-        `translate(${centerX}, ${centerY}) scale(${scaleX}, ${scaleY}) translate(${-centerX}, ${-centerY})`
-      );
-    }
-    const statusEntry = resolveStatusColor(node.status, statusColorMap);
-    const fillColor = node.customColors?.fill ?? statusEntry.fill;
-    const strokeColor = node.customColors?.stroke ?? statusEntry.stroke;
-    return /* @__PURE__ */ jsxs12(
-      "g",
+  const hatchId = `pid-unknown-hatch-${React9.useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const hasUnknown = nodes2.some((n) => n.positionUnknown === true && n.visible !== false);
+  return /* @__PURE__ */ jsxs12("g", { id: "layer-nodes", children: [
+    hasUnknown && /* @__PURE__ */ jsx16("defs", { children: /* @__PURE__ */ jsxs12(
+      "pattern",
       {
-        "data-node-id": node.id,
-        "data-symbol-id": node.symbolId,
-        "data-selected": isSelected,
-        "data-dragging": isDragging,
-        transform: transforms.join(" "),
-        style: {
-          "--symbol-fill": fillColor,
-          "--symbol-stroke": strokeColor,
-          cursor: enableDrag ? isDragging ? "grabbing" : "grab" : onNodeClick ? "pointer" : "default"
-        },
-        onClick: (e) => {
-          e.stopPropagation();
-          onNodeClick?.(node.id, e);
-        },
-        onDoubleClick: (e) => {
-          e.stopPropagation();
-          onNodeDoubleClick?.(node.id, e);
-        },
-        onMouseDown: (e) => {
-          if (enableDrag) {
-            onNodeDragStart?.(node.id, e);
-          }
-        },
-        onTouchStart: (e) => {
-          if (enableDrag) {
-            e.stopPropagation();
-            onNodeDragStart?.(node.id, e);
-          }
-        },
+        id: hatchId,
+        "data-testid": "position-unknown-pattern",
+        patternUnits: "userSpaceOnUse",
+        width: HATCH_SIZE,
+        height: HATCH_SIZE,
+        patternTransform: "rotate(45)",
         children: [
-          isSelected && /* @__PURE__ */ jsx16(
-            "rect",
+          /* @__PURE__ */ jsx16("rect", { width: HATCH_SIZE, height: HATCH_SIZE, fill: UNKNOWN_MARK_COLOR.fill }),
+          /* @__PURE__ */ jsx16(
+            "line",
             {
-              x: "-5",
-              y: "-5",
-              width: symbol.viewBox.width + 10,
-              height: symbol.viewBox.height + 10,
-              fill: "none",
-              stroke: isDragging ? "#10b981" : "#3b82f6",
-              strokeWidth: isDragging ? "3" : "2",
-              strokeDasharray: "4 2",
-              rx: "2",
-              pointerEvents: "none"
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: HATCH_SIZE,
+              stroke: UNKNOWN_MARK_COLOR.text,
+              strokeWidth: "2"
             }
-          ),
+          )
+        ]
+      }
+    ) }),
+    nodes2.filter((node) => node.visible !== false).map((node) => {
+      const symbol = getSymbolDefinition(node.symbolId);
+      const isSelected = selectedNodeIds?.has(node.id) ?? false;
+      const isDragging = draggingNodeId === node.id;
+      if (!symbol) {
+        return /* @__PURE__ */ jsxs12("g", { children: [
           /* @__PURE__ */ jsx16(
-            "g",
+            "circle",
             {
-              dangerouslySetInnerHTML: { __html: symbol.svgContent },
-              "data-symbol-content": symbol.id,
-              style: { pointerEvents: "auto" }
+              cx: node.transform.x,
+              cy: node.transform.y,
+              r: "15",
+              fill: "#ff0000",
+              opacity: "0.3",
+              stroke: "#ff0000",
+              strokeWidth: "2"
             }
           ),
           /* @__PURE__ */ jsx16(
             "text",
             {
-              x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
-              y: symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0),
+              x: node.transform.x,
+              y: node.transform.y,
               textAnchor: "middle",
-              fontSize: node.labelFontSize ?? 10,
-              fontWeight: "600",
-              fill: isSelected ? "#3b82f6" : "#1f2937",
-              transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0)}, ${symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0)})` : void 0,
-              children: node.label || node.id
+              dominantBaseline: "middle",
+              fontSize: "10",
+              fill: "#ff0000",
+              children: "?"
             }
           )
-        ]
-      },
-      node.id
-    );
-  }) });
+        ] }, node.id);
+      }
+      const transforms = [];
+      const effectiveX = isDragging ? node.transform.x + dragOffset.x : node.transform.x;
+      const effectiveY = isDragging ? node.transform.y + dragOffset.y : node.transform.y;
+      transforms.push(`translate(${effectiveX}, ${effectiveY})`);
+      if (node.transform.rotation) {
+        const centerX = symbol.viewBox.width / 2;
+        const centerY = symbol.viewBox.height / 2;
+        transforms.push(`rotate(${node.transform.rotation}, ${centerX}, ${centerY})`);
+      }
+      if (node.transform.scale && node.transform.scale !== 1) {
+        const centerX = symbol.viewBox.width / 2;
+        const centerY = symbol.viewBox.height / 2;
+        transforms.push(
+          `translate(${centerX}, ${centerY}) scale(${node.transform.scale}) translate(${-centerX}, ${-centerY})`
+        );
+      }
+      if (node.transform.flipX || node.transform.flipY) {
+        const scaleX = node.transform.flipX ? -1 : 1;
+        const scaleY = node.transform.flipY ? -1 : 1;
+        const centerX = symbol.viewBox.width / 2;
+        const centerY = symbol.viewBox.height / 2;
+        transforms.push(
+          `translate(${centerX}, ${centerY}) scale(${scaleX}, ${scaleY}) translate(${-centerX}, ${-centerY})`
+        );
+      }
+      const statusEntry = resolveStatusColor(node.status, statusColorMap);
+      const isUnknown = node.positionUnknown === true;
+      const fillColor = isUnknown ? `url(#${hatchId})` : node.customColors?.fill ?? statusEntry.fill;
+      const strokeColor = isUnknown ? UNKNOWN_MARK_COLOR.stroke : node.customColors?.stroke ?? statusEntry.stroke;
+      const appearance = { ...getAppearanceDefaults(node.symbolId), ...node.metadata ?? {} };
+      const ledStyle = {};
+      if (appearance.shape !== void 0) {
+        ledStyle["--led-rx"] = appearance.shape === "circle" ? "50%" : "2";
+        ledStyle["--led-rotate"] = appearance.shape === "diamond" ? "45deg" : "0deg";
+      }
+      if (appearance.led !== void 0) {
+        ledStyle["--led-bezel"] = appearance.led ? "2" : "0";
+      }
+      if (appearance.glow) {
+        ledStyle.filter = `drop-shadow(0 0 4px ${fillColor})`;
+      }
+      const ledAnimation = typeof appearance.animation === "string" && appearance.animation !== "none" ? appearance.animation : void 0;
+      const vb = symbol.viewBox;
+      const ox = node.labelOffset?.x ?? 0;
+      const oy = node.labelOffset?.y ?? 0;
+      const labelPos = typeof appearance.labelPosition === "string" ? appearance.labelPosition : "bottom";
+      let labelX = vb.width / 2 + ox;
+      let labelY = vb.height + 12 + oy;
+      let labelAnchor = "middle";
+      if (labelPos === "top") {
+        labelX = vb.width / 2 + ox;
+        labelY = -6 + oy;
+        labelAnchor = "middle";
+      } else if (labelPos === "left") {
+        labelX = -6 + ox;
+        labelY = vb.height / 2 + oy;
+        labelAnchor = "end";
+      } else if (labelPos === "right") {
+        labelX = vb.width + 6 + ox;
+        labelY = vb.height / 2 + oy;
+        labelAnchor = "start";
+      }
+      return /* @__PURE__ */ jsxs12(
+        "g",
+        {
+          "data-node-id": node.id,
+          "data-symbol-id": node.symbolId,
+          "data-selected": isSelected,
+          "data-dragging": isDragging,
+          "data-led-animation": ledAnimation,
+          "data-position-unknown": isUnknown ? "true" : void 0,
+          transform: transforms.join(" "),
+          style: {
+            "--symbol-fill": fillColor,
+            "--symbol-stroke": strokeColor,
+            cursor: enableDrag ? isDragging ? "grabbing" : "grab" : onNodeClick ? "pointer" : "default",
+            ...ledStyle
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+            onNodeClick?.(node.id, e);
+          },
+          onDoubleClick: (e) => {
+            e.stopPropagation();
+            onNodeDoubleClick?.(node.id, e);
+          },
+          onMouseDown: (e) => {
+            if (enableDrag) {
+              onNodeDragStart?.(node.id, e);
+            }
+          },
+          onTouchStart: (e) => {
+            if (enableDrag) {
+              e.stopPropagation();
+              onNodeDragStart?.(node.id, e);
+            }
+          },
+          children: [
+            isSelected && /* @__PURE__ */ jsx16(
+              "rect",
+              {
+                x: "-5",
+                y: "-5",
+                width: symbol.viewBox.width + 10,
+                height: symbol.viewBox.height + 10,
+                fill: "none",
+                stroke: isDragging ? "#10b981" : "#3b82f6",
+                strokeWidth: isDragging ? "3" : "2",
+                strokeDasharray: "4 2",
+                rx: "2",
+                pointerEvents: "none"
+              }
+            ),
+            /* @__PURE__ */ jsx16(
+              "g",
+              {
+                dangerouslySetInnerHTML: { __html: symbol.svgContent },
+                "data-symbol-content": symbol.id,
+                style: { pointerEvents: "auto" }
+              }
+            ),
+            /* @__PURE__ */ jsx16(
+              "text",
+              {
+                x: labelX,
+                y: labelY,
+                textAnchor: labelAnchor,
+                fontSize: node.labelFontSize ?? 10,
+                fontWeight: "600",
+                fill: isSelected ? "#3b82f6" : "#1f2937",
+                transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${labelX}, ${labelY})` : void 0,
+                children: node.label || node.id
+              }
+            )
+          ]
+        },
+        node.id
+      );
+    })
+  ] });
 }
 var NodeRenderer = React9.memo(NodeRendererImpl);
 
@@ -6034,8 +6273,49 @@ function useTelemetryStatus(telemetry, diagram, setDiagram, options = {}) {
   }, [telemetry, diagram, setDiagram, enabled, mapStatus]);
 }
 
+// src/diagram/hooks/useBooleanIndicators.ts
+import { useEffect as useEffect10 } from "react";
+function useBooleanIndicators(telemetry, diagram, setDiagram, options = {}) {
+  const { enabled = true, symbolId = "status-indicator" } = options;
+  useEffect10(() => {
+    if (!enabled) return;
+    const tagIndex = /* @__PURE__ */ new Map();
+    telemetry.forEach((binding) => {
+      if (binding.tag) tagIndex.set(binding.tag, binding.value.value);
+    });
+    let needsUpdate = false;
+    const updatedNodes = diagram.nodes.map((node) => {
+      if (node.symbolId !== symbolId) return node;
+      const meta = node.metadata ?? {};
+      const colorSource = typeof meta.colorSource === "string" ? meta.colorSource : "";
+      const visibleSource = typeof meta.visibleSource === "string" ? meta.visibleSource : "";
+      let next = node;
+      if (colorSource) {
+        const isTrue = Boolean(tagIndex.get(colorSource));
+        const fill = resolvePresetColor(
+          String(isTrue ? meta.onColor ?? "green" : meta.offColor ?? "red")
+        );
+        if (node.customColors?.fill !== fill) {
+          next = { ...next, customColors: { ...next.customColors, fill } };
+        }
+      }
+      if (visibleSource) {
+        const vis = Boolean(tagIndex.get(visibleSource));
+        if ((next.visible ?? true) !== vis) {
+          next = { ...next, visible: vis };
+        }
+      }
+      if (next !== node) needsUpdate = true;
+      return next;
+    });
+    if (needsUpdate) {
+      setDiagram({ ...diagram, nodes: updatedNodes });
+    }
+  }, [telemetry, diagram, setDiagram, enabled, symbolId]);
+}
+
 // src/diagram/hooks/useDrag.ts
-import { useState as useState13, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect10 } from "react";
+import { useState as useState13, useCallback as useCallback7, useRef as useRef5, useEffect as useEffect11 } from "react";
 function useDrag(options = {}) {
   const {
     onDragStart,
@@ -6220,7 +6500,7 @@ function useDrag(options = {}) {
     },
     [screenToWorld, applySnap, onDragEnd]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isListening) return;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
@@ -6289,7 +6569,7 @@ function useDrag(options = {}) {
 }
 
 // src/diagram/hooks/useKeyboardShortcuts.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 function useKeyboardShortcuts(options) {
   const {
     onDelete,
@@ -6300,7 +6580,7 @@ function useKeyboardShortcuts(options) {
     onSelectAll,
     enabled = true
   } = options;
-  useEffect11(() => {
+  useEffect12(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       const target = event.target;
@@ -6452,7 +6732,7 @@ function PIDCanvasImpl({
   const isUndoRedoAction = useRef6(false);
   const isInternalChange = useRef6(false);
   const lastInternalDiagram = useRef6(null);
-  useEffect12(() => {
+  useEffect13(() => {
     const isExternal = !isInternalChange.current && diagram !== lastInternalDiagram.current;
     if (isExternal) {
       setLocalDiagram(diagram);
@@ -6497,7 +6777,7 @@ function PIDCanvasImpl({
     });
     return { minX, minY, maxX, maxY };
   }, [localDiagram.nodes]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (onMounted) {
       const controls = {
         fitToContent: (padding = 50) => {
@@ -6576,7 +6856,7 @@ function PIDCanvasImpl({
       isUndoRedoAction.current = false;
     }, 0);
   }, [localDiagram, onDiagramChange]);
-  useEffect12(() => {
+  useEffect13(() => {
     const handleKeyDown = (e) => {
       const isCtrlOrCmd = e.ctrlKey || e.metaKey;
       if (isCtrlOrCmd && e.key === "z" && !e.shiftKey) {
@@ -6593,7 +6873,7 @@ function PIDCanvasImpl({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [undo, redo]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!features.dragNodes) return;
     const handleKeyDown = (e) => {
       if (selection.selectedNodeIds.size === 0 && !selectedWaypoint) return;
@@ -7130,6 +7410,7 @@ function PIDCanvasImpl({
                 }
               ),
               telemetryEnabled && telemetry && /* @__PURE__ */ jsx20("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
+                if (node.symbolId === "status-indicator") return null;
                 const binding = telemetry.get(node.id);
                 if (!binding) return null;
                 const symbol = getSymbolDefinition(node.symbolId);
@@ -7497,6 +7778,8 @@ function NodeConfigPanel({
   onUpdateNode,
   onUpdateTelemetry,
   onAddTelemetry,
+  onRemoveTelemetry,
+  availableTags = [],
   onRemove,
   className = "",
   style = {}
@@ -7509,6 +7792,8 @@ function NodeConfigPanel({
     padding: "20px",
     ...style
   };
+  const appearanceFields = getAppearanceSchema(node.symbolId);
+  const showGenericTelemetry = appearanceFields.length === 0;
   return /* @__PURE__ */ jsxs18("div", { className, style: defaultStyle, children: [
     /* @__PURE__ */ jsxs18("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
       "Configure: ",
@@ -7630,7 +7915,136 @@ function NodeConfigPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+    appearanceFields.length > 0 && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx22("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Appearance" }),
+      appearanceFields.map((field) => {
+        const value = readAppearanceValue(node, field);
+        const fieldLabel = field.label ?? field.key;
+        const inputStyle = {
+          width: "100%",
+          padding: "6px 8px",
+          borderRadius: "4px",
+          border: "1px solid #cbd5e1",
+          fontSize: "0.875rem"
+        };
+        let control;
+        if (field.kind === "boolean") {
+          control = /* @__PURE__ */ jsxs18("label", { style: { fontSize: "0.75rem", display: "block" }, children: [
+            /* @__PURE__ */ jsx22(
+              "input",
+              {
+                type: "checkbox",
+                checked: Boolean(value),
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.checked)),
+                style: { marginRight: "6px" }
+              }
+            ),
+            fieldLabel
+          ] });
+        } else if (field.kind === "select") {
+          control = /* @__PURE__ */ jsxs18(Fragment8, { children: [
+            /* @__PURE__ */ jsxs18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx22(
+              "select",
+              {
+                value: String(value),
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.value)),
+                style: inputStyle,
+                children: field.options?.map((opt) => /* @__PURE__ */ jsx22("option", { value: opt, children: opt }, opt))
+              }
+            )
+          ] });
+        } else if (field.kind === "number") {
+          control = /* @__PURE__ */ jsxs18(Fragment8, { children: [
+            /* @__PURE__ */ jsxs18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx22(
+              "input",
+              {
+                type: "number",
+                value: Number(value),
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, parseFloat(e.target.value) || 0)),
+                style: inputStyle
+              }
+            )
+          ] });
+        } else if (field.kind === "tag") {
+          const tagValue = String(value);
+          const listId = `tags-${node.id}-${field.key}`;
+          const known = tagValue.length > 0 && availableTags.includes(tagValue);
+          const unknown = tagValue.length > 0 && !known;
+          control = /* @__PURE__ */ jsxs18(Fragment8, { children: [
+            /* @__PURE__ */ jsxs18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx22(
+              "input",
+              {
+                type: "text",
+                value: tagValue,
+                list: listId,
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.value)),
+                placeholder: "type or pick a signal\u2026",
+                style: {
+                  ...inputStyle,
+                  border: `1px solid ${unknown ? "#f59e0b" : known ? "#22c55e" : "#cbd5e1"}`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx22("datalist", { id: listId, children: availableTags.map((t) => /* @__PURE__ */ jsx22("option", { value: t }, t)) }),
+            tagValue.length > 0 && /* @__PURE__ */ jsx22(
+              "div",
+              {
+                style: {
+                  fontSize: "0.7rem",
+                  marginTop: "3px",
+                  color: known ? "#16a34a" : "#b45309"
+                },
+                children: known ? "\u2713 matched signal" : "\u26A0 no matching signal (reads as false until published)"
+              }
+            )
+          ] });
+        } else {
+          control = /* @__PURE__ */ jsxs18(Fragment8, { children: [
+            /* @__PURE__ */ jsxs18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+              fieldLabel,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsx22(
+              "input",
+              {
+                type: "text",
+                value: String(value),
+                onChange: (e) => onUpdateNode(writeAppearanceValue(node, field, e.target.value)),
+                style: inputStyle
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "10px" }, children: [
+          control,
+          field.help && /* @__PURE__ */ jsx22(
+            "div",
+            {
+              style: {
+                fontSize: "0.7rem",
+                color: "#64748b",
+                marginTop: "3px",
+                lineHeight: 1.35
+              },
+              children: field.help
+            }
+          )
+        ] }, field.key);
+      })
+    ] }),
+    showGenericTelemetry && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
       /* @__PURE__ */ jsx22("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
       !binding ? /* @__PURE__ */ jsx22(
         "button",
@@ -7676,6 +8090,27 @@ function NodeConfigPanel({
           children: "+ Add Telemetry"
         }
       ) : /* @__PURE__ */ jsxs18(Fragment8, { children: [
+        /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Tag (attribute):" }),
+        /* @__PURE__ */ jsx22(
+          "input",
+          {
+            type: "text",
+            value: binding.tag || "",
+            onChange: (e) => onUpdateTelemetry({
+              nodeId: node.id,
+              tag: e.target.value
+            }),
+            placeholder: "e.g. pump.running",
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              border: "1px solid #cbd5e1",
+              fontSize: "0.875rem",
+              marginBottom: "8px"
+            }
+          }
+        ),
         /* @__PURE__ */ jsx22("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
         /* @__PURE__ */ jsx22(
           "input",
@@ -7983,10 +8418,28 @@ function NodeConfigPanel({
             ] })
           ] }),
           " "
-        ] })
+        ] }),
+        onRemoveTelemetry && /* @__PURE__ */ jsx22(
+          "button",
+          {
+            onClick: onRemoveTelemetry,
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              marginTop: "8px",
+              borderRadius: "4px",
+              border: "1px solid #ef4444",
+              background: "transparent",
+              color: "#ef4444",
+              fontSize: "0.8125rem",
+              cursor: "pointer"
+            },
+            children: "Remove Telemetry"
+          }
+        )
       ] })
     ] }),
-    binding && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+    showGenericTelemetry && binding && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
       /* @__PURE__ */ jsx22("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Thresholds" }),
       ["highHigh", "high", "low", "lowLow"].map((key) => {
         const label = key === "highHigh" ? "High-High (\u2265)" : key === "high" ? "High (\u2265)" : key === "low" ? "Low (\u2264)" : "Low-Low (\u2264)";
@@ -8016,7 +8469,7 @@ function NodeConfigPanel({
         ] }, key);
       })
     ] }),
-    binding && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
+    showGenericTelemetry && binding && /* @__PURE__ */ jsxs18("div", { style: { marginBottom: "20px" }, children: [
       /* @__PURE__ */ jsx22("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
       ["normal", "warning", "alarm", "fault", "off"].map((status) => {
         const defaultColors = {
@@ -8875,7 +9328,7 @@ function useDeviceConfigs(initialConfigs) {
 }
 
 // src/components/DeviceConfigPanel/DeviceConfigPanel.tsx
-import React15, { useState as useState18, useEffect as useEffect13, useMemo, useRef as useRef8 } from "react";
+import React15, { useState as useState18, useEffect as useEffect14, useMemo, useRef as useRef8 } from "react";
 import { Fragment as Fragment9, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function DeviceConfigPanelImpl({
   binding,
@@ -8934,7 +9387,7 @@ function DeviceConfigPanelImpl({
     setCollapsedSections(collapsed);
     setBindingId(binding.nodeId);
   }
-  useEffect13(() => {
+  useEffect14(() => {
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
@@ -9625,7 +10078,7 @@ function DeviceConfigPanelImpl({
 var DeviceConfigPanel = React15.memo(DeviceConfigPanelImpl);
 
 // src/diagram/hooks/useSimulation.ts
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   const {
     interval = 2e3,
@@ -9636,7 +10089,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
     historyLength = 10,
     generateValue
   } = options;
-  useEffect14(() => {
+  useEffect15(() => {
     if (!enabled) return;
     const intervalId = setInterval(() => {
       const updates = [];
@@ -9686,6 +10139,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
 }
 export {
   Button,
+  COLOR_PRESETS,
   CardHeader,
   CardUnit,
   CardValue,
@@ -9715,6 +10169,7 @@ export {
   PanelTabs,
   RightPanel,
   RightToggleButton,
+  STATUS_LED_APPEARANCE,
   SVGArea,
   SVGLockedOverlay,
   ScrollableSVGWrapper,
@@ -9725,6 +10180,8 @@ export {
   ThemeProvider,
   ThemeToggle,
   TrendLine,
+  UNKNOWN_MARK_COLOR,
+  UNKNOWN_MARK_COLOR_DARK,
   ValueEntry,
   ZoomButton,
   ZoomControls,
@@ -9734,6 +10191,8 @@ export {
   exampleDiagram,
   exportDiagram,
   generateRoutePoints,
+  getAppearanceDefaults,
+  getAppearanceSchema,
   getAvailableSymbols,
   getPortWorldPosition,
   getSymbolDefinition,
@@ -9741,9 +10200,12 @@ export {
   mockSymbolLibrary,
   nodeHasPort,
   overlayStyles,
+  readAppearanceValue,
   registerSymbol,
   registerSymbols,
+  resolvePresetColor,
   resolveStatusColor,
+  useBooleanIndicators,
   useDeviceConfigs,
   useDeviceControls,
   useDrag,
@@ -9754,6 +10216,7 @@ export {
   useTelemetryStatus,
   useTheme,
   useViewBox,
-  validateDiagram
+  validateDiagram,
+  writeAppearanceValue
 };
 //# sourceMappingURL=index.js.map