@procaaso/alphinity-ui-components 1.12.0 → 1.13.0

package/dist/index.d.cts

@@ -1337,6 +1337,54 @@ interface UnknownStatusGlyphProps extends Omit<React__default.SVGProps<SVGSVGEle
  */
 declare function UnknownStatusGlyph({ size, counterRotate, style, ...rest }: UnknownStatusGlyphProps): React__default.ReactElement;
 
+/**
+ * A corner badge slot on a node (#33).
+ *
+ * A badge marks a condition that is NOT a health severity (`NodeInstance.status`)
+ * and must never replace the node's body color. A device can be tripped AND
+ * blocked at the same time; `status` shows the trip, the badge shows the
+ * block, and both render at once. This is a general slot, not a fixed
+ * prohibition badge: the consumer names the glyph, the colors, the corner,
+ * the size, and the motion. Register additional glyphs with
+ * `registerBadgeGlyph` (`src/diagram/badges`) rather than hardcoding a new
+ * one here.
+ */
+interface NodeBadgeAppearance {
+    /**
+     * Which glyph to draw. `'prohibit'` (a circle with a slash) ships with the
+     * library. The set is extensible: register more with `registerBadgeGlyph`
+     * / `registerBadgeGlyphs` and reference them by id here, the same way
+     * `symbolId` references a registered symbol.
+     */
+    glyph: 'prohibit' | string;
+    /** Glyph color (stroke/fill). Consumer picks; no status-driven default. */
+    color?: string;
+    /** Disc background color behind the glyph. Consumer picks. */
+    backgroundColor?: string;
+    /** Which corner of the node's bounding box the badge anchors to. Defaults to 'top-right'. */
+    corner?: NodeBadgeCorner;
+    /** Badge disc diameter, in the symbol's local SVG units. Defaults to 14. */
+    size?: number;
+    /** Accessible label read by assistive tech (e.g. "Start blocked"). */
+    label?: string;
+}
+type NodeBadgeCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Motion for a `NodeBadge`. Steady by default. A consumer that turns on
+ * `blink` MUST supply `blinkPeriodMs` - the library has no default period.
+ * TFFi drives its status tower, its batch bar, and this badge off one shared
+ * constant so all three beat together; a period fixed in the library would
+ * break that agreement, so there is deliberately no fallback value here.
+ */
+type NodeBadgeMotion = {
+    blink?: false;
+} | {
+    blink: true;
+    blinkPeriodMs: number;
+};
+/** The full badge: appearance plus motion. This is the type `NodeInstance.badge` carries. */
+type NodeBadge = NodeBadgeAppearance & NodeBadgeMotion;
+
 interface NodeInstance {
     id: string;
     symbolId: string;
@@ -1361,6 +1409,13 @@ interface NodeInstance {
      * symbol. Default off. Wins over status and customColors.
      */
     positionUnknown?: boolean;
+    /**
+     * A corner badge for a condition that is NOT a health severity (#33),
+     * e.g. a device blocked from starting. Stacks on top of `status` /
+     * `customColors` / `positionUnknown` - it never replaces the node's body
+     * color, so a node can show `status: 'fault'` and a badge at once.
+     */
+    badge?: NodeBadge;
     metadata?: Record<string, unknown>;
 }
 interface Transform {
@@ -2063,6 +2118,36 @@ declare function readAppearanceValue(node: NodeInstance, field: AppearanceField)
 /** Produce the NodeInstance update for a new field value. */
 declare function writeAppearanceValue(node: NodeInstance, field: AppearanceField, value: AppearanceValue): Partial<NodeInstance>;
 
+/**
+ * Registry of badge glyphs for the `NodeBadge` corner slot (#33).
+ *
+ * Mirrors `diagram/symbols/mockSymbolLibrary`'s registration pattern: a
+ * built-in set plus a consumer-registered set, looked up by id. A consumer
+ * calls `registerBadgeGlyph` from its own app code to add a glyph the
+ * library does not ship - the same escape hatch `registerSymbol` already
+ * gives P&ID symbols. This is deliberately NOT a string resolved only
+ * inside the library (the mistake `Overlay.content.component` made, per
+ * #33): the consumer supplies the real markup.
+ */
+interface BadgeGlyphDefinition {
+    /** Id a `NodeBadge.glyph` references. */
+    id: string;
+    /**
+     * Raw SVG markup, drawn centered in a 24x24 local box (0,0 to 24,24).
+     * Use `stroke="currentColor"` / `fill="currentColor"` so the glyph picks
+     * up `NodeBadge.color` - the glyph carries no color of its own, only shape.
+     */
+    svgContent: string;
+}
+/** Register a single custom badge glyph, or replace a built-in one by reusing its id. */
+declare function registerBadgeGlyph(glyph: BadgeGlyphDefinition): void;
+/** Register multiple custom badge glyphs at once. */
+declare function registerBadgeGlyphs(glyphs: BadgeGlyphDefinition[] | Record<string, BadgeGlyphDefinition>): void;
+/** Get a badge glyph definition by id (checks custom glyphs before built-ins). */
+declare function getBadgeGlyph(glyphId: string): BadgeGlyphDefinition | undefined;
+/** List every registered badge glyph id (built-in plus custom). */
+declare function getAvailableBadgeGlyphs(): string[];
+
 /**
  * Telemetry status type
  */
@@ -2479,4 +2564,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, type AppearanceField, type AppearanceFieldKind, type AppearanceTarget, type AppearanceValue, Button, type ButtonProps, COLOR_PRESETS, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type CommandKind, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, type CustomAction, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FORCED_MARK_COLOR, FixedSVGContainer, FooterPanel, type ForcedState, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, ISA_UNKNOWN, ISA_UNKNOWN_DARK, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, NumpadDialog, type NumpadDialogProps, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, STATUS_LED_APPEARANCE, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, type ScalingMetadata, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, UNKNOWN_GLYPH_RING_DASH, UNKNOWN_STATUS_GLYPH_COLOR_VAR, type UnknownGlyphSize, UnknownStatusGlyph, type UnknownStatusGlyphProps, type UseBooleanIndicatorsOptions, type UseDeviceControlsOptions, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAppearanceDefaults, getAppearanceSchema, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, normalizeDeviceStatus, overlayStyles, readAppearanceValue, registerSymbol, registerSymbols, resolvePresetColor, resolveStatusColor, useBooleanIndicators, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram, writeAppearanceValue };
+export { type AnchorType, type AppearanceField, type AppearanceFieldKind, type AppearanceTarget, type AppearanceValue, type BadgeGlyphDefinition, Button, type ButtonProps, COLOR_PRESETS, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type CommandKind, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, type CustomAction, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FORCED_MARK_COLOR, FixedSVGContainer, FooterPanel, type ForcedState, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, ISA_UNKNOWN, ISA_UNKNOWN_DARK, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, type NodeBadge, type NodeBadgeAppearance, type NodeBadgeCorner, type NodeBadgeMotion, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, NumpadDialog, type NumpadDialogProps, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, STATUS_LED_APPEARANCE, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, type ScalingMetadata, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, UNKNOWN_GLYPH_RING_DASH, UNKNOWN_STATUS_GLYPH_COLOR_VAR, type UnknownGlyphSize, UnknownStatusGlyph, type UnknownStatusGlyphProps, type UseBooleanIndicatorsOptions, type UseDeviceControlsOptions, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAppearanceDefaults, getAppearanceSchema, getAvailableBadgeGlyphs, getAvailableSymbols, getBadgeGlyph, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, normalizeDeviceStatus, overlayStyles, readAppearanceValue, registerBadgeGlyph, registerBadgeGlyphs, registerSymbol, registerSymbols, resolvePresetColor, resolveStatusColor, useBooleanIndicators, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram, writeAppearanceValue };

package/dist/index.d.ts

@@ -1337,6 +1337,54 @@ interface UnknownStatusGlyphProps extends Omit<React__default.SVGProps<SVGSVGEle
  */
 declare function UnknownStatusGlyph({ size, counterRotate, style, ...rest }: UnknownStatusGlyphProps): React__default.ReactElement;
 
+/**
+ * A corner badge slot on a node (#33).
+ *
+ * A badge marks a condition that is NOT a health severity (`NodeInstance.status`)
+ * and must never replace the node's body color. A device can be tripped AND
+ * blocked at the same time; `status` shows the trip, the badge shows the
+ * block, and both render at once. This is a general slot, not a fixed
+ * prohibition badge: the consumer names the glyph, the colors, the corner,
+ * the size, and the motion. Register additional glyphs with
+ * `registerBadgeGlyph` (`src/diagram/badges`) rather than hardcoding a new
+ * one here.
+ */
+interface NodeBadgeAppearance {
+    /**
+     * Which glyph to draw. `'prohibit'` (a circle with a slash) ships with the
+     * library. The set is extensible: register more with `registerBadgeGlyph`
+     * / `registerBadgeGlyphs` and reference them by id here, the same way
+     * `symbolId` references a registered symbol.
+     */
+    glyph: 'prohibit' | string;
+    /** Glyph color (stroke/fill). Consumer picks; no status-driven default. */
+    color?: string;
+    /** Disc background color behind the glyph. Consumer picks. */
+    backgroundColor?: string;
+    /** Which corner of the node's bounding box the badge anchors to. Defaults to 'top-right'. */
+    corner?: NodeBadgeCorner;
+    /** Badge disc diameter, in the symbol's local SVG units. Defaults to 14. */
+    size?: number;
+    /** Accessible label read by assistive tech (e.g. "Start blocked"). */
+    label?: string;
+}
+type NodeBadgeCorner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Motion for a `NodeBadge`. Steady by default. A consumer that turns on
+ * `blink` MUST supply `blinkPeriodMs` - the library has no default period.
+ * TFFi drives its status tower, its batch bar, and this badge off one shared
+ * constant so all three beat together; a period fixed in the library would
+ * break that agreement, so there is deliberately no fallback value here.
+ */
+type NodeBadgeMotion = {
+    blink?: false;
+} | {
+    blink: true;
+    blinkPeriodMs: number;
+};
+/** The full badge: appearance plus motion. This is the type `NodeInstance.badge` carries. */
+type NodeBadge = NodeBadgeAppearance & NodeBadgeMotion;
+
 interface NodeInstance {
     id: string;
     symbolId: string;
@@ -1361,6 +1409,13 @@ interface NodeInstance {
      * symbol. Default off. Wins over status and customColors.
      */
     positionUnknown?: boolean;
+    /**
+     * A corner badge for a condition that is NOT a health severity (#33),
+     * e.g. a device blocked from starting. Stacks on top of `status` /
+     * `customColors` / `positionUnknown` - it never replaces the node's body
+     * color, so a node can show `status: 'fault'` and a badge at once.
+     */
+    badge?: NodeBadge;
     metadata?: Record<string, unknown>;
 }
 interface Transform {
@@ -2063,6 +2118,36 @@ declare function readAppearanceValue(node: NodeInstance, field: AppearanceField)
 /** Produce the NodeInstance update for a new field value. */
 declare function writeAppearanceValue(node: NodeInstance, field: AppearanceField, value: AppearanceValue): Partial<NodeInstance>;
 
+/**
+ * Registry of badge glyphs for the `NodeBadge` corner slot (#33).
+ *
+ * Mirrors `diagram/symbols/mockSymbolLibrary`'s registration pattern: a
+ * built-in set plus a consumer-registered set, looked up by id. A consumer
+ * calls `registerBadgeGlyph` from its own app code to add a glyph the
+ * library does not ship - the same escape hatch `registerSymbol` already
+ * gives P&ID symbols. This is deliberately NOT a string resolved only
+ * inside the library (the mistake `Overlay.content.component` made, per
+ * #33): the consumer supplies the real markup.
+ */
+interface BadgeGlyphDefinition {
+    /** Id a `NodeBadge.glyph` references. */
+    id: string;
+    /**
+     * Raw SVG markup, drawn centered in a 24x24 local box (0,0 to 24,24).
+     * Use `stroke="currentColor"` / `fill="currentColor"` so the glyph picks
+     * up `NodeBadge.color` - the glyph carries no color of its own, only shape.
+     */
+    svgContent: string;
+}
+/** Register a single custom badge glyph, or replace a built-in one by reusing its id. */
+declare function registerBadgeGlyph(glyph: BadgeGlyphDefinition): void;
+/** Register multiple custom badge glyphs at once. */
+declare function registerBadgeGlyphs(glyphs: BadgeGlyphDefinition[] | Record<string, BadgeGlyphDefinition>): void;
+/** Get a badge glyph definition by id (checks custom glyphs before built-ins). */
+declare function getBadgeGlyph(glyphId: string): BadgeGlyphDefinition | undefined;
+/** List every registered badge glyph id (built-in plus custom). */
+declare function getAvailableBadgeGlyphs(): string[];
+
 /**
  * Telemetry status type
  */
@@ -2479,4 +2564,4 @@ interface SimulationOptions {
  */
 declare function useSimulation(telemetry: TelemetryMap, updateTelemetryBatch: (updates: Array<any>) => void, options?: SimulationOptions): void;
 
-export { type AnchorType, type AppearanceField, type AppearanceFieldKind, type AppearanceTarget, type AppearanceValue, Button, type ButtonProps, COLOR_PRESETS, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type CommandKind, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, type CustomAction, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FORCED_MARK_COLOR, FixedSVGContainer, FooterPanel, type ForcedState, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, ISA_UNKNOWN, ISA_UNKNOWN_DARK, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, NumpadDialog, type NumpadDialogProps, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, STATUS_LED_APPEARANCE, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, type ScalingMetadata, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, UNKNOWN_GLYPH_RING_DASH, UNKNOWN_STATUS_GLYPH_COLOR_VAR, type UnknownGlyphSize, UnknownStatusGlyph, type UnknownStatusGlyphProps, type UseBooleanIndicatorsOptions, type UseDeviceControlsOptions, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAppearanceDefaults, getAppearanceSchema, getAvailableSymbols, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, normalizeDeviceStatus, overlayStyles, readAppearanceValue, registerSymbol, registerSymbols, resolvePresetColor, resolveStatusColor, useBooleanIndicators, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram, writeAppearanceValue };
+export { type AnchorType, type AppearanceField, type AppearanceFieldKind, type AppearanceTarget, type AppearanceValue, type BadgeGlyphDefinition, Button, type ButtonProps, COLOR_PRESETS, CardHeader, CardUnit, CardValue, CircularGauge, type CircularGaugeProps, type CommandKind, type ConfigActions, type ConfigDisplay, type ConfigParameter, type ConfigSection, type ConfigState, type ConfigTheme, type ControlCapabilities, type ControlMode, ControlPanel, type ControlPanelProps, type ControlParameter, type ControlState, type CustomAction, DEFAULT_STATUS_COLORS, DEFAULT_THRESHOLDS, DashboardCard, type DataBinding, type DeviceConfigBinding, type DeviceConfigMap, DeviceConfigPanel, type DeviceConfigPanelProps, type DeviceControlBinding, type DeviceControlMap, DeviceControlPanel, type DeviceControlPanelProps, type DeviceStatus, type Diagram, type DiagramMetadata, type DisplayMode, DisplayModeToggle, type DragPoint, type DragState, EquipmentIndicator, type EquipmentIndicatorProps, EquipmentIndicatorWithSparkline, type EquipmentIndicatorWithSparklineProps, FORCED_MARK_COLOR, FixedSVGContainer, FooterPanel, type ForcedState, FullscreenContainer, FullscreenWorkspace, type FullscreenWorkspaceProps, type FullscreenWorkspaceTab, ISA_UNKNOWN, ISA_UNKNOWN_DARK, type KeyboardShortcutsOptions, LeftPanel, LeftToggleButton, LegacyValueEntry, type LegacyValueEntryProps, type ModeConfig, type NodeBadge, type NodeBadgeAppearance, type NodeBadgeCorner, type NodeBadgeMotion, NodeConfigPanel, type NodeConfigPanelProps, type NodeControlConfig, NodeControlsPanel, type NodeControlsPanelProps, type NodeInstance, NumpadDialog, type NumpadDialogProps, type Overlay, type OverlayContent, type OverlayTheme, type OverlayType, PIDCanvas, type PIDCanvasControls, type PIDCanvasFeatures, type PIDCanvasProps, PanelContent, PanelTabs, type PipeEdge, type PipeStyle, type Point, type PortDefinition, type PortInstance, type PortType, RightPanel, RightToggleButton, STATUS_LED_APPEARANCE, SVGArea, SVGLockedOverlay, type SVGLockedOverlayProps, type ScalingMetadata, ScrollableSVGWrapper, type SelectionState, Selector, type SelectorOption, type SelectorProps, type SimulationOptions, Sparkline, type SparklineProps, type StatusColorEntry, type StatusColorMap, StatusIndicator, type StatusIndicatorProps, type SymbolCategory, type SymbolDefinition, SymbolLibrary, type SymbolLibraryProps, type SymbolMetadata, type TelemetryBinding, type TelemetryMap, type TelemetryStatus$1 as TelemetryStatus, type TelemetryValue, ThemeProvider, ThemeToggle, type ThemeToggleProps, type Thresholds, type Transform, TrendLine, type TrendLineProps, UNKNOWN_GLYPH_RING_DASH, UNKNOWN_STATUS_GLYPH_COLOR_VAR, type UnknownGlyphSize, UnknownStatusGlyph, type UnknownStatusGlyphProps, type UseBooleanIndicatorsOptions, type UseDeviceControlsOptions, type UseDragOptions, type UseDragResult, type UseSelectionOptions, type UseSelectionResult, type UseTelemetryOptions, type UseTelemetryResult, type UseTelemetryStatusOptions, type UseViewBoxOptions, type UseViewBoxResult, ValueEntry, type ValueEntryProps, type ViewBox, ZoomButton, ZoomControls, calculateThresholdStatus, createConfigBinding, createControlBinding, exampleDiagram, exportDiagram, generateRoutePoints, getAppearanceDefaults, getAppearanceSchema, getAvailableBadgeGlyphs, getAvailableSymbols, getBadgeGlyph, getPortWorldPosition, getSymbolDefinition, importDiagram, mockSymbolLibrary, nodeHasPort, normalizeDeviceStatus, overlayStyles, readAppearanceValue, registerBadgeGlyph, registerBadgeGlyphs, registerSymbol, registerSymbols, resolvePresetColor, resolveStatusColor, useBooleanIndicators, useDeviceConfigs, useDeviceControls, useDrag, useKeyboardShortcuts, useSelection, useSimulation, useTelemetry, useTelemetryStatus, useTheme, useViewBox, validateDiagram, writeAppearanceValue };

package/dist/index.js

@@ -5031,6 +5031,32 @@ function writeAppearanceValue(node, field, value) {
   return { metadata: { ...node.metadata, [field.key]: value } };
 }
 
+// src/diagram/badges/nodeBadgeGlyphs.ts
+var PROHIBIT_GLYPH = {
+  id: "prohibit",
+  svgContent: '<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.4"/><line x1="5.6" y1="18.4" x2="18.4" y2="5.6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/>'
+};
+var builtInBadgeGlyphs = {
+  [PROHIBIT_GLYPH.id]: PROHIBIT_GLYPH
+};
+var customBadgeGlyphs = {};
+function registerBadgeGlyph(glyph) {
+  customBadgeGlyphs[glyph.id] = glyph;
+}
+function registerBadgeGlyphs(glyphs) {
+  if (Array.isArray(glyphs)) {
+    glyphs.forEach((glyph) => registerBadgeGlyph(glyph));
+  } else {
+    Object.values(glyphs).forEach((glyph) => registerBadgeGlyph(glyph));
+  }
+}
+function getBadgeGlyph(glyphId) {
+  return customBadgeGlyphs[glyphId] ?? builtInBadgeGlyphs[glyphId];
+}
+function getAvailableBadgeGlyphs() {
+  return [...Object.keys(customBadgeGlyphs), ...Object.keys(builtInBadgeGlyphs)];
+}
+
 // src/components/PIDCanvas/NodeRenderer.tsx
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var HATCH_TILE_SIZE = 7;
@@ -5040,6 +5066,75 @@ var HATCH_STRIPE_OPACITY = 85 / 255;
 function isUnknownNode(node) {
   return node.positionUnknown === true || normalizeDeviceStatus(node.status) === "unknown";
 }
+var DEFAULT_BADGE_CORNER = "top-right";
+var DEFAULT_BADGE_SIZE = 14;
+var DEFAULT_BADGE_COLOR = "#111827";
+var DEFAULT_BADGE_BACKGROUND = "#d1d5db";
+var BADGE_GLYPH_BOX = 24;
+var BADGE_BLINK_KEYFRAME_ID = "pid-node-badge-blink-keyframes";
+var BADGE_BLINK_KEYFRAME_NAME = "pid-node-badge-blink";
+function ensureBadgeBlinkKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(BADGE_BLINK_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = BADGE_BLINK_KEYFRAME_ID;
+  style.textContent = `@keyframes ${BADGE_BLINK_KEYFRAME_NAME}{0%{opacity:1}50%{opacity:.15}100%{opacity:1}}`;
+  document.head.appendChild(style);
+}
+function badgeCenter(corner, vb, size) {
+  const margin = size / 4;
+  switch (corner) {
+    case "top-left":
+      return { x: -margin, y: -margin };
+    case "bottom-left":
+      return { x: -margin, y: vb.height + margin };
+    case "bottom-right":
+      return { x: vb.width + margin, y: vb.height + margin };
+    case "top-right":
+    default:
+      return { x: vb.width + margin, y: -margin };
+  }
+}
+function renderNodeBadge(badge, vb, rotation) {
+  const glyphDef = getBadgeGlyph(badge.glyph);
+  const size = badge.size ?? DEFAULT_BADGE_SIZE;
+  const color = badge.color ?? DEFAULT_BADGE_COLOR;
+  const backgroundColor = badge.backgroundColor ?? DEFAULT_BADGE_BACKGROUND;
+  const corner = badge.corner ?? DEFAULT_BADGE_CORNER;
+  const { x: cx, y: cy } = badgeCenter(corner, vb, size);
+  const radius = size / 2;
+  const glyphScale = size / BADGE_GLYPH_BOX;
+  let blinkStyle;
+  if (badge.blink) {
+    ensureBadgeBlinkKeyframes();
+    blinkStyle = {
+      animation: `${BADGE_BLINK_KEYFRAME_NAME} ${badge.blinkPeriodMs}ms ease-in-out infinite`
+    };
+  }
+  return /* @__PURE__ */ jsxs13(
+    "g",
+    {
+      "data-node-badge": badge.glyph,
+      "data-badge-corner": corner,
+      "data-badge-blink": badge.blink ? "true" : "false",
+      "aria-label": badge.label,
+      role: badge.label ? "img" : void 0,
+      transform: rotation ? `translate(${cx}, ${cy}) rotate(${-rotation})` : `translate(${cx}, ${cy})`,
+      style: blinkStyle,
+      children: [
+        /* @__PURE__ */ jsx17("circle", { r: radius, fill: backgroundColor }),
+        glyphDef && /* @__PURE__ */ jsx17(
+          "g",
+          {
+            color,
+            transform: `scale(${glyphScale}) translate(${-BADGE_GLYPH_BOX / 2}, ${-BADGE_GLYPH_BOX / 2})`,
+            dangerouslySetInnerHTML: { __html: glyphDef.svgContent }
+          }
+        )
+      ]
+    }
+  );
+}
 function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
@@ -5246,7 +5341,8 @@ function NodeRendererImpl({
                 transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${labelX}, ${labelY})` : void 0,
                 children: node.label || node.id
               }
-            )
+            ),
+            node.badge && renderNodeBadge(node.badge, vb, node.transform.rotation)
           ]
         },
         node.id
@@ -10341,7 +10437,9 @@ export {
   generateRoutePoints,
   getAppearanceDefaults,
   getAppearanceSchema,
+  getAvailableBadgeGlyphs,
   getAvailableSymbols,
+  getBadgeGlyph,
   getPortWorldPosition,
   getSymbolDefinition,
   importDiagram,
@@ -10350,6 +10448,8 @@ export {
   normalizeDeviceStatus,
   overlayStyles,
   readAppearanceValue,
+  registerBadgeGlyph,
+  registerBadgeGlyphs,
   registerSymbol,
   registerSymbols,
   resolvePresetColor,