@procaaso/alphinity-ui-components 1.0.1 → 1.0.2

package/dist/index.js

@@ -633,6 +633,24 @@ var ControlPanel = ({
 
 // src/components/StatusIndicator/StatusIndicator.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var getStatusDescription = (status) => {
+  switch (status) {
+    case "alarm":
+      return "Critical alarm condition requiring attention";
+    case "warning":
+      return "Warning condition that should be monitored";
+    case "fault":
+      return "Equipment fault detected";
+    case "active":
+      return "Equipment is actively running";
+    case "normal":
+      return "Operating normally";
+    case "off":
+      return "Equipment is off";
+    default:
+      return "";
+  }
+};
 var StatusIndicator = ({
   status,
   size = "medium",
@@ -669,6 +687,10 @@ var StatusIndicator = ({
     /* @__PURE__ */ jsx6(
       "span",
       {
+        role: "status",
+        "aria-label": label || `Status: ${status}`,
+        "aria-description": getStatusDescription(status),
+        "data-status": status,
         className: `
           ${baseClass}
           ${statusClass}
@@ -1670,6 +1692,3057 @@ var ThemeToggle = ({
     /* @__PURE__ */ jsx12("span", { style: { fontSize: "0.75rem", opacity: 0.8 }, children: theme === "modern" ? "Industrial Design" : "High Performance" })
   ] });
 };
+
+// src/components/PIDCanvas/PIDCanvas.tsx
+import { useCallback as useCallback7, useState as useState11, useEffect as useEffect8 } from "react";
+
+// src/diagram/symbols/mockSymbolLibrary.ts
+var mockSymbolLibrary = {
+  "valve-ball": {
+    id: "valve-ball",
+    name: "Ball Valve",
+    category: "valve",
+    viewBox: { x: 0, y: 0, width: 50, height: 50 },
+    ports: [
+      { id: "inlet", x: 0, y: 25, type: "inlet", direction: "in" },
+      { id: "outlet", x: 50, y: 25, type: "outlet", direction: "out" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Valve body -->
+        <rect x="15" y="10" width="20" height="30" fill="#546e7a" stroke="#263238" stroke-width="2" rx="2"/>
+        <!-- Ball indicator -->
+        <circle cx="25" cy="25" r="6" fill="#ffa726" stroke="#e65100" stroke-width="1.5"/>
+        <!-- Inlet/outlet lines -->
+        <line x1="0" y1="25" x2="15" y2="25" stroke="#263238" stroke-width="3" stroke-linecap="round"/>
+        <line x1="35" y1="25" x2="50" y2="25" stroke="#263238" stroke-width="3" stroke-linecap="round"/>
+      </g>
+    `,
+    metadata: {
+      description: "Ball valve for flow control",
+      tags: ["valve", "control", "shutoff"]
+    }
+  },
+  "valve-gate": {
+    id: "valve-gate",
+    name: "Gate Valve (Powered)",
+    category: "valve",
+    viewBox: { x: 0, y: 0, width: 52, height: 52 },
+    ports: [
+      { id: "inlet", x: 0, y: 36, type: "inlet", direction: "in" },
+      { id: "outlet", x: 52, y: 36, type: "outlet", direction: "out" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Actuator box -->
+        <rect x="16.74" y="0" width="18.02" height="18.02" fill="#edeeef" stroke="#666666" pointer-events="all"/>
+        <!-- Actuator stem -->
+        <path d="M 25.75 18.02 L 25.75 36.05" fill="none" stroke="#666666" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
+        <!-- Valve body (two triangles forming diamond) -->
+        <path d="M 0 20.6 L 25.75 36.05 L 0 51.5 Z M 51.5 20.6 L 25.75 36.05 L 51.5 51.5 Z" fill="#edeeef" stroke="#666666" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="all"/>
+      </g>
+    `,
+    metadata: {
+      description: "Gate valve with powered actuator",
+      tags: ["valve", "gate", "powered", "actuator"]
+    }
+  },
+  "pump-centrifugal": {
+    id: "pump-centrifugal",
+    name: "Centrifugal Pump",
+    category: "pump",
+    viewBox: { x: 0, y: 0, width: 80, height: 60 },
+    ports: [
+      { id: "inlet", x: 10, y: 30, type: "inlet", direction: "in" },
+      { id: "outlet", x: 70, y: 30, type: "outlet", direction: "out" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Pump casing -->
+        <circle cx="40" cy="30" r="22" fill="#4fc3f7" stroke="#0277bd" stroke-width="2.5"/>
+        <!-- Impeller -->
+        <path d="M 40 30 L 50 20 M 40 30 L 50 40 M 40 30 L 30 40 M 40 30 L 30 20" 
+              stroke="#01579b" stroke-width="2.5" stroke-linecap="round"/>
+        <!-- Center hub -->
+        <circle cx="40" cy="30" r="5" fill="#0277bd" stroke="#01579b" stroke-width="1.5"/>
+        <!-- Inlet pipe -->
+        <line x1="0" y1="30" x2="18" y2="30" stroke="#0277bd" stroke-width="4" stroke-linecap="round"/>
+        <!-- Outlet pipe -->
+        <line x1="62" y1="30" x2="80" y2="30" stroke="#0277bd" stroke-width="4" stroke-linecap="round"/>
+      </g>
+    `,
+    metadata: {
+      description: "Centrifugal pump for fluid transfer",
+      tags: ["pump", "centrifugal", "transfer"]
+    }
+  },
+  "vessel-tank": {
+    id: "vessel-tank",
+    name: "Storage Tank",
+    category: "vessel",
+    viewBox: { x: 0, y: 0, width: 60, height: 80 },
+    ports: [
+      { id: "inlet", x: 30, y: 10, type: "inlet", direction: "in" },
+      { id: "outlet", x: 30, y: 70, type: "outlet", direction: "out" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Tank body -->
+        <rect x="10" y="15" width="40" height="50" fill="#66bb6a" stroke="#2e7d32" stroke-width="2.5" rx="3"/>
+        <!-- Tank bottom (rounded) -->
+        <ellipse cx="30" cy="65" rx="20" ry="8" fill="#66bb6a" stroke="#2e7d32" stroke-width="2.5"/>
+        <!-- Liquid level indicator -->
+        <rect x="12" y="35" width="36" height="28" fill="#4dd0e1" opacity="0.6"/>
+        <!-- Inlet pipe -->
+        <line x1="30" y1="0" x2="30" y2="15" stroke="#2e7d32" stroke-width="3" stroke-linecap="round"/>
+        <!-- Outlet pipe -->
+        <line x1="30" y1="65" x2="30" y2="80" stroke="#2e7d32" stroke-width="3" stroke-linecap="round"/>
+      </g>
+    `,
+    metadata: {
+      description: "Storage vessel for liquids",
+      tags: ["vessel", "tank", "storage"]
+    }
+  },
+  "instrument-indicator": {
+    id: "instrument-indicator",
+    name: "Instrument Indicator",
+    category: "instrument",
+    viewBox: { x: 0, y: 0, width: 40, height: 40 },
+    ports: [
+      { id: "signal", x: 20, y: 40, type: "signal", direction: "bi" }
+    ],
+    svgContent: `
+      <g>
+        <!-- Instrument circle -->
+        <circle cx="20" cy="20" r="15" fill="#fff" stroke="#616161" stroke-width="2"/>
+        <!-- Inner circle -->
+        <circle cx="20" cy="20" r="12" fill="none" stroke="#616161" stroke-width="1"/>
+        <!-- Signal line -->
+        <line x1="20" y1="35" x2="20" y2="40" stroke="#616161" stroke-width="2" stroke-linecap="round"/>
+      </g>
+    `,
+    metadata: {
+      description: "Generic instrument indicator",
+      tags: ["instrument", "indicator", "measurement"]
+    }
+  }
+};
+function getSymbolDefinition(symbolId) {
+  return mockSymbolLibrary[symbolId];
+}
+function getAvailableSymbols() {
+  return Object.keys(mockSymbolLibrary);
+}
+
+// src/components/PIDCanvas/NodeRenderer.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function NodeRenderer({
+  nodes: nodes2,
+  selectedNodeIds,
+  onNodeClick,
+  onNodeDoubleClick,
+  onNodeDragStart,
+  draggingNodeId,
+  dragOffset = { x: 0, y: 0 },
+  enableDrag = false
+}) {
+  return /* @__PURE__ */ jsx13("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__ */ jsxs9("g", { children: [
+        /* @__PURE__ */ jsx13(
+          "circle",
+          {
+            cx: node.transform.x,
+            cy: node.transform.y,
+            r: "15",
+            fill: "#ff0000",
+            opacity: "0.3",
+            stroke: "#ff0000",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "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})`
+      );
+    }
+    return /* @__PURE__ */ jsxs9(
+      "g",
+      {
+        "data-node-id": node.id,
+        "data-symbol-id": node.symbolId,
+        "data-selected": isSelected,
+        "data-dragging": isDragging,
+        transform: transforms.join(" "),
+        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);
+          }
+        },
+        style: {
+          cursor: enableDrag ? isDragging ? "grabbing" : "grab" : onNodeClick ? "pointer" : "default"
+        },
+        children: [
+          isSelected && /* @__PURE__ */ jsx13(
+            "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__ */ jsx13(
+            "g",
+            {
+              dangerouslySetInnerHTML: { __html: symbol.svgContent },
+              "data-symbol-content": symbol.id,
+              style: { pointerEvents: "auto" }
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "text",
+            {
+              x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
+              y: symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0),
+              textAnchor: "middle",
+              fontSize: "10",
+              fontWeight: "600",
+              fill: isSelected ? "#3b82f6" : "#1f2937",
+              children: node.label || node.id
+            }
+          )
+        ]
+      },
+      node.id
+    );
+  }) });
+}
+
+// src/components/PIDCanvas/PipeRenderer.tsx
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function PipeRenderer({
+  pipes,
+  selectedPipeIds,
+  onPipeClick,
+  enableWaypointEditing = false,
+  onWaypointDragStart,
+  editingPipeId,
+  draggingWaypointIndex,
+  waypointDragOffset,
+  onPipeSegmentClick
+}) {
+  return /* @__PURE__ */ jsx14("g", { id: "layer-pipes", children: pipes.filter((pipe) => pipe.visible !== false).map((pipe) => {
+    const isSelected = selectedPipeIds?.has(pipe.id) ?? false;
+    const isEditing = enableWaypointEditing && editingPipeId === pipe.id;
+    const showEditingControls = enableWaypointEditing && isSelected;
+    const displayPoints = pipe.routePoints.map((point, idx) => {
+      if (isEditing && draggingWaypointIndex === idx && waypointDragOffset) {
+        return {
+          x: point.x + waypointDragOffset.x,
+          y: point.y + waypointDragOffset.y
+        };
+      }
+      return point;
+    });
+    const pointsString = displayPoints.map((point) => `${point.x},${point.y}`).join(" ");
+    const pipeStyle = pipe.style || {};
+    const stroke = isSelected ? "#3b82f6" : pipeStyle.stroke || "#263238";
+    const strokeWidth = isSelected ? (pipeStyle.strokeWidth || 3) + 2 : pipeStyle.strokeWidth || 3;
+    const strokeDasharray = pipeStyle.strokeDasharray;
+    const opacity = pipeStyle.opacity !== void 0 ? pipeStyle.opacity : 1;
+    return /* @__PURE__ */ jsxs10(
+      "g",
+      {
+        "data-pipe-id": pipe.id,
+        "data-selected": isSelected,
+        onClick: (e) => {
+          e.stopPropagation();
+          onPipeClick?.(pipe.id, e);
+        },
+        style: {
+          cursor: onPipeClick ? "pointer" : "default"
+        },
+        children: [
+          !enableWaypointEditing && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+            onPipeClick && /* @__PURE__ */ jsx14(
+              "polyline",
+              {
+                points: pointsString,
+                fill: "none",
+                stroke: "transparent",
+                strokeWidth: strokeWidth + 8,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                pointerEvents: "stroke"
+              }
+            ),
+            /* @__PURE__ */ jsx14(
+              "polyline",
+              {
+                points: pointsString,
+                fill: "none",
+                stroke,
+                strokeWidth,
+                strokeDasharray,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                opacity,
+                "data-from": pipe.fromNodeId,
+                "data-to": pipe.toNodeId,
+                pointerEvents: onPipeClick ? "none" : "auto"
+              }
+            )
+          ] }),
+          displayPoints.map((point, idx) => {
+            const isEndpoint = idx === 0 || idx === displayPoints.length - 1;
+            const isDragging = isEditing && draggingWaypointIndex === idx;
+            const waypointSize = isDragging ? 8 : showEditingControls ? 6 : isSelected ? 3 : 2;
+            const waypointOpacity = isDragging ? 1 : showEditingControls ? 0.9 : isSelected ? 0.8 : 0.5;
+            const waypointColor = isEndpoint && showEditingControls ? "#f59e0b" : isDragging ? "#10b981" : stroke;
+            return /* @__PURE__ */ jsx14(
+              "circle",
+              {
+                cx: point.x,
+                cy: point.y,
+                r: waypointSize,
+                fill: waypointColor,
+                stroke: showEditingControls ? "#ffffff" : "none",
+                strokeWidth: showEditingControls ? 2 : 0,
+                opacity: waypointOpacity,
+                className: "pipe-route-point",
+                style: {
+                  cursor: showEditingControls ? isDragging ? "grabbing" : "grab" : "default"
+                },
+                pointerEvents: showEditingControls ? "all" : "none",
+                onMouseDown: (e) => {
+                  if (showEditingControls) {
+                    e.stopPropagation();
+                    onWaypointDragStart?.(pipe.id, idx, e);
+                  }
+                },
+                onTouchStart: (e) => {
+                  if (showEditingControls) {
+                    e.stopPropagation();
+                    onWaypointDragStart?.(pipe.id, idx, e);
+                  }
+                }
+              },
+              `${pipe.id}-point-${idx}`
+            );
+          }),
+          showEditingControls && onPipeSegmentClick && displayPoints.length >= 2 && /* @__PURE__ */ jsx14(Fragment3, { children: displayPoints.slice(0, -1).map((point, idx) => {
+            const nextPoint = displayPoints[idx + 1];
+            const midX = (point.x + nextPoint.x) / 2;
+            const midY = (point.y + nextPoint.y) / 2;
+            return /* @__PURE__ */ jsxs10("g", { children: [
+              /* @__PURE__ */ jsx14(
+                "circle",
+                {
+                  cx: midX,
+                  cy: midY,
+                  r: 8,
+                  fill: "transparent",
+                  className: "pipe-segment-add-area",
+                  style: { cursor: "crosshair" },
+                  pointerEvents: "all",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onPipeSegmentClick?.(pipe.id, { x: midX, y: midY }, idx);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx14(
+                "circle",
+                {
+                  cx: midX,
+                  cy: midY,
+                  r: 4,
+                  fill: "#3b82f6",
+                  stroke: "#ffffff",
+                  strokeWidth: 2,
+                  opacity: 0.6,
+                  className: "pipe-segment-add",
+                  pointerEvents: "none"
+                }
+              )
+            ] }, `${pipe.id}-segment-${idx}`);
+          }) }),
+          pipe.showLabel !== false && pipe.label && pipe.routePoints.length >= 2 && /* @__PURE__ */ jsx14(
+            "text",
+            {
+              x: pipe.routePoints[Math.floor(pipe.routePoints.length / 2)].x + (pipe.labelOffset?.x ?? 0),
+              y: pipe.routePoints[Math.floor(pipe.routePoints.length / 2)].y - 8 + (pipe.labelOffset?.y ?? 0),
+              textAnchor: "middle",
+              fontSize: "10",
+              fontWeight: isSelected ? "600" : "500",
+              fill: stroke,
+              opacity: opacity * 0.8,
+              pointerEvents: "none",
+              children: pipe.label
+            }
+          )
+        ]
+      },
+      pipe.id
+    );
+  }) });
+}
+
+// src/components/PIDCanvas/DataOverlay.tsx
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+function DataOverlay({ nodeId, x, y, telemetry }) {
+  const { value, display, history } = telemetry;
+  const showValue = display?.showValue ?? true;
+  const showStatus = display?.showStatus ?? true;
+  const showSparkline = display?.showSparkline ?? false;
+  const label = display?.label;
+  const precision = display?.precision;
+  const sparklineColor = display?.sparklineColor;
+  const textColor = display?.textColor;
+  const backgroundColor = display?.backgroundColor;
+  const offsetX = display?.offsetX ?? 0;
+  const offsetY = display?.offsetY ?? 0;
+  if (!showValue) {
+    return /* @__PURE__ */ jsx15(Fragment4, {});
+  }
+  const formatValue = (val) => {
+    if (typeof val === "number") {
+      return precision !== void 0 ? val.toFixed(precision) : val.toString();
+    }
+    if (typeof val === "boolean") {
+      return val ? "ON" : "OFF";
+    }
+    return val.toString();
+  };
+  const defaultStatusColors = {
+    normal: { bg: "#10b981", text: "#ffffff", border: "#059669" },
+    warning: { bg: "#f59e0b", text: "#ffffff", border: "#d97706" },
+    alarm: { bg: "#ef4444", text: "#ffffff", border: "#dc2626" },
+    fault: { bg: "#dc2626", text: "#ffffff", border: "#b91c1c" },
+    off: { bg: "#6b7280", text: "#ffffff", border: "#4b5563" }
+  };
+  const customColor = telemetry.statusColors?.[value.status];
+  const defaultColorSet = defaultStatusColors[value.status] || defaultStatusColors.normal;
+  const statusColors = customColor ? { bg: customColor, text: "#ffffff", border: customColor } : defaultColorSet;
+  const colors = backgroundColor && backgroundColor !== "status" ? { bg: backgroundColor, text: textColor || "#ffffff", border: backgroundColor } : statusColors;
+  const finalTextColor = textColor || colors.text;
+  const formattedValue = formatValue(value.value);
+  const displayText = value.unit ? `${formattedValue} ${value.unit}` : formattedValue;
+  const sparklinePath = (() => {
+    if (!showSparkline || !history || history.length < 2) return "";
+    const width = 70;
+    const height = 20;
+    const padding = 5;
+    const effectiveWidth = width - padding * 2;
+    const effectiveHeight = height - padding * 2;
+    const min = Math.min(...history);
+    const max = Math.max(...history);
+    const range = max - min || 1;
+    const points = history.map((val, i) => {
+      const xPos = i / (history.length - 1) * effectiveWidth + padding;
+      const yPos = height - padding - (val - min) / range * effectiveHeight;
+      return `${xPos.toFixed(2)},${yPos.toFixed(2)}`;
+    });
+    return `M ${points.join(" L ")}`;
+  })();
+  const hasSparkline = showSparkline && sparklinePath;
+  const overlayHeight = label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22;
+  const displayX = x + offsetX;
+  const displayY = y + offsetY;
+  return /* @__PURE__ */ jsxs11("g", { "data-overlay-node": nodeId, "data-status": value.status, children: [
+    /* @__PURE__ */ jsx15(
+      "rect",
+      {
+        x: displayX - 40,
+        y: displayY - 25,
+        width: "80",
+        height: overlayHeight,
+        rx: "4",
+        fill: colors.bg,
+        stroke: colors.border,
+        strokeWidth: "1",
+        opacity: "0.95",
+        filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
+      }
+    ),
+    label && /* @__PURE__ */ jsx15(
+      "text",
+      {
+        x: displayX,
+        y: displayY - 15,
+        textAnchor: "middle",
+        fontSize: "8",
+        fontWeight: "600",
+        fill: finalTextColor,
+        opacity: "0.9",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      "text",
+      {
+        x: displayX,
+        y: label ? displayY - 3 : displayY - 9,
+        textAnchor: "middle",
+        fontSize: "11",
+        fontWeight: "700",
+        fill: finalTextColor,
+        letterSpacing: "0.02em",
+        children: displayText
+      }
+    ),
+    showStatus && value.status !== "normal" && /* @__PURE__ */ jsx15("circle", { cx: displayX + 35, cy: displayY - 18, r: "3", fill: finalTextColor, opacity: "0.9", children: /* @__PURE__ */ jsx15(
+      "animate",
+      {
+        attributeName: "opacity",
+        values: "0.9;0.3;0.9",
+        dur: "1.5s",
+        repeatCount: "indefinite"
+      }
+    ) }),
+    value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ jsxs11(
+      "text",
+      {
+        x: displayX,
+        y: displayY + 5,
+        textAnchor: "middle",
+        fontSize: "7",
+        fontWeight: "500",
+        fill: finalTextColor,
+        opacity: "0.7",
+        children: [
+          "Q: ",
+          value.quality,
+          "%"
+        ]
+      }
+    ),
+    hasSparkline && /* @__PURE__ */ jsx15("g", { transform: `translate(${displayX - 35}, ${displayY + (label ? 5 : 0)})`, children: /* @__PURE__ */ jsx15(
+      "path",
+      {
+        d: sparklinePath,
+        fill: "none",
+        stroke: sparklineColor || finalTextColor,
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        opacity: "0.9"
+      }
+    ) })
+  ] });
+}
+
+// src/diagram/hooks/useViewBox.ts
+import { useState as useState7, useCallback as useCallback3, useRef as useRef2, useEffect as useEffect4 } from "react";
+function useViewBox(options) {
+  const {
+    initialViewBox,
+    enablePan = true,
+    enableZoom = true,
+    minZoom = 0.1,
+    maxZoom = 10,
+    zoomSensitivity = 1e-3,
+    allowLeftClickPan = true
+  } = options;
+  const [viewBox, setViewBox] = useState7(initialViewBox);
+  const svgRef = useRef2(null);
+  const isPanningRef = useRef2(false);
+  const lastMousePosRef = useRef2({ x: 0, y: 0 });
+  const spaceKeyDownRef = useRef2(false);
+  const lastTouchDistanceRef = useRef2(null);
+  const resetViewBox = useCallback3(() => {
+    setViewBox(initialViewBox);
+  }, [initialViewBox]);
+  const zoomIn = useCallback3(() => {
+    setViewBox((prev) => {
+      const currentZoom = initialViewBox.width / prev.width;
+      const newZoom = Math.min(1 / minZoom, currentZoom * 1.25);
+      const scale = initialViewBox.width / newZoom;
+      const centerX = prev.x + prev.width / 2;
+      const centerY = prev.y + prev.height / 2;
+      const newWidth = scale;
+      const newHeight = prev.height / prev.width * scale;
+      return {
+        x: centerX - newWidth / 2,
+        y: centerY - newHeight / 2,
+        width: newWidth,
+        height: newHeight
+      };
+    });
+  }, [initialViewBox, minZoom]);
+  const zoomOut = useCallback3(() => {
+    setViewBox((prev) => {
+      const currentZoom = initialViewBox.width / prev.width;
+      const newZoom = Math.max(1 / maxZoom, currentZoom * 0.8);
+      const scale = initialViewBox.width / newZoom;
+      const centerX = prev.x + prev.width / 2;
+      const centerY = prev.y + prev.height / 2;
+      const newWidth = scale;
+      const newHeight = prev.height / prev.width * scale;
+      return {
+        x: centerX - newWidth / 2,
+        y: centerY - newHeight / 2,
+        width: newWidth,
+        height: newHeight
+      };
+    });
+  }, [initialViewBox, maxZoom]);
+  useEffect4(() => {
+    if (!enableZoom || !svgRef.current) return;
+    const svg = svgRef.current;
+    const handleWheel = (e) => {
+      e.preventDefault();
+      const rect = svg.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      setViewBox((prev) => {
+        const svgX = prev.x + mouseX / rect.width * prev.width;
+        const svgY = prev.y + mouseY / rect.height * prev.height;
+        const delta = -e.deltaY * zoomSensitivity;
+        const zoom = Math.exp(delta);
+        let newWidth = prev.width / zoom;
+        let newHeight = prev.height / zoom;
+        const currentZoom = initialViewBox.width / prev.width;
+        const newZoom = currentZoom * zoom;
+        if (newZoom < minZoom || newZoom > 1 / minZoom) {
+          return prev;
+        }
+        const newX = svgX - mouseX / rect.width * newWidth;
+        const newY = svgY - mouseY / rect.height * newHeight;
+        return {
+          x: newX,
+          y: newY,
+          width: newWidth,
+          height: newHeight
+        };
+      });
+    };
+    svg.addEventListener("wheel", handleWheel, { passive: false });
+    return () => svg.removeEventListener("wheel", handleWheel);
+  }, [enableZoom, zoomSensitivity, minZoom, initialViewBox]);
+  useEffect4(() => {
+    if (!enablePan || !svgRef.current) return;
+    const svg = svgRef.current;
+    const handleMouseDown = (e) => {
+      const target = e.target;
+      const isDraggableNode = target.closest("[data-node-id]");
+      const isWaypoint = target.classList.contains("pipe-route-point");
+      const isPipeSegment = target.classList.contains("pipe-segment-add") || target.classList.contains("pipe-segment-add-area");
+      if (isDraggableNode || isWaypoint || isPipeSegment) {
+        return;
+      }
+      const isLeftClick = e.button === 0 && allowLeftClickPan;
+      const isMiddleClick = e.button === 1;
+      const isSpaceLeftClick = e.button === 0 && spaceKeyDownRef.current;
+      if (isLeftClick || isMiddleClick || isSpaceLeftClick) {
+        e.preventDefault();
+        isPanningRef.current = true;
+        lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+        svg.style.cursor = "grabbing";
+      }
+    };
+    const handleMouseMove = (e) => {
+      if (!isPanningRef.current) return;
+      const dx = e.clientX - lastMousePosRef.current.x;
+      const dy = e.clientY - lastMousePosRef.current.y;
+      lastMousePosRef.current = { x: e.clientX, y: e.clientY };
+      setViewBox((prev) => {
+        const rect = svg.getBoundingClientRect();
+        const scaleX = prev.width / rect.width;
+        const scaleY = prev.height / rect.height;
+        return {
+          ...prev,
+          x: prev.x - dx * scaleX,
+          y: prev.y - dy * scaleY
+        };
+      });
+    };
+    const handleMouseUp = () => {
+      if (isPanningRef.current) {
+        isPanningRef.current = false;
+        svg.style.cursor = allowLeftClickPan || spaceKeyDownRef.current ? "grab" : "";
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.code === "Space" && !spaceKeyDownRef.current) {
+        e.preventDefault();
+        spaceKeyDownRef.current = true;
+        if (!isPanningRef.current && !allowLeftClickPan) {
+          svg.style.cursor = "grab";
+        }
+      }
+    };
+    const handleKeyUp = (e) => {
+      if (e.code === "Space") {
+        spaceKeyDownRef.current = false;
+        if (!isPanningRef.current && !allowLeftClickPan) {
+          svg.style.cursor = "";
+        }
+      }
+    };
+    if (allowLeftClickPan && !isPanningRef.current) {
+      svg.style.cursor = "grab";
+    }
+    svg.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      svg.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [enablePan, allowLeftClickPan]);
+  useEffect4(() => {
+    if (!svgRef.current) return;
+    if (!enablePan && !enableZoom) return;
+    const svg = svgRef.current;
+    const handleTouchStart = (e) => {
+      const target = e.target;
+      const isDraggableNode = target.closest("[data-node-id]");
+      const isWaypoint = target.classList.contains("pipe-route-point");
+      const isPipeSegment = target.classList.contains("pipe-segment-add") || target.classList.contains("pipe-segment-add-area");
+      if ((isDraggableNode || isWaypoint || isPipeSegment) && e.touches.length === 1) {
+        return;
+      }
+      if (e.touches.length === 1 && enablePan) {
+        isPanningRef.current = true;
+        lastMousePosRef.current = {
+          x: e.touches[0].clientX,
+          y: e.touches[0].clientY
+        };
+      } else if (e.touches.length === 2 && enableZoom) {
+        const touch1 = e.touches[0];
+        const touch2 = e.touches[1];
+        const distance = Math.hypot(
+          touch2.clientX - touch1.clientX,
+          touch2.clientY - touch1.clientY
+        );
+        lastTouchDistanceRef.current = distance;
+      }
+    };
+    const handleTouchMove = (e) => {
+      e.preventDefault();
+      if (e.touches.length === 1 && isPanningRef.current && enablePan) {
+        const touch = e.touches[0];
+        const dx = touch.clientX - lastMousePosRef.current.x;
+        const dy = touch.clientY - lastMousePosRef.current.y;
+        lastMousePosRef.current = { x: touch.clientX, y: touch.clientY };
+        setViewBox((prev) => {
+          const rect = svg.getBoundingClientRect();
+          const scaleX = prev.width / rect.width;
+          const scaleY = prev.height / rect.height;
+          return {
+            ...prev,
+            x: prev.x - dx * scaleX,
+            y: prev.y - dy * scaleY
+          };
+        });
+      } else if (e.touches.length === 2 && enableZoom && lastTouchDistanceRef.current) {
+        const touch1 = e.touches[0];
+        const touch2 = e.touches[1];
+        const distance = Math.hypot(
+          touch2.clientX - touch1.clientX,
+          touch2.clientY - touch1.clientY
+        );
+        const scale = distance / lastTouchDistanceRef.current;
+        lastTouchDistanceRef.current = distance;
+        const centerX = (touch1.clientX + touch2.clientX) / 2;
+        const centerY = (touch1.clientY + touch2.clientY) / 2;
+        const rect = svg.getBoundingClientRect();
+        setViewBox((prev) => {
+          const svgX = prev.x + (centerX - rect.left) / rect.width * prev.width;
+          const svgY = prev.y + (centerY - rect.top) / rect.height * prev.height;
+          let newWidth = prev.width / scale;
+          let newHeight = prev.height / scale;
+          const currentZoom = initialViewBox.width / prev.width;
+          const newZoom = currentZoom * scale;
+          if (newZoom < minZoom || newZoom > 1 / minZoom) {
+            return prev;
+          }
+          const newX = svgX - (centerX - rect.left) / rect.width * newWidth;
+          const newY = svgY - (centerY - rect.top) / rect.height * newHeight;
+          return {
+            x: newX,
+            y: newY,
+            width: newWidth,
+            height: newHeight
+          };
+        });
+      }
+    };
+    const handleTouchEnd = () => {
+      isPanningRef.current = false;
+      lastTouchDistanceRef.current = null;
+    };
+    svg.addEventListener("touchstart", handleTouchStart);
+    svg.addEventListener("touchmove", handleTouchMove, { passive: false });
+    svg.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      svg.removeEventListener("touchstart", handleTouchStart);
+      svg.removeEventListener("touchmove", handleTouchMove);
+      svg.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [enablePan, enableZoom, minZoom, initialViewBox]);
+  const screenToWorld = useCallback3(
+    (screenX, screenY) => {
+      const svg = svgRef.current;
+      if (!svg) return { x: screenX, y: screenY };
+      const rect = svg.getBoundingClientRect();
+      const svgAspect = rect.width / rect.height;
+      const viewBoxAspect = viewBox.width / viewBox.height;
+      let actualWidth = rect.width;
+      let actualHeight = rect.height;
+      let offsetX = 0;
+      let offsetY = 0;
+      if (svgAspect > viewBoxAspect) {
+        actualWidth = rect.height * viewBoxAspect;
+        offsetX = (rect.width - actualWidth) / 2;
+      } else {
+        actualHeight = rect.width / viewBoxAspect;
+        offsetY = (rect.height - actualHeight) / 2;
+      }
+      const relativeX = (screenX - rect.left - offsetX) / actualWidth;
+      const relativeY = (screenY - rect.top - offsetY) / actualHeight;
+      const worldX = viewBox.x + relativeX * viewBox.width;
+      const worldY = viewBox.y + relativeY * viewBox.height;
+      return { x: worldX, y: worldY };
+    },
+    [viewBox]
+  );
+  return {
+    viewBox,
+    resetViewBox,
+    zoomIn,
+    zoomOut,
+    screenToWorld,
+    svgRef
+  };
+}
+
+// src/diagram/hooks/useSelection.ts
+import { useState as useState8, useCallback as useCallback4 } from "react";
+function useSelection(options = {}) {
+  const {
+    multiSelect = true,
+    initialSelection = { selectedNodeIds: /* @__PURE__ */ new Set(), selectedPipeIds: /* @__PURE__ */ new Set() },
+    onSelectionChange
+  } = options;
+  const [selection, setSelection] = useState8(initialSelection);
+  const notifyChange = useCallback4(
+    (newSelection) => {
+      if (onSelectionChange) {
+        onSelectionChange(newSelection);
+      }
+    },
+    [onSelectionChange]
+  );
+  const isNodeSelected = useCallback4(
+    (nodeId) => selection.selectedNodeIds.has(nodeId),
+    [selection.selectedNodeIds]
+  );
+  const isPipeSelected = useCallback4(
+    (pipeId) => selection.selectedPipeIds.has(pipeId),
+    [selection.selectedPipeIds]
+  );
+  const selectNode = useCallback4(
+    (nodeId, isMultiSelect = false) => {
+      setSelection((prev) => {
+        const newNodeIds = new Set(isMultiSelect && multiSelect ? prev.selectedNodeIds : []);
+        if (newNodeIds.has(nodeId)) {
+          newNodeIds.delete(nodeId);
+        } else {
+          newNodeIds.add(nodeId);
+        }
+        const newSelection = {
+          selectedNodeIds: newNodeIds,
+          selectedPipeIds: isMultiSelect && multiSelect ? prev.selectedPipeIds : /* @__PURE__ */ new Set()
+        };
+        notifyChange(newSelection);
+        return newSelection;
+      });
+    },
+    [multiSelect, notifyChange]
+  );
+  const selectPipe = useCallback4(
+    (pipeId, isMultiSelect = false) => {
+      setSelection((prev) => {
+        const newPipeIds = new Set(isMultiSelect && multiSelect ? prev.selectedPipeIds : []);
+        if (newPipeIds.has(pipeId)) {
+          newPipeIds.delete(pipeId);
+        } else {
+          newPipeIds.add(pipeId);
+        }
+        const newSelection = {
+          selectedNodeIds: isMultiSelect && multiSelect ? prev.selectedNodeIds : /* @__PURE__ */ new Set(),
+          selectedPipeIds: newPipeIds
+        };
+        notifyChange(newSelection);
+        return newSelection;
+      });
+    },
+    [multiSelect, notifyChange]
+  );
+  const clearSelection = useCallback4(() => {
+    const newSelection = {
+      selectedNodeIds: /* @__PURE__ */ new Set(),
+      selectedPipeIds: /* @__PURE__ */ new Set()
+    };
+    setSelection(newSelection);
+    notifyChange(newSelection);
+  }, [notifyChange]);
+  const selectNodes = useCallback4(
+    (nodeIds) => {
+      const newSelection = {
+        selectedNodeIds: new Set(nodeIds),
+        selectedPipeIds: /* @__PURE__ */ new Set()
+      };
+      setSelection(newSelection);
+      notifyChange(newSelection);
+    },
+    [notifyChange]
+  );
+  const selectPipes = useCallback4(
+    (pipeIds) => {
+      const newSelection = {
+        selectedNodeIds: /* @__PURE__ */ new Set(),
+        selectedPipeIds: new Set(pipeIds)
+      };
+      setSelection(newSelection);
+      notifyChange(newSelection);
+    },
+    [notifyChange]
+  );
+  return {
+    selection,
+    isNodeSelected,
+    isPipeSelected,
+    selectNode,
+    selectPipe,
+    clearSelection,
+    selectNodes,
+    selectPipes
+  };
+}
+
+// src/diagram/hooks/useTelemetry.ts
+import { useState as useState9, useCallback as useCallback5, useEffect as useEffect5, useRef as useRef3 } from "react";
+function useTelemetry(options = {}) {
+  const {
+    initialBindings = [],
+    onTelemetryChange,
+    refreshInterval = 0
+  } = options;
+  const [telemetry, setTelemetry] = useState9(() => {
+    const map = /* @__PURE__ */ new Map();
+    initialBindings.forEach((binding) => {
+      map.set(binding.nodeId, binding);
+    });
+    return map;
+  });
+  const telemetryRef = useRef3(telemetry);
+  telemetryRef.current = telemetry;
+  const notifyChange = useCallback5(
+    (newTelemetry) => {
+      if (onTelemetryChange) {
+        onTelemetryChange(newTelemetry);
+      }
+    },
+    [onTelemetryChange]
+  );
+  const updateTelemetry = useCallback5(
+    (nodeId, value) => {
+      setTelemetry((prev) => {
+        const newMap = new Map(prev);
+        const existing = newMap.get(nodeId);
+        if (existing) {
+          newMap.set(nodeId, {
+            ...existing,
+            value: {
+              ...value,
+              timestamp: value.timestamp ?? Date.now()
+            }
+          });
+        } else {
+          newMap.set(nodeId, {
+            nodeId,
+            tag: nodeId,
+            // Default tag to nodeId
+            value: {
+              ...value,
+              timestamp: value.timestamp ?? Date.now()
+            }
+          });
+        }
+        notifyChange(newMap);
+        return newMap;
+      });
+    },
+    [notifyChange]
+  );
+  const updateTelemetryBatch = useCallback5(
+    (updates) => {
+      setTelemetry((prev) => {
+        const newMap = new Map(prev);
+        let hasChanges = false;
+        updates.forEach(({ nodeId, tag, value, history, display, thresholds, statusColors, remove }) => {
+          if (remove) {
+            if (newMap.has(nodeId)) {
+              newMap.delete(nodeId);
+              hasChanges = true;
+            }
+            return;
+          }
+          const existing = newMap.get(nodeId);
+          if (existing) {
+            newMap.set(nodeId, {
+              ...existing,
+              ...tag !== void 0 && { tag },
+              ...value !== void 0 && {
+                value: {
+                  ...value,
+                  timestamp: value.timestamp ?? Date.now()
+                }
+              },
+              ...history !== void 0 && { history },
+              ...display !== void 0 && { display },
+              ...thresholds !== void 0 && { thresholds },
+              ...statusColors !== void 0 && { statusColors }
+            });
+            hasChanges = true;
+          } else if (value) {
+            newMap.set(nodeId, {
+              nodeId,
+              tag: tag ?? nodeId,
+              value: {
+                ...value,
+                timestamp: value.timestamp ?? Date.now()
+              },
+              ...history !== void 0 && { history },
+              ...display !== void 0 && { display },
+              ...thresholds !== void 0 && { thresholds },
+              ...statusColors !== void 0 && { statusColors }
+            });
+            hasChanges = true;
+          }
+        });
+        if (hasChanges) {
+          notifyChange(newMap);
+        }
+        return newMap;
+      });
+    },
+    [notifyChange]
+  );
+  const getTelemetry = useCallback5(
+    (nodeId) => telemetryRef.current.get(nodeId),
+    []
+  );
+  const clearTelemetry = useCallback5(() => {
+    const newMap = /* @__PURE__ */ new Map();
+    setTelemetry(newMap);
+    notifyChange(newMap);
+  }, [notifyChange]);
+  const setBindings = useCallback5(
+    (bindings) => {
+      const newMap = /* @__PURE__ */ new Map();
+      bindings.forEach((binding) => {
+        newMap.set(binding.nodeId, binding);
+      });
+      setTelemetry(newMap);
+      notifyChange(newMap);
+    },
+    [notifyChange]
+  );
+  useEffect5(() => {
+    if (refreshInterval <= 0) return;
+    const intervalId = setInterval(() => {
+      notifyChange(telemetryRef.current);
+    }, refreshInterval);
+    return () => clearInterval(intervalId);
+  }, [refreshInterval, notifyChange]);
+  return {
+    telemetry,
+    updateTelemetry,
+    updateTelemetryBatch,
+    getTelemetry,
+    clearTelemetry,
+    setBindings
+  };
+}
+
+// src/diagram/hooks/useDrag.ts
+import { useState as useState10, useCallback as useCallback6, useRef as useRef4, useEffect as useEffect6 } from "react";
+function useDrag(options = {}) {
+  const {
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    snapToGrid = 0,
+    dragThreshold = 3,
+    screenToWorld = (x, y) => ({ x, y })
+  } = options;
+  const [dragState, setDragState] = useState10({
+    isDragging: false,
+    startPosition: null,
+    offset: { x: 0, y: 0 },
+    draggedId: null
+  });
+  const [isListening, setIsListening] = useState10(false);
+  const dragStartRef = useRef4(null);
+  const hasMovedRef = useRef4(false);
+  const applySnap = useCallback6(
+    (value) => {
+      if (snapToGrid <= 0) return value;
+      return Math.round(value / snapToGrid) * snapToGrid;
+    },
+    [snapToGrid]
+  );
+  const handleMouseMove = useCallback6(
+    (event) => {
+      if (!dragStartRef.current) return;
+      const { id, screenStart: _screenStart, itemPosition, clickOffset } = dragStartRef.current;
+      const currentWorld = screenToWorld(event.clientX, event.clientY);
+      const newX = currentWorld.x - clickOffset.x;
+      const newY = currentWorld.y - clickOffset.y;
+      const rawOffset = {
+        x: newX - itemPosition.x,
+        y: newY - itemPosition.y
+      };
+      const distance = Math.sqrt(rawOffset.x ** 2 + rawOffset.y ** 2);
+      if (!hasMovedRef.current && distance < dragThreshold) {
+        return;
+      }
+      if (!hasMovedRef.current) {
+        hasMovedRef.current = true;
+        setDragState({
+          isDragging: true,
+          startPosition: itemPosition,
+          offset: { x: 0, y: 0 },
+          draggedId: id
+        });
+        onDragStart?.(id, itemPosition);
+      }
+      const snappedOffset = {
+        x: applySnap(rawOffset.x),
+        y: applySnap(rawOffset.y)
+      };
+      const newPosition = {
+        x: applySnap(itemPosition.x + rawOffset.x),
+        y: applySnap(itemPosition.y + rawOffset.y)
+      };
+      setDragState((prev) => ({
+        ...prev,
+        offset: snappedOffset
+      }));
+      onDragMove?.(id, snappedOffset, newPosition);
+    },
+    [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
+  );
+  const handleMouseUp = useCallback6(
+    (event) => {
+      if (!dragStartRef.current || !hasMovedRef.current) {
+        dragStartRef.current = null;
+        hasMovedRef.current = false;
+        setIsListening(false);
+        return;
+      }
+      const { id, itemPosition, clickOffset } = dragStartRef.current;
+      const currentWorld = screenToWorld(event.clientX, event.clientY);
+      const newX = currentWorld.x - clickOffset.x;
+      const newY = currentWorld.y - clickOffset.y;
+      const rawOffset = {
+        x: newX - itemPosition.x,
+        y: newY - itemPosition.y
+      };
+      const snappedOffset = {
+        x: applySnap(rawOffset.x),
+        y: applySnap(rawOffset.y)
+      };
+      const finalPosition = {
+        x: applySnap(itemPosition.x + rawOffset.x),
+        y: applySnap(itemPosition.y + rawOffset.y)
+      };
+      onDragEnd?.(id, snappedOffset, finalPosition);
+      setDragState({
+        isDragging: false,
+        startPosition: null,
+        offset: { x: 0, y: 0 },
+        draggedId: null
+      });
+      dragStartRef.current = null;
+      hasMovedRef.current = false;
+      setIsListening(false);
+    },
+    [screenToWorld, applySnap, onDragEnd]
+  );
+  const handleTouchMove = useCallback6(
+    (event) => {
+      if (!dragStartRef.current || event.touches.length !== 1) return;
+      const touch = event.touches[0];
+      const { id, screenStart: _screenStart2, itemPosition, clickOffset } = dragStartRef.current;
+      const currentWorld = screenToWorld(touch.clientX, touch.clientY);
+      const newX = currentWorld.x - clickOffset.x;
+      const newY = currentWorld.y - clickOffset.y;
+      const rawOffset = {
+        x: newX - itemPosition.x,
+        y: newY - itemPosition.y
+      };
+      const distance = Math.sqrt(rawOffset.x ** 2 + rawOffset.y ** 2);
+      if (!hasMovedRef.current && distance < dragThreshold) {
+        return;
+      }
+      event.preventDefault();
+      if (!hasMovedRef.current) {
+        hasMovedRef.current = true;
+        setDragState({
+          isDragging: true,
+          startPosition: itemPosition,
+          offset: { x: 0, y: 0 },
+          draggedId: id
+        });
+        onDragStart?.(id, itemPosition);
+      }
+      const snappedOffset = {
+        x: applySnap(rawOffset.x),
+        y: applySnap(rawOffset.y)
+      };
+      const newPosition = {
+        x: applySnap(itemPosition.x + rawOffset.x),
+        y: applySnap(itemPosition.y + rawOffset.y)
+      };
+      setDragState((prev) => ({
+        ...prev,
+        offset: snappedOffset
+      }));
+      onDragMove?.(id, snappedOffset, newPosition);
+    },
+    [screenToWorld, dragThreshold, applySnap, onDragStart, onDragMove]
+  );
+  const handleTouchEnd = useCallback6(
+    (event) => {
+      if (!dragStartRef.current || !hasMovedRef.current) {
+        dragStartRef.current = null;
+        hasMovedRef.current = false;
+        setIsListening(false);
+        return;
+      }
+      const { id, itemPosition, clickOffset } = dragStartRef.current;
+      const touch = event.changedTouches[0];
+      const currentWorld = screenToWorld(touch.clientX, touch.clientY);
+      const newX = currentWorld.x - clickOffset.x;
+      const newY = currentWorld.y - clickOffset.y;
+      const rawOffset = {
+        x: newX - itemPosition.x,
+        y: newY - itemPosition.y
+      };
+      const snappedOffset = {
+        x: applySnap(rawOffset.x),
+        y: applySnap(rawOffset.y)
+      };
+      const finalPosition = {
+        x: applySnap(itemPosition.x + rawOffset.x),
+        y: applySnap(itemPosition.y + rawOffset.y)
+      };
+      onDragEnd?.(id, snappedOffset, finalPosition);
+      setDragState({
+        isDragging: false,
+        startPosition: null,
+        offset: { x: 0, y: 0 },
+        draggedId: null
+      });
+      dragStartRef.current = null;
+      hasMovedRef.current = false;
+      setIsListening(false);
+    },
+    [screenToWorld, applySnap, onDragEnd]
+  );
+  useEffect6(() => {
+    if (!isListening) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    document.addEventListener("touchend", handleTouchEnd);
+    document.addEventListener("touchcancel", handleTouchEnd);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+      document.removeEventListener("touchcancel", handleTouchEnd);
+    };
+  }, [isListening, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+  const startDrag = useCallback6(
+    (id, event, itemPosition) => {
+      event.stopPropagation();
+      let clientX;
+      let clientY;
+      if ("touches" in event) {
+        if (event.touches.length !== 1) return;
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      } else {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      }
+      const worldStart = screenToWorld(clientX, clientY);
+      const clickOffset = {
+        x: worldStart.x - itemPosition.x,
+        y: worldStart.y - itemPosition.y
+      };
+      dragStartRef.current = {
+        id,
+        screenStart: { x: clientX, y: clientY },
+        worldStart,
+        itemPosition,
+        clickOffset
+      };
+      hasMovedRef.current = false;
+      setIsListening(true);
+    },
+    [screenToWorld]
+  );
+  const cancelDrag = useCallback6(() => {
+    dragStartRef.current = null;
+    hasMovedRef.current = false;
+    setIsListening(false);
+    setDragState({
+      isDragging: false,
+      startPosition: null,
+      offset: { x: 0, y: 0 },
+      draggedId: null
+    });
+  }, []);
+  const isDraggingItem = useCallback6(
+    (id) => dragState.isDragging && dragState.draggedId === id,
+    [dragState.isDragging, dragState.draggedId]
+  );
+  return {
+    dragState,
+    startDrag,
+    cancelDrag,
+    isDraggingItem
+  };
+}
+
+// src/diagram/hooks/useKeyboardShortcuts.ts
+import { useEffect as useEffect7 } from "react";
+function useKeyboardShortcuts(options) {
+  const {
+    onDelete,
+    onCopy,
+    onPaste,
+    onUndo,
+    onRedo,
+    onSelectAll,
+    enabled = true
+  } = options;
+  useEffect7(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
+        return;
+      }
+      const isCtrl = event.ctrlKey || event.metaKey;
+      const isShift = event.shiftKey;
+      if ((event.key === "Delete" || event.key === "Backspace") && !isCtrl) {
+        event.preventDefault();
+        onDelete?.();
+        return;
+      }
+      if (isCtrl && event.key === "c") {
+        event.preventDefault();
+        onCopy?.();
+        return;
+      }
+      if (isCtrl && event.key === "v") {
+        event.preventDefault();
+        onPaste?.();
+        return;
+      }
+      if (isCtrl && event.key === "z" && !isShift) {
+        event.preventDefault();
+        onUndo?.();
+        return;
+      }
+      if (isCtrl && (event.key === "y" || event.key === "z" && isShift)) {
+        event.preventDefault();
+        onRedo?.();
+        return;
+      }
+      if (isCtrl && event.key === "a") {
+        event.preventDefault();
+        onSelectAll?.();
+        return;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, onDelete, onCopy, onPaste, onUndo, onRedo, onSelectAll]);
+}
+
+// src/diagram/utils/portCalculations.ts
+function getPortWorldPosition(node, portId) {
+  const symbol = getSymbolDefinition(node.symbolId);
+  if (!symbol) return null;
+  const port = symbol.ports.find((p) => p.id === portId);
+  if (!port) return null;
+  const { x: nodeX, y: nodeY, rotation = 0, scale = 1, flipX = false, flipY = false } = node.transform;
+  let portX = port.x;
+  let portY = port.y;
+  const centerX = symbol.viewBox.width / 2;
+  const centerY = symbol.viewBox.height / 2;
+  if (flipX) {
+    portX = symbol.viewBox.width - portX;
+  }
+  if (flipY) {
+    portY = symbol.viewBox.height - portY;
+  }
+  portX = centerX + (portX - centerX) * scale;
+  portY = centerY + (portY - centerY) * scale;
+  if (rotation !== 0) {
+    const rad = rotation * Math.PI / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const dx = portX - centerX;
+    const dy = portY - centerY;
+    portX = centerX + dx * cos - dy * sin;
+    portY = centerY + dx * sin + dy * cos;
+  }
+  return {
+    x: nodeX + portX,
+    y: nodeY + portY
+  };
+}
+function generateRoutePoints(fromNode, fromPortId, toNode, toPortId, options) {
+  const startPoint = getPortWorldPosition(fromNode, fromPortId);
+  const endPoint = getPortWorldPosition(toNode, toPortId);
+  if (!startPoint || !endPoint) {
+    return [];
+  }
+  const style = options?.style || "direct";
+  if (style === "direct") {
+    return [startPoint, endPoint];
+  }
+  if (style === "orthogonal" && options?.waypoints) {
+    return [startPoint, ...options.waypoints, endPoint];
+  }
+  if (style === "orthogonal") {
+    const midX = (startPoint.x + endPoint.x) / 2;
+    return [
+      startPoint,
+      { x: midX, y: startPoint.y },
+      { x: midX, y: endPoint.y },
+      endPoint
+    ];
+  }
+  return [startPoint, endPoint];
+}
+function nodeHasPort(node, portId) {
+  const symbol = getSymbolDefinition(node.symbolId);
+  if (!symbol) return false;
+  return symbol.ports.some((p) => p.id === portId);
+}
+
+// src/components/PIDCanvas/PIDCanvas.tsx
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function PIDCanvas({
+  diagram,
+  className = "",
+  style,
+  features = {
+    pan: true,
+    zoom: true,
+    selection: false,
+    multiSelect: true,
+    telemetry: false,
+    dragNodes: false
+  },
+  onSelectionChange,
+  onNodeClick,
+  onPipeClick,
+  onNodeMove,
+  onDiagramChange,
+  onDelete,
+  onItemsCopied,
+  onPaste,
+  onSymbolDrop,
+  onPipeCreated,
+  telemetry,
+  ...props
+}) {
+  const [localDiagram, setLocalDiagram] = useState11(diagram);
+  const [dragOverPosition, setDragOverPosition] = useState11(null);
+  const [isConnecting, setIsConnecting] = useState11(false);
+  const [connectionSource, setConnectionSource] = useState11(null);
+  const [connectionSourcePort, setConnectionSourcePort] = useState11(null);
+  const [connectionCursor, setConnectionCursor] = useState11(null);
+  const [hoveredNode, setHoveredNode] = useState11(null);
+  const [hoveredPort, setHoveredPort] = useState11(null);
+  useEffect8(() => {
+    setLocalDiagram(diagram);
+  }, [diagram]);
+  const {
+    viewBox: controlledViewBox,
+    svgRef,
+    screenToWorld
+  } = useViewBox({
+    initialViewBox: diagram.viewBox,
+    enablePan: features.pan ?? true,
+    enableZoom: features.zoom ?? true
+  });
+  const { selection, selectNode, selectPipe, clearSelection } = useSelection({
+    multiSelect: features.multiSelect ?? true,
+    onSelectionChange
+  });
+  const dragEnabled = features.dragNodes ?? false;
+  const selectionEnabled = features.selection ?? false;
+  const handleDragEnd = useCallback7(
+    (nodeId, offset, finalPosition) => {
+      const dragDistance = Math.sqrt(offset.x ** 2 + offset.y ** 2);
+      if (dragDistance < 2) {
+        if (selectionEnabled) {
+          selectNode(nodeId, false);
+        }
+        return;
+      }
+      const updatedNodes = localDiagram.nodes.map(
+        (node) => node.id === nodeId ? {
+          ...node,
+          transform: {
+            ...node.transform,
+            x: finalPosition.x,
+            y: finalPosition.y
+          }
+        } : node
+      );
+      const affectedPipes = localDiagram.pipes.filter(
+        (pipe) => pipe.fromNodeId === nodeId || pipe.toNodeId === nodeId
+      );
+      const updatedPipes = localDiagram.pipes.map((pipe) => {
+        if (!affectedPipes.find((p) => p.id === pipe.id)) return pipe;
+        const sourceNode = updatedNodes.find((n) => n.id === pipe.fromNodeId);
+        const targetNode = updatedNodes.find((n) => n.id === pipe.toNodeId);
+        if (!sourceNode || !targetNode) return pipe;
+        if (pipe.routePoints.length > 2) {
+          return pipe;
+        }
+        const newRoutePoints = generateRoutePoints(
+          sourceNode,
+          pipe.fromPortId ?? "output",
+          targetNode,
+          pipe.toPortId ?? "input"
+        );
+        return {
+          ...pipe,
+          routePoints: newRoutePoints
+        };
+      });
+      const updatedDiagram = {
+        ...localDiagram,
+        nodes: updatedNodes,
+        pipes: updatedPipes
+      };
+      setLocalDiagram(updatedDiagram);
+      onDiagramChange?.(updatedDiagram);
+      onNodeMove?.(nodeId, finalPosition.x, finalPosition.y);
+    },
+    [localDiagram, onDiagramChange, onNodeMove, selectionEnabled, selectNode]
+  );
+  const { dragState, startDrag } = useDrag({
+    snapToGrid: features.snapToGrid ?? 0,
+    screenToWorld,
+    onDragEnd: handleDragEnd
+  });
+  const { dragState: waypointDragState, startDrag: startWaypointDrag } = useDrag({
+    snapToGrid: features.snapToGrid ?? 0,
+    screenToWorld,
+    onDragEnd: (pipeId, _offset, finalPosition) => {
+      const [actualPipeId, pointIndex] = pipeId.split(":");
+      const idx = parseInt(pointIndex, 10);
+      const updatedPipes = localDiagram.pipes.map((pipe) => {
+        if (pipe.id !== actualPipeId) return pipe;
+        const updatedRoutePoints = pipe.routePoints.map(
+          (point, i) => i === idx ? { x: finalPosition.x, y: finalPosition.y } : point
+        );
+        return { ...pipe, routePoints: updatedRoutePoints };
+      });
+      const updatedDiagram = { ...localDiagram, pipes: updatedPipes };
+      setLocalDiagram(updatedDiagram);
+      onDiagramChange?.(updatedDiagram);
+    }
+  });
+  const handleNodeDragStart = useCallback7(
+    (nodeId, event) => {
+      const node = localDiagram.nodes.find((n) => n.id === nodeId);
+      if (!node) return;
+      startDrag(nodeId, event, { x: node.transform.x, y: node.transform.y });
+    },
+    [localDiagram.nodes, startDrag]
+  );
+  const handleWaypointDragStart = useCallback7(
+    (pipeId, pointIndex, event) => {
+      const pipe = localDiagram.pipes.find((p) => p.id === pipeId);
+      if (!pipe || pointIndex >= pipe.routePoints.length) return;
+      const point = pipe.routePoints[pointIndex];
+      startWaypointDrag(`${pipeId}:${pointIndex}`, event, { x: point.x, y: point.y });
+    },
+    [localDiagram.pipes, startWaypointDrag]
+  );
+  const handlePipeSegmentClick = useCallback7(
+    (pipeId, position, segmentIndex) => {
+      const updatedPipes = localDiagram.pipes.map((pipe) => {
+        if (pipe.id !== pipeId) return pipe;
+        const updatedRoutePoints = [
+          ...pipe.routePoints.slice(0, segmentIndex + 1),
+          position,
+          ...pipe.routePoints.slice(segmentIndex + 1)
+        ];
+        return { ...pipe, routePoints: updatedRoutePoints };
+      });
+      const updatedDiagram = { ...localDiagram, pipes: updatedPipes };
+      setLocalDiagram(updatedDiagram);
+      onDiagramChange?.(updatedDiagram);
+    },
+    [localDiagram, onDiagramChange]
+  );
+  const telemetryEnabled = features.telemetry ?? false;
+  const handleDelete = useCallback7(() => {
+    if (!selectionEnabled) return;
+    const { selectedNodeIds, selectedPipeIds } = selection;
+    if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
+    const updatedNodes = localDiagram.nodes.filter((node) => !selectedNodeIds.has(node.id));
+    const updatedPipes = localDiagram.pipes.filter(
+      (pipe) => !selectedPipeIds.has(pipe.id) && !selectedNodeIds.has(pipe.fromNodeId) && !selectedNodeIds.has(pipe.toNodeId)
+    );
+    const updatedDiagram = {
+      ...localDiagram,
+      nodes: updatedNodes,
+      pipes: updatedPipes
+    };
+    setLocalDiagram(updatedDiagram);
+    clearSelection();
+    onDiagramChange?.(updatedDiagram);
+    onDelete?.(Array.from(selectedNodeIds), Array.from(selectedPipeIds));
+  }, [selection, localDiagram, selectionEnabled, clearSelection, onDiagramChange, onDelete]);
+  const handleCopy = useCallback7(() => {
+    if (!selectionEnabled) return;
+    const { selectedNodeIds, selectedPipeIds } = selection;
+    if (selectedNodeIds.size === 0 && selectedPipeIds.size === 0) return;
+    onItemsCopied?.(Array.from(selectedNodeIds), Array.from(selectedPipeIds));
+  }, [selection, selectionEnabled, onItemsCopied]);
+  const handlePaste = useCallback7(() => {
+    if (!selectionEnabled) return;
+    onPaste?.();
+  }, [selectionEnabled, onPaste]);
+  const handleNodeDoubleClick = (nodeId, event) => {
+    if (!selectionEnabled) return;
+    console.log("Node double-clicked:", nodeId);
+    selectNode(nodeId, event.ctrlKey || event.metaKey);
+  };
+  useKeyboardShortcuts({
+    enabled: features.keyboardShortcuts ?? false,
+    onDelete: handleDelete,
+    onCopy: handleCopy,
+    onPaste: handlePaste
+  });
+  const handleNodeClick = (nodeId, event) => {
+    const connectionModeEnabled = features.connectionMode ?? false;
+    if (connectionModeEnabled && isConnecting) {
+      if (connectionSource && connectionSource !== nodeId) {
+        onPipeCreated?.(
+          connectionSource,
+          nodeId,
+          connectionSourcePort || void 0,
+          hoveredPort || void 0
+        );
+        setIsConnecting(false);
+        setConnectionSource(null);
+        setConnectionSourcePort(null);
+        setConnectionCursor(null);
+        setHoveredPort(null);
+      }
+      return;
+    }
+    if (connectionModeEnabled && !isConnecting) {
+      setIsConnecting(true);
+      setConnectionSource(nodeId);
+      setConnectionSourcePort(hoveredPort);
+      return;
+    }
+    if (selectionEnabled) {
+      selectNode(nodeId, event.ctrlKey || event.metaKey);
+    }
+    onNodeClick?.(nodeId);
+  };
+  const handlePipeClick = (pipeId, event) => {
+    if (selectionEnabled) {
+      selectPipe(pipeId, event.ctrlKey || event.metaKey);
+    }
+    onPipeClick?.(pipeId);
+  };
+  const handleCanvasClick = () => {
+    if (selectionEnabled) {
+      clearSelection();
+    }
+  };
+  const handleDragOver = useCallback7(
+    (event) => {
+      if (!features.allowSymbolDrop) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "copy";
+      if (!svgRef.current) return;
+      const worldPos = screenToWorld(event.clientX, event.clientY);
+      setDragOverPosition(worldPos);
+    },
+    [features.allowSymbolDrop, screenToWorld]
+  );
+  const handleDrop = useCallback7(
+    (event) => {
+      if (!features.allowSymbolDrop) return;
+      event.preventDefault();
+      setDragOverPosition(null);
+      const symbolId = event.dataTransfer.getData("application/symbol-id");
+      if (!symbolId) return;
+      if (!svgRef.current) return;
+      const worldPos = screenToWorld(event.clientX, event.clientY);
+      onSymbolDrop?.(symbolId, worldPos);
+    },
+    [features.allowSymbolDrop, screenToWorld, onSymbolDrop]
+  );
+  const handleDragLeave = useCallback7(() => {
+    setDragOverPosition(null);
+  }, []);
+  const handleMouseMove = useCallback7(
+    (event) => {
+      const connectionModeEnabled = features.connectionMode ?? false;
+      if (connectionModeEnabled) {
+        const worldPos = screenToWorld(event.clientX, event.clientY);
+        if (isConnecting && connectionSource) {
+          setConnectionCursor(worldPos);
+        }
+        let foundPort = null;
+        let foundNode = null;
+        for (const node of localDiagram.nodes) {
+          const symbol = getSymbolDefinition(node.symbolId);
+          if (!symbol || !symbol.ports) continue;
+          for (const port of symbol.ports) {
+            const portPos = getPortWorldPosition(node, port.id);
+            if (!portPos) continue;
+            const distance = Math.sqrt(
+              (worldPos.x - portPos.x) ** 2 + (worldPos.y - portPos.y) ** 2
+            );
+            if (distance < 10) {
+              foundPort = port.id;
+              foundNode = node.id;
+              break;
+            }
+          }
+          if (foundPort) break;
+        }
+        setHoveredPort(foundPort);
+        setHoveredNode(foundNode);
+      }
+    },
+    [isConnecting, connectionSource, screenToWorld, localDiagram.nodes, features.connectionMode]
+  );
+  const { name } = diagram;
+  const viewBox = controlledViewBox;
+  const displayDiagram = localDiagram;
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: `pid-canvas ${className}`.trim(),
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: "#f5f5f5",
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxs12(
+        "svg",
+        {
+          ref: svgRef,
+          width: "100%",
+          height: "100%",
+          viewBox: `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`,
+          preserveAspectRatio: "xMidYMid meet",
+          style: {
+            display: "block"
+          },
+          "aria-label": `P&ID diagram: ${name}`,
+          role: "img",
+          onClick: handleCanvasClick,
+          onMouseMove: handleMouseMove,
+          onDragOver: handleDragOver,
+          onDrop: handleDrop,
+          onDragLeave: handleDragLeave,
+          children: [
+            /* @__PURE__ */ jsxs12("defs", { children: [
+              /* @__PURE__ */ jsx16("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx16("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
+              /* @__PURE__ */ jsxs12("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
+                /* @__PURE__ */ jsx16("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
+                /* @__PURE__ */ jsx16("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx16(
+              "rect",
+              {
+                x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
+                y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
+                width: Math.ceil(viewBox.width * 3 / 25) * 25,
+                height: Math.ceil(viewBox.height * 3 / 25) * 25,
+                fill: "url(#grid-major)"
+              }
+            ),
+            /* @__PURE__ */ jsx16(
+              PipeRenderer,
+              {
+                pipes: displayDiagram.pipes,
+                selectedPipeIds: selectionEnabled ? selection.selectedPipeIds : void 0,
+                onPipeClick: selectionEnabled ? handlePipeClick : void 0,
+                enableWaypointEditing: false,
+                onWaypointDragStart: void 0,
+                editingPipeId: null,
+                draggingWaypointIndex: null,
+                waypointDragOffset: void 0,
+                onPipeSegmentClick: void 0
+              }
+            ),
+            /* @__PURE__ */ jsx16(
+              NodeRenderer,
+              {
+                nodes: displayDiagram.nodes,
+                selectedNodeIds: selectionEnabled ? selection.selectedNodeIds : void 0,
+                onNodeClick: selectionEnabled || features.connectionMode ? handleNodeClick : void 0,
+                onNodeDoubleClick: selectionEnabled ? handleNodeDoubleClick : void 0,
+                enableDrag: dragEnabled && !isConnecting,
+                onNodeDragStart: dragEnabled && !isConnecting ? handleNodeDragStart : void 0,
+                draggingNodeId: dragState.draggedId,
+                dragOffset: dragState.offset
+              }
+            ),
+            (features.editPipeRoutes ?? false) && /* @__PURE__ */ jsx16(
+              PipeRenderer,
+              {
+                pipes: displayDiagram.pipes,
+                selectedPipeIds: selectionEnabled ? selection.selectedPipeIds : void 0,
+                onPipeClick: void 0,
+                enableWaypointEditing: true,
+                onWaypointDragStart: handleWaypointDragStart,
+                editingPipeId: waypointDragState.draggedId?.split(":")[0] || null,
+                draggingWaypointIndex: waypointDragState.draggedId ? parseInt(waypointDragState.draggedId.split(":")[1], 10) : null,
+                waypointDragOffset: waypointDragState.offset,
+                onPipeSegmentClick: handlePipeSegmentClick
+              }
+            ),
+            telemetryEnabled && telemetry && /* @__PURE__ */ jsx16("g", { id: "layer-telemetry", children: displayDiagram.nodes.map((node) => {
+              const binding = telemetry.get(node.id);
+              if (!binding) return null;
+              const symbol = getSymbolDefinition(node.symbolId);
+              if (!symbol) return null;
+              const overlayY = node.transform.y - symbol.viewBox.height / 2 - 10;
+              return /* @__PURE__ */ jsx16(
+                DataOverlay,
+                {
+                  nodeId: node.id,
+                  x: node.transform.x,
+                  y: overlayY,
+                  telemetry: binding
+                },
+                `telemetry-${node.id}`
+              );
+            }) }),
+            dragOverPosition && /* @__PURE__ */ jsx16(
+              "circle",
+              {
+                cx: dragOverPosition.x,
+                cy: dragOverPosition.y,
+                r: 20,
+                fill: "#3b82f6",
+                opacity: 0.3,
+                stroke: "#3b82f6",
+                strokeWidth: 2,
+                pointerEvents: "none"
+              }
+            ),
+            isConnecting && connectionSource && connectionCursor && /* @__PURE__ */ jsx16("g", { id: "connection-preview", pointerEvents: "none", children: (() => {
+              const sourceNode = displayDiagram.nodes.find((n) => n.id === connectionSource);
+              if (!sourceNode) return null;
+              const symbol = getSymbolDefinition(sourceNode.symbolId);
+              let lineStartX = sourceNode.transform.x;
+              let lineStartY = sourceNode.transform.y;
+              if (connectionSourcePort && symbol?.ports) {
+                const port = symbol.ports.find((p) => p.id === connectionSourcePort);
+                if (port) {
+                  const portPos = getPortWorldPosition(sourceNode, connectionSourcePort);
+                  if (portPos) {
+                    lineStartX = portPos.x;
+                    lineStartY = portPos.y;
+                  }
+                }
+              }
+              return /* @__PURE__ */ jsxs12(Fragment5, { children: [
+                /* @__PURE__ */ jsx16(
+                  "circle",
+                  {
+                    cx: sourceNode.transform.x,
+                    cy: sourceNode.transform.y,
+                    r: 30,
+                    fill: "none",
+                    stroke: "#10b981",
+                    strokeWidth: 3,
+                    opacity: 0.6
+                  }
+                ),
+                /* @__PURE__ */ jsx16(
+                  "line",
+                  {
+                    x1: lineStartX,
+                    y1: lineStartY,
+                    x2: connectionCursor.x,
+                    y2: connectionCursor.y,
+                    stroke: "#10b981",
+                    strokeWidth: 2,
+                    strokeDasharray: "5,5",
+                    opacity: 0.8
+                  }
+                ),
+                /* @__PURE__ */ jsx16(
+                  "circle",
+                  {
+                    cx: connectionCursor.x,
+                    cy: connectionCursor.y,
+                    r: 8,
+                    fill: "#10b981",
+                    opacity: 0.6
+                  }
+                )
+              ] });
+            })() }),
+            features.connectionMode && /* @__PURE__ */ jsx16("g", { id: "port-indicators", pointerEvents: "none", children: displayDiagram.nodes.map((node) => {
+              const symbol = getSymbolDefinition(node.symbolId);
+              if (!symbol?.ports) return null;
+              return symbol.ports.map((port) => {
+                const portPos = getPortWorldPosition(node, port.id);
+                if (!portPos) return null;
+                const isHovered = hoveredPort === port.id && hoveredNode === node.id;
+                const isSourcePort = node.id === connectionSource && port.id === connectionSourcePort;
+                return /* @__PURE__ */ jsx16(
+                  "circle",
+                  {
+                    cx: portPos.x,
+                    cy: portPos.y,
+                    r: isHovered ? 8 : 5,
+                    fill: isSourcePort ? "#10b981" : isHovered ? "#3b82f6" : "#94a3b8",
+                    stroke: isSourcePort ? "#059669" : isHovered ? "#2563eb" : "#64748b",
+                    strokeWidth: isHovered || isSourcePort ? 2 : 1,
+                    opacity: isHovered || isSourcePort ? 1 : 0.6
+                  },
+                  `${node.id}-${port.id}`
+                );
+              });
+            }) })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/SymbolLibrary/SymbolLibrary.tsx
+import { useState as useState12 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function SymbolLibrary({
+  className = "",
+  onSymbolDragStart,
+  showCategories = true,
+  categories = ["Valves", "Pumps", "Tanks", "Instruments", "Displays"]
+}) {
+  const [selectedCategory, setSelectedCategory] = useState12("all");
+  const [searchQuery, setSearchQuery] = useState12("");
+  const symbolIds = getAvailableSymbols();
+  const allSymbols = symbolIds.map((id) => getSymbolDefinition(id)).filter((symbol) => symbol !== void 0);
+  const filteredSymbols = allSymbols.filter((symbol) => {
+    const matchesCategory = selectedCategory === "all" || symbol.category === selectedCategory;
+    const matchesSearch = searchQuery === "" || symbol.name.toLowerCase().includes(searchQuery.toLowerCase()) || symbol.id.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+  const handleDragStart = (symbol, event) => {
+    event.dataTransfer.setData("application/symbol-id", symbol.id);
+    event.dataTransfer.effectAllowed = "copy";
+    onSymbolDragStart?.(symbol.id, event);
+  };
+  return /* @__PURE__ */ jsxs13("div", { className: `symbol-library ${className}`.trim(), style: styles.container, children: [
+    /* @__PURE__ */ jsx17("div", { style: styles.header, children: /* @__PURE__ */ jsx17("h3", { style: styles.title, children: "Symbol Library" }) }),
+    /* @__PURE__ */ jsx17("div", { style: styles.searchContainer, children: /* @__PURE__ */ jsx17(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search symbols...",
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        style: styles.searchInput
+      }
+    ) }),
+    showCategories && /* @__PURE__ */ jsxs13("div", { style: styles.categories, children: [
+      /* @__PURE__ */ jsx17(
+        "button",
+        {
+          onClick: () => setSelectedCategory("all"),
+          style: {
+            ...styles.categoryButton,
+            ...selectedCategory === "all" ? styles.categoryButtonActive : {}
+          },
+          children: "All"
+        }
+      ),
+      categories.map((category) => /* @__PURE__ */ jsx17(
+        "button",
+        {
+          onClick: () => setSelectedCategory(category),
+          style: {
+            ...styles.categoryButton,
+            ...selectedCategory === category ? styles.categoryButtonActive : {}
+          },
+          children: category
+        },
+        category
+      ))
+    ] }),
+    /* @__PURE__ */ jsx17("div", { style: styles.symbolGrid, children: filteredSymbols.length === 0 ? /* @__PURE__ */ jsx17("div", { style: styles.emptyState, children: "No symbols found" }) : filteredSymbols.map((symbol) => /* @__PURE__ */ jsxs13(
+      "div",
+      {
+        draggable: true,
+        onDragStart: (e) => handleDragStart(symbol, e),
+        style: styles.symbolCard,
+        title: symbol.metadata?.description || symbol.name,
+        children: [
+          /* @__PURE__ */ jsx17("div", { style: styles.symbolPreview, children: /* @__PURE__ */ jsx17(
+            "svg",
+            {
+              viewBox: `${symbol.viewBox.x} ${symbol.viewBox.y} ${symbol.viewBox.width} ${symbol.viewBox.height}`,
+              style: styles.symbolSvg,
+              children: /* @__PURE__ */ jsx17("g", { dangerouslySetInnerHTML: { __html: symbol.svgContent } })
+            }
+          ) }),
+          /* @__PURE__ */ jsx17("div", { style: styles.symbolName, children: symbol.name })
+        ]
+      },
+      symbol.id
+    )) })
+  ] });
+}
+var styles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    backgroundColor: "#ffffff",
+    border: "1px solid #e0e0e0",
+    borderRadius: "8px",
+    overflow: "hidden"
+  },
+  header: {
+    padding: "16px",
+    borderBottom: "1px solid #e0e0e0",
+    backgroundColor: "#f5f5f5"
+  },
+  title: {
+    margin: 0,
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "#263238"
+  },
+  searchContainer: {
+    padding: "12px 16px",
+    borderBottom: "1px solid #e0e0e0"
+  },
+  searchInput: {
+    width: "100%",
+    padding: "8px 12px",
+    border: "1px solid #e0e0e0",
+    borderRadius: "4px",
+    fontSize: "14px",
+    outline: "none"
+  },
+  categories: {
+    display: "flex",
+    gap: "8px",
+    padding: "12px 16px",
+    borderBottom: "1px solid #e0e0e0",
+    flexWrap: "wrap"
+  },
+  categoryButton: {
+    padding: "6px 12px",
+    border: "1px solid #e0e0e0",
+    borderRadius: "4px",
+    backgroundColor: "#ffffff",
+    fontSize: "13px",
+    cursor: "pointer",
+    transition: "all 0.2s"
+  },
+  categoryButtonActive: {
+    backgroundColor: "#3b82f6",
+    color: "#ffffff",
+    borderColor: "#3b82f6"
+  },
+  symbolGrid: {
+    flex: 1,
+    padding: "16px",
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
+    gap: "12px",
+    overflowY: "auto",
+    alignContent: "start"
+  },
+  emptyState: {
+    gridColumn: "1 / -1",
+    textAlign: "center",
+    padding: "32px",
+    color: "#999"
+  },
+  symbolCard: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "12px",
+    border: "1px solid #e0e0e0",
+    borderRadius: "6px",
+    backgroundColor: "#ffffff",
+    cursor: "grab",
+    transition: "all 0.2s"
+  },
+  symbolPreview: {
+    width: "60px",
+    height: "60px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: "8px"
+  },
+  symbolSvg: {
+    maxWidth: "100%",
+    maxHeight: "100%"
+  },
+  symbolName: {
+    fontSize: "12px",
+    color: "#263238",
+    textAlign: "center",
+    wordBreak: "break-word",
+    lineHeight: "1.3"
+  }
+};
+
+// src/components/NodeConfigPanel/NodeConfigPanel.tsx
+import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function NodeConfigPanel({
+  node,
+  binding,
+  onUpdateNode,
+  onUpdateTelemetry,
+  onAddTelemetry,
+  onRemove,
+  className = "",
+  style = {}
+}) {
+  const defaultStyle = {
+    width: "320px",
+    backgroundColor: "#f8fafc",
+    borderLeft: "1px solid #e2e8f0",
+    overflow: "auto",
+    padding: "20px",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs14("div", { className, style: defaultStyle, children: [
+    /* @__PURE__ */ jsxs14("h2", { style: { margin: "0 0 16px 0", fontSize: "1rem", fontWeight: 600 }, children: [
+      "Configure: ",
+      node.id
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx18("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Node Settings" }),
+      /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label:" }),
+      /* @__PURE__ */ jsx18(
+        "input",
+        {
+          type: "text",
+          value: node.label || node.id,
+          onChange: (e) => onUpdateNode({ label: e.target.value }),
+          style: {
+            width: "100%",
+            padding: "6px 8px",
+            borderRadius: "4px",
+            border: "1px solid #cbd5e1",
+            fontSize: "0.875rem",
+            marginBottom: "8px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs14("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset X:" }),
+          /* @__PURE__ */ jsx18(
+            "input",
+            {
+              type: "number",
+              value: node.labelOffset?.x ?? 0,
+              onChange: (e) => onUpdateNode({
+                labelOffset: {
+                  x: parseFloat(e.target.value) || 0,
+                  y: node.labelOffset?.y ?? 0
+                }
+              }),
+              style: {
+                width: "100%",
+                padding: "6px 8px",
+                borderRadius: "4px",
+                border: "1px solid #cbd5e1",
+                fontSize: "0.875rem"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { children: [
+          /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Offset Y:" }),
+          /* @__PURE__ */ jsx18(
+            "input",
+            {
+              type: "number",
+              value: node.labelOffset?.y ?? 0,
+              onChange: (e) => onUpdateNode({
+                labelOffset: {
+                  x: node.labelOffset?.x ?? 0,
+                  y: parseFloat(e.target.value) || 0
+                }
+              }),
+              style: {
+                width: "100%",
+                padding: "6px 8px",
+                borderRadius: "4px",
+                border: "1px solid #cbd5e1",
+                fontSize: "0.875rem"
+              }
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx18("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Telemetry Data" }),
+      !binding ? /* @__PURE__ */ jsx18(
+        "button",
+        {
+          onClick: () => {
+            if (onAddTelemetry) {
+              onAddTelemetry();
+            } else {
+              onUpdateTelemetry({
+                nodeId: node.id,
+                tag: node.id,
+                value: {
+                  value: 50,
+                  status: "normal",
+                  unit: "PSI",
+                  timestamp: Date.now()
+                },
+                history: [45, 47, 48, 50, 52, 51, 49, 50],
+                display: {
+                  showValue: true,
+                  showSparkline: false,
+                  precision: 1,
+                  backgroundColor: "status"
+                },
+                thresholds: {
+                  highHigh: 85,
+                  high: 70,
+                  low: 30,
+                  lowLow: 15
+                }
+              });
+            }
+          },
+          style: {
+            padding: "8px 16px",
+            backgroundColor: "#3b82f6",
+            color: "#fff",
+            border: "none",
+            borderRadius: "4px",
+            cursor: "pointer",
+            width: "100%"
+          },
+          children: "+ Add Telemetry"
+        }
+      ) : /* @__PURE__ */ jsxs14(Fragment6, { children: [
+        /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Initial Value:" }),
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "number",
+            value: binding.value.value,
+            onChange: (e) => onUpdateTelemetry({
+              nodeId: node.id,
+              value: {
+                ...binding.value,
+                value: parseFloat(e.target.value) || 0
+              }
+            }),
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              border: "1px solid #cbd5e1",
+              fontSize: "0.875rem",
+              marginBottom: "8px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Unit:" }),
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "text",
+            value: binding.value.unit || "",
+            onChange: (e) => onUpdateTelemetry({
+              nodeId: node.id,
+              value: {
+                ...binding.value,
+                unit: e.target.value
+              }
+            }),
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              border: "1px solid #cbd5e1",
+              fontSize: "0.875rem",
+              marginBottom: "8px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs14("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ jsx18(
+            "input",
+            {
+              type: "checkbox",
+              checked: binding.display?.showSparkline ?? false,
+              onChange: (e) => onUpdateTelemetry({
+                nodeId: node.id,
+                tag: binding.tag,
+                value: binding.value,
+                history: binding.history,
+                thresholds: binding.thresholds,
+                statusColors: binding.statusColors,
+                display: {
+                  ...binding.display,
+                  showSparkline: e.target.checked
+                }
+              }),
+              style: { marginRight: "6px" }
+            }
+          ),
+          "Show Sparkline"
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { style: { marginTop: "12px" }, children: [
+          /* @__PURE__ */ jsx18(
+            "label",
+            {
+              style: {
+                fontSize: "0.75rem",
+                fontWeight: 600,
+                display: "block",
+                marginBottom: "8px"
+              },
+              children: "Telemetry Position Offset:"
+            }
+          ),
+          /* @__PURE__ */ jsxs14("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px" }, children: [
+            /* @__PURE__ */ jsxs14("div", { children: [
+              /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "X Offset:" }),
+              /* @__PURE__ */ jsx18(
+                "input",
+                {
+                  type: "number",
+                  value: binding.display?.offsetX ?? 0,
+                  onChange: (e) => onUpdateTelemetry({
+                    nodeId: node.id,
+                    tag: binding.tag,
+                    value: binding.value,
+                    history: binding.history,
+                    thresholds: binding.thresholds,
+                    statusColors: binding.statusColors,
+                    display: {
+                      ...binding.display,
+                      offsetX: parseFloat(e.target.value) || 0
+                    }
+                  }),
+                  style: {
+                    width: "100%",
+                    padding: "4px 6px",
+                    borderRadius: "4px",
+                    border: "1px solid #cbd5e1",
+                    fontSize: "0.75rem"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs14("div", { children: [
+              /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Y Offset:" }),
+              /* @__PURE__ */ jsx18(
+                "input",
+                {
+                  type: "number",
+                  value: binding.display?.offsetY ?? 0,
+                  onChange: (e) => onUpdateTelemetry({
+                    nodeId: node.id,
+                    tag: binding.tag,
+                    value: binding.value,
+                    history: binding.history,
+                    thresholds: binding.thresholds,
+                    statusColors: binding.statusColors,
+                    display: {
+                      ...binding.display,
+                      offsetY: parseFloat(e.target.value) || 0
+                    }
+                  }),
+                  style: {
+                    width: "100%",
+                    padding: "4px 6px",
+                    borderRadius: "4px",
+                    border: "1px solid #cbd5e1",
+                    fontSize: "0.75rem"
+                  }
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { style: { marginTop: "16px" }, children: [
+            /* @__PURE__ */ jsx18(
+              "label",
+              {
+                style: {
+                  fontSize: "0.75rem",
+                  fontWeight: 600,
+                  display: "block",
+                  marginBottom: "8px"
+                },
+                children: "Display Colors:"
+              }
+            ),
+            /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Text Color:" }),
+              /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx18(
+                  "input",
+                  {
+                    type: "color",
+                    value: binding.display?.textColor ?? "#000000",
+                    onChange: (e) => onUpdateTelemetry({
+                      nodeId: node.id,
+                      tag: binding.tag,
+                      value: binding.value,
+                      history: binding.history,
+                      thresholds: binding.thresholds,
+                      statusColors: binding.statusColors,
+                      display: {
+                        ...binding.display,
+                        textColor: e.target.value
+                      }
+                    }),
+                    style: {
+                      width: "40px",
+                      height: "28px",
+                      border: "1px solid #cbd5e1",
+                      borderRadius: "4px",
+                      cursor: "pointer"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx18(
+                  "input",
+                  {
+                    type: "text",
+                    value: binding.display?.textColor ?? "#000000",
+                    onChange: (e) => onUpdateTelemetry({
+                      nodeId: node.id,
+                      tag: binding.tag,
+                      value: binding.value,
+                      history: binding.history,
+                      thresholds: binding.thresholds,
+                      statusColors: binding.statusColors,
+                      display: {
+                        ...binding.display,
+                        textColor: e.target.value
+                      }
+                    }),
+                    placeholder: "#000000",
+                    style: {
+                      flex: 1,
+                      padding: "4px 6px",
+                      borderRadius: "4px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "0.7rem",
+                      fontFamily: "monospace"
+                    }
+                  }
+                )
+              ] })
+            ] }),
+            binding.display?.showSparkline && /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Sparkline Color:" }),
+              /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx18(
+                  "input",
+                  {
+                    type: "color",
+                    value: binding.display?.sparklineColor ?? "#3b82f6",
+                    onChange: (e) => onUpdateTelemetry({
+                      nodeId: node.id,
+                      tag: binding.tag,
+                      value: binding.value,
+                      history: binding.history,
+                      thresholds: binding.thresholds,
+                      statusColors: binding.statusColors,
+                      display: {
+                        ...binding.display,
+                        sparklineColor: e.target.value
+                      }
+                    }),
+                    style: {
+                      width: "40px",
+                      height: "28px",
+                      border: "1px solid #cbd5e1",
+                      borderRadius: "4px",
+                      cursor: "pointer"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx18(
+                  "input",
+                  {
+                    type: "text",
+                    value: binding.display?.sparklineColor ?? "#3b82f6",
+                    onChange: (e) => onUpdateTelemetry({
+                      nodeId: node.id,
+                      tag: binding.tag,
+                      value: binding.value,
+                      history: binding.history,
+                      thresholds: binding.thresholds,
+                      statusColors: binding.statusColors,
+                      display: {
+                        ...binding.display,
+                        sparklineColor: e.target.value
+                      }
+                    }),
+                    placeholder: "#3b82f6",
+                    style: {
+                      flex: 1,
+                      padding: "4px 6px",
+                      borderRadius: "4px",
+                      border: "1px solid #cbd5e1",
+                      fontSize: "0.7rem",
+                      fontFamily: "monospace"
+                    }
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "8px" }, children: [
+              /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.7rem", display: "block", marginBottom: "4px" }, children: "Background:" }),
+              /* @__PURE__ */ jsx18(
+                "input",
+                {
+                  type: "text",
+                  value: binding.display?.backgroundColor ?? "status",
+                  onChange: (e) => onUpdateTelemetry({
+                    nodeId: node.id,
+                    tag: binding.tag,
+                    value: binding.value,
+                    history: binding.history,
+                    thresholds: binding.thresholds,
+                    statusColors: binding.statusColors,
+                    display: {
+                      ...binding.display,
+                      backgroundColor: e.target.value
+                    }
+                  }),
+                  placeholder: "status or #ffffff",
+                  style: {
+                    width: "100%",
+                    padding: "4px 6px",
+                    borderRadius: "4px",
+                    border: "1px solid #cbd5e1",
+                    fontSize: "0.7rem",
+                    fontFamily: "monospace"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx18("div", { style: { fontSize: "0.65rem", color: "#6b7280", marginTop: "2px" }, children: "Use 'status' for status-based color or hex code" })
+            ] })
+          ] }),
+          " "
+        ] })
+      ] })
+    ] }),
+    binding && /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx18("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)";
+        return /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: label }),
+          /* @__PURE__ */ jsx18(
+            "input",
+            {
+              type: "number",
+              value: binding.thresholds?.[key] ?? (key === "highHigh" ? 85 : key === "high" ? 70 : key === "low" ? 30 : 15),
+              onChange: (e) => onUpdateTelemetry({
+                nodeId: node.id,
+                thresholds: {
+                  ...binding.thresholds,
+                  [key]: parseFloat(e.target.value) || 0
+                }
+              }),
+              style: {
+                width: "100%",
+                padding: "6px 8px",
+                borderRadius: "4px",
+                border: "1px solid #cbd5e1",
+                fontSize: "0.875rem"
+              }
+            }
+          )
+        ] }, key);
+      })
+    ] }),
+    binding && /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "20px" }, children: [
+      /* @__PURE__ */ jsx18("h3", { style: { fontSize: "0.875rem", fontWeight: 600, marginBottom: "8px" }, children: "Status Colors" }),
+      ["normal", "warning", "alarm", "fault", "off"].map((status) => {
+        const defaultColors = {
+          normal: "#10b981",
+          warning: "#f59e0b",
+          alarm: "#ef4444",
+          fault: "#8b5cf6",
+          off: "#6b7280"
+        };
+        const label = status === "normal" ? "Normal" : status === "warning" ? "Warning" : status === "alarm" ? "Alarm" : status === "fault" ? "Fault" : "Off";
+        return /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "8px" }, children: [
+          /* @__PURE__ */ jsxs14("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: [
+            label,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxs14("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx18(
+              "input",
+              {
+                type: "color",
+                value: binding.statusColors?.[status] ?? defaultColors[status],
+                onChange: (e) => onUpdateTelemetry({
+                  nodeId: node.id,
+                  statusColors: {
+                    ...binding.statusColors,
+                    [status]: e.target.value
+                  }
+                }),
+                style: {
+                  width: "50px",
+                  height: "32px",
+                  border: "1px solid #cbd5e1",
+                  borderRadius: "4px",
+                  cursor: "pointer"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx18(
+              "input",
+              {
+                type: "text",
+                value: binding.statusColors?.[status] ?? defaultColors[status],
+                onChange: (e) => onUpdateTelemetry({
+                  nodeId: node.id,
+                  statusColors: {
+                    ...binding.statusColors,
+                    [status]: e.target.value
+                  }
+                }),
+                placeholder: defaultColors[status],
+                style: {
+                  flex: 1,
+                  padding: "6px 8px",
+                  borderRadius: "4px",
+                  border: "1px solid #cbd5e1",
+                  fontSize: "0.75rem",
+                  fontFamily: "monospace"
+                }
+              }
+            )
+          ] })
+        ] }, status);
+      })
+    ] }),
+    /* @__PURE__ */ jsx18("div", { style: { marginTop: "20px", paddingTop: "20px", borderTop: "1px solid #cbd5e1" }, children: /* @__PURE__ */ jsx18(
+      "button",
+      {
+        onClick: onRemove,
+        style: {
+          padding: "8px 16px",
+          backgroundColor: "#ef4444",
+          color: "#fff",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer",
+          width: "100%"
+        },
+        children: "Remove Node"
+      }
+    ) })
+  ] });
+}
+
+// src/diagram/utils/serialization.ts
+function validateDiagram(diagram) {
+  const errors = [];
+  if (!diagram || typeof diagram !== "object") {
+    errors.push("Diagram must be an object");
+    return { valid: false, errors };
+  }
+  const d = diagram;
+  if (!d.id || typeof d.id !== "string") {
+    errors.push("Diagram must have a valid id (string)");
+  }
+  if (!d.name || typeof d.name !== "string") {
+    errors.push("Diagram must have a valid name (string)");
+  }
+  if (!d.version || typeof d.version !== "string") {
+    errors.push("Diagram must have a valid version (string)");
+  }
+  if (!d.viewBox) {
+    errors.push("Diagram must have a viewBox");
+  } else if (typeof d.viewBox.x !== "number" || typeof d.viewBox.y !== "number" || typeof d.viewBox.width !== "number" || typeof d.viewBox.height !== "number") {
+    errors.push("ViewBox must have numeric x, y, width, height properties");
+  }
+  if (!Array.isArray(d.nodes)) {
+    errors.push("Diagram.nodes must be an array");
+  }
+  if (!Array.isArray(d.pipes)) {
+    errors.push("Diagram.pipes must be an array");
+  }
+  if (!Array.isArray(d.overlays)) {
+    errors.push("Diagram.overlays must be an array");
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function exportDiagram(diagram) {
+  return JSON.stringify(diagram, null, 2);
+}
+function importDiagram(json) {
+  try {
+    const parsed = JSON.parse(json);
+    const validation = validateDiagram(parsed);
+    if (!validation.valid) {
+      throw new Error(`Invalid diagram: ${validation.errors.join(", ")}`);
+    }
+    return parsed;
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      throw new Error(`Invalid JSON: ${error.message}`);
+    }
+    throw error;
+  }
+}
+
+// src/diagram/examples/exampleDiagram.ts
+var nodes = [
+  {
+    id: "V-101",
+    symbolId: "valve-ball",
+    transform: {
+      x: 100,
+      y: 150,
+      rotation: 0
+    },
+    ports: [
+      { id: "inlet", x: -25, y: 0, type: "inlet" },
+      { id: "outlet", x: 25, y: 0, type: "outlet" }
+    ]
+  },
+  {
+    id: "P-101",
+    symbolId: "pump-centrifugal",
+    transform: {
+      x: 250,
+      y: 150,
+      rotation: 0
+    },
+    ports: [
+      { id: "inlet", x: -40, y: 0, type: "inlet" },
+      { id: "outlet", x: 40, y: 0, type: "outlet" }
+    ]
+  },
+  {
+    id: "T-101",
+    symbolId: "vessel-tank",
+    transform: {
+      x: 450,
+      y: 120,
+      rotation: 0
+    },
+    ports: [
+      { id: "inlet", x: 0, y: -40, type: "inlet" },
+      { id: "outlet", x: 0, y: 40, type: "outlet" }
+    ]
+  }
+];
+var exampleDiagram = {
+  id: "example-001",
+  name: "Simple Process Flow",
+  version: "1.0.0",
+  viewBox: {
+    x: -100,
+    y: -50,
+    width: 1200,
+    height: 600
+  },
+  nodes,
+  pipes: [
+    {
+      id: "pipe-001",
+      fromNodeId: "V-101",
+      fromPortId: "outlet",
+      toNodeId: "P-101",
+      toPortId: "inlet",
+      routePoints: generateRoutePoints(nodes[0], "outlet", nodes[1], "inlet"),
+      style: {
+        stroke: "#0277bd",
+        strokeWidth: 4
+      }
+    },
+    {
+      id: "pipe-002",
+      fromNodeId: "P-101",
+      fromPortId: "outlet",
+      toNodeId: "T-101",
+      toPortId: "inlet",
+      routePoints: generateRoutePoints(nodes[1], "outlet", nodes[2], "inlet", {
+        style: "orthogonal"
+      }),
+      style: {
+        stroke: "#2e7d32",
+        strokeWidth: 4
+      }
+    }
+  ],
+  overlays: [
+    {
+      id: "overlay-v101",
+      type: "value",
+      anchorType: "node",
+      anchorId: "V-101",
+      offset: { x: 0, y: -40 },
+      binding: {
+        sourceType: "tag",
+        source: "V101.position",
+        format: "0.0%"
+      },
+      content: {
+        text: "Valve Position"
+      }
+    },
+    {
+      id: "overlay-p101",
+      type: "value",
+      anchorType: "node",
+      anchorId: "P-101",
+      offset: { x: 0, y: -50 },
+      binding: {
+        sourceType: "tag",
+        source: "P101.flow",
+        format: "0.0 LPM"
+      },
+      content: {
+        text: "Flow Rate"
+      }
+    },
+    {
+      id: "overlay-t101",
+      type: "gauge",
+      anchorType: "node",
+      anchorId: "T-101",
+      offset: { x: 60, y: 0 },
+      binding: {
+        sourceType: "tag",
+        source: "T101.level"
+      },
+      content: {
+        component: "CircularGauge",
+        props: {
+          max: 100,
+          unit: "%",
+          label: "Level"
+        }
+      }
+    }
+  ],
+  metadata: {
+    author: "System",
+    created: "2025-12-31T00:00:00Z",
+    description: "Example P&ID diagram demonstrating schema structure",
+    tags: ["example", "tutorial"]
+  }
+};
+
+// src/utils/thresholds.ts
+function calculateThresholdStatus(value, thresholds) {
+  if (!thresholds) return "normal";
+  const { highHigh, high, low, lowLow } = thresholds;
+  if (highHigh !== void 0 && value >= highHigh) {
+    return "alarm";
+  }
+  if (lowLow !== void 0 && value <= lowLow) {
+    return "fault";
+  }
+  if (high !== void 0 && value >= high) {
+    return "warning";
+  }
+  if (low !== void 0 && value <= low) {
+    return "warning";
+  }
+  return "normal";
+}
+var DEFAULT_THRESHOLDS = {
+  highHigh: 85,
+  high: 70,
+  low: 30,
+  lowLow: 15
+};
+
+// src/diagram/hooks/useSimulation.ts
+import { useEffect as useEffect9 } from "react";
+function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
+  const {
+    interval = 2e3,
+    enabled = true,
+    maxChange = 10,
+    minValue = 0,
+    maxValue = 100,
+    historyLength = 10,
+    generateValue
+  } = options;
+  useEffect9(() => {
+    if (!enabled) return;
+    const intervalId = setInterval(() => {
+      const updates = [];
+      telemetry.forEach((binding, nodeId) => {
+        if (typeof binding.value.value !== "number") return;
+        const currentValue = binding.value.value;
+        let newValue;
+        if (generateValue) {
+          newValue = generateValue(currentValue, nodeId);
+        } else {
+          const change = (Math.random() - 0.5) * maxChange;
+          newValue = Math.max(minValue, Math.min(maxValue, currentValue + change));
+        }
+        const status = calculateThresholdStatus(newValue, binding.thresholds);
+        const newHistory = [...binding.history || [], newValue].slice(-historyLength);
+        updates.push({
+          nodeId,
+          tag: binding.tag,
+          value: {
+            ...binding.value,
+            value: newValue,
+            status,
+            timestamp: Date.now()
+          },
+          history: newHistory,
+          display: binding.display,
+          thresholds: binding.thresholds,
+          statusColors: binding.statusColors
+        });
+      });
+      if (updates.length > 0) {
+        updateTelemetryBatch(updates);
+      }
+    }, interval);
+    return () => clearInterval(intervalId);
+  }, [
+    enabled,
+    interval,
+    maxChange,
+    minValue,
+    maxValue,
+    historyLength,
+    generateValue,
+    telemetry,
+    updateTelemetryBatch
+  ]);
+}
 export {
   Button,
   CardHeader,
@@ -1677,6 +4750,7 @@ export {
   CardValue,
   CircularGauge,
   ControlPanel,
+  DEFAULT_THRESHOLDS,
   DashboardCard,
   DisplayModeToggle,
   EquipmentIndicator,
@@ -1688,6 +4762,8 @@ export {
   LeftPanel,
   LeftToggleButton,
   LegacyValueEntry,
+  NodeConfigPanel,
+  PIDCanvas,
   PanelContent,
   PanelTabs,
   RightPanel,
@@ -1698,13 +4774,31 @@ export {
   Selector,
   Sparkline,
   StatusIndicator,
+  SymbolLibrary,
   ThemeProvider,
   ThemeToggle,
   TrendLine,
   ValueEntry,
   ZoomButton,
   ZoomControls,
+  calculateThresholdStatus,
+  exampleDiagram,
+  exportDiagram,
+  generateRoutePoints,
+  getAvailableSymbols,
+  getPortWorldPosition,
+  getSymbolDefinition,
+  importDiagram,
+  mockSymbolLibrary,
+  nodeHasPort,
   overlayStyles,
-  useTheme
+  useDrag,
+  useKeyboardShortcuts,
+  useSelection,
+  useSimulation,
+  useTelemetry,
+  useTheme,
+  useViewBox,
+  validateDiagram
 };
 //# sourceMappingURL=index.js.map